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 | }
|
---|