spruce: remove box-shadow from subnav active
[bootswatch] / spruce / bootswatch.less
1 // Bootswatch.less
2 // Swatch: Spruce
3 // Version: 2.0.2
4 // -----------------------------------------------------
5
6 // TYPOGRAPHY
7 // --------------------------------------------------
8
9 @import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400,700');
10
11 .navbar .brand, legend, .btn,
12 .navbar .nav > li > a,
13 div.subnav li > a  {
14         font-family: @headingsFontFamily;
15         font-weight: @headingsFontWeight;
16 }
17
18 h3 { font-size: 20px; }
19 h4 { font-size: 16px; }
20 h5 { font-size: 14px; }
21
22 h1, h2, h3, h4, h5, h6 {
23         color: @yellow;
24 }
25
26 h1 > small, h2 > small, h3 > small, h4 > small, h5 > small, h6 > small, .muted {
27         color: @linkColor;
28         font-family: @baseFontFamily;
29 }
30
31 .alert-heading {
32         font-family: @baseFontFamily;
33 }
34
35 // SCAFFOLDING
36 // --------------------------------------------------
37
38 body {
39         #gradient > .vertical-three-colors (#90A38F, #AEAD8E, 60%, #90A38F);
40         background-size: 100% 1400px;
41         background-repeat: repeat-y !important;
42 }
43
44 blockquote {
45         border-left: 2px solid @linkColor;
46         
47         &.pull-right {
48                 border-right: 2px solid @linkColor;
49         }
50         
51         small {
52                 color: @blueDark;
53         }
54 }
55
56 code, pre {
57         color: lighten(@blueDark, 10%);
58         background-color: @linkColor;
59 }
60
61 // NAVBAR
62 // --------------------------------------------------
63
64 .navbar-inner {
65         background-image: none;
66         .box-shadow(none);
67 }
68
69 .navbar .brand {
70         font-size: 26px;
71         padding: 18px 20px 12px;
72         color: @linkColor;
73 }
74
75 .navbar .nav > li > a, {
76         font-size: 20px;
77         padding: 22px 10px 11px;
78         color: @linkColor;
79         
80         &:hover {
81                 color: @yellow;
82         }
83 }
84
85 .navbar .nav .active > a,
86 .navbar .nav .active > a:hover {
87         color: @yellow;
88 }
89
90 .navbar-search {
91         margin-top: 12px;
92 }
93
94 .navbar-search .search-query {
95         border-color: transparent;
96         padding: 6px 9px 2px 9px;
97         background-color: rgba(256, 256, 256, 0.4);
98 }
99
100 .navbar .nav > .dropdown.open > a {
101         color: @yellow;
102 }
103
104 .navbar .nav > .dropdown.open > .dropdown-menu {
105         background-color: @linkColor;
106         color: @textColor;
107         border-color: transparent;
108 }
109
110 .navbar .nav > .dropdown.open > .dropdown-menu a:hover {
111         background-color: darken(#90A38F, 10%);
112         color: @linkColor;
113 }
114
115 .dropdown-menu .divider {
116         background-color: transparent;
117         border-bottom: 1px solid #AEAD8E;
118 }
119
120 div.subnav {
121         background-color: @green;
122         background-image: none;
123         border-color: transparent;
124         .box-shadow(0 1px 5px rgba(0,0,0,.1));
125         font-size: 18px;
126 }
127
128 div.subnav .nav > li > a {
129         color: @linkColor;
130         border-color: transparent;
131         background-color: transparent;
132 }
133
134 div.subnav .nav > li.active > a,
135 div.subnav .nav > li > a:hover,
136 div.subnav .nav > li.active > a:hover,
137 div.subnav .dropdown.open .dropdown-toggle {
138         .box-shadow(none);
139         background-color: transparent;
140         border-color: transparent;
141         color: @yellow;
142 }
143
144 div.subnav .nav > li + li > a {
145         border-color: transparent;
146 }
147
148 div.subnav .dropdown.open > .dropdown-menu {
149         background-color: @linkColor;
150         color: @textColor;
151         border-color: transparent;
152 }
153
154 div.subnav .dropdown.open > .dropdown-menu a:hover {
155         background-color: darken(#90A38F, 10%);
156         color: @linkColor;
157 }
158
159 div.subnav-fixed {
160         top: 54px;
161 }
162
163 .navbar .btn-navbar {
164         margin-top: 14px;
165 }
166
167 .navbar .nav-collapse.in .nav li > a {
168         color: @linkColor;
169         
170         &:hover {
171                 color: @yellow;
172                 background-color: @blue;
173         }
174 }
175
176 .navbar .navbar-form, .navbar .navbar-search {
177         border-color: transparent;
178         .box-shadow(none);
179 }
180
181 // TABLES
182 // --------------------------------------------------
183
184 .table,
185 .table.table-bordered,
186 .table.table-striped {
187         .border-radius(0 0 8px 8px);
188 }
189
190 .table-bordered thead:first-child tr:first-child th:first-child,
191 .table-bordered tbody:first-child tr:first-child td:first-child,
192 .table-bordered thead:first-child tr:first-child th:last-child,
193 .table-bordered tbody:first-child tr:first-child td:last-child {
194         .border-radius(0);
195 }
196
197 .table-striped tbody:last-child tr:last-child td:first-child {
198         .border-radius(0 0 0 8px);
199 }
200
201 .table-striped tbody:last-child tr:last-child td:last-child {
202         .border-radius(0 0 8px 0);
203 }
204
205 .table-bordered {
206         border: none;
207 }
208
209 .table thead tr th:first-child,
210 .table tbody tr td:first-child {
211         border-left: none;
212 }
213
214 .table th,
215 .table-striped tbody tr:nth-child(odd) th {
216         background-color: darken(#90A38F, 10%);
217         color: @linkColor;
218 }
219
220 // BUTTONS
221 // --------------------------------------------------
222
223 .btn {
224   .buttonBackground(lighten(@blueDark, 5%), @blueDark);
225     text-shadow: none;
226     color: @white;
227         border-color: transparent;
228         .box-shadow(none);
229         
230         &:hover {
231                 color: @grayLighter;
232         }
233 }
234
235 .btn-large {
236         font-size: 18px;
237 }
238
239 .btn-primary {
240         .buttonBackground(lighten(@blue, 10%), lighten(@blue, 5%));
241 }
242
243 .btn-warning {
244   .buttonBackground(@orange, darken(@orange, 5%));
245 }
246
247 .btn-danger {
248   .buttonBackground(lighten(@red, 5%), @red);
249 }
250
251 .btn-success {
252   .buttonBackground(#62c462, #51a351);
253 }
254
255 .btn-info {
256   .buttonBackground(#5bc0de, #2f96b4);
257 }
258
259 .btn-inverse {
260   .buttonBackground(@yellow, darken(@yellow, 5%));
261 }
262
263 .btn-group .dropdown-toggle {
264         .box-shadow(none);
265 }
266
267 // NAVIGATION
268 // --------------------------------------------------
269
270 .breadcrumb, .pagination > ul {
271         background-color: darken(#90A38F, 10%);
272         background-image: none;
273         border-color: transparent;
274         .box-shadow(none);
275 }
276
277 .breadcrumb li {
278         color: @yellow;
279         text-shadow: none;
280         
281         a {
282                 color: @linkColor;
283         }
284         
285         a:hover {
286                 color: @yellow;
287         }
288         
289         .divider {
290                 color: @blue;
291         }
292 }
293
294 .pagination a {
295         color: @linkColor;
296         border-color: transparent;
297         
298         &:hover {
299                 color: @yellow;
300                 background-color: #748C73;
301         }
302 }
303
304 .pagination .active a {
305         color: @blue;
306         background-color: #A2CDB5;
307 }
308
309 .pagination .disabled a,
310 .pagination .disabled a:hover {
311         color: @blue;
312 }
313
314 .nav-list > li > a, .nav-list .nav-header {
315         text-shadow: none;
316 }
317
318 .nav-list .active > a, .nav-list .active > a:hover {
319         background-color: #A2CDB5;
320         text-shadow: none;
321 }
322
323 .nav-list li > a:hover {
324         background-color: transparent;
325 }
326
327 .nav-tabs {
328         border-color: transparent;
329 }
330
331 .nav-tabs > li > a,
332 .nav-pills > li > a {
333         background-color: #748C73;
334         
335         &:hover {
336                 background-color: #748C73;
337                 border-color: transparent;
338         }
339 }
340
341 .nav-tabs > .active > a,
342 .nav-tabs > .active > a:hover,
343 .nav-pills .active > a,
344 .nav-pills .active > a:hover {
345         background-color: #A2CDB5;
346         border-color: transparent;
347         color: @blue;
348 }
349
350 .nav-tabs.nav-stacked > li > a {
351         border-color: transparent;
352         
353         &:hover {
354                 border-color: transparent;
355         }
356 }
357
358 .nav-tabs .open .dropdown-toggle,
359 .nav-pills .open .dropdown-toggle  {
360         background-color: #748C73;
361         border-color: transparent;
362         color: @yellow;
363 }
364
365 .nav-tabs .active.open .dropdown-toggle,
366 .nav-pills .active.open .dropdown-toggle {
367         background-color: #A2CDB5;
368 }
369
370 .nav-tabs .dropdown-menu,
371 .nav-pills .dropdown-menu {
372         background-color: @linkColor;
373         color: @textColor;
374         border-color: transparent;
375         
376         a:hover {
377                 background-color: #A2CDB5;
378                 color: @linkColor;
379         }
380 }
381
382 .nav .nav-header {
383         color: @blue;
384 }
385
386 .tabbable > .nav-tabs,
387 .tabbable > .nav-tabs > li > a,
388 .tabbable > .nav-tabs > li > a:hover,
389 .tabbable > .nav-tabs > li.active > a,
390 .tabbable > .nav-tabs > li.active > a:hover  {
391         border-color: transparent;
392 }
393
394 .pager a {
395         border: none;
396         background-color: #748C73;
397         
398         &:hover {
399                 background-color: transparent;
400                 background-color: #748C73;
401         }
402 }
403
404 // FORMS
405 // --------------------------------------------------
406
407 legend {
408         color: @yellow;
409 }
410
411 label, .help-block, input[type="file"] {
412         color: @linkColor;
413 }
414
415 input, textarea, select {
416         color: @textColor;
417 }
418
419 .uneditable-input {
420         color: @gray;
421 }
422
423 legend {
424         border-bottom: 2px solid @white;
425 }
426
427 .form-actions {
428         background-color: transparent;
429         border-top: none;
430         .border-radius(4px);
431 }
432
433 // MISCELLANEOUS
434 // --------------------------------------------------
435
436 .alert {
437         text-shadow: none;
438         border: none;
439 }
440
441 .label {
442         color: @linkColor;
443         opacity: 1;
444         text-shadow: none;
445 }
446
447 .progress {
448         background-color: darken(#90A38F, 10%);
449         background-image: none;
450         .box-shadow(none);
451         
452         .bar {
453                 background-image: none; 
454                 background-color: #A2CDB5;
455         }
456 }
457
458 .well {
459         background-color: darken(#90A38F, 10%);
460         border: none;
461         .box-shadow(none);
462 }
463
464 .thumbnail {
465         border: none;
466         .box-shadow(none);
467         
468         img {
469                 .border-radius(4px);
470         }
471 }
472
473 hr {
474         border-top: none;
475         border-bottom: 2px solid @linkColor;
476 }
477
478 .page-header {
479         border-bottom: 2px solid @linkColor;
480         padding-bottom: 5px;
481 }
482
483 footer.footer {
484         border-top: 2px solid @linkColor;
485 }