@rolster/styles-foundations 1.0.1 → 1.0.5

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 (60) hide show
  1. package/dist/rolster-styles.css +2257 -814
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +2257 -814
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +33 -33
  6. package/readme.md +13 -13
  7. package/scss/_rolster-components.scss +63 -9
  8. package/scss/_rolster-foundations.scss +13 -13
  9. package/scss/_rolster-styles.scss +10 -10
  10. package/scss/_rolster-utilities.scss +14 -13
  11. package/scss/components/_app.scss +11 -10
  12. package/scss/components/_box-field.scss +30 -35
  13. package/scss/components/_data-table.scss +263 -0
  14. package/scss/components/_form.scss +30 -0
  15. package/scss/components/_list-field.scss +253 -0
  16. package/scss/foundations/_themes-foundations.scss +122 -103
  17. package/scss/utilities/_colors-utilities.scss +54 -54
  18. package/scss/utilities/_helpers-utilities.scss +124 -0
  19. package/scss/utilities/_layout-utilities.scss +314 -314
  20. package/scss/utilities/_normalize-utilities.scss +2 -2
  21. package/scss/utilities/_themes-utilities.scss +42 -42
  22. package/scss/utilities/_typographics-utilities.scss +88 -359
  23. package/fonts/fabric/_fabric.-settings.scss +0 -66
  24. package/fonts/fabric/_fabric.scss +0 -69
  25. package/fonts/fabric/fabric-bold.otf +0 -0
  26. package/fonts/fabric/fabric-light.otf +0 -0
  27. package/fonts/fabric/fabric-regular.otf +0 -0
  28. package/fonts/fabric/fabric-semibold.otf +0 -0
  29. package/fonts/fabric/fabric.css +0 -122
  30. package/fonts/mona-sans/_mona-sans-settings.scss +0 -62
  31. package/fonts/mona-sans/_mona-sans.scss +0 -69
  32. package/fonts/mona-sans/mona-sans-bold.woff +0 -0
  33. package/fonts/mona-sans/mona-sans-light.woff +0 -0
  34. package/fonts/mona-sans/mona-sans-medium.woff +0 -0
  35. package/fonts/mona-sans/mona-sans-regular.woff +0 -0
  36. package/fonts/mona-sans/mona-sans-semibold.woff +0 -0
  37. package/fonts/mona-sans/mona-sans.css +0 -118
  38. package/fonts/poppins/_poppins-settings.scss +0 -62
  39. package/fonts/poppins/_poppins.scss +0 -69
  40. package/fonts/poppins/poppins-bold.woff2 +0 -0
  41. package/fonts/poppins/poppins-light.woff2 +0 -0
  42. package/fonts/poppins/poppins-medium.woff2 +0 -0
  43. package/fonts/poppins/poppins-regular.woff2 +0 -0
  44. package/fonts/poppins/poppins-semibold.woff2 +0 -0
  45. package/fonts/poppins/poppins.css +0 -118
  46. package/fonts/space-grotesk/_space-grotesk-settings.scss +0 -62
  47. package/fonts/space-grotesk/_space-grotesk.scss +0 -69
  48. package/fonts/space-grotesk/space-grotesk-bold.woff +0 -0
  49. package/fonts/space-grotesk/space-grotesk-light.woff +0 -0
  50. package/fonts/space-grotesk/space-grotesk-medium.woff +0 -0
  51. package/fonts/space-grotesk/space-grotesk-regular.woff +0 -0
  52. package/fonts/space-grotesk/space-grotesk-semibold.woff +0 -0
  53. package/fonts/space-grotesk/space-grotesk.css +0 -118
  54. package/icons/_rolster-settings.scss +0 -763
  55. package/icons/_rolster.scss +0 -18
  56. package/icons/rolster-icons.eot +0 -0
  57. package/icons/rolster-icons.svg +0 -258
  58. package/icons/rolster-icons.ttf +0 -0
  59. package/icons/rolster-icons.woff +0 -0
  60. package/icons/rolster.css +0 -768
@@ -2,7 +2,8 @@
2
2
  --standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
3
3
  --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
4
4
  --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
5
- --sharp-curve: cubic-bezier(0.4, 0, 0.6, 1); }
5
+ --sharp-curve: cubic-bezier(0.4, 0, 0.6, 1);
6
+ }
6
7
 
7
8
  :root {
8
9
  --background-dark-500: rgba(37, 38, 65, 1);
@@ -112,7 +113,8 @@
112
113
  180deg,
113
114
  rgb(244, 60, 60) 0%,
114
115
  rgb(185, 52, 52) 100%
115
- ); }
116
+ );
117
+ }
116
118
 
117
119
  :root {
118
120
  --sizing-2: 0.125rem;
@@ -135,21 +137,26 @@
135
137
  --sizing-64: 4rem;
136
138
  --border-1: 1px;
137
139
  --border-2: 2px;
138
- --border-4: 4px; }
140
+ --border-4: 4px;
141
+ }
139
142
 
140
143
  @supports (padding-top: constant(safe-area-inset-top)) {
141
144
  :root {
142
145
  --sizing-safe-top: constant(safe-area-inset-top);
143
146
  --sizing-safe-right: constant(safe-area-inset-right);
144
147
  --sizing-safe-bottom: constant(safe-area-inset-bottom);
145
- --sizing-safe-left: constant(safe-area-inset-left); } }
148
+ --sizing-safe-left: constant(safe-area-inset-left);
149
+ }
150
+ }
146
151
 
147
152
  @supports (padding-top: env(safe-area-inset-top)) {
148
153
  :root {
149
154
  --sizing-safe-top: env(safe-area-inset-top);
150
155
  --sizing-safe-right: env(safe-area-inset-right);
151
156
  --sizing-safe-bottom: env(safe-area-inset-bottom);
152
- --sizing-safe-left: env(safe-area-inset-left); } }
157
+ --sizing-safe-left: env(safe-area-inset-left);
158
+ }
159
+ }
153
160
 
154
161
  :root {
155
162
  --z-index-2: 2;
@@ -226,7 +233,8 @@
226
233
  --shadow-center-dark-8: 0px 0px 8px 0px rgba(50, 44, 47, 0.4);
227
234
  --shadow-center-dark-16: 0px 0px 16px 0px rgba(50, 44, 47, 0.4);
228
235
  --shadow-center-dark-24: 0px 0px 24px 0px rgba(50, 44, 47, 0.4);
229
- --shadow-center-dark-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4); }
236
+ --shadow-center-dark-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4);
237
+ }
230
238
 
231
239
  :root {
232
240
  --background-theme-500: var(--background-light-500);
@@ -238,24 +246,15 @@
238
246
  --border-theme-500: var(--border-dark-500);
239
247
  --border-theme-300: var(--border-dark-300);
240
248
  --border-theme-100: var(--border-dark-100);
241
- --border-1-theme-500: var(--border-1) solid
242
- var(--border-dark-500);
243
- --border-2-theme-500: var(--border-2) solid
244
- var(--border-dark-500);
245
- --border-4-theme-500: var(--border-4) solid
246
- var(--border-dark-500);
247
- --border-1-theme-300: var(--border-1) solid
248
- var(--border-dark-300);
249
- --border-2-theme-300: var(--border-2) solid
250
- var(--border-dark-300);
251
- --border-4-theme-300: var(--border-4) solid
252
- var(--border-dark-300);
253
- --border-1-theme-100: var(--border-1) solid
254
- var(--border-dark-100);
255
- --border-2-theme-100: var(--border-2) solid
256
- var(--border-dark-100);
257
- --border-4-theme-100: var(--border-4) solid
258
- var(--border-dark-100);
249
+ --border-1-theme-500: var(--border-1) solid var(--border-dark-500);
250
+ --border-2-theme-500: var(--border-2) solid var(--border-dark-500);
251
+ --border-4-theme-500: var(--border-4) solid var(--border-dark-500);
252
+ --border-1-theme-300: var(--border-1) solid var(--border-dark-300);
253
+ --border-2-theme-300: var(--border-2) solid var(--border-dark-300);
254
+ --border-4-theme-300: var(--border-4) solid var(--border-dark-300);
255
+ --border-1-theme-100: var(--border-1) solid var(--border-dark-100);
256
+ --border-2-theme-100: var(--border-2) solid var(--border-dark-100);
257
+ --border-4-theme-100: var(--border-4) solid var(--border-dark-100);
259
258
  --color-rolster-900: var(--color-base-900);
260
259
  --color-rolster-700: var(--color-base-700);
261
260
  --color-rolster-500: var(--color-base-500);
@@ -264,39 +263,55 @@
264
263
  --skeleton-rolster-500: var(--skeleton-base-500);
265
264
  --skeleton-rolster-300: var(--skeleton-base-300);
266
265
  --skeleton-rolster-100: var(--skeleton-base-100);
267
- --border-1-rolster-900: var(--border-1) solid
268
- var(--color-base-900);
269
- --border-2-rolster-900: var(--border-2) solid
270
- var(--color-base-900);
271
- --border-4-rolster-900: var(--border-4) solid
272
- var(--color-base-900);
273
- --border-1-rolster-700: var(--border-1) solid
274
- var(--color-base-700);
275
- --border-2-rolster-700: var(--border-2) solid
276
- var(--color-base-700);
277
- --border-4-rolster-700: var(--border-4) solid
278
- var(--color-base-700);
279
- --border-1-rolster-500: var(--border-1) solid
280
- var(--color-base-500);
281
- --border-2-rolster-500: var(--border-2) solid
282
- var(--color-base-500);
283
- --border-4-rolster-500: var(--border-4) solid
284
- var(--color-base-500);
285
- --border-1-rolster-300: var(--border-1) solid
286
- var(--color-base-300);
287
- --border-2-rolster-300: var(--border-2) solid
288
- var(--color-base-300);
289
- --border-4-rolster-300: var(--border-4) solid
290
- var(--color-base-300);
291
- --border-1-rolster-100: var(--border-1) solid
292
- var(--color-base-100);
293
- --border-2-rolster-100: var(--border-2) solid
294
- var(--color-base-100);
295
- --border-4-rolster-100: var(--border-4) solid
296
- var(--color-base-100);
266
+ --border-1-rolster-900: var(--border-1) solid var(--color-base-900);
267
+ --border-2-rolster-900: var(--border-2) solid var(--color-base-900);
268
+ --border-4-rolster-900: var(--border-4) solid var(--color-base-900);
269
+ --border-1-rolster-700: var(--border-1) solid var(--color-base-700);
270
+ --border-2-rolster-700: var(--border-2) solid var(--color-base-700);
271
+ --border-4-rolster-700: var(--border-4) solid var(--color-base-700);
272
+ --border-1-rolster-500: var(--border-1) solid var(--color-base-500);
273
+ --border-2-rolster-500: var(--border-2) solid var(--color-base-500);
274
+ --border-4-rolster-500: var(--border-4) solid var(--color-base-500);
275
+ --border-1-rolster-300: var(--border-1) solid var(--color-base-300);
276
+ --border-2-rolster-300: var(--border-2) solid var(--color-base-300);
277
+ --border-4-rolster-300: var(--border-4) solid var(--color-base-300);
278
+ --border-1-rolster-100: var(--border-1) solid var(--color-base-100);
279
+ --border-2-rolster-100: var(--border-2) solid var(--color-base-100);
280
+ --border-4-rolster-100: var(--border-4) solid var(--color-base-100);
297
281
  --box-shadow-rolster-500: var(--box-shadow-base-500);
298
282
  --backdrop-rolster-500: var(--backdrop-base-500);
299
- --gradient-rolster-500: var(--gradient-base-500); }
283
+ --gradient-rolster-500: var(--gradient-base-500);
284
+ --shadow-bottom-theme-2: var(--shadow-bottom-light-2);
285
+ --shadow-bottom-theme-4: var(--shadow-bottom-light-4);
286
+ --shadow-bottom-theme-8: var(--shadow-bottom-light-8);
287
+ --shadow-bottom-theme-16: var(--shadow-bottom-light-16);
288
+ --shadow-bottom-theme-24: var(--shadow-bottom-light-24);
289
+ --shadow-bottom-theme-32: var(--shadow-bottom-light-32);
290
+ --shadow-top-theme-2: var(--shadow-top-light-2);
291
+ --shadow-top-theme-4: var(--shadow-top-light-4);
292
+ --shadow-top-theme-8: var(--shadow-top-light-8);
293
+ --shadow-top-theme-16: var(--shadow-top-light-16);
294
+ --shadow-top-theme-24: var(--shadow-top-light-24);
295
+ --shadow-top-theme-32: var(--shadow-top-light-32);
296
+ --shadow-right-theme-2: var(--shadow-right-light-2);
297
+ --shadow-right-theme-4: var(--shadow-right-light-4);
298
+ --shadow-right-theme-8: var(--shadow-right-light-8);
299
+ --shadow-right-theme-16: var(--shadow-right-light-16);
300
+ --shadow-right-theme-24: var(--shadow-right-light-24);
301
+ --shadow-right-theme-32: var(--shadow-right-light-32);
302
+ --shadow-left-theme-2: var(--shadow-left-light-2);
303
+ --shadow-left-theme-4: var(--shadow-left-light-4);
304
+ --shadow-left-theme-8: var(--shadow-left-light-8);
305
+ --shadow-left-theme-16: var(--shadow-left-light-16);
306
+ --shadow-left-theme-24: var(--shadow-left-light-24);
307
+ --shadow-left-theme-32: var(--shadow-left-light-32);
308
+ --shadow-center-theme-2: var(--shadow-center-light-2);
309
+ --shadow-center-theme-4: var(--shadow-center-light-4);
310
+ --shadow-center-theme-8: var(--shadow-center-light-8);
311
+ --shadow-center-theme-16: var(--shadow-center-light-16);
312
+ --shadow-center-theme-24: var(--shadow-center-light-24);
313
+ --shadow-center-theme-32: var(--shadow-center-light-32);
314
+ }
300
315
 
301
316
  *[rls-theme='success'] {
302
317
  --color-rolster-900: var(--color-success-900);
@@ -307,39 +322,25 @@
307
322
  --skeleton-rolster-500: var(--skeleton-success-500);
308
323
  --skeleton-rolster-300: var(--skeleton-success-300);
309
324
  --skeleton-rolster-100: var(--skeleton-success-100);
310
- --border-1-rolster-900: var(--border-1) solid
311
- var(--color-success-900);
312
- --border-2-rolster-900: var(--border-2) solid
313
- var(--color-success-900);
314
- --border-4-rolster-900: var(--border-4) solid
315
- var(--color-success-900);
316
- --border-1-rolster-700: var(--border-1) solid
317
- var(--color-success-700);
318
- --border-2-rolster-700: var(--border-2) solid
319
- var(--color-success-700);
320
- --border-4-rolster-700: var(--border-4) solid
321
- var(--color-success-700);
322
- --border-1-rolster-500: var(--border-1) solid
323
- var(--color-success-500);
324
- --border-2-rolster-500: var(--border-2) solid
325
- var(--color-success-500);
326
- --border-4-rolster-500: var(--border-4) solid
327
- var(--color-success-500);
328
- --border-1-rolster-300: var(--border-1) solid
329
- var(--color-success-300);
330
- --border-2-rolster-300: var(--border-2) solid
331
- var(--color-success-300);
332
- --border-4-rolster-300: var(--border-4) solid
333
- var(--color-success-300);
334
- --border-1-rolster-100: var(--border-1) solid
335
- var(--color-success-100);
336
- --border-2-rolster-100: var(--border-2) solid
337
- var(--color-success-100);
338
- --border-4-rolster-100: var(--border-4) solid
339
- var(--color-success-100);
325
+ --border-1-rolster-900: var(--border-1) solid var(--color-success-900);
326
+ --border-2-rolster-900: var(--border-2) solid var(--color-success-900);
327
+ --border-4-rolster-900: var(--border-4) solid var(--color-success-900);
328
+ --border-1-rolster-700: var(--border-1) solid var(--color-success-700);
329
+ --border-2-rolster-700: var(--border-2) solid var(--color-success-700);
330
+ --border-4-rolster-700: var(--border-4) solid var(--color-success-700);
331
+ --border-1-rolster-500: var(--border-1) solid var(--color-success-500);
332
+ --border-2-rolster-500: var(--border-2) solid var(--color-success-500);
333
+ --border-4-rolster-500: var(--border-4) solid var(--color-success-500);
334
+ --border-1-rolster-300: var(--border-1) solid var(--color-success-300);
335
+ --border-2-rolster-300: var(--border-2) solid var(--color-success-300);
336
+ --border-4-rolster-300: var(--border-4) solid var(--color-success-300);
337
+ --border-1-rolster-100: var(--border-1) solid var(--color-success-100);
338
+ --border-2-rolster-100: var(--border-2) solid var(--color-success-100);
339
+ --border-4-rolster-100: var(--border-4) solid var(--color-success-100);
340
340
  --box-shadow-rolster-500: var(--box-shadow-success-500);
341
341
  --backdrop-rolster-500: var(--backdrop-success-500);
342
- --gradient-rolster-500: var(--gradient-success-500); }
342
+ --gradient-rolster-500: var(--gradient-success-500);
343
+ }
343
344
 
344
345
  *[rls-theme='info'] {
345
346
  --color-rolster-900: var(--color-info-900);
@@ -350,39 +351,25 @@
350
351
  --skeleton-rolster-500: var(--skeleton-info-500);
351
352
  --skeleton-rolster-300: var(--skeleton-info-300);
352
353
  --skeleton-rolster-100: var(--skeleton-info-100);
353
- --border-1-rolster-900: var(--border-1) solid
354
- var(--color-info-900);
355
- --border-2-rolster-900: var(--border-2) solid
356
- var(--color-info-900);
357
- --border-4-rolster-900: var(--border-4) solid
358
- var(--color-info-900);
359
- --border-1-rolster-700: var(--border-1) solid
360
- var(--color-info-700);
361
- --border-2-rolster-700: var(--border-2) solid
362
- var(--color-info-700);
363
- --border-4-rolster-700: var(--border-4) solid
364
- var(--color-info-700);
365
- --border-1-rolster-500: var(--border-1) solid
366
- var(--color-info-500);
367
- --border-2-rolster-500: var(--border-2) solid
368
- var(--color-info-500);
369
- --border-4-rolster-500: var(--border-4) solid
370
- var(--color-info-500);
371
- --border-1-rolster-300: var(--border-1) solid
372
- var(--color-info-300);
373
- --border-2-rolster-300: var(--border-2) solid
374
- var(--color-info-300);
375
- --border-4-rolster-300: var(--border-4) solid
376
- var(--color-info-300);
377
- --border-1-rolster-100: var(--border-1) solid
378
- var(--color-info-100);
379
- --border-2-rolster-100: var(--border-2) solid
380
- var(--color-info-100);
381
- --border-4-rolster-100: var(--border-4) solid
382
- var(--color-info-100);
354
+ --border-1-rolster-900: var(--border-1) solid var(--color-info-900);
355
+ --border-2-rolster-900: var(--border-2) solid var(--color-info-900);
356
+ --border-4-rolster-900: var(--border-4) solid var(--color-info-900);
357
+ --border-1-rolster-700: var(--border-1) solid var(--color-info-700);
358
+ --border-2-rolster-700: var(--border-2) solid var(--color-info-700);
359
+ --border-4-rolster-700: var(--border-4) solid var(--color-info-700);
360
+ --border-1-rolster-500: var(--border-1) solid var(--color-info-500);
361
+ --border-2-rolster-500: var(--border-2) solid var(--color-info-500);
362
+ --border-4-rolster-500: var(--border-4) solid var(--color-info-500);
363
+ --border-1-rolster-300: var(--border-1) solid var(--color-info-300);
364
+ --border-2-rolster-300: var(--border-2) solid var(--color-info-300);
365
+ --border-4-rolster-300: var(--border-4) solid var(--color-info-300);
366
+ --border-1-rolster-100: var(--border-1) solid var(--color-info-100);
367
+ --border-2-rolster-100: var(--border-2) solid var(--color-info-100);
368
+ --border-4-rolster-100: var(--border-4) solid var(--color-info-100);
383
369
  --box-shadow-rolster-500: var(--box-shadow-info-500);
384
370
  --backdrop-rolster-500: var(--backdrop-info-500);
385
- --gradient-rolster-500: var(--gradient-info-500); }
371
+ --gradient-rolster-500: var(--gradient-info-500);
372
+ }
386
373
 
