[6a3a178] | 1 | // Base class
|
---|
| 2 | //
|
---|
| 3 | // Kickstart any navigation component with a set of style resets. Works with
|
---|
| 4 | // `<nav>`s, `<ul>`s or `<ol>`s.
|
---|
| 5 |
|
---|
| 6 | .nav {
|
---|
| 7 | display: flex;
|
---|
| 8 | flex-wrap: wrap;
|
---|
| 9 | padding-left: 0;
|
---|
| 10 | margin-bottom: 0;
|
---|
| 11 | list-style: none;
|
---|
| 12 | }
|
---|
| 13 |
|
---|
| 14 | .nav-link {
|
---|
| 15 | display: block;
|
---|
| 16 | padding: $nav-link-padding-y $nav-link-padding-x;
|
---|
| 17 | @include font-size($nav-link-font-size);
|
---|
| 18 | font-weight: $nav-link-font-weight;
|
---|
| 19 | color: $nav-link-color;
|
---|
| 20 | text-decoration: if($link-decoration == none, null, none);
|
---|
| 21 | @include transition($nav-link-transition);
|
---|
| 22 |
|
---|
| 23 | &:hover,
|
---|
| 24 | &:focus {
|
---|
| 25 | color: $nav-link-hover-color;
|
---|
| 26 | text-decoration: if($link-hover-decoration == underline, none, null);
|
---|
| 27 | }
|
---|
| 28 |
|
---|
| 29 | // Disabled state lightens text
|
---|
| 30 | &.disabled {
|
---|
| 31 | color: $nav-link-disabled-color;
|
---|
| 32 | pointer-events: none;
|
---|
| 33 | cursor: default;
|
---|
| 34 | }
|
---|
| 35 | }
|
---|
| 36 |
|
---|
| 37 | //
|
---|
| 38 | // Tabs
|
---|
| 39 | //
|
---|
| 40 |
|
---|
| 41 | .nav-tabs {
|
---|
| 42 | border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
---|
| 43 |
|
---|
| 44 | .nav-link {
|
---|
| 45 | margin-bottom: -$nav-tabs-border-width;
|
---|
| 46 | background: none;
|
---|
| 47 | border: $nav-tabs-border-width solid transparent;
|
---|
| 48 | @include border-top-radius($nav-tabs-border-radius);
|
---|
| 49 |
|
---|
| 50 | &:hover,
|
---|
| 51 | &:focus {
|
---|
| 52 | border-color: $nav-tabs-link-hover-border-color;
|
---|
| 53 | // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
---|
| 54 | isolation: isolate;
|
---|
| 55 | }
|
---|
| 56 |
|
---|
| 57 | &.disabled {
|
---|
| 58 | color: $nav-link-disabled-color;
|
---|
| 59 | background-color: transparent;
|
---|
| 60 | border-color: transparent;
|
---|
| 61 | }
|
---|
| 62 | }
|
---|
| 63 |
|
---|
| 64 | .nav-link.active,
|
---|
| 65 | .nav-item.show .nav-link {
|
---|
| 66 | color: $nav-tabs-link-active-color;
|
---|
| 67 | background-color: $nav-tabs-link-active-bg;
|
---|
| 68 | border-color: $nav-tabs-link-active-border-color;
|
---|
| 69 | }
|
---|
| 70 |
|
---|
| 71 | .dropdown-menu {
|
---|
| 72 | // Make dropdown border overlap tab border
|
---|
| 73 | margin-top: -$nav-tabs-border-width;
|
---|
| 74 | // Remove the top rounded corners here since there is a hard edge above the menu
|
---|
| 75 | @include border-top-radius(0);
|
---|
| 76 | }
|
---|
| 77 | }
|
---|
| 78 |
|
---|
| 79 |
|
---|
| 80 | //
|
---|
| 81 | // Pills
|
---|
| 82 | //
|
---|
| 83 |
|
---|
| 84 | .nav-pills {
|
---|
| 85 | .nav-link {
|
---|
| 86 | background: none;
|
---|
| 87 | border: 0;
|
---|
| 88 | @include border-radius($nav-pills-border-radius);
|
---|
| 89 | }
|
---|
| 90 |
|
---|
| 91 | .nav-link.active,
|
---|
| 92 | .show > .nav-link {
|
---|
| 93 | color: $nav-pills-link-active-color;
|
---|
| 94 | @include gradient-bg($nav-pills-link-active-bg);
|
---|
| 95 | }
|
---|
| 96 | }
|
---|
| 97 |
|
---|
| 98 |
|
---|
| 99 | //
|
---|
| 100 | // Justified variants
|
---|
| 101 | //
|
---|
| 102 |
|
---|
| 103 | .nav-fill {
|
---|
| 104 | > .nav-link,
|
---|
| 105 | .nav-item {
|
---|
| 106 | flex: 1 1 auto;
|
---|
| 107 | text-align: center;
|
---|
| 108 | }
|
---|
| 109 | }
|
---|
| 110 |
|
---|
| 111 | .nav-justified {
|
---|
| 112 | > .nav-link,
|
---|
| 113 | .nav-item {
|
---|
| 114 | flex-basis: 0;
|
---|
| 115 | flex-grow: 1;
|
---|
| 116 | text-align: center;
|
---|
| 117 | }
|
---|
| 118 | }
|
---|
| 119 |
|
---|
| 120 | .nav-fill,
|
---|
| 121 | .nav-justified {
|
---|
| 122 | .nav-item .nav-link {
|
---|
| 123 | width: 100%; // Make sure button will grow
|
---|
| 124 | }
|
---|
| 125 | }
|
---|
| 126 |
|
---|
| 127 |
|
---|
| 128 | // Tabbable tabs
|
---|
| 129 | //
|
---|
| 130 | // Hide tabbable panes to start, show them when `.active`
|
---|
| 131 |
|
---|
| 132 | .tab-content {
|
---|
| 133 | > .tab-pane {
|
---|
| 134 | display: none;
|
---|
| 135 | }
|
---|
| 136 | > .active {
|
---|
| 137 | display: block;
|
---|
| 138 | }
|
---|
| 139 | }
|
---|