feat(navbar): new navbar-toggler-icon(s) to switch from burger to cross

Orange-OpenSource · Jul 1, 2019 · 3690c4f · 3690c4f
1 parent 5f76825
commit 3690c4f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -209,25 +209,29 @@
   border: $navbar-toggler-border-width solid transparent; // remove default button style
   @include border-radius($navbar-toggler-border-radius);
 
+  // Boosted mod
   @include hover-focus {
     text-decoration: none;
-    // Boosted mod
-    background-color: #fff;
+
     .navbar-toggler-icon {
-      background-image: $navbar-dark-toggler-icon-hover-bg;
+      @include svg-menu($navbar-dark-hover-color);
     }
-    // end mod
   }
-  // Boosted mod
-  &:active {
-    background-color: theme-color("primary");
 
+  .navbar &[aria-expanded="true"]:focus,
+  .navbar &[aria-expanded="true"]:hover,
+  .navbar &[aria-expanded="true"]:active {
     .navbar-toggler-icon {
-      background-image: $navbar-dark-toggler-icon-bg;
+      @include svg-delete($navbar-dark-hover-color);
     }
   }
 
-  &:focus {
+  @include focus {
+    outline-color: $navbar-dark-hover-color;
+    outline-offset: .625rem;
+  }
+
+  @include hover {
     outline: 0;
   }
   // end mod
@@ -241,13 +245,24 @@
 // Keep as a separate element so folks can easily override it with another icon
 // or image file as needed.
 .navbar-toggler-icon {
+  // Boosted mod
+  position: relative;
   display: inline-block;
   width: $navbar-toggler-icon-size; // Boosted mod create a var for the toggler size
   height: $navbar-toggler-icon-size; // Boosted mod create a var for the toggler size
   vertical-align: middle;
-  content: "";
-  background: no-repeat center center;
-  background-size: 100% 100%;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $navbar-toggler-icon-size;
+    height: $navbar-toggler-icon-size;
+    content: "";
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  // End Boosted mod
 }
 
 // Generate series of `.navbar-expand-*` responsive classes for configuring
@@ -402,10 +417,14 @@
   .navbar-toggler {
     color: $navbar-light-color;
     border-color: $navbar-light-toggler-border-color;
+
+    &[aria-expanded="true"] .navbar-toggler-icon {
+      @include svg-delete($navbar-light-color);
+    }
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-light-toggler-icon-bg;
+    @include svg-menu($navbar-light-color);
   }
 
   .navbar-text {
@@ -454,10 +473,14 @@
   .navbar-toggler {
     color: $navbar-dark-color;
     border-color: $navbar-dark-toggler-border-color;
+
+    &[aria-expanded="true"] .navbar-toggler-icon {
+      @include svg-delete($navbar-dark-color);
+    }
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-dark-toggler-icon-bg;
+    @include svg-menu($navbar-dark-color);
   }
 
   .navbar-text {

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -825,16 +825,12 @@ $navbar-dark-color:                 $white !default;
 $navbar-dark-hover-color:           theme-color("primary") !default;
 $navbar-dark-active-color:          $navbar-dark-hover-color !default;
 $navbar-dark-disabled-color:        $gray-400 !default;
-$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='25' height='25' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='#{$navbar-dark-color}' d='M2 19h21v-2H2v2zm0-6h21v-2H2v2zm0-6h21V5H2v2z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$navbar-dark-toggler-icon-hover-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='25' height='25' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='#000' d='M2 19h21v-2H2v2zm0-6h21v-2H2v2zm0-6h21V5H2v2z'/%3e%3c/svg%3e"), "#", "%23") !default;
-
 $navbar-dark-toggler-border-color:  rgba(255, 255, 255, .1) !default;
 
 $navbar-light-color:                $black !default;
 $navbar-light-hover-color:          $navbar-dark-hover-color !default;
 $navbar-light-active-color:         $navbar-dark-active-color !default;
 $navbar-light-disabled-color:       $navbar-dark-disabled-color !default;
-$navbar-light-toggler-icon-bg:      $navbar-dark-toggler-icon-bg !default;
 $navbar-light-toggler-border-color: rgba($black, .1) !default;
 
 $navbar-light-brand-color:                $navbar-light-color !default;