387
374
  *[rls-theme='happy'] {
388
375
  --color-rolster-900: var(--color-happy-900);
@@ -393,39 +380,25 @@
393
380
  --skeleton-rolster-500: var(--skeleton-happy-500);
394
381
  --skeleton-rolster-300: var(--skeleton-happy-300);
395
382
  --skeleton-rolster-100: var(--skeleton-happy-100);
396
- --border-1-rolster-900: var(--border-1) solid
397
- var(--color-happy-900);
398
- --border-2-rolster-900: var(--border-2) solid
399
- var(--color-happy-900);
400
- --border-4-rolster-900: var(--border-4) solid
401
- var(--color-happy-900);
402
- --border-1-rolster-700: var(--border-1) solid
403
- var(--color-happy-700);
404
- --border-2-rolster-700: var(--border-2) solid
405
- var(--color-happy-700);
406
- --border-4-rolster-700: var(--border-4) solid
407
- var(--color-happy-700);
408
- --border-1-rolster-500: var(--border-1) solid
409
- var(--color-happy-500);
410
- --border-2-rolster-500: var(--border-2) solid
411
- var(--color-happy-500);
412
- --border-4-rolster-500: var(--border-4) solid
413
- var(--color-happy-500);
414
- --border-1-rolster-300: var(--border-1) solid
415
- var(--color-happy-300);
416
- --border-2-rolster-300: var(--border-2) solid
417
- var(--color-happy-300);
418
- --border-4-rolster-300: var(--border-4) solid
419
- var(--color-happy-300);
420
- --border-1-rolster-100: var(--border-1) solid
421
- var(--color-happy-100);
422
- --border-2-rolster-100: var(--border-2) solid
423
- var(--color-happy-100);
424
- --border-4-rolster-100: var(--border-4) solid
425
- var(--color-happy-100);
383
+ --border-1-rolster-900: var(--border-1) solid var(--color-happy-900);
384
+ --border-2-rolster-900: var(--border-2) solid var(--color-happy-900);
385
+ --border-4-rolster-900: var(--border-4) solid var(--color-happy-900);
386
+ --border-1-rolster-700: var(--border-1) solid var(--color-happy-700);
387
+ --border-2-rolster-700: var(--border-2) solid var(--color-happy-700);
388
+ --border-4-rolster-700: var(--border-4) solid var(--color-happy-700);
389
+ --border-1-rolster-500: var(--border-1) solid var(--color-happy-500);
390
+ --border-2-rolster-500: var(--border-2) solid var(--color-happy-500);
391
+ --border-4-rolster-500: var(--border-4) solid var(--color-happy-500);
392
+ --border-1-rolster-300: var(--border-1) solid var(--color-happy-300);
393
+ --border-2-rolster-300: var(--border-2) solid var(--color-happy-300);
394
+ --border-4-rolster-300: var(--border-4) solid var(--color-happy-300);
395
+ --border-1-rolster-100: var(--border-1) solid var(--color-happy-100);
396
+ --border-2-rolster-100: var(--border-2) solid var(--color-happy-100);
397
+ --border-4-rolster-100: var(--border-4) solid var(--color-happy-100);
426
398
  --box-shadow-rolster-500: var(--box-shadow-happy-500);
427
399
  --backdrop-rolster-500: var(--backdrop-happy-500);
428
- --gradient-rolster-500: var(--gradient-happy-500); }
400
+ --gradient-rolster-500: var(--gradient-happy-500);
401
+ }
429
402
 
430
403
  *[rls-theme='warning'] {
431
404
  --color-rolster-900: var(--color-warning-900);
@@ -436,39 +409,25 @@
436
409
  --skeleton-rolster-500: var(--skeleton-warning-500);
437
410
  --skeleton-rolster-300: var(--skeleton-warning-300);
438
411
  --skeleton-rolster-100: var(--skeleton-warning-100);
439
- --border-1-rolster-900: var(--border-1) solid
440
- var(--color-warning-900);
441
- --border-2-rolster-900: var(--border-2) solid
442
- var(--color-warning-900);
443
- --border-4-rolster-900: var(--border-4) solid
444
- var(--color-warning-900);
445
- --border-1-rolster-700: var(--border-1) solid
446
- var(--color-warning-700);
447
- --border-2-rolster-700: var(--border-2) solid
448
- var(--color-warning-700);
449
- --border-4-rolster-700: var(--border-4) solid
450
- var(--color-warning-700);
451
- --border-1-rolster-500: var(--border-1) solid
452
- var(--color-warning-500);
453
- --border-2-rolster-500: var(--border-2) solid
454
- var(--color-warning-500);
455
- --border-4-rolster-500: var(--border-4) solid
456
- var(--color-warning-500);
457
- --border-1-rolster-300: var(--border-1) solid
458
- var(--color-warning-300);
459
- --border-2-rolster-300: var(--border-2) solid
460
- var(--color-warning-300);
461
- --border-4-rolster-300: var(--border-4) solid
462
- var(--color-warning-300);
463
- --border-1-rolster-100: var(--border-1) solid
464
- var(--color-warning-100);
465
- --border-2-rolster-100: var(--border-2) solid
466
- var(--color-warning-100);
467
- --border-4-rolster-100: var(--border-4) solid
468
- var(--color-warning-100);
412
+ --border-1-rolster-900: var(--border-1) solid var(--color-warning-900);
413
+ --border-2-rolster-900: var(--border-2) solid var(--color-warning-900);
414
+ --border-4-rolster-900: var(--border-4) solid var(--color-warning-900);
415
+ --border-1-rolster-700: var(--border-1) solid var(--color-warning-700);
416
+ --border-2-rolster-700: var(--border-2) solid var(--color-warning-700);
417
+ --border-4-rolster-700: var(--border-4) solid var(--color-warning-700);
418
+ --border-1-rolster-500: var(--border-1) solid var(--color-warning-500);
419
+ --border-2-rolster-500: var(--border-2) solid var(--color-warning-500);
420
+ --border-4-rolster-500: var(--border-4) solid var(--color-warning-500);
421
+ --border-1-rolster-300: var(--border-1) solid var(--color-warning-300);
422
+ --border-2-rolster-300: var(--border-2) solid var(--color-warning-300);
423
+ --border-4-rolster-300: var(--border-4) solid var(--color-warning-300);
424
+ --border-1-rolster-100: var(--border-1) solid var(--color-warning-100);
425
+ --border-2-rolster-100: var(--border-2) solid var(--color-warning-100);
426
+ --border-4-rolster-100: var(--border-4) solid var(--color-warning-100);
469
427
  --box-shadow-rolster-500: var(--box-shadow-warning-500);
470
428
  --backdrop-rolster-500: var(--backdrop-warning-500);
471
- --gradient-rolster-500: var(--gradient-warning-500); }
429
+ --gradient-rolster-500: var(--gradient-warning-500);
430
+ }
472
431
 
473
432
  *[rls-theme='danger'] {
474
433
  --color-rolster-900: var(--color-danger-900);
@@ -479,39 +438,25 @@
479
438
  --skeleton-rolster-500: var(--skeleton-danger-500);
480
439
  --skeleton-rolster-300: var(--skeleton-danger-300);
481
440
  --skeleton-rolster-100: var(--skeleton-danger-100);
482
- --border-1-rolster-900: var(--border-1) solid
483
- var(--color-danger-900);
484
- --border-2-rolster-900: var(--border-2) solid
485
- var(--color-danger-900);
486
- --border-4-rolster-900: var(--border-4) solid
487
- var(--color-danger-900);
488
- --border-1-rolster-700: var(--border-1) solid
489
- var(--color-danger-700);
490
- --border-2-rolster-700: var(--border-2) solid
491
- var(--color-danger-700);
492
- --border-4-rolster-700: var(--border-4) solid
493
- var(--color-danger-700);
494
- --border-1-rolster-500: var(--border-1) solid
495
- var(--color-danger-500);
496
- --border-2-rolster-500: var(--border-2) solid
497
- var(--color-danger-500);
498
- --border-4-rolster-500: var(--border-4) solid
499
- var(--color-danger-500);
500
- --border-1-rolster-300: var(--border-1) solid
501
- var(--color-danger-300);
502
- --border-2-rolster-300: var(--border-2) solid
503
- var(--color-danger-300);
504
- --border-4-rolster-300: var(--border-4) solid
505
- var(--color-danger-300);
506
- --border-1-rolster-100: var(--border-1) solid
507
- var(--color-danger-100);
508
- --border-2-rolster-100: var(--border-2) solid
509
- var(--color-danger-100);
510
- --border-4-rolster-100: var(--border-4) solid
511
- var(--color-danger-100);
441
+ --border-1-rolster-900: var(--border-1) solid var(--color-danger-900);
442
+ --border-2-rolster-900: var(--border-2) solid var(--color-danger-900);
443
+ --border-4-rolster-900: var(--border-4) solid var(--color-danger-900);
444
+ --border-1-rolster-700: var(--border-1) solid var(--color-danger-700);
445
+ --border-2-rolster-700: var(--border-2) solid var(--color-danger-700);
446
+ --border-4-rolster-700: var(--border-4) solid var(--color-danger-700);
447
+ --border-1-rolster-500: var(--border-1) solid var(--color-danger-500);
448
+ --border-2-rolster-500: var(--border-2) solid var(--color-danger-500);
449
+ --border-4-rolster-500: var(--border-4) solid var(--color-danger-500);
450
+ --border-1-rolster-300: var(--border-1) solid var(--color-danger-300);
451
+ --border-2-rolster-300: var(--border-2) solid var(--color-danger-300);
452
+ --border-4-rolster-300: var(--border-4) solid var(--color-danger-300);
453
+ --border-1-rolster-100: var(--border-1) solid var(--color-danger-100);
454
+ --border-2-rolster-100: var(--border-2) solid var(--color-danger-100);
455
+ --border-4-rolster-100: var(--border-4) solid var(--color-danger-100);
512
456
  --box-shadow-rolster-500: var(--box-shadow-danger-500);
513
457
  --backdrop-rolster-500: var(--backdrop-danger-500);
514
- --gradient-rolster-500: var(--gradient-danger-500); }
458
+ --gradient-rolster-500: var(--gradient-danger-500);
459
+ }
515
460
 
516
461
  :root {
517
462
  --font-weight-thin: 100;
@@ -522,15 +467,18 @@
522
467
  --font-weight-semibold: 600;
523
468
  --font-weight-bold: 700;
524
469
  --font-weight-extrabold: 800;
525
- --font-weight-black: 900; }
470
+ --font-weight-black: 900;
471
+ }
526
472
 
527
473
  :root {
528
- --rolster-font-family: -rolster-system-font, -apple-system,
529
- BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica; }
474
+ --rolster-font-family: -rolster-system-font, -apple-system, BlinkMacSystemFont,
475
+ 'Segoe UI', Roboto, Helvetica;
476
+ }
530
477
 
531
478
  html {
532
479
  font-size: var(--rolster-font-size, 16px);
533
- font-family: var(--rolster-font-family); }
480
+ font-family: var(--rolster-font-family);
481
+ }
534
482
 
535
483
  body {
536
484
  position: absolute;
@@ -541,65 +489,79 @@ body {
541
489
  margin: 0rem;
542
490
  padding: 0rem;
543
491
  -webkit-tap-highlight-color: transparent;
544
- background: var(--background-theme-300); }
492
+ background: var(--background-theme-300);
493
+ }
545
494
 
546
495
  div {
547
496
  position: relative;
548
- width: 100%; }
497
+ width: 100%;
498
+ }
549
499
 
550
500
  audio,
551
501
  canvas,
552
502
  progress,
553
503
  video {
554
- vertical-align: baseline; }
504
+ vertical-align: baseline;
505
+ }
555
506
 
556
507
  audio:not([controls]) {
557
508
  display: none;
558
- height: 0rem; }
509
+ height: 0rem;
510
+ }
559
511
 
560
512
  b,
561
513
  strong {
562
- font-weight: bold; }
514
+ font-weight: bold;
515
+ }
563
516
 
564
517
  img {
565
- border: 0rem; }
518
+ border: 0rem;
519
+ }
566
520
 
567
521
  svg:not(:root) {
568
- overflow: hidden; }
522
+ overflow: hidden;
523
+ }
569
524
 
570
525
  figure {
571
- margin: 1rem 40rem; }
526
+ margin: 1rem 40rem;
527
+ }
572
528
 
573
529
  hr {
574
530
  height: 0.0625rem;
575
531
  border-width: 0rem;
576
- box-sizing: content-box; }
532
+ box-sizing: content-box;
533
+ }
577
534
 
578
535
  pre {
579
- overflow: auto; }
536
+ overflow: auto;
537
+ }
580
538
 
581
539
  code,
582
540
  kbd,
583
541
  pre,
584
542
  samp {
585
543
  font-family: inherit;
586
- font-size: 1rem; }
544
+ font-size: 1rem;
545
+ }
587
546
 
588
547
  label,
589
548
  input,
590
549
  select,
591
550
  textarea {
592
551
  font-family: inherit;
593
- line-height: normal; }
552
+ line-height: normal;
553
+ }
594
554
 
595
555
  textarea {
596
556
  overflow: auto;
597
557
  height: auto;
598
558
  font: inherit;
599
- color: inherit; }
559
+ color: inherit;
560
+ }
600
561
 
601
562
  textarea::placeholder {
602
- padding-left: 0.125rem; }
563
+ padding-left: 0.125rem;
564
+ }
603
565
 
604
566
  form,
605
567
  input,
@@ -607,12 +569,14 @@ optgroup,
607
569
  select {
608
570
  margin: 0rem;
609
571
  font: inherit;
610
- color: inherit; }
572
+ color: inherit;
573
+ }
611
574
 
612
575
  html input[type='button'],
613
576
  input[type='reset'],
614
577
  input[type='submit'] {
615
- cursor: pointer; }
578
+ cursor: pointer;
579
+ }
616
580
 
617
581
  a,
618
582
  a div,
@@ -631,11 +595,13 @@ button ion-label,
631
595
  [tappable] ion-label,
632
596
  input,
633
597
  textarea {
634
- touch-action: manipulation; }
598
+ touch-action: manipulation;
599
+ }
635
600
 
636
601
  a ion-label,
637
602
  button ion-label {
638
- pointer-events: none; }
603
+ pointer-events: none;
604
+ }
639
605
 
640
606
  button {
641
607
  border: 0rem;
@@ -644,41 +610,50 @@ button {
644
610
  font-style: inherit;
645
611
  font-variant: inherit;
646
612
  line-height: 1;
647
- text-transform: none; }
613
+ text-transform: none;
614
+ }
648
615
 
649
616
  [tappable] {
650
- cursor: pointer; }
617
+ cursor: pointer;
618
+ }
651
619
 
652
620
  a[disabled],
653
621
  button[disabled],
654
622
  html input[disabled] {
655
- cursor: default; }
623
+ cursor: default;
624
+ }
656
625
 
657
626
  button::-moz-focus-inner,
658
627
  input::-moz-focus-inner {
659
628
  padding: 0rem;
660
- border: 0rem; }
629
+ border: 0rem;
630
+ }
661
631
 
662
632
  input[type='checkbox'],
663
633
  input[type='radio'] {
664
634
  padding: 0rem;
665
- box-sizing: border-box; }
635
+ box-sizing: border-box;
636
+ }
666
637
 
667
638
  input[type='number']::-webkit-inner-spin-button,
668
639
  input[type='number']::-webkit-outer-spin-button {
669
- height: auto; }
640
+ height: auto;
641
+ }
670
642
 
671
643
  input[type='search']::-webkit-search-cancel-button,
672
644
  input[type='search']::-webkit-search-decoration {
673
- -webkit-appearance: none; }
645
+ -webkit-appearance: none;
646
+ }
674
647
 
675
648
  table {
676
649
  border-collapse: collapse;
677
- border-spacing: 0rem; }
650
+ border-spacing: 0rem;
651
+ }
678
652
 
679
653
  td,
680
654
  th {
681
- padding: 0rem; }
655
+ padding: 0rem;
656
+ }
682
657
 
683
658
  ul {
684
659
  list-style-type: none;
@@ -686,7 +661,8 @@ ul {
686
661
  margin-block-end: 0rem;
687
662
  margin-inline-start: 0rem;
688
663
  margin-inline-end: 0rem;
689
- padding-inline-start: 0rem; }
664
+ padding-inline-start: 0rem;
665
+ }
690
666
 
691
667
  h1,
692
668
  h2,
@@ -696,43 +672,56 @@ h5,
696
672
  h6,
697
673
  p {
698
674
  margin: 0rem;
699
- font-weight: var(--font-weight-medium); }
675
+ font-weight: var(--font-weight-medium);
676
+ }
700
677
 
701
678
  .font-dark-500 {
702
- color: var(--color-dark-500); }
679
+ color: var(--color-dark-500);
680
+ }
703
681
 
704
682
  .font-dark-300 {
705
- color: var(--color-dark-300); }
683
+ color: var(--color-dark-300);
684
+ }
706
685
 
707
686
  .font-dark-100 {
708
- color: var(--color-dark-100); }
687
+ color: var(--color-dark-100);
688
+ }
709
689
 
710
690
  .font-light-500 {
711
- color: var(--color-light-500); }
691
+ color: var(--color-light-500);
692
+ }
712
693
 
713
694
  .font-light-300 {
714
- color: var(--color-light-300); }
695
+ color: var(--color-light-300);
696
+ }
715
697
 
716
698
  .font-light-100 {
717
- color: var(--color-light-100); }
699
+ color: var(--color-light-100);
700
+ }
718
701
 
719
702
  .bg-dark-500 {
720
- background: var(--background-dark-500); }
703
+ background: var(--background-dark-500);
704
+ }
721
705
 
722
706
  .bg-dark-300 {
723
- background: var(--background-dark-300); }
707
+ background: var(--background-dark-300);
708
+ }
724
709
 
725
710
  .bg-dark-100 {
726
- background: var(--background-dark-100); }
711
+ background: var(--background-dark-100);
712
+ }
727
713
 
728
714
  .bg-light-500 {
729
- background: var(--background-light-500); }
715
+ background: var(--background-light-500);
716
+ }
730
717
 
731
718
  .bg-light-300 {
732
- background: var(--background-light-300); }
719
+ background: var(--background-light-300);
720
+ }
733
721
 
734
722
  .bg-light-100 {
735
- background: var(--background-light-100); }
723
+ background: var(--background-light-100);
724
+ }
736
725
 
737
726
  :root {
738
727
  --flex-grid-12-gap: 0rem;
@@ -752,129 +741,179 @@ p {
752
741
  --flex-grid-6-col-3: 0rem;
753
742
  --flex-grid-6-col-4: 0rem;
754
743
  --flex-grid-4-col-2: 0rem;
755
- --flex-grid-4-col-3: 0rem; }
744
+ --flex-grid-4-col-3: 0rem;
745
+ }
756
746
 
757
747
  .xs-grid-8 {
758
748
  display: grid;
759
- gap: var(--sizing-8); }
749
+ gap: var(--sizing-8);
750
+ }
760
751
 
761
752
  .xs-grid-12 {
762
753
  display: grid;
763
- gap: var(--sizing-12); }
754
+ gap: var(--sizing-12);
755
+ }
764
756
 
765
757
  .xs-grid-16 {
766
758
  display: grid;
767
- gap: var(--sizing-16); }
759
+ gap: var(--sizing-16);
760
+ }
768
761
 
769
762
  .xs-grid-col-12 {
770
- grid-template-columns: repeat(12, 1fr); }
763
+ grid-template-columns: repeat(12, 1fr);
764
+ }
771
765
 
772
766
  .xs-grid-col-8 {
773
- grid-template-columns: repeat(8, 1fr); }
767
+ grid-template-columns: repeat(8, 1fr);
768
+ }
774
769
 
775
770
  .xs-grid-col-6 {
776
- grid-template-columns: repeat(6, 1fr); }
771
+ grid-template-columns: repeat(6, 1fr);
772
+ }
777
773
 
778
774
  .xs-grid-col-4 {
779
- grid-template-columns: repeat(4, 1fr); }
775
+ grid-template-columns: repeat(4, 1fr);
776
+ }
780
777
 
781
778
  .xs-grid-col-2 {
782
- grid-template-columns: repeat(2, 1fr); }
779
+ grid-template-columns: repeat(2, 1fr);
780
+ }
783
781
 
784
782
  .xs-grid-col-1 {
785
- grid-template-columns: repeat(1, 1fr); }
783
+ grid-template-columns: repeat(1, 1fr);
784
+ }
786
785
 
787
786
  @media screen and (min-width: 360px) {
788
787
  .sm-grid-8 {
789
788
  display: grid;
790
- gap: var(--sizing-8); }
789
+ gap: var(--sizing-8);
790
+ }
791
791
  .sm-grid-12 {
792
792
  display: grid;
793
- gap: var(--sizing-12); }
793
+ gap: var(--sizing-12);
794
+ }
794
795
  .sm-grid-16 {
795
796
  display: grid;
796
- gap: var(--sizing-16); }
797
+ gap: var(--sizing-16);
798
+ }
797
799
  .sm-grid-col-12 {
798
- grid-template-columns: repeat(12, 1fr); }
800
+ grid-template-columns: repeat(12, 1fr);
801
+ }
799
802
  .sm-grid-col-8 {
800
- grid-template-columns: repeat(8, 1fr); }
803
+ grid-template-columns: repeat(8, 1fr);
804
+ }
801
805
  .sm-grid-col-6 {
802
- grid-template-columns: repeat(6, 1fr); }
806
+ grid-template-columns: repeat(6, 1fr);
807
+ }
803
808
  .sm-grid-col-4 {
804
- grid-template-columns: repeat(4, 1fr); }
809
+ grid-template-columns: repeat(4, 1fr);
810
+ }
805
811
  .sm-grid-col-2 {
806
- grid-template-columns: repeat(2, 1fr); }
812
+ grid-template-columns: repeat(2, 1fr);
813
+ }
807
814
  .sm-grid-col-1 {
808
- grid-template-columns: repeat(1, 1fr); } }
815
+ grid-template-columns: repeat(1, 1fr);
816
+ }
817
+ }
809
818
 
