3 // --------------------------------------------------
7 // --------------------------------------------------
10 // -------------------------
12 @gray-darker: lighten(#000, 13.5%); // #222
16 @gray-lighter: lighten(#000, 93.5%); // #eee
19 // -------------------------
21 @brand-primary: #DD4814;
22 @brand-success: #38B44A;
23 @brand-warning: #EFB73E;
24 @brand-danger: #DF382C;
28 // -------------------------
31 @text-color: @gray-dark;
34 // -------------------------
36 @link-color: @brand-primary;
37 @link-hover-color: darken(@link-color, 15%);
40 // -------------------------
42 @font-family-sans-serif: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
43 @font-family-serif: Georgia, "Times New Roman", Times, serif;
44 @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
45 @font-family-base: @font-family-sans-serif;
47 @font-size-base: 14px;
48 @font-size-large: ceil(@font-size-base * 1.25); // ~18px
49 @font-size-small: ceil(@font-size-base * 0.85); // ~12px
51 @line-height-base: 1.428571429; // 20/14
52 @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
54 @headings-font-family: @font-family-base;
55 @headings-font-weight: 500;
56 @headings-line-height: 1.1;
60 // -------------------------
61 // Based on 14px font-size and 1.428 line-height (~20px to start)
63 @padding-base-vertical: 8px;
64 @padding-base-horizontal: 12px;
66 @padding-large-vertical: 14px;
67 @padding-large-horizontal: 16px;
69 @padding-small-vertical: 5px;
70 @padding-small-horizontal: 10px;
72 @line-height-large: 1.33;
73 @line-height-small: 1.5;
75 @border-radius-base: 4px;
76 @border-radius-large: 6px;
77 @border-radius-small: 3px;
79 @component-active-bg: @brand-primary;
81 @caret-width-base: 4px;
82 @caret-width-large: 5px;
85 // -------------------------
87 @table-cell-padding: 8px;
88 @table-condensed-cell-padding: 5px;
90 @table-bg: transparent; // overall background-color
91 @table-bg-accent: #f9f9f9; // for striping
92 @table-bg-hover: #f5f5f5;
93 @table-bg-active: @table-bg-hover;
95 @table-border-color: #ddd; // table and cell border
99 // -------------------------
101 @btn-font-weight: bold;
103 @btn-default-color: #fff;
104 @btn-default-bg: @gray-light;
105 @btn-default-border: @btn-default-bg;
107 @btn-primary-color: @btn-default-color;
108 @btn-primary-bg: @brand-primary;
109 @btn-primary-border: @btn-primary-bg;
111 @btn-success-color: @btn-default-color;
112 @btn-success-bg: @brand-success;
113 @btn-success-border: @btn-success-bg;
115 @btn-warning-color: @btn-default-color;
116 @btn-warning-bg: @brand-warning;
117 @btn-warning-border: @btn-warning-bg;
119 @btn-danger-color: @btn-default-color;
120 @btn-danger-bg: @brand-danger;
121 @btn-danger-border: @btn-danger-bg;
123 @btn-info-color: @btn-default-color;
124 @btn-info-bg: @brand-info;
125 @btn-info-border: @btn-info-bg;
127 @btn-link-disabled-color: @gray-light;
131 // -------------------------
134 @input-bg-disabled: @gray-lighter;
136 @input-color: @text-color;
138 @input-border-radius: @border-radius-base;
139 @input-border-focus: #66afe9;
141 @input-color-placeholder: @gray-light;
143 @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
144 @input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
145 @input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
147 @legend-color: @text-color;
148 @legend-border-color: #e5e5e5;
150 @input-group-addon-bg: @gray-lighter;
151 @input-group-addon-border-color: @input-border;
155 // -------------------------
158 @dropdown-border: rgba(0,0,0,.15);
159 @dropdown-fallback-border: #ccc;
160 @dropdown-divider-bg: #e5e5e5;
162 @dropdown-link-active-color: #fff;
163 @dropdown-link-active-bg: @component-active-bg;
165 @dropdown-link-color: @gray-dark;
166 @dropdown-link-hover-color: #fff;
167 @dropdown-link-hover-bg: @dropdown-link-active-bg;
169 @dropdown-link-disabled-color: @text-muted;
171 @dropdown-header-color: @text-muted;
173 @dropdown-caret-color: #000;
176 // COMPONENT VARIABLES
177 // --------------------------------------------------
180 // Z-index master list
181 // -------------------------
182 // Used for a bird's eye view of components dependent on the z-axis
183 // Try to avoid customizing these :)
185 @zindex-dropdown: 1000;
186 @zindex-popover: 1010;
187 @zindex-tooltip: 1030;
188 @zindex-navbar-fixed: 1030;
189 @zindex-modal-background: 1040;
192 // Media queries breakpoints
193 // --------------------------------------------------
195 // Extra small screen / phone
196 @screen-xsmall: 480px;
197 @screen-phone: @screen-xsmall;
199 // Small screen / tablet
200 @screen-small: 768px;
201 @screen-tablet: @screen-small;
203 // Medium screen / desktop
204 @screen-medium: 992px;
205 @screen-desktop: @screen-medium;
207 // Large screen / wide desktop
208 @screen-large: 1200px;
209 @screen-large-desktop: @screen-large;
211 // So media queries don't overlap when required, provide a maximum
212 @screen-phone-max: (@screen-small - 1);
213 @screen-small-max: (@screen-medium - 1);
214 @screen-tablet-max: (@screen-desktop - 1);
215 @screen-desktop-max: (@screen-large-desktop - 1);
219 // --------------------------------------------------
221 // Number of columns in the grid system
223 // Padding, to be divided by two and applied to the left and right of all columns
224 @grid-gutter-width: 30px;
225 // Point at which the navbar stops collapsing
226 @grid-float-breakpoint: @screen-tablet;
230 // -------------------------
232 // Basics of a navbar
233 @navbar-height: 50px;
234 @navbar-margin-bottom: @line-height-computed;
236 @navbar-bg: @brand-primary;
237 @navbar-border: darken(@navbar-bg, 6.5%);
238 @navbar-border-radius: @border-radius-base;
239 @navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px
240 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
243 @navbar-link-color: #fff;
244 @navbar-link-hover-color: #fff;
245 @navbar-link-hover-bg: darken(@navbar-bg, 15%);
246 @navbar-link-active-color: #fff;
247 @navbar-link-active-bg: darken(@navbar-bg, 10%);
248 @navbar-link-disabled-color: #ccc;
249 @navbar-link-disabled-bg: transparent;
251 // Navbar brand label
252 @navbar-brand-color: @navbar-link-color;
253 @navbar-brand-hover-color: #fff;
254 @navbar-brand-hover-bg: none;
257 @navbar-toggle-hover-bg: #ddd;
258 @navbar-toggle-icon-bar-bg: #ccc;
259 @navbar-toggle-border-color: #ddd;
264 // Reset inverted navbar basics
265 @navbar-inverse-color: #fff;
266 @navbar-inverse-bg: @brand-info;
267 @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
269 // Inverted navbar links
270 @navbar-inverse-link-color: #fff;
271 @navbar-inverse-link-hover-color: #fff;
272 @navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 15%);
273 @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
274 @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
275 @navbar-inverse-link-disabled-color: #ccc;
276 @navbar-inverse-link-disabled-bg: transparent;
278 // Inverted navbar brand label
279 @navbar-inverse-brand-color: @navbar-inverse-link-color;
280 @navbar-inverse-brand-hover-color: #fff;
281 @navbar-inverse-brand-hover-bg: none;
283 // Inverted navbar search
284 // Normal navbar needs no special styles or vars
285 @navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
286 @navbar-inverse-search-bg-focus: #fff;
287 @navbar-inverse-search-border: @navbar-inverse-bg;
288 @navbar-inverse-search-placeholder-color: #ccc;
290 // Inverted navbar toggle
291 @navbar-inverse-toggle-hover-bg: #333;
292 @navbar-inverse-toggle-icon-bar-bg: #fff;
293 @navbar-inverse-toggle-border-color: #333;
297 // -------------------------
299 @nav-link-padding: 10px 15px;
300 @nav-link-hover-bg: @gray-lighter;
302 @nav-disabled-link-color: @gray-light;
303 @nav-disabled-link-hover-color: @gray-light;
305 @nav-open-link-hover-color: #fff;
306 @nav-open-caret-border-color: #fff;
309 @nav-tabs-border-color: #ddd;
311 @nav-tabs-link-hover-border-color: @gray-lighter;
313 @nav-tabs-active-link-hover-bg: @body-bg;
314 @nav-tabs-active-link-hover-color: @gray;
315 @nav-tabs-active-link-hover-border-color: #ddd;
317 @nav-tabs-justified-link-border-color: #ddd;
318 @nav-tabs-justified-active-link-border-color: @body-bg;
321 @nav-pills-active-link-hover-bg: @component-active-bg;
322 @nav-pills-active-link-hover-color: #fff;
326 // -------------------------
328 @pagination-bg: #fff;
329 @pagination-border: #ddd;
331 @pagination-hover-bg: @gray-lighter;
333 @pagination-active-bg: #f5f5f5;
334 @pagination-active-color: @gray-light;
336 @pagination-disabled-color: @gray-light;
340 // -------------------------
342 @pager-border-radius: 15px;
343 @pager-disabled-color: @gray-light;
347 // -------------------------
349 @jumbotron-bg: @gray-lighter;
350 @jumbotron-heading-color: inherit;
351 @jumbotron-lead-color: inherit;
354 // Form states and alerts
355 // -------------------------
357 @state-warning-text: #c09853;
358 @state-warning-bg: #fcf8e3;
359 @state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
361 @state-danger-text: #b94a48;
362 @state-danger-bg: #f2dede;
363 @state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
365 @state-success-text: #468847;
366 @state-success-bg: #dff0d8;
367 @state-success-border: darken(spin(@state-success-bg, -10), 5%);
369 @state-info-text: #3a87ad;
370 @state-info-bg: #d9edf7;
371 @state-info-border: darken(spin(@state-info-bg, -10), 7%);
375 // -------------------------
376 @tooltip-max-width: 200px;
377 @tooltip-color: #fff;
378 @tooltip-bg: rgba(0,0,0,.9);
380 @tooltip-arrow-width: 5px;
381 @tooltip-arrow-color: @tooltip-bg;
385 // -------------------------
387 @popover-max-width: 276px;
388 @popover-border-color: rgba(0,0,0,.2);
389 @popover-fallback-border-color: #ccc;
391 @popover-title-bg: darken(@popover-bg, 3%);
393 @popover-arrow-width: 10px;
394 @popover-arrow-color: #fff;
396 @popover-arrow-outer-width: (@popover-arrow-width + 1);
397 @popover-arrow-outer-color: rgba(0,0,0,.25);
398 @popover-arrow-outer-fallback-color: #999;
402 // -------------------------
404 @label-default-bg: @btn-default-bg;
405 @label-primary-bg: @brand-primary;
406 @label-success-bg: @brand-success;
407 @label-info-bg: @brand-info;
408 @label-warning-bg: @brand-warning;
409 @label-danger-bg: @brand-danger;
412 @label-link-hover-color: #fff;
416 // -------------------------
417 @modal-inner-padding: 20px;
419 @modal-title-padding: 15px;
420 @modal-title-line-height: @line-height-base;
422 @modal-content-bg: #fff;
423 @modal-content-border-color: rgba(0,0,0,.2);
424 @modal-content-fallback-border-color: #999;
426 @modal-backdrop-bg: #000;
427 @modal-header-border-color: #e5e5e5;
428 @modal-footer-border-color: @modal-header-border-color;
432 // -------------------------
433 @alert-padding: 15px;
434 @alert-border-radius: @border-radius-base;
435 @alert-link-font-weight: bold;
437 @alert-bg: @state-warning-bg;
438 @alert-text: @state-warning-text;
439 @alert-border: @state-warning-border;
441 @alert-success-bg: @state-success-bg;
442 @alert-success-text: @state-success-text;
443 @alert-success-border: @state-success-border;
445 @alert-danger-bg: @state-danger-bg;
446 @alert-danger-text: @state-danger-text;
447 @alert-danger-border: @state-danger-border;
449 @alert-info-bg: @state-info-bg;
450 @alert-info-text: @state-info-text;
451 @alert-info-border: @state-info-border;
455 // -------------------------
456 @progress-bg: #f5f5f5;
457 @progress-bar-color: #fff;
459 @progress-bar-bg: @brand-primary;
460 @progress-bar-success-bg: @brand-success;
461 @progress-bar-warning-bg: @brand-warning;
462 @progress-bar-danger-bg: @brand-danger;
463 @progress-bar-info-bg: @brand-info;
467 // -------------------------
468 @list-group-bg: #fff;
469 @list-group-border: #ddd;
470 @list-group-border-radius: @border-radius-base;
472 @list-group-hover-bg: #f5f5f5;
473 @list-group-active-color: #fff;
474 @list-group-active-bg: @component-active-bg;
475 @list-group-active-border: @list-group-active-bg;
477 @list-group-link-color: #555;
478 @list-group-link-heading-color: #333;
482 // -------------------------
485 @panel-border-radius: @border-radius-base;
486 @panel-heading-bg: #f5f5f5;
487 @panel-footer-bg: #f5f5f5;
489 @panel-primary-text: #fff;
490 @panel-primary-border: @brand-primary;
491 @panel-primary-heading-bg: @brand-primary;
493 @panel-success-text: @state-success-text;
494 @panel-success-border: @state-success-border;
495 @panel-success-heading-bg: @state-success-bg;
497 @panel-warning-text: @state-warning-text;
498 @panel-warning-border: @state-warning-border;
499 @panel-warning-heading-bg: @state-warning-bg;
501 @panel-danger-text: @state-danger-text;
502 @panel-danger-border: @state-danger-border;
503 @panel-danger-heading-bg: @state-danger-bg;
505 @panel-info-text: @state-info-text;
506 @panel-info-border: @state-info-border;
507 @panel-info-heading-bg: @state-info-bg;
511 // -------------------------
512 @thumbnail-padding: 4px;
513 @thumbnail-bg: @body-bg;
514 @thumbnail-border: #ddd;
515 @thumbnail-border-radius: @border-radius-base;
517 @thumbnail-caption-color: @text-color;
518 @thumbnail-caption-padding: 9px;
522 // -------------------------
527 // -------------------------
529 @badge-link-hover-color: #fff;
530 @badge-bg: @gray-light;
532 @badge-active-color: @link-color;
533 @badge-active-bg: #fff;
535 @badge-font-weight: bold;
536 @badge-line-height: 1;
537 @badge-border-radius: 10px;
541 // -------------------------
542 @breadcrumb-bg: #f5f5f5;
543 @breadcrumb-color: #ccc;
544 @breadcrumb-active-color: @gray-light;
548 // ------------------------
550 @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
552 @carousel-control-color: #fff;
553 @carousel-control-width: 15%;
554 @carousel-control-opacity: .5;
555 @carousel-control-font-size: 20px;
557 @carousel-indicator-active-bg: #fff;
558 @carousel-indicator-border-color: #fff;
560 @carousel-caption-color: #fff;
564 // ------------------------
566 @close-font-weight: bold;
567 @close-text-shadow: 0 1px 0 #fff;
571 // ------------------------
572 @code-color: #c7254e;
576 @pre-color: @gray-dark;
577 @pre-border-color: #ccc;
578 @pre-scrollable-max-height: 340px;
581 // ------------------------
582 @text-muted: @gray-light;
583 @abbr-border-color: @gray-light;
584 @headings-small-color: @gray-light;
585 @blockquote-small-color: @gray-light;
586 @blockquote-border-color: @gray-lighter;
587 @page-header-border-color: @gray-lighter;
590 // -------------------------
593 @hr-border: @gray-lighter;
595 // Horizontal forms & lists
596 @component-offset-horizontal: 180px;
600 // --------------------------------------------------
602 // Small screen / tablet
603 @container-tablet: 728px;
605 // Medium screen / desktop
606 @container-desktop: 940px;
608 // Large screen / wide desktop
609 @container-large-desktop: 1170px;