diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_nav.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_nav.scss | 98 |
1 files changed, 30 insertions, 68 deletions
diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss index 640956c..eb316bb 100644 --- a/assets/stylesheets/bootstrap/_nav.scss +++ b/assets/stylesheets/bootstrap/_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; @@ -19,26 +21,7 @@ // Disabled state lightens text and removes hover/tab effects &.disabled { color: $nav-disabled-link-color; - - @include plain-hover-focus { - color: $nav-disabled-link-hover-color; - cursor: $cursor-disabled; - background-color: $nav-disabled-link-hover-bg; - } - } -} - - -// Nav inline - -.nav-inline { - .nav-item { - display: inline-block; - } - - .nav-item + .nav-item, - .nav-link + .nav-link { - margin-left: $nav-item-inline-spacer; + cursor: $cursor-disabled; } } @@ -49,21 +32,12 @@ .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); @@ -72,21 +46,17 @@ } &.disabled { - @include plain-hover-focus { - color: $nav-disabled-link-color; - background-color: transparent; - border-color: transparent; - } + color: $nav-disabled-link-color; + background-color: transparent; + border-color: transparent; } } .nav-link.active, - .nav-item.open .nav-link { - @include plain-hover-focus { - color: $nav-tabs-active-link-hover-color; - background-color: $nav-tabs-active-link-hover-bg; - border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent; - } + .nav-item.show .nav-link { + color: $nav-tabs-active-link-hover-color; + background-color: $nav-tabs-active-link-hover-bg; + border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg; } .dropdown-menu { @@ -103,50 +73,42 @@ // .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); } .nav-link.active, - .nav-item.open .nav-link { - @include plain-hover-focus { - color: $nav-pills-active-link-color; - cursor: default; - background-color: $nav-pills-active-link-bg; - } + .nav-item.show .nav-link { + color: $nav-pills-active-link-color; + cursor: default; + background-color: $nav-pills-active-link-bg; } } -.nav-stacked { + +// +// Justified variants +// + +.nav-fill { .nav-item { - display: block; - float: none; + flex: 1 1 auto; + text-align: center; + } +} - + .nav-item { - margin-top: $nav-item-margin; - margin-left: 0; - } +.nav-justified { + .nav-item { + flex: 1 1 100%; + text-align: center; } } -// // Tabbable tabs // - // Hide tabbable panes to start, show them when `.active` + .tab-content { > .tab-pane { display: none; |