bootswatch.less 10.6 KB
Newer Older
Thomas Park's avatar
Thomas Park committed
1
2
// Slate 2.2.1
// Bootswatch
Thomas Park's avatar
Thomas Park committed
3
4
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
5

Thomas Park's avatar
Thomas Park committed
6
// TYPOGRAPHY
Thomas Park's avatar
Thomas Park committed
7
8
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
9
h1, h2, h3, h4, h5, h6 {
10
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
11
12
}

Thomas Park's avatar
Thomas Park committed
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
code, pre {
	background-color: #F7F7F7;
	border: 1px solid darken(@grayDarker, 5%);
	text-shadow: none;
}

// SCAFFOLDING
// -----------------------------------------------------

hr, legend, .page-header {
	border-top: none;
	border-bottom: 1px solid darken(@grayDarker, 5%);
	background-color: transparent;
}

Thomas Park's avatar
Thomas Park committed
28
29
30
// NAVBAR
// -----------------------------------------------------

31
.navbar {
Thomas Park's avatar
Thomas Park committed
32

33
	.navbar-inner {
Thomas Park's avatar
Thomas Park committed
34
		#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
35
	}
Thomas Park's avatar
Thomas Park committed
36
37

	.brand {
38
39
		font-weight: bold;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
40
		border-right: 1px solid darken(@gray, 15%);
41
	}
Thomas Park's avatar
Thomas Park committed
42
43

	.navbar-text {
Thomas Park's avatar
Thomas Park committed
44
45
		padding: 0 15px;
		font-weight: bold;
Thomas Park's avatar
Thomas Park committed
46
47
	}

48
49
	.nav > li > a  {
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
50
51
		border-right: 1px solid rgba(0, 0, 0, 0.2);
		border-left: 1px solid rgba(255, 255, 255, 0.1);
Thomas Park's avatar
Thomas Park committed
52

53
54
55
56
57
58
		&:hover {
			#gradient > .directional(@grayDarker, @grayDark, 280deg);
			border-left: 1px solid transparent;
			border-right: 1px solid transparent;
		}
	}
Thomas Park's avatar
Thomas Park committed
59

60
61
	.nav > li.active > a,
	.nav > li.active > a:hover {
Thomas Park's avatar
Thomas Park committed
62
63
		color: @grayLighter;
		background-color: @grayDark;
64
65
66
		#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
		border-right: 1px solid darken(@gray, 15%);
	}
Thomas Park's avatar
Thomas Park committed
67

68
69
	.navbar-search .search-query {
		border: 1px solid darken(@gray, 15%);
Thomas Park's avatar
Thomas Park committed
70
71
	}

72
73
74
75
	.divider-vertical {
		background-color: transparent;
		border-right: none;
	}
Thomas Park's avatar
Thomas Park committed
76

77
78
79
	.dropdown-menu::after {
		border-bottom: 6px solid @grayDark;
	}
Thomas Park's avatar
Thomas Park committed
80

81
82
83
84
85
86
87
88
89
90
	&-inverse {

		.navbar-inner {
			#gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%));
		}

		.nav li > a {
			background-image: none;
			background-color: transparent;
		}
Thomas Park's avatar
Thomas Park committed
91
92

		.nav li > a:hover,
93
		.nav li.active > a,
Thomas Park's avatar
Thomas Park committed
94
		.nav li.active > a:hover {
95
96
97
98
99
100
101
102
103
104
105
106
107
			#gradient > .directional(darken(@grayDarker, 3%), @grayDarker, 280deg);
		}
	}
}

