@epam/assets 6.3.3 → 6.4.1-alpha.0

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 (104) hide show
  1. package/css/theme/no-fonts/theme_electric.css +0 -1
  2. package/css/theme/no-fonts/theme_electric.css.map +1 -1
  3. package/css/theme/no-fonts/theme_loveship.css +0 -1
  4. package/css/theme/no-fonts/theme_loveship.css.map +1 -1
  5. package/css/theme/no-fonts/theme_loveship_dark.css +5 -6
  6. package/css/theme/no-fonts/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/no-fonts/theme_promo.css +0 -1
  8. package/css/theme/no-fonts/theme_promo.css.map +1 -1
  9. package/css/theme/theme_eduverse_dark.css +1 -1
  10. package/css/theme/theme_eduverse_dark.css.map +1 -1
  11. package/css/theme/theme_eduverse_light.css.map +1 -1
  12. package/css/theme/theme_electric.css +0 -1
  13. package/css/theme/theme_electric.css.map +1 -1
  14. package/css/theme/theme_electric_dark.css +1260 -0
  15. package/css/theme/theme_electric_dark.css.map +1 -0
  16. package/css/theme/theme_fresh_4px.css +0 -1
  17. package/css/theme/theme_fresh_4px.css.map +1 -1
  18. package/css/theme/theme_loveship.css +0 -1
  19. package/css/theme/theme_loveship.css.map +1 -1
  20. package/css/theme/theme_loveship_dark.css +5 -6
  21. package/css/theme/theme_loveship_dark.css.map +1 -1
  22. package/css/theme/theme_promo.css +0 -1
  23. package/css/theme/theme_promo.css.map +1 -1
  24. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  25. package/css/theme/variables/fresh_4px.css.map +1 -1
  26. package/icons/common/radio-point-10.svg +13 -13
  27. package/icons/legacy/btn_cross.svg +22 -22
  28. package/icons/legacy/btn_tick.svg +22 -22
  29. package/icons/legacy/calendar-30.svg +12 -12
  30. package/icons/legacy/calendar-36.svg +14 -14
  31. package/icons/legacy/excel.svg +12 -12
  32. package/icons/legacy/filter-24.svg +11 -11
  33. package/icons/legacy/filter.svg +12 -12
  34. package/icons/legacy/folding-arrow.svg +14 -14
  35. package/icons/legacy/gear.svg +14 -14
  36. package/icons/legacy/help-24.svg +11 -11
  37. package/icons/legacy/help.svg +21 -21
  38. package/icons/legacy/label_info.svg +14 -14
  39. package/icons/legacy/lens.svg +17 -17
  40. package/icons/legacy/modal-close-cross.svg +22 -22
  41. package/icons/legacy/more.svg +20 -20
  42. package/icons/legacy/pencil.svg +12 -12
  43. package/icons/legacy/plus.svg +12 -12
  44. package/icons/legacy/sliders.svg +12 -12
  45. package/icons/legacy/sort-24.svg +15 -15
  46. package/icons/legacy/sort-desc-24.svg +15 -15
  47. package/icons/legacy/sort.svg +4 -4
  48. package/icons/legacy/trash.svg +12 -12
  49. package/icons/loaders/circle_loader_30.svg +69 -69
  50. package/icons/loaders/dots_loader_30.svg +39 -39
  51. package/icons/templates/generic-24.svg +40 -40
  52. package/icons/templates/generic-30.svg +43 -43
  53. package/icons/templates/generic.svg +40 -40
  54. package/icons/templates/tall.svg +69 -69
  55. package/package.json +2 -2
  56. package/readme.md +8 -7
  57. package/scss/electric/font-faces.scss +138 -138
  58. package/scss/font-faces.scss +3 -3
  59. package/scss/fonts.scss +2 -2
  60. package/scss/index.scss +4 -4
  61. package/scss/loveship/colors.scss +100 -100
  62. package/scss/loveship/font-faces.scss +186 -186
  63. package/scss/loveship/fonts.scss +23 -23
  64. package/scss/loveship/typography.scss +160 -160
  65. package/scss/loveship-colors.scss +2 -2
  66. package/scss/promo/colors.scss +100 -100
  67. package/scss/promo/font-faces.scss +168 -168
  68. package/scss/promo/fonts.scss +17 -17
  69. package/scss/promo/typography.scss +175 -175
  70. package/scss/typography.scss +2 -2
  71. package/theme/customThemeTemplate.css +646 -697
  72. package/theme/no-fonts/theme_electric.scss +7 -7
  73. package/theme/no-fonts/theme_loveship.scss +8 -8
  74. package/theme/no-fonts/theme_loveship_dark.scss +8 -8
  75. package/theme/no-fonts/theme_promo.scss +8 -8
  76. package/theme/theme_eduverse_dark.scss +876 -876
  77. package/theme/theme_eduverse_light.scss +552 -552
  78. package/theme/theme_electric.scss +8 -8
  79. package/theme/theme_electric_dark.scss +8 -0
  80. package/theme/theme_fresh_4px.scss +7 -7
  81. package/theme/theme_loveship.scss +8 -8
  82. package/theme/theme_loveship_dark.scss +8 -8
  83. package/theme/theme_promo.scss +9 -9
  84. package/theme/theme_vanilla_thunder.scss +488 -488
  85. package/theme/variables/4px_grid.scss +265 -265
  86. package/theme/variables/6px_grid.scss +347 -347
  87. package/theme/variables/6px_grid_eduverse.scss +69 -69
  88. package/theme/variables/electric.scss +545 -545
  89. package/theme/variables/electric_dark.scss +868 -0
  90. package/theme/variables/fresh_4px.scss +612 -612
  91. package/theme/variables/loveship.scss +627 -627
  92. package/theme/variables/loveship_dark.scss +861 -857
  93. package/theme/variables/promo.scss +601 -601
  94. package/theme/variables/tokens/_color_classes.scss +103 -103
  95. package/theme/variables/tokens/_theme_eduverse_dark.scss +282 -282
  96. package/theme/variables/tokens/_theme_eduverse_dark_mobile.scss +282 -282
  97. package/theme/variables/tokens/_theme_eduverse_light.scss +282 -282
  98. package/theme/variables/tokens/_theme_eduverse_light_mobile.scss +282 -282
  99. package/theme/variables/tokens/_theme_electric_dark.scss +289 -0
  100. package/theme/variables/tokens/{_theme_electric.scss → _theme_electric_light.scss} +273 -274
  101. package/theme/variables/tokens/_theme_fresh_light_4px.scss +271 -272
  102. package/theme/variables/tokens/_theme_loveship_dark.scss +271 -272
  103. package/theme/variables/tokens/_theme_loveship_light.scss +271 -272
  104. package/theme/variables/tokens/_theme_promo.scss +271 -272
