bootswatch.less 10.9 KB
Newer Older
Thomas Park's avatar
Thomas Park committed
1
// Superhero 2.2.2
Thomas Park's avatar
Thomas Park committed
2
// Bootswatch
3
4
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
5

6
7
8
// TYPOGRAPHY
// --------------------------------------------------

9
@import url('//fonts.googleapis.com/css?family=Oswald|Noticia+Text');
10

Thomas Park's avatar
Thomas Park committed
11
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, h6 {
12
	font-family: @headingsFontFamily;
13
14
15
16
	color: @orange;
	text-shadow: -1px 1px 0 darken(@orange, 30%);
}

Thomas Park's avatar
Thomas Park committed
17
h1, h2 {
18
19
20
21
22
23
24
25
26
27
28
29
30
	text-shadow: -2px 2px 0 darken(@orange, 30%);
}

h1 {
	line-height: 55px;
}

code, pre {
	background-color: lighten(@blue, 8%);
	border: none;
	color: @textColor;
}

Thomas Park's avatar
Thomas Park committed
31
32
33
34
35
// SCAFFOLDING
// --------------------------------------------------

.page-header {
	border-bottom: none;
36
37
38
39
40
41
42
43
44
45
46
47
48
}

blockquote {
	border-left: 5px solid @blue;
}

blockquote.pull-right {
	border-right: 5px solid @blue;
}

// NAVBAR
// --------------------------------------------------

49
.navbar {
Thomas Park's avatar
Thomas Park committed
50

51
52
53
54
	.navbar-inner {
		.box-shadow(none);
		background-image: none;
	}
Thomas Park's avatar
Thomas Park committed
55

56
57
58
59
60
61
	.brand {
		padding: 25px 20px 15px;
		font-family: @headingsFontFamily;
		font-size: 30px;
		text-shadow: -2px 2px 0 darken(@orange, 30%);
	}
Thomas Park's avatar
Thomas Park committed
62

63
	.nav > li > a {
Thomas Park's avatar
Thomas Park committed
64
		padding: 23px 20px 13px;
65
66
67
68
69
		line-height: 30px;
		font-family: @headingsFontFamily;
		font-size: 22px;
		text-shadow: -2px 2px 0 darken(@orange, 30%);
	}
Thomas Park's avatar
Thomas Park committed
70

71
72
73
74
75
76
77
78
79
80
81
	.brand:hover,
	.nav > li > a:hover,
	.nav > li.active > a:hover,
	.nav > li.dropdown.open > a,
	.nav > li.dropdown.open > a:hover {
		position: relative;
		top: 1px;
		left: -1px;
		color: @orange;
		text-shadow: -1px 1px 0 darken(@orange, 30%);
	}
Thomas Park's avatar
Thomas Park committed
82

Thomas Park's avatar
Thomas Park committed
83
84
85
86
87
88
89
90
91
92
93
94
95
96
	.nav > .active > a,
	.nav > .active > a:hover,
	.nav > .active > a:focus {
		.box-shadow(none);
	}

	.navbar-text {
		padding: 23px 20px 13px;
		line-height: 30px;
		font-family: @headingsFontFamily;
		font-size: 22px;
		text-shadow: -2px 2px 0 @gray;
	}

97
	.navbar-search {
Thomas Park's avatar
Thomas Park committed
98
		margin-top: 24px;
99
	}
100

101
102
103
104
105
	.navbar-search .search-query {
		font-family: @baseFontFamily;
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
		.box-shadow(none);
Thomas Park's avatar
Thomas Park committed
106
107
108
109
	}

	&.navbar-inverse .navbar-search .search-query {
		color: @blueDark;
110
	}
111

112
113
114
	.divider-vertical {
		height: 70px;
	}
Thomas Park's avatar
Thomas Park committed
115

116
117
	.nav .dropdown-toggle .caret,
	.nav .open.dropdown .caret {
Thomas Park's avatar
Thomas Park committed
118
		margin-top: 14px;
119
120
		border-top-color: @textColor;
	}
Thomas Park's avatar
Thomas Park committed
121

122
123
124
	.dropdown-menu::before {
		border: none;
	}
125

126
127
128
129
130
131
	.dropdown-menu::after {
		left: 20px;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid lighten(@blue, 10%);
	}
Thomas Park's avatar
Thomas Park committed
132

133
134
135
	[class^="icon-"], [class*=" icon-"] {
		vertical-align: 20%;
	}
136

137
138
139
140
	.btn-navbar {
		background-color: @blue;
		border-color: transparent;
	}
141
142
143
}

