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