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



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


// Grays
Thomas Park's avatar
Thomas Park committed
14
// -------------------------
Thomas Park's avatar
Thomas Park committed
15
16
17
18
19
20
21
22
@black:                 #000;
@grayDarker:            #111;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #aaa;
@grayLighter:           #ddd;
@white:                 #fff;

Thomas Park's avatar
Thomas Park committed
23

Thomas Park's avatar
Thomas Park committed
24
// Accent colors
Thomas Park's avatar
Thomas Park committed
25
// -------------------------
Thomas Park's avatar
Thomas Park committed
26
27
@blue:                  #00BCE1;
@blueDark:              #1269B0;
Thomas Park's avatar
Thomas Park committed
28
@green:                 #7FC518;
Thomas Park's avatar
Thomas Park committed
29
30
31
32
@red:                   #E51925;
@yellow:                #EAC504;
@orange:                #DF6E1E;
@pink:                  #FFBCB9;
Thomas Park's avatar
Thomas Park committed
33
@purple:                #4D3A7D;
Thomas Park's avatar
Thomas Park committed
34

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

// Scaffolding
// -------------------------
@bodyBackground:        #003F4D;
@textColor:             rgba(256, 256, 256, 0.9);


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


Thomas Park's avatar
Thomas Park committed
48
// Typography
Thomas Park's avatar
Thomas Park committed
49
// -------------------------
Thomas Park's avatar
Thomas Park committed
50
51
52
@baseFontSize:          14px;
@baseFontFamily:        'Cabin', Verdana, sans-serif;
@baseLineHeight:        20px;
Thomas Park's avatar
Thomas Park committed
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@altFontFamily:         Georgia, "Times New Roman", Times, serif;

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


// Tables
// -------------------------
@tableBackground:                   lighten(#147E88, 10%); // overall background-color
@tableBackgroundAccent:             lighten(#147E88, 15%); // for striping
@tableBackgroundHover:              rgba(256, 256, 256, 0.4); // for hover
@tableBorder:                       lighten(#147E88, 12%); // table and cell border

Thomas Park's avatar
Thomas Park committed
67
68

// Buttons
Thomas Park's avatar
Thomas Park committed
69
70
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
99
100
101
102
103
104
105
106
107
// -------------------------
@btnBackground:                     @grayLighter;
@btnBackgroundHighlight:            @grayLighter;
@btnBorder:                         rgba(0, 0, 0, 0);

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

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

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

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

@btnDangerBackground:               darken(@yellow, 3%);
@btnDangerBackgroundHighlight:      darken(@yellow, 3%);

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


// Forms
// -------------------------
@inputBackground:               @white;
@inputBorder:                   transparent;
@inputDisabledBackground:       @grayLighter;


// Dropdowns
// -------------------------
@dropdownBackground:            @white;
@dropdownBorder:                rgba(0,0,0,.2);
@dropdownLinkColor:             @bodyBackground;
@dropdownLinkColorHover:        @white;
@dropdownLinkBackgroundHover:   rgba(0, 57, 59, 0.9);

Thomas Park's avatar
Thomas Park committed
108
109
110
111
112
113
114



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

// Z-index master list
Thomas Park's avatar
Thomas Park committed
115
// -------------------------
Thomas Park's avatar
Thomas Park committed
116
117
118
119
120
121
122
123
124
// 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
125

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

Thomas Park's avatar
Thomas Park committed
131

Thomas Park's avatar
Thomas Park committed
132
// Input placeholder text color
Thomas Park's avatar
Thomas Park committed
133
// -------------------------
Thomas Park's avatar
Thomas Park committed
134
135
@placeholderText:         @grayLight;

Thomas Park's avatar
Thomas Park committed
136

Thomas Park's avatar
Thomas Park committed
137
// Hr border color
Thomas Park's avatar
Thomas Park committed
138
// -------------------------
Thomas Park's avatar
Thomas Park committed
139
140
@hrBorder:                transparent;

Thomas Park's avatar
Thomas Park committed
141

Thomas Park's avatar
Thomas Park committed
142
// Navbar
Thomas Park's avatar
Thomas Park committed
143
// -------------------------
Thomas Park's avatar
Thomas Park committed
144
145
146
147
@navbarHeight:                    50px;
@navbarBackground:                #AD1D28;
@navbarBackgroundHighlight:       #AD1D28;

Thomas Park's avatar
Thomas Park committed
148
149
@navbarText:                      @white;
@navbarLinkColor:                 @white;
Thomas Park's avatar
Thomas Park committed
150
@navbarLinkColorHover:            @white;
Thomas Park's avatar
Thomas Park committed
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
@navbarLinkColorActive:           @navbarLinkColorHover;
@navbarLinkBackgroundHover:       lighten(@navbarBackground, 10%);
@navbarLinkBackgroundActive:      lighten(@navbarBackground, 10%);

@navbarSearchBackground:          rgba(0, 0, 0, 0);
@navbarSearchBackgroundFocus:     lighten(@navbarBackground, 25%);
@navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
@navbarSearchPlaceholderColor:    @textColor;


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

Thomas Park's avatar
Thomas Park committed
167
168

// Form states and alerts
Thomas Park's avatar
Thomas Park committed
169
// -------------------------
Thomas Park's avatar
Thomas Park committed
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
@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
188

Thomas Park's avatar
Thomas Park committed
189
190
191
192
// GRID
// --------------------------------------------------

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

Thomas Park's avatar
Thomas Park committed
199

Thomas Park's avatar
Thomas Park committed
200
// Fluid grid
Thomas Park's avatar
Thomas Park committed
201
// -------------------------
Thomas Park's avatar
Thomas Park committed
202
203
@fluidGridColumnWidth:    6.382978723%;
@fluidGridGutterWidth:    2.127659574%;