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

Thomas Park's avatar
Thomas Park committed
5

Thomas Park's avatar
Thomas Park committed
6
@boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
Thomas Park's avatar
Thomas Park committed
7

Thomas Park's avatar
Thomas Park committed
8
9
10
// TYPOGRAPHY
// -----------------------------------------------------

11
@import url('//fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
Thomas Park's avatar
Thomas Park committed
12
13
14
15
16
17

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

hr {
	border-bottom: none;
Thomas Park's avatar
Thomas Park committed
18
19
20
21
22
}

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

Thomas Park's avatar
Thomas Park committed
23
.navbar {
Thomas Park's avatar
Thomas Park committed
24

Thomas Park's avatar
Thomas Park committed
25
	.navbar-inner {
26
		.box-shadow(none);
Thomas Park's avatar
Thomas Park committed
27
	}
Thomas Park's avatar
Thomas Park committed
28

Thomas Park's avatar
Thomas Park committed
29
	.brand {
30
		padding: 12px 20px 8px;
Thomas Park's avatar
Thomas Park committed
31
		font-family: @headingsFontFamily;
Thomas Park's avatar
Thomas Park committed
32
33
34
		font-weight: bold;

		&:hover {
Thomas Park's avatar
Thomas Park committed
35
			color: @linkColor;
Thomas Park's avatar
Thomas Park committed
36
		}
Thomas Park's avatar
Thomas Park committed
37
	}
Thomas Park's avatar
Thomas Park committed
38

Thomas Park's avatar
Thomas Park committed
39
	.nav > li > a {
Thomas Park's avatar
Thomas Park committed
40
41
42
		padding: 13px 15px 6px;
		font-family: @headingsFontFamily;
		font-weight: bold;
Thomas Park's avatar
Thomas Park committed
43
		text-shadow: none;
Thomas Park's avatar
Thomas Park committed
44

Thomas Park's avatar
Thomas Park committed
45
46
47
		&:hover {
			text-decoration: none;
		}
Thomas Park's avatar
Thomas Park committed
48
	}
Thomas Park's avatar
Thomas Park committed
49

Thomas Park's avatar
Thomas Park committed
50
51
52
53
	.nav .active > a,
	.nav .active > a:hover {
		background-color: transparent;
	}
Thomas Park's avatar
Thomas Park committed
54

Thomas Park's avatar
Thomas Park committed
55
56
57
58
59
60
61
62
63
64
65
66
	.navbar-text {
		padding: 13px 15px 7px;
		line-height: 19px;
		font-family: @headingsFontFamily;
		color: @grayLight;
	}

	.divider-vertical {
		height: @navbarHeight - 1;
		background-color: @hrBorder;
	}

67
68
69
70
71
72
73
74
	.navbar-search {
		margin-top: 5px;

		input[type="text"] {
			margin-bottom: 5px;
		}
	}

Thomas Park's avatar
Thomas Park committed
75
76
77
78
	.dropdown-menu a {
		font-family: @headingsFontFamily;
	}

79
	&-inverse {
80

81
82
83
		.navbar-inner {
			.box-shadow(none);
		}
Thomas Park's avatar
Thomas Park committed
84

85
86
87
		.brand:hover {
			color: @white;
		}
Thomas Park's avatar
Thomas Park committed
88
	}
89
}
Thomas Park's avatar
Thomas Park committed
90

91
@media (max-width: @navbarCollapseWidth) {
Thomas Park's avatar
Thomas Park committed
92

93
	.navbar .nav-collapse {
Thomas Park's avatar
Thomas Park committed
94
95
96
97
98

		.nav li > a {
			color: @textColor;

			&:hover {
Thomas Park's avatar
Thomas Park committed
99
100
101
102
103
				background-image: none;
				background-color: @dropdownLinkBackgroundHover;
			}
		}

104
105
106
		.nav .active > a {
			.box-shadow(none);
		}
Thomas Park's avatar
Thomas Park committed
107
108
109
110
111
112
113
114

		.navbar-form,
		.navbar-search {
			border-top: 1px solid rgba(128, 128, 128, 0.3);
			border-bottom: 1px solid rgba(128, 128, 128, 0.3);
		}
	}

115
	.navbar-inverse .nav-collapse {
Thomas Park's avatar
Thomas Park committed
116

117
		.nav li > a {
Thomas Park's avatar
Thomas Park committed
118
119
			color: @white;

120
121
			&:hover {
				background-color: rgba(255, 255, 255, 0.1) !important;
Thomas Park's avatar
Thomas Park committed
122
			}
123
		}
Thomas Park's avatar
Thomas Park committed
124

125
126
		.nav-header {
			color: rgba(255, 255, 255, 0.7);
Thomas Park's avatar
Thomas Park committed
127
		}
Thomas Park's avatar
Thomas Park committed
128
	}
Thomas Park's avatar
Thomas Park committed
129
130
131
}

div.subnav {
Thomas Park's avatar
Thomas Park committed
132

Thomas Park's avatar
Thomas Park committed
133
134
	background-image: none;
	background-color: @navbarBackground;
135
	border-bottom: 1px solid transparent;
Thomas Park's avatar
Thomas Park committed
136
	.box-shadow(@boxShadow);
Thomas Park's avatar
Thomas Park committed
137
	font-family: @headingsFontFamily;
Thomas Park's avatar
Thomas Park committed
138

139
	&.subnav-fixed {
140
		top: @navbarHeight + 1;
141
142
		.box-shadow(inset 0 5px #fff~"," @boxShadow);
	}
Thomas Park's avatar
Thomas Park committed
143

144
	.nav > li > a {
Thomas Park's avatar
Thomas Park committed
145
146
147
		padding: 14px 12px 10px;
		border-left-color: transparent;
		border-right-color: transparent;
148
149
		color: @navbarText;
		font-weight: bold;
Thomas Park's avatar
Thomas Park committed
150

151
		&:hover {
Thomas Park's avatar
Thomas Park committed
152
153
			background-color: transparent;
			color: @linkColor;
154
155
		}
	}
Thomas Park's avatar
Thomas Park committed
156

Thomas Park's avatar
Thomas Park committed
157
158
159
160
161
162
163
164
	.nav > li.active > a,
	.nav > li.active > a:hover {
		border-left-color: transparent;
		border-right-color: transparent;
		background-color: transparent;
		.box-shadow(none);
		color: @linkColor;
	}
Thomas Park's avatar
Thomas Park committed
165
166
167
168
169
}

// NAV
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
170
.nav .nav-header {
Thomas Park's avatar
Thomas Park committed
171
	font-size: 13px;
Thomas Park's avatar
Thomas Park committed
172
173
174
175
	font-weight: normal;
	text-transform: none;
}

Thomas Park's avatar
Thomas Park committed
176
.nav-tabs {
Thomas Park's avatar
Thomas Park committed
177

Thomas Park's avatar
Thomas Park committed
178
179
180
181
	& > li > a {
		background-color: darken(@bodyBackground, 3%);
		border: 1px solid #ccc;
		color: @textColor;
Thomas Park's avatar
Thomas Park committed
182

Thomas Park's avatar
Thomas Park committed
183
184
185
186
187
188
		&:hover {
			border: 1px solid #ccc;
			background-color: @dropdownLinkBackgroundHover;
			color: @linkColor;
		}
	}
Thomas Park's avatar
Thomas Park committed
189

Thomas Park's avatar
Thomas Park committed
190
191
192
193
	& > li.active > a,
	& > li.active > a:hover {
		background-color: @bodyBackground;
	}
Thomas Park's avatar
Thomas Park committed
194

Thomas Park's avatar
Thomas Park committed
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
	.dropdown {

		.dropdown-toggle .caret {
			border-top-color: @textColor;
			border-bottom-color: @textColor;
			opacity: 1;
		}

		&:hover .dropdown-toggle .caret {
			border-top-color: @linkColor;
			border-bottom-color: @linkColor;
		}
	}

	.dropdown.open .dropdown-toggle {

		background-color: @dropdownLinkBackgroundHover;
		border-color: #ccc;
		color: @linkColor;

		.caret,
		&:hover .caret {
			border-top-color: @linkColor;
			border-bottom-color: @linkColor;
			opacity: 1;
		}
	}

	.dropdown-menu {

		.border-radius(0);

		a {
			padding: 8px 15px 3px;
		}
	}
Thomas Park's avatar
Thomas Park committed
231
232
}

Thomas Park's avatar
Thomas Park committed
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
.tabbable {

	.nav-tabs > li > a,
	.nav-tabs > li > a:hover {
		border: 1px solid #ccc;
	}

	.nav-tabs > li.active > a {
		border-bottom: 1px solid transparent;
	}

	&.tabs-below > .nav-tabs > li.active > a,
	&.tabs-left > .nav-tabs > li.active > a,
	&.tabs-right > .nav-tabs > li.active > a {
		border-bottom: 1px solid #ccc;
	}
Thomas Park's avatar
Thomas Park committed
249
250
}

Thomas Park's avatar
Thomas Park committed
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
.nav-pills {

	li > a {
		color: @textColor;

		&:hover {
			background-color: @dropdownLinkBackgroundHover;
			color: @linkColor;
		}
	}

	li.active > a,
	li.active > a:hover {
		background-color: @dropdownLinkBackgroundHover;
		color: @linkColor;
	}

	.dropdown .dropdown-toggle .caret {
		border-top-color: @textColor;
		border-bottom-color: @textColor;
		opacity: 1;
	}

274
	.dropdown .dropdown-toggle:hover .caret {
Thomas Park's avatar
Thomas Park committed
275
276
277
278
279
280
281
282
283
284
285
286
287
288
		border-top-color: @linkColor;
		border-bottom-color: @linkColor;
	}

	.dropdown.open .dropdown-toggle,
	.dropdown.open:hover .dropdown-toggle {
		background-color: @dropdownLinkBackgroundHover;
		color: @linkColor;

		.caret {
			border-top-color: @linkColor;
			border-bottom-color: @linkColor;
		}
	}
289
290
}

Thomas Park's avatar
Thomas Park committed
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
.nav-list {

	li > a {
		color: @textColor;

		&:hover {
			background-color: @dropdownLinkBackgroundHover;
			color: @linkColor;
		}
	}

	li.active > a,
	li.active > a:hover {
		background-color: @dropdownLinkBackgroundHover;
		color: @linkColor;
	}
Thomas Park's avatar
Thomas Park committed
307
308
}

Thomas Park's avatar
Thomas Park committed
309
.breadcrumb {
310
	background-color: @white;
Thomas Park's avatar
Thomas Park committed
311
	border: 0px solid transparent;
312
	.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
Thomas Park's avatar
Thomas Park committed
313
314

	li {
315
		padding-top: 2px;
Thomas Park's avatar
Thomas Park committed
316
317
318
		text-shadow: none;
	}

319
320
321
322
	.active {
		color: @textColor;
	}

Thomas Park's avatar
Thomas Park committed
323
324
325
326
327
328
329
330
331
332
333
	a {
		text-shadow: none;
	}

	a:hover {
		text-decoration: none;
	}
}

.pagination {

334
335
336
	ul > li > a,
	ul > li > span {
		padding: 2px 14px 0;
Thomas Park's avatar
Thomas Park committed
337
338
339
340
341
342
343
344
		color: @textColor;

		&:hover {
			background-color: @dropdownLinkBackgroundHover;
			color: @linkColor;
		}
	}

345
346
	ul > .active > a,
	ul > .active > span {
Thomas Park's avatar
Thomas Park committed
347
348
349
		background-color: @dropdownLinkBackgroundHover;
		color: @linkColor;
	}
350
351
352
353
354
355
356
357

	ul > .disabled > a,
	ul > .disabled > a:hover,
	ul > .disabled > span,
	ul > .disabled > span:hover {
		background-color: transparent;
		color: @textColor;
	}
Thomas Park's avatar
Thomas Park committed
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
}


// BUTTONS
// -----------------------------------------------------

.btn {
	padding-top: .6em;
	font-family: @headingsFontFamily;
	font-weight: bold;
}

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

Thomas Park's avatar
Thomas Park committed
373
374
375
// FORMS
// -----------------------------------------------------

376
377
legend {
	border-bottom: 1px solid #ddd;
Thomas Park's avatar
Thomas Park committed
378
	font-family: @headingsFontFamily;
379
380
}

Thomas Park's avatar
Thomas Park committed
381
.navbar-search .search-query {
382
	border: 1px solid #ddd;
Thomas Park's avatar
Thomas Park committed
383
384
385
386
387
388
	.border-radius(0);
	background-color: @bodyBackground;
	color: @gray;
}

.help-inline, .help-block {
Thomas Park's avatar
Thomas Park committed
389
	font-size: 13px;
Thomas Park's avatar
Thomas Park committed
390
391
}

Thomas Park's avatar
Thomas Park committed
392
393
394
395
396
.input-append .btn,
.input-prepend .btn {
	line-height: 16px;
}

Thomas Park's avatar
Thomas Park committed
397
// DROPDOWNS
Thomas Park's avatar
Thomas Park committed
398
399
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
400
// ALERTS, LABELS, BADGES
Thomas Park's avatar
Thomas Park committed
401
402
// -----------------------------------------------------

Thomas Park's avatar
Thomas Park committed
403
404
405
406
407
408
.label {
	padding: 4px 4px 3px;
	margin-left: 1px;
	margin-right: 1px;
	line-height: 26px;
	font-weight: normal;
Thomas Park's avatar
Thomas Park committed
409
410
}

Thomas Park's avatar
Thomas Park committed
411
// MISCELLANEOUS
Thomas Park's avatar
Thomas Park committed
412
413
414
// -----------------------------------------------------

i[class^="icon-"]{
Thomas Park's avatar
Thomas Park committed
415
	opacity: 0.5;
Thomas Park's avatar
Thomas Park committed
416
417
418
	vertical-align: -2px;
}

Thomas Park's avatar
Thomas Park committed
419
420
421
.well {
	.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
	border: none;
Thomas Park's avatar
Thomas Park committed
422
}
Thomas Park's avatar
Thomas Park committed
423
424

.hero-unit {
Thomas Park's avatar
Thomas Park committed
425
426
	background-color: @navbarBackground;
	.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
Thomas Park's avatar
Thomas Park committed
427
428
}

Thomas Park's avatar
Thomas Park committed
429
430
431
432
433
.thumbnail {
	padding: 10px;
	background-color: @white;
}

Thomas Park's avatar
Thomas Park committed
434
435
.progress {
    #gradient > .vertical(#e0e0e0, #e8e8e8);
Thomas Park's avatar
Thomas Park committed
436
437
}

Thomas Park's avatar
Thomas Park committed
438
.modal {
Thomas Park's avatar
Thomas Park committed
439

Thomas Park's avatar
Thomas Park committed
440
441
442
	&-header {
		border-bottom: none;
	}
Thomas Park's avatar
Thomas Park committed
443

Thomas Park's avatar
Thomas Park committed
444
445
446
	&-header,
	&-body {
		background-color: @navbarBackground;
Thomas Park's avatar
Thomas Park committed
447
448
	}

Thomas Park's avatar
Thomas Park committed
449
450
	&-footer {
		background-color: @bodyBackground;
Thomas Park's avatar
Thomas Park committed
451
	}
452
453
}

Thomas Park's avatar
Thomas Park committed
454
455
// MEDIA QUERIES
// -----------------------------------------------------