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