810
819
  @media screen and (min-width: 640px) {
811
820
  .md-grid-8 {
812
821
  display: grid;
813
- gap: var(--sizing-8); }
822
+ gap: var(--sizing-8);
823
+ }
814
824
  .md-grid-12 {
815
825
  display: grid;
816
- gap: var(--sizing-12); }
826
+ gap: var(--sizing-12);
827
+ }
817
828
  .md-grid-16 {
818
829
  display: grid;
819
- gap: var(--sizing-16); }
830
+ gap: var(--sizing-16);
831
+ }
820
832
  .md-grid-col-12 {
821
- grid-template-columns: repeat(12, 1fr); }
833
+ grid-template-columns: repeat(12, 1fr);
834
+ }
822
835
  .md-grid-col-8 {
823
- grid-template-columns: repeat(8, 1fr); }
836
+ grid-template-columns: repeat(8, 1fr);
837
+ }
824
838
  .md-grid-col-6 {
825
- grid-template-columns: repeat(6, 1fr); }
839
+ grid-template-columns: repeat(6, 1fr);
840
+ }
826
841
  .md-grid-col-4 {
827
- grid-template-columns: repeat(4, 1fr); }
842
+ grid-template-columns: repeat(4, 1fr);
843
+ }
828
844
  .md-grid-col-2 {
829
- grid-template-columns: repeat(2, 1fr); }
845
+ grid-template-columns: repeat(2, 1fr);
846
+ }
830
847
  .md-grid-col-1 {
831
- grid-template-columns: repeat(1, 1fr); } }
848
+ grid-template-columns: repeat(1, 1fr);
849
+ }
850
+ }
832
851
 
833
852
  @media screen and (min-width: 960px) {
834
853
  .lg-grid-8 {
835
854
  display: grid;
836
- gap: var(--sizing-8); }
855
+ gap: var(--sizing-8);
856
+ }
837
857
  .lg-grid-12 {
838
858
  display: grid;
839
- gap: var(--sizing-12); }
859
+ gap: var(--sizing-12);
860
+ }
840
861
  .lg-grid-16 {
841
862
  display: grid;
842
- gap: var(--sizing-16); }
863
+ gap: var(--sizing-16);
864
+ }
843
865
  .lg-grid-col-12 {
844
- grid-template-columns: repeat(12, 1fr); }
866
+ grid-template-columns: repeat(12, 1fr);
867
+ }
845
868
  .lg-grid-col-8 {
846
- grid-template-columns: repeat(8, 1fr); }
869
+ grid-template-columns: repeat(8, 1fr);
870
+ }
847
871
  .lg-grid-col-6 {
848
- grid-template-columns: repeat(6, 1fr); }
872
+ grid-template-columns: repeat(6, 1fr);
873
+ }
849
874
  .lg-grid-col-4 {
850
- grid-template-columns: repeat(4, 1fr); }
875
+ grid-template-columns: repeat(4, 1fr);
876
+ }
851
877
  .lg-grid-col-2 {
852
- grid-template-columns: repeat(2, 1fr); }
878
+ grid-template-columns: repeat(2, 1fr);
879
+ }
853
880
  .lg-grid-col-1 {
854
- grid-template-columns: repeat(1, 1fr); } }
881
+ grid-template-columns: repeat(1, 1fr);
882
+ }
883
+ }
855
884
 
856
885
  @media screen and (min-width: 1280px) {
857
886
  .xl-grid-8 {
858
887
  display: grid;
859
- gap: var(--sizing-8); }
888
+ gap: var(--sizing-8);
889
+ }
860
890
  .xl-grid-12 {
861
891
  display: grid;
862
- gap: var(--sizing-12); }
892
+ gap: var(--sizing-12);
893
+ }
863
894
  .xl-grid-16 {
864
895
  display: grid;
865
- gap: var(--sizing-16); }
896
+ gap: var(--sizing-16);
897
+ }
866
898
  .xl-grid-col-12 {
867
- grid-template-columns: repeat(12, 1fr); }
899
+ grid-template-columns: repeat(12, 1fr);
900
+ }
868
901
  .xl-grid-col-8 {
869
- grid-template-columns: repeat(8, 1fr); }
902
+ grid-template-columns: repeat(8, 1fr);
903
+ }
870
904
  .xl-grid-col-6 {
871
- grid-template-columns: repeat(6, 1fr); }
905
+ grid-template-columns: repeat(6, 1fr);
906
+ }
872
907
  .xl-grid-col-4 {
873
- grid-template-columns: repeat(4, 1fr); }
908
+ grid-template-columns: repeat(4, 1fr);
909
+ }
874
910
  .xl-grid-col-2 {
875
- grid-template-columns: repeat(2, 1fr); }
911
+ grid-template-columns: repeat(2, 1fr);
912
+ }
876
913
  .xl-grid-col-1 {
877
- grid-template-columns: repeat(1, 1fr); } }
914
+ grid-template-columns: repeat(1, 1fr);
915
+ }
916
+ }
878
917
 
879
918
  .xs-flex-grid-8 {
880
919
  display: inline-flex;
@@ -897,7 +936,8 @@ p {
897
936
  --flex-grid-6-col-3: 0.275rem;
898
937
  --flex-grid-6-col-4: 0.2125rem;
899
938
  --flex-grid-4-col-2: 0.25rem;
900
- --flex-grid-4-col-3: 0.125rem; }
939
+ --flex-grid-4-col-3: 0.125rem;
940
+ }
901
941
 
902
942
  .xs-flex-grid-12 {
903
943
  display: inline-flex;
@@ -920,7 +960,8 @@ p {
920
960
  --flex-grid-6-col-3: 0.5rem;
921
961
  --flex-grid-6-col-4: 0.355rem;
922
962
  --flex-grid-4-col-2: 0.5rem;
923
- --flex-grid-4-col-3: 0.275rem; }
963
+ --flex-grid-4-col-3: 0.275rem;
964
+ }
924
965
 
925
966
  .xs-flex-grid-16 {
926
967
  display: inline-flex;
@@ -943,63 +984,96 @@ p {
943
984
  --flex-grid-6-col-3: 0.5rem;
944
985
  --flex-grid-6-col-4: 0.355rem;
945
986
  --flex-grid-4-col-2: 0.5rem;
946
- --flex-grid-4-col-3: 0.275rem; }
987
+ --flex-grid-4-col-3: 0.275rem;
988
+ }
947
989
 
948
990
  .xs-flex-grid-col-4 > * {
949
- width: calc(25% - var(--flex-grid-4-gap)); }
950
- .xs-flex-grid-col-4 > *.xs-flex-col-1 {
951
- width: calc(25% - var(--flex-grid-4-gap)); }
952
- .xs-flex-grid-col-4 > *.xs-flex-col-2 {
953
- width: calc(50% - var(--flex-grid-4-col-2)); }
954
- .xs-flex-grid-col-4 > *.xs-flex-col-3 {
955
- width: calc(75% - var(--flex-grid-4-col-3)); }
956
- .xs-flex-grid-col-4 > *.xs-flex-col-4, .xs-flex-grid-col-4 > *.xs-flex-col-6, .xs-flex-grid-col-4 > *.xs-flex-col-8, .xs-flex-grid-col-4 > *.xs-flex-col-12 {
957
- width: 100%; }
991
+ width: calc(25% - var(--flex-grid-4-gap));
992
+ }
993
+ .xs-flex-grid-col-4 > *.xs-flex-col-1 {
994
+ width: calc(25% - var(--flex-grid-4-gap));
995
+ }
996
+ .xs-flex-grid-col-4 > *.xs-flex-col-2 {
997
+ width: calc(50% - var(--flex-grid-4-col-2));
998
+ }
999
+ .xs-flex-grid-col-4 > *.xs-flex-col-3 {
1000
+ width: calc(75% - var(--flex-grid-4-col-3));
1001
+ }
1002
+ .xs-flex-grid-col-4 > *.xs-flex-col-4,
1003
+ .xs-flex-grid-col-4 > *.xs-flex-col-6,
1004
+ .xs-flex-grid-col-4 > *.xs-flex-col-8,
1005
+ .xs-flex-grid-col-4 > *.xs-flex-col-12 {
1006
+ width: 100%;
1007
+ }
958
1008
 
959
1009
  .xs-flex-grid-col-6 > * {
960
- width: calc(16.66% - var(--flex-grid-6-gap)); }
961
- .xs-flex-grid-col-6 > *.xs-flex-col-1 {
962
- width: calc(16.66% - var(--flex-grid-6-gap)); }
963
- .xs-flex-grid-col-6 > *.xs-flex-col-2 {
964
- width: calc(33.34% - var(--flex-grid-6-col-2)); }
965
- .xs-flex-grid-col-6 > *.xs-flex-col-3 {
966
- width: calc(50% - var(--flex-grid-6-col-3)); }
967
- .xs-flex-grid-col-6 > *.xs-flex-col-4 {
968
- width: calc(66.67% - var(--flex-grid-6-col-4)); }
969
- .xs-flex-grid-col-6 > *.xs-flex-col-6, .xs-flex-grid-col-6 > *.xs-flex-col-8, .xs-flex-grid-col-6 > *.xs-flex-col-12 {
970
- width: 100%; }
1010
+ width: calc(16.66% - var(--flex-grid-6-gap));
1011
+ }
1012
+ .xs-flex-grid-col-6 > *.xs-flex-col-1 {
1013
+ width: calc(16.66% - var(--flex-grid-6-gap));
1014
+ }
1015
+ .xs-flex-grid-col-6 > *.xs-flex-col-2 {
1016
+ width: calc(33.34% - var(--flex-grid-6-col-2));
1017
+ }
1018
+ .xs-flex-grid-col-6 > *.xs-flex-col-3 {
1019
+ width: calc(50% - var(--flex-grid-6-col-3));
1020
+ }
1021
+ .xs-flex-grid-col-6 > *.xs-flex-col-4 {
1022
+ width: calc(66.67% - var(--flex-grid-6-col-4));
1023
+ }
1024
+ .xs-flex-grid-col-6 > *.xs-flex-col-6,
1025
+ .xs-flex-grid-col-6 > *.xs-flex-col-8,
1026
+ .xs-flex-grid-col-6 > *.xs-flex-col-12 {
1027
+ width: 100%;
1028
+ }
971
1029
 
972
1030
  .xs-flex-grid-col-8 > * {
973
- width: calc(12.5% - var(--flex-grid-8-gap)); }
974
- .xs-flex-grid-col-8 > *.xs-flex-col-1 {
975
- width: calc(12.5% - var(--flex-grid-8-gap)); }
976
- .xs-flex-grid-col-8 > *.xs-flex-col-2 {
977
- width: calc(25% - var(--flex-grid-8-col-2)); }
978
- .xs-flex-grid-col-8 > *.xs-flex-col-3 {
979
- width: calc(37.5% - var(--flex-grid-8-col-3)); }
980
- .xs-flex-grid-col-8 > *.xs-flex-col-4 {
981
- width: calc(50% - var(--flex-grid-8-col-4)); }
982
- .xs-flex-grid-col-8 > *.xs-flex-col-6 {
983
- width: calc(75% - var(--flex-grid-8-col-6)); }
984
- .xs-flex-grid-col-8 > *.xs-flex-col-8, .xs-flex-grid-col-8 > *.xs-flex-col-12 {
985
- width: 100%; }
1031
+ width: calc(12.5% - var(--flex-grid-8-gap));
1032
+ }
1033
+ .xs-flex-grid-col-8 > *.xs-flex-col-1 {
1034
+ width: calc(12.5% - var(--flex-grid-8-gap));
1035
+ }
1036
+ .xs-flex-grid-col-8 > *.xs-flex-col-2 {
1037
+ width: calc(25% - var(--flex-grid-8-col-2));
1038
+ }
1039
+ .xs-flex-grid-col-8 > *.xs-flex-col-3 {
1040
+ width: calc(37.5% - var(--flex-grid-8-col-3));
1041
+ }
1042
+ .xs-flex-grid-col-8 > *.xs-flex-col-4 {
1043
+ width: calc(50% - var(--flex-grid-8-col-4));
1044
+ }
1045
+ .xs-flex-grid-col-8 > *.xs-flex-col-6 {
1046
+ width: calc(75% - var(--flex-grid-8-col-6));
1047
+ }
1048
+ .xs-flex-grid-col-8 > *.xs-flex-col-8,
1049
+ .xs-flex-grid-col-8 > *.xs-flex-col-12 {
1050
+ width: 100%;
1051
+ }
986
1052
 
987
1053
  .xs-flex-grid-col-12 > * {
988
- width: calc(8.33% - var(--flex-grid-12-gap)); }
989
- .xs-flex-grid-col-12 > *.xs-flex-col-1 {
990
- width: calc(8.33% - var(--flex-grid-12-gap)); }
991
- .xs-flex-grid-col-12 > *.xs-flex-col-2 {
992
- width: calc(16.66% - var(--flex-grid-12-col-2)); }
993
- .xs-flex-grid-col-12 > *.xs-flex-col-3 {
994
- width: calc(25% - var(--flex-grid-12-col-3)); }
995
- .xs-flex-grid-col-12 > *.xs-flex-col-4 {
996
- width: calc(33.33% - var(--flex-grid-12-col-4)); }
997
- .xs-flex-grid-col-12 > *.xs-flex-col-6 {
998
- width: calc(50% - var(--flex-grid-12-col-6)); }
999
- .xs-flex-grid-col-12 > *.xs-flex-col-8 {
1000
- width: calc(66.66% - var(--flex-grid-12-col-8)); }
1001
- .xs-flex-grid-col-12 > *.xs-flex-col-12 {
1002
- width: 100%; }
1054
+ width: calc(8.33% - var(--flex-grid-12-gap));
1055
+ }
1056
+ .xs-flex-grid-col-12 > *.xs-flex-col-1 {
1057
+ width: calc(8.33% - var(--flex-grid-12-gap));
1058
+ }
1059
+ .xs-flex-grid-col-12 > *.xs-flex-col-2 {
1060
+ width: calc(16.66% - var(--flex-grid-12-col-2));
1061
+ }
1062
+ .xs-flex-grid-col-12 > *.xs-flex-col-3 {
1063
+ width: calc(25% - var(--flex-grid-12-col-3));
1064
+ }
1065
+ .xs-flex-grid-col-12 > *.xs-flex-col-4 {
1066
+ width: calc(33.33% - var(--flex-grid-12-col-4));
1067
+ }
1068
+ .xs-flex-grid-col-12 > *.xs-flex-col-6 {
1069
+ width: calc(50% - var(--flex-grid-12-col-6));
1070
+ }
1071
+ .xs-flex-grid-col-12 > *.xs-flex-col-8 {
1072
+ width: calc(66.66% - var(--flex-grid-12-col-8));
1073
+ }
1074
+ .xs-flex-grid-col-12 > *.xs-flex-col-12 {
1075
+ width: 100%;
1076
+ }
1003
1077
 
1004
1078
  @media screen and (min-width: 360px) {
1005
1079
  .sm-flex-grid-8 {
@@ -1023,7 +1097,8 @@ p {
1023
1097
  --flex-grid-6-col-3: 0.275rem;
1024
1098
  --flex-grid-6-col-4: 0.2125rem;
1025
1099
  --flex-grid-4-col-2: 0.25rem;
1026
- --flex-grid-4-col-3: 0.125rem; }
1100
+ --flex-grid-4-col-3: 0.125rem;
1101
+ }
1027
1102
  .sm-flex-grid-12 {
1028
1103
  display: inline-flex;
1029
1104
  flex-wrap: wrap;
@@ -1045,7 +1120,8 @@ p {
1045
1120
  --flex-grid-6-col-3: 0.5rem;
1046
1121
  --flex-grid-6-col-4: 0.355rem;
1047
1122
  --flex-grid-4-col-2: 0.5rem;
1048
- --flex-grid-4-col-3: 0.275rem; }
1123
+ --flex-grid-4-col-3: 0.275rem;
1124
+ }
1049
1125
  .sm-flex-grid-16 {
1050
1126
  display: inline-flex;
1051
1127
  flex-wrap: wrap;
@@ -1067,59 +1143,93 @@ p {
1067
1143
  --flex-grid-6-col-3: 0.5rem;
1068
1144
  --flex-grid-6-col-4: 0.355rem;
1069
1145
  --flex-grid-4-col-2: 0.5rem;
1070
- --flex-grid-4-col-3: 0.275rem; }
1146
+ --flex-grid-4-col-3: 0.275rem;
1147
+ }
1071
1148
  .sm-flex-grid-col-4 > * {
1072
- width: calc(25% - var(--flex-grid-4-gap)); }
1073
- .sm-flex-grid-col-4 > *.sm-flex-col-1 {
1074
- width: calc(25% - var(--flex-grid-4-gap)); }
1075
- .sm-flex-grid-col-4 > *.sm-flex-col-2 {
1076
- width: calc(50% - var(--flex-grid-4-col-2)); }
1077
- .sm-flex-grid-col-4 > *.sm-flex-col-3 {
1078
- width: calc(75% - var(--flex-grid-4-col-3)); }
1079
- .sm-flex-grid-col-4 > *.sm-flex-col-4, .sm-flex-grid-col-4 > *.sm-flex-col-6, .sm-flex-grid-col-4 > *.sm-flex-col-8, .sm-flex-grid-col-4 > *.sm-flex-col-12 {
1080
- width: 100%; }
1149
+ width: calc(25% - var(--flex-grid-4-gap));
1150
+ }
1151
+ .sm-flex-grid-col-4 > *.sm-flex-col-1 {
1152
+ width: calc(25% - var(--flex-grid-4-gap));
1153
+ }
1154
+ .sm-flex-grid-col-4 > *.sm-flex-col-2 {
1155
+ width: calc(50% - var(--flex-grid-4-col-2));
1156
+ }
1157
+ .sm-flex-grid-col-4 > *.sm-flex-col-3 {
1158
+ width: calc(75% - var(--flex-grid-4-col-3));
1159
+ }
1160
+ .sm-flex-grid-col-4 > *.sm-flex-col-4,
1161
+ .sm-flex-grid-col-4 > *.sm-flex-col-6,
1162
+ .sm-flex-grid-col-4 > *.sm-flex-col-8,
1163
+ .sm-flex-grid-col-4 > *.sm-flex-col-12 {
1164
+ width: 100%;
1165
+ }
1081
1166
  .sm-flex-grid-col-6 > * {
1082
- width: calc(16.66% - var(--flex-grid-6-gap)); }
1083
- .sm-flex-grid-col-6 > *.sm-flex-col-1 {
1084
- width: calc(16.66% - var(--flex-grid-6-gap)); }
1085
- .sm-flex-grid-col-6 > *.sm-flex-col-2 {
1086
- width: calc(33.34% - var(--flex-grid-6-col-2)); }
1087
- .sm-flex-grid-col-6 > *.sm-flex-col-3 {
1088
- width: calc(50% - var(--flex-grid-6-col-3)); }
1089
- .sm-flex-grid-col-6 > *.sm-flex-col-4 {
1090
- width: calc(66.67% - var(--flex-grid-6-col-4)); }
1091
- .sm-flex-grid-col-6 > *.sm-flex-col-6, .sm-flex-grid-col-6 > *.sm-flex-col-8, .sm-flex-grid-col-6 > *.sm-flex-col-12 {
1092
- width: 100%; }
1167
+ width: calc(16.66% - var(--flex-grid-6-gap));
1168
+ }
1169
+ .sm-flex-grid-col-6 > *.sm-flex-col-1 {
1170
+ width: calc(16.66% - var(--flex-grid-6-gap));
1171
+ }
1172
+ .sm-flex-grid-col-6 > *.sm-flex-col-2 {
1173
+ width: calc(33.34% - var(--flex-grid-6-col-2));
1174
+ }
1175
+ .sm-flex-grid-col-6 > *.sm-flex-col-3 {
1176
+ width: calc(50% - var(--flex-grid-6-col-3));
1177
+ }
1178
+ .sm-flex-grid-col-6 > *.sm-flex-col-4 {
1179
+ width: calc(66.67% - var(--flex-grid-6-col-4));
1180
+ }
1181
+ .sm-flex-grid-col-6 > *.sm-flex-col-6,
1182
+ .sm-flex-grid-col-6 > *.sm-flex-col-8,
1183
+ .sm-flex-grid-col-6 > *.sm-flex-col-12 {
1184
+ width: 100%;
1185
+ }
1093
1186
  .sm-flex-grid-col-8 > * {
1094
- width: calc(12.5% - var(--flex-grid-8-gap)); }
1095
- .sm-flex-grid-col-8 > *.sm-flex-col-1 {
1096
- width: calc(12.5% - var(--flex-grid-8-gap)); }
1097
- .sm-flex-grid-col-8 > *.sm-flex-col-2 {
1098
- width: calc(25% - var(--flex-grid-8-col-2)); }
1099
- .sm-flex-grid-col-8 > *.sm-flex-col-3 {
1100
- width: calc(37.5% - var(--flex-grid-8-col-3)); }
1101
- .sm-flex-grid-col-8 > *.sm-flex-col-4 {
1102
- width: calc(50% - var(--flex-grid-8-col-4)); }
1103
- .sm-flex-grid-col-8 > *.sm-flex-col-6 {
1104
- width: calc(75% - var(--flex-grid-8-col-6)); }
1105
- .sm-flex-grid-col-8 > *.sm-flex-col-8, .sm-flex-grid-col-8 > *.sm-flex-col-12 {
1106
- width: 100%; }
1187
+ width: calc(12.5% - var(--flex-grid-8-gap));
1188
+ }
1189
+ .sm-flex-grid-col-8 > *.sm-flex-col-1 {
1190
+ width: calc(12.5% - var(--flex-grid-8-gap));
1191
+ }
1192
+ .sm-flex-grid-col-8 > *.sm-flex-col-2 {
1193
+ width: calc(25% - var(--flex-grid-8-col-2));
1194
+ }
1195
+ .sm-flex-grid-col-8 > *.sm-flex-col-3 {
1196
+ width: calc(37.5% - var(--flex-grid-8-col-3));
1197
+ }
1198
+ .sm-flex-grid-col-8 > *.sm-flex-col-4 {
1199
+ width: calc(50% - var(--flex-grid-8-col-4));
1200
+ }
1201
+ .sm-flex-grid-col-8 > *.sm-flex-col-6 {
1202
+ width: calc(75% - var(--flex-grid-8-col-6));
1203
+ }
1204
+ .sm-flex-grid-col-8 > *.sm-flex-col-8,
1205
+ .sm-flex-grid-col-8 > *.sm-flex-col-12 {
1206
+ width: 100%;
1207
+ }
1107
1208
  .sm-flex-grid-col-12 > * {
1108
- width: calc(8.33% - var(--flex-grid-12-gap)); }
1109
- .sm-flex-grid-col-12 > *.sm-flex-col-1 {
1110
- width: calc(8.33% - var(--flex-grid-12-gap)); }
1111
- .sm-flex-grid-col-12 > *.sm-flex-col-2 {
1112
- width: calc(16.66% - var(--flex-grid-12-col-2)); }
1113
- .sm-flex-grid-col-12 > *.sm-flex-col-3 {
1114
- width: calc(25% - var(--flex-grid-12-col-3)); }
1115
- .sm-flex-grid-col-12 > *.sm-flex-col-4 {
1116
- width: calc(33.33% - var(--flex-grid-12-col-4)); }
1117
- .sm-flex-grid-col-12 > *.sm-flex-col-6 {
1118
- width: calc(50% - var(--flex-grid-12-col-6)); }
1119
- .sm-flex-grid-col-12 > *.sm-flex-col-8 {
1120
- width: calc(66.66% - var(--flex-grid-12-col-8)); }
1121
- .sm-flex-grid-col-12 > *.sm-flex-col-12 {
1122
- width: 100%; } }
1209
+ width: calc(8.33% - var(--flex-grid-12-gap));
1210
+ }
1211
+ .sm-flex-grid-col-12 > *.sm-flex-col-1 {
1212
+ width: calc(8.33% - var(--flex-grid-12-gap));
1213
+ }
1214
+ .sm-flex-grid-col-12 > *.sm-flex-col-2 {
1215
+ width: calc(16.66% - var(--flex-grid-12-col-2));
1216
+ }
1217
+ .sm-flex-grid-col-12 > *.sm-flex-col-3 {
1218
+ width: calc(25% - var(--flex-grid-12-col-3));
1219
+ }
1220
+ .sm-flex-grid-col-12 > *.sm-flex-col-4 {
1221
+ width: calc(33.33% - var(--flex-grid-12-col-4));
1222
+ }
1223
+ .sm-flex-grid-col-12 > *.sm-flex-col-6 {
1224
+ width: calc(50% - var(--flex-grid-12-col-6));
1225
+ }
1226
+ .sm-flex-grid-col-12 > *.sm-flex-col-8 {
1227
+ width: calc(66.66% - var(--flex-grid-12-col-8));
1228
+ }
1229
+ .sm-flex-grid-col-12 > *.sm-flex-col-12 {
1230
+ width: 100%;
1231
+ }
1232
+ }
1123
1233
 
