1 |
|
2 |
|
3 |
|
4 |
|
5 | html,
|
6 | button,
|
7 | input,
|
8 | select,
|
9 | textarea {
|
10 | color: @off-black;
|
11 | }
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | ::-moz-selection {
|
19 | background: @light-blue;
|
20 | text-shadow: none;
|
21 | }
|
22 |
|
23 | ::selection {
|
24 | background: @light-blue;
|
25 | text-shadow: none;
|
26 | }
|
27 |
|
28 |
|
29 |
|
30 |
|
31 | hr {
|
32 | display: block;
|
33 | height: 1px;
|
34 | border: 0;
|
35 | border-top: 1px solid @light-gray;
|
36 | margin: @spacing-l 0;
|
37 | padding: 0;
|
38 | }
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | audio,
|
45 | canvas,
|
46 | img,
|
47 | video {
|
48 | vertical-align: middle;
|
49 | }
|
50 |
|
51 |
|
52 |
|
53 |
|
54 | fieldset {
|
55 | border: 0;
|
56 | margin: 0;
|
57 | padding: 0;
|
58 | }
|
59 |
|
60 |
|
61 |
|
62 |
|
63 | textarea {
|
64 | resize: vertical;
|
65 | }
|
66 |
|
67 |
|
68 |
|
69 |
|
70 | code {
|
71 | background: @lighter-gray;
|
72 | border: 1px solid @light-gray;
|
73 | border-radius: 4px;
|
74 | color: @blue;
|
75 | display: block;
|
76 | padding: @spacing-sm;
|
77 | }
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 | code,
|
85 | p,
|
86 | pre,
|
87 | .spaced {
|
88 | margin: @spacing 0;
|
89 | }
|
90 |
|
91 | section {
|
92 | margin: @spacing-l 0;
|
93 | }
|
94 |
|
95 | section:first-child {
|
96 | margin-top: 0;
|
97 | }
|
98 |
|
99 | section:last-child {
|
100 | margin-bottom: 0;
|
101 | }
|
102 |
|
103 | code pre {
|
104 | margin: 0;
|
105 | }
|
106 |
|
107 | section,
|
108 | .max-width-content {
|
109 | margin-left: auto;
|
110 | margin-right: auto;
|
111 | max-width: @max-content-width;
|
112 | }
|
113 |
|
114 | .padded {
|
115 | padding: @spacing;
|
116 | }
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 | a[href] {
|
123 | color: @blue;
|
124 | text-decoration: none;
|
125 | transition: color 150ms linear;
|
126 |
|
127 | &:hover {
|
128 | color: @light-blue;
|
129 | text-decoration: underline;
|
130 | }
|
131 |
|
132 | &:active {
|
133 | color: @dark-blue;
|
134 | }
|
135 |
|
136 | &:focus,
|
137 | &:active {
|
138 | outline: none;
|
139 | }
|
140 | }
|
141 |
|
142 | a[href],
|
143 | .clickable,
|
144 | .btn {
|
145 | cursor: pointer;
|
146 | }
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | header {
|
153 | background: @dark-blue;
|
154 | border-top: 2px solid @yellow;
|
155 |
|
156 | &,
|
157 | h1,
|
158 | h2,
|
159 | h3,
|
160 | h4,
|
161 | h5,
|
162 | h6 {
|
163 | color: @white;
|
164 | }
|
165 | }
|
166 |
|
167 | .header-title-text {
|
168 | font-size: @font-size-xsm;
|
169 | margin: 0 @spacing-xsm 0;
|
170 | text-transform: uppercase;
|
171 | }
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 | .hero {
|
178 | background: @black;
|
179 | color: @white;
|
180 | padding: @spacing 0;
|
181 |
|
182 | [class*="icon-"] {
|
183 | color: @yellow;
|
184 | font-size: @font-size * 7.5;
|
185 | }
|
186 | }
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 | footer {
|
193 | border-top: 1px solid @lighter-gray;
|
194 | color: darken(@light-gray, 8%);
|
195 | font-weight: 300;
|
196 |
|
197 | a[href] {
|
198 | color: darken(@light-gray, 8%);
|
199 | text-decoration: underline;
|
200 | }
|
201 | }
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 | .msg {
|
209 | padding: @spacing @spacing @spacing @spacing + (2 * @spacing-sm);
|
210 | position: relative;
|
211 |
|
212 | &:before {
|
213 | background-size: contain;
|
214 | content: '';
|
215 | height: @spacing;
|
216 | left: @spacing;
|
217 | position: absolute;
|
218 | top: @spacing;
|
219 | width: @spacing;
|
220 | }
|
221 | }
|
222 |
|
223 | .msg-success,
|
224 | .msg-error {
|
225 | color: @white;
|
226 | }
|
227 |
|
228 | .msg-success {
|
229 | background: @green;
|
230 |
|
231 | &:before {
|
232 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI1Ljc3MnB4IiBoZWlnaHQ9IjI1LjU5OHB4IiB2aWV3Qm94PSIwIDAgMjUuNzcyIDI1LjU5OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUuNzcyIDI1LjU5ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjUuNjQ2LDEzLjY1M2wtMS41MTktMi4zOTZsMC45MDEtMi42ODljMC4xMjItMC4zNjctMC4wMy0wLjc3LTAuMzY1LTAuOTYybC0yLjQ1OC0xLjQxN2wtMC40NTItMi44ICBjLTAuMDYzLTAuMzgyLTAuMzg1LTAuNjY3LTAuNzcxLTAuNjgzbC0yLjgzNS0wLjExMWwtMS43MDEtMi4yN2MtMC4yMzItMC4zMS0wLjY1Mi0wLjQxMy0wLjk5OS0wLjI0NmwtMi41NjEsMS4yMThsLTIuNTYyLTEuMjE5ICBDOS45NzYtMC4wODcsOS41NTgsMC4wMTYsOS4zMjUsMC4zMjVsLTEuNzAxLDIuMjdMNC43ODksMi43MDZjLTAuMzg1LDAuMDE1LTAuNzA4LDAuMy0wLjc3LDAuNjgybC0wLjQ1MiwyLjhMMS4xMDksNy42MDUgIEMwLjc3NCw3Ljc5NywwLjYyMSw4LjIsMC43NDMsOC41NjdsMC45MDEsMi42ODlsLTEuNTE4LDIuMzk3Yy0wLjIwNywwLjMyNy0wLjE1NCwwLjc1NCwwLjEyNSwxLjAyMmwyLjA0NywxLjk2M2wtMC4yMywyLjgyNiAgYy0wLjAzMSwwLjM4NywwLjIxMywwLjc0LDAuNTg0LDAuODQ4bDIuNzI1LDAuNzg1bDEuMTA5LDIuNjExYzAuMTUyLDAuMzU1LDAuNTMzLDAuNTYxLDAuOTExLDAuNDc5bDIuNzgtMC41N2wyLjE5NCwxLjc5NyAgYzAuMTQ5LDAuMTIxLDAuMzMyLDAuMTg0LDAuNTE1LDAuMTg0YzAuMTgzLDAsMC4zNjUtMC4wNjMsMC41MTUtMC4xODRsMi4xOTQtMS43OTdsMi43OCwwLjU3YzAuMzc3LDAuMDgsMC43Ni0wLjEyMywwLjkxMS0wLjQ3OSAgbDEuMTA5LTIuNjExbDIuNzI1LTAuNzg1YzAuMzcxLTAuMTA3LDAuNjE1LTAuNDYxLDAuNTg0LTAuODQ4bC0wLjIzLTIuODI2bDIuMDQ3LTEuOTYzQzI1LjgsMTQuNDA3LDI1Ljg1MywxMy45OCwyNS42NDYsMTMuNjUzeiAgIE0xOC43NjMsOS43NDJsLTUuNjkxLDguNTI2Yy0wLjIxNSwwLjMxOC0wLjU0OCwwLjUzMS0wLjg3OSwwLjUzMWMtMC4zMywwLTAuNjk5LTAuMTg1LTAuOTM0LTAuNDIxbC00LjE3OC00LjI0NSAgYy0wLjI4NS0wLjI5LTAuMjg1LTAuNzYsMC0xLjA1bDEuMDMxLTEuMDVjMC4yODUtMC4yODYsMC43NDgtMC4yODYsMS4wMzEsMGwyLjcxOSwyLjc2Mmw0LjQ4NC02LjcxOCAgYzAuMjI1LTAuMzM5LDAuNjgyLTAuNDI1LDEuMDE0LTAuMTk2bDEuMjA5LDAuODMxQzE4LjkwMiw4Ljk0MiwxOC45ODgsOS40MDUsMTguNzYzLDkuNzQyTDE4Ljc2Myw5Ljc0MnoiLz4KPC9zdmc+);
|
233 | }
|
234 | }
|
235 |
|
236 | .msg-warning {
|
237 | background: lighten(@yellow, 10%);
|
238 |
|
239 | &:before {
|
240 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJhbGVydCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjMDAwIiBkPSJNNTAsMUMyMi45MzgsMSwxLDIyLjkzOCwxLDUwYzAsMjcuMDYyLDIxLjkzOCw0OSw0OSw0OWMyNy4wNjIsMCw0OS0yMS45MzgsNDktNDlDOTksMjIuOTM4LDc3LjA2MiwxLDUwLDF6ICAgTTUwLDgzLjcwOWMtNC4xNjQsMC03LjU0LTMuMzc2LTcuNTQtNy41NHMzLjM3Ni03LjU0LDcuNTQtNy41NGM0LjE2NCwwLDcuNTQsMy4zNzYsNy41NCw3LjU0UzU0LjE2NCw4My43MDksNTAsODMuNzA5eiAgIE01Ny41NCw1NS4yOTdjMCw0LjE2NC0zLjM3Niw3LjU0MS03LjU0LDcuNTQxYy00LjE2NCwwLTcuNTQtMy4zNzctNy41NC03LjU0MVYyMy44MzFjMC00LjE2NCwzLjM3Ni03LjU0LDcuNTQtNy41NCAgYzQuMTY0LDAsNy41NCwzLjM3Niw3LjU0LDcuNTRWNTUuMjk3eiIvPgo8L3N2Zz4=);
|
241 | }
|
242 | }
|
243 |
|
244 | .msg-error {
|
245 | background: @red;
|
246 |
|
247 | &:before {
|
248 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJhbGVydCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjZmZmIiBkPSJNNTAsMUMyMi45MzgsMSwxLDIyLjkzOCwxLDUwYzAsMjcuMDYyLDIxLjkzOCw0OSw0OSw0OWMyNy4wNjIsMCw0OS0yMS45MzgsNDktNDlDOTksMjIuOTM4LDc3LjA2MiwxLDUwLDF6ICAgTTUwLDgzLjcwOWMtNC4xNjQsMC03LjU0LTMuMzc2LTcuNTQtNy41NHMzLjM3Ni03LjU0LDcuNTQtNy41NGM0LjE2NCwwLDcuNTQsMy4zNzYsNy41NCw3LjU0UzU0LjE2NCw4My43MDksNTAsODMuNzA5eiAgIE01Ny41NCw1NS4yOTdjMCw0LjE2NC0zLjM3Niw3LjU0MS03LjU0LDcuNTQxYy00LjE2NCwwLTcuNTQtMy4zNzctNy41NC03LjU0MVYyMy44MzFjMC00LjE2NCwzLjM3Ni03LjU0LDcuNTQtNy41NCAgYzQuMTY0LDAsNy41NCwzLjM3Niw3LjU0LDcuNTRWNTUuMjk3eiIvPgo8L3N2Zz4=);
|
249 | }
|
250 | }
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 | input[type="text"],
|
257 | input[type="number"],
|
258 | input[type="search"],
|
259 | input[type="password"],
|
260 | input[type="submit"],
|
261 | textarea {
|
262 | font-size: @font-size-sm;
|
263 | padding: @spacing-xsm;
|
264 | }
|
265 |
|
266 | input[type="text"],
|
267 | input[type="number"],
|
268 | input[type="search"],
|
269 | input[type="password"],
|
270 | textarea {
|
271 | border: 1px solid @light-gray;
|
272 | box-shadow: inset 1px 1px 4px 0 @light-gray;
|
273 | width: 100%;
|
274 | &.has-error {
|
275 | border-color: @light-red;
|
276 | box-shadow: inset 1px 1px 4px 0 @light-red;
|
277 | }
|
278 | }
|
279 |
|
280 | input:focus.has-error {
|
281 | outline: auto 5px @light-red;
|
282 | }
|
283 |
|
284 | input[type="checkbox"],
|
285 | input[type="radio"] {
|
286 | margin: @spacing-xsm;
|
287 | position: relative;
|
288 | top: -2px;
|
289 | }
|
290 |
|
291 | input[type="submit"],
|
292 | button,
|
293 | a[href].btn,
|
294 | .btn {
|
295 | border: none;
|
296 | border-radius: @spacing / 5;
|
297 | border-bottom: 1px solid transparent;
|
298 | color: @white;
|
299 | display: inline-block;
|
300 | font-size: @font-size-xsm;
|
301 | font-weight: 700;
|
302 | line-height: 1;
|
303 | padding: @spacing-xsm @spacing;
|
304 | text-align: center;
|
305 | text-transform: capitalize;
|
306 | transition: background 150ms linear;
|
307 | .colored-button(@blue);
|
308 |
|
309 | &:hover {
|
310 | text-decoration: none;
|
311 | }
|
312 |
|
313 | &[disabled] {
|
314 | opacity: 0.4;
|
315 | }
|
316 |
|
317 | &:focus {
|
318 | outline: 0 !important;
|
319 | }
|
320 | }
|
321 |
|
322 | a[href].btn-sm,
|
323 | .btn-sm {
|
324 | border-radius: @spacing / 5;
|
325 | font-size: @font-size-xxsm;
|
326 | min-width: 0;
|
327 | padding: @spacing / 3 @spacing * .6;
|
328 | }
|
329 |
|
330 | a[href].btn-red,
|
331 | .btn-red {
|
332 | .colored-button(@red);
|
333 | }
|
334 |
|
335 | a[href].btn-green,
|
336 | .btn-green {
|
337 | .colored-button(@green);
|
338 | }
|
339 |
|
340 | a[href].btn-transparent,
|
341 | .btn-transparent {
|
342 | background: transparent;
|
343 | color: @blue;
|
344 | border-bottom: none;
|
345 | text-shadow: none;
|
346 |
|
347 | &:hover {
|
348 | background: transparent;
|
349 | }
|
350 |
|
351 | &:active,
|
352 | &:focus {
|
353 | background: transparent;
|
354 | color: #fff;
|
355 | }
|
356 | }
|
357 |
|
358 | a[href].btn-dark-blue,
|
359 | .btn-dark-blue {
|
360 | .colored-button(@dark-blue);
|
361 | }
|
362 |
|
363 | a[href].btn-gray,
|
364 | .btn-gray {
|
365 | .colored-button(@gray);
|
366 | }
|
367 |
|
368 | a[href].btn-yellow,
|
369 | .btn-yellow {
|
370 | .colored-button(@yellow, @off-black);
|
371 | }
|
372 |
|
373 | a[href].btn-orange,
|
374 | .btn-orange {
|
375 | .colored-button(@orange);
|
376 | }
|
377 |
|
378 | a[href].btn-light-gray,
|
379 | .btn-light-gray {
|
380 | .colored-button(@light-gray);
|
381 | text-shadow: none;
|
382 |
|
383 | &:hover {
|
384 | background: lighten(@light-gray, 5%);
|
385 | }
|
386 |
|
387 | &:active {
|
388 | background: darken(@light-gray, 10%);
|
389 | }
|
390 | }
|
391 |
|
392 | .btn-light-gray {
|
393 | color: @dark-blue;
|
394 |
|
395 | &:hover {
|
396 | color: @blue;
|
397 | }
|
398 | }
|
399 |
|
400 | .btn-light-gray-red {
|
401 | background: @light-gray;
|
402 | border-bottom: 1px solid @dark-shadow;
|
403 | color: @red;
|
404 | text-shadow: 0 0 0 transparent;
|
405 |
|
406 | &:hover {
|
407 | background: lighten(@red, 10%);
|
408 | color: @white;
|
409 | }
|
410 | }
|
411 |
|
412 | label {
|
413 | font-size: @font-size-xxsm;
|
414 | font-weight: 300;
|
415 | text-transform: uppercase;
|
416 | color: @gray;
|
417 | }
|
418 |
|
419 |
|
420 |
|
421 |
|
422 |
|
423 |
|
424 |
|
425 |
|
426 |
|
427 | .no-top-margin {
|
428 | margin-top: 0;
|
429 | }
|
430 |
|
431 | .no-bottom-margin {
|
432 | margin-bottom: 0;
|
433 | }
|
434 |
|
435 |
|
436 |
|
437 |
|
438 | .hidden {
|
439 | display: none !important;
|
440 | visibility: hidden;
|
441 | }
|
442 |
|
443 |
|
444 |
|
445 |
|
446 | .visuallyhidden {
|
447 | border: 0;
|
448 | clip: rect(0 0 0 0);
|
449 | height: 1px;
|
450 | margin: -1px;
|
451 | overflow: hidden;
|
452 | padding: 0;
|
453 | position: absolute;
|
454 | width: 1px;
|
455 | }
|
456 |
|
457 |
|
458 |
|
459 |
|
460 |
|
461 | .visuallyhidden.focusable:active,
|
462 | .visuallyhidden.focusable:focus {
|
463 | clip: auto;
|
464 | height: auto;
|
465 | margin: 0;
|
466 | overflow: visible;
|
467 | position: static;
|
468 | width: auto;
|
469 | }
|
470 |
|
471 |
|
472 |
|
473 |
|
474 | .invisible {
|
475 | visibility: hidden;
|
476 | }
|
477 |
|
478 |
|
479 |
|
480 |
|
481 | .left {
|
482 | float: left;
|
483 | }
|
484 |
|
485 | .right {
|
486 | float: right;
|
487 | }
|
488 |
|
489 |
|
490 |
|
491 |
|
492 |
|
493 |
|
494 |
|
495 |
|
496 |
|
497 |
|
498 |
|
499 |
|
500 | .clearfix:before,
|
501 | .clearfix:after {
|
502 | content: " ";
|
503 | display: table;
|
504 | }
|
505 |
|
506 | .clearfix:after {
|
507 | clear: both;
|
508 | }
|
509 |
|
510 |
|
511 |
|
512 |
|
513 |
|
514 | .clearfix {
|
515 | *zoom: 1;
|
516 | }
|
517 |
|
518 |
|
519 |
|
520 |
|
521 | .flex-row {
|
522 | align-items: center;
|
523 | display: flex;
|
524 | flex-direction: row;
|
525 | flex-wrap: wrap;
|
526 | justify-content: flex-start;
|
527 | }
|
528 |
|
529 | .flex-fixed-item-size {
|
530 | > * {
|
531 | flow-grow: 0;
|
532 | flex-shrink: 0;
|
533 | }
|
534 | }
|
535 |
|
536 | .flex-vcenter {
|
537 | display: flex;
|
538 | align-items: center;
|
539 | }
|
540 |
|
541 |
|
542 |
|
543 |
|
544 |
|
545 |
|
546 | .flex-align-right {
|
547 | margin-left: auto;
|
548 | }
|
549 |
|
550 | .flex-align-left {
|
551 | margin-right: auto;
|
552 | }
|
553 |
|
554 | .flex-align-top {
|
555 | margin-bottom: auto;
|
556 | }
|
557 |
|
558 | .flex-align-bottom {
|
559 | margin-top: auto;
|
560 | }
|