1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | $fixed-site-width: 960px !default;
|
9 |
|
10 |
|
11 |
|
12 | $responsive-large: 70rem !default;
|
13 | $responsive-medium: 55rem !default;
|
14 | $responsive-small: 45rem !default;
|
15 | $responsive-xsmall: 35rem !default;
|
16 |
|
17 |
|
18 | $font-size-root: 16px !default;
|
19 |
|
20 | $font-size-xxsmall: 0.6rem !default;
|
21 | $font-size-xsmall: 0.8rem !default;
|
22 | $font-size-small: 1rem !default;
|
23 | $font-size-medium: 1.2rem !default;
|
24 | $font-size-large: 1.5rem !default;
|
25 | $font-size-xlarge: 2rem !default;
|
26 |
|
27 | $font-sizes:(
|
28 | xxsmall $font-size-xxsmall,
|
29 | xsmall $font-size-xsmall,
|
30 | small $font-size-small,
|
31 | medium $font-size-medium,
|
32 | large $font-size-large,
|
33 | xlarge $font-size-xlarge,
|
34 | );
|
35 |
|
36 |
|
37 |
|
38 | $spacing-xxsmall: 0.25rem !default;
|
39 | $spacing-xsmall: 0.5rem !default;
|
40 | $spacing-small: 1rem !default;
|
41 | $spacing-medium: 2rem !default;
|
42 | $spacing-large: 3rem !default;
|
43 | $spacing-xlarge: 4rem !default;
|
44 |
|
45 | $spacing-sizes: (
|
46 | xxsmall $spacing-xxsmall,
|
47 | xsmall $spacing-xsmall,
|
48 | small $spacing-small,
|
49 | medium $spacing-medium,
|
50 | large $spacing-large,
|
51 | xlarge $spacing-xlarge,
|
52 | none 0
|
53 | ) !default;
|
54 |
|
55 |
|
56 | $field-padding-vertical: 15px !default;
|
57 | $field-padding-horizontal: 17px !default;
|
58 |
|
59 |
|
60 | $white: #ffffff !default;
|
61 |
|
62 | $brand-primary: #cd3939 !default;
|
63 | $brand-secondary: #3d4144 !default;
|
64 |
|
65 | $gray-base: #4f5c69 !default;
|
66 |
|
67 | $gray-very-dark: darken($gray-base, 20%) !default;
|
68 | $gray-dark: darken($gray-base, 15%) !default;
|
69 | $gray-medium: $gray-base !default;
|
70 | $gray-light: lighten($gray-base, 50%) !default;
|
71 | $gray-very-light: lighten($gray-base, 60%) !default;
|
72 |
|
73 | $color-positive: #00a388 !default;
|
74 | $color-warning: #f78e52 !default;
|
75 | $color-negative: #df5a49 !default;
|
76 | $color-info: #3498d8 !default;
|
77 |
|
78 | $colors: (
|
79 | 'positive' $color-positive,
|
80 | 'warning' $color-warning,
|
81 | 'negative' $color-negative,
|
82 | 'info' $color-info,
|
83 | 'brand-primary' $brand-primary,
|
84 | 'brand-secondary' $brand-secondary,
|
85 | 'gray-very-dark' $gray-very-dark,
|
86 | 'gray-dark' $gray-dark,
|
87 | 'gray-medium' $gray-medium,
|
88 | 'gray-light' $gray-light,
|
89 | 'gray-very-light' $gray-very-light,
|
90 | 'white' $white
|
91 | ) !default;
|
92 |
|
93 |
|
94 | $corner-radius-small: 5px !default;
|
95 | $corner-radius-large: 15px !default;
|
96 |
|
97 |
|
98 | $form-field-height: 40px !default;
|
99 | $form-field-bottom-spacing: 10px !default;
|
100 |
|
101 |
|
102 |
|
103 | $animation-duration: 350ms !default;
|
104 | $animation-offset: 55px !default;
|
105 |
|
106 | @mixin reset-appearance {
|
107 | resize: none;
|
108 | outline: none;
|
109 | -webkit-appearance: none;
|
110 | -ms-appearance: none;
|
111 | }
|
112 |
|
113 | @mixin button-shadow($color) {
|
114 | box-shadow: 0 4px 0 darken($color, 20%);
|
115 | &:active:not(:disabled){
|
116 | box-shadow: 0 2px 0 darken($color, 20%);
|
117 | }
|
118 | }
|
119 |
|
120 |
|
121 | @mixin cubic-bezier($t1, $t2, $t3, $t4) {
|
122 | -webkit-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
|
123 | -moz-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
|
124 | -o-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
|
125 | animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
|
126 | }
|
127 |
|
128 | %input-disabled{
|
129 | color: rgba(0, 0, 0, 0.3);
|
130 | background-color: $gray-very-light;
|
131 | }
|