]>
Commit | Line | Data |
---|---|---|
59c06b17 CS |
1 | // |
2 | // Variables | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // Global values | |
7 | // -------------------------------------------------- | |
8 | ||
9 | ||
10 | // Grays | |
11 | // ------------------------- | |
12 | @black: #000; | |
13 | @grayDarker: #222; | |
14 | @grayDark: #333; | |
15 | @gray: #555; | |
16 | @grayLight: #999; | |
17 | @grayLighter: #eee; | |
18 | @white: #fff; | |
19 | ||
20 | ||
21 | // Accent colors | |
22 | // ------------------------- | |
23 | @blue: #049cdb; | |
24 | @blueDark: #0064cd; | |
25 | @green: #46a546; | |
26 | @red: #9d261d; | |
27 | @yellow: #ffc40d; | |
28 | @orange: #f89406; | |
29 | @pink: #c3325f; | |
30 | @purple: #7a43b6; | |
31 | ||
32 | ||
33 | // Scaffolding | |
34 | // ------------------------- | |
35 | @bodyBackground: @white; | |
36 | @textColor: @grayDark; | |
37 | ||
38 | ||
39 | // Links | |
40 | // ------------------------- | |
41 | @linkColor: #08c; | |
42 | @linkColorHover: darken(@linkColor, 15%); | |
43 | ||
44 | ||
45 | // Typography | |
46 | // ------------------------- | |
47 | @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
48 | @serifFontFamily: Georgia, "Times New Roman", Times, serif; | |
49 | @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; | |
50 | ||
51 | @baseFontSize: 14px; | |
52 | @baseFontFamily: @sansFontFamily; | |
53 | @baseLineHeight: 20px; | |
54 | @altFontFamily: @serifFontFamily; | |
55 | ||
56 | @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily | |
57 | @headingsFontWeight: bold; // instead of browser default, bold | |
58 | @headingsColor: inherit; // empty to use BS default, @textColor | |
59 | ||
60 | // Tables | |
61 | // ------------------------- | |
62 | @tableBackground: transparent; // overall background-color | |
63 | @tableBackgroundAccent: #f9f9f9; // for striping | |
64 | @tableBackgroundHover: #f5f5f5; // for hover | |
65 | @tableBorder: #ddd; // table and cell border | |
66 | ||
67 | // Buttons | |
68 | // ------------------------- | |
69 | @btnBackground: @white; | |
70 | @btnBackgroundHighlight: darken(@white, 10%); | |
71 | @btnBorder: #bbb; | |
72 | ||
73 | @btnPrimaryBackground: @linkColor; | |
74 | @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); | |
75 | ||
76 | @btnInfoBackground: #5bc0de; | |
77 | @btnInfoBackgroundHighlight: #2f96b4; | |
78 | ||
79 | @btnSuccessBackground: #62c462; | |
80 | @btnSuccessBackgroundHighlight: #51a351; | |
81 | ||
82 | @btnWarningBackground: lighten(@orange, 15%); | |
83 | @btnWarningBackgroundHighlight: @orange; | |
84 | ||
85 | @btnDangerBackground: #ee5f5b; | |
86 | @btnDangerBackgroundHighlight: #bd362f; | |
87 | ||
88 | @btnInverseBackground: #444; | |
89 | @btnInverseBackgroundHighlight: @grayDarker; | |
90 | ||
91 | ||
92 | // Forms | |
93 | // ------------------------- | |
94 | @inputBackground: @white; | |
95 | @inputBorder: #ccc; | |
96 | @inputBorderRadius: 3px; | |
97 | @inputDisabledBackground: @grayLighter; | |
98 | @formActionsBackground: #f5f5f5; | |
99 | ||
100 | // Dropdowns | |
101 | // ------------------------- | |
102 | @dropdownBackground: @white; | |
103 | @dropdownBorder: rgba(0,0,0,.2); | |
104 | @dropdownDividerTop: #e5e5e5; | |
105 | @dropdownDividerBottom: @white; | |
106 | ||
107 | @dropdownLinkColor: @grayDark; | |
108 | @dropdownLinkColorHover: @white; | |
109 | @dropdownLinkColorActive: @dropdownLinkColor; | |
110 | ||
111 | @dropdownLinkBackgroundActive: @linkColor; | |
112 | @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; | |
113 | ||
114 | ||
115 | ||
116 | // COMPONENT VARIABLES | |
117 | // -------------------------------------------------- | |
118 | ||
119 | // Z-index master list | |
120 | // ------------------------- | |
121 | // Used for a bird's eye view of components dependent on the z-axis | |
122 | // Try to avoid customizing these :) | |
123 | @zindexDropdown: 1000; | |
124 | @zindexPopover: 1010; | |
125 | @zindexTooltip: 1030; | |
126 | @zindexFixedNavbar: 1030; | |
127 | @zindexModalBackdrop: 1040; | |
128 | @zindexModal: 1050; | |
129 | ||
130 | ||
131 | // Sprite icons path | |
132 | // ------------------------- | |
133 | @iconSpritePath: "../img/glyphicons-halflings.png"; | |
134 | @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; | |
135 | ||
136 | ||
137 | // Input placeholder text color | |
138 | // ------------------------- | |
139 | @placeholderText: @grayLight; | |
140 | ||
141 | ||
142 | // Hr border color | |
143 | // ------------------------- | |
144 | @hrBorder: @grayLighter; | |
145 | ||
146 | ||
147 | // Horizontal forms & lists | |
148 | // ------------------------- | |
149 | @horizontalComponentOffset: 180px; | |
150 | ||
151 | ||
152 | // Wells | |
153 | // ------------------------- | |
154 | @wellBackground: #f5f5f5; | |
155 | ||
156 | ||
157 | // Navbar | |
158 | // ------------------------- | |
159 | @navbarCollapseWidth: 979px; | |
160 | ||
4bc43fab | 161 | @navbarHeight: 40px; |
59c06b17 CS |
162 | @navbarBackgroundHighlight: #ffffff; |
163 | @navbarBackground: darken(@navbarBackgroundHighlight, 5%); | |
164 | @navbarBorder: darken(@navbarBackground, 12%); | |
165 | ||
166 | @navbarText: #777; | |
167 | @navbarLinkColor: #777; | |
168 | @navbarLinkColorHover: @grayDark; | |
169 | @navbarLinkColorActive: @gray; | |
170 | @navbarLinkBackgroundHover: transparent; | |
171 | @navbarLinkBackgroundActive: darken(@navbarBackground, 5%); | |
172 | ||
173 | @navbarBrandColor: @navbarLinkColor; | |
174 | ||
175 | // Inverted navbar | |
176 | @navbarInverseBackground: #111111; | |
177 | @navbarInverseBackgroundHighlight: #222222; | |
178 | @navbarInverseBorder: #252525; | |
179 | ||
180 | @navbarInverseText: @grayLight; | |
181 | @navbarInverseLinkColor: @grayLight; | |
182 | @navbarInverseLinkColorHover: @white; | |
183 | @navbarInverseLinkColorActive: @navbarInverseLinkColorHover; | |
184 | @navbarInverseLinkBackgroundHover: transparent; | |
185 | @navbarInverseLinkBackgroundActive: @navbarInverseBackground; | |
186 | ||
187 | @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); | |
188 | @navbarInverseSearchBackgroundFocus: @white; | |
189 | @navbarInverseSearchBorder: @navbarInverseBackground; | |
190 | @navbarInverseSearchPlaceholderColor: #ccc; | |
191 | ||
192 | @navbarInverseBrandColor: @navbarInverseLinkColor; | |
193 | ||
194 | ||
195 | // Pagination | |
196 | // ------------------------- | |
197 | @paginationBackground: #fff; | |
198 | @paginationBorder: #ddd; | |
199 | @paginationActiveBackground: #f5f5f5; | |
200 | ||
201 | ||
202 | // Hero unit | |
203 | // ------------------------- | |
204 | @heroUnitBackground: @grayLighter; | |
205 | @heroUnitHeadingColor: inherit; | |
206 | @heroUnitLeadColor: inherit; | |
207 | ||
208 | ||
209 | // Form states and alerts | |
210 | // ------------------------- | |
211 | @warningText: #c09853; | |
212 | @warningBackground: #fcf8e3; | |
213 | @warningBorder: darken(spin(@warningBackground, -10), 3%); | |
214 | ||
215 | @errorText: #b94a48; | |
216 | @errorBackground: #f2dede; | |
217 | @errorBorder: darken(spin(@errorBackground, -10), 3%); | |
218 | ||
219 | @successText: #468847; | |
220 | @successBackground: #dff0d8; | |
221 | @successBorder: darken(spin(@successBackground, -10), 5%); | |
222 | ||
223 | @infoText: #3a87ad; | |
224 | @infoBackground: #d9edf7; | |
225 | @infoBorder: darken(spin(@infoBackground, -10), 7%); | |
226 | ||
227 | ||
228 | // Tooltips and popovers | |
229 | // ------------------------- | |
230 | @tooltipColor: #fff; | |
231 | @tooltipBackground: #000; | |
232 | @tooltipArrowWidth: 5px; | |
233 | @tooltipArrowColor: @tooltipBackground; | |
234 | ||
235 | @popoverBackground: #fff; | |
236 | @popoverArrowWidth: 10px; | |
237 | @popoverArrowColor: #fff; | |
238 | @popoverTitleBackground: darken(@popoverBackground, 3%); | |
239 | ||
240 | // Special enhancement for popovers | |
241 | @popoverArrowOuterWidth: @popoverArrowWidth + 1; | |
242 | @popoverArrowOuterColor: rgba(0,0,0,.25); | |
243 | ||
244 | ||
245 | ||
246 | // GRID | |
247 | // -------------------------------------------------- | |
248 | ||
249 | ||
250 | // Default 940px grid | |
251 | // ------------------------- | |
252 | @gridColumns: 12; | |
253 | @gridColumnWidth: 60px; | |
254 | @gridGutterWidth: 20px; | |
255 | @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); | |
256 | ||
257 | // 1200px min | |
258 | @gridColumnWidth1200: 70px; | |
259 | @gridGutterWidth1200: 30px; | |
260 | @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); | |
261 | ||
262 | // 768px-979px | |
263 | @gridColumnWidth768: 42px; | |
264 | @gridGutterWidth768: 20px; | |
265 | @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); | |
266 | ||
267 | ||
268 | // Fluid grid | |
269 | // ------------------------- | |
270 | @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); | |
271 | @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); | |
272 | ||
273 | // 1200px min | |
274 | @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); | |
275 | @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); | |
276 | ||
277 | // 768px-979px | |
278 | @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); | |
279 | @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); |