MDL-72799 navigation: Improvements to navigation styling

lib/templates/editswitch.mustache

@@ -30,6 +30,7 @@
         "string": "Edit on"
     }
 }}
+<div class="divider border-left h-75 align-self-center ml-1 mr-3"></div>
 <form action="{{{legacyseturl}}}" method="post" class="d-flex align-items-center editmode-switch-form">
     <div class="custom-control custom-control-right custom-switch text-nowrap">
         <input type="checkbox"{{!

lib/templates/full_header.mustache

@@ -30,7 +30,7 @@
     }
 }}
 <header id="page-header" class="row">
-    <div class="col-12 pt-3">
+    <div class="col-12 py-3">
         <div class="card border-0">
             <div class="card-body p-2 navigation-card">
                 <div class="d-flex flex-wrap">

theme/boost/scss/moodle/moremenu.scss

@@ -17,8 +17,18 @@
         }
 
         &.active {
-            font-weight: bold;
+            background-color: $gray-100;
-            border-bottom: solid 3px $primary;
+            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;
+        }
+    }
 }

theme/boost/scss/moodle/navbar.scss

@@ -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 {

theme/boost/scss/moodle/popover-region.scss

@@ -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;
     }
 
 }

theme/boost/scss/moodle/primarynavigation.scss

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

theme/boost/scss/moodle/secondarynavigation.scss

@@ -1,9 +1,14 @@
 .secondary-navigation {
-    border-top: 1px solid $gray-300;
+    border-top: 1px solid $nav-tabs-border-color;
-    border-bottom: 1px solid $gray-300;
+    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;
+            }
+        }
     }
 }

theme/boost/style/moodle.css

@@ -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;
+      background-color: #f8f9fa;
-      border-bottom: solid 3px #0f6cbf; }
+      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;

theme/boost/templates/navbar.mustache

@@ -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>

theme/classic/style/moodle.css

@@ -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;
+      background-color: #f8f9fa;
-      border-bottom: solid 3px #0f6cbf; }
+      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;