moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 00:46:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-72799 navigation: Improvements to navigation styling

Browse source
This commit is contained in:
Mathew May 2021-10-21 13:16:27 +08:00
parent 738d4cac07
commit 24bfcd9fd7
10 changed files with 118 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

30
theme/boost/scss/moodle/moremenu.scss
View file

@ -17,8 +17,18 @@
}
&.active {
font-weight: bold;
border-bottom: solid 3px $primary;
background-color: $gray-100;
border-color: transparent;
border-bottom-color: $primary;
&:focus,
&:hover {
background-color: $gray-100;
border-bottom-color: $primary;
}
}
&.focus,
&:focus {
position: relative;
}
&[data-toggle="tab"] {
display: inline-flex;
@ -76,4 +86,20 @@
}
}
}
/* TODO: MDL-72481: Update this style to also apply to aria-selected. */
.dropdown-item[aria-current="true"],
.dropdown-item.active {
background-color: transparent;
color: $dropdown-link-color;
&:focus-within {
background-color: $dropdown-link-active-bg;
color: $dropdown-link-active-color;
a {
color: $dropdown-link-active-color;
}
}
&:before {
content: $fa-var-check;
}
}
}

5
theme/boost/scss/moodle/navbar.scss
View file

@ -1,5 +1,6 @@
@mixin hover-navbar {
background-color: $gray-200;
border-color: transparent;
background-color: $gray-100;
}
.navbar.fixed-top {
@ -8,7 +9,7 @@
box-shadow: none;
border-bottom: $gray-300 1px solid;
align-items: stretch;
height: $navbar-height;
height: $navbar-height + 1px;
.navbar-brand {
.logo {

4
theme/boost/scss/moodle/popover-region.scss
View file

@ -202,12 +202,12 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
font-size: 11px;
line-height: 11px;
position: absolute;
top: 5px;
top: $navbar-height / 4;
right: 0;
}
.popover-region-container {
top: calc(#{$navbar-height} - (#{$spacer} / 2));
top: $navbar-height;
}
}

1
theme/boost/scss/moodle/primarynavigation.scss
View file

@ -4,6 +4,7 @@
.nav-link {
height: $navbar-height;
color: $gray-900;
border-top: 3px solid transparent;
}
}
}

13
theme/boost/scss/moodle/secondarynavigation.scss
View file

@ -1,9 +1,14 @@
.secondary-navigation {
border-top: 1px solid $gray-300;
border-bottom: 1px solid $gray-300;
border-top: 1px solid $nav-tabs-border-color;
border-bottom: 1px solid $nav-tabs-border-color;
.navigation {
border-color: $gray-300;
height: $moremenu-height;
margin-bottom: map-get($spacers, 3);
background-color: $body-bg;
.nav-tabs {
border: none;
.nav-link {
border-radius: initial;
}
}
}
}

46
theme/boost/style/moodle.css
View file

