MDL-73791 theme_boost: mobile navbar design updates

safatshahin · Feb 21, 2022 · 7d6efea · 7d6efea
1 parent 0f94f29
commit 7d6efea
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/theme/boost/scss/moodle/primarynavigation.scss b/theme/boost/scss/moodle/primarynavigation.scss
@@ -13,9 +13,8 @@
     .primary-navigation {
         display: none;
     }
-    .editmode-switch-form .custom-control-label {
-        font-size: 0;
-        color: transparent;
+    .editmode-switch-form label {
+        @include sr-only();
     }
 }
 

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -21534,9 +21534,16 @@ div.editor_atto_toolbar button .icon {
 @media (max-width: 767.98px) {
   .primary-navigation {
     display: none; }
-  .editmode-switch-form .custom-control-label {
-    font-size: 0;
-    color: transparent; } }
+  .editmode-switch-form label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0; } }
 
 .editmode-switch-form .custom-control-input {
   width: 100%;

diff --git a/theme/boost/templates/navbar.mustache b/theme/boost/templates/navbar.mustache
@@ -57,7 +57,7 @@
 }}
 <nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
 
-    <button class="navbar-toggler aabtn d-block d-md-none my-1 mr-2" data-toggler="drawers" data-action="toggle" data-target="theme_boost-drawers-primary">
+    <button class="navbar-toggler aabtn d-block d-md-none px-1 my-1 border-0" data-toggler="drawers" data-action="toggle" data-target="theme_boost-drawers-primary">
         <span class="navbar-toggler-icon"></span>
         <span class="sr-only">{{#str}}sidepanel, core{{/str}}</span>
     </button>

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -21480,9 +21480,16 @@ div.editor_atto_toolbar button .icon {
 @media (max-width: 767.98px) {
   .primary-navigation {
     display: none; }
-  .editmode-switch-form .custom-control-label {
-    font-size: 0;
-    color: transparent; } }
+  .editmode-switch-form label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0; } }
 
 .editmode-switch-form .custom-control-input {
   width: 100%;