@epam/assets 5.10.2-patch.0 → 5.10.2-patch.1

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 (61) hide show
  1. package/css/theme/theme_electric.css.map +1 -1
  2. package/css/theme/theme_loveship.css.map +1 -1
  3. package/css/theme/theme_loveship_dark.css.map +1 -1
  4. package/css/theme/theme_promo.css.map +1 -1
  5. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  6. package/icons/common/radio-point-10.svg +13 -13
  7. package/icons/legacy/btn_cross.svg +22 -22
  8. package/icons/legacy/btn_tick.svg +22 -22
  9. package/icons/legacy/calendar-30.svg +12 -12
  10. package/icons/legacy/calendar-36.svg +14 -14
  11. package/icons/legacy/excel.svg +12 -12
  12. package/icons/legacy/filter-24.svg +11 -11
  13. package/icons/legacy/filter.svg +12 -12
  14. package/icons/legacy/folding-arrow.svg +14 -14
  15. package/icons/legacy/gear.svg +14 -14
  16. package/icons/legacy/help-24.svg +11 -11
  17. package/icons/legacy/help.svg +21 -21
  18. package/icons/legacy/label_info.svg +14 -14
  19. package/icons/legacy/lens.svg +17 -17
  20. package/icons/legacy/modal-close-cross.svg +22 -22
  21. package/icons/legacy/more.svg +20 -20
  22. package/icons/legacy/pencil.svg +12 -12
  23. package/icons/legacy/plus.svg +12 -12
  24. package/icons/legacy/sliders.svg +12 -12
  25. package/icons/legacy/sort-24.svg +15 -15
  26. package/icons/legacy/sort-desc-24.svg +15 -15
  27. package/icons/legacy/sort.svg +4 -4
  28. package/icons/legacy/trash.svg +12 -12
  29. package/icons/loaders/circle_loader_30.svg +69 -69
  30. package/icons/loaders/dots_loader_30.svg +39 -39
  31. package/icons/templates/generic-24.svg +40 -40
  32. package/icons/templates/generic-30.svg +43 -43
  33. package/icons/templates/generic.svg +40 -40
  34. package/icons/templates/tall.svg +69 -69
  35. package/package.json +2 -2
  36. package/readme.md +6 -6
  37. package/scss/electric/font-faces.scss +138 -138
  38. package/scss/font-faces.scss +3 -3
  39. package/scss/fonts.scss +2 -2
  40. package/scss/index.scss +4 -4
  41. package/scss/loveship/colors.scss +100 -100
  42. package/scss/loveship/font-faces.scss +186 -186
  43. package/scss/loveship/fonts.scss +23 -23
  44. package/scss/loveship/typography.scss +160 -160
  45. package/scss/loveship-colors.scss +2 -2
  46. package/scss/promo/colors.scss +100 -100
  47. package/scss/promo/font-faces.scss +168 -168
  48. package/scss/promo/fonts.scss +17 -17
  49. package/scss/promo/typography.scss +175 -175
  50. package/scss/typography.scss +2 -2
  51. package/theme/theme_6px.scss +290 -290
  52. package/theme/theme_electric.scss +515 -515
  53. package/theme/theme_loveship.scss +593 -593
  54. package/theme/theme_loveship_dark.scss +822 -822
  55. package/theme/theme_promo.scss +606 -606
  56. package/theme/theme_vanilla_thunder.scss +488 -488
  57. package/theme/tokens/_color_classes.scss +103 -103
  58. package/theme/tokens/_theme_electric.scss +277 -277
  59. package/theme/tokens/_theme_loveship_dark.scss +275 -275
  60. package/theme/tokens/_theme_loveship_light.scss +275 -275
  61. package/theme/tokens/_theme_promo.scss +275 -275