1124
1234
  @media screen and (min-width: 640px) {
1125
1235
  .md-flex-grid-8 {
@@ -1143,7 +1253,8 @@ p {
1143
1253
  --flex-grid-6-col-3: 0.275rem;
1144
1254
  --flex-grid-6-col-4: 0.2125rem;
1145
1255
  --flex-grid-4-col-2: 0.25rem;
1146
- --flex-grid-4-col-3: 0.125rem; }
1256
+ --flex-grid-4-col-3: 0.125rem;
1257
+ }
1147
1258
  .md-flex-grid-12 {
1148
1259
  display: inline-flex;
1149
1260
  flex-wrap: wrap;
@@ -1165,7 +1276,8 @@ p {
1165
1276
  --flex-grid-6-col-3: 0.5rem;
1166
1277
  --flex-grid-6-col-4: 0.355rem;
1167
1278
  --flex-grid-4-col-2: 0.5rem;
1168
- --flex-grid-4-col-3: 0.275rem; }
1279
+ --flex-grid-4-col-3: 0.275rem;
1280
+ }
1169
1281
  .md-flex-grid-16 {
1170
1282
  display: inline-flex;
1171
1283
  flex-wrap: wrap;
@@ -1187,59 +1299,93 @@ p {
1187
1299
  --flex-grid-6-col-3: 0.5rem;
1188
1300
  --flex-grid-6-col-4: 0.355rem;
1189
1301
  --flex-grid-4-col-2: 0.5rem;
1190
- --flex-grid-4-col-3: 0.275rem; }
1302
+ --flex-grid-4-col-3: 0.275rem;
1303
+ }
1191
1304
  .md-flex-grid-col-4 > * {
1192
- width: calc(25% - var(--flex-grid-4-gap)); }
1193
- .md-flex-grid-col-4 > *.md-flex-col-1 {
1194
- width: calc(25% - var(--flex-grid-4-gap)); }
1195
- .md-flex-grid-col-4 > *.md-flex-col-2 {
1196
- width: calc(50% - var(--flex-grid-4-col-2)); }
1197
- .md-flex-grid-col-4 > *.md-flex-col-3 {
1198
- width: calc(75% - var(--flex-grid-4-col-3)); }
1199
- .md-flex-grid-col-4 > *.md-flex-col-4, .md-flex-grid-col-4 > *.md-flex-col-6, .md-flex-grid-col-4 > *.md-flex-col-8, .md-flex-grid-col-4 > *.md-flex-col-12 {
1200
- width: 100%; }
1305
+ width: calc(25% - var(--flex-grid-4-gap));
1306
+ }
1307
+ .md-flex-grid-col-4 > *.md-flex-col-1 {
1308
+ width: calc(25% - var(--flex-grid-4-gap));
1309
+ }
1310
+ .md-flex-grid-col-4 > *.md-flex-col-2 {
1311
+ width: calc(50% - var(--flex-grid-4-col-2));
1312
+ }
1313
+ .md-flex-grid-col-4 > *.md-flex-col-3 {
1314
+ width: calc(75% - var(--flex-grid-4-col-3));
1315
+ }
1316
+ .md-flex-grid-col-4 > *.md-flex-col-4,
1317
+ .md-flex-grid-col-4 > *.md-flex-col-6,
1318
+ .md-flex-grid-col-4 > *.md-flex-col-8,
1319
+ .md-flex-grid-col-4 > *.md-flex-col-12 {
1320
+ width: 100%;
1321
+ }
1201
1322
  .md-flex-grid-col-6 > * {
1202
- width: calc(16.66% - var(--flex-grid-6-gap)); }
1203
- .md-flex-grid-col-6 > *.md-flex-col-1 {
1204
- width: calc(16.66% - var(--flex-grid-6-gap)); }
1205
- .md-flex-grid-col-6 > *.md-flex-col-2 {
1206
- width: calc(33.34% - var(--flex-grid-6-col-2)); }
1207
- .md-flex-grid-col-6 > *.md-flex-col-3 {
1208
- width: calc(50% - var(--flex-grid-6-col-3)); }
1209
- .md-flex-grid-col-6 > *.md-flex-col-4 {
1210
- width: calc(66.67% - var(--flex-grid-6-col-4)); }
1211
- .md-flex-grid-col-6 > *.md-flex-col-6, .md-flex-grid-col-6 > *.md-flex-col-8, .md-flex-grid-col-6 > *.md-flex-col-12 {
1212
- width: 100%; }
1323
+ width: calc(16.66% - var(--flex-grid-6-gap));
1324
+ }
1325
+ .md-flex-grid-col-6 > *.md-flex-col-1 {
1326
+ width: calc(16.66% - var(--flex-grid-6-gap));
1327
+ }
1328
+ .md-flex-grid-col-6 > *.md-flex-col-2 {
1329
+ width: calc(33.34% - var(--flex-grid-6-col-2));
1330
+ }
1331
+ .md-flex-grid-col-6 > *.md-flex-col-3 {
1332
+ width: calc(50% - var(--flex-grid-6-col-3));
1333
+ }
1334
+ .md-flex-grid-col-6 > *.md-flex-col-4 {
1335
+ width: calc(66.67% - var(--flex-grid-6-col-4));
1336
+ }
1337
+ .md-flex-grid-col-6 > *.md-flex-col-6,
1338
+ .md-flex-grid-col-6 > *.md-flex-col-8,
1339
+ .md-flex-grid-col-6 > *.md-flex-col-12 {
1340
+ width: 100%;
1341
+ }
1213
1342
  .md-flex-grid-col-8 > * {
1214
- width: calc(12.5% - var(--flex-grid-8-gap)); }
1215
- .md-flex-grid-col-8 > *.md-flex-col-1 {
1216
- width: calc(12.5% - var(--flex-grid-8-gap)); }
1217
- .md-flex-grid-col-8 > *.md-flex-col-2 {
1218
- width: calc(25% - var(--flex-grid-8-col-2)); }
1219
- .md-flex-grid-col-8 > *.md-flex-col-3 {
1220
- width: calc(37.5% - var(--flex-grid-8-col-3)); }
1221
- .md-flex-grid-col-8 > *.md-flex-col-4 {
1222
- width: calc(50% - var(--flex-grid-8-col-4)); }
1223
- .md-flex-grid-col-8 > *.md-flex-col-6 {
1224
- width: calc(75% - var(--flex-grid-8-col-6)); }
1225
- .md-flex-grid-col-8 > *.md-flex-col-8, .md-flex-grid-col-8 > *.md-flex-col-12 {
1226
- width: 100%; }
1343
+ width: calc(12.5% - var(--flex-grid-8-gap));
1344
+ }
1345
+ .md-flex-grid-col-8 > *.md-flex-col-1 {
1346
+ width: calc(12.5% - var(--flex-grid-8-gap));
1347
+ }
1348
+ .md-flex-grid-col-8 > *.md-flex-col-2 {
1349
+ width: calc(25% - var(--flex-grid-8-col-2));
1350
+ }
1351
+ .md-flex-grid-col-8 > *.md-flex-col-3 {
1352
+ width: calc(37.5% - var(--flex-grid-8-col-3));
1353
+ }
1354
+ .md-flex-grid-col-8 > *.md-flex-col-4 {
1355
+ width: calc(50% - var(--flex-grid-8-col-4));
1356
+ }
1357
+ .md-flex-grid-col-8 > *.md-flex-col-6 {
1358
+ width: calc(75% - var(--flex-grid-8-col-6));
1359
+ }
1360
+ .md-flex-grid-col-8 > *.md-flex-col-8,
1361
+ .md-flex-grid-col-8 > *.md-flex-col-12 {
1362
+ width: 100%;
1363
+ }
1227
1364
  .md-flex-grid-col-12 > * {
1228
- width: calc(8.33% - var(--flex-grid-12-gap)); }
1229
- .md-flex-grid-col-12 > *.md-flex-col-1 {
1230
- width: calc(8.33% - var(--flex-grid-12-gap)); }
1231
- .md-flex-grid-col-12 > *.md-flex-col-2 {
1232
- width: calc(16.66% - var(--flex-grid-12-col-2)); }
1233
- .md-flex-grid-col-12 > *.md-flex-col-3 {
1234
- width: calc(25% - var(--flex-grid-12-col-3)); }
1235
- .md-flex-grid-col-12 > *.md-flex-col-4 {
1236
- width: calc(33.33% - var(--flex-grid-12-col-4)); }
1237
- .md-flex-grid-col-12 > *.md-flex-col-6 {
1238
- width: calc(50% - var(--flex-grid-12-col-6)); }
1239
- .md-flex-grid-col-12 > *.md-flex-col-8 {
1240
- width: calc(66.66% - var(--flex-grid-12-col-8)); }
1241
- .md-flex-grid-col-12 > *.md-flex-col-12 {
1242
- width: 100%; } }
1365
+ width: calc(8.33% - var(--flex-grid-12-gap));
1366
+ }
1367
+ .md-flex-grid-col-12 > *.md-flex-col-1 {
1368
+ width: calc(8.33% - var(--flex-grid-12-gap));
1369
+ }
1370
+ .md-flex-grid-col-12 > *.md-flex-col-2 {
1371
+ width: calc(16.66% - var(--flex-grid-12-col-2));
1372
+ }
1373
+ .md-flex-grid-col-12 > *.md-flex-col-3 {
1374
+ width: calc(25% - var(--flex-grid-12-col-3));
1375
+ }
1376
+ .md-flex-grid-col-12 > *.md-flex-col-4 {
1377
+ width: calc(33.33% - var(--flex-grid-12-col-4));
1378
+ }
1379
+ .md-flex-grid-col-12 > *.md-flex-col-6 {
1380
+ width: calc(50% - var(--flex-grid-12-col-6));
1381
+ }
1382
+ .md-flex-grid-col-12 > *.md-flex-col-8 {
1383
+ width: calc(66.66% - var(--flex-grid-12-col-8));
1384
+ }
1385
+ .md-flex-grid-col-12 > *.md-flex-col-12 {
1386
+ width: 100%;
1387
+ }
1388
+ }
1243
1389
 
1244
1390
  @media screen and (min-width: 960px) {
1245
1391
  .lg-flex-grid-8 {
@@ -1263,7 +1409,8 @@ p {
1263
1409
  --flex-grid-6-col-3: 0.275rem;
1264
1410
  --flex-grid-6-col-4: 0.2125rem;
1265
1411
  --flex-grid-4-col-2: 0.25rem;
1266
- --flex-grid-4-col-3: 0.125rem; }
1412
+ --flex-grid-4-col-3: 0.125rem;
1413
+ }
1267
1414
  .lg-flex-grid-12 {
1268
1415
  display: inline-flex;
1269
1416
  flex-wrap: wrap;
@@ -1285,7 +1432,8 @@ p {
1285
1432
  --flex-grid-6-col-3: 0.5rem;
1286
1433
  --flex-grid-6-col-4: 0.355rem;
1287
1434
  --flex-grid-4-col-2: 0.5rem;
1288
- --flex-grid-4-col-3: 0.275rem; }
1435
+ --flex-grid-4-col-3: 0.275rem;
1436
+ }
1289
1437
  .lg-flex-grid-16 {
1290
1438
  display: inline-flex;
1291
1439
  flex-wrap: wrap;
@@ -1307,59 +1455,93 @@ p {
1307
1455
  --flex-grid-6-col-3: 0.5rem;
1308
1456
  --flex-grid-6-col-4: 0.355rem;
1309
1457
  --flex-grid-4-col-2: 0.5rem;
1310
- --flex-grid-4-col-3: 0.275rem; }
1458
+ --flex-grid-4-col-3: 0.275rem;
1459
+ }
1311
1460
  .lg-flex-grid-col-4 > * {
1312
- width: calc(25% - var(--flex-grid-4-gap)); }
1313
- .lg-flex-grid-col-4 > *.lg-flex-col-1 {
1314
- width: calc(25% - var(--flex-grid-4-gap)); }
1315
- .lg-flex-grid-col-4 > *.lg-flex-col-2 {
1316
- width: calc(50% - var(--flex-grid-4-col-2)); }
1317
- .lg-flex-grid-col-4 > *.lg-flex-col-3 {
1318
- width: calc(75% - var(--flex-grid-4-col-3)); }
1319
- .lg-flex-grid-col-4 > *.lg-flex-col-4, .lg-flex-grid-col-4 > *.lg-flex-col-6, .lg-flex-grid-col-4 > *.lg-flex-col-8, .lg-flex-grid-col-4 > *.lg-flex-col-12 {
1320
- width: 100%; }
1461
+ width: calc(25% - var(--flex-grid-4-gap));
1462
+ }
1463
+ .lg-flex-grid-col-4 > *.lg-flex-col-1 {
1464
+ width: calc(25% - var(--flex-grid-4-gap));
1465
+ }
1466
+ .lg-flex-grid-col-4 > *.lg-flex-col-2 {
1467
+ width: calc(50% - var(--flex-grid-4-col-2));
1468
+ }
1469
+ .lg-flex-grid-col-4 > *.lg-flex-col-3 {
1470
+ width: calc(75% - var(--flex-grid-4-col-3));
1471
+ }
1472
+ .lg-flex-grid-col-4 > *.lg-flex-col-4,
1473
+ .lg-flex-grid-col-4 > *.lg-flex-col-6,
1474
+ .lg-flex-grid-col-4 > *.lg-flex-col-8,
1475
+ .lg-flex-grid-col-4 > *.lg-flex-col-12 {
1476
+ width: 100%;
1477
+ }
1321
1478
  .lg-flex-grid-col-6 > * {
1322
- width: calc(16.66% - var(--flex-grid-6-gap)); }
1323
- .lg-flex-grid-col-6 > *.lg-flex-col-1 {
1324
- width: calc(16.66% - var(--flex-grid-6-gap)); }
1325
- .lg-flex-grid-col-6 > *.lg-flex-col-2 {
1326
- width: calc(33.34% - var(--flex-grid-6-col-2)); }
1327
- .lg-flex-grid-col-6 > *.lg-flex-col-3 {
1328
- width: calc(50% - var(--flex-grid-6-col-3)); }
1329
- .lg-flex-grid-col-6 > *.lg-flex-col-4 {
1330
- width: calc(66.67% - var(--flex-grid-6-col-4)); }
1331
- .lg-flex-grid-col-6 > *.lg-flex-col-6, .lg-flex-grid-col-6 > *.lg-flex-col-8, .lg-flex-grid-col-6 > *.lg-flex-col-12 {
1332
- width: 100%; }
1479
+ width: calc(16.66% - var(--flex-grid-6-gap));
1480
+ }
1481
+ .lg-flex-grid-col-6 > *.lg-flex-col-1 {
1482
+ width: calc(16.66% - var(--flex-grid-6-gap));
1483
+ }
1484
+ .lg-flex-grid-col-6 > *.lg-flex-col-2 {
1485
+ width: calc(33.34% - var(--flex-grid-6-col-2));
1486
+ }
1487
+ .lg-flex-grid-col-6 > *.lg-flex-col-3 {
1488
+ width: calc(50% - var(--flex-grid-6-col-3));
1489
+ }
1490
+ .lg-flex-grid-col-6 > *.lg-flex-col-4 {
1491
+ width: calc(66.67% - var(--flex-grid-6-col-4));
1492
+ }
1493
+ .lg-flex-grid-col-6 > *.lg-flex-col-6,
1494
+ .lg-flex-grid-col-6 > *.lg-flex-col-8,
1495
+ .lg-flex-grid-col-6 > *.lg-flex-col-12 {
1496
+ width: 100%;
1497
+ }
1333
1498
  .lg-flex-grid-col-8 > * {
1334
- width: calc(12.5% - var(--flex-grid-8-gap)); }
1335
- .lg-flex-grid-col-8 > *.lg-flex-col-1 {
1336
- width: calc(12.5% - var(--flex-grid-8-gap)); }
1337
- .lg-flex-grid-col-8 > *.lg-flex-col-2 {
1338
- width: calc(25% - var(--flex-grid-8-col-2)); }
1339
- .lg-flex-grid-col-8 > *.lg-flex-col-3 {
1340
- width: calc(37.5% - var(--flex-grid-8-col-3)); }
1341
- .lg-flex-grid-col-8 > *.lg-flex-col-4 {
1342
- width: calc(50% - var(--flex-grid-8-col-4)); }
1343
- .lg-flex-grid-col-8 > *.lg-flex-col-6 {
1344
- width: calc(75% - var(--flex-grid-8-col-6)); }
1345
- .lg-flex-grid-col-8 > *.lg-flex-col-8, .lg-flex-grid-col-8 > *.lg-flex-col-12 {
1346
- width: 100%; }
1499
+ width: calc(12.5% - var(--flex-grid-8-gap));
1500
+ }
1501
+ .lg-flex-grid-col-8 > *.lg-flex-col-1 {
1502
+ width: calc(12.5% - var(--flex-grid-8-gap));
1503
+ }
1504
+ .lg-flex-grid-col-8 > *.lg-flex-col-2 {
1505
+ width: calc(25% - var(--flex-grid-8-col-2));
1506
+ }
1507
+ .lg-flex-grid-col-8 > *.lg-flex-col-3 {
1508
+ width: calc(37.5% - var(--flex-grid-8-col-3));
1509
+ }
1510
+ .lg-flex-grid-col-8 > *.lg-flex-col-4 {
1511
+ width: calc(50% - var(--flex-grid-8-col-4));
1512
+ }
1513
+ .lg-flex-grid-col-8 > *.lg-flex-col-6 {
1514
+ width: calc(75% - var(--flex-grid-8-col-6));
1515
+ }
1516
+ .lg-flex-grid-col-8 > *.lg-flex-col-8,
1517
+ .lg-flex-grid-col-8 > *.lg-flex-col-12 {
1518
+ width: 100%;
1519
+ }
1347
1520
  .lg-flex-grid-col-12 > * {
1348
- width: calc(8.33% - var(--flex-grid-12-gap)); }
1349
- .lg-flex-grid-col-12 > *.lg-flex-col-1 {
1350
- width: calc(8.33% - var(--flex-grid-12-gap)); }
1351
- .lg-flex-grid-col-12 > *.lg-flex-col-2 {
1352
- width: calc(16.66% - var(--flex-grid-12-col-2)); }
1353
- .lg-flex-grid-col-12 > *.lg-flex-col-3 {
1354
- width: calc(25% - var(--flex-grid-12-col-3)); }
1355
- .lg-flex-grid-col-12 > *.lg-flex-col-4 {
1356
- width: calc(33.33% - var(--flex-grid-12-col-4)); }
1357
- .lg-flex-grid-col-12 > *.lg-flex-col-6 {
1358
- width: calc(50% - var(--flex-grid-12-col-6)); }
1359
- .lg-flex-grid-col-12 > *.lg-flex-col-8 {
1360
- width: calc(66.66% - var(--flex-grid-12-col-8)); }
1361
- .lg-flex-grid-col-12 > *.lg-flex-col-12 {
1362
- width: 100%; } }
1521
+ width: calc(8.33% - var(--flex-grid-12-gap));
1522
+ }
1523
+ .lg-flex-grid-col-12 > *.lg-flex-col-1 {
1524
+ width: calc(8.33% - var(--flex-grid-12-gap));
1525
+ }
1526
+ .lg-flex-grid-col-12 > *.lg-flex-col-2 {
1527
+ width: calc(16.66% - var(--flex-grid-12-col-2));
1528
+ }
1529
+ .lg-flex-grid-col-12 > *.lg-flex-col-3 {
1530
+ width: calc(25% - var(--flex-grid-12-col-3));
1531
+ }
1532
+ .lg-flex-grid-col-12 > *.lg-flex-col-4 {
1533
+ width: calc(33.33% - var(--flex-grid-12-col-4));
1534
+ }
1535
+ .lg-flex-grid-col-12 > *.lg-flex-col-6 {
1536
+ width: calc(50% - var(--flex-grid-12-col-6));
1537
+ }
1538
+ .lg-flex-grid-col-12 > *.lg-flex-col-8 {
1539
+ width: calc(66.66% - var(--flex-grid-12-col-8));
1540
+ }
1541
+ .lg-flex-grid-col-12 > *.lg-flex-col-12 {
1542
+ width: 100%;
1543
+ }
1544
+ }
1363
1545
 
