variables.less 9.04 KB
Newer Older
Thomas Park's avatar
Thomas Park committed
1
// Readable 2.2.1
Thomas Park's avatar
Thomas Park committed
2
3
4
// Variables
// --------------------------------------------------

Thomas Park's avatar
Thomas Park committed
5

Thomas Park's avatar
Thomas Park committed
6
// Global values
Thomas Park's avatar
Thomas Park committed
7
8
9
10
// --------------------------------------------------


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

Thomas Park's avatar
Thomas Park committed
20

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

Thomas Park's avatar
Thomas Park committed
32
33
34

// Scaffolding
// -------------------------
35
36
@bodyBackground:        #FAFDFA;
@textColor:             @grayDarker;
Thomas Park's avatar
Thomas Park committed
37
38
39
40
41
42
43
44


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


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

51
@baseFontSize:          16px;
52
@baseFontFamily:        @serifFontFamily;
53
@baseLineHeight:        1.4em;
54
@altFontFamily:         @serifFontFamily;
Thomas Park's avatar
Thomas Park committed
55
56
57
58
59

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

Thomas Park's avatar
Thomas Park committed
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
@fontSizeMini:          @baseFontSize * 0.75; // ~11px

@paddingLarge:          11px 19px; // 44px
@paddingSmall:          2px 10px;  // 26px
@paddingMini:           1px 6px;   // 24px

@baseBorderRadius:      4px;
@borderRadiusLarge:     6px;
@borderRadiusSmall:     3px;


Thomas Park's avatar
Thomas Park committed
78
79
80
81
82
83
84
// 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
85
// Buttons
Thomas Park's avatar
Thomas Park committed
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// -------------------------
@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;
Thomas Park's avatar
Thomas Park committed
114
@inputBorderRadius:             @baseBorderRadius;
Thomas Park's avatar
Thomas Park committed
115
@inputDisabledBackground:       @grayLighter;
116
@formActionsBackground:         transparent;
Thomas Park's avatar
Thomas Park committed
117
118
@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border

Thomas Park's avatar
Thomas Park committed
119
120
121
122
123

// Dropdowns
// -------------------------
@dropdownBackground:            @white;
@dropdownBorder:                rgba(0,0,0,.2);
Thomas Park's avatar
Thomas Park committed
124
125
@dropdownDividerTop:            #e5e5e5;
@dropdownDividerBottom:         @white;
Thomas Park's avatar
Thomas Park committed
126

Thomas Park's avatar
Thomas Park committed
127
128
129
@dropdownLinkColor:             @linkColor;
@dropdownLinkColorHover:        @linkColorHover;
@dropdownLinkColorActive:       @dropdownLinkColor;
130

Thomas Park's avatar
Thomas Park committed
131
@dropdownLinkBackgroundActive:  @linkColor;
132
@dropdownLinkBackgroundHover:   rgba(255,255,255,0);
Thomas Park's avatar
Thomas Park committed
133

Thomas Park's avatar
Thomas Park committed
134
135
136
137
138


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

Thomas Park's avatar
Thomas Park committed
139

Thomas Park's avatar
Thomas Park committed
140
// Z-index master list
Thomas Park's avatar
Thomas Park committed
141
// -------------------------
Thomas Park's avatar
Thomas Park committed
142
143
144
145
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
Thomas Park's avatar
Thomas Park committed
146
@zindexTooltip:           1030;
Thomas Park's avatar
Thomas Park committed
147
148
149
150
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

Thomas Park's avatar
Thomas Park committed
151

Thomas Park's avatar
Thomas Park committed
152
// Sprite icons path
Thomas Park's avatar
Thomas Park committed
153
// -------------------------
Thomas Park's avatar
Thomas Park committed
154
155
156
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

Thomas Park's avatar
Thomas Park committed
157

Thomas Park's avatar
Thomas Park committed
158
// Input placeholder text color
Thomas Park's avatar
Thomas Park committed
159
160
161
// -------------------------
@placeholderText:         @grayLight;

Thomas Park's avatar
Thomas Park committed
162
163

