root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Redo navbar-toggler 

- Require inner element for the icon for improved customization (e.g., drop the element to replace it with your own icon font or SVG)
- Tighten up padding
- Better comments
This commit is contained in:
Mark Otto 2016-12-21 22:10:44 -08:00 committed by Mark Otto
parent 80674b0c58
commit 8d9d84784a
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
scss/_navbar.scss
View File

@ -98,14 +98,11 @@
// Bootstrap JavaScript plugin. // Bootstrap JavaScript plugin.
.navbar-toggler { .navbar-toggler {
width: 2.5em;
height: 2em;
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
font-size: $navbar-toggler-font-size; font-size: $navbar-toggler-font-size;
line-height: 1; line-height: 1;
background: transparent no-repeat center center; background: transparent; // remove default button style
background-size: 24px 24px; border: $border-width solid transparent; // remove default button style
border: $border-width solid transparent;
@include border-radius($navbar-toggler-border-radius); @include border-radius($navbar-toggler-border-radius);
@include hover-focus { @include hover-focus {
@ -113,6 +110,18 @@
} }
} }
// Keep as a separate element so folks can easily override it with another icon
// or image file as needed.
.navbar-toggler-icon {
display: inline-block;
content: "";
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background: no-repeat center center;
background-size: 100% 100%;
}
// Navigation // Navigation
// //
// Custom navbar navigation built on the base `.nav` styles. // Custom navbar navigation built on the base `.nav` styles.
@ -163,10 +172,13 @@
} }
.navbar-toggler { .navbar-toggler {
background-image: $navbar-light-toggler-bg;
border-color: $navbar-light-toggler-border; border-color: $navbar-light-toggler-border;
} }
.navbar-toggler-icon {
background-image: $navbar-light-toggler-bg;
}
.navbar-divider { .navbar-divider {
background-color: rgba(0,0,0,.075); background-color: rgba(0,0,0,.075);
} }
@ -211,10 +223,13 @@
} }
.navbar-toggler { .navbar-toggler {
background-image: $navbar-inverse-toggler-bg;
border-color: $navbar-inverse-toggler-border; border-color: $navbar-inverse-toggler-border;
} }
.navbar-toggler-icon {
background-image: $navbar-inverse-toggler-bg;
}
.navbar-divider { .navbar-divider {
background-color: rgba(255,255,255,.075); background-color: rgba(255,255,255,.075);
} }

2
scss/_variables.scss
View File

@ -592,7 +592,7 @@ $navbar-brand-padding-y: .25rem !default;
$navbar-divider-padding-y: .425rem !default; $navbar-divider-padding-y: .425rem !default;
$navbar-toggler-padding-x: .75rem !default; $navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-padding-y: .5rem !default; $navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-border-radius: $btn-border-radius !default;