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="search"],
|
258 | input[type="password"],
|
259 | input[type="submit"],
|
260 | textarea {
|
261 | font-size: @font-size-sm;
|
262 | padding: @spacing-xsm;
|
263 | }
|
264 |
|
265 | input[type="text"],
|
266 | input[type="search"],
|
267 | input[type="password"],
|
268 | textarea {
|
269 | border: 1px solid @light-gray;
|
270 | box-shadow: inset 1px 1px 4px 0 @light-gray;
|
271 | width: 100%;
|
272 | }
|
273 |
|
274 | input[type="checkbox"],
|
275 | input[type="radio"] {
|
276 | margin: @spacing-xsm;
|
277 | position: relative;
|
278 | top: -2px;
|
279 | }
|
280 |
|
281 | input[type="submit"],
|
282 | button,
|
283 | a[href].btn,
|
284 | .btn {
|
285 | border: none;
|
286 | border-radius: @spacing / 5;
|
287 | border-bottom: 1px solid transparent;
|
288 | color: @white;
|
289 | display: inline-block;
|
290 | font-size: @font-size-xsm;
|
291 | font-weight: 700;
|
292 | line-height: 1;
|
293 | padding: @spacing-xsm @spacing;
|
294 | text-align: center;
|
295 | text-transform: capitalize;
|
296 | transition: background 150ms linear;
|
297 | .colored-button(@blue);
|
298 |
|
299 | &:hover {
|
300 | text-decoration: none;
|
301 | }
|
302 |
|
303 | &[disabled] {
|
304 | opacity: 0.4;
|
305 | }
|
306 |
|
307 | &:focus {
|
308 | outline: 0 !important;
|
309 | }
|
310 | }
|
311 |
|
312 | a[href].btn-sm,
|
313 | .btn-sm {
|
314 | border-radius: @spacing / 5;
|
315 | font-size: @font-size-xxsm;
|
316 | min-width: 0;
|
317 | padding: @spacing / 3 @spacing * .6;
|
318 | }
|
319 |
|
320 | a[href].btn-red,
|
321 | .btn-red {
|
322 | .colored-button(@red);
|
323 | }
|
324 |
|
325 | a[href].btn-green,
|
326 | .btn-green {
|
327 | .colored-button(@green);
|
328 | }
|
329 |
|
330 | a[href].btn-transparent,
|
331 | .btn-transparent {
|
332 | background: transparent;
|
333 | color: @blue;
|
334 | border-bottom: none;
|
335 | text-shadow: none;
|
336 |
|
337 | &:hover {
|
338 | background: transparent;
|
339 | }
|
340 |
|
341 | &:active,
|
342 | &:focus {
|
343 | background: transparent;
|
344 | color: #fff;
|
345 | }
|
346 | }
|
347 |
|
348 | a[href].btn-dark-blue,
|
349 | .btn-dark-blue {
|
350 | .colored-button(@dark-blue);
|
351 | }
|
352 |
|
353 | a[href].btn-gray,
|
354 | .btn-gray {
|
355 | .colored-button(@gray);
|
356 | }
|
357 |
|
358 | a[href].btn-yellow,
|
359 | .btn-yellow {
|
360 | .colored-button(@yellow, @off-black);
|
361 | }
|
362 |
|
363 | a[href].btn-orange,
|
364 | .btn-orange {
|
365 | .colored-button(@orange);
|
366 | }
|
367 |
|
368 | a[href].btn-light-gray,
|
369 | .btn-light-gray {
|
370 | .colored-button(@light-gray);
|
371 | text-shadow: none;
|
372 |
|
373 | &:hover {
|
374 | background: lighten(@light-gray, 5%);
|
375 | }
|
376 |
|
377 | &:active {
|
378 | background: darken(@light-gray, 10%);
|
379 | }
|
380 | }
|
381 |
|
382 | .btn-light-gray {
|
383 | color: @dark-blue;
|
384 |
|
385 | &:hover {
|
386 | color: @blue;
|
387 | }
|
388 | }
|
389 |
|
390 | .btn-light-gray-red {
|
391 | background: @light-gray;
|
392 | border-bottom: 1px solid @dark-shadow;
|
393 | color: @red;
|
394 | text-shadow: 0 0 0 transparent;
|
395 |
|
396 | &:hover {
|
397 | background: lighten(@red, 10%);
|
398 | color: @white;
|
399 | }
|
400 | }
|
401 |
|
402 | label {
|
403 | font-size: @font-size-xxsm;
|
404 | font-weight: 300;
|
405 | text-transform: uppercase;
|
406 | color: @gray;
|
407 | }
|
408 |
|
409 |
|
410 |
|
411 |
|
412 |
|
413 |
|
414 |
|
415 |
|
416 |
|
417 | .no-top-margin {
|
418 | margin-top: 0;
|
419 | }
|
420 |
|
421 | .no-bottom-margin {
|
422 | margin-bottom: 0;
|
423 | }
|
424 |
|
425 |
|
426 |
|
427 |
|
428 | .hidden {
|
429 | display: none !important;
|
430 | visibility: hidden;
|
431 | }
|
432 |
|
433 |
|
434 |
|
435 |
|
436 | .visuallyhidden {
|
437 | border: 0;
|
438 | clip: rect(0 0 0 0);
|
439 | height: 1px;
|
440 | margin: -1px;
|
441 | overflow: hidden;
|
442 | padding: 0;
|
443 | position: absolute;
|
444 | width: 1px;
|
445 | }
|
446 |
|
447 |
|
448 |
|
449 |
|
450 |
|
451 | .visuallyhidden.focusable:active,
|
452 | .visuallyhidden.focusable:focus {
|
453 | clip: auto;
|
454 | height: auto;
|
455 | margin: 0;
|
456 | overflow: visible;
|
457 | position: static;
|
458 | width: auto;
|
459 | }
|
460 |
|
461 |
|
462 |
|
463 |
|
464 | .invisible {
|
465 | visibility: hidden;
|
466 | }
|
467 |
|
468 |
|
469 |
|
470 |
|
471 | .left {
|
472 | float: left;
|
473 | }
|
474 |
|
475 | .right {
|
476 | float: right;
|
477 | }
|
478 |
|
479 |
|
480 |
|
481 |
|
482 |
|
483 |
|
484 |
|
485 |
|
486 |
|
487 |
|
488 |
|
489 |
|
490 | .clearfix:before,
|
491 | .clearfix:after {
|
492 | content: " ";
|
493 | display: table;
|
494 | }
|
495 |
|
496 | .clearfix:after {
|
497 | clear: both;
|
498 | }
|
499 |
|
500 |
|
501 |
|
502 |
|
503 |
|
504 | .clearfix {
|
505 | *zoom: 1;
|
506 | }
|
507 |
|
508 |
|
509 |
|
510 |
|
511 | .flex-row {
|
512 | align-items: center;
|
513 | display: flex;
|
514 | flex-direction: row;
|
515 | flex-wrap: wrap;
|
516 | justify-content: flex-start;
|
517 | }
|
518 |
|
519 | .flex-fixed-item-size {
|
520 | > * {
|
521 | flow-grow: 0;
|
522 | flex-shrink: 0;
|
523 | }
|
524 | }
|
525 |
|
526 | .flex-vcenter {
|
527 | display: flex;
|
528 | align-items: center;
|
529 | }
|
530 |
|
531 |
|
532 |
|
533 |
|
534 |
|
535 |
|
536 | .flex-align-right {
|
537 | margin-left: auto;
|
538 | }
|
539 |
|
540 | .flex-align-left {
|
541 | margin-right: auto;
|
542 | }
|
543 |
|
544 | .flex-align-top {
|
545 | margin-bottom: auto;
|
546 | }
|
547 |
|
548 | .flex-align-bottom {
|
549 | margin-top: auto;
|
550 | }
|