variables.less 9 KB
Newer Older
Thomas Park's avatar
Thomas Park committed
1
// Amelia 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:            #111;
Thomas Park's avatar
Thomas Park committed
14
@grayDark:              #444;
Thomas Park's avatar
Thomas Park committed
15
16
17
18
19
@gray:                  #555;
@grayLight:             #aaa;
@grayLighter:           #ddd;
@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
@blue:                  #00BCE1;
@blueDark:              #1269B0;
Thomas Park's avatar
Thomas Park committed
25
@green:                 #48CA3B;
26
@red:                   #AD1D28;
Thomas Park's avatar
Thomas Park committed
27
@yellow:                #DEBB27;
Thomas Park's avatar
Thomas Park committed
28
29
@orange:                #DF6E1E;
@pink:                  #FFBCB9;
Thomas Park's avatar
Thomas Park committed
30
@purple:                #4D3A7D;
Thomas Park's avatar
Thomas Park committed
31

Thomas Park's avatar
Thomas Park committed
32
33
34
35

// Scaffolding
// -------------------------
@bodyBackground:        #003F4D;
36
@textColor:             rgba(255, 255, 255, 0.9);
Thomas Park's avatar
Thomas Park committed
37
38
39
40
41
42
43
44


// Links
// -------------------------
@linkColor:             lighten(@yellow, 15%);
@linkColorHover:        @linkColor;


Thomas Park's avatar
Thomas Park committed
45
// Typography
Thomas Park's avatar
Thomas Park committed
46
// -------------------------
47
48
49
50
@sansFontFamily:        'Cabin', Verdana, sans-serif;
@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:        @sansFontFamily;
Thomas Park's avatar
Thomas Park committed
53
@baseLineHeight:        20px;
54
@altFontFamily:         @serifFontFamily;
Thomas Park's avatar
Thomas Park committed
55
56
57
58
59

@headingsFontFamily:    'Lobster', cursive; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    normal;    // 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:      0;
@borderRadiusLarge:     6px;
@borderRadiusSmall:     3px;