@media (max-width: @navbarCollapseWidth) {
144

145
	.navbar .nav-collapse {
Thomas Park's avatar
Thomas Park committed
146

147
		.border-radius(4px);
Thomas Park's avatar
Thomas Park committed
148

149
150
151
152
153
154
155
156
157
		.nav li > a {
			color: @orange;

			&:hover {
				background-color: lighten(@blue, 10%) !important;
				background-image: none;
			}
		}

Thomas Park's avatar
Thomas Park committed
158
159
160
161
162
		.navbar-form,
		.navbar-search {
			border-top: none;
			border-bottom: none;
			.box-shadow(none);
163
		}
Thomas Park's avatar
Thomas Park committed
164

Thomas Park's avatar
Thomas Park committed
165
		.nav-header {
166
167
168
			color: @textColor;
		}
	}
169
170
171
}

div.subnav {
172
173
	margin: 0 1px;
	background: @blue none;
174
	border: none;
175

176
177
	.nav > li > a,
	.nav > li.active > a {
178
		border-color: transparent;
179
180
		color: @textColor;
	}
Thomas Park's avatar
Thomas Park committed
181

182
183
184
	.nav > li > a:hover,
	.nav > li.active > a:hover {
		background-color: lighten(@blue, 10%);
185
		border-color: transparent;
186
	}
187

188
	.nav > li.active > a,
189
	.nav > li.active > a:hover {
190
		background: @orange none;
191
		.box-shadow(none);
192
		color: @white;
193
194
195
	}

	&.subnav-fixed {
196
197
		top: @navbarHeight + 1;
		margin: 0;
198
199
200
201
		.box-shadow(none);

		.nav > li > a,
		.nav > li > a:hover,
202
		.nav > li.active > a,
203
204
205
206
207
208
209
210
211
		.nav > li.active > a:hover {
			border-color: transparent;
			.border-radius(0);
		}

		.nav > li > a:hover,
		.nav > li.active > a:hover {
			color: @white;
		}
212
213
	}

Thomas Park's avatar
Thomas Park committed
214
215
216
	.nav > .active > a .caret,
	.nav > .active > a:hover .caret {
		border-top-color: @textColor;
217
218
219
220
221
222
	}
}

// NAVIGATION
// --------------------------------------------------

Thomas Park's avatar
Thomas Park committed
223
.nav .nav-header {
Thomas Park's avatar
Thomas Park committed
224
225
	color: @textColor;
	text-shadow: none;
Thomas Park's avatar
Thomas Park committed
226
227
}

228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
.nav-list {
	padding: 0 15px;
}

.nav-list > li > a, .nav-list .nav-header {
	text-shadow: none;
	color: @textColor;
}

.nav-list .active > a, .nav-list .active > a:hover {
	text-shadow: none;
	color: @white;
}

.nav-list li > a:hover {
	background-color: lighten(@blue, 10%);
}

.nav-tabs, .nav-tabs.nav-stacked > li > a {
	border-color: transparent;
}

Thomas Park's avatar
Thomas Park committed
250
.nav-tabs {
251
252
253
254
255
256
257
258
259
260
261
262
	> li > a {
		background-color: @blue;
		color: @textColor;
	}

	li.active > a,
	li.active > a:hover,
	&.nav-stacked > li.active > a:hover {
		color: @white;
		background-color: @orange;
		border-color: transparent;
	}
Thomas Park's avatar
Thomas Park committed
263

264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
	li > a:hover,
	&.nav-stacked > li > a:hover {
		background-color: lighten(@blue, 10%);
		border-color: transparent;
	}
}

.nav-pills > li > a {
	color: @textColor;
	background-color: @blue;
}

.nav-pills > li:hover > a {
	background-color: lighten(@blue, 10%);
	border-color: transparent;
}

.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > .open.active > a:hover {
	background-color: lighten(@blue, 10%);
	border-color: transparent;
}

288
289
290
291
292
.nav-pills .dropdown .caret,
.nav-pills .dropdown:hover .caret {
	border-top-color: @textColor;
}

293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
.dropdown.open .dropdown-menu > li > a:hover,
.dropdown.open .dropdown-menu > li.active > a:hover {
	background-color: @orange;
	color: @white;
}

