cdui-js 1.0.13 → 1.0.14

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.
Files changed (52) hide show
  1. package/build/css.ts +9 -18
  2. package/css/all.css +8 -3
  3. package/css/base.css +4 -0
  4. package/css/button.css +3 -0
  5. package/css/canlendar.css +1 -26
  6. package/css/carousel.css +0 -3
  7. package/css/combobox.css +5 -25
  8. package/css/datepicker.css +38 -0
  9. package/css/form.css +19 -0
  10. package/css/popup.css +33 -0
  11. package/css/textbox.css +5 -0
  12. package/{css → demo/css}/build.ts +1 -1
  13. package/{css → demo/css}/css.md +45 -4
  14. package/demo/icons/build.ts +17 -0
  15. package/{index.html → demo/index.html} +20 -2
  16. package/demo/src/App.tsx +15 -0
  17. package/demo/src/css/all.css +3 -0
  18. package/demo/src/css/atomic.css +935 -0
  19. package/demo/src/main.ts +10 -0
  20. package/demo/{pages → src/pages}/Canlendar.tsx +1 -1
  21. package/demo/src/pages/ComboBox.tsx +10 -0
  22. package/demo/src/pages/DatePicker.tsx +5 -0
  23. package/demo/src/pages/Form.tsx +66 -0
  24. package/{vite.config.ts → demo/vite.config.ts} +2 -2
  25. package/icons/backward.svg +2 -2
  26. package/icons/close.svg +3 -3
  27. package/icons/dropdown.svg +2 -2
  28. package/icons/forward.svg +2 -2
  29. package/package.json +4 -2
  30. package/src/components/Button.tsx +5 -0
  31. package/src/components/Canlendar.tsx +23 -45
  32. package/src/components/Carousel.tsx +13 -4
  33. package/src/components/CollapsiblePanel.tsx +2 -4
  34. package/src/components/ComboBox.tsx +50 -146
  35. package/src/components/DatePicker.tsx +91 -0
  36. package/src/components/Dialog.ts +1 -1
  37. package/src/components/Form.tsx +141 -418
  38. package/src/components/Icon.tsx +2 -1
  39. package/src/components/Popup.tsx +220 -0
  40. package/src/components/Pulldown.tsx +2 -3
  41. package/src/components/TextBox.tsx +8 -0
  42. package/src/dom.ts +55 -39
  43. package/src/http.ts +23 -19
  44. package/src/i18n/languages/en.json +3 -3
  45. package/src/index.ts +5 -1
  46. package/src/reactive.ts +9 -0
  47. package/demo/App.tsx +0 -31
  48. package/demo/main.ts +0 -7
  49. package/demo/pages/ComboBox.tsx +0 -10
  50. package/demo/pages/Form.tsx +0 -32
  51. package/icons/build.ts +0 -24
  52. /package/demo/{test.js → src/test.js} +0 -0
