diff options
| author | Mark Otto <[email protected]> | 2016-09-11 22:25:42 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-09-11 22:25:42 -0700 |
| commit | d62c3e3f8061fd2ed1ba397a673c9a2b9b72bc30 (patch) | |
| tree | d3a25ca3b03ee6c07fbf2831d8da58d8fc1a52f9 | |
| parent | 818d1f53a51b2c4888fde639c19298b1b3b74063 (diff) | |
| download | bootstrap-d62c3e3f8061fd2ed1ba397a673c9a2b9b72bc30.tar.xz bootstrap-d62c3e3f8061fd2ed1ba397a673c9a2b9b72bc30.zip | |
Swap for custom svg background that we can embed to set the color of the stroke via Sass variable
| -rw-r--r-- | scss/_navbar.scss | 20 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 |
2 files changed, 15 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); } diff --git a/scss/_variables.scss b/scss/_variables.scss index db9c202ff..0b249f3d1 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 |