1364
1546
  @media screen and (min-width: 1280px) {
1365
1547
  .xl-flex-grid-8 {
@@ -1383,7 +1565,8 @@ p {
1383
1565
  --flex-grid-6-col-3: 0.275rem;
1384
1566
  --flex-grid-6-col-4: 0.2125rem;
1385
1567
  --flex-grid-4-col-2: 0.25rem;
1386
- --flex-grid-4-col-3: 0.125rem; }
1568
+ --flex-grid-4-col-3: 0.125rem;
1569
+ }
1387
1570
  .xl-flex-grid-12 {
1388
1571
  display: inline-flex;
1389
1572
  flex-wrap: wrap;
@@ -1405,7 +1588,8 @@ p {
1405
1588
  --flex-grid-6-col-3: 0.5rem;
1406
1589
  --flex-grid-6-col-4: 0.355rem;
1407
1590
  --flex-grid-4-col-2: 0.5rem;
1408
- --flex-grid-4-col-3: 0.275rem; }
1591
+ --flex-grid-4-col-3: 0.275rem;
1592
+ }
1409
1593
  .xl-flex-grid-16 {
1410
1594
  display: inline-flex;
1411
1595
  flex-wrap: wrap;
@@ -1427,367 +1611,1156 @@ p {
1427
1611
  --flex-grid-6-col-3: 0.5rem;
1428
1612
  --flex-grid-6-col-4: 0.355rem;
1429
1613
  --flex-grid-4-col-2: 0.5rem;
1430
- --flex-grid-4-col-3: 0.275rem; }
1614
+ --flex-grid-4-col-3: 0.275rem;
1615
+ }
1431
1616
  .xl-flex-grid-col-4 > * {
1432
- width: calc(25% - var(--flex-grid-4-gap)); }
1433
- .xl-flex-grid-col-4 > *.xl-flex-col-1 {
1434
- width: calc(25% - var(--flex-grid-4-gap)); }
1435
- .xl-flex-grid-col-4 > *.xl-flex-col-2 {
1436
- width: calc(50% - var(--flex-grid-4-col-2)); }
1437
- .xl-flex-grid-col-4 > *.xl-flex-col-3 {
1438
- width: calc(75% - var(--flex-grid-4-col-3)); }
1439
- .xl-flex-grid-col-4 > *.xl-flex-col-4, .xl-flex-grid-col-4 > *.xl-flex-col-6, .xl-flex-grid-col-4 > *.xl-flex-col-8, .xl-flex-grid-col-4 > *.xl-flex-col-12 {
1440
- width: 100%; }
1617
+ width: calc(25% - var(--flex-grid-4-gap));
1618
+ }
1619
+ .xl-flex-grid-col-4 > *.xl-flex-col-1 {
1620
+ width: calc(25% - var(--flex-grid-4-gap));
1621
+ }
1622
+ .xl-flex-grid-col-4 > *.xl-flex-col-2 {
1623
+ width: calc(50% - var(--flex-grid-4-col-2));
1624
+ }
1625
+ .xl-flex-grid-col-4 > *.xl-flex-col-3 {
1626
+ width: calc(75% - var(--flex-grid-4-col-3));
1627
+ }
1628
+ .xl-flex-grid-col-4 > *.xl-flex-col-4,
1629
+ .xl-flex-grid-col-4 > *.xl-flex-col-6,
1630
+ .xl-flex-grid-col-4 > *.xl-flex-col-8,
1631
+ .xl-flex-grid-col-4 > *.xl-flex-col-12 {
1632
+ width: 100%;
1633
+ }
1441
1634
  .xl-flex-grid-col-6 > * {
1442
- width: calc(16.66% - var(--flex-grid-6-gap)); }
1443
- .xl-flex-grid-col-6 > *.xl-flex-col-1 {
1444
- width: calc(16.66% - var(--flex-grid-6-gap)); }
1445
- .xl-flex-grid-col-6 > *.xl-flex-col-2 {
1446
- width: calc(33.34% - var(--flex-grid-6-col-2)); }
1447
- .xl-flex-grid-col-6 > *.xl-flex-col-3 {
1448
- width: calc(50% - var(--flex-grid-6-col-3)); }
1449
- .xl-flex-grid-col-6 > *.xl-flex-col-4 {
1450
- width: calc(66.67% - var(--flex-grid-6-col-4)); }
1451
- .xl-flex-grid-col-6 > *.xl-flex-col-6, .xl-flex-grid-col-6 > *.xl-flex-col-8, .xl-flex-grid-col-6 > *.xl-flex-col-12 {
1452
- width: 100%; }
1635
+ width: calc(16.66% - var(--flex-grid-6-gap));
1636
+ }
1637
+ .xl-flex-grid-col-6 > *.xl-flex-col-1 {
1638
+ width: calc(16.66% - var(--flex-grid-6-gap));
1639
+ }
1640
+ .xl-flex-grid-col-6 > *.xl-flex-col-2 {
1641
+ width: calc(33.34% - var(--flex-grid-6-col-2));
1642
+ }
1643
+ .xl-flex-grid-col-6 > *.xl-flex-col-3 {
1644
+ width: calc(50% - var(--flex-grid-6-col-3));
1645
+ }
1646
+ .xl-flex-grid-col-6 > *.xl-flex-col-4 {
1647
+ width: calc(66.67% - var(--flex-grid-6-col-4));
1648
+ }
1649
+ .xl-flex-grid-col-6 > *.xl-flex-col-6,
1650
+ .xl-flex-grid-col-6 > *.xl-flex-col-8,
1651
+ .xl-flex-grid-col-6 > *.xl-flex-col-12 {
1652
+ width: 100%;
1653
+ }
1453
1654
  .xl-flex-grid-col-8 > * {
1454
- width: calc(12.5% - var(--flex-grid-8-gap)); }
1455
- .xl-flex-grid-col-8 > *.xl-flex-col-1 {
1456
- width: calc(12.5% - var(--flex-grid-8-gap)); }
1457
- .xl-flex-grid-col-8 > *.xl-flex-col-2 {
1458
- width: calc(25% - var(--flex-grid-8-col-2)); }
1459
- .xl-flex-grid-col-8 > *.xl-flex-col-3 {
1460
- width: calc(37.5% - var(--flex-grid-8-col-3)); }
1461
- .xl-flex-grid-col-8 > *.xl-flex-col-4 {
1462
- width: calc(50% - var(--flex-grid-8-col-4)); }
1463
- .xl-flex-grid-col-8 > *.xl-flex-col-6 {
1464
- width: calc(75% - var(--flex-grid-8-col-6)); }
1465
- .xl-flex-grid-col-8 > *.xl-flex-col-8, .xl-flex-grid-col-8 > *.xl-flex-col-12 {
1466
- width: 100%; }
1655
+ width: calc(12.5% - var(--flex-grid-8-gap));
1656
+ }
1657
+ .xl-flex-grid-col-8 > *.xl-flex-col-1 {
1658
+ width: calc(12.5% - var(--flex-grid-8-gap));
1659
+ }
1660
+ .xl-flex-grid-col-8 > *.xl-flex-col-2 {
1661
+ width: calc(25% - var(--flex-grid-8-col-2));
1662
+ }
1663
+ .xl-flex-grid-col-8 > *.xl-flex-col-3 {
1664
+ width: calc(37.5% - var(--flex-grid-8-col-3));
1665
+ }
1666
+ .xl-flex-grid-col-8 > *.xl-flex-col-4 {
1667
+ width: calc(50% - var(--flex-grid-8-col-4));
1668
+ }
1669
+ .xl-flex-grid-col-8 > *.xl-flex-col-6 {
1670
+ width: calc(75% - var(--flex-grid-8-col-6));
1671
+ }
1672
+ .xl-flex-grid-col-8 > *.xl-flex-col-8,
1673
+ .xl-flex-grid-col-8 > *.xl-flex-col-12 {
1674
+ width: 100%;
1675
+ }
1467
1676
  .xl-flex-grid-col-12 > * {
1468
- width: calc(8.33% - var(--flex-grid-12-gap)); }
1469
- .xl-flex-grid-col-12 > *.xl-flex-col-1 {
1470
- width: calc(8.33% - var(--flex-grid-12-gap)); }
1471
- .xl-flex-grid-col-12 > *.xl-flex-col-2 {
1472
- width: calc(16.66% - var(--flex-grid-12-col-2)); }
1473
- .xl-flex-grid-col-12 > *.xl-flex-col-3 {
1474
- width: calc(25% - var(--flex-grid-12-col-3)); }
1475
- .xl-flex-grid-col-12 > *.xl-flex-col-4 {
1476
- width: calc(33.33% - var(--flex-grid-12-col-4)); }
1477
- .xl-flex-grid-col-12 > *.xl-flex-col-6 {
1478
- width: calc(50% - var(--flex-grid-12-col-6)); }
1479
- .xl-flex-grid-col-12 > *.xl-flex-col-8 {
1480
- width: calc(66.66% - var(--flex-grid-12-col-8)); }
1481
- .xl-flex-grid-col-12 > *.xl-flex-col-12 {
1482
- width: 100%; } }
1677
+ width: calc(8.33% - var(--flex-grid-12-gap));
1678
+ }
1679
+ .xl-flex-grid-col-12 > *.xl-flex-col-1 {
1680
+ width: calc(8.33% - var(--flex-grid-12-gap));
1681
+ }
1682
+ .xl-flex-grid-col-12 > *.xl-flex-col-2 {
1683
+ width: calc(16.66% - var(--flex-grid-12-col-2));
1684
+ }
1685
+ .xl-flex-grid-col-12 > *.xl-flex-col-3 {
1686
+ width: calc(25% - var(--flex-grid-12-col-3));
1687
+ }
1688
+ .xl-flex-grid-col-12 > *.xl-flex-col-4 {
1689
+ width: calc(33.33% - var(--flex-grid-12-col-4));
1690
+ }
1691
+ .xl-flex-grid-col-12 > *.xl-flex-col-6 {
1692
+ width: calc(50% - var(--flex-grid-12-col-6));
1693
+ }
1694
+ .xl-flex-grid-col-12 > *.xl-flex-col-8 {
1695
+ width: calc(66.66% - var(--flex-grid-12-col-8));
1696
+ }
1697
+ .xl-flex-grid-col-12 > *.xl-flex-col-12 {
1698
+ width: 100%;
1699
+ }
1700
+ }
1483
1701
 
1484
1702
  .font-mode-500 {
1485
- color: var(--color-theme-500); }
1703
+ color: var(--color-theme-500);
1704
+ }
1486
1705
 
1487
1706
  .font-mode-300 {
1488
- color: var(--color-theme-300); }
1707
+ color: var(--color-theme-300);
1708
+ }
1489
1709
 
1490
1710
  .font-mode-100 {
1491
- color: var(--color-theme-100); }
1711
+ color: var(--color-theme-100);
1712
+ }
1492
1713
 
1493
1714
  .bg-mode-500 {
1494
- background: var(--background-theme-500); }
1715
+ background: var(--background-theme-500);
1716
+ }
1495
1717
 
1496
1718
  .bg-mode-300 {
1497
- background: var(--background-theme-300); }
1719
+ background: var(--background-theme-300);
1720
+ }
1498
1721
 
1499
1722
  .bg-mode-100 {
1500
- background: var(--background-theme-100); }
1723
+ background: var(--background-theme-100);
1724
+ }
1501
1725
 
1502
1726
  .border-1-mode-500 {
1503
- border: var(--border-1-theme-500); }
1727
+ border: var(--border-1-theme-500);
1728
+ }
1504
1729
 
1505
1730
  .border-2-mode-500 {
1506
- border: var(--border-2-theme-500); }
1731
+ border: var(--border-2-theme-500);
1732
+ }
1507
1733
 
1508
1734
  .border-4-mode-500 {
1509
- border: var(--border-4-theme-500); }
1735
+ border: var(--border-4-theme-500);
1736
+ }
1510
1737
 
1511
1738
  .align-center {
1512
- text-align: center !important; }
1739
+ text-align: center !important;
1740
+ }
1513
1741
 
1514
1742
  .align-justify {
1515
- text-align: justify !important; }
1743
+ text-align: justify !important;
1744
+ }
1516
1745
 
1517
1746
  .align-left {
1518
- text-align: left !important; }
1747
+ text-align: left !important;
1748
+ }
1519
1749
 
1520
1750
  .align-right {
1521
- text-align: right !important; }
1751
+ text-align: right !important;
1752
+ }
1522
1753
 
1523
1754
  .truncate {
1524
1755
  text-overflow: ellipsis;
1525
1756
  overflow: hidden;
1526
- white-space: nowrap; }
1757
+ white-space: nowrap;
1758
+ }
1759
+
1760
+ h1 {
1761
+ font-size: var(--heading1-font-size);
1762
+ letter-spacing: var(--heading1-letter-spacing);
1763
+ min-height: var(--heading1-line-height);
1764
+ line-height: var(--heading1-line-height);
1765
+ }
1766
+
1767
+ h2 {
1768
+ font-size: var(--heading2-font-size);
1769
+ letter-spacing: var(--heading2-letter-spacing);
1770
+ min-height: var(--heading2-line-height);
1771
+ line-height: var(--heading2-line-height);
1772
+ }
1773
+
1774
+ h3 {
1775
+ font-size: var(--heading3-font-size);
1776
+ letter-spacing: var(--heading3-letter-spacing);
1777
+ min-height: var(--heading3-line-height);
1778
+ line-height: var(--heading3-line-height);
1779
+ }
1780
+
1781
+ h4 {
1782
+ font-size: var(--heading4-font-size);
1783
+ letter-spacing: var(--heading4-letter-spacing);
1784
+ min-height: var(--heading4-line-height);
1785
+ line-height: var(--heading4-line-height);
1786
+ }
1787
+
1788
+ h5 {
1789
+ font-size: var(--heading5-font-size);
1790
+ letter-spacing: var(--heading5-letter-spacing);
1791
+ min-height: var(--heading5-line-height);
1792
+ line-height: var(--heading5-line-height);
1793
+ }
1794
+
1795
+ h6 {
1796
+ font-size: var(--heading6-font-size);
1797
+ letter-spacing: var(--heading6-letter-spacing);
1798
+ min-height: var(--heading6-line-height);
1799
+ line-height: var(--heading6-line-height);
1800
+ }
1527
1801
 
1528
- h1,
1529
1802
  .h1-default,
1530
1803
  .h1-regular,
1531
1804
  .h1-medium,
1532
1805
  .h1-semibold,
1533
1806
  .h1-bold {
1534
- font-size: var(--heading-1-size);
1535
- letter-spacing: var(--heading-1-letter-spacing);
1536
- min-height: var(--heading-1-line-height);
1537
- line-height: var(--heading-1-line-height); }
1538
-
1539
- h2,
1540
- .h2-default,
1541
- .h2-regular,
1542
- .h2-medium,
1543
- .h2-semibold,
1544
- .h2-bold {
1545
- font-size: var(--heading-2-size);
1546
- letter-spacing: var(--heading-2-letter-spacing);
1547
- min-height: var(--heading-2-line-height);
1548
- line-height: var(--heading-2-line-height); }
1549
-
1550
- h3,
1551
- .h3-default,
1552
- .h3-regular,
1553
- .h3-medium,
1554
- .h3-semibold,
1555
- .h3-bold {
1556
- font-size: var(--heading-3-size);
1557
- letter-spacing: var(--heading-3-letter-spacing);
1558
- min-height: var(--heading-3-line-height);
1559
- line-height: var(--heading-3-line-height); }
1560
-
1561
- h4,
1562
- .h4-default,
1563
- .h4-regular,
1564
- .h4-medium,
1565
- .h4-semibold,
1566
- .h4-bold {
1567
- font-size: var(--heading-4-size);
1568
- letter-spacing: var(--heading-4-letter-spacing);
1569
- min-height: var(--heading-4-line-height);
1570
- line-height: var(--heading-4-line-height); }
1571
-
1572
- h5,
1573
- .h5-default,
1574
- .h5-regular,
1575
- .h5-medium,
1576
- .h5-semibold,
1577
- .h5-bold {
1578
- font-size: var(--heading-5-size);
1579
- letter-spacing: var(--heading-5-letter-spacing);
1580
- min-height: var(--heading-5-line-height);
1581
- line-height: var(--heading-5-line-height); }
1582
-
1583
- h6,
1584
- .h6-default,
1585
- .h6-regular,
1586
- .h6-medium,
1587
- .h6-semibold,
1588
- .h6-bold {
1589
- font-size: var(--heading-6-size);
1590
- letter-spacing: var(--heading-6-letter-spacing);
1591
- min-height: var(--heading-6-line-height);
1592
- line-height: var(--heading-6-line-height); }
1593
-
1594
- .title-default, .title-regular, .title-medium, .title-semibold, .title-bold {
1595
- font-size: var(--title-size);
1596
- letter-spacing: var(--title-letter-spacing);
1597
- min-height: var(--title-line-height);
1598
- line-height: var(--title-line-height); }
1599
-
1600
- .subtitle-default, .subtitle-regular, .subtitle-medium, .subtitle-semibold, .subtitle-bold {
1601
- font-size: var(--subtitle-size);
1602
- letter-spacing: var(--subtitle-letter-spacing);
1603
- min-height: var(--subtitle-line-height);
1604
- line-height: var(--subtitle-line-height); }
1605
-
1606
- .body-default, .body-regular, .body-medium, .body-semibold, .body-bold {
1607
- font-size: var(--body-size);
1608
- letter-spacing: var(--body-letter-spacing);
1609
- min-height: var(--body-line-height);
1610
- line-height: var(--body-line-height); }
1611
-
1612
- .label-default, .label-regular, .label-medium, .label-semibold, .label-bold {
1613
- font-size: var(--label-size);
1614
- letter-spacing: var(--label-letter-spacing);
1615
- min-height: var(--label-line-height);
1616
- line-height: var(--label-line-height); }
1617
-
1618
- .smalltext-default, .smalltext-regular, .smalltext-medium, .smalltext-semibold, .smalltext-bold {
1619
- font-size: var(--smalltext-size);
1620
- letter-spacing: var(--smalltext-letter-spacing);
1621
- min-height: var(--smalltext-line-height);
1622
- line-height: var(--smalltext-line-height); }
1623
-
1624
- .caption-default, .caption-regular, .caption-medium, .caption-semibold, .caption-bold {
1625
- font-size: var(--caption-size);
1626
- letter-spacing: var(--caption-letter-spacing);
1627
- min-height: var(--caption-line-height);
1628
- line-height: var(--caption-line-height); }
1629
-
1630
- .overline-default, .overline-regular, .overline-medium, .overline-semibold, .overline-bold {
1631
- font-size: var(--overline-size);
1632
- letter-spacing: var(--overline-letter-spacing);
1633
- min-height: var(--overline-line-height);
1634
- line-height: var(--overline-line-height); }
1807
+ font-size: var(--heading1-font-size);
1808
+ letter-spacing: var(--heading1-letter-spacing);
1809
+ min-height: var(--heading1-line-height);
1810
+ line-height: var(--heading1-line-height);
1811
+ }
1635
1812
 