package/theme/variables/6px_grid.scss CHANGED
@@ -1,347 +1,347 @@
1
- @mixin uui-6px-grid {
2
- & {
3
- --uui-grid-unit: 6px;
4
- --uui-focus-outline-width: 2px;
5
- --uui-focus-outline-offset: 2px;
6
- --uui-focus-radius: 2px;
7
- //--uui-border-radius: 3px; // TODO: ?????
8
- --uui-tab-line-width: 3px;
9
- --uui-notify-size: 6px;
10
- --uui-resize-marker-width: 12px;
11
- }
12
-
13
- .uui-size-12 {
14
- --uui-size: 12px;
15
- --uui-border-width: 1px;
16
- --uui-horizontal-gap: 6px;
17
- --uui-vertical-gap: 3px;
18
- --uui-horizontal-padding: 6px;
19
- --uui-vertical-padding: 3px; // remove - discuss
20
- --uui-icon-size: 12px;
21
- --uui-line-height: 12px;
22
- --uui-font-size: 12px;
23
- --uui-dot-size: 6px;
24
- }
25
-
26
- .uui-size-18 {
27
- --uui-size: 18px;
28
- --uui-border-width: 1px;
29
- --uui-horizontal-gap: 3px;
30
- --uui-vertical-gap: 3px;
31
- --uui-horizontal-padding: 3px;
32
- --uui-vertical-padding: 3px;
33
- --uui-icon-size: 12px;
34
- --uui-line-height: 12px;
35
- --uui-font-size: 10px;
36
- --uui-dot-size: 6px;
37
- }
38
-
39
- .uui-size-24 {
40
- --uui-size: 24px;
41
- --uui-border-width: 1px;
42
- --uui-horizontal-gap: 6px;
43
- --uui-vertical-gap: 3px;
44
- --uui-horizontal-padding: 6px;
45
- --uui-vertical-padding: 3px;
46
- --uui-icon-size: 12px;
47
- --uui-line-height: 18px;
48
- --uui-font-size: 12px;
49
- --uui-dot-size: 8px;
50
- }
51
-
52
- .uui-size-30 {
53
- --uui-size: 30px;
54
- --uui-border-width: 1px;
55
- --uui-horizontal-gap: 6px;
56
- --uui-vertical-gap: 3px;
57
- --uui-horizontal-padding: 6px;
58
- --uui-vertical-padding: 6px;
59
- --uui-icon-size: 18px;
60
- --uui-line-height: 18px;
61
- --uui-font-size: 14px;
62
- --uui-dot-size: 8px;
63
- }
64
-
65
- .uui-size-36 {
66
- --uui-size: 36px;
67
- --uui-border-width: 1px;
68
- --uui-horizontal-gap: 6px;
69
- --uui-vertical-gap: 3px;
70
- --uui-horizontal-padding: 6px;
71
- --uui-vertical-padding: 9px;
72
- --uui-icon-size: 18px;
73
- --uui-line-height: 18px;
74
- --uui-font-size: 14px;
75
- --uui-dot-size: 8px;
76
- }
77
-
78
- .uui-size-42 {
79
- --uui-size: 42px;
80
- --uui-border-width: 1px;
81
- --uui-horizontal-gap: 6px;
82
- --uui-vertical-gap: 3px;
83
- --uui-horizontal-padding: 12px;
84
- --uui-vertical-padding: 9px;
85
- --uui-icon-size: 18px;
86
- --uui-line-height: 24px;
87
- --uui-font-size: 16px;
88
- --uui-dot-size: 10px;
89
- }
90
-
91
- .uui-size-48 {
92
- --uui-size: 48px;
93
- --uui-border-width: 1px;
94
- --uui-horizontal-gap: 6px;
95
- --uui-vertical-gap: 3px;
96
- --uui-horizontal-padding: 12px;
97
- --uui-vertical-padding: 12px;
98
- --uui-icon-size: 24px;
99
- --uui-line-height: 24px;
100
- --uui-font-size: 16px;
101
- --uui-dot-size: 12px;
102
- }
103
-
104
- .uui-size-60 {
105
- --uui-size: 60px;
106
- --uui-border-width: 1px;
107
- --uui-horizontal-gap: 6px;
108
- --uui-vertical-gap: 3px;
109
- --uui-horizontal-padding: 12px;
110
- --uui-vertical-padding: 18px;
111
- --uui-icon-size: 24px;
112
- --uui-line-height: 24px;
113
- --uui-font-size: 20px;
114
- --uui-dot-size: 12px;
115
- }
116
-
117
- .uui-input-box {
118
- &.uui-size-42 {
119
- --uui-horizontal-padding: 6px;
120
- }
121
-
122
- &.uui-size-48 {
123
- --uui-horizontal-padding: 6px;
124
- }
125
-
126
- &.uui-textarea {
127
- --uui-horizontal-padding: 12px;
128
-
129
- &.uui-size-24 {
130
- --uui-line-height: 12px;
131
- }
132
- }
133
- }
134
-
135
- .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
136
- --uui-horizontal-padding: 6px;
137
- --uui-horizontal-gap: 3px;
138
- --uui-icon-size: 18px;
139
- --uui-line-height: 18px;
140
- --uui-font-size: 14px;
141
- }
142
-
143
- .uui-vertical-tab-button {
144
- &.uui-size-30 {
145
- --uui-horizontal-padding: 12px;
146
- --uui-icon-size: 12px;
147
- }
148
-
149
- &.uui-size-36 {
150
- --uui-horizontal-padding: 18px;
151
- }
152
-
153
- &.uui-size-48 {
154
- --uui-horizontal-padding: 18px;
155
- --uui-font-size: 14px;
156
- --uui-icon-size: 18px;
157
- }
158
- }
159
-
160
- .uui-tag {
161
- &.uui-size-18 {
162
- --uui-font-size: 12px;
163
-
164
- .uui-caption {
165
- --uui-tag-caption-horizontal-padding: 0;
166
- }
167
- }
168
-
169
- &.uui-size-24 {
170
- --uui-icon-size: 18px;
171
- }
172
-
173
- &.uui-size-42 {
174
- --uui-icon-size: 24px;
175
- }
176
-
177
- &.uui-size-24,
178
- &.uui-size-30,
179
- &.uui-size-36,
180
- &.uui-size-42 {
181
- --uui-horizontal-gap: 3px;
182
- }
183
-
184
- &.uui-size-24,
185
- &.uui-size-30 {
186
- --uui-horizontal-padding: 3px;
187
- }
188
-
189
- &.uui-size-42,
190
- &.uui-size-48 {
191
- --uui-horizontal-padding: 9px;
192
- }
193
- }
194
-
195
- .uui-checkbox-container, .uui-radio-input-container {
196
- &.uui-size-18 {
197
- --uui-horizontal-gap: 12px;
198
- --uui-line-height: 18px;
199
- --uui-font-size: 14px;
200
- }
201
- }
202
-
203
- .uui-switch {
204
- &.uui-size-18 {
205
- --uui-horizontal-gap: 12px;
206
- --uui-line-height: 18px;
207
- --uui-font-size: 14px;
208
- }
209
-
210
- &.uui-size-24 {
211
- --uui-horizontal-gap: 12px;
212
- --uui-line-height: 24px;
213
- --uui-font-size: 16px;
214
- }
215
- }
216
-
217
- .uui-labeled-input {
218
- &.uui-size-30 {
219
- --uui-icon-size: 12px;
220
- --uui-font-size: 12px;
221
- }
222
-
223
- &.uui-size-42 {
224
- --uui-line-height: 18px;
225
- --uui-font-size: 14px;
226
- }
227
-
228
- &.uui-size-48 {
229
- --uui-icon-size: 18px;
230
- --uui-line-height: 18px;
231
- --uui-font-size: 14px;
232
- }
233
- }
234
-
235
- .uui-badge {
236
- &.uui-size-18 {
237
- --uui-font-size: 12px;
238
- --uui-horizontal-padding: 6px;
239
- --uui-badge-caption-horizontal-padding: 0;
240
- --uui-badge-indicator-padding: 3px;
241
- }
242
-
243
- &.uui-size-24 {
244
- --uui-icon-size: 18px;
245
- --uui-line-height: 12px;
246
- }
247
-
248
- &.uui-size-36 {
249
- --uui-horizontal-padding: 9px;
250
- }
251
-
252
- &.uui-size-42 {
253
- --uui-icon-size: 24px;
254
- --uui-horizontal-padding: 15px;
255
- }
256
-
257
- &.uui-size-48 {
258
- --uui-horizontal-padding: 15px;
259
- }
260
-
261
- &.uui-size-24,
262
- &.uui-size-30,
263
- &.uui-size-36,
264
- &.uui-size-42,
265
- &.uui-size-48 {
266
- --uui-horizontal-gap: 3px;
267
- }
268
- }
269
-
270
- .uui-status_indicator {
271
- &.uui-size-12 {
272
- --uui-horizontal-gap: 4px;
273
- }
274
-
275
- &.uui-size-18 {
276
- --uui-horizontal-gap: 6px;
277
- --uui-line-height: 18px;
278
- --uui-font-size: 14px;
279
- --uui-dot-size: 8px;
280
- }
281
-
282
- &.uui-size-24 {
283
- --uui-font-size: 14px;
284
- --uui-dot-size: 10px;
285
- }
286
- }
287
-
288
- .uui-count_indicator {
289
- &.uui-size-12 {
290
- --uui-horizontal-padding: 3px;
291
- --uui-line-height: 10px;
292
- --uui-font-size: 10px;
293
- }
294
-
295
- &.uui-size-18 {
296
- --uui-horizontal-padding: 6px;
297
- --uui-line-height: 16px;
298
- --uui-font-size: 12px;
299
- }
300
-
301
- &.uui-size-24 {
302
- --uui-line-height: 22px;
303
- --uui-font-size: 14px;
304
- }
305
- }
306
-
307
- .uui-table-header-cell {
308
- &.uui-size-36 {
309
- --uui-horizontal-gap: 12px;
310
- }
311
-
312
- &.uui-size-48 {
313
- --uui-horizontal-gap: 12px;
314
- }
315
-
316
- &.uui-size-60 {
317
- --uui-horizontal-gap: 12px;
318
- }
319
- }
320
-
321
- .uui-picker_toggler {
322
- &.uui-size-30,
323
- &.uui-size-36,
324
- &.uui-size-42,
325
- &.uui-size-48 {
326
- --uui-vertical-padding: 3px;
327
- }
328
- }
329
-
330
- .uui-alert {
331
- &.uui-size-36 {
332
- --uui-alert-indicator-border-width: 3px;
333
- --uui-alert-gap-h: 12px;
334
- --uui-alert-gap-v: 3px;
335
- --uui-alert-padding-h: 9px;
336
- --uui-alert-padding-v: 3px;
337
- --uui-alert-caption-gap-h: 9px;
338
- }
339
- }
340
-
341
- .uui-filters-panel-item-toggler {
342
- &.uui-size-24 {
343
- --uui-horizontal-padding: 3px;
344
- --uui-horizontal-gap: 3px;
345
- }
346
- }
347
- }
1
+ @mixin uui-6px-grid {
2
+ & {
3
+ --uui-grid-unit: 6px;
4
+ --uui-focus-outline-width: 2px;
5
+ --uui-focus-outline-offset: 2px;
6
+ --uui-focus-radius: 2px;
7
+ //--uui-border-radius: 3px; // TODO: ?????
8
+ --uui-tab-line-width: 3px;
9
+ --uui-notify-size: 6px;
10
+ --uui-resize-marker-width: 12px;
11
+ }
12
+
13
+ .uui-size-12 {
14
+ --uui-size: 12px;
15
+ --uui-border-width: 1px;
16
+ --uui-horizontal-gap: 6px;
17
+ --uui-vertical-gap: 3px;
18
+ --uui-horizontal-padding: 6px;
19
+ --uui-vertical-padding: 3px; // remove - discuss
20
+ --uui-icon-size: 12px;
21
+ --uui-line-height: 12px;
22
+ --uui-font-size: 12px;
23
+ --uui-dot-size: 6px;
24
+ }
25
+
26
+ .uui-size-18 {
27
+ --uui-size: 18px;
28
+ --uui-border-width: 1px;
29
+ --uui-horizontal-gap: 3px;
30
+ --uui-vertical-gap: 3px;
31
+ --uui-horizontal-padding: 3px;
32
+ --uui-vertical-padding: 3px;
33
+ --uui-icon-size: 12px;
34
+ --uui-line-height: 12px;
35
+ --uui-font-size: 10px;
36
+ --uui-dot-size: 6px;
37
+ }
38
+
39
+ .uui-size-24 {
40
+ --uui-size: 24px;
41
+ --uui-border-width: 1px;
42
+ --uui-horizontal-gap: 6px;
43
+ --uui-vertical-gap: 3px;
44
+ --uui-horizontal-padding: 6px;
45
+ --uui-vertical-padding: 3px;
46
+ --uui-icon-size: 12px;
47
+ --uui-line-height: 18px;
48
+ --uui-font-size: 12px;
49
+ --uui-dot-size: 8px;
50
+ }
51
+
52
+ .uui-size-30 {
53
+ --uui-size: 30px;
54
+ --uui-border-width: 1px;
55
+ --uui-horizontal-gap: 6px;
56
+ --uui-vertical-gap: 3px;
57
+ --uui-horizontal-padding: 6px;
58
+ --uui-vertical-padding: 6px;
59
+ --uui-icon-size: 18px;
60
+ --uui-line-height: 18px;
61
+ --uui-font-size: 14px;
62
+ --uui-dot-size: 8px;
63
+ }
64
+
65
+ .uui-size-36 {
66
+ --uui-size: 36px;
67
+ --uui-border-width: 1px;
68
+ --uui-horizontal-gap: 6px;
69
+ --uui-vertical-gap: 3px;
70
+ --uui-horizontal-padding: 6px;
71
+ --uui-vertical-padding: 9px;
72
+ --uui-icon-size: 18px;
73
+ --uui-line-height: 18px;
74
+ --uui-font-size: 14px;
75
+ --uui-dot-size: 8px;
76
+ }
77
+
78
+ .uui-size-42 {
79
+ --uui-size: 42px;
80
+ --uui-border-width: 1px;
81
+ --uui-horizontal-gap: 6px;
82
+ --uui-vertical-gap: 3px;
83
+ --uui-horizontal-padding: 12px;
84
+ --uui-vertical-padding: 9px;
85
+ --uui-icon-size: 18px;
86
+ --uui-line-height: 24px;
87
+ --uui-font-size: 16px;
88
+ --uui-dot-size: 10px;
89
+ }
90
+
91
+ .uui-size-48 {
92
+ --uui-size: 48px;
93
+ --uui-border-width: 1px;
94
+ --uui-horizontal-gap: 6px;
95
+ --uui-vertical-gap: 3px;
96
+ --uui-horizontal-padding: 12px;
97
+ --uui-vertical-padding: 12px;
98
+ --uui-icon-size: 24px;
99
+ --uui-line-height: 24px;
100
+ --uui-font-size: 16px;
101
+ --uui-dot-size: 12px;
102
+ }
103
+
104
+ .uui-size-60 {
105
+ --uui-size: 60px;
106
+ --uui-border-width: 1px;
107
+ --uui-horizontal-gap: 6px;
108
+ --uui-vertical-gap: 3px;
109
+ --uui-horizontal-padding: 12px;
110
+ --uui-vertical-padding: 18px;
111
+ --uui-icon-size: 24px;
112
+ --uui-line-height: 24px;
113
+ --uui-font-size: 20px;
114
+ --uui-dot-size: 12px;
115
+ }
116
+
117
+ .uui-input-box {
118
+ &.uui-size-42 {
119
+ --uui-horizontal-padding: 6px;
120
+ }
121
+
122
+ &.uui-size-48 {
123
+ --uui-horizontal-padding: 6px;
124
+ }
125
+
126
+ &.uui-textarea {
127
+ --uui-horizontal-padding: 12px;
128
+
129
+ &.uui-size-24 {
130
+ --uui-line-height: 12px;
131
+ }
132
+ }
133
+ }
134
+
135
+ .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
136
+ --uui-horizontal-padding: 6px;
137
+ --uui-horizontal-gap: 3px;
138
+ --uui-icon-size: 18px;
139
+ --uui-line-height: 18px;
140
+ --uui-font-size: 14px;
141
+ }
142
+
143
+ .uui-vertical-tab-button {
144
+ &.uui-size-30 {
145
+ --uui-horizontal-padding: 12px;
146
+ --uui-icon-size: 12px;
147
+ }
148
+
149
+ &.uui-size-36 {
150
+ --uui-horizontal-padding: 18px;
151
+ }
152
+
153
+ &.uui-size-48 {
154
+ --uui-horizontal-padding: 18px;
155
+ --uui-font-size: 14px;
156
+ --uui-icon-size: 18px;
157
+ }
158
+ }
159
+
160
+ .uui-tag {
161
+ &.uui-size-18 {
162
+ --uui-font-size: 12px;
163
+
164
+ .uui-caption {
165
+ --uui-tag-caption-horizontal-padding: 0;
166
+ }
167
+ }
168
+
169
+ &.uui-size-24 {
170
+ --uui-icon-size: 18px;
171
+ }
172
+
173
+ &.uui-size-42 {
174
+ --uui-icon-size: 24px;
175
+ }
176
+
177
+ &.uui-size-24,
178
+ &.uui-size-30,
179
+ &.uui-size-36,
180
+ &.uui-size-42 {
181
+ --uui-horizontal-gap: 3px;
182
+ }
183
+
184
+ &.uui-size-24,
185
+ &.uui-size-30 {
186
+ --uui-horizontal-padding: 3px;
187
+ }
188
+
189
+ &.uui-size-42,
190
+ &.uui-size-48 {
191
+ --uui-horizontal-padding: 9px;
192
+ }
193
+ }
194
+
195
+ .uui-checkbox-container, .uui-radio-input-container {
196
+ &.uui-size-18 {
197
+ --uui-horizontal-gap: 12px;
198
+ --uui-line-height: 18px;
199
+ --uui-font-size: 14px;
200
+ }
201
+ }
202
+
203
+ .uui-switch {
204
+ &.uui-size-18 {
205
+ --uui-horizontal-gap: 12px;
206
+ --uui-line-height: 18px;
207
+ --uui-font-size: 14px;
208
+ }
209
+
210
+ &.uui-size-24 {
211
+ --uui-horizontal-gap: 12px;
212
+ --uui-line-height: 24px;
213
+ --uui-font-size: 16px;
214
+ }
215
+ }
216
+
217
+ .uui-labeled-input {
218
+ &.uui-size-30 {
219
+ --uui-icon-size: 12px;
220
+ --uui-font-size: 12px;
221
+ }
222
+
223
+ &.uui-size-42 {
224
+ --uui-line-height: 18px;
225
+ --uui-font-size: 14px;
226
+ }
227
+
228
+ &.uui-size-48 {
229
+ --uui-icon-size: 18px;
230
+ --uui-line-height: 18px;
231
+ --uui-font-size: 14px;
232
+ }
233
+ }
234
+
235
+ .uui-badge {
236
+ &.uui-size-18 {
237
+ --uui-font-size: 12px;
238
+ --uui-horizontal-padding: 6px;
239
+ --uui-badge-caption-horizontal-padding: 0;
240
+ --uui-badge-indicator-padding: 3px;
241
+ }
242
+
243
+ &.uui-size-24 {
244
+ --uui-icon-size: 18px;
245
+ --uui-line-height: 12px;
246
+ }
247
+
248
+ &.uui-size-36 {
249
+ --uui-horizontal-padding: 9px;
250
+ }
251
+
252
+ &.uui-size-42 {
253
+ --uui-icon-size: 24px;
254
+ --uui-horizontal-padding: 15px;
255
+ }
256
+
257
+ &.uui-size-48 {
258
+ --uui-horizontal-padding: 15px;
259
+ }
260
+
261
+ &.uui-size-24,
262
+ &.uui-size-30,
263
+ &.uui-size-36,
264
+ &.uui-size-42,
265
+ &.uui-size-48 {
266
+ --uui-horizontal-gap: 3px;
267
+ }
268
+ }
269
+
270
+ .uui-status_indicator {
271
+ &.uui-size-12 {
272
+ --uui-horizontal-gap: 4px;
273
+ }
274
+
275
+ &.uui-size-18 {
276
+ --uui-horizontal-gap: 6px;
277
+ --uui-line-height: 18px;
278
+ --uui-font-size: 14px;
279
+ --uui-dot-size: 8px;
280
+ }
281
+
282
+ &.uui-size-24 {
283
+ --uui-font-size: 14px;
284
+ --uui-dot-size: 10px;
285
+ }
286
+ }
287
+
288
+ .uui-count_indicator {
289
+ &.uui-size-12 {
290
+ --uui-horizontal-padding: 3px;
291
+ --uui-line-height: 10px;
292
+ --uui-font-size: 10px;
293
+ }
294
+
295
+ &.uui-size-18 {
296
+ --uui-horizontal-padding: 6px;
297
+ --uui-line-height: 16px;
298
+ --uui-font-size: 12px;
299
+ }
300
+
301
+ &.uui-size-24 {
302
+ --uui-line-height: 22px;
303
+ --uui-font-size: 14px;
304
+ }
305
+ }
306
+
307
+ .uui-table-header-cell {
308
+ &.uui-size-36 {
309
+ --uui-horizontal-gap: 12px;
310
+ }
311
+
312
+ &.uui-size-48 {
313
+ --uui-horizontal-gap: 12px;
314
+ }
315
+
316
+ &.uui-size-60 {
317
+ --uui-horizontal-gap: 12px;
318
+ }
319
+ }
320
+
321
+ .uui-picker_toggler {
322
+ &.uui-size-30,
323
+ &.uui-size-36,
324
+ &.uui-size-42,
325
+ &.uui-size-48 {
326
+ --uui-vertical-padding: 3px;
327
+ }
328
+ }
329
+
330
+ .uui-alert {
331
+ &.uui-size-36 {
332
+ --uui-alert-indicator-border-width: 3px;
333
+ --uui-alert-gap-h: 12px;
334
+ --uui-alert-gap-v: 3px;
335
+ --uui-alert-padding-h: 9px;
336
+ --uui-alert-padding-v: 3px;
337
+ --uui-alert-caption-gap-h: 9px;
338
+ }
339
+ }
340
+
341
+ .uui-filters-panel-item-toggler {
342
+ &.uui-size-24 {
343
+ --uui-horizontal-padding: 3px;
344
+ --uui-horizontal-gap: 3px;
345
+ }
346
+ }
347
+ }