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