scala-news-reader
rss/atom news reader in scala
git clone https://9o.is/git/scala-news-reader.git
navs.less
(8163B)
1 //
2 // Navs
3 // --------------------------------------------------
4
5
6 // BASE CLASS
7 // ----------
8
9 .nav {
10 margin-left: 0;
11 margin-bottom: @baseLineHeight;
12 list-style: none;
13 }
14
15 // Make links block level
16 .nav > li > a {
17 display: block;
18 }
19 .nav > li > a:hover,
20 .nav > li > a:focus {
21 text-decoration: none;
22 background-color: @grayLighter;
23 }
24
25 // Prevent IE8 from misplacing imgs
26 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
27 .nav > li > a > img {
28 max-width: none;
29 }
30
31 // Redeclare pull classes because of specifity
32 .nav > .pull-right {
33 float: right;
34 }
35
36 // Nav headers (for dropdowns and lists)
37 .nav-header {
38 display: block;
39 padding: 3px 15px;
40 font-size: 11px;
41 font-weight: bold;
42 line-height: @baseLineHeight;
43 color: @grayLight;
44 text-shadow: 0 1px 0 rgba(255,255,255,.5);
45 text-transform: uppercase;
46 }
47 // Space them out when they follow another list item (link)
48 .nav li + .nav-header {
49 margin-top: 9px;
50 }
51
52
53
54 // NAV LIST
55 // --------
56
57 .nav-list {
58 padding-left: 15px;
59 padding-right: 15px;
60 margin-bottom: 0;
61 }
62 .nav-list > li > a,
63 .nav-list .nav-header {
64 margin-left: -15px;
65 margin-right: -15px;
66 text-shadow: 0 1px 0 rgba(255,255,255,.5);
67 }
68 .nav-list > li > a {
69 padding: 3px 15px;
70 }
71 .nav-list > .active > a,
72 .nav-list > .active > a:hover,
73 .nav-list > .active > a:focus {
74 color: @white;
75 text-shadow: 0 -1px 0 rgba(0,0,0,.2);
76 background-color: @linkColor;
77 }
78 .nav-list [class^="icon-"],
79 .nav-list [class*=" icon-"] {
80 margin-right: 2px;
81 }
82 // Dividers (basically an hr) within the dropdown
83 .nav-list .divider {
84 .nav-divider();
85 }
86
87
88
89 // TABS AND PILLS
90 // -------------
91
92 // Common styles
93 .nav-tabs,
94 .nav-pills {
95 .clearfix();
96 }
97 .nav-tabs > li,
98 .nav-pills > li {
99 float: left;
100 }
101 .nav-tabs > li > a,
102 .nav-pills > li > a {
103 padding-right: 12px;
104 padding-left: 12px;
105 margin-right: 2px;
106 line-height: 14px; // keeps the overall height an even number
107 }
108
109 // TABS
110 // ----
111
112 // Give the tabs something to sit on
113 .nav-tabs {
114 border-bottom: 1px solid #ddd;
115 }
116 // Make the list-items overlay the bottom border
117 .nav-tabs > li {
118 margin-bottom: -1px;
119 }
120 // Actual tabs (as links)
121 .nav-tabs > li > a {
122 padding-top: 8px;
123 padding-bottom: 8px;
124 line-height: @baseLineHeight;
125 border: 1px solid transparent;
126 .border-radius(4px 4px 0 0);
127 &:hover,
128 &:focus {
129 border-color: @grayLighter @grayLighter #ddd;
130 }
131 }
132 // Active state, and it's :hover/:focus to override normal :hover/:focus
133 .nav-tabs > .active > a,
134 .nav-tabs > .active > a:hover,
135 .nav-tabs > .active > a:focus {
136 color: @gray;
137 background-color: @bodyBackground;
138 border: 1px solid #ddd;
139 border-bottom-color: transparent;
140 cursor: default;
141 }
142
143
144 // PILLS
145 // -----
146
147 // Links rendered as pills
148 .nav-pills > li > a {
149 padding-top: 8px;
150 padding-bottom: 8px;
151 margin-top: 2px;
152 margin-bottom: 2px;
153 .border-radius(5px);
154 }
155
156 // Active state
157 .nav-pills > .active > a,
158 .nav-pills > .active > a:hover,
159 .nav-pills > .active > a:focus {
160 color: @white;
161 background-color: @linkColor;
162 }
163
164
165
166 // STACKED NAV
167 // -----------
168
169 // Stacked tabs and pills
170 .nav-stacked > li {
171 float: none;
172 }
173 .nav-stacked > li > a {
174 margin-right: 0; // no need for the gap between nav items
175 }
176
177 // Tabs
178 .nav-tabs.nav-stacked {
179 border-bottom: 0;
180 }
181 .nav-tabs.nav-stacked > li > a {
182 border: 1px solid #ddd;
183 .border-radius(0);
184 }
185 .nav-tabs.nav-stacked > li:first-child > a {
186 .border-top-radius(4px);
187 }
188 .nav-tabs.nav-stacked > li:last-child > a {
189 .border-bottom-radius(4px);
190 }
191 .nav-tabs.nav-stacked > li > a:hover,
192 .nav-tabs.nav-stacked > li > a:focus {
193 border-color: #ddd;
194 z-index: 2;
195 }
196
197 // Pills
198 .nav-pills.nav-stacked > li > a {
199 margin-bottom: 3px;
200 }
201 .nav-pills.nav-stacked > li:last-child > a {
202 margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
203 }
204
205
206
207 // DROPDOWNS
208 // ---------
209
210 .nav-tabs .dropdown-menu {
211 .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
212 }
213 .nav-pills .dropdown-menu {
214 .border-radius(6px); // make rounded corners match the pills
215 }
216
217 // Default dropdown links
218 // -------------------------
219 // Make carets use linkColor to start
220 .nav .dropdown-toggle .caret {
221 border-top-color: @linkColor;
222 border-bottom-color: @linkColor;
223 margin-top: 6px;
224 }
225 .nav .dropdown-toggle:hover .caret,
226 .nav .dropdown-toggle:focus .caret {
227 border-top-color: @linkColorHover;
228 border-bottom-color: @linkColorHover;
229 }
230 /* move down carets for tabs */
231 .nav-tabs .dropdown-toggle .caret {
232 margin-top: 8px;
233 }
234
235 // Active dropdown links
236 // -------------------------
237 .nav .active .dropdown-toggle .caret {
238 border-top-color: #fff;
239 border-bottom-color: #fff;
240 }
241 .nav-tabs .active .dropdown-toggle .caret {
242 border-top-color: @gray;
243 border-bottom-color: @gray;
244 }
245
246 // Active:hover/:focus dropdown links
247 // -------------------------
248 .nav > .dropdown.active > a:hover,
249 .nav > .dropdown.active > a:focus {
250 cursor: pointer;
251 }
252
253 // Open dropdowns
254 // -------------------------
255 .nav-tabs .open .dropdown-toggle,
256 .nav-pills .open .dropdown-toggle,
257 .nav > li.dropdown.open.active > a:hover,
258 .nav > li.dropdown.open.active > a:focus {
259 color: @white;
260 background-color: @grayLight;
261 border-color: @grayLight;
262 }
263 .nav li.dropdown.open .caret,
264 .nav li.dropdown.open.active .caret,
265 .nav li.dropdown.open a:hover .caret,
266 .nav li.dropdown.open a:focus .caret {
267 border-top-color: @white;
268 border-bottom-color: @white;
269 .opacity(100);
270 }
271
272 // Dropdowns in stacked tabs
273 .tabs-stacked .open > a:hover,
274 .tabs-stacked .open > a:focus {
275 border-color: @grayLight;
276 }
277
278
279
280 // TABBABLE
281 // --------
282
283
284 // COMMON STYLES
285 // -------------
286
287 // Clear any floats
288 .tabbable {
289 .clearfix();
290 }
291 .tab-content {
292 overflow: auto; // prevent content from running below tabs
293 }
294
295 // Remove border on bottom, left, right
296 .tabs-below > .nav-tabs,
297 .tabs-right > .nav-tabs,
298 .tabs-left > .nav-tabs {
299 border-bottom: 0;
300 }
301
302 // Show/hide tabbable areas
303 .tab-content > .tab-pane,
304 .pill-content > .pill-pane {
305 display: none;
306 }
307 .tab-content > .active,
308 .pill-content > .active {
309 display: block;
310 }
311
312
313 // BOTTOM
314 // ------
315
316 .tabs-below > .nav-tabs {
317 border-top: 1px solid #ddd;
318 }
319 .tabs-below > .nav-tabs > li {
320 margin-top: -1px;
321 margin-bottom: 0;
322 }
323 .tabs-below > .nav-tabs > li > a {
324 .border-radius(0 0 4px 4px);
325 &:hover,
326 &:focus {
327 border-bottom-color: transparent;
328 border-top-color: #ddd;
329 }
330 }
331 .tabs-below > .nav-tabs > .active > a,
332 .tabs-below > .nav-tabs > .active > a:hover,
333 .tabs-below > .nav-tabs > .active > a:focus {
334 border-color: transparent #ddd #ddd #ddd;
335 }
336
337 // LEFT & RIGHT
338 // ------------
339
340 // Common styles
341 .tabs-left > .nav-tabs > li,
342 .tabs-right > .nav-tabs > li {
343 float: none;
344 }
345 .tabs-left > .nav-tabs > li > a,
346 .tabs-right > .nav-tabs > li > a {
347 min-width: 74px;
348 margin-right: 0;
349 margin-bottom: 3px;
350 }
351
352 // Tabs on the left
353 .tabs-left > .nav-tabs {
354 float: left;
355 margin-right: 19px;
356 border-right: 1px solid #ddd;
357 }
358 .tabs-left > .nav-tabs > li > a {
359 margin-right: -1px;
360 .border-radius(4px 0 0 4px);
361 }
362 .tabs-left > .nav-tabs > li > a:hover,
363 .tabs-left > .nav-tabs > li > a:focus {
364 border-color: @grayLighter #ddd @grayLighter @grayLighter;
365 }
366 .tabs-left > .nav-tabs .active > a,
367 .tabs-left > .nav-tabs .active > a:hover,
368 .tabs-left > .nav-tabs .active > a:focus {
369 border-color: #ddd transparent #ddd #ddd;
370 *border-right-color: @white;
371 }
372
373 // Tabs on the right
374 .tabs-right > .nav-tabs {
375 float: right;
376 margin-left: 19px;
377 border-left: 1px solid #ddd;
378 }
379 .tabs-right > .nav-tabs > li > a {
380 margin-left: -1px;
381 .border-radius(0 4px 4px 0);
382 }
383 .tabs-right > .nav-tabs > li > a:hover,
384 .tabs-right > .nav-tabs > li > a:focus {
385 border-color: @grayLighter @grayLighter @grayLighter #ddd;
386 }
387 .tabs-right > .nav-tabs .active > a,
388 .tabs-right > .nav-tabs .active > a:hover,
389 .tabs-right > .nav-tabs .active > a:focus {
390 border-color: #ddd #ddd #ddd transparent;
391 *border-left-color: @white;
392 }
393
394
395
396 // DISABLED STATES
397 // ---------------
398
399 // Gray out text
400 .nav > .disabled > a {
401 color: @grayLight;
402 }
403 // Nuke hover/focus effects
404 .nav > .disabled > a:hover,
405 .nav > .disabled > a:focus {
406 text-decoration: none;
407 background-color: transparent;
408 cursor: default;
409 }