@media (max-width: @navbarCollapseWidth) {

	.navbar .nav-collapse {

		.nav li > a,
		.nav li > a:hover,
		.nav .active > a,
		.nav .active > a:hover {
Thomas Park's avatar
Thomas Park committed
108
109
110
111
112
113
114
115
			.box-shadow(none);
			color: @grayLighter;
			border: 1px solid transparent;
			background-color: transparent;
			background-image: none;
		}

		.nav li > a:hover,
116
		.nav .active > a:hover {
Thomas Park's avatar
Thomas Park committed
117
118
119
120
121
122
123
124
125
126
127
128
			background-color: @grayDarker;
		}

		.navbar-form,
		.navbar-search {
			border-color: transparent;
			.box-shadow(none);
		}

		.nav-header {
			color: @grayLight;
		}
129
	}
Thomas Park's avatar
Thomas Park committed
130

131
	.navbar-inverse .nav-collapse {
Thomas Park's avatar
Thomas Park committed
132
133

		.nav li > a:hover,
134
135
		.nav .active > a:hover {
			background-color: @grayDarker !important;
Thomas Park's avatar
Thomas Park committed
136
		}
Thomas Park's avatar
Thomas Park committed
137
	}
Thomas Park's avatar
Thomas Park committed
138
139
140
}

div.subnav {
141

142
	#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
Thomas Park's avatar
Thomas Park committed
143
	border: 1px solid transparent;
Thomas Park's avatar
Thomas Park committed
144
	.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
Thomas Park's avatar
Thomas Park committed
145

146
147
148
149
150
	.nav > li > a {
		color: @grayLighter;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
		border-right: 1px solid darken(@gray, 15%);
		border-left: 1px solid @gray;
Thomas Park's avatar
Thomas Park committed
151

152
153
154
155
156
157
158
159
		&:hover {
			color: @grayLighter;
			background-color: @grayDark;
			#gradient > .directional(@grayDarker, @grayDark, 280deg);
			border-left: 1px solid transparent;
			border-right: 1px solid transparent;
		}
	}
Thomas Park's avatar
Thomas Park committed
160

161
162
163
164
165
166
167
	.nav > li.active > a,
	.nav > li.active > a:hover {
		color: @grayLighter;
		background-color: @grayDark;
		#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
		border-right: 1px solid darken(@gray, 15%);
	}
Thomas Park's avatar
Thomas Park committed
168

169
170
171
172
	.nav > li:first-child > a,
	.nav > li:first-child > a:hover {
		border-left: 1px solid transparent;
	}
Thomas Park's avatar
Thomas Park committed
173

174
175
176
177
	&.subnav-fixed .nav > li.active:first-child > a,
	&.subnav-fixed .nav > li:first-child > a:hover {
		border-left: 1px solid darken(@gray, 15%);
	}
Thomas Park's avatar
Thomas Park committed
178

179
180
181
182
	.nav > li.active:last-child > a,
	.nav > li:last-child > a:hover {
		border-right: 1px solid darken(@gray, 15%);
	}
Thomas Park's avatar
Thomas Park committed
183

184
185
186
187
	.open .dropdown-toggle {
		border-right: 1px solid darken(@gray, 15%);
		border-left: 1px solid @gray;
	}
Thomas Park's avatar
Thomas Park committed
188

189
190
	&.subnav-fixed {
		.box-shadow(none);
Thomas Park's avatar
Thomas Park committed
191
192
193
	}
}

Thomas Park's avatar
Thomas Park committed
194
// NAV
Thomas Park's avatar
Thomas Park committed
195
196
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
197
198
.nav .nav-header {
	text-shadow: none;
Thomas Park's avatar
Thomas Park committed
199
200
}

