Swap for custom svg background that we can embed to set the color of the stroke via Sass variable

1 files changed, 13 insertions, 7 deletions

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 353e6958e..ce4e02431 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -105,16 +105,14 @@
 // Bootstrap JavaScript plugin.
 
 .navbar-toggler {
-  box-sizing: content-box;
-  width: 1em;
-  height: 1em;
+  width: 2.5em;
+  height: 2em;
   padding: .5rem .75rem;
   font-size: $font-size-lg;
   line-height: 1;
-  background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Crect%20y%3D%222%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%227%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2212%22%20width%3D%2216%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E) no-repeat 50% 50%;
-  background-clip: content-box;
-  background-origin: content-box;
-  background-size: 1em 1em;
+  background-color: transparent;
+  background: transparent no-repeat center center;
+  background-size: 24px 24px;
   border: $border-width solid transparent;
   @include border-radius($btn-border-radius);
 
@@ -176,6 +174,10 @@
     }
   }
 
+  .navbar-toggler {
+    background-image: $navbar-light-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(0,0,0,.075);
   }
@@ -210,6 +212,10 @@
     }
   }
 
+  .navbar-toggler {
+    background-image: $navbar-dark-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(255,255,255,.075);
   }