// Name: Nav // // Component: `nav` // // Modifiers: `nav-justified` // `nav-tabs-bottom` // `nav-tabs-solid` // `nav-tabs-reverse` // `nav-tabs-line` // `nav-tabs-vertical` // `nav-tabs-inverse` // `nav-tabs-lg` // `nav-tabs-sm` // // // ======================================================================== // Variables // ======================================================================== // $nav-tabs-link-padding : $nav-padding-vertical pxToRem(20px) !default; // $nav-tabs-vertical-link-padding : $nav-padding-vertical pxToRem(20px) !default; $nav-tabs-color : $text-color !default; $nav-tabs-active-color : $inverse !default; $nav-tabs-active-bg : $brand-primary !default; $nav-tabs-active-border : $brand-primary !default; $nav-tabs-solid-color : $text-color !default; $nav-tabs-solid-bg : $gray-lightest !default; $nav-tabs-solid-border : $gray-lightest !default; $nav-tabs-line-border : $border-color-base !default; $nav-tabs-line-hover-border : $gray-light !default; $nav-tabs-line-active-color : $brand-primary !default; $nav-tabs-line-active-border : $brand-primary !default; $nav-tabs-inverse-bg : $inverse !default; $nav-tabs-inverse-border : $inverse !default; $nav-quick-bg : $inverse !default; $nav-quick-hover-bg : $bg-color-base !default; $nav-quick-box-shadow : 0 1px 1px rgba(0, 0, 0, .05) !default; $nav-quick-border-color : $border-color-base !default; // Component: Nav // ======================================================================== .nav-link { &:focus, &:hover { background-color: $nav-link-hover-bg; } &.disabled { &:focus, &:hover { background-color: transparent; } } } // Component: `nav-quick` // ======================================================================== .nav-quick { background-color: $nav-quick-bg; box-shadow: $nav-quick-box-shadow; .nav-link { color: $nav-tabs-color; &:hover { background-color: $nav-quick-hover-bg; } } &-bordered { border-top: 1px solid $nav-quick-border-color; border-left: 1px solid $nav-quick-border-color; .nav-item { border-bottom: 1px solid $nav-quick-border-color; border-right: 1px solid $nav-quick-border-color; } } } // Component: `nav-tabs` // ======================================================================== .nav-tabs { .nav-link { color: $nav-tabs-color; } .nav-link.active, .nav-item.show .nav-link, .nav-item.open .nav-link { @include plain-hover-focus { color: $nav-tabs-active-color; background-color: $nav-tabs-active-bg; border-color: transparent; border-bottom-color: $nav-tabs-active-border; } } } // Modifier: `nav-tabs-bottom` // ------------------------- .nav-tabs.nav-tabs-bottom { border-top: 1px solid $nav-tabs-border-color; border-bottom: none; .nav-link { &:hover, &:focus { border-bottom-color: transparent; border-top-color: $nav-tabs-border-color; } } } // Modifier: `nav-tabs-solid` // ======================================================================== .nav-tabs-solid { border-bottom-color: $nav-tabs-solid-border; .nav-link { &:hover { border-color: transparent; } } .nav-link.active, .nav-item.show .nav-link, .nav-item.open .nav-link { @include plain-hover-focus { color: $nav-tabs-solid-color; background-color: $nav-tabs-solid-bg; border-color: transparent; } } & ~ .tab-content { background-color: $nav-tabs-solid-bg; } &.nav-tabs-bottom { .nav-link { &.active { &, &:hover, &:focus { border: none; } } } } } // Modifier: `nav-tabs-line` // ======================================================================== .nav-tabs-line { .nav-link { border-bottom: 2px solid transparent; &:hover, &:focus { background-color: transparent; } &:hover { border-bottom-color: $nav-tabs-line-hover-border; } } .nav-link.active, .nav-item.show .nav-link, .nav-item.open .nav-link { @include plain-hover-focus { color: $nav-tabs-line-active-color; background-color: transparent; border-bottom: 2px solid $nav-tabs-line-active-border; } } // Open dropdowns .nav-item.open > .nav-link, .nav-item.show > .nav-link { @include plain-hover-focus { border-bottom-color: $nav-tabs-active-border; } } > .nav-tabs-autoline { background-color: $nav-tabs-active-bg; transition-property: left, width; } &.nav-tabs-bottom { .nav-link { border-top: 2px solid transparent; border-bottom: none; &:hover { border-top-color: $nav-tabs-line-hover-border; border-bottom-color: transparent; } } .nav-link.active, .nav-item.open .nav-link, .nav-item.show .nav-link { @include plain-hover-focus { border-top: 2px solid $nav-tabs-line-active-border; border-bottom: none; } } .nav-item.open > .nav-link, .nav-item.show > .nav-link { @include plain-hover-focus { border-top-color: $nav-tabs-active-border; } } > .nav-tabs-autoline { top: 0; bottom: auto; } } } // CLASS [tab-line-top] // ======================================================================== .tabs-line-top{ border-bottom: 1px solid $nav-tabs-line-border; .nav-link, .nav-item .nav-link{ border-top: 2px solid transparent; border-bottom-color: transparent; &:hover{ border-bottom-color: transparent; border-top:2px solid $nav-tabs-line-hover-border; } } .nav-link.active, .nav-item.open .nav-link, .nav-item.show .nav-link { @include plain-hover-focus { color: $nav-tabs-line-active-color; background-color: transparent; border-top: 2px solid $nav-tabs-line-active-border; border-left: 1px solid $nav-tabs-line-border; border-right: 1px solid $nav-tabs-line-border; border-bottom: 1px solid #fff; } } } // Modifier: `nav-tabs-vertical` // ======================================================================== .nav-tabs-vertical { .nav-tabs { border-right: 1px solid $nav-tabs-border-color; border-bottom: none; .nav-link { &:hover { border-bottom-color: transparent; border-right-color: $nav-tabs-border-color; } &.active { &, &:focus, &:hover { border-bottom-color: transparent; border-right-color: $nav-tabs-active-border; } } } } .nav-tabs-reverse { border-right: none; border-left: 1px solid $nav-tabs-border-color; .nav-link { &:hover { border-right-color: transparent; border-left-color: $nav-tabs-border-color; } &.active { &, &:focus, &:hover { border-right-color: transparent; border-left-color: $nav-tabs-active-border; } } } } .nav-tabs-solid { border-right-color: $nav-tabs-solid-border; .nav-link { &:hover { border-color: transparent; } &.active { &, &:focus, &:hover { border-color: transparent; } } } &.nav-tabs-reverse { border-left-color: $nav-tabs-solid-border; } } .nav-tabs-line { .nav-link { border-right: 2px solid transparent; border-bottom: none; &:hover { border-right-color: $nav-tabs-line-hover-border; } &.active { &, &:hover, &:focus { border-right: 2px solid $nav-tabs-line-active-border; border-bottom: none; } } } } .nav-tabs-line.nav-tabs-reverse { .nav-link { border-left: 2px solid transparent; &:hover { border-color: transparent; border-left-color: $nav-tabs-line-hover-border; } &.active { &, &:hover, &:focus { border-right: 1px solid transparent; border-left: 2px solid $nav-tabs-line-active-border; } } } } } // Modifier: `nav-tabs-inverse` // ======================================================================== .nav-tabs-inverse { .nav-link.active { &, &:hover, &:focus { border-color: transparent; } } .nav-tabs-solid { border-bottom-color: $nav-tabs-inverse-border; .nav-link.active { &, &:hover, &:focus { color: $nav-tabs-color; background-color: $nav-tabs-inverse-bg; } } } &.nav-tabs-vertical { .nav-link.active { &, &:hover, &:focus { border-color: transparent; } } .nav-tabs-solid { border-right-color: $nav-tabs-inverse-border; &.nav-tabs-reverse { border-left-color: $nav-tabs-inverse-border; } } } .tab-content { background: $nav-tabs-inverse-bg; } }