rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Redo navbar-toggler

Browse Source 
- 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.
.navbar-toggler {
width: 2.5em;
height: 2em;
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
font-size: $navbar-toggler-font-size;
line-height: 1;
background: transparent no-repeat center center;
background-size: 24px 24px;
border: $border-width solid transparent;
background: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius);
@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
//
// Custom navbar navigation built on the base `.nav` styles.
@ -163,10 +172,13 @@
}
.navbar-toggler {
background-image: $navbar-light-toggler-bg;
border-color: $navbar-light-toggler-border;
}
.navbar-toggler-icon {
background-image: $navbar-light-toggler-bg;
}
.navbar-divider {
background-color: rgba(0,0,0,.075);
}
@ -211,10 +223,13 @@
}
.navbar-toggler {
background-image: $navbar-inverse-toggler-bg;
border-color: $navbar-inverse-toggler-border;
}
.navbar-toggler-icon {
background-image: $navbar-inverse-toggler-bg;
}
.navbar-divider {
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-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-border-radius: $btn-border-radius !default;