1636
1813
  .h1-regular {
1637
- font-weight: var(--font-weight-regular); }
1814
+ font-weight: var(--font-weight-regular);
1815
+ }
1638
1816
 
1639
1817
  .h1-medium {
1640
- font-weight: var(--font-weight-medium); }
1818
+ font-weight: var(--font-weight-medium);
1819
+ }
1641
1820
 
1642
1821
  .h1-semibold {
1643
- font-weight: var(--font-weight-semibold); }
1822
+ font-weight: var(--font-weight-semibold);
1823
+ }
1644
1824
 
1645
1825
  .h1-bold {
1646
- font-weight: var(--font-weight-bold); }
1826
+ font-weight: var(--font-weight-bold);
1827
+ }
1828
+
1829
+ .h2-default,
1830
+ .h2-regular,
1831
+ .h2-medium,
1832
+ .h2-semibold,
1833
+ .h2-bold {
1834
+ font-size: var(--heading2-font-size);
1835
+ letter-spacing: var(--heading2-letter-spacing);
1836
+ min-height: var(--heading2-line-height);
1837
+ line-height: var(--heading2-line-height);
1838
+ }
1647
1839
 
1648
1840
  .h2-regular {
1649
- font-weight: var(--font-weight-regular); }
1841
+ font-weight: var(--font-weight-regular);
1842
+ }
1650
1843
 
1651
1844
  .h2-medium {
1652
- font-weight: var(--font-weight-medium); }
1845
+ font-weight: var(--font-weight-medium);
1846
+ }
1653
1847
 
1654
1848
  .h2-semibold {
1655
- font-weight: var(--font-weight-semibold); }
1849
+ font-weight: var(--font-weight-semibold);
1850
+ }
1656
1851
 
1657
1852
  .h2-bold {
1658
- font-weight: var(--font-weight-bold); }
1853
+ font-weight: var(--font-weight-bold);
1854
+ }
1855
+
1856
+ .h3-default,
1857
+ .h3-regular,
1858
+ .h3-medium,
1859
+ .h3-semibold,
1860
+ .h3-bold {
1861
+ font-size: var(--heading3-font-size);
1862
+ letter-spacing: var(--heading3-letter-spacing);
1863
+ min-height: var(--heading3-line-height);
1864
+ line-height: var(--heading3-line-height);
1865
+ }
1659
1866
 
1660
1867
  .h3-regular {
1661
- font-weight: var(--font-weight-regular); }
1868
+ font-weight: var(--font-weight-regular);
1869
+ }
1662
1870
 
1663
1871
  .h3-medium {
1664
- font-weight: var(--font-weight-medium); }
1872
+ font-weight: var(--font-weight-medium);
1873
+ }
1665
1874
 
1666
1875
  .h3-semibold {
1667
- font-weight: var(--font-weight-semibold); }
1876
+ font-weight: var(--font-weight-semibold);
1877
+ }
1668
1878
 
1669
1879
  .h3-bold {
1670
- font-weight: var(--font-weight-bold); }
1880
+ font-weight: var(--font-weight-bold);
1881
+ }
1882
+
1883
+ .h4-default,
1884
+ .h4-regular,
1885
+ .h4-medium,
1886
+ .h4-semibold,
1887
+ .h4-bold {
1888
+ font-size: var(--heading4-font-size);
1889
+ letter-spacing: var(--heading4-letter-spacing);
1890
+ min-height: var(--heading4-line-height);
1891
+ line-height: var(--heading4-line-height);
1892
+ }
1671
1893
 
1672
1894
  .h4-regular {
1673
- font-weight: var(--font-weight-regular); }
1895
+ font-weight: var(--font-weight-regular);
1896
+ }
1674
1897
 
1675
1898
  .h4-medium {
1676
- font-weight: var(--font-weight-medium); }
1899
+ font-weight: var(--font-weight-medium);
1900
+ }
1677
1901
 
1678
1902
  .h4-semibold {
1679
- font-weight: var(--font-weight-semibold); }
1903
+ font-weight: var(--font-weight-semibold);
1904
+ }
1680
1905
 
1681
1906
  .h4-bold {
1682
- font-weight: var(--font-weight-bold); }
1907
+ font-weight: var(--font-weight-bold);
1908
+ }
1909
+
1910
+ .h5-default,
1911
+ .h5-regular,
1912
+ .h5-medium,
1913
+ .h5-semibold,
1914
+ .h5-bold {
1915
+ font-size: var(--heading5-font-size);
1916
+ letter-spacing: var(--heading5-letter-spacing);
1917
+ min-height: var(--heading5-line-height);
1918
+ line-height: var(--heading5-line-height);
1919
+ }
1683
1920
 
1684
1921
  .h5-regular {
1685
- font-weight: var(--font-weight-regular); }
1922
+ font-weight: var(--font-weight-regular);
1923
+ }
1686
1924
 
1687
1925
  .h5-medium {
1688
- font-weight: var(--font-weight-medium); }
1926
+ font-weight: var(--font-weight-medium);
1927
+ }
1689
1928
 
1690
1929
  .h5-semibold {
1691
- font-weight: var(--font-weight-semibold); }
1930
+ font-weight: var(--font-weight-semibold);
1931
+ }
1692
1932
 
1693
1933
  .h5-bold {
1694
- font-weight: var(--font-weight-bold); }
1934
+ font-weight: var(--font-weight-bold);
1935
+ }
1936
+
1937
+ .h6-default,
1938
+ .h6-regular,
1939
+ .h6-medium,
1940
+ .h6-semibold,
1941
+ .h6-bold {
1942
+ font-size: var(--heading6-font-size);
1943
+ letter-spacing: var(--heading6-letter-spacing);
1944
+ min-height: var(--heading6-line-height);
1945
+ line-height: var(--heading6-line-height);
1946
+ }
1695
1947
 
1696
1948
  .h6-regular {
1697
- font-weight: var(--font-weight-regular); }
1949
+ font-weight: var(--font-weight-regular);
1950
+ }
1698
1951
 
1699
1952
  .h6-medium {
1700
- font-weight: var(--font-weight-medium); }
1953
+ font-weight: var(--font-weight-medium);
1954
+ }
1701
1955
 
1702
1956
  .h6-semibold {
1703
- font-weight: var(--font-weight-semibold); }
1957
+ font-weight: var(--font-weight-semibold);
1958
+ }
1704
1959
 
1705
1960
  .h6-bold {
1706
- font-weight: var(--font-weight-bold); }
1961
+ font-weight: var(--font-weight-bold);
1962
+ }
1963
+
1964
+ .title-default,
1965
+ .title-regular,
1966
+ .title-medium,
1967
+ .title-semibold,
1968
+ .title-bold {
1969
+ font-size: var(--title-font-size);
1970
+ letter-spacing: var(--title-letter-spacing);
1971
+ min-height: var(--title-line-height);
1972
+ line-height: var(--title-line-height);
1973
+ }
1707
1974
 
1708
1975
  .title-regular {
1709
- font-weight: var(--font-weight-regular); }
1976
+ font-weight: var(--font-weight-regular);
1977
+ }
1710
1978
 
1711
1979
  .title-medium {
1712
- font-weight: var(--font-weight-medium); }
1980
+ font-weight: var(--font-weight-medium);
1981
+ }
1713
1982
 
1714
1983
  .title-semibold {
1715
- font-weight: var(--font-weight-semibold); }
1984
+ font-weight: var(--font-weight-semibold);
1985
+ }
1716
1986
 
1717
1987
  .title-bold {
1718
- font-weight: var(--font-weight-bold); }
1988
+ font-weight: var(--font-weight-bold);
1989
+ }
1990
+
1991
+ .subtitle-default,
1992
+ .subtitle-regular,
1993
+ .subtitle-medium,
1994
+ .subtitle-semibold,
1995
+ .subtitle-bold {
1996
+ font-size: var(--subtitle-font-size);
1997
+ letter-spacing: var(--subtitle-letter-spacing);
1998
+ min-height: var(--subtitle-line-height);
1999
+ line-height: var(--subtitle-line-height);
2000
+ }
1719
2001
 
1720
2002
  .subtitle-regular {
1721
- font-weight: var(--font-weight-regular); }
2003
+ font-weight: var(--font-weight-regular);
2004
+ }
1722
2005
 
1723
2006
  .subtitle-medium {
1724
- font-weight: var(--font-weight-medium); }
2007
+ font-weight: var(--font-weight-medium);
2008
+ }
1725
2009
 
1726
2010
  .subtitle-semibold {
1727
- font-weight: var(--font-weight-semibold); }
2011
+ font-weight: var(--font-weight-semibold);
2012
+ }
1728
2013
 
1729
2014
  .subtitle-bold {
1730
- font-weight: var(--font-weight-bold); }
2015
+ font-weight: var(--font-weight-bold);
2016
+ }
2017
+
2018
+ .body-default,
2019
+ .body-regular,
2020
+ .body-medium,
2021
+ .body-semibold,
2022
+ .body-bold {
2023
+ font-size: var(--body-font-size);
2024
+ letter-spacing: var(--body-letter-spacing);
2025
+ min-height: var(--body-line-height);
2026
+ line-height: var(--body-line-height);
2027
+ }
1731
2028
 
1732
2029
  .body-regular {
1733
- font-weight: var(--font-weight-regular); }
2030
+ font-weight: var(--font-weight-regular);
2031
+ }
1734
2032
 
1735
2033
  .body-medium {
1736
- font-weight: var(--font-weight-medium); }
2034
+ font-weight: var(--font-weight-medium);
2035
+ }
1737
2036
 
1738
2037
  .body-semibold {
1739
- font-weight: var(--font-weight-semibold); }
2038
+ font-weight: var(--font-weight-semibold);
2039
+ }
1740
2040
 
1741
2041
  .body-bold {
1742
- font-weight: var(--font-weight-bold); }
2042
+ font-weight: var(--font-weight-bold);
2043
+ }
2044
+
2045
+ .input-default,
2046
+ .input-regular,
2047
+ .input-medium,
2048
+ .input-semibold,
2049
+ .input-bold {
2050
+ font-size: var(--input-font-size);
2051
+ letter-spacing: var(--input-letter-spacing);
2052
+ min-height: var(--input-line-height);
2053
+ line-height: var(--input-line-height);
2054
+ }
2055
+
2056
+ .input-regular {
2057
+ font-weight: var(--font-weight-regular);
2058
+ }
2059
+
2060
+ .input-medium {
2061
+ font-weight: var(--font-weight-medium);
2062
+ }
2063
+
2064
+ .input-semibold {
2065
+ font-weight: var(--font-weight-semibold);
2066
+ }
2067
+
2068
+ .input-bold {
2069
+ font-weight: var(--font-weight-bold);
2070
+ }
2071
+
2072
+ .label-default,
2073
+ .label-regular,
2074
+ .label-medium,
2075
+ .label-semibold,
2076
+ .label-bold {
2077
+ font-size: var(--label-font-size);
2078
+ letter-spacing: var(--label-letter-spacing);
2079
+ min-height: var(--label-line-height);
2080
+ line-height: var(--label-line-height);
2081
+ }
1743
2082
 
1744
2083
  .label-regular {
1745
- font-weight: var(--font-weight-regular); }
2084
+ font-weight: var(--font-weight-regular);
2085
+ }
1746
2086
 
1747
2087
  .label-medium {
1748
- font-weight: var(--font-weight-medium); }
2088
+ font-weight: var(--font-weight-medium);
2089
+ }
1749
2090
 
1750
2091
  .label-semibold {
1751
- font-weight: var(--font-weight-semibold); }
2092
+ font-weight: var(--font-weight-semibold);
2093
+ }
1752
2094
 
1753
2095
  .label-bold {
1754
- font-weight: var(--font-weight-bold); }
2096
+ font-weight: var(--font-weight-bold);
2097
+ }
2098
+
2099
+ .smalltext-default,
2100
+ .smalltext-regular,
2101
+ .smalltext-medium,
2102
+ .smalltext-semibold,
2103
+ .smalltext-bold {
2104
+ font-size: var(--smalltext-font-size);
2105
+ letter-spacing: var(--smalltext-letter-spacing);
2106
+ min-height: var(--smalltext-line-height);
2107
+ line-height: var(--smalltext-line-height);
2108
+ }
1755
2109
 
1756
2110
  .smalltext-regular {
1757
- font-weight: var(--font-weight-regular); }
2111
+ font-weight: var(--font-weight-regular);
2112
+ }
1758
2113
 
1759
2114
  .smalltext-medium {
1760
- font-weight: var(--font-weight-medium); }
2115
+ font-weight: var(--font-weight-medium);
2116
+ }
1761
2117
 
1762
2118
  .smalltext-semibold {
1763
- font-weight: var(--font-weight-semibold); }
2119
+ font-weight: var(--font-weight-semibold);
2120
+ }
1764
2121
 
1765
2122
  .smalltext-bold {
1766
- font-weight: var(--font-weight-bold); }
2123
+ font-weight: var(--font-weight-bold);
2124
+ }
2125
+
2126
+ .caption-default,
2127
+ .caption-regular,
2128
+ .caption-medium,
2129
+ .caption-semibold,
2130
+ .caption-bold {
2131
+ font-size: var(--caption-font-size);
2132
+ letter-spacing: var(--caption-letter-spacing);
2133
+ min-height: var(--caption-line-height);
2134
+ line-height: var(--caption-line-height);
2135
+ }
1767
2136
 
1768
2137
  .caption-regular {
1769
- font-weight: var(--font-weight-regular); }
2138
+ font-weight: var(--font-weight-regular);
2139
+ }
1770
2140
 
1771
2141
  .caption-medium {
1772
- font-weight: var(--font-weight-medium); }
2142
+ font-weight: var(--font-weight-medium);
2143
+ }
1773
2144
 
1774
2145
  .caption-semibold {
1775
- font-weight: var(--font-weight-semibold); }
2146
+ font-weight: var(--font-weight-semibold);
2147
+ }
1776
2148
 
1777
2149
  .caption-bold {
1778
- font-weight: var(--font-weight-bold); }
2150
+ font-weight: var(--font-weight-bold);
2151
+ }
2152
+
2153
+ .overline-default,
2154
+ .overline-regular,
2155
+ .overline-medium,
2156
+ .overline-semibold,
2157
+ .overline-bold {
2158
+ font-size: var(--overline-font-size);
2159
+ letter-spacing: var(--overline-letter-spacing);
2160
+ min-height: var(--overline-line-height);
2161
+ line-height: var(--overline-line-height);
2162
+ }
1779
2163
 
1780
2164
  .overline-regular {
1781
- font-weight: var(--font-weight-regular); }
2165
+ font-weight: var(--font-weight-regular);
2166
+ }
1782
2167
 
1783
2168
  .overline-medium {
1784
- font-weight: var(--font-weight-medium); }
2169
+ font-weight: var(--font-weight-medium);
2170
+ }
1785
2171
 
1786
2172
  .overline-semibold {
1787
- font-weight: var(--font-weight-semibold); }
2173
+ font-weight: var(--font-weight-semibold);
2174
+ }
1788
2175
 
