all: update to 2.0.3
[bootswatch] / readable / bootswatch.less
1 // Bootswatch.less
2 // Swatch: Readable
3 // Version: 2.0.3
4 // -----------------------------------------------------
5
6 // TYPOGRAPHY
7 // -----------------------------------------------------
8
9 h1, h2, h3, h4, h5, h6 {
10         line-height: 2em;
11         color: @textColor;
12 }
13
14 h1 {
15         font-size: 2em;
16 }
17
18 h2 {
19         font-size: 1.5em;
20 }
21
22 h3, h4, h5, h6 {
23         font-size: 1em;
24         text-transform: none;
25 }
26
27 small {
28         font-size: 13px;
29 }
30
31 .muted, .help-block, .uneditable-input, blockquote, small {
32         color: @grayLight;
33 }
34
35 // SCAFFOLDING
36 // -----------------------------------------------------
37
38 body {
39         padding-top: 20px !important;
40 }
41
42 .page-header {
43         padding-bottom: 1em;
44         border-bottom: 2px solid @grayLighter;
45 }
46
47 footer.footer {
48         padding-top: 2em;
49         padding-bottom: 3em;
50         border-top: 2px solid @grayLighter;
51 }
52
53 // NAVBAR
54 // -----------------------------------------------------
55
56 .navbar {
57
58         margin-left: 16px;
59
60         .navbar-inner {
61                 .box-shadow(none);
62         }
63
64         .brand {
65                 font-size: @baseFontSize;
66                 font-weight: bold;
67                 line-height: 1em;
68                 padding: 10px 10px 11px;
69                 
70                 &:hover {
71                         color: @linkColorHover;
72                 }
73         }
74         
75         .nav > li > a {
76                 text-shadow: none;
77                 padding: 10px;
78         }
79
80         .nav > li.active > a,
81         .nav > li:active > a,
82         .open .dropdown-toggle {
83                 color: @linkColor;
84         }
85         
86         .search-query {
87                 border: 1px solid #D4D4D4;
88                 .border-radius(0);
89                 color: @textColor;
90                 background-color: @white;
91         }
92
93         .nav .dropdown-toggle .caret,
94         .nav .open .caret {
95                 border-top-color: @linkColor;
96                 opacity: 1;
97         }
98 }
99
100 @media (max-width: 980px) {
101         form.navbar-form, form.navbar-search {
102                 border-top: 1px solid #D4D4D4;
103                 border-bottom: 1px solid #D4D4D4;
104         }
105 }
106
107 .navbar-fixed-top {
108         position: static;
109         margin-bottom: 1.6em;
110 }
111
112 div.subnav {
113         .box-shadow(none);
114         .border-radius(0);
115         background-color: @white;
116         background-image: none;
117
118         .nav {
119                 padding: 0;     
120         }
121         
122         .nav > li.active > a,
123         .nav > li:active > a {
124                 color: @linkColor;
125                 .box-shadow(none);
126                 background-color: transparent;
127         }
128         
129         .nav > li > a:hover,
130         .nav > li.active > a:hover,
131         .nav > li:active > a:hover {
132                 color: @linkColorHover;
133                 .box-shadow(none);
134                 background-color: transparent;
135         }
136         
137 }
138
139 div.subnav-fixed {
140         position: static;
141         left: auto;
142         width: 100%;
143         margin: 0;
144         .box-shadow(none);
145         .border-radius(4px);
146         border: 1px solid #E5E5E5;
147         
148         .nav {
149                 width: auto;
150                 padding: 0;
151         }
152 }
153
154 .dropdown-menu {
155         border: 1px solid #D4D4D4;
156         .border-radius(0);
157         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
158         
159         .divider {
160                 margin: 5px 1px;
161         }
162 }
163
164 .navbar .nav-collapse.in {
165         
166         .nav li:first-child > a {
167                 margin-bottom: 10px;
168         }
169         
170         .nav li > a {
171                 color: @linkColor;
172                 .border-radius(0);
173                 font-weight: normal;
174                 
175                 &:hover {
176                         color: @linkColorHover;
177                 }
178         }
179         
180         .nav li > a:hover {
181                 background: transparent;
182         }
183 }
184
185 // NAV
186 // -----------------------------------------------------
187
188 .nav .dropdown .caret {
189         opacity: 1;
190 }
191
192 .nav-tabs {
193
194         li > a {
195                 .border-radius(0);
196         }
197
198         li > a:hover {
199                 background-color: @bodyBackground;
200         }
201
202         li.active > a,
203         li.active > a:hover {
204                 color: @textColor;
205                 background-color: @bodyBackground;
206         }
207 }
208
209 .nav-tabs.nav-stacked {
210
211         li > a {
212                 background-color: @white;
213         }
214
215         li.active > a,
216         li.active > a:hover,
217         li > a:hover {
218                 background-color: #F5F5F5;
219         }
220
221         li:first-child > a,
222         li:last-child > a {
223                 .border-radius(0);
224         }
225 }
226
227 .nav-pills {
228
229         li > a {
230                 .border-radius(0);
231         }
232
233         li > a:hover {
234                 background-color: @bodyBackground;
235         }
236
237         li.active > a,
238         li.active > a:hover {
239                 color: @textColor;
240                 background-color: @bodyBackground;
241         }
242         
243         .open .dropdown-toggle {
244                 background-color: transparent;
245                 color: @linkColor;
246                 border-left: 1px solid whiteSmoke;
247                 border-right: 1px solid #E5E5E5;
248         }
249         
250         
251         li.dropdown.open .dropdown-toggle .caret {
252                 border-top-color: @linkColor;
253         }
254         
255         li.dropdown.open .dropdown-toggle:hover .caret {
256                 border-top-color: @linkColorHover;
257         }
258 }
259
260 .nav-list {
261
262         li > a:hover,
263         li.active > a,
264         li.active > a:hover {
265                 background-color: transparent;
266                 text-shadow: none;
267         }
268
269         li.active > a,
270         li.active > a:hover {
271                 color: @textColor;
272         }
273         
274         [class^="icon-"] {
275                 margin-top: 3px;
276                 opacity: 0.8;
277         }
278 }
279
280 .breadcrumb {
281         .border-radius(0);
282         background-color: @white;
283         background-image: none;
284 }
285
286 .pagination {
287
288         ul {
289                 .box-shadow(none);
290         }
291
292         li > a {
293                 padding: 10px 14px;
294         }
295         
296
297         li.active > a,
298         li.active > a:hover {
299                 color: @textColor;
300                 background-color: #F5F5F5;
301         }
302         
303         li > a,
304         li.disabled > a,
305         li.disabled > a:hover {
306                 background-color: @white;
307         }
308         
309         li:first-child > a,
310         li:last-child > a {
311                 .border-radius(0);
312         }
313 }
314
315 .pager {
316         
317         a {
318                 .border-radius(0);
319         }
320 }
321
322 // BUTTONS
323 // -----------------------------------------------------
324
325 .btn-primary {
326   .buttonBackground(lighten(@btnPrimaryBackground, 10%), @btnPrimaryBackground);
327 }
328
329 .btn [class^="icon-"],
330 .btn [class*=" icon-"] {
331         margin-top: 4px;
332 }
333
334 .btn-large [class^="icon-"],
335 .btn-large [class*=" icon-"] {
336         margin-top: 6px;
337         margin-right: 2px;
338 }
339
340 .btn-small [class^="icon-"],
341 .btn-small [class*=" icon-"] {
342         margin-top: 3px;
343 }
344
345 .btn .caret {
346         margin-top: 13px;
347 }
348
349 // FORMS
350 // -----------------------------------------------------
351
352 input, button, select, textarea {
353         font-family: @baseFontFamily;
354 }
355
356 input, textarea, select {
357         color: @textColor;
358 }
359
360 select, input[type="file"] {
361         height: auto;
362         line-height: normal;
363 }
364
365 .form-actions {
366         border-top: 1px solid #D4D4D4;
367         padding-top: 2em;
368 }
369
370 // TABLES
371 // -----------------------------------------------------
372
373 .table-bordered {
374         .border-radius(0);
375 }
376
377 .table-bordered thead:first-child tr:first-child th:first-child,
378 .table-bordered tbody:first-child tr:first-child td:first-child {
379         .border-radius(0);
380 }
381
382 .table-bordered thead:last-child tr:last-child th:first-child,
383 .table-bordered tbody:last-child tr:last-child td:first-child {
384         .border-radius(0);
385 }
386
387 // MODALS
388 // -----------------------------------------------------
389
390 .modal {
391         background-color: @white;
392         .border-radius(0);
393 }
394
395 .modal-header {
396         border-bottom: none;
397 }
398
399 .modal-footer {
400         background-color: @bodyBackground;
401 }
402
403
404 // MISCELLANEOUS
405 // -----------------------------------------------------
406
407 .alert, 
408 .label, .label:hover {
409         .border-radius(0);
410         border: 1px solid #D4D4D4;
411         color: @textColor;
412         text-shadow: none;
413 }
414
415 .alert-heading {
416         color: @textColor;
417         text-shadow: none;
418 }
419
420 .label, .label:hover {
421         background-color: @white;
422         font-weight: normal;
423         font-size: @baseFontSize;
424         padding: 4px;
425 }
426
427 .label-important, .label-important:hover { background-color: @errorBackground; }
428
429 .label-warning, .label-warning:hover { background-color: @warningBackground; }
430
431 .label-success, .label-success:hover { background-color: @successBackground; }
432
433 .label-info, .label-info:hover { background-color: @infoBackground; }
434
435 .well, .hero-unit {
436         .box-shadow(none);
437         border: 1px solid #D4D4D4;
438         .border-radius(0);
439         background-color: @white;
440 }
441
442 blockquote {
443         border-left: 6px solid @grayLighter;
444         
445         &.pull-right {
446                 border-right: 6px solid @grayLighter;
447         }
448         
449         p {
450                 font-size: 1em;
451                 line-height: 1.2em;
452         }
453 }
454
455 .thumbnail {
456         background-color: @white;
457 }
458
459 .thumbnail, .thumbnail > img {
460         .border-radius(0);
461         .box-shadow(none);
462 }
463
464 code, pre {
465         .border-radius(0);
466         background-color: @white;
467 }