Thomas Park's avatar
Thomas Park committed
201
202
203
204
205
.nav > li > a {
	#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
	.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
	border: none;
	color: @grayLight;
Thomas Park's avatar
Thomas Park committed
206
207
208
209
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

Thomas Park's avatar
Thomas Park committed
210
211
212
213
214
.nav > li.active > a,
.nav > li.active > a:hover {
	background-color: transparent;
	border: none;
	color: @white;
Thomas Park's avatar
Thomas Park committed
215
}
216

Thomas Park's avatar
Thomas Park committed
217
218
219
.nav > li > a:hover {
	background-color: transparent;
	color: @grayLighter;
Thomas Park's avatar
Thomas Park committed
220
}
Thomas Park's avatar
Thomas Park committed
221

Thomas Park's avatar
Thomas Park committed
222
223
224
.nav-list {
	background-color: @grayDark;
	.box-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
Thomas Park's avatar
Thomas Park committed
225

Thomas Park's avatar
Thomas Park committed
226
227
228
229
	li > a {
		background-image: none;
		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
	}
Thomas Park's avatar
Thomas Park committed
230

Thomas Park's avatar
Thomas Park committed
231
232
233
234
	.nav-header {
		color: @gray;
		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
	}
Thomas Park's avatar
Thomas Park committed
235

Thomas Park's avatar
Thomas Park committed
236
237
238
239
	.divider {
		border-bottom: 1px solid darken(@grayDarker, 5%);
		background-color: transparent;
	}
Thomas Park's avatar
Thomas Park committed
240
241
}

Thomas Park's avatar
Thomas Park committed
242
243
.nav-tabs {
	border-bottom: none;
Thomas Park's avatar
Thomas Park committed
244
245
}

Thomas Park's avatar
Thomas Park committed
246
247
248
.tabs-below .nav-tabs {
	border-top: none;
}
Thomas Park's avatar
Thomas Park committed
249

Thomas Park's avatar
Thomas Park committed
250
251
252
.tabs-left .nav-tabs {
	border-right: none;
}
Thomas Park's avatar
Thomas Park committed
253

Thomas Park's avatar
Thomas Park committed
254
255
256
.tabs-right .nav-tabs {
	border-left: none;
}
Thomas Park's avatar
Thomas Park committed
257

Thomas Park's avatar
Thomas Park committed
258
259
260
261
.nav-tabs.nav-stacked > li > a,
.nav-tabs.nav-stacked > li > a:hover {
	border: none;
}
Thomas Park's avatar
Thomas Park committed
262

Thomas Park's avatar
Thomas Park committed
263
.breadcrumb {
Thomas Park's avatar
Thomas Park committed
264
	border: 1px solid transparent;
Thomas Park's avatar
Thomas Park committed
265
	#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
266
	.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
Thomas Park's avatar
Thomas Park committed
267

268
269
270
271
	a {
		color: @grayLighter;
		font-weight: bold;
	}
Thomas Park's avatar
Thomas Park committed
272

273
274
275
276
277
	li {
		color: @grayLight;
		font-weight: bold;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	}
Thomas Park's avatar
Thomas Park committed
278
279
}

Thomas Park's avatar
Thomas Park committed
280
.pagination {
Thomas Park's avatar
Thomas Park committed
281

282
	ul {
Thomas Park's avatar
Thomas Park committed
283
284
		.box-shadow(none);
	}
Thomas Park's avatar
Thomas Park committed
285

286
287
	ul > li > a,
	ul > li > span {
Thomas Park's avatar
Thomas Park committed
288
289
290
291
		border-left: 1px solid @gray;
		border-right: 1px solid darken(@gray, 15%);
		border-top: none;
		border-bottom: none;
292
293
294
295
296
		#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
		.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
		color: @grayLighter;
		font-weight: bold;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
297

298
299
300
301
		&:hover {
			#gradient > .directional(@grayDarker, @grayDark, 280deg);
			border-left: 1px solid transparent;
		}
Thomas Park's avatar
Thomas Park committed
302
303
	}

304
305
306
307
	ul > .active > a,
	ul > .active > a:hover,
	ul > .active > span,
	ul > .active > span:hover {
Thomas Park's avatar
Thomas Park committed
308
309
310
311
312
		color: @grayLighter;
		background-color: @grayDark;
		#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
		border-left: 1px solid transparent;
	}
313

314
315
316
317
	ul > .disabled > a,
	ul > .disabled > a:hover,
	ul > .disabled > span,
	ul > .disabled > span:hover {
318
319
320
321
322
323
		border-left: 1px solid @gray;
		border-right: 1px solid darken(@gray, 15%);
		border-top: none;
		border-bottom: none;
		#gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
	}
Thomas Park's avatar
Thomas Park committed
324
325
}

Thomas Park's avatar
Thomas Park committed
326
327
.pager {

328
329
330
331
332
333
	a {
		border: 1px solid transparent;
		.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
		#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
	}	

Thomas Park's avatar
Thomas Park committed
334
335
336
337
338
339
340
341
342
	a:hover {
		#gradient > .directional(@grayDarker, @grayDark, 280deg);
		border: 1px solid transparent;
	}

	.disabled a,
	.disabled a:hover {
		background-color: transparent;
	}
Thomas Park's avatar
Thomas Park committed
343
344
}

Thomas Park's avatar
Thomas Park committed
345
346
// BUTTONS
// -----------------------------------------------------
Thomas Park's avatar
Thomas Park committed
347

Thomas Park's avatar
Thomas Park committed
348
349
350
351
.btn {
    .buttonBackground(@gray, darken(@gray, 10%));
	.border-radius(3px);
	border: 1px solid @grayDarker;
Thomas Park's avatar
Thomas Park committed
352
353
}

Thomas Park's avatar
Thomas Park committed
354
.btn, .btn:hover {
355
	color: @white;
Thomas Park's avatar
Thomas Park committed
356
357
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
358
359
}

Thomas Park's avatar
Thomas Park committed
360
361
.btn-primary {
  .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
Thomas Park's avatar
Thomas Park committed
362
363
}

Thomas Park's avatar
Thomas Park committed
364
365
.btn-warning {
  .buttonBackground(lighten(@orange, 15%), @orange);
Thomas Park's avatar
Thomas Park committed
366
367
}

Thomas Park's avatar
Thomas Park committed
368
369
.btn-danger {
  .buttonBackground(#ee5f5b, #bd362f);
Thomas Park's avatar
Thomas Park committed
370
371
}

Thomas Park's avatar
Thomas Park committed
372
373
.btn-success {
  .buttonBackground(#62c462, #51a351);
Thomas Park's avatar
Thomas Park committed
374
375
}

Thomas Park's avatar
Thomas Park committed
376
377
.btn-info {
  .buttonBackground(#5bc0de, #2f96b4);
Thomas Park's avatar
Thomas Park committed
378
379
}

Thomas Park's avatar
Thomas Park committed
380
381
.btn-inverse {
  .buttonBackground(#454545, #262626);
382
383
}

Thomas Park's avatar
Thomas Park committed
384
385
.caret {
	border-top-color: @white;
386
387
}

Thomas Park's avatar
Thomas Park committed
388
389
// TABLES
// -----------------------------------------------------
390

Thomas Park's avatar
Thomas Park committed
391
392
393
// FORMS
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
394
395
396
397
label, input, button, select, textarea, legend {
	color: @textColor;
}

Thomas Park's avatar
Thomas Park committed
398
399
legend, label {
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
400
401
}

Thomas Park's avatar
Thomas Park committed
402
403
.input-prepend .add-on,
.input-append .add-on {
Thomas Park's avatar
Thomas Park committed
404
	vertical-align: top;
Thomas Park's avatar
Thomas Park committed
405
406
407
408
409
410
411
412
	background-color: @gray;
	border-top: 1px solid @grayLight;
	border-left: 1px solid @grayLight;
	border-bottom: 1px solid @grayDark;
	border-right: 1px solid @grayDark;
	text-shadow: none;
}

Thomas Park's avatar
Thomas Park committed
413
414
415
416
417
418
419
420
421
422
423
424
425
.input-append .btn,
.input-prepend .btn {
	margin-top: -1px;
	padding: 5px 14px;
}

.uneditable-input,
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
Thomas Park's avatar
Thomas Park committed
426
427
428
	color: @grayLighter;
}

Thomas Park's avatar
Thomas Park committed
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
.form-actions {
	border-top: none;
}

// DROPDOWNS
// -----------------------------------------------------

.dropdown-menu {
	.box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));

	li.active a,
	li.active a:hover {
		background-color: @grayDark;
	}
}

.dropdown.open .dropdown-toggle {
	background-color: @grayDark;
	color: @grayLighter;
}

.dropdown-menu .divider {
	border-top: none;
	border-bottom: 1px solid darken(@grayDarker, 5%);
	background-color: transparent;
}

456
457
458
459
.dropdown-submenu > a::after {
	border-left-color: @white;
}

Thomas Park's avatar
Thomas Park committed
460
// ALERTS, LABELS, BADGES
Thomas Park's avatar
Thomas Park committed
461
462
463
// -----------------------------------------------------

.label, .alert {
464
  	color: rgba(255, 255, 255, 0.9);
465
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
466
467
468
469
	.box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.alert-heading {
470
  	color: rgba(255, 255, 255, 0.9);
Thomas Park's avatar
Thomas Park committed
471
472
473
474
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
}

.alert {
475
  background-color: @orange;
Thomas Park's avatar
Thomas Park committed
476
  border-color: @orange;
Thomas Park's avatar
Thomas Park committed
477
478
479
480
}

.alert-success {
  background-color: @successText;
Thomas Park's avatar
Thomas Park committed
481
  border-color: @successText;
Thomas Park's avatar
Thomas Park committed
482
483
484
485
486
487
488
489
490
491
492
493
}

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

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

Thomas Park's avatar
Thomas Park committed
494
// MISC
Thomas Park's avatar
Thomas Park committed
495
496
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
497
.well, .hero-unit {
498
	.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
Thomas Park's avatar
Thomas Park committed
499
500
}

Thomas Park's avatar
Thomas Park committed
501
502
503
.thumbnail,
a.thumbnail:hover {
  border: 1px solid darken(@grayDarker, 5%);
Thomas Park's avatar
Thomas Park committed
504
505
}

Thomas Park's avatar
Thomas Park committed
506
507
508
.progress {
	background-color: darken(@grayDarker, 3%);
	#gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
509
	.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
Thomas Park's avatar
Thomas Park committed
510
511
}

Thomas Park's avatar
Thomas Park committed
512
513
514
515
516
517
.footer {
	border-top: 1px solid darken(@grayDarker, 5%);

	p {
		color: @textColor;
	}
Thomas Park's avatar
Thomas Park committed
518
519
}

Thomas Park's avatar
Thomas Park committed
520
.modal {
Thomas Park's avatar
Thomas Park committed
521

Thomas Park's avatar
Thomas Park committed
522
	background-color: darken(@grayDark, 5%);
Thomas Park's avatar
Thomas Park committed
523

Thomas Park's avatar
Thomas Park committed
524
525
526
	&-header {
		border-bottom: none;
	}
Thomas Park's avatar
Thomas Park committed
527

Thomas Park's avatar
Thomas Park committed
528
529
530
	&-body {
		border-bottom: 1px solid #1C1E22;
	}
Thomas Park's avatar
Thomas Park committed
531

Thomas Park's avatar
Thomas Park committed
532
533
534
535
	&-footer {
		border-top: none;
		background-color: @grayDarker;
		.box-shadow(none);
Thomas Park's avatar
Thomas Park committed
536
	}
Thomas Park's avatar
Thomas Park committed
537
538
}

Thomas Park's avatar
Thomas Park committed
539
540
// MEDIA QUERIES
// -----------------------------------------------------
Thomas Park's avatar
Thomas Park committed
541

Thomas Park's avatar
Thomas Park committed
542
543
544
545
@media (max-width: 979px) {
	.navbar .brand {
		border-right: none;
	}
Thomas Park's avatar
Thomas Park committed
546
547
}

Thomas Park's avatar
Thomas Park committed
548
549
550
551
552
@media (max-width: 768px) {
	div.subnav .nav > li + li > a {
		border-top: 1px solid transparent;
	}
}