rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2016-09-11 22:25:42 -07:00
parent 818d1f53a5
commit d62c3e3f80
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
scss/_navbar.scss
View File

@ -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);
}

2
scss/_variables.scss
View File

@ -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