From d62c3e3f8061fd2ed1ba397a673c9a2b9b72bc30 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 11 Sep 2016 22:25:42 -0700
Subject: [PATCH] Swap for custom svg background that we can embed to set the
 color of the stroke via Sass variable

---
 scss/_navbar.scss    | 20 +++++++++++++-------
 scss/_variables.scss |  2 ++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 353e6958e3..ce4e02431f 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);
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index db9c202ff6..0b249f3d12 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -487,11 +487,13 @@ $navbar-dark-color:                 rgba(255,255,255,.5) !default;
 $navbar-dark-hover-color:           rgba(255,255,255,.75) !default;
 $navbar-dark-active-color:          rgba(255,255,255,1) !default;
 $navbar-dark-disabled-color:        rgba(255,255,255,.25) !default;
+$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
 
 $navbar-light-color:                rgba(0,0,0,.3) !default;
 $navbar-light-hover-color:          rgba(0,0,0,.6) !default;
 $navbar-light-active-color:         rgba(0,0,0,.8) !default;
 $navbar-light-disabled-color:       rgba(0,0,0,.15) !default;
+$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
 
 
 // Navs