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

.btn-shadow(@color) {
Thomas Park's avatar
Thomas Park committed
6
7
  #gradient > .vertical-three-colors(lighten(@color, 6%), @color, 60%, darken(@color, 4%));
  filter: none;
Thomas Park's avatar
Thomas Park committed
8
9
10
}

.btn-shadow-inverse(@color) {
Thomas Park's avatar
Thomas Park committed
11
12
  #gradient > .vertical-three-colors(darken(@color, 24%), darken(@color, 18%), 40%, darken(@color, 14%));
  filter: none;
Thomas Park's avatar
Thomas Park committed
13
14
15
16
17
18
}

// Navbar =====================================================================

.navbar {

Thomas Park's avatar
Thomas Park committed
19
20
21
  .btn-shadow(@navbar-default-bg);
  border: 1px solid rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
22

Thomas Park's avatar
Thomas Park committed
23
24
  &-inverse {
    .btn-shadow(@navbar-inverse-bg);
25
26
27
28

    .badge {
      background-color: @navbar-inverse-link-active-bg;
    }
Thomas Park's avatar
Thomas Park committed
29
  }
Thomas Park's avatar
Thomas Park committed
30

Thomas Park's avatar
Thomas Park committed
31
32
33
  &-nav > li > a {
    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
34

Thomas Park's avatar
Thomas Park committed
35
36
37
38
39
    &:hover {
      .btn-shadow-inverse(@navbar-default-bg);
      border-left-color: transparent;
    }
  }
Thomas Park's avatar
Thomas Park committed
40

Thomas Park's avatar
Thomas Park committed
41
42
43
  .nav .open > a {
    border-color: transparent;
  }
Thomas Park's avatar
Thomas Park committed
44

Thomas Park's avatar
Thomas Park committed
45
46
47
  &-nav > li.active > a {
    border-left-color: transparent;
  }
Thomas Park's avatar
Thomas Park committed
48

Thomas Park's avatar
Thomas Park committed
49
50
51
52
  &-form {
    margin-left: 5px;
    margin-right: 5px;
  }
Thomas Park's avatar
Thomas Park committed
53
54
55
56
57
58
}

// Buttons ====================================================================

.btn,
.btn:hover {
Thomas Park's avatar
Thomas Park committed
59
60
  border-color: rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
61
62
63
}

.btn-default {
Thomas Park's avatar
Thomas Park committed
64
  .btn-shadow(@btn-default-bg);
65

Thomas Park's avatar
Thomas Park committed
66
67
68
  &:hover {
    .btn-shadow-inverse(@btn-default-bg);
  }
Thomas Park's avatar
Thomas Park committed
69
70
71
}

.btn-primary {
Thomas Park's avatar
Thomas Park committed
72
  .btn-shadow(@btn-primary-bg);
73

Thomas Park's avatar
Thomas Park committed
74
75
76
  &:hover {
    .btn-shadow-inverse(@btn-primary-bg);
  }
Thomas Park's avatar
Thomas Park committed
77
78
79
}

.btn-success {
Thomas Park's avatar
Thomas Park committed
80
  .btn-shadow(@btn-success-bg);
81

Thomas Park's avatar
Thomas Park committed
82
83
84
  &:hover {
    .btn-shadow-inverse(@btn-success-bg);
  }
Thomas Park's avatar
Thomas Park committed
85
86
87
}

.btn-info {
Thomas Park's avatar
Thomas Park committed
88
  .btn-shadow(@btn-info-bg);
89

Thomas Park's avatar
Thomas Park committed
90
91
92
  &:hover {
    .btn-shadow-inverse(@btn-info-bg);
  }
Thomas Park's avatar
Thomas Park committed
93
94
95
}

.btn-warning {
Thomas Park's avatar
Thomas Park committed
96
  .btn-shadow(@btn-warning-bg);
97

Thomas Park's avatar
Thomas Park committed
98
99
100
  &:hover {
    .btn-shadow-inverse(@btn-warning-bg);
  }
Thomas Park's avatar
Thomas Park committed
101
102
103
}

.btn-danger {
Thomas Park's avatar
Thomas Park committed
104
  .btn-shadow(@btn-danger-bg);
Thomas Park's avatar
Thomas Park committed
105

Thomas Park's avatar
Thomas Park committed
106
107
108
  &:hover {
    .btn-shadow-inverse(@btn-danger-bg);
  }
Thomas Park's avatar
Thomas Park committed
109
110
}

111
112
.btn-link,
.btn-link:hover {
Thomas Park's avatar
Thomas Park committed
113
  border-color: transparent;
Thomas Park's avatar
Thomas Park committed
114
115
116
117
118
}

// Typography =================================================================

h1, h2, h3, h4, h5, h6 {
Thomas Park's avatar
Thomas Park committed
119
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
120
121
}

