variables.less 5.94 KB
Newer Older
Thomas Park's avatar
Thomas Park committed
1
2
// Variables.less
// Variables to customize the look and feel of Bootstrap
Thomas Park's avatar
Thomas Park committed
3
// Swatch: Readable
4
// Version: 2.0.3
Thomas Park's avatar
Thomas Park committed
5
6
7
8
9
10
11
// -----------------------------------------------------

// GLOBAL VALUES
// --------------------------------------------------


// Grays
Thomas Park's avatar
Thomas Park committed
12
// -------------------------
Thomas Park's avatar
Thomas Park committed
13
14
15
16
17
18
19
20
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #777;
@grayLight:             #999;
@grayLighter:           #CDCDCD;
@white:                 #fff;

Thomas Park's avatar
Thomas Park committed
21

Thomas Park's avatar
Thomas Park committed
22
// Accent colors
Thomas Park's avatar
Thomas Park committed
23
// -------------------------
Thomas Park's avatar
Thomas Park committed
24
25
26
27
28
29
30
31
32
@blue:                  #049cdb;
@blueDark:              #0064cd;
@green:                 #46a546;
@red:                   #9C0001;
@yellow:                #ffc40d;
@orange:                #f89406;
@pink:                  #c3325f;
@purple:                #7a43b6;

Thomas Park's avatar
Thomas Park committed
33
34
35
36
37
38
39
40
41
42
43
44
45

// Scaffolding
// -------------------------
@bodyBackground:        #FDFDFA;
@textColor:             #090000;


// Links
// -------------------------
@linkColor:             @red;
@linkColorHover:        lighten(@linkColor, 8%);


Thomas Park's avatar
Thomas Park committed
46
// Typography
Thomas Park's avatar
Thomas Park committed
47
// -------------------------
48
49
50
51
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;

52
@baseFontSize:          17px;
53
@baseFontFamily:        @serifFontFamily;
54
@baseLineHeight:        1.3em;
55
@altFontFamily:         @serifFontFamily;
Thomas Park's avatar
Thomas Park committed
56
57
58
59
60
61
62
63
64
65
66
67
68

@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor


// Tables
// -------------------------
@tableBackground:                   transparent; // overall background-color
@tableBackgroundAccent:             darken(@bodyBackground, 2%); // for striping
@tableBackgroundHover:              darken(@bodyBackground, 4%); // for hover
@tableBorder:                       #ddd; // table and cell border

Thomas Park's avatar
Thomas Park committed
69
70

// Buttons
Thomas Park's avatar
Thomas Park committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
// -------------------------
@btnBackground:                     @white;
@btnBackgroundHighlight:            darken(@white, 10%);
@btnBorder:                         darken(@white, 20%);

@btnPrimaryBackground:              @linkColor;
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);

@btnInfoBackground:                 #5bc0de;
@btnInfoBackgroundHighlight:        #2f96b4;

@btnSuccessBackground:              #62c462;
@btnSuccessBackgroundHighlight:     #51a351;

@btnWarningBackground:              lighten(@orange, 15%);
@btnWarningBackgroundHighlight:     @orange;

@btnDangerBackground:               #ee5f5b;
@btnDangerBackgroundHighlight:      #bd362f;

@btnInverseBackground:              @gray;
@btnInverseBackgroundHighlight:     @grayDarker;


// Forms
// -------------------------
@inputBackground:               @white;
@inputBorder:                   #ccc;
99
@inputBorderRadius:             3px;
Thomas Park's avatar
Thomas Park committed
100
@inputDisabledBackground:       @grayLighter;
101
@formActionsBackground:         transparent;
Thomas Park's avatar
Thomas Park committed
102
103
104
105
106
107
108
109
110

// Dropdowns
// -------------------------
@dropdownBackground:            @white;
@dropdownBorder:                rgba(0,0,0,.2);
@dropdownLinkColor:             @linkColor;
@dropdownLinkColorHover:        @linkColorHover;
@dropdownLinkBackgroundHover:   transparent;