1789
2176
  .overline-bold {
1790
- font-weight: var(--font-weight-bold); }
2177
+ font-weight: var(--font-weight-bold);
2178
+ }
2179
+
2180
+ .pdg-top-4 {
2181
+ padding-top: var(--sizing-4);
2182
+ }
2183
+
2184
+ .pdg-rgt-4 {
2185
+ padding-right: var(--sizing-4);
2186
+ }
2187
+
2188
+ .pdg-bot-4 {
2189
+ padding-bottom: var(--sizing-4);
2190
+ }
2191
+
2192
+ .pdg-lft-4 {
2193
+ padding-left: var(--sizing-4);
2194
+ }
2195
+
2196
+ .pdg-hrz-4 {
2197
+ padding: 0rem var(--sizing-4);
2198
+ }
2199
+
2200
+ .pdg-vrt-4 {
2201
+ padding: var(--sizing-4) 0rem;
2202
+ }
2203
+
2204
+ .pdg-4 {
2205
+ padding: var(--sizing-4);
2206
+ }
2207
+
2208
+ .pdg-top-8 {
2209
+ padding-top: var(--sizing-8);
2210
+ }
2211
+
2212
+ .pdg-rgt-8 {
2213
+ padding-right: var(--sizing-8);
2214
+ }
2215
+
2216
+ .pdg-bot-8 {
2217
+ padding-bottom: var(--sizing-8);
2218
+ }
2219
+
2220
+ .pdg-lft-8 {
2221
+ padding-left: var(--sizing-8);
2222
+ }
2223
+
2224
+ .pdg-hrz-8 {
2225
+ padding: 0rem var(--sizing-8);
2226
+ }
2227
+
2228
+ .pdg-vrt-8 {
2229
+ padding: var(--sizing-8) 0rem;
2230
+ }
2231
+
2232
+ .pdg-8 {
2233
+ padding: var(--sizing-8);
2234
+ }
2235
+
2236
+ .pdg-top-12 {
2237
+ padding-top: var(--sizing-12);
2238
+ }
2239
+
2240
+ .pdg-rgt-12 {
2241
+ padding-right: var(--sizing-12);
2242
+ }
2243
+
2244
+ .pdg-bot-12 {
2245
+ padding-bottom: var(--sizing-12);
2246
+ }
2247
+
2248
+ .pdg-lft-12 {
2249
+ padding-left: var(--sizing-12);
2250
+ }
2251
+
2252
+ .pdg-hrz-12 {
2253
+ padding: 0rem var(--sizing-12);
2254
+ }
2255
+
2256
+ .pdg-vrt-12 {
2257
+ padding: var(--sizing-12) 0rem;
2258
+ }
2259
+
2260
+ .pdg-12 {
2261
+ padding: var(--sizing-12);
2262
+ }
2263
+
2264
+ .pdg-top-16 {
2265
+ padding-top: var(--sizing-16);
2266
+ }
2267
+
2268
+ .pdg-rgt-16 {
2269
+ padding-right: var(--sizing-16);
2270
+ }
2271
+
2272
+ .pdg-bot-16 {
2273
+ padding-bottom: var(--sizing-16);
2274
+ }
2275
+
2276
+ .pdg-lft-16 {
2277
+ padding-left: var(--sizing-16);
2278
+ }
2279
+
2280
+ .pdg-hrz-16 {
2281
+ padding: 0rem var(--sizing-16);
2282
+ }
2283
+
2284
+ .pdg-vrt-16 {
2285
+ padding: var(--sizing-16) 0rem;
2286
+ }
2287
+
2288
+ .pdg-16 {
2289
+ padding: var(--sizing-16);
2290
+ }
2291
+
2292
+ .pdg-top-24 {
2293
+ padding-top: var(--sizing-24);
2294
+ }
2295
+
2296
+ .pdg-rgt-24 {
2297
+ padding-right: var(--sizing-24);
2298
+ }
2299
+
2300
+ .pdg-bot-24 {
2301
+ padding-bottom: var(--sizing-24);
2302
+ }
2303
+
2304
+ .pdg-lft-24 {
2305
+ padding-left: var(--sizing-24);
2306
+ }
2307
+
2308
+ .pdg-hrz-24 {
2309
+ padding: 0rem var(--sizing-24);
2310
+ }
2311
+
2312
+ .pdg-vrt-24 {
2313
+ padding: var(--sizing-24) 0rem;
2314
+ }
2315
+
2316
+ .pdg-24 {
2317
+ padding: var(--sizing-24);
2318
+ }
2319
+
2320
+ .pdg-top-36 {
2321
+ padding-top: var(--sizing-36);
2322
+ }
2323
+
2324
+ .pdg-rgt-36 {
2325
+ padding-right: var(--sizing-36);
2326
+ }
2327
+
2328
+ .pdg-bot-36 {
2329
+ padding-bottom: var(--sizing-36);
2330
+ }
2331
+
2332
+ .pdg-lft-36 {
2333
+ padding-left: var(--sizing-36);
2334
+ }
2335
+
2336
+ .pdg-hrz-36 {
2337
+ padding: 0rem var(--sizing-36);
2338
+ }
2339
+
2340
+ .pdg-vrt-36 {
2341
+ padding: var(--sizing-36) 0rem;
2342
+ }
2343
+
2344
+ .pdg-36 {
2345
+ padding: var(--sizing-36);
2346
+ }
2347
+
2348
+ .pdx-top-4 {
2349
+ padding-top: var(--sizing-4);
2350
+ box-sizing: border-box;
2351
+ }
2352
+
2353
+ .pdx-rgt-4 {
2354
+ padding-right: var(--sizing-4);
2355
+ box-sizing: border-box;
2356
+ }
2357
+
2358
+ .pdx-bot-4 {
2359
+ padding-bottom: var(--sizing-4);
2360
+ box-sizing: border-box;
2361
+ }
2362
+
2363
+ .pdx-lft-4 {
2364
+ padding-left: var(--sizing-4);
2365
+ box-sizing: border-box;
2366
+ }
2367
+
2368
+ .pdx-hrz-4 {
2369
+ padding: 0rem var(--sizing-4);
2370
+ box-sizing: border-box;
2371
+ }
2372
+
2373
+ .pdx-vrt-4 {
2374
+ padding: var(--sizing-4) 0rem;
2375
+ box-sizing: border-box;
2376
+ }
2377
+
2378
+ .pdx-4 {
2379
+ padding: var(--sizing-4);
2380
+ box-sizing: border-box;
2381
+ }
2382
+
2383
+ .pdx-top-8 {
2384
+ padding-top: var(--sizing-8);
2385
+ box-sizing: border-box;
2386
+ }
2387
+
2388
+ .pdx-rgt-8 {
2389
+ padding-right: var(--sizing-8);
2390
+ box-sizing: border-box;
2391
+ }
2392
+
2393
+ .pdx-bot-8 {
2394
+ padding-bottom: var(--sizing-8);
2395
+ box-sizing: border-box;
2396
+ }
2397
+
2398
+ .pdx-lft-8 {
2399
+ padding-left: var(--sizing-8);
2400
+ box-sizing: border-box;
2401
+ }
2402
+
2403
+ .pdx-hrz-8 {
2404
+ padding: 0rem var(--sizing-8);
2405
+ box-sizing: border-box;
2406
+ }
2407
+
2408
+ .pdx-vrt-8 {
2409
+ padding: var(--sizing-8) 0rem;
2410
+ box-sizing: border-box;
2411
+ }
2412
+
2413
+ .pdx-8 {
2414
+ padding: var(--sizing-8);
2415
+ box-sizing: border-box;
2416
+ }
2417
+
2418
+ .pdx-top-12 {
2419
+ padding-top: var(--sizing-12);
2420
+ box-sizing: border-box;
2421
+ }
2422
+
2423
+ .pdx-rgt-12 {
2424
+ padding-right: var(--sizing-12);
2425
+ box-sizing: border-box;
2426
+ }
2427
+
2428
+ .pdx-bot-12 {
2429
+ padding-bottom: var(--sizing-12);
2430
+ box-sizing: border-box;
2431
+ }
2432
+
2433
+ .pdx-lft-12 {
2434
+ padding-left: var(--sizing-12);
2435
+ box-sizing: border-box;
2436
+ }
2437
+
2438
+ .pdx-hrz-12 {
2439
+ padding: 0rem var(--sizing-12);
2440
+ box-sizing: border-box;
2441
+ }
2442
+
2443
+ .pdx-vrt-12 {
2444
+ padding: var(--sizing-12) 0rem;
2445
+ box-sizing: border-box;
2446
+ }
2447
+
2448
+ .pdx-12 {
2449
+ padding: var(--sizing-12);
2450
+ box-sizing: border-box;
2451
+ }
2452
+
2453
+ .pdx-top-16 {
2454
+ padding-top: var(--sizing-16);
2455
+ box-sizing: border-box;
2456
+ }
2457
+
2458
+ .pdx-rgt-16 {
2459
+ padding-right: var(--sizing-16);
2460
+ box-sizing: border-box;
2461
+ }
2462
+
2463
+ .pdx-bot-16 {
2464
+ padding-bottom: var(--sizing-16);
2465
+ box-sizing: border-box;
2466
+ }
2467
+
2468
+ .pdx-lft-16 {
2469
+ padding-left: var(--sizing-16);
2470
+ box-sizing: border-box;
2471
+ }
2472
+
2473
+ .pdx-hrz-16 {
2474
+ padding: 0rem var(--sizing-16);
2475
+ box-sizing: border-box;
2476
+ }
2477
+
2478
+ .pdx-vrt-16 {
2479
+ padding: var(--sizing-16) 0rem;
2480
+ box-sizing: border-box;
2481
+ }
2482
+
2483
+ .pdx-16 {
2484
+ padding: var(--sizing-16);
2485
+ box-sizing: border-box;
2486
+ }
2487
+
2488
+ .pdx-top-24 {
2489
+ padding-top: var(--sizing-24);
2490
+ box-sizing: border-box;
2491
+ }
2492
+
2493
+ .pdx-rgt-24 {
2494
+ padding-right: var(--sizing-24);
2495
+ box-sizing: border-box;
2496
+ }
2497
+
2498
+ .pdx-bot-24 {
2499
+ padding-bottom: var(--sizing-24);
2500
+ box-sizing: border-box;
2501
+ }
2502
+
2503
+ .pdx-lft-24 {
2504
+ padding-left: var(--sizing-24);
2505
+ box-sizing: border-box;
2506
+ }
2507
+
2508
+ .pdx-hrz-24 {
2509
+ padding: 0rem var(--sizing-24);
2510
+ box-sizing: border-box;
2511
+ }
2512
+
2513
+ .pdx-vrt-24 {
2514
+ padding: var(--sizing-24) 0rem;
2515
+ box-sizing: border-box;
2516
+ }
2517
+
2518
+ .pdx-24 {
2519
+ padding: var(--sizing-24);
2520
+ box-sizing: border-box;
2521
+ }
2522
+
2523
+ .pdx-top-36 {
2524
+ padding-top: var(--sizing-36);
2525
+ box-sizing: border-box;
2526
+ }
2527
+
2528
+ .pdx-rgt-36 {
2529
+ padding-right: var(--sizing-36);
2530
+ box-sizing: border-box;
2531
+ }
2532
+
2533
+ .pdx-bot-36 {
2534
+ padding-bottom: var(--sizing-36);
2535
+ box-sizing: border-box;
2536
+ }
2537
+
2538
+ .pdx-lft-36 {
2539
+ padding-left: var(--sizing-36);
2540
+ box-sizing: border-box;
2541
+ }
2542
+
2543
+ .pdx-hrz-36 {
2544
+ padding: 0rem var(--sizing-36);
2545
+ box-sizing: border-box;
2546
+ }
2547
+
2548
+ .pdx-vrt-36 {
2549
+ padding: var(--sizing-36) 0rem;
2550
+ box-sizing: border-box;
2551
+ }
2552
+
2553
+ .pdx-36 {
2554
+ padding: var(--sizing-36);
2555
+ box-sizing: border-box;
2556
+ }
2557
+
2558
+ .mrg-top-4 {
2559
+ margin-top: var(--sizing-4);
2560
+ }
2561
+
2562
+ .mrg-rgt-4 {
2563
+ margin-right: var(--sizing-4);
2564
+ }
2565
+
2566
+ .mrg-bot-4 {
2567
+ margin-bottom: var(--sizing-4);
2568
+ }
2569
+
2570
+ .mrg-lft-4 {
2571
+ margin-left: var(--sizing-4);
2572
+ }
2573
+
2574
+ .mrg-hrz-4 {
2575
+ margin: 0rem var(--sizing-4);
2576
+ }
2577
+
2578
+ .mrg-vrt-4 {
2579
+ margin: var(--sizing-4) 0rem;
2580
+ }
2581
+
2582
+ .mrg-4 {
2583
+ margin: var(--sizing-4);
2584
+ }
2585
+
2586
+ .mrg-top-8 {
2587
+ margin-top: var(--sizing-8);
2588
+ }
2589
+
2590
+ .mrg-rgt-8 {
2591
+ margin-right: var(--sizing-8);
2592
+ }
2593
+
2594
+ .mrg-bot-8 {
2595
+ margin-bottom: var(--sizing-8);
2596
+ }
2597
+
2598
+ .mrg-lft-8 {
2599
+ margin-left: var(--sizing-8);
2600
+ }
2601
+
2602
+ .mrg-hrz-8 {
2603
+ margin: 0rem var(--sizing-8);
2604
+ }
2605
+
2606
+ .mrg-vrt-8 {
2607
+ margin: var(--sizing-8) 0rem;
2608
+ }
2609
+
2610
+ .mrg-8 {
2611
+ margin: var(--sizing-8);
2612
+ }
2613
+
2614
+ .mrg-top-12 {
2615
+ margin-top: var(--sizing-12);
2616
+ }
2617
+
2618
+ .mrg-rgt-12 {
2619
+ margin-right: var(--sizing-12);
2620
+ }
2621
+
2622
+ .mrg-bot-12 {
2623
+ margin-bottom: var(--sizing-12);
2624
+ }
2625
+
2626
+ .mrg-lft-12 {
2627
+ margin-left: var(--sizing-12);
2628
+ }
2629
+
2630
+ .mrg-hrz-12 {
2631
+ margin: 0rem var(--sizing-12);
2632
+ }
2633
+
2634
+ .mrg-vrt-12 {
2635
+ margin: var(--sizing-12) 0rem;
2636
+ }
2637
+
2638
+ .mrg-12 {
2639
+ margin: var(--sizing-12);
2640
+ }
2641
+
2642
+ .mrg-top-16 {
2643
+ margin-top: var(--sizing-16);
2644
+ }
2645
+
2646
+ .mrg-rgt-16 {
2647
+ margin-right: var(--sizing-16);
2648
+ }
2649
+
2650
+ .mrg-bot-16 {
2651
+ margin-bottom: var(--sizing-16);
2652
+ }
2653
+
2654
+ .mrg-lft-16 {
2655
+ margin-left: var(--sizing-16);
2656
+ }
2657
+
2658
+ .mrg-hrz-16 {
2659
+ margin: 0rem var(--sizing-16);
2660
+ }
2661
+
2662
+ .mrg-vrt-16 {
2663
+ margin: var(--sizing-16) 0rem;
2664
+ }
2665
+
2666
+ .mrg-16 {
2667
+ margin: var(--sizing-16);
2668
+ }
2669
+
2670
+ .mrg-top-24 {
2671
+ margin-top: var(--sizing-24);
2672
+ }
2673
+
2674
+ .mrg-rgt-24 {
2675
+ margin-right: var(--sizing-24);
2676
+ }
2677
+
2678
+ .mrg-bot-24 {
2679
+ margin-bottom: var(--sizing-24);
2680
+ }
2681
+
2682
+ .mrg-lft-24 {
2683
+ margin-left: var(--sizing-24);
2684
+ }
2685
+
2686
+ .mrg-hrz-24 {
2687
+ margin: 0rem var(--sizing-24);
2688
+ }
2689
+
2690
+ .mrg-vrt-24 {
2691
+ margin: var(--sizing-24) 0rem;
2692
+ }
2693
+
2694
+ .mrg-24 {
2695
+ margin: var(--sizing-24);
2696
+ }
2697
+
2698
+ .mrg-top-36 {
2699
+ margin-top: var(--sizing-36);
2700
+ }
2701
+
2702
+ .mrg-rgt-36 {
2703
+ margin-right: var(--sizing-36);
2704
+ }
2705
+
2706
+ .mrg-bot-36 {
2707
+ margin-bottom: var(--sizing-36);
2708
+ }
2709
+
2710
+ .mrg-lft-36 {
2711
+ margin-left: var(--sizing-36);
2712
+ }
2713
+
2714
+ .mrg-hrz-36 {
2715
+ margin: 0rem var(--sizing-36);
2716
+ }
2717
+
2718
+ .mrg-vrt-36 {
2719
+ margin: var(--sizing-36) 0rem;
2720
+ }
2721
+
2722
+ .mrg-36 {
2723
+ margin: var(--sizing-36);
2724
+ }
2725
+
2726
+ :root {
2727
+ --rls-avatar-font-size: var(--title-font-size);
2728
+ --rls-avatar-border-radius: var(--sizing-8);
2729
+ --rls-avatar-width: var(--sizing-48);
2730
+ --rls-avatar-height: var(--sizing-48);
2731
+ --rls-ballot-subtitle-width: 100%;
2732
+ --rls-ballot-subtitle-height: var(--smalltext-line-height);
2733
+ --rls-ballot-subtitle-overflow: initial;
2734
+ --rls-ballot-subtitle-text-overflow: initial;
2735
+ --rls-ballot-subtitle-white-space: initial;
2736
+ --rls-boxfield-body-padding: 0rem;
2737
+ --rls-boxfield-body-border: var(--border-1-theme-100);
2738
+ --rls-boxfield-body-shadow: none;
2739
+ --rls-boxfield-label-font-color: var(--color-theme-100);
2740
+ --rls-breadcrumb-height: var(--sizing-36);
2741
+ --rls-button-label-text-transform: uppercase;
2742
+ --rls-button-content-padding: 0rem var(--sizing-8);
2743
+ --rls-button-content-radius: var(--sizing-4);
2744
+ --rls-buttonaction-color: var(--color-theme-300);
2745
+ --rls-buttonaction-ripple-color: var(--rls-buttonaction-color);
2746
+ --rls-buttonaction-ripple-dimension: var(--sizing-36);
2747
+ --rls-buttonaction-ripple-position: -1.125rem;
2748
+ --rls-form-footer-justify-content: end;
2749
+ --rls-icon-font-size: var(--sizing-24);
2750
+ --rls-icon-width: var(--sizing-24);
2751
+ --rls-icon-height: var(--sizing-24);
2752
+ --rls-input-font-color: var(--color-theme-500);
2753
+ --rls-input-font-size: var(--sizing-16);
2754
+ --rls-input-letter-spacing: var(--body-letter-spacing);
2755
+ --rls-input-height: var(--sizing-24);
2756
+ --rls-input-parent-padding: 0rem;
2757
+ --rls-poster-height: var(--sizing-36);
2758
+ --rls-poster-padding: var(--sizing-8);
2759
+ --rls-snackbar-left: 50%;
2760
+ --rls-tabulartext-char-width: 0.625rem;
2761
+ --rls-tabulartext-pointer-width: 0.25rem;
2762
+ --rls-toolbar-height: var(--sizing-56);
2763
+ }
1791
2764
 
1792
2765
  .rls-app__body {
1793
2766
  position: absolute;
@@ -1801,20 +2774,24 @@ h6,
1801
2774
  height: 100%;
1802
2775
  z-index: var(--z-index-8);
1803
2776
  overflow: hidden;
1804
- transition: left 240ms 0ms var(--standard-curve), width 240ms 0ms var(--standard-curve); }
2777
+ transition:
2778
+ left 240ms 0ms var(--standard-curve),
2779
+ width 240ms 0ms var(--standard-curve);
2780
+ }
1805
2781
 
1806
2782
  .rls-app__header {
2783
+ --rls-toolbar-height: 100%;
1807
2784
  position: relative;
1808
2785
  width: 100%;
1809
2786
  height: 3.5rem;
1810
2787
  box-sizing: border-box;
1811
2788
  z-index: var(--z-index-8);
1812
- background: var(--background-theme-100); }
1813
- .rls-app__header + .rls-app__page,
1814
- .rls-app__header + .rls-app__content {
1815
- height: calc(100vh - 3.5rem); }
1816
- .rls-app__header .rls-toolbar {
1817
- height: 100%; }
2789
+ background: var(--background-theme-100);
2790
+ }
2791
+ .rls-app__header + .rls-app__page,
2792
+ .rls-app__header + .rls-app__content {
2793
+ height: calc(100vh - 3.5rem);
2794
+ }
1818
2795
 
1819
2796
  .rls-app__content {
1820
2797
  position: relative;
@@ -1823,7 +2800,8 @@ h6,
1823
2800
  margin: 0rem;
1824
2801
  padding: 0rem;
1825
2802
  overflow: auto;
1826
- box-sizing: border-box; }
2803
+ box-sizing: border-box;
2804
+ }
1827
2805
 
1828
2806
  .rls-app__page {
1829
2807
  position: relative;
@@ -1833,92 +2811,557 @@ h6,
1833
2811
  margin: 0rem;
1834
2812
  padding: 0rem;
1835
2813
  overflow: hidden;
1836
- box-sizing: border-box; }
1837
- .rls-app__page__nav {
1838
- position: relative;
1839
- width: 17.5rem;
1840
- height: 100%;
1841
- margin: 0rem;
1842
- padding: 0rem;
1843
- overflow: auto;
1844
- box-sizing: border-box;
1845
- border-radius: 0rem 0rem var(--sizing-48) 0rem;
1846
- background: var(--background-theme-100); }
1847
- .rls-app__page__nav + .rls-app__page__content {
1848
- width: calc(100% - 17.5rem); }
1849
- .rls-app__page__content {
1850
- position: relative;
1851
- width: 100%;
1852
- height: 100%;
1853
- margin: 0rem;
1854
- padding: 0rem;
1855
- overflow: auto;
1856
- box-sizing: border-box; }
2814
+ box-sizing: border-box;
2815
+ }
2816
+ .rls-app__page__nav {
2817
+ position: relative;
2818
+ width: 20rem;
2819
+ height: 100%;
2820
+ margin: 0rem;
2821
+ padding: 0rem;
2822
+ overflow: auto;
2823
+ box-sizing: border-box;
2824
+ border-radius: 0rem 0rem 2rem 0rem;
2825
+ background: var(--background-theme-100);
2826
+ }
2827
+ .rls-app__page__nav + .rls-app__page__content {
2828
+ --rls-snackbar-left: calc(50% + 10rem);
2829
+ width: calc(100% - 20rem);
2830
+ }
2831
+ .rls-app__page__content {
2832
+ position: relative;
2833
+ width: 100%;
2834
+ height: 100%;
2835
+ margin: 0rem;
2836
+ padding: 0rem;
2837
+ overflow: auto;
2838
+ box-sizing: border-box;
2839
+ }
1857
2840
 
