feat(navbar): use close icon when collapsible menu is open

Orange-OpenSource · Dec 12, 2019 · 1fa2dd5 · 1fa2dd5
1 parent e2f7008
commit 1fa2dd5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 36 deletions.
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -163,15 +163,6 @@
       }
     }
 
-    &[role="menuitem"]::before {
-      float: right;
-      margin-right: 1rem;
-      // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
-      font: $font-weight-normal $font-size-base icon-orange;
-      color: $white;
-      content: "\e93e";
-    }
-
     &:focus {
       outline-offset: -#{$border-width};
     }
@@ -298,32 +289,30 @@
   @include media-breakpoint-up(sm) {
     margin: map-get($spacers, 1) 0 0;
   }
-  // end mod
 
   @include hover-focus() {
     color: $navbar-dark-color; // Boosted mod
     text-decoration: none;
-    background-color: $navbar-light-color; // Boosted mod
-
-    // Boosted mod
-    .navbar-toggler-icon {
-      background-image: escape-svg($navbar-dark-toggler-icon-hover-bg);
-    }
-    // end mod
   }
 
-  // Boosted mod
-  &:active {
-    background-color: $orange-2;
-
-    .navbar-toggler-icon {
-      background-image: escape-svg($navbar-dark-toggler-icon-bg);
-    }
+  &:hover .navbar-toggler-icon,
+  &:focus .navbar-toggler-icon,
+  &:active .navbar-toggler-icon {
+    background-image: escape-svg($navbar-toggler-icon-hover);
   }
 
   &:focus {
     outline: 0;
   }
+
+  // Boosted mod: close icon when opened
+  .navbar &[aria-expanded="true"] {
+    &:hover .navbar-toggler-icon,
+    &:focus .navbar-toggler-icon,
+    &:active .navbar-toggler-icon {
+      background-image: escape-svg($close-icon-hover);
+    }
+  }
   // end mod
 
   // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
@@ -518,17 +507,23 @@
 
   .navbar-toggler {
     color: $navbar-light-color;
-    background-color: $navbar-dark-color;
     border-color: $navbar-light-toggler-border-color;
+    // Boosted mod: remove background
 
     @include hover-focus() {
-      color: $navbar-dark-color;
-      background-color: $navbar-light-color;
+      color: $navbar-light-hover-color;
+      // Boosted mod: remove background
+    }
+
+    // Boosted mod: close icon when opened
+    &[aria-expanded="true"] .navbar-toggler-icon {
+      background-image: escape-svg($close-icon);
     }
+    // end mod
   }
 
   .navbar-toggler-icon {
-    background-image: escape-svg($navbar-light-toggler-icon-bg);
+    background-image: escape-svg($navbar-light-toggler-icon);
   }
 
   .navbar-text {
@@ -587,16 +582,22 @@
   .navbar-toggler {
     color: $navbar-dark-color;
     background-color: $navbar-light-color;
-    border-color: $navbar-dark-toggler-border-color;
+    // Boosted mod: remove background
 
     @include hover-focus() {
-      color: $navbar-light-color;
-      background-color: $navbar-dark-color;
+      color: $navbar-dark-hover-color;
+      // Boosted mod: remove background
     }
+
+    // Boosted mod: close icon when opened
+    &[aria-expanded="true"] .navbar-toggler-icon {
+      background-image: escape-svg($close-icon-dark);
+    }
+    // end mod
   }
 
   .navbar-toggler-icon {
-    background-image: escape-svg($navbar-dark-toggler-icon-bg);
+    background-image: escape-svg($navbar-dark-toggler-icon);
   }
 
   .navbar-text {

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -839,22 +839,22 @@ $navbar-dark-color:                 $white !default;
 $navbar-dark-hover-color:           $orange-2 !default; // Boosted mod
 $navbar-dark-active-color:          $navbar-dark-hover-color !default;
 $navbar-dark-disabled-color:        $gray-400 !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-icon-hover-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$black}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color:  null !default;
+$navbar-dark-toggler-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$white}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; // Boosted mod
+// $navbar-dark-toggler-border-color:  null !default; // Boosted mod
 
 $navbar-light-color:                $black !default;
 $navbar-light-hover-color:          $orange !default; // Boosted mod
 $navbar-light-active-color:         $navbar-light-hover-color !default; // Boosted mod
 $navbar-light-disabled-color:       $gray-500 !default; // Boosted mod
-$navbar-light-toggler-icon-bg:      $navbar-dark-toggler-icon-bg !default;
+$navbar-light-toggler-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$black}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; // Boosted mod
 $navbar-light-toggler-border-color: null !default;
 
 $navbar-light-brand-color:          $navbar-light-color !default;
 $navbar-light-brand-hover-color:    $navbar-light-active-color !default;
 $navbar-dark-brand-color:           $navbar-dark-color !default;
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
 
+$navbar-toggler-icon-hover:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$primary}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; // Boosted mod
 
 // Dropdowns
 //