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