mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 16:14:04 +02:00
Code Issues Releases Wiki 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
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. // Used for brand, project, or site names.
.navbar-brand { .navbar-brand {
display: inline-block;
padding-top: $navbar-brand-padding-y; padding-top: $navbar-brand-padding-y;
padding-bottom: $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); @include font-size($navbar-brand-font-size);
line-height: inherit;
white-space: nowrap; white-space: nowrap;
&:hover, &:hover,
@@ -94,7 +92,6 @@
// //
.navbar-text { .navbar-text {
display: inline-block;
padding-top: $nav-link-padding-y; padding-top: $nav-link-padding-y;
padding-bottom: $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` // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent. // on the `.navbar` parent.
.navbar-collapse { .navbar-collapse {
flex-basis: 100%; flex: 1 0 100%;
flex-grow: 1;
// For always expanded or extra full navbars, ensure content aligns itself // For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities. // properly vertically. Can be easily overridden with flex utilities.
align-items: center; align-items: center;
@@ -138,9 +134,9 @@
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
vertical-align: middle; vertical-align: middle;
content: ""; background-repeat: no-repeat;
background: no-repeat center center; background-position: center;
background-size: 100% 100%; background-size: 100%;
} }
// Generate series of `.navbar-expand-*` responsive classes for configuring // 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; $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-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !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-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default; $navbar-toggler-padding-x: .75rem !default;