diff options
author | Mark Otto <markdotto@gmail.com> | 2016-12-23 21:39:53 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2016-12-25 01:21:04 +0300 |
commit | 699d8a5a804db30219f159c2b3a623422574ff3d (patch) | |
tree | e09342071cd26ecf22375fe334800374d170d172 /scss | |
parent | ec0dbc74a7145db02b0fb1fd2be90efd5febc73a (diff) |
Make .nav flex-powered
- Set an explicit `display: flex` on the base `.nav` class and remove the floats/clearfixes from our navs.
- Set some global styles for `.nav-link`, a departure from the previous solution that featured no predefined padding.
- Move `.nav-link` from `inline-block` to `block` given this setting was added for our tabs and pills anyway.
- Remove horizontal margin from nav tabs; let folks set that on their own from now on.
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_nav.scss | 39 |
1 files changed, 3 insertions, 36 deletions
diff --git a/scss/_nav.scss b/scss/_nav.scss index 10d5f5c622..66d16ef061 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -4,13 +4,15 @@ // `<nav>`s or `<ul>`s. .nav { + display: flex; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { - display: inline-block; + display: block; + padding: $nav-link-padding; @include hover-focus { text-decoration: none; @@ -29,41 +31,18 @@ } -// Nav inline - -.nav-inline { - .nav-item { - display: inline-block; - } - - .nav-item + .nav-item, - .nav-link + .nav-link { - margin-left: $nav-item-inline-spacer; - } -} - - // // Tabs // .nav-tabs { border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; - @include clearfix(); .nav-item { - float: left; - // Make the list-items overlay the bottom border margin-bottom: -$nav-tabs-border-width; - - + .nav-item { - margin-left: $nav-item-margin; - } } .nav-link { - display: block; - padding: $nav-link-padding; border: $nav-tabs-border-width solid transparent; @include border-top-radius($nav-tabs-border-radius); @@ -103,19 +82,7 @@ // .nav-pills { - @include clearfix(); - - .nav-item { - float: left; - - + .nav-item { - margin-left: $nav-item-margin; - } - } - .nav-link { - display: block; - padding: $nav-link-padding; @include border-radius($nav-pills-border-radius); } |