1858
2841
  .rls-box-field {
1859
- --box-field-body-background: rgb(248, 248, 248, 1);
1860
- --box-field-body-border: var(--border-1-theme-100);
1861
- --box-field-body-shadow: none;
1862
- --box-field-body-opacity: 1;
1863
- --box-field-label-color: var(--color-theme-300);
1864
- --box-field-label-opacity: 1;
2842
+ --pvt-body-background: rgba(248, 248, 248, 1);
2843
+ --pvt-body-opacity: 1;
2844
+ --pvt-label-opacity: 1;
1865
2845
  position: relative;
1866
2846
  float: left;
1867
2847
  width: 100%;
1868
- box-sizing: border-box; }
1869
- .rls-box-field__content {
1870
- transition: height 160ms 0ms var(--standard-curve);
1871
- box-sizing: border-box; }
1872
- .rls-box-field__content--active {
1873
- --box-field-body-background: var(--background-theme-500);
1874
- --box-field-label-color: var(--color-xofttion-500);
1875
- --box-field-body-border: var(--border-1-xofttion-500);
1876
- --box-field-body-shadow: 0px 0px 0px 3px var(--box-shadow-xofttion-500); }
1877
- .rls-box-field__content--error {
1878
- --box-field-label-color: var(--color-danger-500);
1879
- --box-field-body-border: var(--border-1) solid var(--color-danger-500);
1880
- --box-field-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500); }
1881
- .rls-box-field__content--disabled {
1882
- --box-field-body-background: var(--background-theme-500);
1883
- --box-field-body-opacity: 0.75;
1884
- --box-field-label-opacity: 0.5; }
1885
- .rls-box-field__label {
1886
- position: relative;
1887
- float: left;
1888
- width: 100%;
1889
- padding: 0rem 0.625rem;
1890
- box-sizing: border-box;
1891
- margin-bottom: var(--sizing-4);
1892
- overflow: hidden;
1893
- white-space: nowrap;
1894
- text-overflow: ellipsis;
1895
- color: var(--box-field-label-color);
1896
- opacity: var(--box-field-label-opacity);
1897
- font-weight: var(--font-weight-medium);
1898
- font-size: var(--smalltext-size);
1899
- letter-spacing: var(--smalltext-letter-spacing);
1900
- min-height: var(--smalltext-line-height);
1901
- line-height: var(--smalltext-line-height); }
1902
- .rls-box-field__label span {
1903
- color: var(--color-danger-500); }
1904
- .rls-box-field__body {
2848
+ box-sizing: border-box;
2849
+ transition: height 160ms 0ms var(--standard-curve);
2850
+ }
2851
+ .rls-box-field--active {
2852
+ --rls-boxfield-body-border: var(--border-1-rolster-500);
2853
+ --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
2854
+ --rls-boxfield-label-font-color: var(--color-rolster-500);
2855
+ --pvt-body-background: var(--background-theme-500);
2856
+ }
2857
+ .rls-box-field--error {
2858
+ --rls-boxfield-body-border: var(--border-1) solid var(--color-danger-500);
2859
+ --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500);
2860
+ --rls-boxfield-label-font-color: var(--color-danger-500);
2861
+ }
2862
+ .rls-box-field--disabled {
2863
+ --pvt-body-background: var(--background-theme-500);
2864
+ --pvt-body-opacity: 0.75;
2865
+ --pvt-label-opacity: 0.5;
2866
+ }
2867
+ .rls-box-field__label {
2868
+ position: relative;
2869
+ float: left;
2870
+ width: 100%;
2871
+ padding: 0rem 0.625rem;
2872
+ box-sizing: border-box;
2873
+ margin-bottom: var(--sizing-4);
2874
+ color: var(--rls-boxfield-label-font-color);
2875
+ opacity: var(--pvt-label-opacity);
2876
+ overflow: hidden;
2877
+ white-space: nowrap;
2878
+ text-overflow: ellipsis;
2879
+ font-weight: var(--font-weight-medium);
2880
+ font-size: var(--smalltext-font-size);
2881
+ letter-spacing: var(--smalltext-letter-spacing);
2882
+ min-height: var(--smalltext-line-height);
2883
+ line-height: var(--smalltext-line-height);
2884
+ }
2885
+ .rls-box-field__label span {
2886
+ color: var(--color-danger-500);
2887
+ }
2888
+ .rls-box-field__body {
2889
+ display: flex;
2890
+ box-sizing: border-box;
2891
+ overflow: hidden;
2892
+ opacity: var(--pvt-body-opacity);
2893
+ border-radius: var(--sizing-4);
2894
+ background: var(--pvt-body-background);
2895
+ padding: var(--rls-boxfield-body-padding);
2896
+ border: var(--rls-boxfield-body-border);
2897
+ box-shadow: var(--rls-boxfield-body-shadow);
2898
+ }
2899
+ .rls-box-field__helper {
2900
+ color: var(--color-theme-100);
2901
+ padding: 0rem 0.625rem;
2902
+ box-sizing: border-box;
2903
+ margin-top: var(--sizing-4);
2904
+ font-weight: var(--font-weight-medium);
2905
+ font-size: var(--overline-font-size);
2906
+ letter-spacing: var(--overline-letter-spacing);
2907
+ min-height: var(--overline-line-height);
2908
+ line-height: var(--overline-line-height);
2909
+ }
2910
+ .rls-box-field__helper--error {
2911
+ color: var(--color-danger-500);
2912
+ }
2913
+
2914
+ .rls-datatable {
2915
+ --pvt-datatable-letter-spacing: 0.525px;
2916
+ --pvt-datatable-font-size: 0.8725rem;
2917
+ position: relative;
2918
+ float: left;
2919
+ width: 100%;
2920
+ border-radius: var(--sizing-8);
2921
+ box-sizing: border-box;
2922
+ }
2923
+ .rls-datatable > table {
2924
+ position: relative;
2925
+ float: left;
2926
+ width: 100%;
2927
+ display: block;
2928
+ }
2929
+ .rls-datatable__content {
2930
+ position: relative;
2931
+ display: block;
2932
+ float: left;
2933
+ width: 100%;
2934
+ border-radius: 0rem;
2935
+ }
2936
+ .rls-datatable__table {
2937
+ display: block;
2938
+ float: left;
2939
+ width: 100%;
2940
+ border-spacing: 0;
2941
+ border-collapse: collapse;
2942
+ }
2943
+ .rls-datatable__thead {
2944
+ display: block;
2945
+ float: left;
2946
+ width: 100%;
2947
+ margin-bottom: var(--sizing-4);
2948
+ }
2949
+ .rls-datatable__header {
2950
+ padding: 0rem var(--sizing-12);
2951
+ display: flex;
2952
+ box-sizing: border-box;
2953
+ }
2954
+ .rls-datatable__title {
2955
+ position: relative;
2956
+ display: block;
2957
+ float: left;
2958
+ text-align: left;
2959
+ padding: 0rem var(--sizing-4);
2960
+ text-align: left;
2961
+ overflow: hidden;
2962
+ white-space: nowrap;
2963
+ text-overflow: ellipsis;
2964
+ height: var(--sizing-40);
2965
+ line-height: var(--sizing-40);
2966
+ color: var(--color-theme-500);
2967
+ font-size: var(--pvt-datatable-font-size);
2968
+ letter-spacing: var(--pvt-datatable-letter-spacing);
2969
+ font-weight: var(--font-weight-bold);
2970
+ }
2971
+ .rls-datatable__title--control {
2972
+ --rls-avatar-border-radius: var(--sizing-6);
2973
+ --rls-avatar-width: var(--sizing-32);
2974
+ --rls-avatar-height: var(--sizing-32);
2975
+ --rls-avatar-font-size: var(--pvt-datatable-font-size);
2976
+ --rls-buttonaction-ripple-dimension: var(--sizing-32);
2977
+ --rls-buttonaction-ripple-position: -1rem;
2978
+ display: flex;
2979
+ width: var(--sizing-48);
2980
+ padding: 0rem;
2981
+ }
2982
+ .rls-datatable__title--control > * {
2983
+ margin: auto;
2984
+ }
2985
+ .rls-datatable__tbody {
2986
+ position: relative;
2987
+ float: left;
2988
+ width: 100%;
2989
+ display: block;
2990
+ }
2991
+ .rls-datatable__data {
2992
+ position: relative;
2993
+ display: flex;
2994
+ padding: 0rem var(--sizing-12);
2995
+ box-sizing: border-box;
2996
+ border: var(--border-1-theme-100);
2997
+ border-radius: var(--sizing-8);
2998
+ background: #fcfcfc;
2999
+ }
3000
+ .rls-datatable__data--error {
3001
+ border: var(--border-1-danger-100);
3002
+ }
3003
+ .rls-datatable__data + .rls-datatable__data {
3004
+ margin-top: var(--sizing-12);
3005
+ }
3006
+ .rls-datatable__cell {
3007
+ position: relative;
3008
+ display: block;
3009
+ float: left;
3010
+ height: var(--sizing-40);
3011
+ line-height: var(--sizing-40);
3012
+ padding: 0rem var(--sizing-4);
3013
+ cursor: default;
3014
+ text-align: left;
3015
+ color: var(--color-theme-input);
3016
+ font-size: var(--pvt-datatable-font-size);
3017
+ letter-spacing: var(--pvt-datatable-letter-spacing);
3018
+ font-weight: var(--font-weight-medium);
3019
+ }
3020
+ .rls-datatable__cell--control {
3021
+ --rls-avatar-border-radius: var(--sizing-6);
3022
+ --rls-avatar-width: var(--sizing-32);
3023
+ --rls-avatar-height: var(--sizing-32);
3024
+ --rls-avatar-font-size: var(--pvt-datatable-font-size);
3025
+ --rls-buttonaction-ripple-dimension: var(--sizing-32);
3026
+ --rls-buttonaction-ripple-position: -1rem;
3027
+ display: flex;
3028
+ width: var(--sizing-48);
3029
+ padding: 0rem;
3030
+ }
3031
+ .rls-datatable__cell--control > * {
3032
+ margin: auto;
3033
+ }
3034
+ .rls-datatable__cell .rls-box-field {
3035
+ width: 100%;
3036
+ padding: 0rem;
3037
+ }
3038
+ .rls-datatable__cell .rls-box-field__label {
3039
+ display: none;
3040
+ }
3041
+ .rls-datatable__cell .rls-box-field__body {
3042
+ background: transparent;
3043
+ border: none;
3044
+ padding: 0rem;
3045
+ box-shadow: none;
3046
+ }
3047
+ .rls-datatable__cell .rls-box-field__body .rls-input-field {
3048
+ padding: var(--sizing-8) 0rem !important;
3049
+ }
3050
+ .rls-datatable__cell .rls-box-field__body .rls-input-field__component,
3051
+ .rls-datatable__cell .rls-box-field__body .rls-input-field__value {
3052
+ font-size: var(--pvt-datatable-font-size);
3053
+ font-weight: var(--font-weight-medium);
3054
+ letter-spacing: var(--body-2-letter-spacing);
3055
+ }
3056
+ .rls-datatable__cell .rls-box-field__icon {
3057
+ padding: 0rem;
3058
+ }
3059
+ .rls-datatable__cell .rls-list-field .rls-box-field__body {
3060
+ padding: var(--sizing-8) 0rem;
3061
+ border: none;
3062
+ box-shadow: none;
3063
+ }
3064
+ .rls-datatable__cell .rls-list-field__control {
3065
+ font-size: var(--pvt-datatable-font-size);
3066
+ font-weight: var(--font-weight-medium);
3067
+ letter-spacing: var(--body-2-letter-spacing);
3068
+ }
3069
+ .rls-datatable__cell .rls-list-field__suggestions {
3070
+ top: var(--sizing-48);
3071
+ }
3072
+ .rls-datatable__cell .rls-list-field__suggestions--higher {
3073
+ top: initial;
3074
+ bottom: var(--sizing-48);
3075
+ }
3076
+ .rls-datatable__cell .rls-list-field__action .rls-icon {
3077
+ font-size: var(--sizing-20);
3078
+ }
3079
+ .rls-datatable__cell .rls-input {
3080
+ margin: var(--sizing-8) 0rem;
3081
+ }
3082
+ .rls-datatable__cell .rls-input__component {
3083
+ font-size: var(--pvt-datatable-font-size);
3084
+ }
3085
+ .rls-datatable__cell .rls-amount {
3086
+ font-size: var(--pvt-datatable-font-size);
3087
+ }
3088
+ .rls-datatable__cell .rls-poster {
3089
+ display: flex;
3090
+ width: calc(100% - var(--sizing-4));
3091
+ height: 100%;
3092
+ margin: var(--sizing-6) 0rem;
3093
+ justify-content: center;
3094
+ align-items: center;
3095
+ overflow: hidden;
3096
+ height: var(--sizing-28);
3097
+ line-height: var(--sizing-28);
3098
+ overflow: hidden;
3099
+ text-overflow: ellipsis;
3100
+ white-space: nowrap;
3101
+ background: var(--color-rolster-100);
3102
+ color: var(--color-rolster-500);
3103
+ }
3104
+ .rls-datatable__cell > .rls-ballot {
3105
+ padding: 0rem;
3106
+ height: var(--sizing-40);
3107
+ }
3108
+ .rls-datatable__cell > .rls-ballot .rls-ballot__title {
3109
+ font-weight: var(--font-weight-semibold);
3110
+ font-size: var(--smalltext-font-size);
3111
+ letter-spacing: var(--smalltext-letter-spacing);
3112
+ min-height: 1rem;
3113
+ line-height: 1rem;
3114
+ }
3115
+ .rls-datatable__cell > .rls-ballot .rls-ballot__subtitle {
3116
+ margin-top: 0rem;
3117
+ font-size: var(--overline-font-size);
3118
+ letter-spacing: var(--overline-letter-spacing);
3119
+ min-height: 1rem;
3120
+ line-height: 1rem;
3121
+ }
3122
+ .rls-datatable__cell > a:hover {
3123
+ color: var(--color-theme-700);
3124
+ text-decoration: underline;
3125
+ }
3126
+ .rls-datatable__tfooter {
3127
+ position: relative;
3128
+ float: left;
3129
+ width: 100%;
3130
+ overflow: hidden;
3131
+ background: var(--color-theme-100);
3132
+ border-radius: 0rem 0rem var(--sizing-8) var(--sizing-8);
3133
+ }
3134
+
3135
+ .rls-form__content {
3136
+ position: relative;
3137
+ float: left;
3138
+ padding: 0rem var(--sizing-16);
3139
+ box-sizing: border-box;
3140
+ }
3141
+ .rls-form__content + .rls-form__content {
3142
+ margin-top: var(--sizing-24);
3143
+ }
3144
+
3145
+ .rls-form__footer {
3146
+ position: relative;
3147
+ float: left;
3148
+ display: flex;
3149
+ justify-content: var(--rls-form-footer-justify-content);
3150
+ column-gap: var(--sizing-16);
3151
+ padding: 0rem var(--sizing-16);
3152
+ box-sizing: border-box;
3153
+ margin-top: var(--sizing-24);
3154
+ }
3155
+
3156
+ .rls-list-field {
3157
+ --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
3158
+ --pvt-action-font-color: var(--color-theme-300);
3159
+ --pvt-list-height: 0rem;
3160
+ --pvt-list-opacity: 0;
3161
+ --pvt-list-transform: scale(0, 0);
3162
+ --pvt-list-transform-origin: 0% 0%;
3163
+ --pvt-backdrop-opacity: 0;
3164
+ --pvt-backdrop-bottom: initial;
3165
+ position: relative;
3166
+ float: left;
3167
+ width: 100%;
3168
+ box-sizing: border-box;
3169
+ }
3170
+ .rls-list-field.rls-box-field--active {
3171
+ --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
3172
+ --rls-boxfield-body-border: var(--border-1-theme-300);
3173
+ --rls-boxfield-label-font-color: var(--color-theme-300);
3174
+ }
3175
+ .rls-list-field.rls-box-field--disabled {
3176
+ --pvt-action-font-color: var(--color-theme-100);
3177
+ }
3178
+ .rls-list-field__control {
3179
+ position: relative;
3180
+ float: left;
3181
+ width: calc(100% - var(--sizing-28));
3182
+ height: var(--sizing-24);
3183
+ line-height: var(--sizing-24);
3184
+ padding: 0rem;
3185
+ cursor: text;
3186
+ border: none;
3187
+ outline: none;
3188
+ color: var(--rls-input-font-color);
3189
+ background: transparent;
3190
+ font-size: var(--rls-input-size);
3191
+ font-weight: var(--font-weight-medium);
3192
+ letter-spacing: var(--rls-input-letter-spacing);
3193
+ }
3194
+ .rls-list-field__control::placeholder {
3195
+ color: var(--color-theme-100);
3196
+ }
3197
+ .rls-list-field__control::selection {
3198
+ background: var(--color-rolster-700);
3199
+ color: var(--color-light-500);
3200
+ }
3201
+ .rls-list-field__control:disabled {
3202
+ opacity: 0.5;
3203
+ }
3204
+ .rls-list-field__control__placeholder {
3205
+ position: relative;
3206
+ float: left;
3207
+ color: var(--color-theme-100);
3208
+ }
3209
+ .rls-list-field__action {
3210
+ color: var(--pvt-action-font-color);
3211
+ width: var(--sizing-24);
3212
+ height: var(--sizing-24);
3213
+ padding: 0rem;
3214
+ margin-left: var(--sizing-4);
3215
+ outline: none;
3216
+ background: transparent;
3217
+ }
3218
+ .rls-list-field__suggestions {
3219
+ position: absolute;
3220
+ top: 4.25rem;
3221
+ left: 0rem;
3222
+ width: 100%;
3223
+ height: 0rem;
3224
+ overflow: hidden;
3225
+ z-index: var(--z-index-4);
3226
+ }
3227
+ .rls-list-field__suggestions--visible {
3228
+ --pvt-list-height: auto;
3229
+ --pvt-list-opacity: 1;
3230
+ --pvt-list-transform: scale(1, 1);
3231
+ overflow: initial;
3232
+ opacity: 1;
3233
+ height: auto;
3234
+ }
3235
+ .rls-list-field__suggestions--higher {
3236
+ --pvt-list-transform-origin: 0% 100%;
3237
+ top: initial;
3238
+ bottom: var(--sizing-48);
3239
+ }
3240
+ .rls-list-field__ul {
3241
+ position: relative;
3242
+ display: flex;
3243
+ flex-direction: column;
3244
+ float: left;
3245
+ width: 100%;
3246
+ height: var(--pvt-list-height);
3247
+ padding: var(--sizing-8) 0rem;
3248
+ border-radius: 0.5rem;
3249
+ box-sizing: border-box;
3250
+ overflow-y: auto;
3251
+ overflow-x: hidden;
3252
+ z-index: var(--z-index-2);
3253
+ background: var(--background-theme-500);
3254
+ border: var(--border-1-rolster-500);
3255
+ box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
3256
+ will-change: opacity, transform;
3257
+ opacity: var(--pvt-list-opacity);
3258
+ transform: var(--pvt-list-transform);
3259
+ transform-origin: var(--pvt-list-transform-origin);
3260
+ transition:
3261
+ opacity 240ms 0ms var(--standard-curve),
3262
+ transform 240ms 0ms var(--standard-curve);
3263
+ }
3264
+ .rls-list-field__element {
3265
+ --rls-ballot-subtitle-overflow: hidden;
3266
+ --rls-ballot-subtitle-text-overflow: ellipsis;
3267
+ --rls-ballot-subtitle-white-space: nowrap;
3268
+ padding: 0rem var(--sizing-8);
3269
+ box-sizing: border-box;
3270
+ outline: none;
3271
+ }
3272
+ .rls-list-field__element:hover {
3273
+ background: var(--background-theme-300);
3274
+ }
3275
+ .rls-list-field__element:not(:hover):focus {
3276
+ background: var(--color-rolster-100);
3277
+ }
3278
+ .rls-list-field__empty {
3279
+ display: flex;
3280
+ padding: 0rem var(--sizing-16);
3281
+ box-sizing: border-box;
3282
+ }
3283
+ .rls-list-field__empty__avatar {
3284
+ width: var(--sizing-40);
3285
+ height: var(--sizing-40);
3286
+ }
3287
+ .rls-list-field__empty__avatar img {
3288
+ width: 100%;
3289
+ }
3290
+ .rls-list-field__empty__description {
3291
+ width: 100%;
3292
+ box-sizing: border-box;
3293
+ }
3294
+ .rls-list-field__empty__description label {
3295
+ display: block;
3296
+ float: left;
3297
+ width: 100%;
3298
+ color: var(--color-theme-300);
3299
+ }
3300
+ .rls-list-field__backdrop {
3301
+ position: absolute;
3302
+ display: block;
3303
+ top: 0rem;
3304
+ left: 0rem;
3305
+ right: 0rem;
3306
+ bottom: var(--pvt-backdrop-bottom);
3307
+ opacity: var(--pvt-backdrop-opacity);
3308
+ z-index: var(--z-index-1);
3309
+ will-change: opacity;
3310
+ background: var(--backdrop-rolster-500);
3311
+ backdrop-filter: blur(2px);
3312
+ transition:
3313
+ opacity 120ms 0ms var(--deceleration-curve),
3314
+ bottom 120ms 0ms var(--deceleration-curve);
3315
+ }
3316
+
3317
+ @media screen and (max-width: 480px) {
3318
+ .rls-list-field {
3319
+ --pvt-list-transform: translateY(100%);
3320
+ --pvt-list-transform-origin: initial;
3321
+ }
3322
+ .rls-list-field__suggestions {
1905
3323
  display: flex;
1906
- box-sizing: border-box;
1907
- overflow: hidden;
1908
- border-radius: var(--sizing-4);
1909
- background: var(--box-field-body-background);
1910
- border: var(--box-field-body-border);
1911
- box-shadow: var(--box-field-body-shadow);
1912
- opacity: var(--box-field-body-opacity); }
1913
- .rls-box-field__helper {
1914
- color: var(--color-theme-100);
1915
- padding: 0rem 0.625rem;
1916
- box-sizing: border-box;
3324
+ justify-content: center;
3325
+ }
3326
+ .rls-list-field__suggestions--visible {
3327
+ --pvt-list-transform: translateY(0%);
3328
+ --pvt-backdrop-opacity: 1;
3329
+ --pvt-backdrop-bottom: 0rem;
3330
+ position: fixed;
3331
+ top: 0rem;
3332
+ left: 0rem;
3333
+ height: 100%;
3334
+ z-index: var(--z-index-32);
3335
+ }
3336
+ .rls-list-field__ul {
3337
+ position: absolute;
3338
+ bottom: 0rem;
3339
+ width: 100%;
3340
+ max-width: 25rem;
3341
+ max-height: 75%;
3342
+ padding: var(--sizing-16) var(--sizing-4);
3343
+ border-radius: var(--sizing-8) var(--sizing-8) 0rem 0rem;
3344
+ border: none;
3345
+ box-shadow: none;
3346
+ }
3347
+ .rls-list-field__empty {
3348
+ flex-direction: column;
3349
+ margin: auto;
3350
+ padding: var(--sizing-24) 0rem;
3351
+ }
3352
+ .rls-list-field__empty__avatar {
3353
+ width: 100%;
3354
+ height: auto;
3355
+ max-width: 8rem;
3356
+ margin: auto;
3357
+ padding-bottom: var(--sizing-12);
3358
+ }
3359
+ .rls-list-field__empty__description {
3360
+ width: 100%;
3361
+ padding-left: 0rem;
3362
+ }
3363
+ .rls-list-field__empty__description label {
3364
+ text-align: center;
1917
3365
  margin-top: var(--sizing-4);
1918
- font-weight: var(--font-weight-medium);
1919
- font-size: var(--overline-size);
1920
- letter-spacing: var(--overline-letter-spacing);
1921
- min-height: var(--overline-line-height);
1922
- line-height: var(--overline-line-height); }
1923
- .rls-box-field__helper--error {
1924
- color: var(--color-danger-500); }
3366
+ }
3367
+ }