122
123
.text-primary,
.text-primary:hover {
Thomas Park's avatar
Thomas Park committed
124
  color: @brand-primary;
Thomas Park's avatar
Thomas Park committed
125
126
}

127
128
.text-success,
.text-success:hover {
Thomas Park's avatar
Thomas Park committed
129
  color: @brand-success;
Thomas Park's avatar
Thomas Park committed
130
131
}

132
133
.text-danger,
.text-danger:hover {
Thomas Park's avatar
Thomas Park committed
134
  color: @brand-danger;
Thomas Park's avatar
Thomas Park committed
135
136
}

137
138
.text-warning,
.text-warning:hover {
Thomas Park's avatar
Thomas Park committed
139
  color: @brand-warning;
Thomas Park's avatar
Thomas Park committed
140
141
}

142
143
.text-info,
.text-info:hover {
Thomas Park's avatar
Thomas Park committed
144
  color: @brand-info;
Thomas Park's avatar
Thomas Park committed
145
146
147
148
149
150
}

// Tables =====================================================================

.table {

151
152
153
154
  .success,
  .warning,
  .danger,
  .info {
Thomas Park's avatar
Thomas Park committed
155
156
    color: #fff;
  }
Thomas Park's avatar
Thomas Park committed
157

Thomas Park's avatar
Thomas Park committed
158
  &-bordered tbody {
Thomas Park's avatar
Thomas Park committed
159

Thomas Park's avatar
Thomas Park committed
160
161
162
    tr.success,
    tr.warning,
    tr.danger {
Thomas Park's avatar
Thomas Park committed
163

Thomas Park's avatar
Thomas Park committed
164
165
166
167
168
169
      td,
      &:hover td {
        border-color: @table-border-color;
      }
    }
  }
Thomas Park's avatar
Thomas Park committed
170
171
}

172
.table-responsive > .table {
Thomas Park's avatar
Thomas Park committed
173
  background-color: @table-bg;
174
175
}

Thomas Park's avatar
Thomas Park committed
176
177
// Forms ======================================================================

Thomas Park's avatar
Thomas Park committed
178
179
180
181
182
input,
textarea {
  color: @input-color;
}

Thomas Park's avatar
Thomas Park committed
183
.has-warning {
Thomas Park's avatar
Thomas Park committed
184
  .help-block,
185
186
  .control-label,
  .form-control-feedback {
Thomas Park's avatar
Thomas Park committed
187
188
    color: @brand-warning;
  }
Thomas Park's avatar
Thomas Park committed
189

Thomas Park's avatar
Thomas Park committed
190
191
192
193
  .form-control,
  .form-control:focus {
    border-color: @brand-warning;
  }
194
195
196
197
198

  .input-group-addon {
    background-color: @body-bg;
    border: none;
  }
Thomas Park's avatar
Thomas Park committed
199
200
201
}

.has-error {
Thomas Park's avatar
Thomas Park committed
202
  .help-block,
203
204
  .control-label,
  .form-control-feedback {
Thomas Park's avatar
Thomas Park committed
205
206
    color: @brand-danger;
  }
Thomas Park's avatar
Thomas Park committed
207

Thomas Park's avatar
Thomas Park committed
208
209
210
211
  .form-control,
  .form-control:focus {
    border-color: @brand-danger;
  }
212
213
214
215
216

  .input-group-addon {
    background-color: @body-bg;
    border: none;
  }
Thomas Park's avatar
Thomas Park committed
217
218
219
}

.has-success {
Thomas Park's avatar
Thomas Park committed
220
  .help-block,
221
222
  .control-label,
  .form-control-feedback {
Thomas Park's avatar
Thomas Park committed
223
224
    color: @brand-success;
  }
Thomas Park's avatar
Thomas Park committed
225

Thomas Park's avatar
Thomas Park committed
226
227
228
229
  .form-control,
  .form-control:focus {
    border-color: @brand-success;
  }
230
231
232
233
234

  .input-group-addon {
    background-color: @body-bg;
    border: none;
  }
Thomas Park's avatar
Thomas Park committed
235
236
237
}

legend {
Thomas Park's avatar
Thomas Park committed
238
  color: #fff;
Thomas Park's avatar
Thomas Park committed
239
240
241
}

.input-group-addon {
Thomas Park's avatar
Thomas Park committed
242
243
244
245
  border-color: rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  .btn-shadow(@btn-default-bg);
  color: @btn-default-color;
Thomas Park's avatar
Thomas Park committed
246
247
248
249
}

// Navs =======================================================================

250
251
.nav {

Thomas Park's avatar
Thomas Park committed
252
253
254
255
256
  .open > a,
  .open > a:hover,
  .open > a:focus {
    border-color: rgba(0, 0, 0, 0.6);
  }
257
258
259

}