// Hr border color
Thomas Park's avatar
Thomas Park committed
164
// -------------------------
Thomas Park's avatar
Thomas Park committed
165
166
@hrBorder:                @grayLighter;

Thomas Park's avatar
Thomas Park committed
167

168
169
170
171
172
// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset:       180px;


Thomas Park's avatar
Thomas Park committed
173
174
175
176
177
// Wells
// -------------------------
@wellBackground:                  @white;


Thomas Park's avatar
Thomas Park committed
178
// Navbar
Thomas Park's avatar
Thomas Park committed
179
// -------------------------
Thomas Park's avatar
Thomas Park committed
180
@navbarCollapseWidth:             979px;
Thomas Park's avatar
Thomas Park committed
181
@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
Thomas Park's avatar
Thomas Park committed
182

183
@navbarHeight:                    50px;
Thomas Park's avatar
Thomas Park committed
184
185
@navbarBackground:                @bodyBackground;
@navbarBackgroundHighlight:       @bodyBackground;
Thomas Park's avatar
Thomas Park committed
186
@navbarBorder:                    darken(@navbarBackground, 12%);
Thomas Park's avatar
Thomas Park committed
187
188

@navbarText:                      @textColor;
189
@navbarLinkColor:                 @textColor;
Thomas Park's avatar
Thomas Park committed
190
191
@navbarLinkColorHover:            @linkColor;
@navbarLinkColorActive:           @linkColor;
Thomas Park's avatar
Thomas Park committed
192
193
194
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      @navbarBackground;

195
@navbarBrandColor:                @navbarLinkColor;
Thomas Park's avatar
Thomas Park committed
196

Thomas Park's avatar
Thomas Park committed
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
// Inverted navbar
@navbarInverseBackground:                @linkColor;
@navbarInverseBackgroundHighlight:       lighten(@linkColor, 3%);
@navbarInverseBorder:                    darken(@linkColor, 3%);

@navbarInverseText:                      @grayLighter;
@navbarInverseLinkColor:                 @grayLighter;
@navbarInverseLinkColorHover:            @white;
@navbarInverseLinkColorActive:           @white;
@navbarInverseLinkBackgroundHover:       transparent;
@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;

@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus:     @white;
@navbarInverseSearchBorder:              @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor:    @grayLighter;

@navbarInverseBrandColor:                @navbarInverseLinkColor;


// Pagination
// -------------------------
@paginationBackground:                #fff;
@paginationBorder:                    #ddd;
@paginationActiveBackground:          #f5f5f5;

Thomas Park's avatar
Thomas Park committed
223
224
225
226
227
228
229

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

Thomas Park's avatar
Thomas Park committed
230
231

// Form states and alerts
Thomas Park's avatar
Thomas Park committed
232
// -------------------------
Thomas Park's avatar
Thomas Park committed
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
@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%);


Thomas Park's avatar
Thomas Park committed
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
// Tooltips and popovers
// -------------------------
@tooltipColor:            #fff;
@tooltipBackground:       #000;
@tooltipArrowWidth:       5px;
@tooltipArrowColor:       @tooltipBackground;

@popoverBackground:       #fff;
@popoverArrowWidth:       10px;
@popoverArrowColor:       #fff;
@popoverTitleBackground:  darken(@popoverBackground, 3%);

// Special enhancement for popovers
@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
@popoverArrowOuterColor:  rgba(0,0,0,.25);


Thomas Park's avatar
Thomas Park committed
267
268
269
270

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

Thomas Park's avatar
Thomas Park committed
271

Thomas Park's avatar
Thomas Park committed
272
// Default 940px grid
Thomas Park's avatar
Thomas Park committed
273
// -------------------------
Thomas Park's avatar
Thomas Park committed
274
275
276
277
278
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Thomas Park's avatar
Thomas Park committed
279
280
281
282
283
284
285
286
287
288
289
// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));


Thomas Park's avatar
Thomas Park committed
290
// Fluid grid
Thomas Park's avatar
Thomas Park committed
291
// -------------------------
Thomas Park's avatar
Thomas Park committed
292
293
294
295
296
297
298
299
300
301
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);