.tabbable .nav-tabs,
.tabbable .nav-tabs > li.active > a,
.tabbable .nav-tabs > li > a:hover,
.tabbable .nav-tabs > li.active > a:hover {
	border-color: transparent;
}

.breadcrumb {
	background-color: @blue;
	background-image: none;
	border: none;
	.box-shadow(none);
Thomas Park's avatar
Thomas Park committed
311

312
313
314
	li {
		text-shadow: none;
	}
Thomas Park's avatar
Thomas Park committed
315

316
317
318
319
320
	.divider {
		color: @textColor;
	}
}

Thomas Park's avatar
Thomas Park committed
321
.pagination {
322

Thomas Park's avatar
Thomas Park committed
323
324
325
326
	ul {
		background-image: none;
		border-color: transparent;
	}
Thomas Park's avatar
Thomas Park committed
327

328
329
	ul > li > a,
	ul > li > span {
330
331
332
		border: none;
		color: @textColor;
	}
Thomas Park's avatar
Thomas Park committed
333

334
335
	ul > li > a:hover {
		background: lighten(@blue, 10%);
336
	}
Thomas Park's avatar
Thomas Park committed
337

338
339
340
341
342
343
	ul > .active > a,
	ul > .active > a:hover,
	ul > .active > span,
	ul > .active > span:hover {
		background-color: @orange;
		color: @white;
344
	}
Thomas Park's avatar
Thomas Park committed
345

346
347
348
349
	ul > .disabled > a,
	ul > .disabled > a:hover,
	ul > .disabled > span,
	ul > .disabled > span:hover {
350
351
352
353
		background: darken(@blue, 5%);
	}
}

Thomas Park's avatar
Thomas Park committed
354
.pager {
Thomas Park's avatar
Thomas Park committed
355

Thomas Park's avatar
Thomas Park committed
356
357
358
359
360
361
362
363
364
365
366
367
368
	a {
		color: @textColor;
		background-color: @blue;
		border-color: transparent;

		&:hover {
			background: lighten(@blue, 10%);
		}
	}

	.disabled a,
	.disabled a:hover {
		background-color: @blue;
369
370
371
	}
}

Thomas Park's avatar
Thomas Park committed
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
// BUTTONS
// --------------------------------------------------

.btn,
.btn:hover {
	text-shadow: none;
	background-image: none;
	.box-shadow(-2px 2px 0 rgba(0, 0, 0, 0.2));
	border: none;
}

.btn-warning {
	background-color: @yellow;
}

.btn-primary, .btn-primary:hover {
	.box-shadow(-2px 2px 0 darken(@btnPrimaryBackground, 30%));
}

.btn-warning, .btn-warning:hover {
	.box-shadow(-2px 2px 0 darken(@yellow, 30%));
}

