scala-news-reader
rss/atom news reader in scala
git clone https://9o.is/git/scala-news-reader.git
navbar.less
(12084B)
1 //
2 // Navbars (Redux)
3 // --------------------------------------------------
4
5
6 // COMMON STYLES
7 // -------------
8
9 // Base class and wrapper
10 .navbar {
11 overflow: visible;
12 margin-bottom: @baseLineHeight;
13
14 // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
15 *position: relative;
16 *z-index: 2;
17 }
18
19 // Inner for background effects
20 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
21 .navbar-inner {
22 min-height: @navbarHeight;
23 padding-left: 20px;
24 padding-right: 20px;
25 #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
26 border: 1px solid @navbarBorder;
27 .border-radius(@baseBorderRadius);
28 .box-shadow(0 1px 4px rgba(0,0,0,.065));
29
30 // Prevent floats from breaking the navbar
31 .clearfix();
32 }
33
34 // Set width to auto for default container
35 // We then reset it for fixed navbars in the #gridSystem mixin
36 .navbar .container {
37 width: auto;
38 }
39
40 // Override the default collapsed state
41 .nav-collapse.collapse {
42 height: auto;
43 overflow: visible;
44 }
45
46
47 // Brand: website or project name
48 // -------------------------
49 .navbar .brand {
50 position: absolute;
51 width: 75%;
52 left: 50%;
53 margin: 0 0 0 -37.5%;
54 text-align: center;
55 padding: ((@navbarHeight - @baseLineHeight) / 2) 0 ((@navbarHeight - @baseLineHeight) / 2);
56
57 a {
58 img { .square(37px); padding-right: 10px; }
59 font-family: @actaFontFamily;
60 font-size: 25px;
61 font-weight: 400;
62 color: @navbarBrandColor;
63 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
64 &:hover, &:focus {
65 text-decoration: none;
66 }
67 }
68 }
69
70 // Plain text in topbar
71 // -------------------------
72 .navbar-text {
73 margin-bottom: 0;
74 line-height: @navbarHeight;
75 color: @navbarText;
76 }
77
78 // Janky solution for now to account for links outside the .nav
79 // -------------------------
80 .navbar-link {
81 color: @navbarLinkColor;
82 &:hover,
83 &:focus {
84 color: @navbarLinkColorHover;
85 }
86 }
87
88 // Dividers in navbar
89 // -------------------------
90 .navbar .divider-vertical {
91 height: @navbarHeight;
92 margin: 0 9px;
93 border-left: 1px solid @navbarBackground;
94 border-right: 1px solid @navbarBackgroundHighlight;
95 }
96
97 // Buttons in navbar
98 // -------------------------
99 .navbar .btn,
100 .navbar .btn-group {
101 .navbarVerticalAlign(30px); // Vertically center in navbar
102 }
103 .navbar .btn-group .btn,
104 .navbar .input-prepend .btn,
105 .navbar .input-append .btn,
106 .navbar .input-prepend .btn-group,
107 .navbar .input-append .btn-group {
108 margin-top: 0; // then undo the margin here so we don't accidentally double it
109 }
110
111 // Navbar forms
112 // -------------------------
113 .navbar-form {
114 margin-bottom: 0; // remove default bottom margin
115 .clearfix();
116 input,
117 select,
118 .radio,
119 .checkbox {
120 .navbarVerticalAlign(30px); // Vertically center in navbar
121 }
122 input,
123 select,
124 .btn {
125 display: inline-block;
126 margin-bottom: 0;
127 }
128 input[type="image"],
129 input[type="checkbox"],
130 input[type="radio"] {
131 margin-top: 3px;
132 }
133 .input-append,
134 .input-prepend {
135 margin-top: 5px;
136 white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
137 input {
138 margin-top: 0; // remove the margin on top since it's on the parent
139 }
140 }
141 }
142
143 // Navbar search
144 // -------------------------
145 .navbar-search {
146 position: relative;
147 float: left;
148 .navbarVerticalAlign(30px); // Vertically center in navbar
149 margin-bottom: 0;
150 .search-query {
151 margin-bottom: 0;
152 padding: 4px 14px;
153 #font > .sans-serif(13px, normal, 1);
154 .border-radius(15px); // redeclare because of specificity of the type attribute
155 }
156 }
157
158
159
160 // Static navbar
161 // -------------------------
162
163 .navbar-static-top {
164 position: static;
165 margin-bottom: 0; // remove 18px margin for default navbar
166 .navbar-inner {
167 .border-radius(0);
168 }
169 }
170
171
172
173 // Fixed navbar
174 // -------------------------
175
176 // Shared (top/bottom) styles
177 .navbar-fixed-top,
178 .navbar-fixed-bottom {
179 position: fixed;
180 right: 0;
181 left: 0;
182 z-index: @zindexFixedNavbar;
183 margin-bottom: 0; // remove 18px margin for default navbar
184 }
185 .navbar-fixed-top .navbar-inner,
186 .navbar-static-top .navbar-inner {
187 border-width: 0 0 1px;
188 }
189 .navbar-fixed-bottom .navbar-inner {
190 border-width: 1px 0 0;
191 }
192 .navbar-fixed-top .navbar-inner,
193 .navbar-fixed-bottom .navbar-inner {
194 padding-left: 0;
195 padding-right: 0;
196 .border-radius(0);
197 }
198
199 // Reset container width
200 // Required here as we reset the width earlier on and the grid mixins don't override early enough
201 .navbar-static-top .container,
202 .navbar-fixed-top .container,
203 .navbar-fixed-bottom .container {
204 #grid > .core > .span(@gridColumns);
205 }
206
207 // Fixed to top
208 .navbar-fixed-top {
209 top: 0;
210 }
211 .navbar-fixed-top,
212 .navbar-static-top {
213 .navbar-inner {
214 .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
215 }
216 }
217
218 // Fixed to bottom
219 .navbar-fixed-bottom {
220 bottom: 0;
221 .navbar-inner {
222 .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
223 }
224 }
225
226
227
228 // NAVIGATION
229 // ----------
230
231 .navbar .nav {
232 position: relative;
233 left: 0;
234 display: block;
235 float: left;
236 margin: 0 10px 0 0;
237 }
238 .navbar .nav.pull-right {
239 float: right; // redeclare due to specificity
240 margin-right: 0; // remove margin on float right nav
241 }
242 .navbar .nav > li {
243 float: left;
244 }
245
246 // Links
247 .navbar .nav > li > a {
248 float: none;
249 // Vertically center the text given @navbarHeight
250 padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
251 color: @navbarLinkColor;
252 text-decoration: none;
253 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
254 }
255 .navbar .nav .dropdown-toggle .caret {
256 margin-top: 8px;
257 }
258
259 // Hover/focus
260 .navbar .nav > li > a:focus,
261 .navbar .nav > li > a:hover {
262 background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
263 color: @navbarLinkColorHover;
264 text-decoration: none;
265 }
266
267 // Active nav items
268 .navbar .nav > .active > a,
269 .navbar .nav > .active > a:hover,
270 .navbar .nav > .active > a:focus {
271 color: @navbarLinkColorActive;
272 text-decoration: none;
273 background-color: @navbarLinkBackgroundActive;
274 .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
275 }
276
277 // Navbar button for toggling navbar items in responsive layouts
278 // These definitions need to come after '.navbar .btn'
279 .navbar .btn-navbar {
280 display: none;
281 float: right;
282 padding: 7px 10px;
283 margin-left: 5px;
284 margin-right: 5px;
285 .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
286 .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
287 }
288 .navbar .btn-navbar .icon-bar {
289 display: block;
290 width: 18px;
291 height: 2px;
292 background-color: #f5f5f5;
293 .border-radius(1px);
294 .box-shadow(0 1px 0 rgba(0,0,0,.25));
295 }
296 .btn-navbar .icon-bar + .icon-bar {
297 margin-top: 3px;
298 }
299
300
301
302 // Dropdown menus
303 // --------------
304
305 // Menu position and menu carets
306 .navbar .nav > li > .dropdown-menu {
307 &:before {
308 content: '';
309 display: inline-block;
310 border-left: 7px solid transparent;
311 border-right: 7px solid transparent;
312 border-bottom: 7px solid #ccc;
313 border-bottom-color: @dropdownBorder;
314 position: absolute;
315 top: -7px;
316 left: 9px;
317 }
318 &:after {
319 content: '';
320 display: inline-block;
321 border-left: 6px solid transparent;
322 border-right: 6px solid transparent;
323 border-bottom: 6px solid @dropdownBackground;
324 position: absolute;
325 top: -6px;
326 left: 10px;
327 }
328 }
329 // Menu position and menu caret support for dropups via extra dropup class
330 .navbar-fixed-bottom .nav > li > .dropdown-menu {
331 &:before {
332 border-top: 7px solid #ccc;
333 border-top-color: @dropdownBorder;
334 border-bottom: 0;
335 bottom: -7px;
336 top: auto;
337 }
338 &:after {
339 border-top: 6px solid @dropdownBackground;
340 border-bottom: 0;
341 bottom: -6px;
342 top: auto;
343 }
344 }
345
346 // Caret should match text color on hover/focus
347 .navbar .nav li.dropdown > a:hover .caret,
348 .navbar .nav li.dropdown > a:focus .caret {
349 border-top-color: @navbarLinkColorHover;
350 border-bottom-color: @navbarLinkColorHover;
351 }
352
353 // Remove background color from open dropdown
354 .navbar .nav li.dropdown.open > .dropdown-toggle,
355 .navbar .nav li.dropdown.active > .dropdown-toggle,
356 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
357 background-color: @navbarLinkBackgroundActive;
358 color: @navbarLinkColorActive;
359 }
360 .navbar .nav li.dropdown > .dropdown-toggle .caret {
361 border-top-color: @navbarLinkColor;
362 border-bottom-color: @navbarLinkColor;
363 }
364 .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
365 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
366 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
367 border-top-color: @navbarLinkColorActive;
368 border-bottom-color: @navbarLinkColorActive;
369 }
370
371 // Right aligned menus need alt position
372 .navbar .pull-right > li > .dropdown-menu,
373 .navbar .nav > li > .dropdown-menu.pull-right {
374 left: auto;
375 right: 0;
376 &:before {
377 left: auto;
378 right: 12px;
379 }
380 &:after {
381 left: auto;
382 right: 13px;
383 }
384 .dropdown-menu {
385 left: auto;
386 right: 100%;
387 margin-left: 0;
388 margin-right: -1px;
389 .border-radius(6px 0 6px 6px);
390 }
391 }
392
393
394 // Inverted navbar
395 // -------------------------
396
397 .navbar-inverse {
398
399 .navbar-inner {
400 #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
401 border-color: @navbarInverseBorder;
402 }
403
404 .brand,
405 .nav > li > a {
406 color: @navbarInverseLinkColor;
407 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
408 &:hover,
409 &:focus {
410 color: @navbarInverseLinkColorHover;
411 }
412 }
413
414 .brand {
415 color: @navbarInverseBrandColor;
416 }
417
418 .navbar-text {
419 color: @navbarInverseText;
420 }
421
422 .nav > li > a:focus,
423 .nav > li > a:hover {
424 background-color: @navbarInverseLinkBackgroundHover;
425 color: @navbarInverseLinkColorHover;
426 }
427
428 .nav .active > a,
429 .nav .active > a:hover,
430 .nav .active > a:focus {
431 color: @navbarInverseLinkColorActive;
432 background-color: @navbarInverseLinkBackgroundActive;
433 }
434
435 // Inline text links
436 .navbar-link {
437 color: @navbarInverseLinkColor;
438 &:hover,
439 &:focus {
440 color: @navbarInverseLinkColorHover;
441 }
442 }
443
444 // Dividers in navbar
445 .divider-vertical {
446 border-left-color: @navbarInverseBackground;
447 border-right-color: @navbarInverseBackgroundHighlight;
448 }
449
450 // Dropdowns
451 .nav li.dropdown.open > .dropdown-toggle,
452 .nav li.dropdown.active > .dropdown-toggle,
453 .nav li.dropdown.open.active > .dropdown-toggle {
454 background-color: @navbarInverseLinkBackgroundActive;
455 color: @navbarInverseLinkColorActive;
456 }
457 .nav li.dropdown > a:hover .caret,
458 .nav li.dropdown > a:focus .caret {
459 border-top-color: @navbarInverseLinkColorActive;
460 border-bottom-color: @navbarInverseLinkColorActive;
461 }
462 .nav li.dropdown > .dropdown-toggle .caret {
463 border-top-color: @navbarInverseLinkColor;
464 border-bottom-color: @navbarInverseLinkColor;
465 }
466 .nav li.dropdown.open > .dropdown-toggle .caret,
467 .nav li.dropdown.active > .dropdown-toggle .caret,
468 .nav li.dropdown.open.active > .dropdown-toggle .caret {
469 border-top-color: @navbarInverseLinkColorActive;
470 border-bottom-color: @navbarInverseLinkColorActive;
471 }
472
473 // Navbar search
474 .navbar-search {
475 .search-query {
476 color: @white;
477 background-color: @navbarInverseSearchBackground;
478 border-color: @navbarInverseSearchBorder;
479 .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
480 .transition(none);
481 .placeholder(@navbarInverseSearchPlaceholderColor);
482
483 // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
484 &:focus,
485 &.focused {
486 padding: 5px 15px;
487 color: @grayDark;
488 text-shadow: 0 1px 0 @white;
489 background-color: @navbarInverseSearchBackgroundFocus;
490 border: 0;
491 .box-shadow(0 0 3px rgba(0,0,0,.15));
492 outline: 0;
493 }
494 }
495 }
496
497 // Navbar collapse button
498 .btn-navbar {
499 .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
500 }
501
502 }