@ -19653,11 +19653,11 @@ body {
font-size: 11px;
line-height: 11px;
position: absolute;
top: 5px;
top: 15px;
right: 0; }
.navbar .popover-region-container {
top: calc(60px - (1rem / 2)); }
top: 60px; }
.content-item-container {
width: 100%;
@ -20537,7 +20537,7 @@ div.editor_atto_toolbar button .icon {
box-shadow: none;
border-bottom: #dee2e6 1px solid;
align-items: stretch;
height: 60px; }
height: 61px; }
.navbar.fixed-top .navbar-brand .logo {
max-height: calc(60px - (0.25rem * 2)); }
.navbar.fixed-top .nav-link {
@ -20941,7 +20941,8 @@ div.editor_atto_toolbar button .icon {
.moremenu {
opacity: 0;
height: 60px; }
height: 60px;
/* TODO: MDL-72481: Update this style to also apply to aria-selected. */ }
.moremenu.observed {
opacity: 1; }
.moremenu .nav-link {
@ -20953,10 +20954,17 @@ div.editor_atto_toolbar button .icon {
border-left: none;
border-top: none; }
.moremenu .nav-link:hover, .moremenu .nav-link:focus {
background-color: #e9ecef; }
border-color: transparent;
background-color: #f8f9fa; }
.moremenu .nav-link.active {
font-weight: bold;
border-bottom: solid 3px #0f6cbf; }
background-color: #f8f9fa;
border-color: transparent;
border-bottom-color: #0f6cbf; }
.moremenu .nav-link.active:focus, .moremenu .nav-link.active:hover {
background-color: #f8f9fa;
border-bottom-color: #0f6cbf; }
.moremenu .nav-link.focus, .moremenu .nav-link:focus {
position: relative; }
.moremenu .nav-link[data-toggle="tab"] {
display: inline-flex;
flex-direction: column;
@ -20996,12 +21004,27 @@ div.editor_atto_toolbar button .icon {
background-color: #0f6cbf; }
.moremenu .dropdownmoremenu > .dropdown-menu .dropdown-menu .dropdown-divider {
display: none; }
.moremenu .dropdown-item[aria-current="true"],
.moremenu .dropdown-item.active {
background-color: transparent;
color: #1d2125; }
.moremenu .dropdown-item[aria-current="true"]:focus-within,
.moremenu .dropdown-item.active:focus-within {
background-color: #0f6cbf;
color: #fff; }
.moremenu .dropdown-item[aria-current="true"]:focus-within a,
.moremenu .dropdown-item.active:focus-within a {
color: #fff; }
.moremenu .dropdown-item[aria-current="true"]:before,
.moremenu .dropdown-item.active:before {
content: ""; }
.primary-navigation .navigation {
height: 60px; }
.primary-navigation .navigation .nav-link {
height: 60px;
color: #1d2125; }
color: #1d2125;
border-top: 3px solid transparent; }
@media (max-width: 767.98px) {
.primary-navigation {
@ -21023,9 +21046,12 @@ div.editor_atto_toolbar button .icon {
border-top: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6; }
.secondary-navigation .navigation {
border-color: #dee2e6;
height: 60px;
margin-bottom: 1rem; }
background-color: #fff; }
.secondary-navigation .navigation .nav-tabs {
border: none; }
.secondary-navigation .navigation .nav-tabs .nav-link {
border-radius: initial; }
body {
-webkit-font-smoothing: antialiased;

3
theme/boost/templates/navbar.mustache
View file

@ -68,7 +68,7 @@
<span class="sr-only">{{#str}}sidepanel, core{{/str}}</span>
</button>
<a href="{{{ config.wwwroot }}}" class="navbar-brand d-none d-md-flex align-items-center m-0 p-0 aabtn">
<a href="{{{ config.wwwroot }}}" class="navbar-brand d-none d-md-flex align-items-center m-0 mr-4 p-0 aabtn">
{{# output.should_display_navbar_logo }}
<img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
{{/ output.should_display_navbar_logo }}
@ -98,7 +98,6 @@
{{> core/user_menu }}
{{/usermenu}}
</div>
<div class="divider border-left h-75 align-self-center ml-1 mr-3"></div>
{{{ output.edit_switch }}}
</div>
</nav>

46
theme/classic/style/moodle.css
View file

@ -19599,11 +19599,11 @@ body {
font-size: 11px;
line-height: 11px;
position: absolute;
top: 5px;
top: 12.5px;
right: 0; }
.navbar .popover-region-container {
top: calc(50px - (1rem / 2)); }
top: 50px; }
.content-item-container {
width: 100%;
@ -20483,7 +20483,7 @@ div.editor_atto_toolbar button .icon {
box-shadow: none;
border-bottom: #dee2e6 1px solid;
align-items: stretch;
height: 50px; }
height: 51px; }
.navbar.fixed-top .navbar-brand .logo {
max-height: calc(50px - (0.25rem * 2)); }
.navbar.fixed-top .nav-link {
@ -20887,7 +20887,8 @@ div.editor_atto_toolbar button .icon {
.moremenu {
opacity: 0;
height: 50px; }
height: 50px;
/* TODO: MDL-72481: Update this style to also apply to aria-selected. */ }
.moremenu.observed {
opacity: 1; }
.moremenu .nav-link {
@ -20899,10 +20900,17 @@ div.editor_atto_toolbar button .icon {
border-left: none;
border-top: none; }
.moremenu .nav-link:hover, .moremenu .nav-link:focus {
background-color: #e9ecef; }
border-color: transparent;
background-color: #f8f9fa; }
.moremenu .nav-link.active {
font-weight: bold;
border-bottom: solid 3px #0f6cbf; }
background-color: #f8f9fa;
border-color: transparent;
border-bottom-color: #0f6cbf; }
.moremenu .nav-link.active:focus, .moremenu .nav-link.active:hover {
background-color: #f8f9fa;
border-bottom-color: #0f6cbf; }
.moremenu .nav-link.focus, .moremenu .nav-link:focus {
position: relative; }
.moremenu .nav-link[data-toggle="tab"] {
display: inline-flex;
flex-direction: column;
@ -20942,12 +20950,27 @@ div.editor_atto_toolbar button .icon {
background-color: #0f6cbf; }
.moremenu .dropdownmoremenu > .dropdown-menu .dropdown-menu .dropdown-divider {
display: none; }
.moremenu .dropdown-item[aria-current="true"],
.moremenu .dropdown-item.active {
background-color: transparent;
color: #1d2125; }
.moremenu .dropdown-item[aria-current="true"]:focus-within,
.moremenu .dropdown-item.active:focus-within {
background-color: #0f6cbf;
color: #fff; }
.moremenu .dropdown-item[aria-current="true"]:focus-within a,
.moremenu .dropdown-item.active:focus-within a {
color: #fff; }
.moremenu .dropdown-item[aria-current="true"]:before,
.moremenu .dropdown-item.active:before {
content: ""; }
.primary-navigation .navigation {
height: 50px; }
.primary-navigation .navigation .nav-link {
height: 50px;
color: #1d2125; }
color: #1d2125;
border-top: 3px solid transparent; }
@media (max-width: 767.98px) {
.primary-navigation {
@ -20969,9 +20992,12 @@ div.editor_atto_toolbar button .icon {
border-top: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6; }
.secondary-navigation .navigation {
border-color: #dee2e6;
height: 50px;
margin-bottom: 1rem; }
background-color: #fff; }
.secondary-navigation .navigation .nav-tabs {
border: none; }
.secondary-navigation .navigation .nav-tabs .nav-link {
border-radius: initial; }
body {
-webkit-font-smoothing: antialiased;