diff options
author | Pierre-Denis Vanduynslager <pierre.denis.vanduynslager@gmail.com> | 2017-01-14 09:52:05 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2017-03-24 09:02:28 +0300 |
commit | a03aaf39df876691e4ba6acb0b40e9790e4c7127 (patch) | |
tree | 339c36e675a198901bb470a1b0dc5b180f3f5dba /scss | |
parent | a3a1a592b523c1fc82e951ad6f975792987b0f17 (diff) |
Harmonize navbar-brand, navbar-text and nav-link height
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_nav.scss | 2 | ||||
-rw-r--r-- | scss/_navbar.scss | 8 | ||||
-rw-r--r-- | scss/_variables.scss | 48 |
3 files changed, 34 insertions, 24 deletions
diff --git a/scss/_nav.scss b/scss/_nav.scss index 731f1b71bb..58e71eca40 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -13,7 +13,7 @@ .nav-link { display: block; - padding: $nav-link-padding; + padding: $nav-link-padding-y $nav-link-padding-x; @include hover-focus { text-decoration: none; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6f9fe25001..9a50b4e9a5 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -46,8 +46,8 @@ .navbar-brand { display: inline-block; align-self: flex-start; - padding-top: .25rem; - padding-bottom: .25rem; + padding-top: $navbar-brand-padding-y; + padding-bottom: $navbar-brand-padding-y; margin-right: $navbar-padding-x; font-size: $font-size-lg; line-height: inherit; @@ -83,8 +83,8 @@ .navbar-text { display: inline-block; - padding-top: .425rem; - padding-bottom: .425rem; + padding-top: $nav-link-padding-y; + padding-bottom: $nav-link-padding-y; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 69eb4017b1..b0c8859a5f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -21,8 +21,8 @@ // Forms // Dropdowns // Z-index master list -// Navbar // Navs +// Navbar // Pagination // Jumbotron // Form states and alerts @@ -573,11 +573,39 @@ $zindex-modal: 1050 !default; $zindex-popover: 1060 !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-padding-x: $spacer !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-y: .25rem !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-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-padding-x: .75rem !default; |