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

Navbar optimizations (#29864)

Browse Source 
- Remove redundant `display: inline-block` from flex children
- Remove `line-height: inherit;` which is the default value of `line-height`
- Use flex shorthand
- Improve background shorthand
- Fix removed brand margin caused by requiring containers in navbars
This commit is contained in:
Martijn Cuppens 2019-12-25 17:38:41 +01:00 committed by XhmikosR
parent 7b78456be8
commit 74e45ebc07
2 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
scss/_navbar.scss
View File

@ -52,12 +52,10 @@
// Used for brand, project, or site names.
.navbar-brand {
display: inline-block;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
margin-right: $navbar-brand-margin-right;
@include font-size($navbar-brand-font-size);
line-height: inherit;
white-space: nowrap;
&:hover,
@ -94,7 +92,6 @@
//
.navbar-text {
display: inline-block;
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
}
@ -109,8 +106,7 @@
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
flex: 1 0 100%;
// For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities.
align-items: center;
@ -138,9 +134,9 @@
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
// Generate series of `.navbar-expand-*` responsive classes for configuring

1
scss/_variables.scss
View File

@ -843,6 +843,7 @@ $navbar-brand-font-size: $font-size-lg !default;
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$navbar-brand-margin-right: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;