mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
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:
parent
80674b0c58
commit
8d9d84784a
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user