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

Harmonize navbar-brand, navbar-text and nav-link height

This commit is contained in:
Pierre-Denis Vanduynslager 2017-01-14 01:52:05 -05:00 committed by Mark Otto
parent a3a1a592b5
commit a03aaf39df
3 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_nav.scss
View File

@ -13,7 +13,7 @@
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding; padding: $nav-link-padding-y $nav-link-padding-x;
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;

8
scss/_navbar.scss
View File

@ -46,8 +46,8 @@
.navbar-brand { .navbar-brand {
display: inline-block; display: inline-block;
align-self: flex-start; align-self: flex-start;
padding-top: .25rem; padding-top: $navbar-brand-padding-y;
padding-bottom: .25rem; padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x; margin-right: $navbar-padding-x;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: inherit; line-height: inherit;
@ -83,8 +83,8 @@
.navbar-text { .navbar-text {
display: inline-block; display: inline-block;
padding-top: .425rem; padding-top: $nav-link-padding-y;
padding-bottom: .425rem; padding-bottom: $nav-link-padding-y;
} }

48
scss/_variables.scss
View File

@ -21,8 +21,8 @@
// Forms // Forms
// Dropdowns // Dropdowns
// Z-index master list // Z-index master list
// Navbar
// Navs // Navs
// Navbar
// Pagination // Pagination
// Jumbotron // Jumbotron
// Form states and alerts // Form states and alerts
@ -573,11 +573,39 @@ $zindex-modal: 1050 !default;
$zindex-popover: 1060 !default; $zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default; $zindex-tooltip: 1070 !default;
// Navs
$nav-item-margin: .2rem !default;
$nav-item-inline-spacer: 1rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-padding-y: .5rem !default;
$nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default;
$nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-color: $gray !default;
$nav-tabs-active-link-bg: $body-bg !default;
$nav-tabs-active-link-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-color: $component-active-color !default;
$nav-pills-active-link-bg: $component-active-bg !default;
// Navbar // Navbar
$navbar-padding-x: $spacer !default; $navbar-padding-x: $spacer !default;
$navbar-padding-y: ($spacer / 2) !default; $navbar-padding-y: ($spacer / 2) !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-lg * $line-height-base !default;
$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default;
$navbar-toggler-padding-x: .75rem !default; $navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-font-size: $font-size-lg !default;
@ -597,24 +625,6 @@ $navbar-light-disabled-color: rgba($black,.3) !default;
$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border: rgba($black,.1) !default; $navbar-light-toggler-border: rgba($black,.1) !default;
// Navs
$nav-link-padding: .5em 1em !default;
$nav-disabled-link-color: $gray-light !default;
$nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-color: $gray !default;
$nav-tabs-active-link-bg: $body-bg !default;
$nav-tabs-active-link-border-color: #ddd !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-color: $component-active-color !default;
$nav-pills-active-link-bg: $component-active-bg !default;
// Pagination // Pagination
$pagination-padding-x: .75rem !default; $pagination-padding-x: .75rem !default;