tycho-components 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/preview.tsx +2 -2
- package/package.json +15 -13
- package/src/AppModal/AppModal.tsx +14 -12
- package/src/AppModal/AppModalConfirm.tsx +10 -11
- package/src/AppModal/AppModalRemove.tsx +9 -4
- package/src/AppModal/style.scss +1 -1
- package/src/Participants/ParticipantCreate/ParticipantCreate.tsx +1 -1
- package/src/Participants/Participants.tsx +5 -5
- package/src/TextField/TextField.stories.tsx +54 -0
- package/src/TextField/TextField.tsx +172 -0
- package/src/TextField/TextFieldTheme.ts +70 -0
- package/src/TextField/index.tsx +3 -0
- package/src/TextField/inputRefManager.ts +24 -0
- package/src/TextField/styles.scss +36 -0
- package/src/configs/Localization.ts +1 -1
- package/src/configs/localization/CommonTexts.ts +1 -0
- package/src/configs/localization/ParticipantsTexts.ts +1 -1
- package/src/index.ts +1 -0
- package/src/new-styles/base/_borders.scss +30 -0
- package/src/new-styles/base/_colors.scss +100 -0
- package/src/new-styles/base/_displays.scss +207 -0
- package/src/new-styles/base/_margins.css +174 -0
- package/src/new-styles/base/_spacing.scss +26 -0
- package/src/new-styles/base/_tokens.scss +329 -0
- package/src/new-styles/base/_typographs.scss +348 -0
- package/src/new-styles/main.scss +27 -0
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// borders, dividers and border radius
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--border-0: 0px;
|
|
5
|
+
--border-050: 0.5px;
|
|
6
|
+
--border-100: 1px;
|
|
7
|
+
--border-150: 1.5px;
|
|
8
|
+
--border-200: 2px;
|
|
9
|
+
--border-250: 2.5px;
|
|
10
|
+
--border-300: 3px;
|
|
11
|
+
--border-400: 4px;
|
|
12
|
+
--border-500: 5px;
|
|
13
|
+
--border-600: 6px;
|
|
14
|
+
--border-700: 7px;
|
|
15
|
+
--border-800: 8px;
|
|
16
|
+
|
|
17
|
+
--radius-0: 0px;
|
|
18
|
+
--radius-050: 2px;
|
|
19
|
+
--radius-100: 4px;
|
|
20
|
+
--radius-200: 8px;
|
|
21
|
+
--radius-300: 12px;
|
|
22
|
+
--radius-400: 16px;
|
|
23
|
+
--radius-500: 20px;
|
|
24
|
+
--radius-600: 24px;
|
|
25
|
+
--radius-700: 28px;
|
|
26
|
+
--radius-800: 32px;
|
|
27
|
+
--radius-900: 36px;
|
|
28
|
+
--radius-1000: 40px;
|
|
29
|
+
--radius-full: 999px;
|
|
30
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
// colors, tonal scales for accent, neutral and semantic
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--accent-0: #000000;
|
|
5
|
+
--accent-10: #142e57;
|
|
6
|
+
--accent-100: #ffffff;
|
|
7
|
+
--accent-20: #194c8f;
|
|
8
|
+
--accent-30: #185abd;
|
|
9
|
+
--accent-40: #146ce1;
|
|
10
|
+
--accent-50: #1c83f4;
|
|
11
|
+
--accent-60: #32a2ff;
|
|
12
|
+
--accent-70: #59bfff;
|
|
13
|
+
--accent-80: #8ed8ff;
|
|
14
|
+
--accent-90: #bce6ff;
|
|
15
|
+
--accent-95: #d9f0ff;
|
|
16
|
+
--accent-99: #eef9ff;
|
|
17
|
+
--high-contrast-blue: #6bfdff;
|
|
18
|
+
--high-contrast-dark: #000000;
|
|
19
|
+
--high-contrast-green: #7bff57;
|
|
20
|
+
--high-contrast-light: #ffffff;
|
|
21
|
+
--high-contrast-yellow: #fff81f;
|
|
22
|
+
--neutral-dark-0: #ffffff;
|
|
23
|
+
--neutral-dark-10: #f6f7f9;
|
|
24
|
+
--neutral-dark-100: #000000;
|
|
25
|
+
--neutral-dark-20: #ebeef3;
|
|
26
|
+
--neutral-dark-30: #d3d9e4;
|
|
27
|
+
--neutral-dark-40: #acb9cd;
|
|
28
|
+
--neutral-dark-50: #7f94b1;
|
|
29
|
+
--neutral-dark-60: #5f7698;
|
|
30
|
+
--neutral-dark-70: #4b5f7e;
|
|
31
|
+
--neutral-dark-80: #42526e;
|
|
32
|
+
--neutral-dark-90: #364256;
|
|
33
|
+
--neutral-dark-95: #30394a;
|
|
34
|
+
--neutral-dark-99: #202531;
|
|
35
|
+
--neutral-light-0: #000000;
|
|
36
|
+
--neutral-light-10: #141415;
|
|
37
|
+
--neutral-light-100: #ffffff;
|
|
38
|
+
--neutral-light-20: #252627;
|
|
39
|
+
--neutral-light-30: #434447;
|
|
40
|
+
--neutral-light-40: #5c5e61;
|
|
41
|
+
--neutral-light-50: #707276;
|
|
42
|
+
--neutral-light-60: #9d9fa2;
|
|
43
|
+
--neutral-light-70: #bebfc1;
|
|
44
|
+
--neutral-light-80: #cbcccd;
|
|
45
|
+
--neutral-light-90: #eaeaeb;
|
|
46
|
+
--neutral-light-95: #f7f7f8;
|
|
47
|
+
--neutral-light-99: #f9fafb;
|
|
48
|
+
--semantic-danger-0: #000000;
|
|
49
|
+
--semantic-danger-10: #44060c;
|
|
50
|
+
--semantic-danger-100: #ffffff;
|
|
51
|
+
--semantic-danger-20: #7e1015;
|
|
52
|
+
--semantic-danger-30: #9d0f16;
|
|
53
|
+
--semantic-danger-40: #c6080a;
|
|
54
|
+
--semantic-danger-50: #ef1207;
|
|
55
|
+
--semantic-danger-60: #fe3820;
|
|
56
|
+
--semantic-danger-70: #ff5638;
|
|
57
|
+
--semantic-danger-80: #ff8f71;
|
|
58
|
+
--semantic-danger-90: #ffbda8;
|
|
59
|
+
--semantic-danger-95: #ffe0d4;
|
|
60
|
+
--semantic-danger-99: #fff2ed;
|
|
61
|
+
--semantic-info-0: #000000;
|
|
62
|
+
--semantic-info-10: #440055;
|
|
63
|
+
--semantic-info-100: #ffffff;
|
|
64
|
+
--semantic-info-20: #68127d;
|
|
65
|
+
--semantic-info-30: #7c0e9a;
|
|
66
|
+
--semantic-info-40: #950fbc;
|
|
67
|
+
--semantic-info-50: #b720e9;
|
|
68
|
+
--semantic-info-60: #c837fe;
|
|
69
|
+
--semantic-info-70: #dc6dff;
|
|
70
|
+
--semantic-info-80: #e8a4ff;
|
|
71
|
+
--semantic-info-90: #f1ccff;
|
|
72
|
+
--semantic-info-95: #f8e6ff;
|
|
73
|
+
--semantic-info-99: #f8e6ff;
|
|
74
|
+
--semantic-success-0: #000000;
|
|
75
|
+
--semantic-success-10: #182c07;
|
|
76
|
+
--semantic-success-100: #ffffff;
|
|
77
|
+
--semantic-success-20: #335017;
|
|
78
|
+
--semantic-success-30: #3b5e16;
|
|
79
|
+
--semantic-success-40: #477714;
|
|
80
|
+
--semantic-success-50: #5c9c14;
|
|
81
|
+
--semantic-success-60: #70b51c;
|
|
82
|
+
--semantic-success-70: #98de3d;
|
|
83
|
+
--semantic-success-80: #b5ec6a;
|
|
84
|
+
--semantic-success-90: #d3f5a1;
|
|
85
|
+
--semantic-success-95: #e9facd;
|
|
86
|
+
--semantic-success-99: #f6fde8;
|
|
87
|
+
--semantic-warning-0: #000000;
|
|
88
|
+
--semantic-warning-10: #461702;
|
|
89
|
+
--semantic-warning-100: #ffffff;
|
|
90
|
+
--semantic-warning-20: #7a310d;
|
|
91
|
+
--semantic-warning-30: #943a0c;
|
|
92
|
+
--semantic-warning-40: #b74c06;
|
|
93
|
+
--semantic-warning-50: #dd6f02;
|
|
94
|
+
--semantic-warning-60: #f99607;
|
|
95
|
+
--semantic-warning-70: #ffb920;
|
|
96
|
+
--semantic-warning-80: #ffc938;
|
|
97
|
+
--semantic-warning-90: #ffe388;
|
|
98
|
+
--semantic-warning-95: #fff2c6;
|
|
99
|
+
--semantic-warning-99: #fffaeb;
|
|
100
|
+
}
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
/* Display none */
|
|
2
|
+
.d-none {
|
|
3
|
+
display: none !important;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
/* Display block */
|
|
7
|
+
.d-block {
|
|
8
|
+
display: block !important;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Display inline */
|
|
12
|
+
.d-inline {
|
|
13
|
+
display: inline !important;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* Display inline-block */
|
|
17
|
+
.d-inline-block {
|
|
18
|
+
display: inline-block !important;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Display flex */
|
|
22
|
+
.d-flex {
|
|
23
|
+
display: flex !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Display inline-flex */
|
|
27
|
+
.d-inline-flex {
|
|
28
|
+
display: inline-flex !important;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Display grid */
|
|
32
|
+
.d-grid {
|
|
33
|
+
display: grid !important;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* Display inline-grid */
|
|
37
|
+
.d-inline-grid {
|
|
38
|
+
display: inline-grid !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Responsive display classes */
|
|
42
|
+
|
|
43
|
+
/* Extra small (xs) */
|
|
44
|
+
.d-xs-none {
|
|
45
|
+
display: none !important;
|
|
46
|
+
}
|
|
47
|
+
.d-xs-block {
|
|
48
|
+
display: block !important;
|
|
49
|
+
}
|
|
50
|
+
.d-xs-inline {
|
|
51
|
+
display: inline !important;
|
|
52
|
+
}
|
|
53
|
+
.d-xs-inline-block {
|
|
54
|
+
display: inline-block !important;
|
|
55
|
+
}
|
|
56
|
+
.d-xs-flex {
|
|
57
|
+
display: flex !important;
|
|
58
|
+
}
|
|
59
|
+
.d-xs-inline-flex {
|
|
60
|
+
display: inline-flex !important;
|
|
61
|
+
}
|
|
62
|
+
.d-xs-grid {
|
|
63
|
+
display: grid !important;
|
|
64
|
+
}
|
|
65
|
+
.d-xs-inline-grid {
|
|
66
|
+
display: inline-grid !important;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Small (sm) */
|
|
70
|
+
@media (min-width: 576px) {
|
|
71
|
+
.d-sm-none {
|
|
72
|
+
display: none !important;
|
|
73
|
+
}
|
|
74
|
+
.d-sm-block {
|
|
75
|
+
display: block !important;
|
|
76
|
+
}
|
|
77
|
+
.d-sm-inline {
|
|
78
|
+
display: inline !important;
|
|
79
|
+
}
|
|
80
|
+
.d-sm-inline-block {
|
|
81
|
+
display: inline-block !important;
|
|
82
|
+
}
|
|
83
|
+
.d-sm-flex {
|
|
84
|
+
display: flex !important;
|
|
85
|
+
}
|
|
86
|
+
.d-sm-inline-flex {
|
|
87
|
+
display: inline-flex !important;
|
|
88
|
+
}
|
|
89
|
+
.d-sm-grid {
|
|
90
|
+
display: grid !important;
|
|
91
|
+
}
|
|
92
|
+
.d-sm-inline-grid {
|
|
93
|
+
display: inline-grid !important;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Medium (md) */
|
|
98
|
+
@media (min-width: 768px) {
|
|
99
|
+
.d-md-none {
|
|
100
|
+
display: none !important;
|
|
101
|
+
}
|
|
102
|
+
.d-md-block {
|
|
103
|
+
display: block !important;
|
|
104
|
+
}
|
|
105
|
+
.d-md-inline {
|
|
106
|
+
display: inline !important;
|
|
107
|
+
}
|
|
108
|
+
.d-md-inline-block {
|
|
109
|
+
display: inline-block !important;
|
|
110
|
+
}
|
|
111
|
+
.d-md-flex {
|
|
112
|
+
display: flex !important;
|
|
113
|
+
}
|
|
114
|
+
.d-md-inline-flex {
|
|
115
|
+
display: inline-flex !important;
|
|
116
|
+
}
|
|
117
|
+
.d-md-grid {
|
|
118
|
+
display: grid !important;
|
|
119
|
+
}
|
|
120
|
+
.d-md-inline-grid {
|
|
121
|
+
display: inline-grid !important;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Large (lg) */
|
|
126
|
+
@media (min-width: 992px) {
|
|
127
|
+
.d-lg-none {
|
|
128
|
+
display: none !important;
|
|
129
|
+
}
|
|
130
|
+
.d-lg-block {
|
|
131
|
+
display: block !important;
|
|
132
|
+
}
|
|
133
|
+
.d-lg-inline {
|
|
134
|
+
display: inline !important;
|
|
135
|
+
}
|
|
136
|
+
.d-lg-inline-block {
|
|
137
|
+
display: inline-block !important;
|
|
138
|
+
}
|
|
139
|
+
.d-lg-flex {
|
|
140
|
+
display: flex !important;
|
|
141
|
+
}
|
|
142
|
+
.d-lg-inline-flex {
|
|
143
|
+
display: inline-flex !important;
|
|
144
|
+
}
|
|
145
|
+
.d-lg-grid {
|
|
146
|
+
display: grid !important;
|
|
147
|
+
}
|
|
148
|
+
.d-lg-inline-grid {
|
|
149
|
+
display: inline-grid !important;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Extra Large (xl) */
|
|
154
|
+
@media (min-width: 1200px) {
|
|
155
|
+
.d-xl-none {
|
|
156
|
+
display: none !important;
|
|
157
|
+
}
|
|
158
|
+
.d-xl-block {
|
|
159
|
+
display: block !important;
|
|
160
|
+
}
|
|
161
|
+
.d-xl-inline {
|
|
162
|
+
display: inline !important;
|
|
163
|
+
}
|
|
164
|
+
.d-xl-inline-block {
|
|
165
|
+
display: inline-block !important;
|
|
166
|
+
}
|
|
167
|
+
.d-xl-flex {
|
|
168
|
+
display: flex !important;
|
|
169
|
+
}
|
|
170
|
+
.d-xl-inline-flex {
|
|
171
|
+
display: inline-flex !important;
|
|
172
|
+
}
|
|
173
|
+
.d-xl-grid {
|
|
174
|
+
display: grid !important;
|
|
175
|
+
}
|
|
176
|
+
.d-xl-inline-grid {
|
|
177
|
+
display: inline-grid !important;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Extra Extra Large (xxl) */
|
|
182
|
+
@media (min-width: 1400px) {
|
|
183
|
+
.d-xxl-none {
|
|
184
|
+
display: none !important;
|
|
185
|
+
}
|
|
186
|
+
.d-xxl-block {
|
|
187
|
+
display: block !important;
|
|
188
|
+
}
|
|
189
|
+
.d-xxl-inline {
|
|
190
|
+
display: inline !important;
|
|
191
|
+
}
|
|
192
|
+
.d-xxl-inline-block {
|
|
193
|
+
display: inline-block !important;
|
|
194
|
+
}
|
|
195
|
+
.d-xxl-flex {
|
|
196
|
+
display: flex !important;
|
|
197
|
+
}
|
|
198
|
+
.d-xxl-inline-flex {
|
|
199
|
+
display: inline-flex !important;
|
|
200
|
+
}
|
|
201
|
+
.d-xxl-grid {
|
|
202
|
+
display: grid !important;
|
|
203
|
+
}
|
|
204
|
+
.d-xxl-inline-grid {
|
|
205
|
+
display: inline-grid !important;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
/* Margin for all sides */
|
|
2
|
+
.m-0 {
|
|
3
|
+
margin: 0 !important;
|
|
4
|
+
}
|
|
5
|
+
.m-1 {
|
|
6
|
+
margin: 0.25rem !important;
|
|
7
|
+
}
|
|
8
|
+
.m-2 {
|
|
9
|
+
margin: 0.5rem !important;
|
|
10
|
+
}
|
|
11
|
+
.m-3 {
|
|
12
|
+
margin: 1rem !important;
|
|
13
|
+
}
|
|
14
|
+
.m-4 {
|
|
15
|
+
margin: 1.5rem !important;
|
|
16
|
+
}
|
|
17
|
+
.m-5 {
|
|
18
|
+
margin: 3rem !important;
|
|
19
|
+
}
|
|
20
|
+
.m-auto {
|
|
21
|
+
margin: auto !important;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Margin-top */
|
|
25
|
+
.mt-0 {
|
|
26
|
+
margin-top: 0 !important;
|
|
27
|
+
}
|
|
28
|
+
.mt-1 {
|
|
29
|
+
margin-top: 0.25rem !important;
|
|
30
|
+
}
|
|
31
|
+
.mt-2 {
|
|
32
|
+
margin-top: 0.5rem !important;
|
|
33
|
+
}
|
|
34
|
+
.mt-3 {
|
|
35
|
+
margin-top: 1rem !important;
|
|
36
|
+
}
|
|
37
|
+
.mt-4 {
|
|
38
|
+
margin-top: 1.5rem !important;
|
|
39
|
+
}
|
|
40
|
+
.mt-5 {
|
|
41
|
+
margin-top: 3rem !important;
|
|
42
|
+
}
|
|
43
|
+
.mt-auto {
|
|
44
|
+
margin-top: auto !important;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Margin-right */
|
|
48
|
+
.me-0 {
|
|
49
|
+
margin-right: 0 !important;
|
|
50
|
+
}
|
|
51
|
+
.me-1 {
|
|
52
|
+
margin-right: 0.25rem !important;
|
|
53
|
+
}
|
|
54
|
+
.me-2 {
|
|
55
|
+
margin-right: 0.5rem !important;
|
|
56
|
+
}
|
|
57
|
+
.me-3 {
|
|
58
|
+
margin-right: 1rem !important;
|
|
59
|
+
}
|
|
60
|
+
.me-4 {
|
|
61
|
+
margin-right: 1.5rem !important;
|
|
62
|
+
}
|
|
63
|
+
.me-5 {
|
|
64
|
+
margin-right: 3rem !important;
|
|
65
|
+
}
|
|
66
|
+
.me-auto {
|
|
67
|
+
margin-right: auto !important;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Margin-bottom */
|
|
71
|
+
.mb-0 {
|
|
72
|
+
margin-bottom: 0 !important;
|
|
73
|
+
}
|
|
74
|
+
.mb-1 {
|
|
75
|
+
margin-bottom: 0.25rem !important;
|
|
76
|
+
}
|
|
77
|
+
.mb-2 {
|
|
78
|
+
margin-bottom: 0.5rem !important;
|
|
79
|
+
}
|
|
80
|
+
.mb-3 {
|
|
81
|
+
margin-bottom: 1rem !important;
|
|
82
|
+
}
|
|
83
|
+
.mb-4 {
|
|
84
|
+
margin-bottom: 1.5rem !important;
|
|
85
|
+
}
|
|
86
|
+
.mb-5 {
|
|
87
|
+
margin-bottom: 3rem !important;
|
|
88
|
+
}
|
|
89
|
+
.mb-auto {
|
|
90
|
+
margin-bottom: auto !important;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Margin-left */
|
|
94
|
+
.ms-0 {
|
|
95
|
+
margin-left: 0 !important;
|
|
96
|
+
}
|
|
97
|
+
.ms-1 {
|
|
98
|
+
margin-left: 0.25rem !important;
|
|
99
|
+
}
|
|
100
|
+
.ms-2 {
|
|
101
|
+
margin-left: 0.5rem !important;
|
|
102
|
+
}
|
|
103
|
+
.ms-3 {
|
|
104
|
+
margin-left: 1rem !important;
|
|
105
|
+
}
|
|
106
|
+
.ms-4 {
|
|
107
|
+
margin-left: 1.5rem !important;
|
|
108
|
+
}
|
|
109
|
+
.ms-5 {
|
|
110
|
+
margin-left: 3rem !important;
|
|
111
|
+
}
|
|
112
|
+
.ms-auto {
|
|
113
|
+
margin-left: auto !important;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Horizontal (left + right) margin */
|
|
117
|
+
.mx-0 {
|
|
118
|
+
margin-left: 0 !important;
|
|
119
|
+
margin-right: 0 !important;
|
|
120
|
+
}
|
|
121
|
+
.mx-1 {
|
|
122
|
+
margin-left: 0.25rem !important;
|
|
123
|
+
margin-right: 0.25rem !important;
|
|
124
|
+
}
|
|
125
|
+
.mx-2 {
|
|
126
|
+
margin-left: 0.5rem !important;
|
|
127
|
+
margin-right: 0.5rem !important;
|
|
128
|
+
}
|
|
129
|
+
.mx-3 {
|
|
130
|
+
margin-left: 1rem !important;
|
|
131
|
+
margin-right: 1rem !important;
|
|
132
|
+
}
|
|
133
|
+
.mx-4 {
|
|
134
|
+
margin-left: 1.5rem !important;
|
|
135
|
+
margin-right: 1.5rem !important;
|
|
136
|
+
}
|
|
137
|
+
.mx-5 {
|
|
138
|
+
margin-left: 3rem !important;
|
|
139
|
+
margin-right: 3rem !important;
|
|
140
|
+
}
|
|
141
|
+
.mx-auto {
|
|
142
|
+
margin-left: auto !important;
|
|
143
|
+
margin-right: auto !important;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Vertical (top + bottom) margin */
|
|
147
|
+
.my-0 {
|
|
148
|
+
margin-top: 0 !important;
|
|
149
|
+
margin-bottom: 0 !important;
|
|
150
|
+
}
|
|
151
|
+
.my-1 {
|
|
152
|
+
margin-top: 0.25rem !important;
|
|
153
|
+
margin-bottom: 0.25rem !important;
|
|
154
|
+
}
|
|
155
|
+
.my-2 {
|
|
156
|
+
margin-top: 0.5rem !important;
|
|
157
|
+
margin-bottom: 0.5rem !important;
|
|
158
|
+
}
|
|
159
|
+
.my-3 {
|
|
160
|
+
margin-top: 1rem !important;
|
|
161
|
+
margin-bottom: 1rem !important;
|
|
162
|
+
}
|
|
163
|
+
.my-4 {
|
|
164
|
+
margin-top: 1.5rem !important;
|
|
165
|
+
margin-bottom: 1.5rem !important;
|
|
166
|
+
}
|
|
167
|
+
.my-5 {
|
|
168
|
+
margin-top: 3rem !important;
|
|
169
|
+
margin-bottom: 3rem !important;
|
|
170
|
+
}
|
|
171
|
+
.my-auto {
|
|
172
|
+
margin-top: auto !important;
|
|
173
|
+
margin-bottom: auto !important;
|
|
174
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// spaces
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--spacing-0: 0px;
|
|
5
|
+
--spacing-050: 4px;
|
|
6
|
+
--spacing-075: 6px;
|
|
7
|
+
--spacing-100: 8px;
|
|
8
|
+
--spacing-125: 10px;
|
|
9
|
+
--spacing-150: 12px;
|
|
10
|
+
--spacing-200: 16px;
|
|
11
|
+
--spacing-250: 20px;
|
|
12
|
+
--spacing-300: 24px;
|
|
13
|
+
--spacing-350: 28px;
|
|
14
|
+
--spacing-400: 32px;
|
|
15
|
+
--spacing-500: 40px;
|
|
16
|
+
--spacing-600: 48px;
|
|
17
|
+
--spacing-700: 56px;
|
|
18
|
+
--spacing-800: 64px;
|
|
19
|
+
--spacing-900: 72px;
|
|
20
|
+
--spacing-1000: 80px;
|
|
21
|
+
--spacing-1100: 88px;
|
|
22
|
+
--spacing-1200: 96px;
|
|
23
|
+
--spacing-1300: 104px;
|
|
24
|
+
--spacing-1400: 112px;
|
|
25
|
+
--spacing-1500: 120px;
|
|
26
|
+
}
|