123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- // Base class
- //
- // Kickstart any navigation component with a set of style resets. Works with
- // `<nav>`s or `<ul>`s.
- .nav {
- padding-left: 0;
- margin-bottom: 0;
- list-style: none;
- }
- .nav-link {
- display: inline-block;
- @include hover-focus {
- text-decoration: none;
- }
- // 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;
- }
- }
- //
- // 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);
- @include hover-focus {
- border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
- }
- &.disabled {
- @include plain-hover-focus {
- 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;
- }
- }
- .dropdown-menu {
- // Make dropdown border overlap tab border
- margin-top: -$nav-tabs-border-width;
- // Remove the top rounded corners here since there is a hard edge above the menu
- @include border-top-radius(0);
- }
- }
- //
- // Pills
- //
- .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-stacked {
- .nav-item {
- display: block;
- float: none;
- + .nav-item {
- margin-top: $nav-item-margin;
- margin-left: 0;
- }
- }
- }
- //
- // Tabbable tabs
- //
- // Hide tabbable panes to start, show them when `.active`
- .tab-content {
- > .tab-pane {
- display: none;
- }
- > .active {
- display: block;
- }
- }
|