diff options
author | Mark Otto <otto@github.com> | 2014-07-10 03:04:31 +0400 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2014-07-10 03:04:31 +0400 |
commit | 857fe32a70270ea8d80319782ff8125c3a9db060 (patch) | |
tree | ea2720b0529709d0e1f3fd2b0b0255f7f6a11542 /less/navs.less | |
parent | 77a4bcad9efc205f15f18562ac1e4681dc9a2649 (diff) |
Refactor navs: new classes, remove separate pills & tabs files, drop justified nav because it never really worked
Diffstat (limited to 'less/navs.less')
-rw-r--r-- | less/navs.less | 256 |
1 files changed, 71 insertions, 185 deletions
diff --git a/less/navs.less b/less/navs.less index 1db5892b04..48c6e06d8a 100644 --- a/less/navs.less +++ b/less/navs.less @@ -2,24 +2,18 @@ // Navs // -------------------------------------------------- - -// - Mixins for horizontal and vertical nav -// - Classes for tabs and pills - - .nav { - margin-bottom: @line-height-computed; .list-unstyled(); &:extend(.clearfix all); } .nav-item { position: relative; - display: block; + display: inline-block; } .nav-link { - display: block; + display: inline-block; padding: @nav-link-padding; line-height: @line-height-base; @@ -29,19 +23,9 @@ background-color: @nav-link-hover-bg; } - // Open dropdown and active states - .open > &, - .active > & { - &, - &:hover, - &:focus { - color: @component-active-color; - background-color: @component-active-bg; - } - } - // Disabled state sets text to gray and nukes hover/tab effects - .disabled > & { + .disabled > &, + &.disabled { color: @nav-disabled-link-color; &, @@ -55,209 +39,111 @@ } - - -// Base class -// -------------------------------------------------- - -.nav { - margin-bottom: 0; - padding-left: 0; // Override default ul/ol - list-style: none; - &:extend(.clearfix all); - - > li { - position: relative; - display: block; - - > a { - position: relative; - display: block; - padding: @nav-link-padding; - line-height: @line-height-base; - - &:hover, - &:focus { - text-decoration: none; - background-color: @nav-link-hover-bg; - } - } - - // Disabled state sets text to gray and nukes hover/tab effects - &.disabled > a { - color: @nav-disabled-link-color; - - &:hover, - &:focus { - color: @nav-disabled-link-hover-color; - text-decoration: none; - background-color: transparent; - cursor: not-allowed; - } - } - } - - // Open dropdowns - .open > a { - &, - &:hover, - &:focus { - background-color: @nav-link-hover-bg; - border-color: @link-color; - } - } -} - - +// // Tabs -// ------------------------- +// -// Give the tabs something to sit on .nav-tabs { + margin-bottom: @line-height-computed; border-bottom: 1px solid @nav-tabs-border-color; - > li { + + .nav-item { float: left; // Make the list-items overlay the bottom border margin-bottom: -1px; - // Actual tabs (as links) - > a { - margin-right: 2px; - line-height: @line-height-base; - border: 1px solid transparent; - .border-radius(@border-radius-base @border-radius-base 0 0); - &:hover { - border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; - } + + .nav-item { + margin-left: .2rem; } - - // Active state, and its :hover to override normal :hover - &.active > a { - &, - &:hover, - &:focus { - color: @nav-tabs-active-link-hover-color; - background-color: @nav-tabs-active-link-hover-bg; - border: 1px solid @nav-tabs-active-link-hover-border-color; - border-bottom-color: transparent; - cursor: default; - } - } - } - // pulling this in mainly for less shorthand - &.nav-justified { - .nav-justified(); - .nav-tabs-justified(); } -} + .nav-link { + display: block; + border: 1px solid transparent; + .border-radius(@border-radius-base @border-radius-base 0 0); -// Pills -// ------------------------- -.nav-pills { - > li { - float: left; - - // Links rendered as pills - > a { - .border-radius(@nav-pills-border-radius); - } - + li { - margin-left: 2px; + &:hover, + &:focus { + border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; } + } - // Active state - &.active > a { - &, - &:hover, - &:focus { - color: @nav-pills-active-link-hover-color; - background-color: @nav-pills-active-link-hover-bg; - } + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + &, + &: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; } } -} - -// Stacked pills -.nav-stacked { - > li { - float: none; - + li { - margin-top: 2px; - margin-left: 0; // no need for this gap between nav items + .disabled > .nav-link, + .nav-link.disabled { + &, + &:hover, + &:focus { + color: @nav-disabled-link-color; + background-color: transparent; + border-color: transparent; } } } -// Nav variations -// -------------------------------------------------- +// +// Pills +// -// Justified nav links -// ------------------------- +.nav-pills { + margin-bottom: @line-height-computed; -.nav-justified { - width: 100%; + .nav-item { + float: left; - > li { - float: none; - > a { - text-align: center; - margin-bottom: 5px; + + .nav-item { + margin-left: .2rem; } } - > .dropdown .dropdown-menu { - top: auto; - left: auto; + .nav-link { + display: block; + .border-radius(@nav-pills-border-radius); } - @media (min-width: @screen-sm-min) { - > li { - display: table-cell; - width: 1%; - > a { - margin-bottom: 0; - } + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + &, + &:hover, + &:focus { + color: @component-active-color; + background-color: @component-active-bg; + cursor: default; } } } -// Move borders to anchors instead of bottom of list -// -// Mixin for adding on top the shared `.nav-justified` styles for our tabs -.nav-tabs-justified { - border-bottom: 0; - - > li > a { - // Override margin from .nav-tabs - margin-right: 0; - .border-radius(@border-radius-base); - } - - > .active > a, - > .active > a:hover, - > .active > a:focus { - border: 1px solid @nav-tabs-justified-link-border-color; - } +.nav-stacked { + .nav-item { + float: none; + display: block; - @media (min-width: @screen-sm-min) { - > li > a { - border-bottom: 1px solid @nav-tabs-justified-link-border-color; - .border-radius(@border-radius-base @border-radius-base 0 0); - } - > .active > a, - > .active > a:hover, - > .active > a:focus { - border-bottom-color: @nav-tabs-justified-active-link-border-color; + + .nav-item { + margin-top: .2rem; + margin-left: 0; } } } +// // Tabbable tabs -// ------------------------- +// // Hide tabbable panes to start, show them when `.active` .tab-content { @@ -270,12 +156,12 @@ } +// // Dropdowns -// ------------------------- +// -// Specific dropdowns .nav-tabs .dropdown-menu { - // make dropdown border overlap tab border + // Make dropdown border overlap tab border margin-top: -1px; // Remove the top rounded corners here since there is a hard edge above the menu .border-top-radius(0); |