package/theme/theme_6px.scss CHANGED
@@ -1,290 +1,290 @@
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
- }
11
-
12
- .uui-size-12 {
13
- --uui-size: 12px;
14
- --uui-border-width: 1px;
15
- --uui-horizontal-gap: 6px;
16
- --uui-vertical-gap: 3px;
17
- --uui-horizontal-padding: 6px;
18
- --uui-vertical-padding: 3px;
19
- --uui-icon-size: 12px;
20
- --uui-line-height: 12px;
21
- --uui-font-size: 12px;
22
- --uui-dot-size: 6px;
23
- }
24
-
25
- .uui-size-18 {
26
- --uui-size: 18px;
27
- --uui-border-width: 1px;
28
- --uui-horizontal-gap: 3px;
29
- --uui-vertical-gap: 3px;
30
- --uui-horizontal-padding: 3px;
31
- --uui-vertical-padding: 3px;
32
- --uui-icon-size: 12px;
33
- --uui-line-height: 12px;
34
- --uui-font-size: 10px;
35
- --uui-dot-size: 6px;
36
- }
37
-
38
- .uui-size-24 {
39
- --uui-size: 24px;
40
- --uui-border-width: 1px;
41
- --uui-horizontal-gap: 6px;
42
- --uui-vertical-gap: 3px;
43
- --uui-horizontal-padding: 6px;
44
- --uui-vertical-padding: 3px;
45
- --uui-icon-size: 12px;
46
- --uui-line-height: 18px;
47
- --uui-font-size: 12px;
48
- --uui-dot-size: 8px;
49
- }
50
-
51
- .uui-size-30 {
52
- --uui-size: 30px;
53
- --uui-border-width: 1px;
54
- --uui-horizontal-gap: 6px;
55
- --uui-vertical-gap: 3px;
56
- --uui-horizontal-padding: 6px;
57
- --uui-vertical-padding: 3px;
58
- --uui-icon-size: 18px;
59
- --uui-line-height: 18px;
60
- --uui-font-size: 14px;
61
- --uui-dot-size: 8px;
62
- }
63
-
64
- .uui-size-36 {
65
- --uui-size: 36px;
66
- --uui-border-width: 1px;
67
- --uui-horizontal-gap: 6px;
68
- --uui-vertical-gap: 3px;
69
- --uui-horizontal-padding: 6px;
70
- --uui-vertical-padding: 3px; // update paddings change C:\Users\Siarhei_Dzeraviannik\WebstormProjects\UUI\uui\components\pickers\PickerToggler.module.scss
71
- --uui-icon-size: 18px;
72
- --uui-line-height: 18px;
73
- --uui-font-size: 14px;
74
- --uui-dot-size: 8px;
75
- }
76
-
77
- .uui-size-42 {
78
- --uui-size: 42px;
79
- --uui-border-width: 1px;
80
- --uui-horizontal-gap: 6px;
81
- --uui-vertical-gap: 3px;
82
- --uui-horizontal-padding: 12px;
83
- --uui-vertical-padding: 3px;
84
- --uui-icon-size: 18px;
85
- --uui-line-height: 24px;
86
- --uui-font-size: 16px;
87
- --uui-dot-size: 10px;
88
- }
89
-
90
- .uui-size-48 {
91
- --uui-size: 48px;
92
- --uui-border-width: 1px;
93
- --uui-horizontal-gap: 6px;
94
- --uui-vertical-gap: 3px;
95
- --uui-horizontal-padding: 12px;
96
- --uui-vertical-padding: 3px;
97
- --uui-icon-size: 24px;
98
- --uui-line-height: 24px;
99
- --uui-font-size: 16px;
100
- --uui-dot-size: 12px;
101
- }
102
-
103
- .uui-size-60 {
104
- --uui-size: 60px;
105
- --uui-border-width: 1px;
106
- --uui-horizontal-gap: 6px;
107
- --uui-vertical-gap: 3px;
108
- --uui-horizontal-padding: 12px;
109
- --uui-vertical-padding: 3px;
110
- --uui-icon-size: 24px;
111
- --uui-line-height: 24px;
112
- --uui-font-size: 20px;
113
- --uui-dot-size: 12px;
114
- }
115
-
116
- .uui-input-box {
117
- &.uui-size-42 {
118
- --uui-horizontal-padding: 6px;
119
- }
120
-
121
- &.uui-size-48 {
122
- --uui-horizontal-padding: 6px;
123
- }
124
-
125
- &.uui-textarea {
126
- --uui-horizontal-padding: 12px;
127
-
128
- &.uui-size-24 {
129
- --uui-line-height: 12px;
130
- }
131
- }
132
- }
133
-
134
- .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
135
- --uui-horizontal-padding: 6px;
136
- --uui-horizontal-gap: 3px;
137
- --uui-icon-size: 18px;
138
- --uui-line-height: 18px;
139
- --uui-font-size: 14px;
140
- }
141
-
142
- .uui-tag {
143
- &.uui-size-18 {
144
- --uui-font-size: 12px;
145
- --uui-line-height: 14px;
146
- }
147
-
148
- &.uui-size-24 {
149
- --uui-icon-size: 18px;
150
- }
151
-
152
- &.uui-size-42 {
153
- --uui-icon-size: 24px;
154
- }
155
-
156
- &.uui-size-42,
157
- &.uui-size-48 {
158
- --uui-tag-count_indicator-margin-end: 3px;
159
- }
160
-
161
- &.uui-size-18,
162
- &.uui-size-24,
163
- &.uui-size-30,
164
- &.uui-size-36 {
165
- --uui-horizontal-gap: 3px;
166
- }
167
-
168
- &.uui-size-18,
169
- &.uui-size-24,
170
- &.uui-size-30 {
171
- --uui-horizontal-padding: 3px;
172
- }
173
-
174
- &.uui-size-42,
175
- &.uui-size-48 {
176
- --uui-horizontal-padding: 6px;
177
- }
178
- }
179
-
180
- .uui-checkbox-container, .uui-radio-input-container {
181
- &.uui-size-18 {
182
- --uui-horizontal-gap: 12px;
183
- --uui-line-height: 18px;
184
- --uui-font-size: 14px;
185
- }
186
- }
187
-
188
- .uui-switch {
189
- &.uui-size-18 {
190
- --uui-horizontal-gap: 12px;
191
- --uui-line-height: 18px;
192
- --uui-font-size: 14px;
193
- }
194
-
195
- &.uui-size-24 {
196
- --uui-horizontal-gap: 12px;
197
- --uui-line-height: 24px;
198
- --uui-font-size: 16px;
199
- }
200
- }
201
-
202
- .uui-labeled-input {
203
- &.uui-size-30 {
204
- --uui-icon-size: 12px;
205
- --uui-font-size: 12px;
206
- }
207
-
208
- &.uui-size-42 {
209
- --uui-line-height: 18px;
210
- --uui-font-size: 14px;
211
- }
212
-
213
- &.uui-size-48 {
214
- --uui-icon-size: 18px;
215
- --uui-line-height: 18px;
216
- --uui-font-size: 14px;
217
- }
218
- }
219
-
220
- .uui-badge {
221
- &.uui-size-18 {
222
- --uui-font-size: 12px;
223
- }
224
-
225
- &.uui-size-24 {
226
- --uui-horizontal-padding: 3px;
227
- --uui-icon-size: 18px;
228
- --uui-line-height: 12px;
229
- }
230
-
231
- &.uui-size-36 {
232
- --uui-horizontal-padding: 9px;
233
- }
234
-
235
- &.uui-size-42 {
236
- --uui-icon-size: 24px;
237
- }
238
- }
239
-
240
- .uui-status_indicator {
241
- &.uui-size-12 {
242
- --uui-horizontal-gap: 4px;
243
- }
244
-
245
- &.uui-size-18 {
246
- --uui-horizontal-gap: 6px;
247
- --uui-line-height: 18px;
248
- --uui-font-size: 14px;
249
- --uui-dot-size: 8px;
250
- }
251
-
252
- &.uui-size-24 {
253
- --uui-font-size: 14px;
254
- --uui-dot-size: 10px;
255
- }
256
- }
257
-
258
- .uui-count_indicator {
259
- &.uui-size-12 {
260
- --uui-horizontal-padding: 3px;
261
- --uui-line-height: 10px;
262
- --uui-font-size: 8px;
263
- }
264
-
265
- &.uui-size-18 {
266
- --uui-horizontal-padding: 6px;
267
- --uui-line-height: 16px;
268
- --uui-font-size: 12px;
269
- }
270
-
271
- &.uui-size-24 {
272
- --uui-line-height: 22px;
273
- --uui-font-size: 14px;
274
- }
275
- }
276
-
277
- .uui-table-header-cell {
278
- &.uui-size-36 {
279
- --uui-horizontal-gap: 12px;
280
- }
281
-
282
- &.uui-size-48 {
283
- --uui-horizontal-gap: 12px;
284
- }
285
-
286
- &.uui-size-60 {
287
- --uui-horizontal-gap: 12px;
288
- }
289
- }
290
- }
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
+ }
11
+
12
+ .uui-size-12 {
13
+ --uui-size: 12px;
14
+ --uui-border-width: 1px;
15
+ --uui-horizontal-gap: 6px;
16
+ --uui-vertical-gap: 3px;
17
+ --uui-horizontal-padding: 6px;
18
+ --uui-vertical-padding: 3px;
19
+ --uui-icon-size: 12px;
20
+ --uui-line-height: 12px;
21
+ --uui-font-size: 12px;
22
+ --uui-dot-size: 6px;
23
+ }
24
+
25
+ .uui-size-18 {
26
+ --uui-size: 18px;
27
+ --uui-border-width: 1px;
28
+ --uui-horizontal-gap: 3px;
29
+ --uui-vertical-gap: 3px;
30
+ --uui-horizontal-padding: 3px;
31
+ --uui-vertical-padding: 3px;
32
+ --uui-icon-size: 12px;
33
+ --uui-line-height: 12px;
34
+ --uui-font-size: 10px;
35
+ --uui-dot-size: 6px;
36
+ }
37
+
38
+ .uui-size-24 {
39
+ --uui-size: 24px;
40
+ --uui-border-width: 1px;
41
+ --uui-horizontal-gap: 6px;
42
+ --uui-vertical-gap: 3px;
43
+ --uui-horizontal-padding: 6px;
44
+ --uui-vertical-padding: 3px;
45
+ --uui-icon-size: 12px;
46
+ --uui-line-height: 18px;
47
+ --uui-font-size: 12px;
48
+ --uui-dot-size: 8px;
49
+ }
50
+
51
+ .uui-size-30 {
52
+ --uui-size: 30px;
53
+ --uui-border-width: 1px;
54
+ --uui-horizontal-gap: 6px;
55
+ --uui-vertical-gap: 3px;
56
+ --uui-horizontal-padding: 6px;
57
+ --uui-vertical-padding: 3px;
58
+ --uui-icon-size: 18px;
59
+ --uui-line-height: 18px;
60
+ --uui-font-size: 14px;
61
+ --uui-dot-size: 8px;
62
+ }
63
+
64
+ .uui-size-36 {
65
+ --uui-size: 36px;
66
+ --uui-border-width: 1px;
67
+ --uui-horizontal-gap: 6px;
68
+ --uui-vertical-gap: 3px;
69
+ --uui-horizontal-padding: 6px;
70
+ --uui-vertical-padding: 3px; // update paddings change C:\Users\Siarhei_Dzeraviannik\WebstormProjects\UUI\uui\components\pickers\PickerToggler.module.scss
71
+ --uui-icon-size: 18px;
72
+ --uui-line-height: 18px;
73
+ --uui-font-size: 14px;
74
+ --uui-dot-size: 8px;
75
+ }
76
+
77
+ .uui-size-42 {
78
+ --uui-size: 42px;
79
+ --uui-border-width: 1px;
80
+ --uui-horizontal-gap: 6px;
81
+ --uui-vertical-gap: 3px;
82
+ --uui-horizontal-padding: 12px;
83
+ --uui-vertical-padding: 3px;
84
+ --uui-icon-size: 18px;
85
+ --uui-line-height: 24px;
86
+ --uui-font-size: 16px;
87
+ --uui-dot-size: 10px;
88
+ }
89
+
90
+ .uui-size-48 {
91
+ --uui-size: 48px;
92
+ --uui-border-width: 1px;
93
+ --uui-horizontal-gap: 6px;
94
+ --uui-vertical-gap: 3px;
95
+ --uui-horizontal-padding: 12px;
96
+ --uui-vertical-padding: 3px;
97
+ --uui-icon-size: 24px;
98
+ --uui-line-height: 24px;
99
+ --uui-font-size: 16px;
100
+ --uui-dot-size: 12px;
101
+ }
102
+
103
+ .uui-size-60 {
104
+ --uui-size: 60px;
105
+ --uui-border-width: 1px;
106
+ --uui-horizontal-gap: 6px;
107
+ --uui-vertical-gap: 3px;
108
+ --uui-horizontal-padding: 12px;
109
+ --uui-vertical-padding: 3px;
110
+ --uui-icon-size: 24px;
111
+ --uui-line-height: 24px;
112
+ --uui-font-size: 20px;
113
+ --uui-dot-size: 12px;
114
+ }
115
+
116
+ .uui-input-box {
117
+ &.uui-size-42 {
118
+ --uui-horizontal-padding: 6px;
119
+ }
120
+
121
+ &.uui-size-48 {
122
+ --uui-horizontal-padding: 6px;
123
+ }
124
+
125
+ &.uui-textarea {
126
+ --uui-horizontal-padding: 12px;
127
+
128
+ &.uui-size-24 {
129
+ --uui-line-height: 12px;
130
+ }
131
+ }
132
+ }
133
+
134
+ .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
135
+ --uui-horizontal-padding: 6px;
136
+ --uui-horizontal-gap: 3px;
137
+ --uui-icon-size: 18px;
138
+ --uui-line-height: 18px;
139
+ --uui-font-size: 14px;
140
+ }
141
+
142
+ .uui-tag {
143
+ &.uui-size-18 {
144
+ --uui-font-size: 12px;
145
+ --uui-line-height: 14px;
146
+ }
147
+
148
+ &.uui-size-24 {
149
+ --uui-icon-size: 18px;
150
+ }
151
+
152
+ &.uui-size-42 {
153
+ --uui-icon-size: 24px;
154
+ }
155
+
156
+ &.uui-size-42,
157
+ &.uui-size-48 {
158
+ --uui-tag-count_indicator-margin-end: 3px;
159
+ }
160
+
161
+ &.uui-size-18,
162
+ &.uui-size-24,
163
+ &.uui-size-30,
164
+ &.uui-size-36 {
165
+ --uui-horizontal-gap: 3px;
166
+ }
167
+
168
+ &.uui-size-18,
169
+ &.uui-size-24,
170
+ &.uui-size-30 {
171
+ --uui-horizontal-padding: 3px;
172
+ }
173
+
174
+ &.uui-size-42,
175
+ &.uui-size-48 {
176
+ --uui-horizontal-padding: 6px;
177
+ }
178
+ }
179
+
180
+ .uui-checkbox-container, .uui-radio-input-container {
181
+ &.uui-size-18 {
182
+ --uui-horizontal-gap: 12px;
183
+ --uui-line-height: 18px;
184
+ --uui-font-size: 14px;
185
+ }
186
+ }
187
+
188
+ .uui-switch {
189
+ &.uui-size-18 {
190
+ --uui-horizontal-gap: 12px;
191
+ --uui-line-height: 18px;
192
+ --uui-font-size: 14px;
193
+ }
194
+
195
+ &.uui-size-24 {
196
+ --uui-horizontal-gap: 12px;
197
+ --uui-line-height: 24px;
198
+ --uui-font-size: 16px;
199
+ }
200
+ }
201
+
202
+ .uui-labeled-input {
203
+ &.uui-size-30 {
204
+ --uui-icon-size: 12px;
205
+ --uui-font-size: 12px;
206
+ }
207
+
208
+ &.uui-size-42 {
209
+ --uui-line-height: 18px;
210
+ --uui-font-size: 14px;
211
+ }
212
+
213
+ &.uui-size-48 {
214
+ --uui-icon-size: 18px;
215
+ --uui-line-height: 18px;
216
+ --uui-font-size: 14px;
217
+ }
218
+ }
219
+
220
+ .uui-badge {
221
+ &.uui-size-18 {
222
+ --uui-font-size: 12px;
223
+ }
224
+
225
+ &.uui-size-24 {
226
+ --uui-horizontal-padding: 3px;
227
+ --uui-icon-size: 18px;
228
+ --uui-line-height: 12px;
229
+ }
230
+
231
+ &.uui-size-36 {
232
+ --uui-horizontal-padding: 9px;
233
+ }
234
+
235
+ &.uui-size-42 {
236
+ --uui-icon-size: 24px;
237
+ }
238
+ }
239
+
240
+ .uui-status_indicator {
241
+ &.uui-size-12 {
242
+ --uui-horizontal-gap: 4px;
243
+ }
244
+
245
+ &.uui-size-18 {
246
+ --uui-horizontal-gap: 6px;
247
+ --uui-line-height: 18px;
248
+ --uui-font-size: 14px;
249
+ --uui-dot-size: 8px;
250
+ }
251
+
252
+ &.uui-size-24 {
253
+ --uui-font-size: 14px;
254
+ --uui-dot-size: 10px;
255
+ }
256
+ }
257
+
258
+ .uui-count_indicator {
259
+ &.uui-size-12 {
260
+ --uui-horizontal-padding: 3px;
261
+ --uui-line-height: 10px;
262
+ --uui-font-size: 8px;
263
+ }
264
+
265
+ &.uui-size-18 {
266
+ --uui-horizontal-padding: 6px;
267
+ --uui-line-height: 16px;
268
+ --uui-font-size: 12px;
269
+ }
270
+
271
+ &.uui-size-24 {
272
+ --uui-line-height: 22px;
273
+ --uui-font-size: 14px;
274
+ }
275
+ }
276
+
277
+ .uui-table-header-cell {
278
+ &.uui-size-36 {
279
+ --uui-horizontal-gap: 12px;
280
+ }
281
+
282
+ &.uui-size-48 {
283
+ --uui-horizontal-gap: 12px;
284
+ }
285
+
286
+ &.uui-size-60 {
287
+ --uui-horizontal-gap: 12px;
288
+ }
289
+ }
290
+ }