Mercurial > wikked

comparison static/bootstrap/less/variables.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
4 4
5 5
6 // Global values 6 // Global values
7 // -------------------------------------------------- 7 // --------------------------------------------------
8 8
9
10 // Grays 9 // Grays
11 // ------------------------- 10 // -------------------------
12 @black: #000; 11
13 @grayDarker: #222; 12 @gray-darker: lighten(#000, 13.5%); // #222
14 @grayDark: #333; 13 @gray-dark: lighten(#000, 20%); // #333
15 @gray: #555; 14 @gray: lighten(#000, 33.5%); // #555
16 @grayLight: #999; 15 @gray-light: lighten(#000, 60%); // #999
17 @grayLighter: #eee; 16 @gray-lighter: lighten(#000, 93.5%); // #eee
18 @white: #fff; 17
19 18 // Brand colors
20 19 // -------------------------
21 // Accent colors 20
22 // ------------------------- 21 @brand-primary: #428bca;
23 @blue: #049cdb; 22 @brand-success: #5cb85c;
24 @blueDark: #0064cd; 23 @brand-warning: #f0ad4e;
25 @green: #46a546; 24 @brand-danger: #d9534f;
26 @red: #9d261d; 25 @brand-info: #5bc0de;
27 @yellow: #ffc40d;
28 @orange: #f89406;
29 @pink: #c3325f;
30 @purple: #7a43b6;
31
32 26
33 // Scaffolding 27 // Scaffolding
34 // ------------------------- 28 // -------------------------
35 @bodyBackground: @white; 29
36 @textColor: @grayDark; 30 @body-bg: #fff;
37 31 @text-color: @gray-dark;
38 32
39 // Links 33 // Links
40 // ------------------------- 34 // -------------------------
41 @linkColor: #08c; 35
42 @linkColorHover: darken(@linkColor, 15%); 36 @link-color: @brand-primary;
43 37 @link-hover-color: darken(@link-color, 15%);
44 38
45 // Typography 39 // Typography
46 // ------------------------- 40 // -------------------------
47 @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; 41
48 @serifFontFamily: Georgia, "Times New Roman", Times, serif; 42 @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
49 @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; 43 @font-family-serif: Georgia, "Times New Roman", Times, serif;
50 44 @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
51 @baseFontSize: 14px; 45 @font-family-base: @font-family-sans-serif;
52 @baseFontFamily: @sansFontFamily; 46
53 @baseLineHeight: 20px; 47 @font-size-base: 14px;
54 @altFontFamily: @serifFontFamily; 48 @font-size-large: ceil(@font-size-base * 1.25); // ~18px
55 49 @font-size-small: ceil(@font-size-base * 0.85); // ~12px
56 @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily 50
57 @headingsFontWeight: bold; // instead of browser default, bold 51 @font-size-h1: floor(@font-size-base * 2.6); // ~36px
58 @headingsColor: inherit; // empty to use BS default, @textColor 52 @font-size-h2: floor(@font-size-base * 2.15); // ~30px
59 53 @font-size-h3: ceil(@font-size-base * 1.7); // ~24px
60 54 @font-size-h4: ceil(@font-size-base * 1.25); // ~18px
61 // Component sizing 55 @font-size-h5: @font-size-base;
62 // ------------------------- 56 @font-size-h6: ceil(@font-size-base * 0.85); // ~12px
63 // Based on 14px font-size and 20px line-height 57
64 58 @line-height-base: 1.428571429; // 20/14
65 @fontSizeLarge: @baseFontSize * 1.25; // ~18px 59 @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
66 @fontSizeSmall: @baseFontSize * 0.85; // ~12px 60
67 @fontSizeMini: @baseFontSize * 0.75; // ~11px 61 @headings-font-family: @font-family-base;
68 62 @headings-font-weight: 500;
69 @paddingLarge: 11px 19px; // 44px 63 @headings-line-height: 1.1;
70 @paddingSmall: 2px 10px; // 26px 64 @headings-color: inherit;
71 @paddingMini: 0 6px; // 22px 65
72 66
73 @baseBorderRadius: 4px; 67 // Iconography
74 @borderRadiusLarge: 6px; 68 // -------------------------
75 @borderRadiusSmall: 3px; 69
76 70 @icon-font-path: "../fonts/";
71 @icon-font-name: "glyphicons-halflings-regular";
72
73
74 // Components
75 // -------------------------
76 // Based on 14px font-size and 1.428 line-height (~20px to start)
77
78 @padding-base-vertical: 6px;
79 @padding-base-horizontal: 12px;
80
81 @padding-large-vertical: 10px;
82 @padding-large-horizontal: 16px;
83
84 @padding-small-vertical: 5px;
85 @padding-small-horizontal: 10px;
86
87 @padding-xs-vertical: 1px;
88 @padding-xs-horizontal: 5px;
89
90 @line-height-large: 1.33;
91 @line-height-small: 1.5;
92
93 @border-radius-base: 4px;
94 @border-radius-large: 6px;
95 @border-radius-small: 3px;
96
97 @component-active-color: #fff;
98 @component-active-bg: @brand-primary;
99
100 @caret-width-base: 4px;
101 @caret-width-large: 5px;
77 102
78 // Tables 103 // Tables
79 // ------------------------- 104 // -------------------------
80 @tableBackground: transparent; // overall background-color 105
81 @tableBackgroundAccent: #f9f9f9; // for striping 106 @table-cell-padding: 8px;
82 @tableBackgroundHover: #f5f5f5; // for hover 107 @table-condensed-cell-padding: 5px;
83 @tableBorder: #ddd; // table and cell border 108
109 @table-bg: transparent; // overall background-color
110 @table-bg-accent: #f9f9f9; // for striping
111 @table-bg-hover: #f5f5f5;
112 @table-bg-active: @table-bg-hover;
113
114 @table-border-color: #ddd; // table and cell border
115
84 116
85 // Buttons 117 // Buttons
86 // ------------------------- 118 // -------------------------
87 @btnBackground: @white; 119
88 @btnBackgroundHighlight: darken(@white, 10%); 120 @btn-font-weight: normal;
89 @btnBorder: #ccc; 121
90 122 @btn-default-color: #333;
91 @btnPrimaryBackground: @linkColor; 123 @btn-default-bg: #fff;
92 @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); 124 @btn-default-border: #ccc;
93 125
94 @btnInfoBackground: #5bc0de; 126 @btn-primary-color: #fff;
95 @btnInfoBackgroundHighlight: #2f96b4; 127 @btn-primary-bg: @brand-primary;
96 128 @btn-primary-border: darken(@btn-primary-bg, 5%);
97 @btnSuccessBackground: #62c462; 129
98 @btnSuccessBackgroundHighlight: #51a351; 130 @btn-success-color: #fff;
99 131 @btn-success-bg: @brand-success;
100 @btnWarningBackground: lighten(@orange, 15%); 132 @btn-success-border: darken(@btn-success-bg, 5%);
101 @btnWarningBackgroundHighlight: @orange; 133
102 134 @btn-warning-color: #fff;
103 @btnDangerBackground: #ee5f5b; 135 @btn-warning-bg: @brand-warning;
104 @btnDangerBackgroundHighlight: #bd362f; 136 @btn-warning-border: darken(@btn-warning-bg, 5%);
105 137
106 @btnInverseBackground: #444; 138 @btn-danger-color: #fff;
107 @btnInverseBackgroundHighlight: @grayDarker; 139 @btn-danger-bg: @brand-danger;
140 @btn-danger-border: darken(@btn-danger-bg, 5%);
141
142 @btn-info-color: #fff;
143 @btn-info-bg: @brand-info;
144 @btn-info-border: darken(@btn-info-bg, 5%);
145
146 @btn-link-disabled-color: @gray-light;
108 147
109 148
110 // Forms 149 // Forms
111 // ------------------------- 150 // -------------------------
112 @inputBackground: @white; 151
113 @inputBorder: #ccc; 152 @input-bg: #fff;
114 @inputBorderRadius: @baseBorderRadius; 153 @input-bg-disabled: @gray-lighter;
115 @inputDisabledBackground: @grayLighter; 154
116 @formActionsBackground: #f5f5f5; 155 @input-color: @gray;
117 @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border 156 @input-border: #ccc;
157 @input-border-radius: @border-radius-base;
158 @input-border-focus: #66afe9;
159
160 @input-color-placeholder: @gray-light;
161
162 @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
163 @input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
164 @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
165
166 @legend-color: @gray-dark;
167 @legend-border-color: #e5e5e5;
168
169 @input-group-addon-bg: @gray-lighter;
170 @input-group-addon-border-color: @input-border;
118 171
119 172
120 // Dropdowns 173 // Dropdowns
121 // ------------------------- 174 // -------------------------
122 @dropdownBackground: @white; 175
123 @dropdownBorder: rgba(0,0,0,.2); 176 @dropdown-bg: #fff;
124 @dropdownDividerTop: #e5e5e5; 177 @dropdown-border: rgba(0,0,0,.15);
125 @dropdownDividerBottom: @white; 178 @dropdown-fallback-border: #ccc;
126 179 @dropdown-divider-bg: #e5e5e5;
127 @dropdownLinkColor: @grayDark; 180
128 @dropdownLinkColorHover: @white; 181 @dropdown-link-color: @gray-dark;
129 @dropdownLinkColorActive: @white; 182 @dropdown-link-hover-color: darken(@gray-dark, 5%);
130 183 @dropdown-link-hover-bg: #f5f5f5;
131 @dropdownLinkBackgroundActive: @linkColor; 184
132 @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; 185 @dropdown-link-active-color: @component-active-color;
133 186 @dropdown-link-active-bg: @component-active-bg;
187
188 @dropdown-link-disabled-color: @gray-light;
189
190 @dropdown-header-color: @gray-light;
134 191
135 192
136 // COMPONENT VARIABLES 193 // COMPONENT VARIABLES
137 // -------------------------------------------------- 194 // --------------------------------------------------
138 195
139 196
140 // Z-index master list 197 // Z-index master list
141 // ------------------------- 198 // -------------------------
142 // Used for a bird's eye view of components dependent on the z-axis 199 // Used for a bird's eye view of components dependent on the z-axis
143 // Try to avoid customizing these :) 200 // Try to avoid customizing these :)
144 @zindexDropdown: 1000; 201
145 @zindexPopover: 1010; 202 @zindex-navbar: 1000;
146 @zindexTooltip: 1030; 203 @zindex-dropdown: 1000;
147 @zindexFixedNavbar: 1030; 204 @zindex-popover: 1010;
148 @zindexModalBackdrop: 1040; 205 @zindex-tooltip: 1030;
149 @zindexModal: 1050; 206 @zindex-navbar-fixed: 1030;
150 207 @zindex-modal-background: 1040;
151 208 @zindex-modal: 1050;
152 // Sprite icons path 209
153 // ------------------------- 210 // Media queries breakpoints
154 @iconSpritePath: "../img/glyphicons-halflings.png"; 211 // --------------------------------------------------
155 @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; 212
156 213 // Extra small screen / phone
157 214 // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
158 // Input placeholder text color 215 @screen-xs: 480px;
159 // ------------------------- 216 @screen-xs-min: @screen-xs;
160 @placeholderText: @grayLight; 217 @screen-phone: @screen-xs-min;
161 218
219 // Small screen / tablet
220 // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
221 @screen-sm: 768px;
222 @screen-sm-min: @screen-sm;
223 @screen-tablet: @screen-sm-min;
224
225 // Medium screen / desktop
226 // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
227 @screen-md: 992px;
228 @screen-md-min: @screen-md;
229 @screen-desktop: @screen-md-min;
230
231 // Large screen / wide desktop
232 // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
233 @screen-lg: 1200px;
234 @screen-lg-min: @screen-lg;
235 @screen-lg-desktop: @screen-lg-min;
236
237 // So media queries don't overlap when required, provide a maximum
238 @screen-xs-max: (@screen-sm-min - 1);
239 @screen-sm-max: (@screen-md-min - 1);
240 @screen-md-max: (@screen-lg-min - 1);
241
242
243 // Grid system
244 // --------------------------------------------------
245
246 // Number of columns in the grid system
247 @grid-columns: 12;
248 // Padding, to be divided by two and applied to the left and right of all columns
249 @grid-gutter-width: 30px;
250
251 // Navbar collapse
252
253 // Point at which the navbar becomes uncollapsed
254 @grid-float-breakpoint: @screen-sm-min;
255 // Point at which the navbar begins collapsing
256 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
257
258
259 // Navbar
260 // -------------------------
261
262 // Basics of a navbar
263 @navbar-height: 50px;
264 @navbar-margin-bottom: @line-height-computed;
265 @navbar-border-radius: @border-radius-base;
266 @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
267 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
268
269 @navbar-default-color: #777;
270 @navbar-default-bg: #f8f8f8;
271 @navbar-default-border: darken(@navbar-default-bg, 6.5%);
272
273 // Navbar links
274 @navbar-default-link-color: #777;
275 @navbar-default-link-hover-color: #333;
276 @navbar-default-link-hover-bg: transparent;
277 @navbar-default-link-active-color: #555;
278 @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
279 @navbar-default-link-disabled-color: #ccc;
280 @navbar-default-link-disabled-bg: transparent;
281
282 // Navbar brand label
283 @navbar-default-brand-color: @navbar-default-link-color;
284 @navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
285 @navbar-default-brand-hover-bg: transparent;
286
287 // Navbar toggle
288 @navbar-default-toggle-hover-bg: #ddd;
289 @navbar-default-toggle-icon-bar-bg: #ccc;
290 @navbar-default-toggle-border-color: #ddd;
291
292
293 // Inverted navbar
294 //
295 // Reset inverted navbar basics
296 @navbar-inverse-color: @gray-light;
297 @navbar-inverse-bg: #222;
298 @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
299
300 // Inverted navbar links
301 @navbar-inverse-link-color: @gray-light;
302 @navbar-inverse-link-hover-color: #fff;
303 @navbar-inverse-link-hover-bg: transparent;
304 @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
305 @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
306 @navbar-inverse-link-disabled-color: #444;
307 @navbar-inverse-link-disabled-bg: transparent;
308
309 // Inverted navbar brand label
310 @navbar-inverse-brand-color: @navbar-inverse-link-color;
311 @navbar-inverse-brand-hover-color: #fff;
312 @navbar-inverse-brand-hover-bg: transparent;
313
314 // Inverted navbar toggle
315 @navbar-inverse-toggle-hover-bg: #333;
316 @navbar-inverse-toggle-icon-bar-bg: #fff;
317 @navbar-inverse-toggle-border-color: #333;
318
319
320 // Navs
321 // -------------------------
322
323 @nav-link-padding: 10px 15px;
324 @nav-link-hover-bg: @gray-lighter;
325
326 @nav-disabled-link-color: @gray-light;
327 @nav-disabled-link-hover-color: @gray-light;
328
329 @nav-open-link-hover-color: #fff;
330
331 // Tabs
332 @nav-tabs-border-color: #ddd;
333
334 @nav-tabs-link-hover-border-color: @gray-lighter;
335
336 @nav-tabs-active-link-hover-bg: @body-bg;
337 @nav-tabs-active-link-hover-color: @gray;
338 @nav-tabs-active-link-hover-border-color: #ddd;
339
340 @nav-tabs-justified-link-border-color: #ddd;
341 @nav-tabs-justified-active-link-border-color: @body-bg;
342
343 // Pills
344 @nav-pills-border-radius: @border-radius-base;
345 @nav-pills-active-link-hover-bg: @component-active-bg;
346 @nav-pills-active-link-hover-color: @component-active-color;
347
348
349 // Pagination
350 // -------------------------
351
352 @pagination-bg: #fff;
353 @pagination-border: #ddd;
354
355 @pagination-hover-bg: @gray-lighter;
356
357 @pagination-active-bg: @brand-primary;
358 @pagination-active-color: #fff;
359
360 @pagination-disabled-color: @gray-light;
361
362
363 // Pager
364 // -------------------------
365
366 @pager-border-radius: 15px;
367 @pager-disabled-color: @gray-light;
368
369
370 // Jumbotron
371 // -------------------------
372
373 @jumbotron-padding: 30px;
374 @jumbotron-color: inherit;
375 @jumbotron-bg: @gray-lighter;
376 @jumbotron-heading-color: inherit;
377 @jumbotron-font-size: ceil(@font-size-base * 1.5);
378
379
380 // Form states and alerts
381 // -------------------------
382
383 @state-success-text: #3c763d;
384 @state-success-bg: #dff0d8;
385 @state-success-border: darken(spin(@state-success-bg, -10), 5%);
386
387 @state-info-text: #31708f;
388 @state-info-bg: #d9edf7;
389 @state-info-border: darken(spin(@state-info-bg, -10), 7%);
390
391 @state-warning-text: #8a6d3b;
392 @state-warning-bg: #fcf8e3;
393 @state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
394
395 @state-danger-text: #a94442;
396 @state-danger-bg: #f2dede;
397 @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
398
399
400 // Tooltips
401 // -------------------------
402 @tooltip-max-width: 200px;
403 @tooltip-color: #fff;
404 @tooltip-bg: #000;
405
406 @tooltip-arrow-width: 5px;
407 @tooltip-arrow-color: @tooltip-bg;
408
409
410 // Popovers
411 // -------------------------
412 @popover-bg: #fff;
413 @popover-max-width: 276px;
414 @popover-border-color: rgba(0,0,0,.2);
415 @popover-fallback-border-color: #ccc;
416
417 @popover-title-bg: darken(@popover-bg, 3%);
418
419 @popover-arrow-width: 10px;
420 @popover-arrow-color: #fff;
421
422 @popover-arrow-outer-width: (@popover-arrow-width + 1);
423 @popover-arrow-outer-color: rgba(0,0,0,.25);
424 @popover-arrow-outer-fallback-color: #999;
425
426
427 // Labels
428 // -------------------------
429
430 @label-default-bg: @gray-light;
431 @label-primary-bg: @brand-primary;
432 @label-success-bg: @brand-success;
433 @label-info-bg: @brand-info;
434 @label-warning-bg: @brand-warning;
435 @label-danger-bg: @brand-danger;
436
437 @label-color: #fff;
438 @label-link-hover-color: #fff;
439
440
441 // Modals
442 // -------------------------
443 @modal-inner-padding: 20px;
444
445 @modal-title-padding: 15px;
446 @modal-title-line-height: @line-height-base;
447
448 @modal-content-bg: #fff;
449 @modal-content-border-color: rgba(0,0,0,.2);
450 @modal-content-fallback-border-color: #999;
451
452 @modal-backdrop-bg: #000;
453 @modal-header-border-color: #e5e5e5;
454 @modal-footer-border-color: @modal-header-border-color;
455
456
457 // Alerts
458 // -------------------------
459 @alert-padding: 15px;
460 @alert-border-radius: @border-radius-base;
461 @alert-link-font-weight: bold;
462
463 @alert-success-bg: @state-success-bg;
464 @alert-success-text: @state-success-text;
465 @alert-success-border: @state-success-border;
466
467 @alert-info-bg: @state-info-bg;
468 @alert-info-text: @state-info-text;
469 @alert-info-border: @state-info-border;
470
471 @alert-warning-bg: @state-warning-bg;
472 @alert-warning-text: @state-warning-text;
473 @alert-warning-border: @state-warning-border;
474
475 @alert-danger-bg: @state-danger-bg;
476 @alert-danger-text: @state-danger-text;
477 @alert-danger-border: @state-danger-border;
478
479
480 // Progress bars
481 // -------------------------
482 @progress-bg: #f5f5f5;
483 @progress-bar-color: #fff;
484
485 @progress-bar-bg: @brand-primary;
486 @progress-bar-success-bg: @brand-success;
487 @progress-bar-warning-bg: @brand-warning;
488 @progress-bar-danger-bg: @brand-danger;
489 @progress-bar-info-bg: @brand-info;
490
491
492 // List group
493 // -------------------------
494 @list-group-bg: #fff;
495 @list-group-border: #ddd;
496 @list-group-border-radius: @border-radius-base;
497
498 @list-group-hover-bg: #f5f5f5;
499 @list-group-active-color: @component-active-color;
500 @list-group-active-bg: @component-active-bg;
501 @list-group-active-border: @list-group-active-bg;
502
503 @list-group-link-color: #555;
504 @list-group-link-heading-color: #333;
505
506
507 // Panels
508 // -------------------------
509 @panel-bg: #fff;
510 @panel-inner-border: #ddd;
511 @panel-border-radius: @border-radius-base;
512 @panel-footer-bg: #f5f5f5;
513
514 @panel-default-text: @gray-dark;
515 @panel-default-border: #ddd;
516 @panel-default-heading-bg: #f5f5f5;
517
518 @panel-primary-text: #fff;
519 @panel-primary-border: @brand-primary;
520 @panel-primary-heading-bg: @brand-primary;
521
522 @panel-success-text: @state-success-text;
523 @panel-success-border: @state-success-border;
524 @panel-success-heading-bg: @state-success-bg;
525
526 @panel-warning-text: @state-warning-text;
527 @panel-warning-border: @state-warning-border;
528 @panel-warning-heading-bg: @state-warning-bg;
529
530 @panel-danger-text: @state-danger-text;
531 @panel-danger-border: @state-danger-border;
532 @panel-danger-heading-bg: @state-danger-bg;
533
534 @panel-info-text: @state-info-text;
535 @panel-info-border: @state-info-border;
536 @panel-info-heading-bg: @state-info-bg;
537
538
539 // Thumbnails
540 // -------------------------
541 @thumbnail-padding: 4px;
542 @thumbnail-bg: @body-bg;
543 @thumbnail-border: #ddd;
544 @thumbnail-border-radius: @border-radius-base;
545
546 @thumbnail-caption-color: @text-color;
547 @thumbnail-caption-padding: 9px;
548
549
550 // Wells
551 // -------------------------
552 @well-bg: #f5f5f5;
553
554
555 // Badges
556 // -------------------------
557 @badge-color: #fff;
558 @badge-link-hover-color: #fff;
559 @badge-bg: @gray-light;
560
561 @badge-active-color: @link-color;
562 @badge-active-bg: #fff;
563
564 @badge-font-weight: bold;
565 @badge-line-height: 1;
566 @badge-border-radius: 10px;
567
568
569 // Breadcrumbs
570 // -------------------------
571 @breadcrumb-bg: #f5f5f5;
572 @breadcrumb-color: #ccc;
573 @breadcrumb-active-color: @gray-light;
574 @breadcrumb-separator: "/";
575
576
577 // Carousel
578 // ------------------------
579
580 @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
581
582 @carousel-control-color: #fff;
583 @carousel-control-width: 15%;
584 @carousel-control-opacity: .5;
585 @carousel-control-font-size: 20px;
586
587 @carousel-indicator-active-bg: #fff;
588 @carousel-indicator-border-color: #fff;
589
590 @carousel-caption-color: #fff;
591
592
593 // Close
594 // ------------------------
595 @close-font-weight: bold;
596 @close-color: #000;
597 @close-text-shadow: 0 1px 0 #fff;
598
599
600 // Code
601 // ------------------------
602 @code-color: #c7254e;
603 @code-bg: #f9f2f4;
604
605 @pre-bg: #f5f5f5;
606 @pre-color: @gray-dark;
607 @pre-border-color: #ccc;
608 @pre-scrollable-max-height: 340px;
609
610 // Type
611 // ------------------------
612 @text-muted: @gray-light;
613 @abbr-border-color: @gray-light;
614 @headings-small-color: @gray-light;
615 @blockquote-small-color: @gray-light;
616 @blockquote-border-color: @gray-lighter;
617 @page-header-border-color: @gray-lighter;
618
619 // Miscellaneous
620 // -------------------------
162 621
163 // Hr border color 622 // Hr border color
164 // ------------------------- 623 @hr-border: @gray-lighter;
165 @hrBorder: @grayLighter;
166
167 624
168 // Horizontal forms & lists 625 // Horizontal forms & lists
169 // ------------------------- 626 @component-offset-horizontal: 180px;
170 @horizontalComponentOffset: 180px; 627
171 628
172 629 // Container sizes
173 // Wells
174 // -------------------------
175 @wellBackground: #f5f5f5;
176
177
178 // Navbar
179 // -------------------------
180 @navbarCollapseWidth: 979px;
181 @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
182
183 @navbarHeight: 40px;
184 @navbarBackgroundHighlight: #ffffff;
185 @navbarBackground: darken(@navbarBackgroundHighlight, 5%);
186 @navbarBorder: darken(@navbarBackground, 12%);
187
188 @navbarText: #777;
189 @navbarLinkColor: #777;
190 @navbarLinkColorHover: @grayDark;
191 @navbarLinkColorActive: @gray;
192 @navbarLinkBackgroundHover: transparent;
193 @navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
194
195 @navbarBrandColor: @navbarLinkColor;
196
197 // Inverted navbar
198 @navbarInverseBackground: #111111;
199 @navbarInverseBackgroundHighlight: #222222;
200 @navbarInverseBorder: #252525;
201
202 @navbarInverseText: @grayLight;
203 @navbarInverseLinkColor: @grayLight;
204 @navbarInverseLinkColorHover: @white;
205 @navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
206 @navbarInverseLinkBackgroundHover: transparent;
207 @navbarInverseLinkBackgroundActive: @navbarInverseBackground;
208
209 @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
210 @navbarInverseSearchBackgroundFocus: @white;
211 @navbarInverseSearchBorder: @navbarInverseBackground;
212 @navbarInverseSearchPlaceholderColor: #ccc;
213
214 @navbarInverseBrandColor: @navbarInverseLinkColor;
215
216
217 // Pagination
218 // -------------------------
219 @paginationBackground: #fff;
220 @paginationBorder: #ddd;
221 @paginationActiveBackground: #f5f5f5;
222
223
224 // Hero unit
225 // -------------------------
226 @heroUnitBackground: @grayLighter;
227 @heroUnitHeadingColor: inherit;
228 @heroUnitLeadColor: inherit;
229
230
231 // Form states and alerts
232 // -------------------------
233 @warningText: #c09853;
234 @warningBackground: #fcf8e3;
235 @warningBorder: darken(spin(@warningBackground, -10), 3%);
236
237 @errorText: #b94a48;
238 @errorBackground: #f2dede;
239 @errorBorder: darken(spin(@errorBackground, -10), 3%);
240
241 @successText: #468847;
242 @successBackground: #dff0d8;
243 @successBorder: darken(spin(@successBackground, -10), 5%);
244
245 @infoText: #3a87ad;
246 @infoBackground: #d9edf7;
247 @infoBorder: darken(spin(@infoBackground, -10), 7%);
248
249
250 // Tooltips and popovers
251 // -------------------------
252 @tooltipColor: #fff;
253 @tooltipBackground: #000;
254 @tooltipArrowWidth: 5px;
255 @tooltipArrowColor: @tooltipBackground;
256
257 @popoverBackground: #fff;
258 @popoverArrowWidth: 10px;
259 @popoverArrowColor: #fff;
260 @popoverTitleBackground: darken(@popoverBackground, 3%);
261
262 // Special enhancement for popovers
263 @popoverArrowOuterWidth: @popoverArrowWidth + 1;
264 @popoverArrowOuterColor: rgba(0,0,0,.25);
265
266
267
268 // GRID
269 // -------------------------------------------------- 630 // --------------------------------------------------
270 631
271 632 // Small screen / tablet
272 // Default 940px grid 633 @container-tablet: ((720px + @grid-gutter-width));
273 // ------------------------- 634 @container-sm: @container-tablet;
274 @gridColumns: 12; 635
275 @gridColumnWidth: 60px; 636 // Medium screen / desktop
276 @gridGutterWidth: 20px; 637 @container-desktop: ((940px + @grid-gutter-width));
277 @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); 638 @container-md: @container-desktop;
278 639
279 // 1200px min 640 // Large screen / wide desktop
280 @gridColumnWidth1200: 70px; 641 @container-large-desktop: ((1140px + @grid-gutter-width));
281 @gridGutterWidth1200: 30px; 642 @container-lg: @container-large-desktop;
282 @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
283
284 // 768px-979px
285 @gridColumnWidth768: 42px;
286 @gridGutterWidth768: 20px;
287 @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
288
289
290 // Fluid grid
291 // -------------------------
292 @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
293 @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
294
295 // 1200px min
296 @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
297 @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
298
299 // 768px-979px
300 @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
301 @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);