.btn-danger, .btn-danger:hover {
	.box-shadow(-2px 2px 0 darken(#ee5f5b, 30%));
}

.btn-success, .btn-success:hover {
	.box-shadow(-2px 2px 0 darken(#62c462, 30%));
}

.btn-info, .btn-info:hover {
	.box-shadow(-2px 2px 0 darken(#5bc0de, 40%));
}

.btn-inverse, .btn-inverse:hover {
	.box-shadow(-2px 2px 0 darken(#454545, 20%));
}

.btn.dropdown-toggle, .btn.dropdown-toggle:hover {
	.box-shadow(0 2px 0 darken(@white, 80%));
}

.btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:hover {
	.box-shadow(0 2px 0 darken(@btnPrimaryBackground, 30%));
}

.btn-warning.dropdown-toggle, .btn-warning.dropdown-toggle:hover {
	.box-shadow(0 2px 0 darken(@yellow, 30%));
}

.btn-danger.dropdown-toggle, .btn-danger.dropdown-toggle:hover {
	.box-shadow(0 2px 0 darken(#ee5f5b, 30%));
}

.btn-success.dropdown-toggle, .btn-success.dropdown-toggle:hover {
	.box-shadow(0 2px 0 darken(#62c462, 30%));
}

.btn-info.dropdown-toggle, .btn-info.dropdown-toggle:hover {
	.box-shadow(0 2px 0 darken(#5bc0de, 40%));
}

.btn-inverse.dropdown-toggle, .btn-inverse.dropdown-toggle:hover {
	.box-shadow(0 2px 0 darken(#454545, 20%));
}

.btn.active,
.btn:active {
	position: relative;
	top: 1px;
	left: -1px;
	.box-shadow(-1px 1px 0 darken(@white, 80%))
}

.btn.disabled,
.btn.disabled.active,
.btn.disabled:active,
.btn[disabled] {
	.box-shadow(none);
	text-shadow: none;
	top: 0;
	left: 0;
}

[class^="icon-"], [class*=" icon-"] {
	vertical-align: -13%;
}

// TABLES
// -----------------------------------------------------

.table,
.table-striped tbody > tr > td:first-child,
.table-striped tbody > tr > td:last-child, {
	.border-radius(4px);
}

470
471
472
473
474
475
476
477
478
// FORMS
// --------------------------------------------------

input, button, select, textarea {
	font-family: 'Noticia Text', serif;
}

legend {
	border-bottom: none;
Thomas Park's avatar
Thomas Park committed
479
480
481
	font-family: @headingsFontFamily;
	color: @orange;
	text-shadow: -2px 2px 0 darken(@orange, 30%);
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
}

label {
	color: @textColor;
	line-height: 15px;
}

.help-block {
	color: @textColor;
	opacity: 0.6;
}

.form-actions {
	border-top: none;
}

.control-group.warning {
  .formFieldState(lighten(@warningText, 10%), lighten(@warningText, 10%), @warningBackground);
}
Thomas Park's avatar
Thomas Park committed
501

502
503
504
.control-group.error {
  .formFieldState(lighten(@errorText, 10%), lighten(@errorText, 10%), @errorBackground);
}
Thomas Park's avatar
Thomas Park committed
505

506
507
508
509
.control-group.success {
  .formFieldState(lighten(@successText, 10%), lighten(@successText, 10%), @successBackground);
}

Thomas Park's avatar
Thomas Park committed
510
511
512
513
514
515
516
.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn {
	color: @bodyBackground;
}

Thomas Park's avatar
Thomas Park committed
517
// DROPDOWNS
Thomas Park's avatar
Thomas Park committed
518
519
// --------------------------------------------------

Thomas Park's avatar
Thomas Park committed
520
521
522
523
524
525
.dropdown .caret {
	margin-top: 14px;
	opacity: 1;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid lighten(@blue, 10%);
Thomas Park's avatar
Thomas Park committed
526
527
}

Thomas Park's avatar
Thomas Park committed
528
// ALERTS, LABELS, BADGES
529
530
// --------------------------------------------------

Thomas Park's avatar
Thomas Park committed
531
.label {
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
	background-color: @blue;
  	color: @textColor;
}

.label-important {
	background-color: @errorText;
}

.label-warning {
	background-color: @orange;
}

.label-success {
	background-color: @successText;
}

.label-info {
	background-color: @infoText;
}

.alert {
  background-color: @blue;
Thomas Park's avatar
Thomas Park committed
554
  border: none;
555
556
  color: @textColor;
  text-shadow: none;
Thomas Park's avatar
Thomas Park committed
557

558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
  a {
  	color: lighten(@orange, 12%);
  }
}

.alert .alert-heading {
	color: @orange;
}

.alert-success {
  background-color: @successText;
}

.alert-danger,
.alert-error {
  background-color: @errorText;
}

.alert-info {
  background-color: @infoText;
}

Thomas Park's avatar
Thomas Park committed
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
// MISC
// --------------------------------------------------

.well, .hero-unit {
	border: none;
	.box-shadow(none);
}

.hero-unit h1 {
	color: @orange;
	line-height: 2em;
}

.progress {
	background-color: darken(@blueDark, 5%);
	background-image: none;
	.box-shadow(none);

	.bar {
		.box-shadow(none);
	}
}

.thumbnail {
	border: none;
	background: @blue;
	.border-radius(3px);
}

.modal {
	background-color: transparent;

	&-header,
	&-body,
	&-footer {
		.box-shadow(none);
		background-color: @bodyBackground;
		border: none;
	}

	&-header {
		.border-radius(4px 4px 0 0);
	}

	&-footer {
		.border-radius(0 0 4px 4px);
	}
}

// MEDIA QUERIES
// --------------------------------------------------

@media (max-width: 768px) {

	div.subnav {

		.nav > li {

			&:first-child > a,
			&:first-child > a:hover,
			&.active:first-child > a,
			&.active:first-child > a:hover {
				.border-radius(4px 4px 0 0);
			}

			&:last-child > a,
			&:last-child > a:hover,
			&.active:last-child > a,
			&.active:last-child > a:hover {
				.border-radius(0 0 4px 4px);
			}
		}
	}
653
}