Skip to content
Snippets Groups Projects
Commit 026e5b8e authored by Alexander Bias's avatar Alexander Bias Committed by Kathrin Osswald
Browse files

Change the CSS workarounds which were introduced for local_boostnavigation +...

Change the CSS workarounds which were introduced for local_boostnavigation + Simplify the borders between the nav drawer nodes.
parent f042b5e6
No related branches found
No related tags found
No related merge requests found
...@@ -3,8 +3,11 @@ moodle-theme_boost_campus ...@@ -3,8 +3,11 @@ moodle-theme_boost_campus
Changes Changes
------- -------
### Unreleased ### Unreleased
* 2018-02-25 - Simplify the borders between the nav drawer nodes, all borders are now simply solid again. Thanks for understanding.
* 2018-02-25 - Change the CSS workarounds which were introduced for local_boostnavigation.
* 2018-02-23 - Changes to footer SCSS due to changes in Moodle core. * 2018-02-23 - Changes to footer SCSS due to changes in Moodle core.
* 2018-02-23 - Improved README.md for section login background images. * 2018-02-23 - Improved README.md for section login background images.
* 2018-02-22 - Improvements to the nav drawer icons feature. * 2018-02-22 - Improvements to the nav drawer icons feature.
......
/* stylelint-disable declaration-no-important */ /* stylelint-disable declaration-no-important */
/* stylelint-disable max-line-length */
/*------------------------------------ /*------------------------------------
Login page Login page
...@@ -158,12 +159,6 @@ body.loginbackgroundimage { ...@@ -158,12 +159,6 @@ body.loginbackgroundimage {
#nav-drawer { #nav-drawer {
/* First remove all existing borders from the menu items + reset the bottom margin. */
.list-group-item {
border: 0;
margin-bottom: 0;
}
/* Reduce space between pix icons and text as this is too much. */ /* Reduce space between pix icons and text as this is too much. */
.media-left { .media-left {
padding-right: 2px; padding-right: 2px;
...@@ -173,9 +168,7 @@ body.loginbackgroundimage { ...@@ -173,9 +168,7 @@ body.loginbackgroundimage {
* General left menu. * General left menu.
*/ */
/* Course home menu. */ /* Course home menu. */
.list-group-item[data-key=coursehome] { .list-group-item[data-key="coursehome"] {
/* Add solid border and realign the node with the other ones. */
@include navdrawer-node-separator(parent);
padding: .75rem 1.25rem; padding: .75rem 1.25rem;
/* As this node is a heading node, no icon is needed and the media span can be hidden. */ /* As this node is a heading node, no icon is needed and the media span can be hidden. */
.media-left { .media-left {
...@@ -183,40 +176,20 @@ body.loginbackgroundimage { ...@@ -183,40 +176,20 @@ body.loginbackgroundimage {
} }
} }
/* Menu items participants, badges, grades and competencies need dashed bottom border. */
.list-group-item[data-key=participants],
.list-group-item[data-key=badgesview],
.list-group-item[data-key=grades],
.list-group-item[data-key=competencies] {
@include navdrawer-node-separator(child);
}
/* Add solid border: myhome, website start and calendar. */
.list-group-item[data-key=myhome],
.list-group-item[data-key=home],
.list-group-item[data-key=calendar] {
@include navdrawer-node-separator(parent);
}
/* Menu item: my courses. */ /* Menu item: my courses. */
.list-group-item[data-key=mycourses] { .list-group-item[data-key="mycourses"] {
/* Separate the courses menu items from the other ones and add a bottom border*/
@include navdrawer-node-separator(parent);
margin-top: 15px; margin-top: 15px;
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
/* As this node is a heading node, no icon is needed and the media span can be hidden. */ /* As this node is a heading node, no icon is needed and the media span can be hidden. */
.media-left { .media-left {
display: none; display: none;
} }
} }
/* Dashed border for all courses I'm enrolled in except the last one. */ /* Remove border of child nodes which should appear as one block. */
.list-group-item[data-parent-key=mycourses] { .list-group-item[data-parent-key="mycourses"],
@include navdrawer-node-separator(child); .list-group-item[href*="#section-"]:not([href*="#section-0"]) {
} border-top: none;
.list-group-item[data-parent-key=mycourses]:last-child {
border-bottom: none;
} }
/* If setting 'navdrawericons' is disabled, do not show any icons by hiding the whole media-left span. */ /* If setting 'navdrawericons' is disabled, do not show any icons by hiding the whole media-left span. */
...@@ -882,75 +855,49 @@ a[href^="mailto"]::before { ...@@ -882,75 +855,49 @@ a[href^="mailto"]::before {
margin-left: 0.3em; margin-left: 0.3em;
} }
/*------------------------------------ /*------------------------------------
Special: Local Plugins Special: Local Plugins
-------------------------------------*/ -------------------------------------*/
/* Special styles for plugin local_boostnavigation. */ /* Special styles for plugin local_boostnavigation. */
#nav-drawer { #nav-drawer {
/* Remove the arrow icon provided by the plugin because we changed the HTML structure of the menu items. */ /* Remove border of child nodes which should appear as one block. */
.list-group-item[data-key='localboostnavigationcoursesections'], .list-group-item[data-key^="localboostnavigationactivity"],
.list-group-item[data-key='localboostnavigationactivities'], .list-group-item[data-parent-key^="localboostnavigationcustom"] {
.list-group-item[data-key^='localboostnavigationcustom'] { border-top: none;
div::after {
display: none;
}
.media-left {
display: none;
}
} }
/* Add the icon at the needed place within this theme. */ /* Remove (empty) icons from the heading nodes. */
.list-group-item[data-key='localboostnavigationcoursesections'][data-collapse='0'] .media-body::after, .list-group-item[data-key="localboostnavigationactivities"] .media-left,
.list-group-item[data-key='localboostnavigationactivities'][data-collapse='0'] .media-body::after, .list-group-item[data-key="localboostnavigationcoursesections"] .media-left,
.list-group-item[data-key^='localboostnavigationcustom'][data-isexpandable="1"][data-collapse='0'] .media-body::after { .list-group-item[data-key^="localboostnavigationcustom"][data-isexpandable="1"] .media-left {
content: url([[pix:i/dropdown]]);
position: absolute;
top: 0.75rem;
right: 0.75rem;
}
.list-group-item[data-key='localboostnavigationcoursesections'][data-collapse='1'] .media-body::after,
.list-group-item[data-key='localboostnavigationactivities'][data-collapse='1'] .media-body::after,
.list-group-item[data-key^='localboostnavigationcustom'][data-isexpandable="1"][data-collapse='1'] .media-body::after {
content: url([[pix:t/collapsed]]);
position: absolute;
top: 0.75rem;
right: 0.75rem;
}
.list-group-item[data-parent-key='localboostnavigationactivities'] > div::before {
margin-left: 0;
margin-right: 0.3rem;
}
.list-group-item[data-parent-key='localboostnavigationactivities'] {
.media-left {
display: none; display: none;
} }
.media-body {
display: inline; /* If setting 'navdrawericons' is enabled, revert the indent to the collapsed custom child nodes which was
added by local_boostnavigation. Unfortunately, this has to be done for each custom node block individually because the child
node does not know (with a CSS-selectable attribute) if its parent node is collapsed or node. */
@if variable-exists(navdrawericons) {
@if $navdrawericons == 'yes' {
.list-group-item[data-key^="localboostnavigationcustomcourseusers"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustomcourseusers"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustomcourseusers"] > div,
.list-group-item[data-key^="localboostnavigationcustomcourseadmins"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustomcourseadmins"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustomcourseadmins"] > div,
.list-group-item[data-key^="localboostnavigationcustomrootusers"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustomrootusers"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustomrootusers"] > div,
.list-group-item[data-key^="localboostnavigationcustomcrootadmins"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustomrootadmins"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustomrooradmins"] > div,
.list-group-item[data-key^="localboostnavigationcustombottomusers"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustombottomusers"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustombottomusers"] > div,
.list-group-item[data-key^="localboostnavigationcustombottomadmins"][data-isexpandable="1"]:not([data-parent-key^="localboostnavigationcustombottomadmins"]) ~ .list-group-item[data-parent-key^="localboostnavigationcustombottomadmins"] > div {
margin-left: inherit !important;
} }
} }
/* Delete the borders for the sub items to group them together. */
.list-group-item[data-key='localboostnavigationactivities'][data-collapse='1'],
.list-group-item[data-key='localboostnavigationactivities'][data-collapse='0'],
.list-group-item[data-key='localboostnavigationcoursesections'][data-collapse='0'],
.list-group-item[data-key='localboostnavigationcoursesections'][data-collapse='1'],
.list-group-item[data-key="mycourses"][data-collapse="1"],
.list-group-item[data-parent-key='localboostnavigationcoursesections'] {
border-bottom: none;
} }
/* Special styles for the node resources. */
.list-group-item[data-key='localboostnavigationresources'] { /* If setting 'navdrawericons' is enabled, revert the indent to the activity nodes which was added by local_boostnavigation. */
@include navdrawer-node-separator(child); /* TODO: Remove when MDL-61298 is integrated to Moodle core. */
border-top: 1px dashed $gray-light; @if variable-exists(navdrawericons) {
.media-left { @if $navdrawericons == 'yes' {
content: url([[pix:e/copy]]); .list-group-item[data-key^="localboostnavigationactivity"] > div {
display: inline; margin-left: inherit !important;
padding-left: 0.5rem;
} }
.media-body {
display: inline;
padding-left: 0.3rem;
} }
} }
} }
/*-----------------------------
Left Menu
-----------------------------*/
/* Mixins */
@mixin navdrawer-node-separator($nodetype) {
@if $nodetype == child {
border-bottom: 1px dashed $gray-light;
}
@else if $nodetype == parent {
border-bottom: 1px solid $gray-light;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment