bootswatch.less 7.21 KB
Newer Older
Thomas Park's avatar
Thomas Park committed
1
// Simplex 2.2.1
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
// -----------------------------------------------------

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

// 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
140
141
	&.subnav-fixed {
		.box-shadow(inset 0 5px #fff~"," @boxShadow);
	}
Thomas Park's avatar
Thomas Park committed
142

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

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

Thomas Park's avatar
Thomas Park committed
156
157
158
159
160
161
162
163
	.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
164
165
166
167
168
}

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

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

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

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

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

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

Thomas Park's avatar
Thomas Park committed
194
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
	.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
230
231
}

Thomas Park's avatar
Thomas Park committed
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
.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
248
249
}

Thomas Park's avatar
Thomas Park committed
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
.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;
	}

273
	.dropdown .dropdown-toggle:hover .caret {
Thomas Park's avatar
Thomas Park committed
274
275
276
277
278
279
280
281
282
283
284
285
286
287
		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;
		}
	}
288
289
}

Thomas Park's avatar
Thomas Park committed
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
.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
306
307
}

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

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

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

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

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

.pagination {

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

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

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

	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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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