@@ -0,0 +1,935 @@
1
+ .border { border-color: #E4E4E4 }
2
+ .border-t { border-top-color: #E4E4E4 }
3
+ .border-r { border-right-color: #E4E4E4 }
4
+ .border-b { border-bottom-color: #E4E4E4 }
5
+ .border-l { border-left-color: #E4E4E4 }
6
+
7
+ body { stroke: #A2A7AD; fill: #A2A7AD; }
8
+ .icon { stroke: inherit; fill: inherit; }
9
+ .icon { width: 18px; height: 18px; }
10
+
11
+
12
+
13
+ .margin-XXS { margin: 8px }
14
+ .margin-t-XXS { margin-top: 8px; }
15
+ .margin-r-XXS { margin-right: 8px; }
16
+ .margin-b-XXS { margin-bottom: 8px; }
17
+ .margin-l-XXS { margin-left: 8px; }
18
+ .margin-x-XXS { margin-left: 8px; margin-right: 8px; }
19
+ .margin-y-XXS { margin-top: 8px; margin-bottom: 8px; }
20
+
21
+ .-margin-t-XXS { margin-top: -8px; }
22
+ .-margin-r-XXS { margin-right: -8px; }
23
+ .-margin-b-XXS { margin-bottom: -8px; }
24
+ .-margin-l-XXS { margin-left: -8px; }
25
+ .padding-m-XXS { padding: 8px; }
26
+ .padding-m-t-XXS { padding-top: 8px; }
27
+ .padding-m-r-XXS { padding-right: 8px; }
28
+ .padding-m-b-XXS { padding-bottom: 8px; }
29
+ .padding-m-l-XXS { padding-left: 8px; }
30
+ .padding-m-x-XXS { padding-left: 8px; padding-right: 8px; }
31
+ .padding-m-y-XXS { padding-top: 8px; padding-bottom: 8px; }
32
+
33
+ .margin-XS { margin: 10px }
34
+ .margin-t-XS { margin-top: 10px; }
35
+ .margin-r-XS { margin-right: 10px; }
36
+ .margin-b-XS { margin-bottom: 10px; }
37
+ .margin-l-XS { margin-left: 10px; }
38
+ .margin-x-XS { margin-left: 10px; margin-right: 10px; }
39
+ .margin-y-XS { margin-top: 10px; margin-bottom: 10px; }
40
+
41
+ .-margin-t-XS { margin-top: -10px; }
42
+ .-margin-r-XS { margin-right: -10px; }
43
+ .-margin-b-XS { margin-bottom: -10px; }
44
+ .-margin-l-XS { margin-left: -10px; }
45
+ .padding-m-XS { padding: 10px; }
46
+ .padding-m-t-XS { padding-top: 10px; }
47
+ .padding-m-r-XS { padding-right: 10px; }
48
+ .padding-m-b-XS { padding-bottom: 10px; }
49
+ .padding-m-l-XS { padding-left: 10px; }
50
+ .padding-m-x-XS { padding-left: 10px; padding-right: 10px; }
51
+ .padding-m-y-XS { padding-top: 10px; padding-bottom: 10px; }
52
+
53
+ .margin-S { margin: 12px }
54
+ .margin-t-S { margin-top: 12px; }
55
+ .margin-r-S { margin-right: 12px; }
56
+ .margin-b-S { margin-bottom: 12px; }
57
+ .margin-l-S { margin-left: 12px; }
58
+ .margin-x-S { margin-left: 12px; margin-right: 12px; }
59
+ .margin-y-S { margin-top: 12px; margin-bottom: 12px; }
60
+
61
+ .-margin-t-S { margin-top: -12px; }
62
+ .-margin-r-S { margin-right: -12px; }
63
+ .-margin-b-S { margin-bottom: -12px; }
64
+ .-margin-l-S { margin-left: -12px; }
65
+ .padding-m-S { padding: 12px; }
66
+ .padding-m-t-S { padding-top: 12px; }
67
+ .padding-m-r-S { padding-right: 12px; }
68
+ .padding-m-b-S { padding-bottom: 12px; }
69
+ .padding-m-l-S { padding-left: 12px; }
70
+ .padding-m-x-S { padding-left: 12px; padding-right: 12px; }
71
+ .padding-m-y-S { padding-top: 12px; padding-bottom: 12px; }
72
+
73
+ .margin { margin: 16px }
74
+ .margin-t { margin-top: 16px; }
75
+ .margin-r { margin-right: 16px; }
76
+ .margin-b { margin-bottom: 16px; }
77
+ .margin-l { margin-left: 16px; }
78
+ .margin-x { margin-left: 16px; margin-right: 16px; }
79
+ .margin-y { margin-top: 16px; margin-bottom: 16px; }
80
+
81
+ .-margin-t { margin-top: -16px; }
82
+ .-margin-r { margin-right: -16px; }
83
+ .-margin-b { margin-bottom: -16px; }
84
+ .-margin-l { margin-left: -16px; }
85
+ .padding-m { padding: 16px; }
86
+ .padding-m-t { padding-top: 16px; }
87
+ .padding-m-r { padding-right: 16px; }
88
+ .padding-m-b { padding-bottom: 16px; }
89
+ .padding-m-l { padding-left: 16px; }
90
+ .padding-m-x { padding-left: 16px; padding-right: 16px; }
91
+ .padding-m-y { padding-top: 16px; padding-bottom: 16px; }
92
+
93
+ .margin-L { margin: 20px }
94
+ .margin-t-L { margin-top: 20px; }
95
+ .margin-r-L { margin-right: 20px; }
96
+ .margin-b-L { margin-bottom: 20px; }
97
+ .margin-l-L { margin-left: 20px; }
98
+ .margin-x-L { margin-left: 20px; margin-right: 20px; }
99
+ .margin-y-L { margin-top: 20px; margin-bottom: 20px; }
100
+
101
+ .-margin-t-L { margin-top: -20px; }
102
+ .-margin-r-L { margin-right: -20px; }
103
+ .-margin-b-L { margin-bottom: -20px; }
104
+ .-margin-l-L { margin-left: -20px; }
105
+ .padding-m-L { padding: 20px; }
106
+ .padding-m-t-L { padding-top: 20px; }
107
+ .padding-m-r-L { padding-right: 20px; }
108
+ .padding-m-b-L { padding-bottom: 20px; }
109
+ .padding-m-l-L { padding-left: 20px; }
110
+ .padding-m-x-L { padding-left: 20px; padding-right: 20px; }
111
+ .padding-m-y-L { padding-top: 20px; padding-bottom: 20px; }
112
+
113
+ .margin-XL { margin: 40px }
114
+ .margin-t-XL { margin-top: 40px; }
115
+ .margin-r-XL { margin-right: 40px; }
116
+ .margin-b-XL { margin-bottom: 40px; }
117
+ .margin-l-XL { margin-left: 40px; }
118
+ .margin-x-XL { margin-left: 40px; margin-right: 40px; }
119
+ .margin-y-XL { margin-top: 40px; margin-bottom: 40px; }
120
+
121
+ .-margin-t-XL { margin-top: -40px; }
122
+ .-margin-r-XL { margin-right: -40px; }
123
+ .-margin-b-XL { margin-bottom: -40px; }
124
+ .-margin-l-XL { margin-left: -40px; }
125
+ .padding-m-XL { padding: 40px; }
126
+ .padding-m-t-XL { padding-top: 40px; }
127
+ .padding-m-r-XL { padding-right: 40px; }
128
+ .padding-m-b-XL { padding-bottom: 40px; }
129
+ .padding-m-l-XL { padding-left: 40px; }
130
+ .padding-m-x-XL { padding-left: 40px; padding-right: 40px; }
131
+ .padding-m-y-XL { padding-top: 40px; padding-bottom: 40px; }
132
+
133
+ .margin-XXL { margin: 60px }
134
+ .margin-t-XXL { margin-top: 60px; }
135
+ .margin-r-XXL { margin-right: 60px; }
136
+ .margin-b-XXL { margin-bottom: 60px; }
137
+ .margin-l-XXL { margin-left: 60px; }
138
+ .margin-x-XXL { margin-left: 60px; margin-right: 60px; }
139
+ .margin-y-XXL { margin-top: 60px; margin-bottom: 60px; }
140
+
141
+ .-margin-t-XXL { margin-top: -60px; }
142
+ .-margin-r-XXL { margin-right: -60px; }
143
+ .-margin-b-XXL { margin-bottom: -60px; }
144
+ .-margin-l-XXL { margin-left: -60px; }
145
+ .padding-m-XXL { padding: 60px; }
146
+ .padding-m-t-XXL { padding-top: 60px; }
147
+ .padding-m-r-XXL { padding-right: 60px; }
148
+ .padding-m-b-XXL { padding-bottom: 60px; }
149
+ .padding-m-l-XXL { padding-left: 60px; }
150
+ .padding-m-x-XXL { padding-left: 60px; padding-right: 60px; }
151
+ .padding-m-y-XXL { padding-top: 60px; padding-bottom: 60px; }
152
+
153
+
154
+
155
+ .le-800 .margin-XXS { margin: 6px }
156
+ .le-800 .margin-t-XXS { margin-top: 6px; }
157
+ .le-800 .margin-r-XXS { margin-right: 6px; }
158
+ .le-800 .margin-b-XXS { margin-bottom: 6px; }
159
+ .le-800 .margin-l-XXS { margin-left: 6px; }
160
+ .le-800 .margin-x-XXS { margin-left: 6px; margin-right: 6px; }
161
+ .le-800 .margin-y-XXS { margin-top: 6px; margin-bottom: 6px; }
162
+
163
+ .le-800 .-margin-t-XXS { margin-top: -6px; }
164
+ .le-800 .-margin-r-XXS { margin-right: -6px; }
165
+ .le-800 .-margin-b-XXS { margin-bottom: -6px; }
166
+ .le-800 .-margin-l-XXS { margin-left: -6px; }
167
+ .le-800 .padding-m-XXS { padding: 6px; }
168
+ .le-800 .padding-m-t-XXS { padding-top: 6px; }
169
+ .le-800 .padding-m-r-XXS { padding-right: 6px; }
170
+ .le-800 .padding-m-b-XXS { padding-bottom: 6px; }
171
+ .le-800 .padding-m-l-XXS { padding-left: 6px; }
172
+ .le-800 .padding-m-x-XXS { padding-left: 6px; padding-right: 6px; }
173
+ .le-800 .padding-m-y-XXS { padding-top: 6px; padding-bottom: 6px; }
174
+
175
+ .le-800 .margin-XS { margin: 8px }
176
+ .le-800 .margin-t-XS { margin-top: 8px; }
177
+ .le-800 .margin-r-XS { margin-right: 8px; }
178
+ .le-800 .margin-b-XS { margin-bottom: 8px; }
179
+ .le-800 .margin-l-XS { margin-left: 8px; }
180
+ .le-800 .margin-x-XS { margin-left: 8px; margin-right: 8px; }
181
+ .le-800 .margin-y-XS { margin-top: 8px; margin-bottom: 8px; }
182
+
183
+ .le-800 .-margin-t-XS { margin-top: -8px; }
184
+ .le-800 .-margin-r-XS { margin-right: -8px; }
185
+ .le-800 .-margin-b-XS { margin-bottom: -8px; }
186
+ .le-800 .-margin-l-XS { margin-left: -8px; }
187
+ .le-800 .padding-m-XS { padding: 8px; }
188
+ .le-800 .padding-m-t-XS { padding-top: 8px; }
189
+ .le-800 .padding-m-r-XS { padding-right: 8px; }
190
+ .le-800 .padding-m-b-XS { padding-bottom: 8px; }
191
+ .le-800 .padding-m-l-XS { padding-left: 8px; }
192
+ .le-800 .padding-m-x-XS { padding-left: 8px; padding-right: 8px; }
193
+ .le-800 .padding-m-y-XS { padding-top: 8px; padding-bottom: 8px; }
194
+
195
+ .le-800 .margin-S { margin: 10px }
196
+ .le-800 .margin-t-S { margin-top: 10px; }
197
+ .le-800 .margin-r-S { margin-right: 10px; }
198
+ .le-800 .margin-b-S { margin-bottom: 10px; }
199
+ .le-800 .margin-l-S { margin-left: 10px; }
200
+ .le-800 .margin-x-S { margin-left: 10px; margin-right: 10px; }
201
+ .le-800 .margin-y-S { margin-top: 10px; margin-bottom: 10px; }
202
+
203
+ .le-800 .-margin-t-S { margin-top: -10px; }
204
+ .le-800 .-margin-r-S { margin-right: -10px; }
205
+ .le-800 .-margin-b-S { margin-bottom: -10px; }
206
+ .le-800 .-margin-l-S { margin-left: -10px; }
207
+ .le-800 .padding-m-S { padding: 10px; }
208
+ .le-800 .padding-m-t-S { padding-top: 10px; }
209
+ .le-800 .padding-m-r-S { padding-right: 10px; }
210
+ .le-800 .padding-m-b-S { padding-bottom: 10px; }
211
+ .le-800 .padding-m-l-S { padding-left: 10px; }
212
+ .le-800 .padding-m-x-S { padding-left: 10px; padding-right: 10px; }
213
+ .le-800 .padding-m-y-S { padding-top: 10px; padding-bottom: 10px; }
214
+
215
+ .le-800 .margin { margin: 14px }
216
+ .le-800 .margin-t { margin-top: 14px; }
217
+ .le-800 .margin-r { margin-right: 14px; }
218
+ .le-800 .margin-b { margin-bottom: 14px; }
219
+ .le-800 .margin-l { margin-left: 14px; }
220
+ .le-800 .margin-x { margin-left: 14px; margin-right: 14px; }
221
+ .le-800 .margin-y { margin-top: 14px; margin-bottom: 14px; }
222
+
223
+ .le-800 .-margin-t { margin-top: -14px; }
224
+ .le-800 .-margin-r { margin-right: -14px; }
225
+ .le-800 .-margin-b { margin-bottom: -14px; }
226
+ .le-800 .-margin-l { margin-left: -14px; }
227
+ .le-800 .padding-m { padding: 14px; }
228
+ .le-800 .padding-m-t { padding-top: 14px; }
229
+ .le-800 .padding-m-r { padding-right: 14px; }
230
+ .le-800 .padding-m-b { padding-bottom: 14px; }
231
+ .le-800 .padding-m-l { padding-left: 14px; }
232
+ .le-800 .padding-m-x { padding-left: 14px; padding-right: 14px; }
233
+ .le-800 .padding-m-y { padding-top: 14px; padding-bottom: 14px; }
234
+
235
+ .le-800 .margin-L { margin: 16px }
236
+ .le-800 .margin-t-L { margin-top: 16px; }
237
+ .le-800 .margin-r-L { margin-right: 16px; }
238
+ .le-800 .margin-b-L { margin-bottom: 16px; }
239
+ .le-800 .margin-l-L { margin-left: 16px; }
240
+ .le-800 .margin-x-L { margin-left: 16px; margin-right: 16px; }
241
+ .le-800 .margin-y-L { margin-top: 16px; margin-bottom: 16px; }
242
+
243
+ .le-800 .-margin-t-L { margin-top: -16px; }
244
+ .le-800 .-margin-r-L { margin-right: -16px; }
245
+ .le-800 .-margin-b-L { margin-bottom: -16px; }
246
+ .le-800 .-margin-l-L { margin-left: -16px; }
247
+ .le-800 .padding-m-L { padding: 16px; }
248
+ .le-800 .padding-m-t-L { padding-top: 16px; }
249
+ .le-800 .padding-m-r-L { padding-right: 16px; }
250
+ .le-800 .padding-m-b-L { padding-bottom: 16px; }
251
+ .le-800 .padding-m-l-L { padding-left: 16px; }
252
+ .le-800 .padding-m-x-L { padding-left: 16px; padding-right: 16px; }
253
+ .le-800 .padding-m-y-L { padding-top: 16px; padding-bottom: 16px; }
254
+
255
+ .le-800 .margin-XL { margin: 30px }
256
+ .le-800 .margin-t-XL { margin-top: 30px; }
257
+ .le-800 .margin-r-XL { margin-right: 30px; }
258
+ .le-800 .margin-b-XL { margin-bottom: 30px; }
259
+ .le-800 .margin-l-XL { margin-left: 30px; }
260
+ .le-800 .margin-x-XL { margin-left: 30px; margin-right: 30px; }
261
+ .le-800 .margin-y-XL { margin-top: 30px; margin-bottom: 30px; }
262
+
263
+ .le-800 .-margin-t-XL { margin-top: -30px; }
264
+ .le-800 .-margin-r-XL { margin-right: -30px; }
265
+ .le-800 .-margin-b-XL { margin-bottom: -30px; }
266
+ .le-800 .-margin-l-XL { margin-left: -30px; }
267
+ .le-800 .padding-m-XL { padding: 30px; }
268
+ .le-800 .padding-m-t-XL { padding-top: 30px; }
269
+ .le-800 .padding-m-r-XL { padding-right: 30px; }
270
+ .le-800 .padding-m-b-XL { padding-bottom: 30px; }
271
+ .le-800 .padding-m-l-XL { padding-left: 30px; }
272
+ .le-800 .padding-m-x-XL { padding-left: 30px; padding-right: 30px; }
273
+ .le-800 .padding-m-y-XL { padding-top: 30px; padding-bottom: 30px; }
274
+
275
+ .le-800 .margin-XXL { margin: 40px }
276
+ .le-800 .margin-t-XXL { margin-top: 40px; }
277
+ .le-800 .margin-r-XXL { margin-right: 40px; }
278
+ .le-800 .margin-b-XXL { margin-bottom: 40px; }
279
+ .le-800 .margin-l-XXL { margin-left: 40px; }
280
+ .le-800 .margin-x-XXL { margin-left: 40px; margin-right: 40px; }
281
+ .le-800 .margin-y-XXL { margin-top: 40px; margin-bottom: 40px; }
282
+
283
+ .le-800 .-margin-t-XXL { margin-top: -40px; }
284
+ .le-800 .-margin-r-XXL { margin-right: -40px; }
285
+ .le-800 .-margin-b-XXL { margin-bottom: -40px; }
286
+ .le-800 .-margin-l-XXL { margin-left: -40px; }
287
+ .le-800 .padding-m-XXL { padding: 40px; }
288
+ .le-800 .padding-m-t-XXL { padding-top: 40px; }
289
+ .le-800 .padding-m-r-XXL { padding-right: 40px; }
290
+ .le-800 .padding-m-b-XXL { padding-bottom: 40px; }
291
+ .le-800 .padding-m-l-XXL { padding-left: 40px; }
292
+ .le-800 .padding-m-x-XXL { padding-left: 40px; padding-right: 40px; }
293
+ .le-800 .padding-m-y-XXL { padding-top: 40px; padding-bottom: 40px; }
294
+
295
+
296
+
297
+ .le-480 .margin-XXS { margin: 4px }
298
+ .le-480 .margin-t-XXS { margin-top: 4px; }
299
+ .le-480 .margin-r-XXS { margin-right: 4px; }
300
+ .le-480 .margin-b-XXS { margin-bottom: 4px; }
301
+ .le-480 .margin-l-XXS { margin-left: 4px; }
302
+ .le-480 .margin-x-XXS { margin-left: 4px; margin-right: 4px; }
303
+ .le-480 .margin-y-XXS { margin-top: 4px; margin-bottom: 4px; }
304
+
305
+ .le-480 .-margin-t-XXS { margin-top: -4px; }
306
+ .le-480 .-margin-r-XXS { margin-right: -4px; }
307
+ .le-480 .-margin-b-XXS { margin-bottom: -4px; }
308
+ .le-480 .-margin-l-XXS { margin-left: -4px; }
309
+ .le-480 .padding-m-XXS { padding: 4px; }
310
+ .le-480 .padding-m-t-XXS { padding-top: 4px; }
311
+ .le-480 .padding-m-r-XXS { padding-right: 4px; }
312
+ .le-480 .padding-m-b-XXS { padding-bottom: 4px; }
313
+ .le-480 .padding-m-l-XXS { padding-left: 4px; }
314
+ .le-480 .padding-m-x-XXS { padding-left: 4px; padding-right: 4px; }
315
+ .le-480 .padding-m-y-XXS { padding-top: 4px; padding-bottom: 4px; }
316
+
317
+ .le-480 .margin-XS { margin: 8px }
318
+ .le-480 .margin-t-XS { margin-top: 8px; }
319
+ .le-480 .margin-r-XS { margin-right: 8px; }
320
+ .le-480 .margin-b-XS { margin-bottom: 8px; }
321
+ .le-480 .margin-l-XS { margin-left: 8px; }
322
+ .le-480 .margin-x-XS { margin-left: 8px; margin-right: 8px; }
323
+ .le-480 .margin-y-XS { margin-top: 8px; margin-bottom: 8px; }
324
+
325
+ .le-480 .-margin-t-XS { margin-top: -8px; }
326
+ .le-480 .-margin-r-XS { margin-right: -8px; }
327
+ .le-480 .-margin-b-XS { margin-bottom: -8px; }
328
+ .le-480 .-margin-l-XS { margin-left: -8px; }
329
+ .le-480 .padding-m-XS { padding: 8px; }
330
+ .le-480 .padding-m-t-XS { padding-top: 8px; }
331
+ .le-480 .padding-m-r-XS { padding-right: 8px; }
332
+ .le-480 .padding-m-b-XS { padding-bottom: 8px; }
333
+ .le-480 .padding-m-l-XS { padding-left: 8px; }
334
+ .le-480 .padding-m-x-XS { padding-left: 8px; padding-right: 8px; }
335
+ .le-480 .padding-m-y-XS { padding-top: 8px; padding-bottom: 8px; }
336
+
337
+ .le-480 .margin-S { margin: 12px }
338
+ .le-480 .margin-t-S { margin-top: 12px; }
339
+ .le-480 .margin-r-S { margin-right: 12px; }
340
+ .le-480 .margin-b-S { margin-bottom: 12px; }
341
+ .le-480 .margin-l-S { margin-left: 12px; }
342
+ .le-480 .margin-x-S { margin-left: 12px; margin-right: 12px; }
343
+ .le-480 .margin-y-S { margin-top: 12px; margin-bottom: 12px; }
344
+
345
+ .le-480 .-margin-t-S { margin-top: -12px; }
346
+ .le-480 .-margin-r-S { margin-right: -12px; }
347
+ .le-480 .-margin-b-S { margin-bottom: -12px; }
348
+ .le-480 .-margin-l-S { margin-left: -12px; }
349
+ .le-480 .padding-m-S { padding: 12px; }
350
+ .le-480 .padding-m-t-S { padding-top: 12px; }
351
+ .le-480 .padding-m-r-S { padding-right: 12px; }
352
+ .le-480 .padding-m-b-S { padding-bottom: 12px; }
353
+ .le-480 .padding-m-l-S { padding-left: 12px; }
354
+ .le-480 .padding-m-x-S { padding-left: 12px; padding-right: 12px; }
355
+ .le-480 .padding-m-y-S { padding-top: 12px; padding-bottom: 12px; }
356
+
357
+ .le-480 .margin { margin: 16px }
358
+ .le-480 .margin-t { margin-top: 16px; }
359
+ .le-480 .margin-r { margin-right: 16px; }
360
+ .le-480 .margin-b { margin-bottom: 16px; }
361
+ .le-480 .margin-l { margin-left: 16px; }
362
+ .le-480 .margin-x { margin-left: 16px; margin-right: 16px; }
363
+ .le-480 .margin-y { margin-top: 16px; margin-bottom: 16px; }
364
+
365
+ .le-480 .-margin-t { margin-top: -16px; }
366
+ .le-480 .-margin-r { margin-right: -16px; }
367
+ .le-480 .-margin-b { margin-bottom: -16px; }
368
+ .le-480 .-margin-l { margin-left: -16px; }
369
+ .le-480 .padding-m { padding: 16px; }
370
+ .le-480 .padding-m-t { padding-top: 16px; }
371
+ .le-480 .padding-m-r { padding-right: 16px; }
372
+ .le-480 .padding-m-b { padding-bottom: 16px; }
373
+ .le-480 .padding-m-l { padding-left: 16px; }
374
+ .le-480 .padding-m-x { padding-left: 16px; padding-right: 16px; }
375
+ .le-480 .padding-m-y { padding-top: 16px; padding-bottom: 16px; }
376
+
377
+ .le-480 .margin-L { margin: 20px }
378
+ .le-480 .margin-t-L { margin-top: 20px; }
379
+ .le-480 .margin-r-L { margin-right: 20px; }
380
+ .le-480 .margin-b-L { margin-bottom: 20px; }
381
+ .le-480 .margin-l-L { margin-left: 20px; }
382
+ .le-480 .margin-x-L { margin-left: 20px; margin-right: 20px; }
383
+ .le-480 .margin-y-L { margin-top: 20px; margin-bottom: 20px; }
384
+
385
+ .le-480 .-margin-t-L { margin-top: -20px; }
386
+ .le-480 .-margin-r-L { margin-right: -20px; }
387
+ .le-480 .-margin-b-L { margin-bottom: -20px; }
388
+ .le-480 .-margin-l-L { margin-left: -20px; }
389
+ .le-480 .padding-m-L { padding: 20px; }
390
+ .le-480 .padding-m-t-L { padding-top: 20px; }
391
+ .le-480 .padding-m-r-L { padding-right: 20px; }
392
+ .le-480 .padding-m-b-L { padding-bottom: 20px; }
393
+ .le-480 .padding-m-l-L { padding-left: 20px; }
394
+ .le-480 .padding-m-x-L { padding-left: 20px; padding-right: 20px; }
395
+ .le-480 .padding-m-y-L { padding-top: 20px; padding-bottom: 20px; }
396
+
397
+ .le-480 .margin-XL { margin: 32px }
398
+ .le-480 .margin-t-XL { margin-top: 32px; }
399
+ .le-480 .margin-r-XL { margin-right: 32px; }
400
+ .le-480 .margin-b-XL { margin-bottom: 32px; }
401
+ .le-480 .margin-l-XL { margin-left: 32px; }
402
+ .le-480 .margin-x-XL { margin-left: 32px; margin-right: 32px; }
403
+ .le-480 .margin-y-XL { margin-top: 32px; margin-bottom: 32px; }
404
+
405
+ .le-480 .-margin-t-XL { margin-top: -32px; }
406
+ .le-480 .-margin-r-XL { margin-right: -32px; }
407
+ .le-480 .-margin-b-XL { margin-bottom: -32px; }
408
+ .le-480 .-margin-l-XL { margin-left: -32px; }
409
+ .le-480 .padding-m-XL { padding: 32px; }
410
+ .le-480 .padding-m-t-XL { padding-top: 32px; }
411
+ .le-480 .padding-m-r-XL { padding-right: 32px; }
412
+ .le-480 .padding-m-b-XL { padding-bottom: 32px; }
413
+ .le-480 .padding-m-l-XL { padding-left: 32px; }
414
+ .le-480 .padding-m-x-XL { padding-left: 32px; padding-right: 32px; }
415
+ .le-480 .padding-m-y-XL { padding-top: 32px; padding-bottom: 32px; }
416
+
417
+ .le-480 .margin-XXL { margin: 40px }
418
+ .le-480 .margin-t-XXL { margin-top: 40px; }
419
+ .le-480 .margin-r-XXL { margin-right: 40px; }
420
+ .le-480 .margin-b-XXL { margin-bottom: 40px; }
421
+ .le-480 .margin-l-XXL { margin-left: 40px; }
422
+ .le-480 .margin-x-XXL { margin-left: 40px; margin-right: 40px; }
423
+ .le-480 .margin-y-XXL { margin-top: 40px; margin-bottom: 40px; }
424
+
425
+ .le-480 .-margin-t-XXL { margin-top: -40px; }
426
+ .le-480 .-margin-r-XXL { margin-right: -40px; }
427
+ .le-480 .-margin-b-XXL { margin-bottom: -40px; }
428
+ .le-480 .-margin-l-XXL { margin-left: -40px; }
429
+ .le-480 .padding-m-XXL { padding: 40px; }
430
+ .le-480 .padding-m-t-XXL { padding-top: 40px; }
431
+ .le-480 .padding-m-r-XXL { padding-right: 40px; }
432
+ .le-480 .padding-m-b-XXL { padding-bottom: 40px; }
433
+ .le-480 .padding-m-l-XXL { padding-left: 40px; }
434
+ .le-480 .padding-m-x-XXL { padding-left: 40px; padding-right: 40px; }
435
+ .le-480 .padding-m-y-XXL { padding-top: 40px; padding-bottom: 40px; }
436
+
437
+
438
+
439
+ .padding-XXS { padding: 4px }
440
+ .padding-t-XXS { padding-top: 4px; }
441
+ .padding-r-XXS { padding-right: 4px; }
442
+ .padding-b-XXS { padding-bottom: 4px; }
443
+ .padding-l-XXS { padding-left: 4px; }
444
+ .padding-x-XXS { padding-left: 4px; padding-right: 4px; }
445
+ .padding-y-XXS { padding-top: 4px; padding-bottom: 4px; }
446
+
447
+ .padding-XS { padding: 6px }
448
+ .padding-t-XS { padding-top: 6px; }
449
+ .padding-r-XS { padding-right: 6px; }
450
+ .padding-b-XS { padding-bottom: 6px; }
451
+ .padding-l-XS { padding-left: 6px; }
452
+ .padding-x-XS { padding-left: 6px; padding-right: 6px; }
453
+ .padding-y-XS { padding-top: 6px; padding-bottom: 6px; }
454
+
455
+ .padding-S { padding: 8px }
456
+ .padding-t-S { padding-top: 8px; }
457
+ .padding-r-S { padding-right: 8px; }
458
+ .padding-b-S { padding-bottom: 8px; }
459
+ .padding-l-S { padding-left: 8px; }
460
+ .padding-x-S { padding-left: 8px; padding-right: 8px; }
461
+ .padding-y-S { padding-top: 8px; padding-bottom: 8px; }
462
+
463
+ .padding { padding: 10px }
464
+ .padding-t { padding-top: 10px; }
465
+ .padding-r { padding-right: 10px; }
466
+ .padding-b { padding-bottom: 10px; }
467
+ .padding-l { padding-left: 10px; }
468
+ .padding-x { padding-left: 10px; padding-right: 10px; }
469
+ .padding-y { padding-top: 10px; padding-bottom: 10px; }
470
+
471
+ .padding-L { padding: 14px }
472
+ .padding-t-L { padding-top: 14px; }
473
+ .padding-r-L { padding-right: 14px; }
474
+ .padding-b-L { padding-bottom: 14px; }
475
+ .padding-l-L { padding-left: 14px; }
476
+ .padding-x-L { padding-left: 14px; padding-right: 14px; }
477
+ .padding-y-L { padding-top: 14px; padding-bottom: 14px; }
478
+
479
+ .padding-XL { padding: 24px }
480
+ .padding-t-XL { padding-top: 24px; }
481
+ .padding-r-XL { padding-right: 24px; }
482
+ .padding-b-XL { padding-bottom: 24px; }
483
+ .padding-l-XL { padding-left: 24px; }
484
+ .padding-x-XL { padding-left: 24px; padding-right: 24px; }
485
+ .padding-y-XL { padding-top: 24px; padding-bottom: 24px; }
486
+
487
+ .padding-XXL { padding: 40px }
488
+ .padding-t-XXL { padding-top: 40px; }
489
+ .padding-r-XXL { padding-right: 40px; }
490
+ .padding-b-XXL { padding-bottom: 40px; }
491
+ .padding-l-XXL { padding-left: 40px; }
492
+ .padding-x-XXL { padding-left: 40px; padding-right: 40px; }
493
+ .padding-y-XXL { padding-top: 40px; padding-bottom: 40px; }
494
+
495
+
496
+
497
+ .le-480 .padding-XXS { padding: 4px }
498
+ .le-480 .padding-t-XXS { padding-top: 4px; }
499
+ .le-480 .padding-r-XXS { padding-right: 4px; }
500
+ .le-480 .padding-b-XXS { padding-bottom: 4px; }
501
+ .le-480 .padding-l-XXS { padding-left: 4px; }
502
+ .le-480 .padding-x-XXS { padding-left: 4px; padding-right: 4px; }
503
+ .le-480 .padding-y-XXS { padding-top: 4px; padding-bottom: 4px; }
504
+
505
+ .le-480 .padding-XS { padding: 6px }
506
+ .le-480 .padding-t-XS { padding-top: 6px; }
507
+ .le-480 .padding-r-XS { padding-right: 6px; }
508
+ .le-480 .padding-b-XS { padding-bottom: 6px; }
509
+ .le-480 .padding-l-XS { padding-left: 6px; }
510
+ .le-480 .padding-x-XS { padding-left: 6px; padding-right: 6px; }
511
+ .le-480 .padding-y-XS { padding-top: 6px; padding-bottom: 6px; }
512
+
513
+ .le-480 .padding-S { padding: 8px }
514
+ .le-480 .padding-t-S { padding-top: 8px; }
515
+ .le-480 .padding-r-S { padding-right: 8px; }
516
+ .le-480 .padding-b-S { padding-bottom: 8px; }
517
+ .le-480 .padding-l-S { padding-left: 8px; }
518
+ .le-480 .padding-x-S { padding-left: 8px; padding-right: 8px; }
519
+ .le-480 .padding-y-S { padding-top: 8px; padding-bottom: 8px; }
520
+
521
+ .le-480 .padding { padding: 12px }
522
+ .le-480 .padding-t { padding-top: 12px; }
523
+ .le-480 .padding-r { padding-right: 12px; }
524
+ .le-480 .padding-b { padding-bottom: 12px; }
525
+ .le-480 .padding-l { padding-left: 12px; }
526
+ .le-480 .padding-x { padding-left: 12px; padding-right: 12px; }
527
+ .le-480 .padding-y { padding-top: 12px; padding-bottom: 12px; }
528
+
529
+ .le-480 .padding-L { padding: 16px }
530
+ .le-480 .padding-t-L { padding-top: 16px; }
531
+ .le-480 .padding-r-L { padding-right: 16px; }
532
+ .le-480 .padding-b-L { padding-bottom: 16px; }
533
+ .le-480 .padding-l-L { padding-left: 16px; }
534
+ .le-480 .padding-x-L { padding-left: 16px; padding-right: 16px; }
535
+ .le-480 .padding-y-L { padding-top: 16px; padding-bottom: 16px; }
536
+
537
+ .le-480 .padding-XL { padding: 24px }
538
+ .le-480 .padding-t-XL { padding-top: 24px; }
539
+ .le-480 .padding-r-XL { padding-right: 24px; }
540
+ .le-480 .padding-b-XL { padding-bottom: 24px; }
541
+ .le-480 .padding-l-XL { padding-left: 24px; }
542
+ .le-480 .padding-x-XL { padding-left: 24px; padding-right: 24px; }
543
+ .le-480 .padding-y-XL { padding-top: 24px; padding-bottom: 24px; }
544
+
545
+ .le-480 .padding-XXL { padding: 40px }
546
+ .le-480 .padding-t-XXL { padding-top: 40px; }
547
+ .le-480 .padding-r-XXL { padding-right: 40px; }
548
+ .le-480 .padding-b-XXL { padding-bottom: 40px; }
549
+ .le-480 .padding-l-XXL { padding-left: 40px; }
550
+ .le-480 .padding-x-XXL { padding-left: 40px; padding-right: 40px; }
551
+ .le-480 .padding-y-XXL { padding-top: 40px; padding-bottom: 40px; }
552
+
553
+
554
+
555
+ .border { border-width: 1px; border-style: solid; }
556
+ .border-t { border-top-width: 1px; border-top-style: solid; }
557
+ .border-r { border-right-width: 1px; border-right-style: solid; }
558
+ .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
559
+ .border-l { border-left-width: 1px; border-left-style: solid; }
560
+ .border-x { border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; }
561
+ .border-y { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; }
562
+ .border-bold { border-width: 2px; border-style: solid; }
563
+ .border-t-bold { border-top-width: 2px; border-top-style: solid; }
564
+ .border-r-bold { border-right-width: 2px; border-right-style: solid; }
565
+ .border-b-bold { border-bottom-width: 2px; border-bottom-style: solid; }
566
+ .border-l-bold { border-left-width: 2px; border-left-style: solid; }
567
+ .border-x-bold { border-left-width: 2px; border-right-width: 2px; border-left-style: solid; border-right-style: solid; }
568
+ .border-y-bold { border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; }
569
+ .border-bolder { border-width: 4px; border-style: solid; }
570
+ .border-t-bolder { border-top-width: 4px; border-top-style: solid; }
571
+ .border-r-bolder { border-right-width: 4px; border-right-style: solid; }
572
+ .border-b-bolder { border-bottom-width: 4px; border-bottom-style: solid; }
573
+ .border-l-bolder { border-left-width: 4px; border-left-style: solid; }
574
+ .border-x-bolder { border-left-width: 4px; border-right-width: 4px; border-left-style: solid; border-right-style: solid; }
575
+ .border-y-bolder { border-top-width: 4px; border-bottom-width: 4px; border-top-style: solid; border-bottom-style: solid; }
576
+
577
+
578
+ .border-c-L { border-color: #F5F5F5 }
579
+ .border-t-c-L { border-top-color: #F5F5F5; }
580
+ .border-r-c-L { border-right-color: #F5F5F5; }
581
+ .border-b-c-L { border-bottom-color: #F5F5F5; }
582
+ .border-l-c-L { border-left-color: #F5F5F5; }
583
+ .border-x-c-L { border-left-color: #F5F5F5; border-right-color: #F5F5F5; }
584
+ .border-y-c-L { border-top-color: #F5F5F5; border-bottom-color: #F5F5F5; }
585
+ .border-c { border-color: #E4E4E4 }
586
+ .border-t-c { border-top-color: #E4E4E4; }
587
+ .border-r-c { border-right-color: #E4E4E4; }
588
+ .border-b-c { border-bottom-color: #E4E4E4; }
589
+ .border-l-c { border-left-color: #E4E4E4; }
590
+ .border-x-c { border-left-color: #E4E4E4; border-right-color: #E4E4E4; }
591
+ .border-y-c { border-top-color: #E4E4E4; border-bottom-color: #E4E4E4; }
592
+ .border-c-primary { border-color: #FF4000 }
593
+ .border-t-c-primary { border-top-color: #FF4000; }
594
+ .border-r-c-primary { border-right-color: #FF4000; }
595
+ .border-b-c-primary { border-bottom-color: #FF4000; }
596
+ .border-l-c-primary { border-left-color: #FF4000; }
597
+ .border-x-c-primary { border-left-color: #FF4000; border-right-color: #FF4000; }
598
+ .border-y-c-primary { border-top-color: #FF4000; border-bottom-color: #FF4000; }
599
+ .border-c-secondary { border-color: #FFD1C3 }
600
+ .border-t-c-secondary { border-top-color: #FFD1C3; }
601
+ .border-r-c-secondary { border-right-color: #FFD1C3; }
602
+ .border-b-c-secondary { border-bottom-color: #FFD1C3; }
603
+ .border-l-c-secondary { border-left-color: #FFD1C3; }
604
+ .border-x-c-secondary { border-left-color: #FFD1C3; border-right-color: #FFD1C3; }
605
+ .border-y-c-secondary { border-top-color: #FFD1C3; border-bottom-color: #FFD1C3; }
606
+ .border-c-error { border-color: #FF4E4E }
607
+ .border-t-c-error { border-top-color: #FF4E4E; }
608
+ .border-r-c-error { border-right-color: #FF4E4E; }
609
+ .border-b-c-error { border-bottom-color: #FF4E4E; }
610
+ .border-l-c-error { border-left-color: #FF4E4E; }
611
+ .border-x-c-error { border-left-color: #FF4E4E; border-right-color: #FF4E4E; }
612
+ .border-y-c-error { border-top-color: #FF4E4E; border-bottom-color: #FF4E4E; }
613
+ .border-c-disabled { border-color: #FF4E4E }
614
+ .border-t-c-disabled { border-top-color: #FF4E4E; }
615
+ .border-r-c-disabled { border-right-color: #FF4E4E; }
616
+ .border-b-c-disabled { border-bottom-color: #FF4E4E; }
617
+ .border-l-c-disabled { border-left-color: #FF4E4E; }
618
+ .border-x-c-disabled { border-left-color: #FF4E4E; border-right-color: #FF4E4E; }
619
+ .border-y-c-disabled { border-top-color: #FF4E4E; border-bottom-color: #FF4E4E; }
620
+ .border-c-active:active { border-color: #ffffff }
621
+ .border-t-c-active:active { border-top-color: #ffffff; }
622
+ .border-r-c-active:active { border-right-color: #ffffff; }
623
+ .border-b-c-active:active { border-bottom-color: #ffffff; }
624
+ .border-l-c-active:active { border-left-color: #ffffff; }
625
+ .border-x-c-active:active { border-left-color: #ffffff; border-right-color: #ffffff; }
626
+ .border-y-c-active:active { border-top-color: #ffffff; border-bottom-color: #ffffff; }
627
+ .active:active .border-c-active { border-color: #ffffff }
628
+ .active:active .border-t-c-active { border-top-color: #ffffff; }
629
+ .active:active .border-r-c-active { border-right-color: #ffffff; }
630
+ .active:active .border-b-c-active { border-bottom-color: #ffffff; }
631
+ .active:active .border-l-c-active { border-left-color: #ffffff; }
632
+ .active:active .border-x-c-active { border-left-color: #ffffff; border-right-color: #ffffff; }
633
+ .active:active .border-y-c-active { border-top-color: #ffffff; border-bottom-color: #ffffff; }
634
+ .border-c-primary-active:active { border-color: #ffffff }
635
+ .border-t-c-primary-active:active { border-top-color: #ffffff; }
636
+ .border-r-c-primary-active:active { border-right-color: #ffffff; }
637
+ .border-b-c-primary-active:active { border-bottom-color: #ffffff; }
638
+ .border-l-c-primary-active:active { border-left-color: #ffffff; }
639
+ .border-x-c-primary-active:active { border-left-color: #ffffff; border-right-color: #ffffff; }
640
+ .border-y-c-primary-active:active { border-top-color: #ffffff; border-bottom-color: #ffffff; }
641
+ .active:active .border-c-primary-active { border-color: #ffffff }
642
+ .active:active .border-t-c-primary-active { border-top-color: #ffffff; }
643
+ .active:active .border-r-c-primary-active { border-right-color: #ffffff; }
644
+ .active:active .border-b-c-primary-active { border-bottom-color: #ffffff; }
645
+ .active:active .border-l-c-primary-active { border-left-color: #ffffff; }
646
+ .active:active .border-x-c-primary-active { border-left-color: #ffffff; border-right-color: #ffffff; }
647
+ .active:active .border-y-c-primary-active { border-top-color: #ffffff; border-bottom-color: #ffffff; }
648
+ .border-c-focus:focus { border-color: #ffffff }
649
+ .border-t-c-focus:focus { border-top-color: #ffffff; }
650
+ .border-r-c-focus:focus { border-right-color: #ffffff; }
651
+ .border-b-c-focus:focus { border-bottom-color: #ffffff; }
652
+ .border-l-c-focus:focus { border-left-color: #ffffff; }
653
+ .border-x-c-focus:focus { border-left-color: #ffffff; border-right-color: #ffffff; }
654
+ .border-y-c-focus:focus { border-top-color: #ffffff; border-bottom-color: #ffffff; }
655
+ .focus:focus .border-c-focus { border-color: #ffffff }
656
+ .focus:focus .border-t-c-focus { border-top-color: #ffffff; }
657
+ .focus:focus .border-r-c-focus { border-right-color: #ffffff; }
658
+ .focus:focus .border-b-c-focus { border-bottom-color: #ffffff; }
659
+ .focus:focus .border-l-c-focus { border-left-color: #ffffff; }
660
+ .focus:focus .border-x-c-focus { border-left-color: #ffffff; border-right-color: #ffffff; }
661
+ .focus:focus .border-y-c-focus { border-top-color: #ffffff; border-bottom-color: #ffffff; }
662
+ .border-c-primary-focus:focus { border-color: #ffffff }
663
+ .border-t-c-primary-focus:focus { border-top-color: #ffffff; }
664
+ .border-r-c-primary-focus:focus { border-right-color: #ffffff; }
665
+ .border-b-c-primary-focus:focus { border-bottom-color: #ffffff; }
666
+ .border-l-c-primary-focus:focus { border-left-color: #ffffff; }
667
+ .border-x-c-primary-focus:focus { border-left-color: #ffffff; border-right-color: #ffffff; }
668
+ .border-y-c-primary-focus:focus { border-top-color: #ffffff; border-bottom-color: #ffffff; }
669
+ .focus:focus .border-c-primary-focus { border-color: #ffffff }
670
+ .focus:focus .border-t-c-primary-focus { border-top-color: #ffffff; }
671
+ .focus:focus .border-r-c-primary-focus { border-right-color: #ffffff; }
672
+ .focus:focus .border-b-c-primary-focus { border-bottom-color: #ffffff; }
673
+ .focus:focus .border-l-c-primary-focus { border-left-color: #ffffff; }
674
+ .focus:focus .border-x-c-primary-focus { border-left-color: #ffffff; border-right-color: #ffffff; }
675
+ .focus:focus .border-y-c-primary-focus { border-top-color: #ffffff; border-bottom-color: #ffffff; }
676
+ .border-c-hover:hover { border-color: #ffffff }
677
+ .border-t-c-hover:hover { border-top-color: #ffffff; }
678
+ .border-r-c-hover:hover { border-right-color: #ffffff; }
679
+ .border-b-c-hover:hover { border-bottom-color: #ffffff; }
680
+ .border-l-c-hover:hover { border-left-color: #ffffff; }
681
+ .border-x-c-hover:hover { border-left-color: #ffffff; border-right-color: #ffffff; }
682
+ .border-y-c-hover:hover { border-top-color: #ffffff; border-bottom-color: #ffffff; }
683
+ .hover:hover .border-c-hover { border-color: #ffffff }
684
+ .hover:hover .border-t-c-hover { border-top-color: #ffffff; }
685
+ .hover:hover .border-r-c-hover { border-right-color: #ffffff; }
686
+ .hover:hover .border-b-c-hover { border-bottom-color: #ffffff; }
687
+ .hover:hover .border-l-c-hover { border-left-color: #ffffff; }
688
+ .hover:hover .border-x-c-hover { border-left-color: #ffffff; border-right-color: #ffffff; }
689
+ .hover:hover .border-y-c-hover { border-top-color: #ffffff; border-bottom-color: #ffffff; }
690
+ .border-c-primary-hover:hover { border-color: #ffffff }
691
+ .border-t-c-primary-hover:hover { border-top-color: #ffffff; }
692
+ .border-r-c-primary-hover:hover { border-right-color: #ffffff; }
693
+ .border-b-c-primary-hover:hover { border-bottom-color: #ffffff; }
694
+ .border-l-c-primary-hover:hover { border-left-color: #ffffff; }
695
+ .border-x-c-primary-hover:hover { border-left-color: #ffffff; border-right-color: #ffffff; }
696
+ .border-y-c-primary-hover:hover { border-top-color: #ffffff; border-bottom-color: #ffffff; }
697
+ .hover:hover .border-c-primary-hover { border-color: #ffffff }
698
+ .hover:hover .border-t-c-primary-hover { border-top-color: #ffffff; }
699
+ .hover:hover .border-r-c-primary-hover { border-right-color: #ffffff; }
700
+ .hover:hover .border-b-c-primary-hover { border-bottom-color: #ffffff; }
701
+ .hover:hover .border-l-c-primary-hover { border-left-color: #ffffff; }
702
+ .hover:hover .border-x-c-primary-hover { border-left-color: #ffffff; border-right-color: #ffffff; }
703
+ .hover:hover .border-y-c-primary-hover { border-top-color: #ffffff; border-bottom-color: #ffffff; }
704
+ .border-c-selected.selected { border-color: #ffffff }
705
+ .border-t-c-selected.selected { border-top-color: #ffffff; }
706
+ .border-r-c-selected.selected { border-right-color: #ffffff; }
707
+ .border-b-c-selected.selected { border-bottom-color: #ffffff; }
708
+ .border-l-c-selected.selected { border-left-color: #ffffff; }
709
+ .border-x-c-selected.selected { border-left-color: #ffffff; border-right-color: #ffffff; }
710
+ .border-y-c-selected.selected { border-top-color: #ffffff; border-bottom-color: #ffffff; }
711
+ .selected .border-c-selected { border-color: #ffffff }
712
+ .selected .border-t-c-selected { border-top-color: #ffffff; }
713
+ .selected .border-r-c-selected { border-right-color: #ffffff; }
714
+ .selected .border-b-c-selected { border-bottom-color: #ffffff; }
715
+ .selected .border-l-c-selected { border-left-color: #ffffff; }
716
+ .selected .border-x-c-selected { border-left-color: #ffffff; border-right-color: #ffffff; }
717
+ .selected .border-y-c-selected { border-top-color: #ffffff; border-bottom-color: #ffffff; }
718
+ .border-c-primary-selected.selected { border-color: #ffffff }
719
+ .border-t-c-primary-selected.selected { border-top-color: #ffffff; }
720
+ .border-r-c-primary-selected.selected { border-right-color: #ffffff; }
721
+ .border-b-c-primary-selected.selected { border-bottom-color: #ffffff; }
722
+ .border-l-c-primary-selected.selected { border-left-color: #ffffff; }
723
+ .border-x-c-primary-selected.selected { border-left-color: #ffffff; border-right-color: #ffffff; }
724
+ .border-y-c-primary-selected.selected { border-top-color: #ffffff; border-bottom-color: #ffffff; }
725
+ .selected .border-c-primary-selected { border-color: #ffffff }
726
+ .selected .border-t-c-primary-selected { border-top-color: #ffffff; }
727
+ .selected .border-r-c-primary-selected { border-right-color: #ffffff; }
728
+ .selected .border-b-c-primary-selected { border-bottom-color: #ffffff; }
729
+ .selected .border-l-c-primary-selected { border-left-color: #ffffff; }
730
+ .selected .border-x-c-primary-selected { border-left-color: #ffffff; border-right-color: #ffffff; }
731
+ .selected .border-y-c-primary-selected { border-top-color: #ffffff; border-bottom-color: #ffffff; }
732
+
733
+
734
+ .dark .border-c-primary { border-color: #000000 }
735
+ .dark .border-t-c-primary { border-top-color: #000000; }
736
+ .dark .border-r-c-primary { border-right-color: #000000; }
737
+ .dark .border-b-c-primary { border-bottom-color: #000000; }
738
+ .dark .border-l-c-primary { border-left-color: #000000; }
739
+ .dark .border-x-c-primary { border-left-color: #000000; border-right-color: #000000; }
740
+ .dark .border-y-c-primary { border-top-color: #000000; border-bottom-color: #000000; }
741
+
742
+
743
+ .border-s-dashed { border-style: dashed }
744
+ .border-t-s-dashed { border-top-style: dashed; }
745
+ .border-r-s-dashed { border-right-style: dashed; }
746
+ .border-b-s-dashed { border-bottom-style: dashed; }
747
+ .border-l-s-dashed { border-left-style: dashed; }
748
+ .border-x-s-dashed { border-left-style: dashed; border-right-style: dashed; }
749
+ .border-y-s-dashed { border-top-style: dashed; border-bottom-style: dashed; }
750
+ .border-s-dotted { border-style: dotted }
751
+ .border-t-s-dotted { border-top-style: dotted; }
752
+ .border-r-s-dotted { border-right-style: dotted; }
753
+ .border-b-s-dotted { border-bottom-style: dotted; }
754
+ .border-l-s-dotted { border-left-style: dotted; }
755
+ .border-x-s-dotted { border-left-style: dotted; border-right-style: dotted; }
756
+ .border-y-s-dotted { border-top-style: dotted; border-bottom-style: dotted; }
757
+
758
+
759
+ .round-XS { border-radius: 6px }
760
+ .round-S { border-radius: 10px }
761
+ .round { border-radius: 12px }
762
+ .round-L { border-radius: 14px }
763
+ .round-XL { border-radius: 20px }
764
+
765
+
766
+ .le-480 .round-XXS { border-radius: 2px }
767
+ .le-480 .round-XS { border-radius: 4px }
768
+ .le-480 .round-S { border-radius: 6px }
769
+ .le-480 .round { border-radius: 8px }
770
+ .le-480 .round-L { border-radius: 10px }
771
+ .le-480 .round-XL { border-radius: 12px }
772
+ .le-480 .round-XXL { border-radius: 40px }
773
+
774
+
775
+ .bg-c-XL { background-color: #ffffff }
776
+ .bg-c-L { background-color: #ffffff }
777
+ .bg-c { background-color: #ffffff }
778
+ .bg-c-D { background-color: #F7F8FA }
779
+ .bg-c-XD { background-color: #F5F5F5 }
780
+ .bg-c-XXD { background-color: #F5F5F5 }
781
+ .bg-c-primary { background-color: #FFF3EF }
782
+ .bg-c-secondary { background-color: #FFEDED }
783
+ .bg-c-active:active { background-color: #ffffff }
784
+ .active:active .bg-c-active { background-color: #ffffff }
785
+ .bg-c-primary-active:active { background-color: #ffffff }
786
+ .active:active .bg-c-primary-active { background-color: #ffffff }
787
+ .bg-c-focus:focus { background-color: #ffffff }
788
+ .focus:focus .bg-c-focus { background-color: #ffffff }
789
+ .bg-c-primary-focus:focus { background-color: #ffffff }
790
+ .focus:focus .bg-c-primary-focus { background-color: #ffffff }
791
+ .bg-c-primary-hover:hover { background-color: #69F469 }
792
+ .hover:hover .bg-c-primary-hover { background-color: #69F469 }
793
+ .bg-c-selected.selected { background-color: #ffffff }
794
+ .selected .bg-c-selected { background-color: #ffffff }
795
+ .bg-c-primary-selected.selected { background-color: #ffffff }
796
+ .selected .bg-c-primary-selected { background-color: #ffffff }
797
+
798
+
799
+ .dark .bg-c { background-color: #101113 }
800
+
801
+
802
+ .color-XXL { color: #ffffff }
803
+ .color-XL { color: #C2C3CB }
804
+ .color-L { color: #A2A7AD }
805
+ .color { color: #888F97 }
806
+ .color-D { color: #1B212D }
807
+ .color-XD { color: #1B212D }
808
+ .color-XXD { color: #1B212D }
809
+ .color-primary { color: #FF4000 }
810
+ .color-secondary { color: #FFD1C3 }
811
+ .color-error { color: #FF4E4E }
812
+ .color-disabled { color: #02C58D }
813
+ .color-active:active { color: #ffffff }
814
+ .active:active .color-active { color: #ffffff }
815
+ .color-primary-active:active { color: #FF4000 }
816
+ .active:active .color-primary-active { color: #FF4000 }
817
+ .color-focus:focus { color: #ffffff }
818
+ .focus:focus .color-focus { color: #ffffff }
819
+ .color-primary-focus:focus { color: #FF4000 }
820
+ .focus:focus .color-primary-focus { color: #FF4000 }
821
+ .color-hover:hover { color: #ffffff }
822
+ .hover:hover .color-hover { color: #ffffff }
823
+ .color-primary-hover:hover { color: #FF4000 }
824
+ .hover:hover .color-primary-hover { color: #FF4000 }
825
+ .color-selected.selected { color: #ffffff }
826
+ .selected .color-selected { color: #ffffff }
827
+ .color-primary-selected.selected { color: #FF4000 }
828
+ .selected .color-primary-selected { color: #FF4000 }
829
+
830
+
831
+ .dark .color-D { color: #ffffff }
832
+
833
+
834
+ .font-s-XXS { font-size: 12px }
835
+ .font-s-XS { font-size: 12px }
836
+ .font-s-S { font-size: 14px }
837
+ .font-s { font-size: 16px }
838
+ .font-s-L { font-size: 20px }
839
+ .font-s-XL { font-size: 22px }
840
+ .font-s-XXL { font-size: 32px }
841
+
842
+
843
+ .le-480 .font-s-XXS { font-size: 10px }
844
+ .le-480 .font-s-XS { font-size: 12px }
845
+ .le-480 .font-s-S { font-size: 14px }
846
+ .le-480 .font-s { font-size: 16px }
847
+ .le-480 .font-s-L { font-size: 20px }
848
+ .le-480 .font-s-XL { font-size: 24px }
849
+ .le-480 .font-s-XXL { font-size: 28px }
850
+
851
+
852
+ .font-lighter { font-weight: lighter }
853
+ .font-bold { font-weight: bold }
854
+ .font-bolder { font-weight: bolder }
855
+
856
+
857
+ .icon-c-L { stroke: #ffffff; fill: #ffffff; }
858
+ .icon-c { stroke: #A2A7AD; fill: #A2A7AD; }
859
+ .icon-c-D { stroke: #1B212D; fill: #1B212D; }
860
+ .icon-c-primary { stroke: #FF4000; fill: #FF4000; }
861
+ .icon-c-secondary { stroke: #2BA8F7; fill: #2BA8F7; }
862
+ .icon-c-error { stroke: #FF4E4E; fill: #FF4E4E; }
863
+ .icon-c-disabled { stroke: #FF4E4E; fill: #FF4E4E; }
864
+ .icon-c-active:active { stroke: #ffffff; fill: #ffffff; }
865
+ .active:active .icon-c-active { stroke: #ffffff; fill: #ffffff; }
866
+ .icon-c-primary-active:active { stroke: #ffffff; fill: #ffffff; }
867
+ .active:active .icon-c-primary-active { stroke: #ffffff; fill: #ffffff; }
868
+ .icon-c-hover:hover { stroke: #ffffff; fill: #ffffff; }
869
+ .hover:hover .icon-c-hover { stroke: #ffffff; fill: #ffffff; }
870
+ .icon-c-primary-hover:hover { stroke: #FF4000; fill: #FF4000; }
871
+ .hover:hover .icon-c-primary-hover { stroke: #FF4000; fill: #FF4000; }
872
+ .icon-c-selected.selected { stroke: #ffffff; fill: #ffffff; }
873
+ .selected .icon-c-selected { stroke: #ffffff; fill: #ffffff; }
874
+ .icon-c-primary-selected.selected { stroke: #FF4000; fill: #FF4000; }
875
+ .selected .icon-c-primary-selected { stroke: #FF4000; fill: #FF4000; }
876
+
877
+
878
+ .icon-s-XXS .icon { width: 12px; height: 12px; }
879
+ .icon-s-XXS.icon { width: 12px; height: 12px; }
880
+ .icon-s-XS .icon { width: 14px; height: 14px; }
881
+ .icon-s-XS.icon { width: 14px; height: 14px; }
882
+ .icon-s-S .icon { width: 16px; height: 16px; }
883
+ .icon-s-S.icon { width: 16px; height: 16px; }
884
+ .icon-s .icon { width: 18px; height: 18px; }
885
+ .icon-s.icon { width: 18px; height: 18px; }
886
+ .icon-s-L .icon { width: 20px; height: 20px; }
887
+ .icon-s-L.icon { width: 20px; height: 20px; }
888
+ .icon-s-XL .icon { width: 24px; height: 24px; }
889
+ .icon-s-XL.icon { width: 24px; height: 24px; }
890
+ .icon-s-XXL .icon { width: 32px; height: 32px; }
891
+ .icon-s-XXL.icon { width: 32px; height: 32px; }
892
+
893
+
894
+ .button { background-color: #21282D; color: #ffffff; border-radius: 14px; outline: none; border: none; min-width: 60px; padding: 4px 8px; }
895
+ .button:active { background-color: #1D252B; }
896
+ .button:focus { background-color: #1D252B; border: 2px solid #FFFFFF; }
897
+ .button:hover { background-color: #2D363B; }
898
+ .button:disabled { color: #8693B6; }
899
+ .button-primary { background-color: #FF4000; color: #ffffff; border-radius: 12px; outline: none; border: none; min-width: 60px; padding: 4px 8px; }
900
+ .button-primary:active { background-color: #FF7A51; }
901
+ .button-primary:focus { background-color: #FF7A51; }
902
+ .button-primary:hover { background-color: #FF7A51; }
903
+ .button-primary:disabled { background-color:#FFD1C3; }
904
+
905
+
906
+
907
+
908
+ .textbox { border: 1px solid #e4e4e4; }
909
+ .textbox:focus { border: 1px solid #1b212d; }
910
+
911
+
912
+ .combobox { border: 1px solid #e4e4e4; background: white; }
913
+ .combobox:has(.combobox-input:focus) { border: 1px solid #1b212d; }
914
+
915
+
916
+ .canlendar { border: 1px solid #e4e4e4; }
917
+ .canlendar-header > .icon { stroke: #1b212d; }
918
+ .canlendar-weeks > span { color: #888f97; }
919
+ .canlendar-date.disabled { color: #e4e4e4; }
920
+ .canlendar-date.prev-month, .canlendar-date.next-month { color: #888f97; }
921
+ .canlendar-date.today::before { background: #f5f5f5; }
922
+ .canlendar-date.selected { color: white; }
923
+ .canlendar-date.selected::before { background: #ff4000; }
924
+
925
+
926
+ .datepicker { border: 1px solid #e4e4e4; background: white; }
927
+ .datepicker:has(.datepicker-input:focus) { border: 1px solid #1b212d; }
928
+
929
+
930
+ .popup { border: 1px solid #e4e4e4; background: white; }
931
+
932
+
933
+ .carousel-backward, .carousel-forward { background: rgba(255, 255, 255, 0.1); }
934
+ .carousel-dot { background: rgba(65, 72, 90, 1); }
935
+ .carousel-dot.selected { background: white; }