3 // --------------------------------------------------
7 // --------------------------------------------------
10 // -------------------------
12 @gray-darker: lighten(#000, 13.5%); // #222
13 @gray-dark: lighten(#000, 20%); // #333
14 @gray: lighten(#000, 33.5%); // #555
15 @gray-light: lighten(#000, 60%); // #999
16 @gray-lighter: lighten(#000, 93.5%); // #eee
19 // -------------------------
21 @brand-primary: #428bca;
22 @brand-success: #5cb85c;
23 @brand-warning: #f0ad4e;
24 @brand-danger: #d9534f;
28 // -------------------------
31 @text-color: @gray-dark;
34 // -------------------------
36 @link-color: @brand-primary;
37 @link-hover-color: @link-color;
40 // -------------------------
42 @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
43 @font-family-serif: "Lora", Georgia, "Times New Roman", Times, serif;
44 @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
45 @font-family-base: @font-family-serif;
47 @font-size-base: 17px;
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 @border-radius-base: 4px;
73 @border-radius-large: 6px;
74 @border-radius-small: 3px;
76 @component-active-bg: @brand-primary;
80 // -------------------------
82 @table-cell-padding: 8px;
83 @table-condensed-cell-padding: 5px;
85 @table-bg: transparent; // overall background-color
86 @table-bg-accent: #f9f9f9; // for striping
87 @table-bg-hover: #f5f5f5;
88 @table-bg-active: @table-bg-hover;
90 @table-border-color: #ddd; // table and cell border
94 // -------------------------
96 @btn-default-color: #fff;
97 @btn-default-bg: @text-color;
98 @btn-default-border: @btn-default-bg;
100 @btn-primary-color: @btn-default-color;
101 @btn-primary-bg: @brand-primary;
102 @btn-primary-border: @btn-primary-bg;
104 @btn-success-color: @btn-default-color;
105 @btn-success-bg: @brand-success;
106 @btn-success-border: @btn-success-bg;
108 @btn-warning-color: @btn-default-color;
109 @btn-warning-bg: @brand-warning;
110 @btn-warning-border: @btn-warning-bg;
112 @btn-danger-color: @btn-default-color;
113 @btn-danger-bg: @brand-danger;
114 @btn-danger-border: @btn-danger-bg;
116 @btn-info-color: @btn-default-color;
117 @btn-info-bg: @brand-info;
118 @btn-info-border: @btn-info-bg;
120 @btn-hover-color: @btn-default-color;
124 // -------------------------
127 @input-bg-disabled: @gray-lighter;
130 @input-border-radius: @border-radius-base;
132 @input-color-placeholder: @gray-light;
134 @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
135 @input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
136 @input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
138 @legend-border-color: #e5e5e5;
140 @input-group-addon-border-color: @input-border;
144 // -------------------------
147 @dropdown-border: rgba(0,0,0,.15);
148 @dropdown-fallback-border: #ccc;
149 @dropdown-divider-bg: #e5e5e5;
151 @dropdown-link-active-color: #fff;
152 @dropdown-link-active-bg: @component-active-bg;
154 @dropdown-link-color: @gray-dark;
155 @dropdown-link-hover-color: #fff;
156 @dropdown-link-hover-bg: @dropdown-link-active-bg;
158 @dropdown-caret-color: #000;
161 // COMPONENT VARIABLES
162 // --------------------------------------------------
165 // Z-index master list
166 // -------------------------
167 // Used for a bird's eye view of components dependent on the z-axis
168 // Try to avoid customizing these :)
170 @zindex-dropdown: 1000;
171 @zindex-popover: 1010;
172 @zindex-tooltip: 1030;
173 @zindex-navbar-fixed: 1030;
174 @zindex-modal-background: 1040;
179 // -------------------------
181 // Basics of a navbar
182 @navbar-height: 50px;
183 @navbar-color: @gray;
185 @navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px
186 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
189 @navbar-link-color: @navbar-color;
190 @navbar-link-hover-color: @gray-dark;
191 @navbar-link-hover-bg: transparent;
192 @navbar-link-active-color: @navbar-link-hover-color;
193 @navbar-link-active-bg: darken(@navbar-bg, 10%);
194 @navbar-link-disabled-color: #333;
195 @navbar-link-disabled-bg: transparent;
197 // Navbar brand label
198 @navbar-brand-color: @navbar-link-color;
199 @navbar-brand-hover-color: @navbar-link-hover-color;
200 @navbar-brand-hover-bg: transparent;
203 @navbar-toggle-hover-bg: #ddd;
204 @navbar-toggle-icon-bar-bg: #ccc;
205 @navbar-toggle-border-color: #ddd;
210 // Reset inverted navbar basics
211 @navbar-inverse-color: @gray-light;
212 @navbar-inverse-bg: @text-color;
214 // Inverted navbar links
215 @navbar-inverse-link-color: @gray-light;
216 @navbar-inverse-link-hover-color: #fff;
217 @navbar-inverse-link-hover-bg: transparent;
218 @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
219 @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
220 @navbar-inverse-link-disabled-color: #ccc;
221 @navbar-inverse-link-disabled-bg: transparent;
223 // Inverted navbar brand label
224 @navbar-inverse-brand-color: @navbar-inverse-link-color;
225 @navbar-inverse-brand-hover-color: #fff;
226 @navbar-inverse-brand-hover-bg: transparent;
228 // Inverted navbar search
229 // Normal navbar needs no special styles or vars
230 @navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
231 @navbar-inverse-search-bg-focus: #fff;
232 @navbar-inverse-search-border: @navbar-inverse-bg;
233 @navbar-inverse-search-placeholder-color: #ccc;
235 // Inverted navbar toggle
236 @navbar-inverse-toggle-hover-bg: #333;
237 @navbar-inverse-toggle-icon-bar-bg: #fff;
238 @navbar-inverse-toggle-border-color: #333;
242 // -------------------------
244 @nav-link-hover-bg: @gray-lighter;
246 @nav-disabled-link-color: @gray-light;
247 @nav-disabled-link-hover-color: @gray-light;
249 @nav-open-link-hover-color: #fff;
250 @nav-open-caret-border-color: #fff;
253 @nav-tabs-border-color: #ddd;
255 @nav-tabs-link-hover-border-color: @gray-lighter;
257 @nav-tabs-active-link-hover-bg: @body-bg;
258 @nav-tabs-active-link-hover-color: @gray;
259 @nav-tabs-active-link-hover-border-color: #ddd;
261 @nav-tabs-justified-link-border-color: #ddd;
262 @nav-tabs-justified-active-link-border-color: @body-bg;
265 @nav-pills-active-link-hover-bg: @component-active-bg;
266 @nav-pills-active-link-hover-color: #fff;
270 // -------------------------
272 @pagination-bg: #fff;
273 @pagination-border: #ddd;
274 @pagination-active-bg: #f5f5f5;
275 @pagination-active-color: @gray-light;
276 @pagination-disabled-color: @gray-light;
279 // -------------------------
281 @pager-border-radius: 15px;
282 @pager-disabled-color: @gray-light;
286 // -------------------------
288 @jumbotron-bg: darken(@body-bg, 3%);
289 @jumbotron-heading-color: inherit;
290 @jumbotron-lead-color: inherit;
293 // Form states and alerts
294 // -------------------------
296 @state-warning-text: #c09853;
297 @state-warning-bg: #fcf8e3;
298 @state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
300 @state-danger-text: #b94a48;
301 @state-danger-bg: #f2dede;
302 @state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
304 @state-success-text: #468847;
305 @state-success-bg: #dff0d8;
306 @state-success-border: darken(spin(@state-success-bg, -10), 5%);
308 @state-info-text: #3a87ad;
309 @state-info-bg: #d9edf7;
310 @state-info-border: darken(spin(@state-info-bg, -10), 7%);
314 // -------------------------
315 @tooltip-max-width: 200px;
316 @tooltip-color: #fff;
317 @tooltip-bg: rgba(0,0,0,.9);
319 @tooltip-arrow-width: 5px;
320 @tooltip-arrow-color: @tooltip-bg;
324 // -------------------------
326 @popover-max-width: 276px;
327 @popover-border-color: rgba(0,0,0,.2);
328 @popover-fallback-border-color: #ccc;
330 @popover-title-bg: darken(@popover-bg, 3%);
332 @popover-arrow-width: 10px;
333 @popover-arrow-color: #fff;
335 @popover-arrow-outer-width: (@popover-arrow-width + 1);
336 @popover-arrow-outer-color: rgba(0,0,0,.25);
337 @popover-arrow-outer-fallback-color: #999;
341 // -------------------------
342 @label-success-bg: @brand-success;
343 @label-info-bg: @brand-info;
344 @label-warning-bg: @brand-warning;
345 @label-danger-bg: @brand-danger;
348 @label-link-hover-color: #fff;
352 // -------------------------
353 @modal-inner-padding: 20px;
355 @modal-title-padding: 15px;
356 @modal-title-line-height: @line-height-base;
358 @modal-content-bg: #fff;
359 @modal-content-border-color: rgba(0,0,0,.2);
360 @modal-content-fallback-border-color: #999;
362 @modal-backdrop-bg: #000;
363 @modal-header-border-color: #e5e5e5;
364 @modal-footer-border-color: @modal-header-border-color;
368 // -------------------------
369 @alert-bg: @state-warning-bg;
370 @alert-text: @state-warning-text;
371 @alert-border: @state-warning-border;
372 @alert-border-radius: @border-radius-base;
374 @alert-success-bg: @state-success-bg;
375 @alert-success-text: @state-success-text;
376 @alert-success-border: @state-success-border;
378 @alert-danger-bg: @state-danger-bg;
379 @alert-danger-text: @state-danger-text;
380 @alert-danger-border: @state-danger-border;
382 @alert-info-bg: @state-info-bg;
383 @alert-info-text: @state-info-text;
384 @alert-info-border: @state-info-border;
388 // -------------------------
389 @progress-bg: #f5f5f5;
390 @progress-bar-color: #fff;
392 @progress-bar-bg: @brand-primary;
393 @progress-bar-success-bg: @brand-success;
394 @progress-bar-warning-bg: @brand-warning;
395 @progress-bar-danger-bg: @brand-danger;
396 @progress-bar-info-bg: @brand-info;
400 // -------------------------
401 @list-group-bg: #fff;
402 @list-group-border: #ddd;
403 @list-group-border-radius: @border-radius-base;
405 @list-group-hover-bg: #f5f5f5;
406 @list-group-active-color: #fff;
407 @list-group-active-bg: @component-active-bg;
408 @list-group-active-border: @list-group-active-bg;
410 @list-group-link-color: #555;
411 @list-group-link-heading-color: #333;
415 // -------------------------
418 @panel-border-radius: @border-radius-base;
419 @panel-heading-bg: #f5f5f5;
420 @panel-footer-bg: #f5f5f5;
422 @panel-primary-text: #fff;
423 @panel-primary-border: @brand-primary;
424 @panel-primary-heading-bg: @brand-primary;
426 @panel-success-text: @state-success-text;
427 @panel-success-border: @state-success-border;
428 @panel-success-heading-bg: @state-success-bg;
430 @panel-warning-text: @state-warning-text;
431 @panel-warning-border: @state-warning-border;
432 @panel-warning-heading-bg: @state-warning-bg;
434 @panel-danger-text: @state-danger-text;
435 @panel-danger-border: @state-danger-border;
436 @panel-danger-heading-bg: @state-danger-bg;
438 @panel-info-text: @state-info-text;
439 @panel-info-border: @state-info-border;
440 @panel-info-heading-bg: @state-info-bg;
444 // -------------------------
445 @thumbnail-caption-color: @text-color;
446 @thumbnail-bg: @body-bg;
447 @thumbnail-border: #ddd;
448 @thumbnail-border-radius: @border-radius-base;
452 // -------------------------
453 @well-bg: darken(@body-bg, 3%);
457 // -------------------------
458 @accordion-border-color: #e5e5e5;
462 // -------------------------
464 @badge-link-hover-color: #fff;
466 @badge-bg: @gray-light;
467 @badge-active-color: @link-color;
468 @badge-active-bg: #fff;
472 // -------------------------
473 @breadcrumb-bg: #f5f5f5;
474 @breadcrumb-color: #ccc;
475 @breadcrumb-active-color: @gray-light;
479 // ------------------------
480 @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
482 @carousel-control-color: #fff;
484 @carousel-indicator-border-color: #fff;
485 @carousel-indicator-active-bg: #fff;
487 @carousel-caption-color: #fff;
491 // ------------------------
493 @close-text-shadow: 0 1px 0 #fff;
497 // ------------------------
498 @code-color: #c7254e;
502 @pre-border-color: #ccc;
505 // ------------------------
506 @text-muted: @gray-light;
507 @abbr-border-color: @gray-light;
508 @headings-small-color: @gray-light;
509 @blockquote-small-color: @gray-light;
510 @blockquote-border-color: @gray-lighter;
511 @page-header-border-color: @gray-lighter;
514 // -------------------------
517 @hr-border: @gray-lighter;
519 // Horizontal forms & lists
520 @component-offset-horizontal: 180px;
523 // Media queries breakpoints
524 // --------------------------------------------------
526 // Tiny screen / phone
528 @screen-phone: @screen-tiny;
530 // Small screen / tablet
531 @screen-small: 768px;
532 @screen-tablet: @screen-small;
534 // Medium screen / desktop
535 @screen-medium: 992px;
536 @screen-desktop: @screen-medium;
538 // So media queries don't overlap when required, provide a maximum
539 @screen-small-max: (@screen-medium - 1);
540 @screen-tablet-max: @screen-small-max;
542 // Large screen / wide desktop
543 @screen-large: 1200px;
544 @screen-large-desktop: @screen-large;
548 // --------------------------------------------------
550 // Small screen / tablet
551 @container-tablet: 728px;
553 // Medium screen / desktop
554 @container-desktop: 940px;
556 // Large screen / wide desktop
557 @container-large-desktop: 1170px;
561 // --------------------------------------------------
563 // Number of columns in the grid system
565 // Padding, to be divided by two and applied to the left and right of all columns
566 @grid-gutter-width: 30px;
567 // Point at which the navbar stops collapsing
568 @grid-float-breakpoint: @screen-tablet;