@epam/assets 6.1.3 → 6.1.4

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