amelia, cosmo: fixes #53
[bootswatch] / cosmo / bootswatch.less
1 // Cosmo 2.2.2
2 // Bootswatch
3 // -----------------------------------------------------
4
5
6 // TYPOGRAPHY
7 // -----------------------------------------------------
8
9 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
10
11 body {
12         font-weight: 300;
13 }
14
15 h1 {
16         font-size: 50px;
17 }
18
19 h2, h3 {
20         font-size: 26px;
21 }
22
23 h4 {
24         font-size: 14px;
25 }
26
27 h5, h6 {
28         font-size: 11px;
29 }
30
31 blockquote {
32
33         padding: 10px 15px;
34         background-color: @grayLighter;
35         border-left-color: @gray;
36
37         &.pull-right {
38                 padding: 10px 15px;
39                 border-right-color: @gray;
40         }
41
42         small {
43                 color: @gray;
44         }
45 }
46
47 .muted {
48         color: @gray;
49 }
50
51 // SCAFFOLDING
52 // -----------------------------------------------------
53
54 // NAVBAR
55 // -----------------------------------------------------
56
57 .navbar {
58
59         .navbar-inner {
60                 background-image: none;
61                 .box-shadow(none);
62                 .border-radius(0);
63         }
64
65         .brand {
66
67                 &:hover {
68                         color: @navbarLinkColorHover;
69                 }
70         }
71
72         .nav > .active > a,
73         .nav > .active > a:hover,
74         .nav > .active > a:focus {
75                 .box-shadow(none);
76                 background-color: @navbarLinkBackgroundHover;
77         }
78
79         .nav li.dropdown.open > .dropdown-toggle,
80         .nav li.dropdown.active > .dropdown-toggle,
81         .nav li.dropdown.open.active > .dropdown-toggle {
82                 color: @white;
83
84                 &:hover {
85                         color: @grayLighter;
86                 }
87         }
88
89         .navbar-search .search-query {
90                 line-height: normal;
91         }
92
93         &-inverse {
94
95                 .brand,
96                 .nav > li > a {
97                         text-shadow: none;
98                 }
99
100                 .brand:hover,
101                 .nav > .active > a,
102                 .nav > .active > a:hover,
103                 .nav > .active > a:focus {
104                         background-color: @navbarInverseLinkBackgroundHover;
105                         .box-shadow(none);
106                         color: @white;
107                 }
108
109                 .navbar-search .search-query {
110                         color: @grayDarker;
111                 }
112         }
113 }
114
115 div.subnav {
116
117         background-color: @grayLight;
118         background-image: none;
119         .box-shadow(none);
120         border: none;
121         .border-radius(0);
122
123         .nav {
124                 background-color: transparent;
125         }
126
127         .nav > li > a {
128                 border-color: transparent;
129         }
130
131         .nav > .active > a,
132         .nav > .active > a:hover {
133                 border-color: transparent;
134                 background-color: @black;
135                 color: @white;
136                 // border-left-width: 2px;
137                 .box-shadow(none);
138         }
139
140         &-fixed {
141                 top: @navbarHeight;
142         }
143 }
144
145 // NAV
146 // -----------------------------------------------------
147
148 .nav {
149
150         .open .dropdown-toggle,
151         & > li.dropdown.open.active > a:hover {
152                 color: @blue;
153         }
154
155 }
156
157 .nav-tabs {
158
159         & > li > a {
160                 .border-radius(0);
161         }
162
163         &.nav-stacked {
164
165                 & > li > a:hover {
166                         background-color: @blue;
167                         color: @white;
168                 }
169
170                 & > .active > a,
171                 & > .active > a:hover {
172                         background-color: @white;
173                         color: @gray;
174                 }
175
176                 & > li:first-child > a,
177                 & > li:last-child > a {
178                         .border-radius(0);
179                 }
180         }
181 }
182
183 .nav-pills {
184
185         & > li > a {
186                 background-color: @grayLight;
187                 .border-radius(0);
188                 color: @black;
189
190                 &:hover {
191                         background-color: @black;
192                         color: @white;
193                 }
194         }
195
196         & > .disabled > a,
197         & > .disabled > a:hover {
198                 background-color: @grayLighter;
199                 color: @grayDark;
200         }
201 }
202
203 .nav-list {
204
205         & > li > a {
206                 color: @grayDarker;
207
208                 &:hover {
209                         background-color: @blue;
210                         color: @white;
211                         text-shadow: none;
212                 }
213         }
214
215         .nav-header {
216                 color: @grayDarker;
217         }
218
219         .divider {
220                 background-color: @gray;
221                 border-bottom: none;
222         }
223 }
224
225 .pagination {
226
227         ul {
228
229                 .box-shadow(none);
230
231                 & > li > a,
232                 & > li > span {
233                         margin-right: 6px;
234                         color: @grayDarker;
235
236                         &:hover {
237                                 background-color: @grayDarker;
238                                 color: @white;
239                         }
240                 }
241
242                 & > li:last-child > a,
243                 & > li:last-child > span {
244                         margin-right: 0;
245                 }
246
247                 & > .active > a,
248                 & > .active > span { 
249                         color: @white;
250                 }
251
252                 & > .disabled > span,
253                 & > .disabled > a,
254                 & > .disabled > a:hover {
255                         background-color: @grayLighter;
256                         color: @grayDark;
257                 }
258         }
259 }
260
261 .pager {
262
263         li > a,
264         li > span {
265                 background-color: @grayLight;
266                 border: none;
267                 .border-radius(0);
268                 color: @grayDarker;
269
270                 &:hover {
271                         background-color: @grayDarker;
272                         color: @white;
273                 }
274         }
275
276         .disabled > a,
277         .disabled > a:hover,
278         .disabled > span {
279                 background-color: @grayLighter;
280                 color: @grayDark;
281         }
282
283 }
284
285 .breadcrumb {
286         background-color: @grayLight;
287
288         li {
289                 text-shadow: none;
290         }
291
292         .divider,
293         .active {
294                 color: @grayDarker;
295                 text-shadow: none;
296         }
297 }
298
299 // BUTTONS
300 // -----------------------------------------------------
301
302 .btn {
303         background-image: none;
304         .box-shadow(none);
305         border: none;
306         .border-radius(0);
307         text-shadow: none;
308
309         &.disabled {
310                 box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
311         }
312 }
313
314 .btn-group {
315
316         & > .btn:first-child,
317         & > .btn:last-child,
318         & > .dropdown-toggle {
319                 .border-radius(0);
320         }
321
322         & > .btn + .dropdown-toggle {
323                 .box-shadow(none);
324         }
325 }
326
327 // TABLES
328 // -----------------------------------------------------
329
330 .table {
331
332         tbody tr.success td {
333                 color: @white;
334         }
335
336         tbody tr.error td {
337                 color: @white;
338         }
339
340         tbody tr.info td {
341                 color: @white;
342         }
343
344         &-bordered {
345                 .border-radius(0);
346
347                 thead:first-child tr:first-child th:first-child,
348                 tbody:first-child tr:first-child td:first-child {
349                         .border-radius(0);
350                 }
351
352                 thead:last-child tr:last-child th:first-child,
353                 tbody:last-child tr:last-child td:first-child,
354                 tfoot:last-child tr:last-child td:first-child {
355                         .border-radius(0);
356                 }
357         }
358 }
359
360 // FORMS
361 // -----------------------------------------------------
362
363 select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
364 input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
365 input[type="week"], input[type="number"], input[type="email"], input[type="url"],
366 input[type="search"], input[type="tel"], input[type="color"] {
367         color: @grayDarker;
368 }
369
370 .control-group {
371
372         &.warning {
373
374                 .control-label,
375                 .help-block,
376                 .help-inline {
377                         color: @orange;
378                 }
379
380                 input,
381                 select,
382                 textarea {
383                         border-color: @orange;
384                         color: @grayDarker;
385                 }
386         }
387
388         &.error {
389
390                 .control-label,
391                 .help-block,
392                 .help-inline {
393                         color: @red;
394                 }
395
396                 input,
397                 select,
398                 textarea {
399                         border-color: @red;
400                         color: @grayDarker;
401                 }
402         }
403
404         &.success {
405
406                 .control-label,
407                 .help-block,
408                 .help-inline {
409                         color: @green;
410                 }
411
412                 input,
413                 select,
414                 textarea {
415                         border-color: @green;
416                         color: @grayDarker;
417                 }
418         }
419 }
420
421 legend {
422         border-bottom: none;
423         color: @grayDarker;
424 }
425
426 .form-actions {
427         border-top: none;
428         background-color: @grayLighter;
429 }
430
431 // DROPDOWNS
432 // -----------------------------------------------------
433
434 .dropdown-menu {
435         .border-radius(0);
436 }
437
438 // ALERTS, LABELS, BADGES
439 // -----------------------------------------------------
440
441 .alert {
442         .border-radius(0);
443         text-shadow: none;
444
445         &-heading, h1, h2, h3, h4, h5, h6 {
446                 color: @white;
447         }
448 }
449
450 .label {
451         min-width: 80px;
452         min-height: 80px;
453         .border-radius(0);
454         font-weight: 300;
455         text-shadow: none;
456
457         &-success {
458                 background-color: @green;
459         }
460
461         &-important {
462                 background-color: @red;
463         }
464
465         &-info {
466                 background-color: @purple;
467         }
468
469         &-inverse {
470                 background-color: @black;
471         }
472 }
473
474 .badge {
475
476         .border-radius(0);
477         font-weight: 300;
478         text-shadow: none;
479
480         &-success {
481                 background-color: @green;
482         }
483
484         &-important {
485                 background-color: @red;
486         }
487
488         &-info {
489                 background-color: @purple;
490         }
491
492         &-inverse {
493                 background-color: @black;
494         }
495 }
496
497 // MISC
498 // -----------------------------------------------------
499
500 .hero-unit {
501         border: none;
502         .border-radius(0);
503         .box-shadow(none);
504 }
505
506 .well {
507         border: none;
508         .border-radius(0);
509         .box-shadow(none);
510 }
511
512 [class^="icon-"], [class*=" icon-"] {
513         margin: 0 2px;
514         vertical-align: -2px;
515 }
516
517 a.thumbnail {
518         background-color: @grayLight;
519
520         &:hover {
521                 background-color: @gray;
522                 border-color: transparent;
523         }
524 }
525
526 .progress {
527         height: 6px;
528         .border-radius(0);
529         .box-shadow(none);
530         background-color: @grayLighter;
531         background-image: none;
532
533         .bar {
534                 background-color: @blue;
535                 background-image: none;
536         }
537
538         &-info {
539                 background-color: @purple;
540         }
541
542         &-success {
543                 background-color: @green;
544         }
545
546         &-warning {
547                 background-color: @orange;
548         }
549
550         &-danger {
551                 background-color: @red;
552         }
553 }
554
555 .modal {
556         .border-radius(0);
557
558         &-header {
559                 border-bottom: none;
560         }
561
562         &-footer {
563                 border-top: none;
564                 background-color: transparent;
565         }
566 }
567
568 .popover {
569         .border-radius(0);
570         color: @white;
571
572         &-title {
573                 border-bottom: none;
574                 color: @white;
575         }
576
577 }
578
579 // MEDIA QUERIES
580 // -----------------------------------------------------