variables.less 9.08 KB
Newer Older
Thomas Park's avatar
Thomas Park committed
1
// Journal 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
13
@black:                 #000;
@grayDarker:            #222;
14
@grayDark:              #777;
15
16
@gray:                  #999;
@grayLight:             #bbb;
Thomas Park's avatar
Thomas Park committed
17
18
19
@grayLighter:           #eee;
@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:                  #369;
@blueDark:              darken(@blue, 15%);
@green:                 #22B24C;
@red:                   #C00;
@yellow:                #FCFADB;
@orange:                #FF7F00;
@pink:                  #CC99CC;
@purple:                #7a43b6;

Thomas Park's avatar
Thomas Park committed
32
33
34

// Scaffolding
// -------------------------
35
36
@bodyBackground:        @white;
@textColor:             @grayDark;
Thomas Park's avatar
Thomas Park committed
37
38
39
40
41


// Links
// -------------------------
@linkColor:             @textColor;
42
@linkColorHover:        @linkColor;
Thomas Park's avatar
Thomas Park committed
43
44


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

Thomas Park's avatar
Thomas Park committed
51
@baseFontSize:          14px;
52
@baseFontFamily:        @serifFontFamily;
Thomas Park's avatar
Thomas Park committed
53
@baseLineHeight:        20px;
54
@altFontFamily:         @sansFontFamily;
Thomas Park's avatar
Thomas Park committed
55

56
@headingsFontFamily:    @sansFontFamily; // empty to use BS default, @baseFontFamily
Thomas Park's avatar
Thomas Park committed
57
@headingsFontWeight:    bold;    // instead of browser default, bold
58
@headingsColor:         @black; // empty to use BS default, @textColor
Thomas Park's avatar
Thomas Park committed
59

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
// Tables
// -------------------------
@tableBackground:                   transparent; // overall background-color
81
82
@tableBackgroundAccent:             #f5f5f5; // for striping
@tableBackgroundHover:              @grayLighter; // for hover
Thomas Park's avatar
Thomas Park committed
83
84
@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
// -------------------------
@btnBackground:                     @white;
@btnBackgroundHighlight:            darken(@white, 10%);
89
@btnBorder:                         darken(@white, 15%);
Thomas Park's avatar
Thomas Park committed
90

91
92
@btnPrimaryBackground:              lighten(@linkColor, 5%);
@btnPrimaryBackgroundHighlight:     @linkColor;
Thomas Park's avatar
Thomas Park committed
93

94
95
@btnInfoBackground:                 lighten(@blue, 5%);
@btnInfoBackgroundHighlight:        @blue;
Thomas Park's avatar
Thomas Park committed
96

97
98
@btnSuccessBackground:              lighten(@green, 5%);
@btnSuccessBackgroundHighlight:     @green;
Thomas Park's avatar
Thomas Park committed
99

Thomas Park's avatar
Thomas Park committed
100
@btnWarningBackground:              lighten(@orange, 10%);
Thomas Park's avatar
Thomas Park committed
101
102
@btnWarningBackgroundHighlight:     @orange;

103
104
@btnDangerBackground:               lighten(@red, 10%);
@btnDangerBackgroundHighlight:      @red;
Thomas Park's avatar
Thomas Park committed
105

106
107
@btnInverseBackground:              lighten(@grayDark, 5%);
@btnInverseBackgroundHighlight:     @grayDark;
Thomas Park's avatar
Thomas Park committed
108
109
110
111
112
113


// 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:         @grayLighter;
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:            @bodyBackground;
@dropdownBorder:                rgba(0,0,0,.2);
Thomas Park's avatar
Thomas Park committed
124
125
126
@dropdownDividerTop:            @grayLighter;
@dropdownDividerBottom:         @grayLighter;

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

Thomas Park's avatar
Thomas Park committed
131
@dropdownLinkBackgroundActive:  @dropdownLinkBackgroundHover;
132
@dropdownLinkBackgroundHover:   @grayLighter;
Thomas Park's avatar
Thomas Park committed
133
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
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
Thomas Park's avatar
Thomas Park committed
144
145
146
147
148
149
150
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1020;
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

Thomas Park's avatar
Thomas Park committed
151

152
// Sprite icons path
Thomas Park's avatar
Thomas Park committed
153
// -------------------------
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
// -------------------------
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:                  @grayLighter;


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:                    60px;
Thomas Park's avatar
Thomas Park committed
184
@navbarBackgroundHighlight:       @bodyBackground;
185
@navbarBackground:                @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
190
191
192
193
@navbarLinkColor:                 @headingsColor;
@navbarLinkColorHover:            @headingsColor;
@navbarLinkColorActive:           @headingsColor;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      transparent;
Thomas Park's avatar
Thomas Park committed
194

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:                #111111;
@navbarInverseBackgroundHighlight:       #222222;
@navbarInverseBorder:                    #252525;

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

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

@navbarInverseBrandColor:                @navbarInverseLinkColor;


// Pagination
// -------------------------
@paginationBackground:                @bodyBackground;
@paginationBorder:                    #ddd;
@paginationActiveBackground:          @grayLighter;

Thomas Park's avatar
Thomas Park committed
223
224
225
226

// Hero unit
// -------------------------
@heroUnitBackground:              @grayLighter;
Thomas Park's avatar
Thomas Park committed
227
@heroUnitHeadingColor:            @headingsColor;
Thomas Park's avatar
Thomas Park committed
228
229
@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);