Thomas Park's avatar
Thomas Park committed
111
112
113
114
115
116
117



// COMPONENT VARIABLES
// --------------------------------------------------

// Z-index master list
Thomas Park's avatar
Thomas Park committed
118
// -------------------------
Thomas Park's avatar
Thomas Park committed
119
120
121
122
123
124
125
126
127
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1020;
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

Thomas Park's avatar
Thomas Park committed
128

Thomas Park's avatar
Thomas Park committed
129
// Sprite icons path
Thomas Park's avatar
Thomas Park committed
130
// -------------------------
Thomas Park's avatar
Thomas Park committed
131
132
133
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

Thomas Park's avatar
Thomas Park committed
134

Thomas Park's avatar
Thomas Park committed
135
// Input placeholder text color
Thomas Park's avatar
Thomas Park committed
136
137
138
// -------------------------
@placeholderText:         @grayLight;

Thomas Park's avatar
Thomas Park committed
139
140

// Hr border color
Thomas Park's avatar
Thomas Park committed
141
// -------------------------
Thomas Park's avatar
Thomas Park committed
142
143
@hrBorder:                @grayLighter;

Thomas Park's avatar
Thomas Park committed
144

Thomas Park's avatar
Thomas Park committed
145
// Navbar
Thomas Park's avatar
Thomas Park committed
146
// -------------------------
Thomas Park's avatar
Thomas Park committed
147
@navbarHeight:                    40px;
Thomas Park's avatar
Thomas Park committed
148
149
@navbarBackground:                @bodyBackground;
@navbarBackgroundHighlight:       @bodyBackground;
Thomas Park's avatar
Thomas Park committed
150
151
152
153

@navbarText:                      @textColor;
@navbarLinkColor:                 @linkColor;
@navbarLinkColorHover:            @linkColorHover;
Thomas Park's avatar
Thomas Park committed
154
155
156
157
158
159
160
161
@navbarLinkColorActive:           @linkColorHover;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      @navbarBackground;

@navbarSearchBackground:          lighten(@navbarBackground, 25%);
@navbarSearchBackgroundFocus:     @white;
@navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
@navbarSearchPlaceholderColor:    #ccc;
162
@navbarBrandColor:                @navbarLinkColor;
Thomas Park's avatar
Thomas Park committed
163
164
165
166
167
168
169
170


// Hero unit
// -------------------------
@heroUnitBackground:              @white;
@heroUnitHeadingColor:            inherit;
@heroUnitLeadColor:               inherit;

Thomas Park's avatar
Thomas Park committed
171
172

// Form states and alerts
Thomas Park's avatar
Thomas Park committed
173
// -------------------------
Thomas Park's avatar
Thomas Park committed
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
@warningText:             #c09853;
@warningBackground:       #fcf8e3;
@warningBorder:           darken(spin(@warningBackground, -10), 3%);

@errorText:               #b94a48;
@errorBackground:         #f2dede;
@errorBorder:             darken(spin(@errorBackground, -10), 3%);

@successText:             #468847;
@successBackground:       #dff0d8;
@successBorder:           darken(spin(@successBackground, -10), 5%);

@infoText:                #3a87ad;
@infoBackground:          #d9edf7;
@infoBorder:              darken(spin(@infoBackground, -10), 7%);



// GRID
// --------------------------------------------------

// Default 940px grid
Thomas Park's avatar
Thomas Park committed
196
// -------------------------
Thomas Park's avatar
Thomas Park committed
197
198
199
200
201
202
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// Fluid grid
Thomas Park's avatar
Thomas Park committed
203
// -------------------------
Thomas Park's avatar
Thomas Park committed
204
205
@fluidGridColumnWidth:    6.382978723%;
@fluidGridGutterWidth:    2.127659574%;