3 // --------------------------------------------------
7 // --------------------------------------------------
10 // -------------------------
16 @gray-lighter: #ADAFAE; // #eee
19 // -------------------------
21 @brand-primary: #2A9FD6;
22 @brand-success: #77B300;
23 @brand-warning: #FF8800;
24 @brand-danger: #CC0000;
28 // -------------------------
31 @text-color: @gray-light;
34 // -------------------------
36 @link-color: @brand-primary;
37 @link-hover-color: @link-color;
40 // -------------------------
42 @font-family-sans-serif: "Droid Sans", "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;
59 // -------------------------
61 @icon-font-path: "../fonts/";
62 @icon-font-name: "glyphicons-halflings-regular";
66 // -------------------------
67 // Based on 14px font-size and 1.428 line-height (~20px to start)
69 @padding-base-vertical: 8px;
70 @padding-base-horizontal: 12px;
72 @padding-large-vertical: 14px;
73 @padding-large-horizontal: 16px;
75 @padding-small-vertical: 5px;
76 @padding-small-horizontal: 10px;
78 @line-height-large: 1.33;
79 @line-height-small: 1.5;
81 @border-radius-base: 4px;
82 @border-radius-large: 6px;
83 @border-radius-small: 3px;
85 @component-active-bg: @brand-primary;
87 @caret-width-base: 4px;
88 @caret-width-large: 5px;
91 // -------------------------
93 @table-cell-padding: 8px;
94 @table-condensed-cell-padding: 5px;
96 @table-bg: darken(@gray-darker, 4%); // overall background-color
97 @table-bg-accent: darken(@table-bg, 6%); // for striping
98 @table-bg-hover: @gray-dark;
99 @table-bg-active: @table-bg-hover;
101 @table-border-color: @gray-dark; // table and cell border
105 // -------------------------
107 @btn-font-weight: normal;
109 @btn-default-color: #fff;
110 @btn-default-bg: lighten(@gray-dark, 10%);
111 @btn-default-border: @btn-default-bg;
113 @btn-primary-color: @btn-default-color;
114 @btn-primary-bg: @brand-primary;
115 @btn-primary-border: @btn-primary-bg;
117 @btn-success-color: @btn-default-color;
118 @btn-success-bg: @brand-success;
119 @btn-success-border: @btn-success-bg;
121 @btn-warning-color: @btn-default-color;
122 @btn-warning-bg: @brand-warning;
123 @btn-warning-border: @btn-warning-bg;
125 @btn-danger-color: @btn-default-color;
126 @btn-danger-bg: @brand-danger;
127 @btn-danger-border: @btn-danger-bg;
129 @btn-info-color: @btn-default-color;
130 @btn-info-bg: @brand-info;
131 @btn-info-border: @btn-info-bg;
133 @btn-link-disabled-color: @gray-light;
137 // -------------------------
140 @input-bg-disabled: @gray-lighter;
142 @input-color: @text-color;
143 @input-border: @gray-dark;
144 @input-border-radius: @border-radius-base;
145 @input-border-focus: #66afe9;
147 @input-color-placeholder: @gray-light;
149 @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
150 @input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
151 @input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
153 @legend-color: @text-color;
154 @legend-border-color: @gray-dark;
156 @input-group-addon-bg: @gray-lighter;
157 @input-group-addon-border-color: @input-border;
161 // -------------------------
163 @dropdown-bg: @gray-darker;
164 @dropdown-border: rgba(255,255,255,0.1);
165 @dropdown-fallback-border: #444;
166 @dropdown-divider-bg: rgba(255,255,255,0.1);
168 @dropdown-link-active-color: #fff;
169 @dropdown-link-active-bg: @component-active-bg;
171 @dropdown-link-color: #fff;
172 @dropdown-link-hover-color: #fff;
173 @dropdown-link-hover-bg: @dropdown-link-active-bg;
175 @dropdown-link-disabled-color: @text-muted;
177 @dropdown-header-color: @text-muted;
179 @dropdown-caret-color: #000;
182 // COMPONENT VARIABLES
183 // --------------------------------------------------
186 // Z-index master list
187 // -------------------------
188 // Used for a bird's eye view of components dependent on the z-axis
189 // Try to avoid customizing these :)
191 @zindex-navbar: 1000;
192 @zindex-dropdown: 1000;
193 @zindex-popover: 1010;
194 @zindex-tooltip: 1030;
195 @zindex-navbar-fixed: 1030;
196 @zindex-modal-background: 1040;
199 // Media queries breakpoints
200 // --------------------------------------------------
202 // Extra small screen / phone
204 @screen-phone: @screen-xs;
206 // Small screen / tablet
208 @screen-tablet: @screen-sm;
210 // Medium screen / desktop
212 @screen-desktop: @screen-md;
214 // Large screen / wide desktop
216 @screen-lg-desktop: @screen-lg;
218 // So media queries don't overlap when required, provide a maximum
219 @screen-xs-max: (@screen-sm - 1);
220 @screen-sm-max: (@screen-md - 1);
221 @screen-md-max: (@screen-lg - 1);
225 // --------------------------------------------------
227 // Number of columns in the grid system
229 // Padding, to be divided by two and applied to the left and right of all columns
230 @grid-gutter-width: 30px;
231 // Point at which the navbar stops collapsing
232 @grid-float-breakpoint: @screen-tablet;
236 // -------------------------
238 // Basics of a navbar
239 @navbar-height: 50px;
240 @navbar-margin-bottom: @line-height-computed;
241 @navbar-default-color: @text-color;
242 @navbar-default-bg: @body-bg;
243 @navbar-default-border: darken(@navbar-default-bg, 6.5%);
244 @navbar-border-radius: @border-radius-base;
245 @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
246 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
249 @navbar-default-link-color: @text-color;
250 @navbar-default-link-hover-color: #fff;
251 @navbar-default-link-hover-bg: transparent;
252 @navbar-default-link-active-color: #fff;
253 @navbar-default-link-active-bg: transparent;
254 @navbar-default-link-disabled-color: @gray-light;
255 @navbar-default-link-disabled-bg: transparent;
257 // Navbar brand label
258 @navbar-default-brand-color: #fff;
259 @navbar-default-brand-hover-color: #fff;
260 @navbar-default-brand-hover-bg: transparent;
263 @navbar-default-toggle-hover-bg: @gray-dark;
264 @navbar-default-toggle-icon-bar-bg: #ccc;
265 @navbar-default-toggle-border-color: @gray-dark;
270 // Reset inverted navbar basics
271 @navbar-inverse-color: @gray-light;
272 @navbar-inverse-bg: @gray-darker;
273 @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
275 // Inverted navbar links
276 @navbar-inverse-link-color: @gray-light;
277 @navbar-inverse-link-hover-color: #fff;
278 @navbar-inverse-link-hover-bg: transparent;
279 @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
280 @navbar-inverse-link-active-bg: transparent;
281 @navbar-inverse-link-disabled-color: #aaa;
282 @navbar-inverse-link-disabled-bg: transparent;
284 // Inverted navbar brand label
285 @navbar-inverse-brand-color: #fff;
286 @navbar-inverse-brand-hover-color: #fff;
287 @navbar-inverse-brand-hover-bg: transparent;
289 // Inverted navbar search
290 // Normal navbar needs no special styles or vars
291 @navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
292 @navbar-inverse-search-bg-focus: #fff;
293 @navbar-inverse-search-border: @navbar-inverse-bg;
294 @navbar-inverse-search-placeholder-color: #ccc;
296 // Inverted navbar toggle
297 @navbar-inverse-toggle-hover-bg: #333;
298 @navbar-inverse-toggle-icon-bar-bg: #fff;
299 @navbar-inverse-toggle-border-color: #333;
303 // -------------------------
305 @nav-link-padding: 10px 15px;
306 @nav-link-hover-bg: @gray-darker;
308 @nav-disabled-link-color: @gray-light;
309 @nav-disabled-link-hover-color: @gray-light;
311 @nav-open-link-hover-color: @gray-darker;
312 @nav-open-caret-border-color: #fff;
315 @nav-tabs-border-color: @gray-dark;
317 @nav-tabs-link-hover-border-color: transparent;
319 @nav-tabs-active-link-hover-bg: @brand-primary;
320 @nav-tabs-active-link-hover-color: #fff;
321 @nav-tabs-active-link-hover-border-color: @gray-dark;
323 @nav-tabs-justified-link-border-color: #ddd;
324 @nav-tabs-justified-active-link-border-color: @body-bg;
327 @nav-pills-active-link-hover-bg: @component-active-bg;
328 @nav-pills-active-link-hover-color: #fff;
332 // -------------------------
334 @pagination-bg: @gray-darker;
335 @pagination-border: @gray-dark;
337 @pagination-hover-bg: @gray-lighter;
339 @pagination-active-bg: @brand-primary;
340 @pagination-active-color: #fff;
342 @pagination-disabled-color: @gray-light;
346 // -------------------------
348 @pager-border-radius: 15px;
349 @pager-disabled-color: @gray-light;
353 // -------------------------
355 @jumbotron-padding: 30px;
356 @jumbotron-color: inherit;
357 @jumbotron-bg: darken(@gray-darker, 5%);
359 @jumbotron-heading-color: inherit;
362 // Form states and alerts
363 // -------------------------
365 @state-warning-text: #fff;
366 @state-warning-bg: @brand-warning;
367 @state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
369 @state-danger-text: #fff;
370 @state-danger-bg: @brand-danger;
371 @state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
373 @state-success-text: #fff;
374 @state-success-bg: @brand-success;
375 @state-success-border: darken(spin(@state-success-bg, -10), 5%);
377 @state-info-text: #fff;
378 @state-info-bg: @brand-info;
379 @state-info-border: darken(spin(@state-info-bg, -10), 7%);
383 // -------------------------
384 @tooltip-max-width: 200px;
385 @tooltip-color: #fff;
386 @tooltip-bg: rgba(0,0,0,.9);
388 @tooltip-arrow-width: 5px;
389 @tooltip-arrow-color: @tooltip-bg;
393 // -------------------------
395 @popover-max-width: 276px;
396 @popover-border-color: rgba(0,0,0,.2);
397 @popover-fallback-border-color: #ccc;
399 @popover-title-bg: darken(@popover-bg, 3%);
401 @popover-arrow-width: 10px;
402 @popover-arrow-color: #fff;
404 @popover-arrow-outer-width: (@popover-arrow-width + 1);
405 @popover-arrow-outer-color: rgba(0,0,0,.25);
406 @popover-arrow-outer-fallback-color: #999;
410 // -------------------------
412 @label-default-bg: @btn-default-bg;
413 @label-primary-bg: @brand-primary;
414 @label-success-bg: @brand-success;
415 @label-info-bg: @brand-info;
416 @label-warning-bg: @brand-warning;
417 @label-danger-bg: @brand-danger;
420 @label-link-hover-color: #fff;
424 // -------------------------
425 @modal-inner-padding: 20px;
427 @modal-title-padding: 15px;
428 @modal-title-line-height: @line-height-base;
430 @modal-content-bg: lighten(@body-bg, 5%);
431 @modal-content-border-color: rgba(0,0,0,.2);
432 @modal-content-fallback-border-color: #999;
434 @modal-backdrop-bg: #000;
435 @modal-header-border-color: @gray-dark;
436 @modal-footer-border-color: @modal-header-border-color;
440 // -------------------------
441 @alert-padding: 15px;
442 @alert-border-radius: @border-radius-base;
443 @alert-link-font-weight: bold;
445 @alert-success-bg: @state-success-bg;
446 @alert-success-text: @state-success-text;
447 @alert-success-border: @state-success-border;
449 @alert-info-bg: @state-info-bg;
450 @alert-info-text: @state-info-text;
451 @alert-info-border: @state-info-border;
453 @alert-warning-bg: @state-warning-bg;
454 @alert-warning-text: @state-warning-text;
455 @alert-warning-border: @state-warning-border;
457 @alert-danger-bg: @state-danger-bg;
458 @alert-danger-text: @state-danger-text;
459 @alert-danger-border: @state-danger-border;
463 // -------------------------
464 @progress-bg: @gray-darker;
465 @progress-bar-color: #fff;
467 @progress-bar-bg: @brand-primary;
468 @progress-bar-success-bg: @brand-success;
469 @progress-bar-warning-bg: @brand-warning;
470 @progress-bar-danger-bg: @brand-danger;
471 @progress-bar-info-bg: @brand-info;
475 // -------------------------
476 @list-group-bg: @gray-darker;
477 @list-group-border: @gray-dark;
478 @list-group-border-radius: @border-radius-base;
480 @list-group-hover-bg: lighten(@list-group-bg, 15%);
481 @list-group-active-color: #fff;
482 @list-group-active-bg: @component-active-bg;
483 @list-group-active-border: @list-group-active-bg;
485 @list-group-link-color: @text-color;
486 @list-group-link-heading-color: #fff;
490 // -------------------------
491 @panel-bg: @gray-darker;
492 @panel-inner-border: @gray-dark;
493 @panel-border-radius: @border-radius-base;
494 @panel-footer-bg: @panel-default-heading-bg;
496 @panel-default-text: @gray-dark;
497 @panel-default-border: @panel-inner-border;
498 @panel-default-heading-bg: lighten(@gray-darker, 10%);
500 @panel-primary-text: #fff;
501 @panel-primary-border: @brand-primary;
502 @panel-primary-heading-bg: @brand-primary;
504 @panel-success-text: @state-success-text;
505 @panel-success-border: @state-success-border;
506 @panel-success-heading-bg: @state-success-bg;
508 @panel-warning-text: @state-warning-text;
509 @panel-warning-border: @state-warning-border;
510 @panel-warning-heading-bg: @state-warning-bg;
512 @panel-danger-text: @state-danger-text;
513 @panel-danger-border: @state-danger-border;
514 @panel-danger-heading-bg: @state-danger-bg;
516 @panel-info-text: @state-info-text;
517 @panel-info-border: @state-info-border;
518 @panel-info-heading-bg: @state-info-bg;
522 // -------------------------
523 @thumbnail-padding: 4px;
524 @thumbnail-bg: @body-bg;
525 @thumbnail-border: #ddd;
526 @thumbnail-border-radius: @border-radius-base;
528 @thumbnail-caption-color: @text-color;
529 @thumbnail-caption-padding: 9px;
533 // -------------------------
534 @well-bg: darken(@gray-darker, 5%);
538 // -------------------------
540 @badge-link-hover-color: #fff;
541 @badge-bg: @brand-primary;
543 @badge-active-color: @brand-primary;
544 @badge-active-bg: #fff;
546 @badge-font-weight: bold;
547 @badge-line-height: 1;
548 @badge-border-radius: 10px;
552 // -------------------------
553 @breadcrumb-bg: @gray-darker;
554 @breadcrumb-color: #fff;
555 @breadcrumb-active-color: @text-color;
559 // ------------------------
561 @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
563 @carousel-control-color: #fff;
564 @carousel-control-width: 15%;
565 @carousel-control-opacity: .5;
566 @carousel-control-font-size: 20px;
568 @carousel-indicator-active-bg: #fff;
569 @carousel-indicator-border-color: #fff;
571 @carousel-caption-color: #fff;
575 // ------------------------
577 @close-font-weight: bold;
578 @close-text-shadow: 0 1px 0 #fff;
582 // ------------------------
583 @code-color: #c7254e;
587 @pre-color: @gray-dark;
588 @pre-border-color: #ccc;
589 @pre-scrollable-max-height: 340px;
592 // ------------------------
593 @text-muted: @gray-light;
594 @abbr-border-color: @gray-light;
595 @headings-small-color: @gray-light;
596 @blockquote-small-color: @gray;
597 @blockquote-border-color: @gray-dark;
598 @page-header-border-color: @gray-dark;
601 // -------------------------
604 @hr-border: @gray-dark;
606 // Horizontal forms & lists
607 @component-offset-horizontal: 180px;
611 // --------------------------------------------------
613 // Small screen / tablet
614 @container-tablet: ((720px + @grid-gutter-width));
616 // Medium screen / desktop
617 @container-desktop: ((940px + @grid-gutter-width));
619 // Large screen / wide desktop
620 @container-lg-desktop: ((1140px + @grid-gutter-width));