1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | html {
|
18 | font-family: sans-serif;
|
19 | -ms-text-size-adjust: 100%;
|
20 | -webkit-text-size-adjust: 100%;
|
21 | }
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | body {
|
28 | margin: 0;
|
29 | }
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | article,
|
41 | aside,
|
42 | details,
|
43 | figcaption,
|
44 | figure,
|
45 | footer,
|
46 | header,
|
47 | main,
|
48 | menu,
|
49 | nav,
|
50 | section,
|
51 | summary {
|
52 | display: block;
|
53 | }
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 | audio,
|
60 | canvas,
|
61 | progress,
|
62 | video {
|
63 | display: inline-block;
|
64 | }
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 | audio:not([controls]) {
|
71 | display: none;
|
72 | height: 0;
|
73 | }
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 | progress {
|
80 | vertical-align: baseline;
|
81 | }
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 | template,
|
89 | [hidden] {
|
90 | display: none;
|
91 | }
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | a {
|
102 | background-color: transparent;
|
103 | -webkit-text-decoration-skip: objects;
|
104 | }
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 | a:active,
|
112 | a:hover {
|
113 | outline-width: 0;
|
114 | }
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 | abbr[title] {
|
125 | border-bottom: none;
|
126 | text-decoration: underline;
|
127 | text-decoration: underline dotted;
|
128 | }
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 | b,
|
135 | strong {
|
136 | font-weight: inherit;
|
137 | }
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 | b,
|
144 | strong {
|
145 | font-weight: bolder;
|
146 | }
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | dfn {
|
153 | font-style: italic;
|
154 | }
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 | h1 {
|
162 | font-size: 2em;
|
163 | margin: 0.67em 0;
|
164 | }
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 | mark {
|
171 | background-color: #ff0;
|
172 | color: #000;
|
173 | }
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 | small {
|
180 | font-size: 80%;
|
181 | }
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 | sub,
|
189 | sup {
|
190 | font-size: 75%;
|
191 | line-height: 0;
|
192 | position: relative;
|
193 | vertical-align: baseline;
|
194 | }
|
195 |
|
196 | sub {
|
197 | bottom: -0.25em;
|
198 | }
|
199 |
|
200 | sup {
|
201 | top: -0.5em;
|
202 | }
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 | img {
|
212 | border-style: none;
|
213 | }
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 | svg:not(:root) {
|
220 | overflow: hidden;
|
221 | }
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 | code,
|
232 | kbd,
|
233 | pre,
|
234 | samp {
|
235 | font-family: monospace, monospace;
|
236 | font-size: 1em;
|
237 | }
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 | figure {
|
244 | margin: 1em 40px;
|
245 | }
|
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 | hr {
|
253 | box-sizing: content-box;
|
254 | height: 0;
|
255 | overflow: visible;
|
256 | }
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 |
|
264 |
|
265 |
|
266 | button,
|
267 | input,
|
268 | select,
|
269 | textarea {
|
270 | font: inherit;
|
271 | margin: 0;
|
272 | }
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 | optgroup {
|
279 | font-weight: bold;
|
280 | }
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 |
|
287 | button,
|
288 | input {
|
289 | overflow: visible;
|
290 | }
|
291 |
|
292 |
|
293 |
|
294 |
|
295 |
|
296 |
|
297 | button,
|
298 | select {
|
299 | text-transform: none;
|
300 | }
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 |
|
307 |
|
308 | button,
|
309 | html [type="button"],
|
310 | [type="reset"],
|
311 | [type="submit"] {
|
312 | -webkit-appearance: button;
|
313 | }
|
314 |
|
315 |
|
316 |
|
317 |
|
318 |
|
319 | button::-moz-focus-inner,
|
320 | [type="button"]::-moz-focus-inner,
|
321 | [type="reset"]::-moz-focus-inner,
|
322 | [type="submit"]::-moz-focus-inner {
|
323 | border-style: none;
|
324 | padding: 0;
|
325 | }
|
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 | button:-moz-focusring,
|
332 | [type="button"]:-moz-focusring,
|
333 | [type="reset"]:-moz-focusring,
|
334 | [type="submit"]:-moz-focusring {
|
335 | outline: 1px dotted ButtonText;
|
336 | }
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 | fieldset {
|
343 | border: 1px solid #c0c0c0;
|
344 | margin: 0 2px;
|
345 | padding: 0.35em 0.625em 0.75em;
|
346 | }
|
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 | legend {
|
356 | box-sizing: border-box;
|
357 | color: inherit;
|
358 | display: table;
|
359 | max-width: 100%;
|
360 | padding: 0;
|
361 | white-space: normal;
|
362 | }
|
363 |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 | textarea {
|
369 | overflow: auto;
|
370 | }
|
371 |
|
372 |
|
373 |
|
374 |
|
375 |
|
376 |
|
377 | [type="checkbox"],
|
378 | [type="radio"] {
|
379 | box-sizing: border-box;
|
380 | padding: 0;
|
381 | }
|
382 |
|
383 |
|
384 |
|
385 |
|
386 |
|
387 | [type="number"]::-webkit-inner-spin-button,
|
388 | [type="number"]::-webkit-outer-spin-button {
|
389 | height: auto;
|
390 | }
|
391 |
|
392 |
|
393 |
|
394 |
|
395 |
|
396 |
|
397 | [type="search"] {
|
398 | -webkit-appearance: textfield;
|
399 | outline-offset: -2px;
|
400 | }
|
401 |
|
402 |
|
403 |
|
404 |
|
405 |
|
406 | [type="search"]::-webkit-search-cancel-button,
|
407 | [type="search"]::-webkit-search-decoration {
|
408 | -webkit-appearance: none;
|
409 | }
|
410 |
|
411 |
|
412 |
|
413 |
|
414 |
|
415 | ::-webkit-input-placeholder {
|
416 | color: inherit;
|
417 | opacity: 0.54;
|
418 | }
|
419 |
|
420 |
|
421 |
|
422 |
|
423 |
|
424 |
|
425 | ::-webkit-file-upload-button {
|
426 | -webkit-appearance: button;
|
427 | font: inherit;
|
428 | }
|
429 |
|
430 |
|
431 | body{
|
432 | font-family: -apple-system, BlinkMacSystemFont,
|
433 | "Segoe UI", "Roboto", "Oxygen",
|
434 | "Ubuntu", "Cantarell", "Fira Sans",
|
435 | "Droid Sans", "Helvetica Neue", sans-serif
|
436 | }
|
437 |
|
438 | p{
|
439 | margin: 0;
|
440 | margin-bottom: $spacing-small;
|
441 | }
|
442 |
|
443 | pre{
|
444 | -webkit-margin-before: 0;
|
445 | -webkit-margin-after: 0;
|
446 | margin: 0;
|
447 | }
|
448 |
|
449 | h1,h2,h3,h4,h5,h6{
|
450 | -webkit-margin-before: 0;
|
451 | -webkit-margin-after: 0;
|
452 | margin: 0;
|
453 | margin-bottom: $spacing-small;
|
454 | }
|
455 |
|
456 | h1{
|
457 | font-size: $font-size-xlarge;
|
458 | font-weight: bold;
|
459 | }
|
460 |
|
461 | h2{
|
462 | font-size: $font-size-large;
|
463 | font-weight: bold;
|
464 | }
|
465 |
|
466 | h3{
|
467 | font-size: $font-size-medium;
|
468 | font-weight: bold;
|
469 | }
|
470 |
|
471 | ul, li{
|
472 | margin: 0;
|
473 | padding: 0;
|
474 | -webkit-padding-start: 0;
|
475 | }
|
476 |
|
477 | ul{
|
478 | margin-top: $spacing-small;
|
479 | }
|
480 |
|
481 | li{
|
482 | margin-left: $spacing-small*1.1;
|
483 | margin-bottom: $spacing-xxsmall
|
484 | }
|
485 | // DO NOT IMPORT THIS MORE THAN ONCE
|
486 | @each $c-color in $colors{
|
487 | $color: nth($c-color, 2);
|
488 | .fg-#{nth($c-color, 1)}{
|
489 | color: #{$color};
|
490 | }
|
491 | .bg-#{nth($c-color, 1)}{
|
492 | background-color: #{$color};
|
493 | }
|
494 | .btn.bg-#{nth($c-color, 1)}{
|
495 | color: white;
|
496 | background-color: $color;
|
497 | &.shadow{
|
498 | @include button-shadow($color);
|
499 | }
|
500 | }
|
501 | }
|
502 |
|
503 | .flex-override {
|
504 | position: absolute !important;
|
505 | width: 100%;
|
506 | height: 100%;
|
507 | top: 0;
|
508 | left: 0;
|
509 | right: 0;
|
510 | bottom: 0;
|
511 | padding-left: inherit;
|
512 | padding-right: inherit;
|
513 | padding-top: inherit;
|
514 | padding-bottom: inherit;
|
515 | box-sizing: border-box;
|
516 | }
|
517 |
|
518 | .t-align-center{
|
519 | text-align: center;
|
520 | }
|
521 |
|
522 | .t-align-left{
|
523 | text-align: left;
|
524 | }
|
525 |
|
526 | .t-align-right{
|
527 | text-align: right;
|
528 | }
|
529 |
|
530 | .width-wrapper{
|
531 | max-width: $fixed-site-width;
|
532 | margin: 0 auto;
|
533 | }
|
534 |
|
535 | $sides: top bottom left right;
|
536 |
|
537 | @each $size in $spacing-sizes{
|
538 | .m-#{nth($size, 1)}{
|
539 | margin: nth($size, 2);
|
540 | }
|
541 | .p-#{nth($size, 1)}{
|
542 | padding: nth($size, 2);
|
543 | }
|
544 | @each $side in $sides{
|
545 | .m-#{$side}-#{nth($size, 1)}{
|
546 | margin-#{$side}: nth($size, 2);
|
547 | }
|
548 | .p-#{$side}-#{nth($size, 1)}{
|
549 | padding-#{$side}: nth($size, 2);
|
550 | }
|
551 | }
|
552 | }
|
553 |
|
554 | @each $f-size in $font-sizes{
|
555 | $size: nth($f-size, 2);
|
556 | .f-size-#{nth($f-size, 1)}{
|
557 | font-size: $size;
|
558 | }
|
559 | }
|
560 |
|
561 |
|
562 |
|
563 | img.rounded{
|
564 | border-radius: 50%;
|
565 | }
|
566 | @keyframes fade-in {
|
567 | 0% {
|
568 | opacity: 0;
|
569 | }
|
570 |
|
571 | 100% {
|
572 | opacity: 1;
|
573 | }
|
574 | }
|
575 |
|
576 | @keyframes scale-down {
|
577 | 0% {
|
578 | transform: scale(1.2, 1.2);
|
579 | opacity: 0;
|
580 | }
|
581 |
|
582 | 100% {
|
583 | transform: scale(1, 1);
|
584 | opacity: 1;
|
585 | }
|
586 | }
|
587 | $dialog-header-height: 50px;
|
588 |
|
589 | .dialog-layer {
|
590 | box-sizing: border-box;
|
591 | height: 100%;
|
592 | width: 100%;
|
593 | position: fixed;
|
594 | top: 0;
|
595 | bottom: 0;
|
596 | left: 0;
|
597 | right: 0;
|
598 | background-color: rgba(0, 0, 0, 0.3);
|
599 | display: flex;
|
600 | align-items: center;
|
601 | justify-content: center;
|
602 | padding: $spacing-small;
|
603 | z-index: 255;
|
604 | animation-name: fade-in;
|
605 | animation-duration: 0.2s;
|
606 |
|
607 | .dialog {
|
608 | position: relative;
|
609 | max-height: calc(100% - #{$spacing-small * 2});
|
610 | width: 400px;
|
611 | background-color: white;
|
612 | display: flex;
|
613 | flex-direction: column;
|
614 | animation-name: scale-down;
|
615 | animation-duration: 0.3s;
|
616 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
|
617 | @include cubic-bezier(0.835, 0.305, 0.190, 1.250);
|
618 |
|
619 | .dialog-content {
|
620 | overflow: auto;
|
621 | flex: 1;
|
622 | flex-basis: auto;
|
623 | padding: $spacing-small;
|
624 | box-sizing: content-box;
|
625 | p:only-of-type{
|
626 | margin: 0;
|
627 | }
|
628 | }
|
629 |
|
630 | .dialog-footer {
|
631 | flex: 0 0 auto;
|
632 | padding: $spacing-small;
|
633 | .btn{
|
634 | margin-bottom: 0;
|
635 | }
|
636 | }
|
637 |
|
638 | .dialog-close-button{
|
639 | cursor: pointer;
|
640 | display: flex;
|
641 | align-items: center;
|
642 | justify-content: center;
|
643 | background-color: rgba(0,0,0,0.2);
|
644 | height: 100%;
|
645 | width: $dialog-header-height;
|
646 | position: absolute;
|
647 | right: 0;
|
648 | top: 0;
|
649 | color: white;
|
650 | }
|
651 |
|
652 | .dialog-close-button-no-title{
|
653 | @extend .dialog-close-button;
|
654 | height: 50px;
|
655 | background: none;
|
656 | color: rgba(0,0,0,0.7);
|
657 | }
|
658 |
|
659 | .dialog-header {
|
660 | flex: 0 0 auto;
|
661 | background-color: $gray-base;
|
662 | color: $white;
|
663 | padding: $spacing-small;
|
664 | position: relative;
|
665 | }
|
666 | }
|
667 | }
|
668 |
|
669 |
|
670 | @keyframes spin {
|
671 | 0% {
|
672 | transform: rotate(0deg);
|
673 | }
|
674 |
|
675 | 100% {
|
676 | transform: rotate(360deg);
|
677 | }
|
678 | }
|
679 |
|
680 | .btn {
|
681 | position: relative;
|
682 | background-color: $gray-medium;
|
683 | color: white;
|
684 | padding: $field-padding-vertical $field-padding-horizontal;
|
685 | cursor: pointer;
|
686 | transition: all 0.1s;
|
687 | border: none;
|
688 | border-radius: $corner-radius-small;
|
689 | outline: none;
|
690 |
|
691 | &:active:not(:disabled) {
|
692 | transform: translateY(2px);
|
693 | }
|
694 |
|
695 | .left-icon {
|
696 | margin-right: $spacing-xsmall;
|
697 | }
|
698 |
|
699 | .right-icon {
|
700 | margin-left: $spacing-xsmall;
|
701 | }
|
702 |
|
703 | &.rounded {
|
704 | border-radius: 30px;
|
705 | }
|
706 |
|
707 | &:disabled {
|
708 | opacity: 0.4;
|
709 | cursor: default;
|
710 | }
|
711 |
|
712 | &.icon-button-left {
|
713 | padding-left: $field-padding-horizontal;
|
714 | }
|
715 |
|
716 | &.icon-button-right {
|
717 | padding-right: $field-padding-horizontal;
|
718 | }
|
719 |
|
720 | &.shadow {
|
721 | @include button-shadow($gray-medium);
|
722 | }
|
723 |
|
724 | &:before {
|
725 | content: '';
|
726 | display: inline-block;
|
727 | width: 0;
|
728 | transition: 0.2s width;
|
729 | }
|
730 |
|
731 | &.pending {
|
732 | &:before {
|
733 | height: 10px;
|
734 | width: 25px;
|
735 | }
|
736 |
|
737 | &:after {
|
738 | position: absolute;
|
739 | left: $field-padding-horizontal;
|
740 | content: '';
|
741 | height: 15px;
|
742 | width: 15px;
|
743 | border-bottom: 1px solid white;
|
744 | border-radius: 50%;
|
745 | animation: spin 0.75s linear infinite;
|
746 | }
|
747 | }
|
748 | }
|
749 |
|
750 | %align {
|
751 | display: flex;
|
752 | flex-direction: row;
|
753 | }
|
754 |
|
755 | %wrap-row {
|
756 | flex-wrap: wrap;
|
757 | }
|
758 |
|
759 | %align-content-horizontal-center {
|
760 | @extend %align;
|
761 | justify-content: center;
|
762 | }
|
763 |
|
764 | %align-content-vertical-center {
|
765 | @extend %align;
|
766 | align-items: center;
|
767 | }
|
768 |
|
769 | %align-content-vertical-top {
|
770 | @extend %align;
|
771 | align-items: flex-start;
|
772 | }
|
773 |
|
774 | %align-content-vertical-bottom {
|
775 | @extend %align;
|
776 | align-items: flex-end;
|
777 | }
|
778 |
|
779 | %align-content-horizontal-left {
|
780 | @extend %align;
|
781 | justify-content: flex-start;
|
782 | }
|
783 |
|
784 | %align-content-horizontal-right {
|
785 | @extend %align;
|
786 | justify-content: flex-end;
|
787 | }
|
788 |
|
789 | %align-content-center-both {
|
790 | @extend %align-content-horizontal-center;
|
791 | @extend %align-content-vertical-center;
|
792 | }
|
793 |
|
794 | .grid {
|
795 | .row {
|
796 | display: flex;
|
797 | flex: 1 1 0%;
|
798 |
|
799 | .col {
|
800 | flex: 1 1 0%;
|
801 | }
|
802 | }
|
803 |
|
804 | &.fixed {
|
805 | flex: 0 1 0%;
|
806 | }
|
807 | }
|
808 |
|
809 | .grid,
|
810 | .row,
|
811 | .col {
|
812 | box-sizing: border-box;
|
813 | background-repeat: no-repeat;
|
814 | background-size: cover;
|
815 |
|
816 |
|
817 |
|
818 | min-height: 0;
|
819 | min-width: 0;
|
820 | }
|
821 |
|
822 | .wrap-row {
|
823 | @extend %wrap-row;
|
824 | }
|
825 |
|
826 | .align-con-h-center {
|
827 | @extend %align-content-horizontal-center;
|
828 | }
|
829 |
|
830 | .align-con-v-center {
|
831 | @extend %align-content-vertical-center;
|
832 | }
|
833 |
|
834 | .align-con-v-top {
|
835 | @extend %align-content-vertical-top;
|
836 | }
|
837 |
|
838 | .align-con-v-bottom {
|
839 | @extend %align-content-vertical-bottom;
|
840 | }
|
841 |
|
842 | .align-con-h-left {
|
843 | @extend %align-content-horizontal-left;
|
844 | }
|
845 |
|
846 | .align-con-h-right {
|
847 | @extend %align-content-horizontal-right;
|
848 | }
|
849 |
|
850 | .fill-container {
|
851 | display: flex;
|
852 | flex-direction: column;
|
853 | width: 100%;
|
854 | min-height: 100%;
|
855 | flex: 1;
|
856 | justify-content: center;
|
857 | }
|
858 |
|
859 | .grid-debug {
|
860 | border: 1px dashed green;
|
861 | position: relative;
|
862 |
|
863 | > .row {
|
864 | border: 1px dashed blue;
|
865 |
|
866 | > .col {
|
867 | border: 1px dashed red;
|
868 | }
|
869 | }
|
870 | }
|
871 |
|
872 | .no-flex {
|
873 | flex: none !important;
|
874 | }
|
875 |
|
876 | .element-sample {
|
877 | table {
|
878 | margin-bottom: 30px;
|
879 | background-color: $gray-very-light;
|
880 |
|
881 | thead {
|
882 | background-color: $gray-medium;
|
883 | color: $white;
|
884 | }
|
885 |
|
886 | td {
|
887 | padding: 10px;
|
888 | }
|
889 |
|
890 | tr:nth-of-type(even) {
|
891 | background-color: $gray-light;
|
892 | }
|
893 | }
|
894 |
|
895 | pre {
|
896 | padding: 10px;
|
897 | background-color: $gray-medium;
|
898 | color: $white;
|
899 | margin-bottom: 30px;
|
900 | white-space: pre-wrap;
|
901 | }
|
902 | margin-bottom: 50px;
|
903 | } |
\ | No newline at end of file |