Thomas Park's avatar
Thomas Park committed
78
79
80
81
// Tables
// -------------------------
@tableBackground:                   lighten(#147E88, 10%); // overall background-color
@tableBackgroundAccent:             lighten(#147E88, 15%); // for striping
82
@tableBackgroundHover:              rgba(255, 255, 255, 0.4); // for hover
Thomas Park's avatar
Thomas Park committed
83
84
@tableBorder:                       lighten(#147E88, 12%); // 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
// -------------------------
@btnBackground:                     @grayLighter;
@btnBackgroundHighlight:            @grayLighter;
@btnBorder:                         rgba(0, 0, 0, 0);

@btnPrimaryBackground:              @navbarBackground;
92
@btnPrimaryBackgroundHighlight:     @navbarBackground;
Thomas Park's avatar
Thomas Park committed
93
94
95
96
97
98
99
100
101
102

@btnInfoBackground:                 @purple;
@btnInfoBackgroundHighlight:        @purple;

@btnSuccessBackground:              @green;
@btnSuccessBackgroundHighlight:     @green;

@btnWarningBackground:              @orange;
@btnWarningBackgroundHighlight:     @orange;

Thomas Park's avatar
Thomas Park committed
103
104
@btnDangerBackground:               @yellow;
@btnDangerBackgroundHighlight:      @yellow;
Thomas Park's avatar
Thomas Park committed
105
106
107
108
109
110
111
112
113

@btnInverseBackground:              #27666D;
@btnInverseBackgroundHighlight:     #27666D;


// Forms
// -------------------------
@inputBackground:               @white;
@inputBorder:                   transparent;
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
@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
Thomas Park's avatar
Thomas Park committed
118
119
120
121
122

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

Thomas Park's avatar
Thomas Park committed
126
127
128
@dropdownLinkColor:             @grayDark;
@dropdownLinkColorHover:        @white;
@dropdownLinkColorActive:       @dropdownLinkColor;
129

Thomas Park's avatar
Thomas Park committed
130
@dropdownLinkBackgroundActive:  @red;
131
@dropdownLinkBackgroundHover:   @red;
Thomas Park's avatar
Thomas Park committed
132

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


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

Thomas Park's avatar
Thomas Park committed
138

Thomas Park's avatar
Thomas Park committed
139
// Z-index master list
Thomas Park's avatar
Thomas Park committed
140
// -------------------------
Thomas Park's avatar
Thomas Park committed
141
142
143
144
145
146
147
148
149
// 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
150

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

Thomas Park's avatar
Thomas Park committed
156

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

Thomas Park's avatar
Thomas Park committed
161

Thomas Park's avatar
Thomas Park committed
162
// Hr border color
Thomas Park's avatar
Thomas Park committed
163
// -------------------------
Thomas Park's avatar
Thomas Park committed
164
165
@hrBorder:                transparent;

Thomas Park's avatar
Thomas Park committed
166

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


Thomas Park's avatar
Thomas Park committed
172
173
174
175
176
// Wells
// -------------------------
@wellBackground:                  #3CB9C6;


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

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

Thomas Park's avatar
Thomas Park committed
187
188
@navbarText:                      @white;
@navbarLinkColor:                 @white;
Thomas Park's avatar
Thomas Park committed
189
@navbarLinkColorHover:            @white;
Thomas Park's avatar
Thomas Park committed
190
191
192
193
@navbarLinkColorActive:           @navbarLinkColorHover;
@navbarLinkBackgroundHover:       lighten(@navbarBackground, 10%);
@navbarLinkBackgroundActive:      lighten(@navbarBackground, 10%);

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

Thomas Park's avatar
Thomas Park committed
196
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
// Inverted navbar
@navbarInverseBackground:                @yellow;
@navbarInverseBackgroundHighlight:       @yellow;
@navbarInverseBorder:                    rgba(0, 0, 0, 0.1);

@navbarInverseText:                      @white;
@navbarInverseLinkColor:                 @white;
@navbarInverseLinkColorHover:            @white;
@navbarInverseLinkColorActive:           @white;
@navbarInverseLinkBackgroundHover:       rgba(255, 255, 255, 0.2);
@navbarInverseLinkBackgroundActive:      rgba(255, 255, 255, 0.2);

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

@navbarInverseBrandColor:                @navbarInverseLinkColor;


// Pagination
// -------------------------
@paginationBackground:                #3CB9C6;
@paginationBorder:                    transparent;
@paginationActiveBackground:          rgba(255, 255, 255, 0.4);

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

// Hero unit
// -------------------------
@heroUnitBackground:              #3CB9C6;
@heroUnitHeadingColor:            inherit;
@heroUnitLeadColor:               inherit;

Thomas Park's avatar
Thomas Park committed
229
230

// Form states and alerts
Thomas Park's avatar
Thomas Park committed
231
// -------------------------
Thomas Park's avatar
Thomas Park committed
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
@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
249
250
251
252
253
254
255
256
257
258
// Tooltips and popovers
// -------------------------
@tooltipColor:            #fff;
@tooltipBackground:       #000;
@tooltipArrowWidth:       5px;
@tooltipArrowColor:       @tooltipBackground;

@popoverBackground:       #fff;
@popoverArrowWidth:       10px;
@popoverArrowColor:       #fff;
Thomas Park's avatar
Thomas Park committed
259
@popoverTitleBackground:  @navbarBackground;
Thomas Park's avatar
Thomas Park committed
260
261
262
263
264
265

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


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

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

Thomas Park's avatar
Thomas Park committed
270

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

Thomas Park's avatar
Thomas Park committed
278
279
280
281
282
283
284
285
286
287
288
// 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
289
// Fluid grid
Thomas Park's avatar
Thomas Park committed
290
// -------------------------
Thomas Park's avatar
Thomas Park committed
291
292
293
294
295
296
297
298
299
300
@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);