[fa375fe] | 1 | // stylelint-disable selector-no-qualifying-type, selector-max-type
|
---|
| 2 |
|
---|
| 3 | //
|
---|
| 4 | // Navs
|
---|
| 5 | // --------------------------------------------------
|
---|
| 6 |
|
---|
| 7 |
|
---|
| 8 | // Base class
|
---|
| 9 | // --------------------------------------------------
|
---|
| 10 |
|
---|
| 11 | .nav {
|
---|
| 12 | padding-left: 0; // Override default ul/ol
|
---|
| 13 | margin-bottom: 0;
|
---|
| 14 | list-style: none;
|
---|
| 15 | &:extend(.clearfix all);
|
---|
| 16 |
|
---|
| 17 | > li {
|
---|
| 18 | position: relative;
|
---|
| 19 | display: block;
|
---|
| 20 |
|
---|
| 21 | > a {
|
---|
| 22 | position: relative;
|
---|
| 23 | display: block;
|
---|
| 24 | padding: @nav-link-padding;
|
---|
| 25 | &:hover,
|
---|
| 26 | &:focus {
|
---|
| 27 | text-decoration: none;
|
---|
| 28 | background-color: @nav-link-hover-bg;
|
---|
| 29 | }
|
---|
| 30 | }
|
---|
| 31 |
|
---|
| 32 | // Disabled state sets text to gray and nukes hover/tab effects
|
---|
| 33 | &.disabled > a {
|
---|
| 34 | color: @nav-disabled-link-color;
|
---|
| 35 |
|
---|
| 36 | &:hover,
|
---|
| 37 | &:focus {
|
---|
| 38 | color: @nav-disabled-link-hover-color;
|
---|
| 39 | text-decoration: none;
|
---|
| 40 | cursor: @cursor-disabled;
|
---|
| 41 | background-color: transparent;
|
---|
| 42 | }
|
---|
| 43 | }
|
---|
| 44 | }
|
---|
| 45 |
|
---|
| 46 | // Open dropdowns
|
---|
| 47 | .open > a {
|
---|
| 48 | &,
|
---|
| 49 | &:hover,
|
---|
| 50 | &:focus {
|
---|
| 51 | background-color: @nav-link-hover-bg;
|
---|
| 52 | border-color: @link-color;
|
---|
| 53 | }
|
---|
| 54 | }
|
---|
| 55 |
|
---|
| 56 | // Nav dividers (deprecated with v3.0.1)
|
---|
| 57 | //
|
---|
| 58 | // This should have been removed in v3 with the dropping of `.nav-list`, but
|
---|
| 59 | // we missed it. We don't currently support this anywhere, but in the interest
|
---|
| 60 | // of maintaining backward compatibility in case you use it, it's deprecated.
|
---|
| 61 | .nav-divider {
|
---|
| 62 | .nav-divider();
|
---|
| 63 | }
|
---|
| 64 |
|
---|
| 65 | // Prevent IE8 from misplacing imgs
|
---|
| 66 | //
|
---|
| 67 | // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
|
---|
| 68 | > li > a > img {
|
---|
| 69 | max-width: none;
|
---|
| 70 | }
|
---|
| 71 | }
|
---|
| 72 |
|
---|
| 73 |
|
---|
| 74 | // Tabs
|
---|
| 75 | // -------------------------
|
---|
| 76 |
|
---|
| 77 | // Give the tabs something to sit on
|
---|
| 78 | .nav-tabs {
|
---|
| 79 | border-bottom: 1px solid @nav-tabs-border-color;
|
---|
| 80 | > li {
|
---|
| 81 | float: left;
|
---|
| 82 | // Make the list-items overlay the bottom border
|
---|
| 83 | margin-bottom: -1px;
|
---|
| 84 |
|
---|
| 85 | // Actual tabs (as links)
|
---|
| 86 | > a {
|
---|
| 87 | margin-right: 2px;
|
---|
| 88 | line-height: @line-height-base;
|
---|
| 89 | border: 1px solid transparent;
|
---|
| 90 | border-radius: @border-radius-base @border-radius-base 0 0;
|
---|
| 91 | &:hover {
|
---|
| 92 | border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
|
---|
| 93 | }
|
---|
| 94 | }
|
---|
| 95 |
|
---|
| 96 | // Active state, and its :hover to override normal :hover
|
---|
| 97 | &.active > a {
|
---|
| 98 | &,
|
---|
| 99 | &:hover,
|
---|
| 100 | &:focus {
|
---|
| 101 | color: @nav-tabs-active-link-hover-color;
|
---|
| 102 | cursor: default;
|
---|
| 103 | background-color: @nav-tabs-active-link-hover-bg;
|
---|
| 104 | border: 1px solid @nav-tabs-active-link-hover-border-color;
|
---|
| 105 | border-bottom-color: transparent;
|
---|
| 106 | }
|
---|
| 107 | }
|
---|
| 108 | }
|
---|
| 109 | // pulling this in mainly for less shorthand
|
---|
| 110 | &.nav-justified {
|
---|
| 111 | .nav-justified();
|
---|
| 112 | .nav-tabs-justified();
|
---|
| 113 | }
|
---|
| 114 | }
|
---|
| 115 |
|
---|
| 116 |
|
---|
| 117 | // Pills
|
---|
| 118 | // -------------------------
|
---|
| 119 | .nav-pills {
|
---|
| 120 | > li {
|
---|
| 121 | float: left;
|
---|
| 122 |
|
---|
| 123 | // Links rendered as pills
|
---|
| 124 | > a {
|
---|
| 125 | border-radius: @nav-pills-border-radius;
|
---|
| 126 | }
|
---|
| 127 | + li {
|
---|
| 128 | margin-left: 2px;
|
---|
| 129 | }
|
---|
| 130 |
|
---|
| 131 | // Active state
|
---|
| 132 | &.active > a {
|
---|
| 133 | &,
|
---|
| 134 | &:hover,
|
---|
| 135 | &:focus {
|
---|
| 136 | color: @nav-pills-active-link-hover-color;
|
---|
| 137 | background-color: @nav-pills-active-link-hover-bg;
|
---|
| 138 | }
|
---|
| 139 | }
|
---|
| 140 | }
|
---|
| 141 | }
|
---|
| 142 |
|
---|
| 143 |
|
---|
| 144 | // Stacked pills
|
---|
| 145 | .nav-stacked {
|
---|
| 146 | > li {
|
---|
| 147 | float: none;
|
---|
| 148 | + li {
|
---|
| 149 | margin-top: 2px;
|
---|
| 150 | margin-left: 0; // no need for this gap between nav items
|
---|
| 151 | }
|
---|
| 152 | }
|
---|
| 153 | }
|
---|
| 154 |
|
---|
| 155 |
|
---|
| 156 | // Nav variations
|
---|
| 157 | // --------------------------------------------------
|
---|
| 158 |
|
---|
| 159 | // Justified nav links
|
---|
| 160 | // -------------------------
|
---|
| 161 |
|
---|
| 162 | .nav-justified {
|
---|
| 163 | width: 100%;
|
---|
| 164 |
|
---|
| 165 | > li {
|
---|
| 166 | float: none;
|
---|
| 167 | > a {
|
---|
| 168 | margin-bottom: 5px;
|
---|
| 169 | text-align: center;
|
---|
| 170 | }
|
---|
| 171 | }
|
---|
| 172 |
|
---|
| 173 | > .dropdown .dropdown-menu {
|
---|
| 174 | top: auto;
|
---|
| 175 | left: auto;
|
---|
| 176 | }
|
---|
| 177 |
|
---|
| 178 | @media (min-width: @screen-sm-min) {
|
---|
| 179 | > li {
|
---|
| 180 | display: table-cell;
|
---|
| 181 | width: 1%;
|
---|
| 182 | > a {
|
---|
| 183 | margin-bottom: 0;
|
---|
| 184 | }
|
---|
| 185 | }
|
---|
| 186 | }
|
---|
| 187 | }
|
---|
| 188 |
|
---|
| 189 | // Move borders to anchors instead of bottom of list
|
---|
| 190 | //
|
---|
| 191 | // Mixin for adding on top the shared `.nav-justified` styles for our tabs
|
---|
| 192 | .nav-tabs-justified {
|
---|
| 193 | border-bottom: 0;
|
---|
| 194 |
|
---|
| 195 | > li > a {
|
---|
| 196 | // Override margin from .nav-tabs
|
---|
| 197 | margin-right: 0;
|
---|
| 198 | border-radius: @border-radius-base;
|
---|
| 199 | }
|
---|
| 200 |
|
---|
| 201 | > .active > a,
|
---|
| 202 | > .active > a:hover,
|
---|
| 203 | > .active > a:focus {
|
---|
| 204 | border: 1px solid @nav-tabs-justified-link-border-color;
|
---|
| 205 | }
|
---|
| 206 |
|
---|
| 207 | @media (min-width: @screen-sm-min) {
|
---|
| 208 | > li > a {
|
---|
| 209 | border-bottom: 1px solid @nav-tabs-justified-link-border-color;
|
---|
| 210 | border-radius: @border-radius-base @border-radius-base 0 0;
|
---|
| 211 | }
|
---|
| 212 | > .active > a,
|
---|
| 213 | > .active > a:hover,
|
---|
| 214 | > .active > a:focus {
|
---|
| 215 | border-bottom-color: @nav-tabs-justified-active-link-border-color;
|
---|
| 216 | }
|
---|
| 217 | }
|
---|
| 218 | }
|
---|
| 219 |
|
---|
| 220 |
|
---|
| 221 | // Tabbable tabs
|
---|
| 222 | // -------------------------
|
---|
| 223 |
|
---|
| 224 | // Hide tabbable panes to start, show them when `.active`
|
---|
| 225 | .tab-content {
|
---|
| 226 | > .tab-pane {
|
---|
| 227 | display: none;
|
---|
| 228 | }
|
---|
| 229 | > .active {
|
---|
| 230 | display: block;
|
---|
| 231 | }
|
---|
| 232 | }
|
---|
| 233 |
|
---|
| 234 |
|
---|
| 235 | // Dropdowns
|
---|
| 236 | // -------------------------
|
---|
| 237 |
|
---|
| 238 | // Specific dropdowns
|
---|
| 239 | .nav-tabs .dropdown-menu {
|
---|
| 240 | // make dropdown border overlap tab border
|
---|
| 241 | margin-top: -1px;
|
---|
| 242 | // Remove the top rounded corners here since there is a hard edge above the menu
|
---|
| 243 | .border-top-radius(0);
|
---|
| 244 | }
|
---|