Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
variables.less 7.78 KiB
1 
//
2 
// Variables
3 
// --------------------------------------------------
4
5
6 
// Global values
7 
// --------------------------------------------------
8
9
10 
// Grays
11 
// -------------------------
12 
@grayDarker:            #222;
13 
@grayDark:              #333;
14 
@gray:                  #555;
15 
@grayLight:             #999;
16 
@grayLighter:           #eee;
17
18
19 
// Scaffolding
20 
// -------------------------
21
22 
@body-background:         #fff;
23 
@text-color:              @grayDark;
24
25
26 
// Links
27 
// -------------------------
28
29 
@link-color:              #08c;
30 
@link-color-hover:        darken(@link-color, 15%);
31
32
33 
// Typography
34 
// -------------------------
35
36 
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
37 
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
38 
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
39 
@font-family-base:        @font-family-sans-serif;
40
41 
@font-size-base:          14px;
42 
@font-size-large:         @font-size-base * 1.25; // ~18px
43 
@font-size-small:         @font-size-base * 0.85; // ~12px
44 
@font-size-mini:          @font-size-base * 0.75; // ~11px
45
46 
@line-height-base:        20px;
47
48 
@headings-font-family:    inherit; // empty to use BS default, @font-family-base
49 
@headings-font-weight:    bold;    // instead of browser default, bold
50
51
52 
// Component sizing
53 
// -------------------------
54 
// Based on 14px font-size and 1.5 line-height
55
56 
@padding-large:           11px 19px; // 44px
57 
@padding-small:           2px 10px;  // 26px
58 
@padding-mini:            0 6px;   // 22px
59
60 
@border-radius-base:      4px;
61 
@border-radius-large:     6px;
62 
@border-radius-small:     3px;
63
64
65 
// Tables
66 
// -------------------------
67
68 
@table-background:                   transparent; // overall background-color
69 
@table-background-accent:            #f9f9f9; // for striping
70 
@table-background-hover:             #f5f5f5; // for hover
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
@table-border: #ddd; // table and cell border // Buttons // ------------------------- @btn-background: #fff; @btn-background-highlight: #eaeaea; @btn-background-primary: @link-color; @btn-background-primary-highlight: darken(@link-color, 10%); @btn-background-success: #62c462; @btn-background-success-highlight: #51a351; @btn-background-warning: lighten(#f89406, 15%); @btn-background-warning-highlight: #f89406; @btn-background-danger: #ee5f5b; @btn-background-danger-highlight: #bd362f; // Forms // ------------------------- @input-background: #fff; @input-background-disabled: @grayLighter; @input-border: #ccc; @input-border-radius: @border-radius-base; @input-border-radius-search: 20px; @input-color-placeholder: @grayLight; @input-height: @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border @form-actions-background: #f5f5f5; // Dropdowns // ------------------------- @dropdown-background: #fff; @dropdown-border: rgba(0,0,0,.2); @dropdown-divider-top: #e5e5e5; @dropdown-divider-bottom: #fff; @dropdown-link-color: @grayDark; @dropdown-link-color-hover: #fff; @dropdown-link-color-active: #fff; @dropdown-link-background-active: @link-color; @dropdown-link-background-hover: @dropdown-link-background-active; // COMPONENT VARIABLES // -------------------------------------------------- // Z-index master list // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) @zindex-dropdown: 1000; @zindex-popover: 1010; @zindex-tooltip: 1030; @zindex-navbar-fixed: 1030;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
@zindex-modal-background: 1040; @zindex-modal: 1050; // Navbar // ------------------------- @navbar-collapse-width: 979px; @navbar-collapse-width-desktop: @navbar-collapse-width + 1; @navbar-height: 44px; @navbar-background-highlight: #ffffff; @navbar-background: darken(@navbar-background-highlight, 5%); @navbar-border: darken(@navbar-background, 12%); @navbar-text: #777; @navbar-link-color: #777; @navbar-link-color-hover: @grayDark; @navbar-link-color-active: @gray; @navbar-link-background-hover: transparent; @navbar-link-background-active: darken(@navbar-background, 5%); @navbar-brand-color: @navbar-link-color; // Inverted navbar @navbar-inverse-background: #111111; @navbar-inverse-background-highlight: #222222; @navbar-inverse-border: #111111; @navbar-inverse-text: @grayLight; @navbar-inverse-link-color: @grayLight; @navbar-inverse-link-color-hover: #fff; @navbar-inverse-link-color-active: @navbar-inverse-link-color-hover; @navbar-inverse-link-background-hover: transparent; @navbar-inverse-link-background-active: @navbar-inverse-background; @navbar-inverse-search-background: lighten(@navbar-inverse-background, 25%); @navbar-inverse-search-background-focus: #fff; @navbar-inverse-search-border: @navbar-inverse-background; @navbar-inverse-search-placeholder-color: #ccc; @navbar-inverse-brand-color: @navbar-inverse-link-color; // Pagination // ------------------------- @pagination-background: #fff; @pagination-background-active: #f5f5f5; @pagination-border: #ddd; // Jumbotron // ------------------------- @jumbotron-background: @grayLighter; @jumbotron-heading-color: inherit; @jumbotron-lead-color: inherit; // Form states and alerts // ------------------------- @state-warning-text: #c09853; @state-warning-background: #fcf8e3; @state-warning-border: darken(spin(@state-warning-background, -10), 3%); @state-error-text: #b94a48; @state-error-background: #f2dede; @state-error-border: darken(spin(@state-error-background, -10), 3%);
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
@state-success-text: #468847; @state-success-background: #dff0d8; @state-success-border: darken(spin(@state-success-background, -10), 5%); @state-info-text: #3a87ad; @state-info-background: #d9edf7; @state-info-border: darken(spin(@state-info-background, -10), 7%); // Tooltips and popovers // ------------------------- @tooltip-color: #fff; @tooltip-background: rgba(0,0,0,.9); @tooltip-arrow-width: 5px; @tooltip-arrow-color: @tooltip-background; @popover-background: #fff; @popover-arrow-width: 10px; @popover-arrow-color: #fff; @popover-title-background: darken(@popover-background, 3%); // Special enhancement for popovers @popover-arrow-outer-width: @popover-arrow-width + 1; @popover-arrow-outer-color: rgba(0,0,0,.25); // Miscellaneous // ------------------------- // Hr border color @hr-border: @grayLighter; // Horizontal forms & lists @component-offset-horizontal: 180px; // Wells @well-background: #f5f5f5; // GRID // -------------------------------------------------- // Default 940px grid @grid-columns: 12; @grid-column-width: 60px; @grid-gutter-width: 20px; @grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1)); // 1200px min @grid-column-width-1200: 70px; @grid-gutter-width-1200: 30px; @grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1)); // 768px-979px @grid-column-width-768: 42px; @grid-gutter-width-768: 20px; @grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));