Thomas Park's avatar
Thomas Park committed
260
.nav-pills {
261

Thomas Park's avatar
Thomas Park committed
262
263
264
265
  & > li > a {
    .btn-shadow(@btn-default-bg);
    border: 1px solid rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
266

Thomas Park's avatar
Thomas Park committed
267
268
269
270
271
    &:hover {
      .btn-shadow-inverse(@btn-default-bg);
      border: 1px solid rgba(0, 0, 0, 0.6);
    }
  }
Thomas Park's avatar
Thomas Park committed
272

Thomas Park's avatar
Thomas Park committed
273
274
275
276
277
278
  & > li.active > a,
  & > li.active > a:hover {
    background-color: none;
    .btn-shadow-inverse(@btn-default-bg);
    border: 1px solid rgba(0, 0, 0, 0.6);
  }
Thomas Park's avatar
Thomas Park committed
279

Thomas Park's avatar
Thomas Park committed
280
281
282
283
  & > li.disabled > a,
  & > li.disabled > a:hover {
    .btn-shadow(@btn-default-bg);
  }
Thomas Park's avatar
Thomas Park committed
284
285
286
287
}

.pagination {

288
289
  & > li > a,
  & > li > span {
Thomas Park's avatar
Thomas Park committed
290
291
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    .btn-shadow(@btn-default-bg);
Thomas Park's avatar
Thomas Park committed
292

Thomas Park's avatar
Thomas Park committed
293
294
295
296
    &:hover {
      .btn-shadow-inverse(@btn-default-bg);
    }
  }
Thomas Park's avatar
Thomas Park committed
297

298
299
  & > li.active > a,
  & > li.active > span {
Thomas Park's avatar
Thomas Park committed
300
301
    .btn-shadow-inverse(@btn-default-bg);
  }
Thomas Park's avatar
Thomas Park committed
302

Thomas Park's avatar
Thomas Park committed
303
  & > li.disabled > a,
304
305
306
  & > li.disabled > a:hover,
  & > li.disabled > span,
  & > li.disabled > span:hover {
Thomas Park's avatar
Thomas Park committed
307
308
309
    background-color: transparent;
    .btn-shadow(@btn-default-bg);
  }
Thomas Park's avatar
Thomas Park committed
310
311
312
313
}

.pager {

Thomas Park's avatar
Thomas Park committed
314
315
316
  & > li > a {
    .btn-shadow(@btn-default-bg);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
Thomas Park's avatar
Thomas Park committed
317

Thomas Park's avatar
Thomas Park committed
318
319
320
321
    &:hover {
      .btn-shadow-inverse(@btn-default-bg);
    }
  }
Thomas Park's avatar
Thomas Park committed
322

Thomas Park's avatar
Thomas Park committed
323
324
325
326
327
  & > li.disabled > a,
  & > li.disabled > a:hover {
    background-color: transparent;
    .btn-shadow(@btn-default-bg);
  }
Thomas Park's avatar
Thomas Park committed
328
329
330
}

.breadcrumb {
Thomas Park's avatar
Thomas Park committed
331
332
333
  border: 1px solid rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  .btn-shadow(@btn-default-bg);
Thomas Park's avatar
Thomas Park committed
334
335
336
337
338
339
}

// Indicators =================================================================

.alert {

Thomas Park's avatar
Thomas Park committed
340
341
342
343
344
  .alert-link,
  a {
    color: #fff;
    text-decoration: underline;
  }
345
346
347
348
349

  .close {
    color: @close-color;
    text-decoration: none;
  }
Thomas Park's avatar
Thomas Park committed
350
351
352
353
354
355
}

// Progress bars ==============================================================

// Containers =================================================================

356
357
358
359
360
361
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: @thumbnail-border;
}

362
363
364
365
366
367
368
369
370
371
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
a.list-group-item {

  &.active,
  &.active:hover,
  &.active:focus {
    border-color: @list-group-border;
  }

  &-success {
    &.active {
      background-color: @state-success-bg;
    }

    &.active:hover,
    &.active:focus {
      background-color: darken(@state-success-bg, 5%);
    }
  }

  &-warning {
    &.active {
      background-color: @state-warning-bg;
    }
    
    &.active:hover,
    &.active:focus {
      background-color: darken(@state-warning-bg, 5%);
    }
  }

  &-danger {
    &.active {
      background-color: @state-danger-bg;
    }
    
    &.active:hover,
    &.active:focus {
      background-color: darken(@state-danger-bg, 5%);
    }
  }
}

Thomas Park's avatar
Thomas Park committed
404
.jumbotron {
Thomas Park's avatar
Thomas Park committed
405
  border: 1px solid rgba(0, 0, 0, 0.6);
Thomas Park's avatar
Thomas Park committed
406
407
}

408
409
410
411
412
413
.panel-primary,
.panel-success,
.panel-danger,
.panel-warning,
.panel-info {

Thomas Park's avatar
Thomas Park committed
414
415
416
  .panel-heading {
    border-color: #000;
  }
Thomas Park's avatar
Thomas Park committed
417
}