@epam/assets 6.2.0 → 6.3.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 (90) 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 +3 -3
  9. package/css/theme/theme_fresh_4px.css.map +1 -1
  10. package/css/theme/theme_loveship.css.map +1 -1
  11. package/css/theme/theme_loveship_dark.css.map +1 -1
  12. package/css/theme/theme_promo.css.map +1 -1
  13. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  14. package/css/theme/variables/fresh_4px.css.map +1 -1
  15. package/icons/common/radio-point-10.svg +13 -13
  16. package/icons/legacy/btn_cross.svg +22 -22
  17. package/icons/legacy/btn_tick.svg +22 -22
  18. package/icons/legacy/calendar-30.svg +12 -12
  19. package/icons/legacy/calendar-36.svg +14 -14
  20. package/icons/legacy/excel.svg +12 -12
  21. package/icons/legacy/filter-24.svg +11 -11
  22. package/icons/legacy/filter.svg +12 -12
  23. package/icons/legacy/folding-arrow.svg +14 -14
  24. package/icons/legacy/gear.svg +14 -14
  25. package/icons/legacy/help-24.svg +11 -11
  26. package/icons/legacy/help.svg +21 -21
  27. package/icons/legacy/label_info.svg +14 -14
  28. package/icons/legacy/lens.svg +17 -17
  29. package/icons/legacy/modal-close-cross.svg +22 -22
  30. package/icons/legacy/more.svg +20 -20
  31. package/icons/legacy/pencil.svg +12 -12
  32. package/icons/legacy/plus.svg +12 -12
  33. package/icons/legacy/sliders.svg +12 -12
  34. package/icons/legacy/sort-24.svg +15 -15
  35. package/icons/legacy/sort-desc-24.svg +15 -15
  36. package/icons/legacy/sort.svg +4 -4
  37. package/icons/legacy/trash.svg +12 -12
  38. package/icons/loaders/circle_loader_30.svg +69 -69
  39. package/icons/loaders/dots_loader_30.svg +39 -39
  40. package/icons/templates/generic-24.svg +40 -40
  41. package/icons/templates/generic-30.svg +43 -43
  42. package/icons/templates/generic.svg +40 -40
  43. package/icons/templates/tall.svg +69 -69
  44. package/package.json +2 -2
  45. package/readme.md +6 -6
  46. package/scss/electric/font-faces.scss +138 -138
  47. package/scss/font-faces.scss +3 -3
  48. package/scss/fonts.scss +2 -2
  49. package/scss/index.scss +4 -4
  50. package/scss/loveship/colors.scss +100 -100
  51. package/scss/loveship/font-faces.scss +186 -186
  52. package/scss/loveship/fonts.scss +23 -23
  53. package/scss/loveship/typography.scss +160 -160
  54. package/scss/loveship-colors.scss +2 -2
  55. package/scss/promo/colors.scss +100 -100
  56. package/scss/promo/font-faces.scss +168 -168
  57. package/scss/promo/fonts.scss +17 -17
  58. package/scss/promo/typography.scss +175 -175
  59. package/scss/typography.scss +2 -2
  60. package/theme/customThemeTemplate.css +697 -697
  61. package/theme/no-fonts/theme_electric.scss +7 -7
  62. package/theme/no-fonts/theme_loveship.scss +8 -8
  63. package/theme/no-fonts/theme_loveship_dark.scss +8 -8
  64. package/theme/no-fonts/theme_promo.scss +8 -8
  65. package/theme/theme_eduverse_dark.scss +876 -876
  66. package/theme/theme_eduverse_light.scss +552 -552
  67. package/theme/theme_electric.scss +8 -8
  68. package/theme/theme_fresh_4px.scss +7 -7
  69. package/theme/theme_loveship.scss +8 -8
  70. package/theme/theme_loveship_dark.scss +8 -8
  71. package/theme/theme_promo.scss +9 -9
  72. package/theme/theme_vanilla_thunder.scss +488 -488
  73. package/theme/variables/4px_grid.scss +265 -265
  74. package/theme/variables/6px_grid.scss +347 -347
  75. package/theme/variables/6px_grid_eduverse.scss +69 -69
  76. package/theme/variables/electric.scss +545 -545
  77. package/theme/variables/fresh_4px.scss +612 -611
  78. package/theme/variables/loveship.scss +627 -627
  79. package/theme/variables/loveship_dark.scss +857 -857
  80. package/theme/variables/promo.scss +601 -601
  81. package/theme/variables/tokens/_color_classes.scss +103 -103
  82. package/theme/variables/tokens/_theme_eduverse_dark.scss +282 -282
  83. package/theme/variables/tokens/_theme_eduverse_dark_mobile.scss +282 -282
  84. package/theme/variables/tokens/_theme_eduverse_light.scss +282 -282
  85. package/theme/variables/tokens/_theme_eduverse_light_mobile.scss +282 -282
  86. package/theme/variables/tokens/_theme_electric.scss +274 -274
  87. package/theme/variables/tokens/_theme_fresh_light_4px.scss +272 -272
  88. package/theme/variables/tokens/_theme_loveship_dark.scss +272 -272
  89. package/theme/variables/tokens/_theme_loveship_light.scss +272 -272
  90. package/theme/variables/tokens/_theme_promo.scss +272 -272
package/theme/variables/4px_grid.scss CHANGED
@@ -1,265 +1,265 @@
1
- @mixin uui-4px-grid {
2
- & {
3
- --uui-grid-unit: 8px;
4
- --uui-focus-outline-width: 2px;
5
- --uui-focus-outline-offset: 2px;
6
- --uui-focus-radius: 2px;
7
- --uui-border-radius: 8px;
8
- --uui-tab-line-width: 3px;
9
- --uui-notify-size: 6px;
10
- --uui-resize-marker-width: 12px;
11
- }
12
-
13
- .uui-size-16 {
14
- --uui-size: 16px;
15
- --uui-border-width: 1px;
16
- --uui-horizontal-gap: 4px;
17
- --uui-vertical-gap: 3px;
18
- --uui-horizontal-padding: 3px;
19
- --uui-vertical-padding: 3px;
20
- --uui-icon-size: 12px;
21
- --uui-line-height: 12px;
22
- --uui-font-size: 10px;
23
- --uui-dot-size: 4px;
24
- }
25
-
26
- .uui-size-20 {
27
- --uui-size: 20px;
28
- --uui-border-width: 1px;
29
- --uui-horizontal-gap: 8px;
30
- --uui-vertical-gap: 3px;
31
- --uui-horizontal-padding: 3px;
32
- --uui-vertical-padding: 3px;
33
- --uui-icon-size: 12px;
34
- --uui-line-height: 18px;
35
- --uui-font-size: 14px;
36
- --uui-dot-size: 8px;
37
- }
38
-
39
- .uui-size-24 {
40
- --uui-size: 24px;
41
- --uui-border-width: 1px;
42
- --uui-horizontal-gap: 8px;
43
- --uui-vertical-gap: 3px;
44
- --uui-horizontal-padding: 6px;
45
- --uui-vertical-padding: 3px;
46
- --uui-icon-size: 16px;
47
- --uui-line-height: 18px;
48
- --uui-font-size: 14px;
49
- --uui-dot-size: 10px;
50
- }
51
-
52
- .uui-size-28 {
53
- --uui-size: 28px;
54
- --uui-border-width: 1px;
55
- --uui-horizontal-gap: 8px;
56
- --uui-vertical-gap: 3px;
57
- --uui-horizontal-padding: 6px;
58
- --uui-vertical-padding: 3px;
59
- --uui-icon-size: 12px;
60
- --uui-line-height: 28px;
61
- --uui-font-size: 18px;
62
- --uui-dot-size: 12px;
63
- }
64
-
65
- .uui-size-32 {
66
- --uui-size: 32px;
67
- --uui-border-width: 1px;
68
- --uui-horizontal-gap: 4px;
69
- --uui-vertical-gap: 3px;
70
- --uui-horizontal-padding: 20px;
71
- --uui-vertical-padding: 6px;
72
- --uui-icon-size: 20px;
73
- --uui-line-height: 18px;
74
- --uui-font-size: 14px;
75
- --uui-dot-size: 8px;
76
- }
77
-
78
- .uui-size-40 {
79
- --uui-size: 40px;
80
- --uui-border-width: 1px;
81
- --uui-horizontal-gap: 4px;
82
- --uui-vertical-gap: 3px;
83
- --uui-horizontal-padding: 20px;
84
- --uui-vertical-padding: 8px;
85
- --uui-icon-size: 20px;
86
- --uui-line-height: 18px;
87
- --uui-font-size: 14px;
88
- --uui-dot-size: 12px;
89
- }
90
-
91
- .uui-size-48 {
92
- --uui-size: 48px;
93
- --uui-border-width: 1px;
94
- --uui-horizontal-gap: 4px;
95
- --uui-vertical-gap: 3px;
96
- --uui-horizontal-padding: 32px;
97
- --uui-vertical-padding: 12px;
98
- --uui-icon-size: 24px;
99
- --uui-line-height: 20px;
100
- --uui-font-size: 16px;
101
- --uui-dot-size: 12px;
102
- }
103
-
104
- .uui-size-56 {
105
- --uui-size: 56px;
106
- --uui-border-width: 1px;
107
- --uui-horizontal-gap: 4px;
108
- --uui-vertical-gap: 3px;
109
- --uui-horizontal-padding: 32px;
110
- --uui-vertical-padding: 16px;
111
- --uui-icon-size: 24px;
112
- --uui-line-height: 24px;
113
- --uui-font-size: 16px;
114
- --uui-dot-size: 12px;
115
- }
116
-
117
- .uui-size-60 {
118
- --uui-size: 60px;
119
- --uui-border-width: 1px;
120
- --uui-horizontal-gap: 6px;
121
- --uui-vertical-gap: 3px;
122
- --uui-horizontal-padding: 12px;
123
- --uui-vertical-padding: 3px;
124
- --uui-icon-size: 24px;
125
- --uui-line-height: 24px;
126
- --uui-font-size: 16px;
127
- --uui-dot-size: 12px;
128
- }
129
-
130
- .uui-button {
131
- --uui-btn-font-weight: 500;
132
-
133
- &.uui-size-48 {
134
- --uui-btn-border-radius: 12px;
135
- }
136
-
137
- .uui-caption:first-child {
138
- padding-left: 0;
139
- }
140
-
141
- .uui-caption:last-child {
142
- padding-right: 0;
143
- }
144
-
145
- &:has(.uui-icon:only-child) {
146
- &.uui-size-32 {
147
- --uui-horizontal-padding: 4px;
148
- }
149
-
150
- &.uui-size-40 {
151
- --uui-horizontal-padding: 10px;
152
- }
153
-
154
- &.uui-size-48 {
155
- --uui-horizontal-padding: 14px;
156
- }
157
- }
158
- }
159
-
160
- .uui-input-box {
161
- &.uui-size-40 {
162
- --uui-horizontal-padding: 8px;
163
- --uui-horizontal-gap: 8px;
164
- }
165
-
166
- &.uui-size-48 {
167
- --uui-horizontal-padding: 12px;
168
- --uui-horizontal-gap: 8px;
169
- }
170
- }
171
-
172
- .uui-link_button {
173
- &.uui-size-16 {
174
- --uui-horizontal-gap: 4px;
175
- --uui-icon-size: 16px;
176
- --uui-line-height: 16px;
177
- --uui-font-size: 14px;
178
- }
179
-
180
- &.uui-size-20 {
181
- --uui-horizontal-gap: 4px;
182
- --uui-icon-size: 20px;
183
- --uui-line-height: 20px;
184
- --uui-font-size: 16px;
185
- }
186
- }
187
-
188
- .uui-checkbox-container, .uui-radio-input-container {
189
- --uui-checkbox-border-radius: 4px;
190
-
191
- .uui-input-label {
192
- align-self: center;
193
- }
194
-
195
- &.uui-size-20 {
196
- --uui-size: 14px;
197
-
198
- .uui-checkbox, .uui-radioinput {
199
- margin: 3px;
200
- }
201
- }
202
-
203
- &.uui-size-24 {
204
- --uui-size: 18px;
205
- --uui-line-height: 22px;
206
- --uui-font-size: 16px;
207
-
208
- .uui-checkbox, .uui-radioinput {
209
- margin: 3px;
210
- }
211
- }
212
-
213
- &.uui-size-28 {
214
- --uui-size: 22px;
215
-
216
- .uui-checkbox, .uui-radioinput {
217
- margin: 3px;
218
- }
219
- }
220
- }
221
-
222
- .uui-tab-button {
223
- &.uui-size-48 {
224
- --uui-size: 50px;
225
- --uui-horizontal-padding: 16px;
226
- --uui-horizontal-gap: 4px;
227
- --uui-icon-size: 20px;
228
- --uui-font-size: 14px;
229
- }
230
- }
231
-
232
- .uui-count_indicator {
233
- &.uui-size-20 {
234
- --uui-horizontal-padding: 6px;
235
- --uui-line-height: 18px;
236
- --uui-font-size: 12px;
237
- }
238
-
239
- &.uui-size-24 {
240
- --uui-line-height: 22px;
241
- --uui-font-size: 14px;
242
- }
243
- }
244
-
245
- .uui-datepicker-body-wrapper {
246
- --uui-dtp_body-min-height: 310px;
247
- }
248
-
249
- .uui-badge {
250
- &.uui-size-24 {
251
- --uui-horizontal-gap: 4px;
252
- }
253
- }
254
-
255
- .uui-columns-config-modal {
256
- --uui-dt-columns_config_modal-subgroup_icon: 20px;
257
- }
258
-
259
- .uui-alert {
260
- --uui-alert-padding-v: 16px;
261
- --uui-alert-padding-h: 16px;
262
- font-size: 16px;
263
- line-height: 24px;
264
- }
265
- }
1
+ @mixin uui-4px-grid {
2
+ & {
3
+ --uui-grid-unit: 8px;
4
+ --uui-focus-outline-width: 2px;
5
+ --uui-focus-outline-offset: 2px;
6
+ --uui-focus-radius: 2px;
7
+ --uui-border-radius: 8px;
8
+ --uui-tab-line-width: 3px;
9
+ --uui-notify-size: 6px;
10
+ --uui-resize-marker-width: 12px;
11
+ }
12
+
13
+ .uui-size-16 {
14
+ --uui-size: 16px;
15
+ --uui-border-width: 1px;
16
+ --uui-horizontal-gap: 4px;
17
+ --uui-vertical-gap: 3px;
18
+ --uui-horizontal-padding: 3px;
19
+ --uui-vertical-padding: 3px;
20
+ --uui-icon-size: 12px;
21
+ --uui-line-height: 12px;
22
+ --uui-font-size: 10px;
23
+ --uui-dot-size: 4px;
24
+ }
25
+
26
+ .uui-size-20 {
27
+ --uui-size: 20px;
28
+ --uui-border-width: 1px;
29
+ --uui-horizontal-gap: 8px;
30
+ --uui-vertical-gap: 3px;
31
+ --uui-horizontal-padding: 3px;
32
+ --uui-vertical-padding: 3px;
33
+ --uui-icon-size: 12px;
34
+ --uui-line-height: 18px;
35
+ --uui-font-size: 14px;
36
+ --uui-dot-size: 8px;
37
+ }
38
+
39
+ .uui-size-24 {
40
+ --uui-size: 24px;
41
+ --uui-border-width: 1px;
42
+ --uui-horizontal-gap: 8px;
43
+ --uui-vertical-gap: 3px;
44
+ --uui-horizontal-padding: 6px;
45
+ --uui-vertical-padding: 3px;
46
+ --uui-icon-size: 16px;
47
+ --uui-line-height: 18px;
48
+ --uui-font-size: 14px;
49
+ --uui-dot-size: 10px;
50
+ }
51
+
52
+ .uui-size-28 {
53
+ --uui-size: 28px;
54
+ --uui-border-width: 1px;
55
+ --uui-horizontal-gap: 8px;
56
+ --uui-vertical-gap: 3px;
57
+ --uui-horizontal-padding: 6px;
58
+ --uui-vertical-padding: 3px;
59
+ --uui-icon-size: 12px;
60
+ --uui-line-height: 28px;
61
+ --uui-font-size: 18px;
62
+ --uui-dot-size: 12px;
63
+ }
64
+
65
+ .uui-size-32 {
66
+ --uui-size: 32px;
67
+ --uui-border-width: 1px;
68
+ --uui-horizontal-gap: 4px;
69
+ --uui-vertical-gap: 3px;
70
+ --uui-horizontal-padding: 20px;
71
+ --uui-vertical-padding: 6px;
72
+ --uui-icon-size: 20px;
73
+ --uui-line-height: 18px;
74
+ --uui-font-size: 14px;
75
+ --uui-dot-size: 8px;
76
+ }
77
+
78
+ .uui-size-40 {
79
+ --uui-size: 40px;
80
+ --uui-border-width: 1px;
81
+ --uui-horizontal-gap: 4px;
82
+ --uui-vertical-gap: 3px;
83
+ --uui-horizontal-padding: 20px;
84
+ --uui-vertical-padding: 8px;
85
+ --uui-icon-size: 20px;
86
+ --uui-line-height: 18px;
87
+ --uui-font-size: 14px;
88
+ --uui-dot-size: 12px;
89
+ }
90
+
91
+ .uui-size-48 {
92
+ --uui-size: 48px;
93
+ --uui-border-width: 1px;
94
+ --uui-horizontal-gap: 4px;
95
+ --uui-vertical-gap: 3px;
96
+ --uui-horizontal-padding: 32px;
97
+ --uui-vertical-padding: 12px;
98
+ --uui-icon-size: 24px;
99
+ --uui-line-height: 20px;
100
+ --uui-font-size: 16px;
101
+ --uui-dot-size: 12px;
102
+ }
103
+
104
+ .uui-size-56 {
105
+ --uui-size: 56px;
106
+ --uui-border-width: 1px;
107
+ --uui-horizontal-gap: 4px;
108
+ --uui-vertical-gap: 3px;
109
+ --uui-horizontal-padding: 32px;
110
+ --uui-vertical-padding: 16px;
111
+ --uui-icon-size: 24px;
112
+ --uui-line-height: 24px;
113
+ --uui-font-size: 16px;
114
+ --uui-dot-size: 12px;
115
+ }
116
+
117
+ .uui-size-60 {
118
+ --uui-size: 60px;
119
+ --uui-border-width: 1px;
120
+ --uui-horizontal-gap: 6px;
121
+ --uui-vertical-gap: 3px;
122
+ --uui-horizontal-padding: 12px;
123
+ --uui-vertical-padding: 3px;
124
+ --uui-icon-size: 24px;
125
+ --uui-line-height: 24px;
126
+ --uui-font-size: 16px;
127
+ --uui-dot-size: 12px;
128
+ }
129
+
130
+ .uui-button {
131
+ --uui-btn-font-weight: 500;
132
+
133
+ &.uui-size-48 {
134
+ --uui-btn-border-radius: 12px;
135
+ }
136
+
137
+ .uui-caption:first-child {
138
+ padding-left: 0;
139
+ }
140
+
141
+ .uui-caption:last-child {
142
+ padding-right: 0;
143
+ }
144
+
145
+ &:has(.uui-icon:only-child) {
146
+ &.uui-size-32 {
147
+ --uui-horizontal-padding: 4px;
148
+ }
149
+
150
+ &.uui-size-40 {
151
+ --uui-horizontal-padding: 10px;
152
+ }
153
+
154
+ &.uui-size-48 {
155
+ --uui-horizontal-padding: 14px;
156
+ }
157
+ }
158
+ }
159
+
160
+ .uui-input-box {
161
+ &.uui-size-40 {
162
+ --uui-horizontal-padding: 8px;
163
+ --uui-horizontal-gap: 8px;
164
+ }
165
+
166
+ &.uui-size-48 {
167
+ --uui-horizontal-padding: 12px;
168
+ --uui-horizontal-gap: 8px;
169
+ }
170
+ }
171
+
172
+ .uui-link_button {
173
+ &.uui-size-16 {
174
+ --uui-horizontal-gap: 4px;
175
+ --uui-icon-size: 16px;
176
+ --uui-line-height: 16px;
177
+ --uui-font-size: 14px;
178
+ }
179
+
180
+ &.uui-size-20 {
181
+ --uui-horizontal-gap: 4px;
182
+ --uui-icon-size: 20px;
183
+ --uui-line-height: 20px;
184
+ --uui-font-size: 16px;
185
+ }
186
+ }
187
+
188
+ .uui-checkbox-container, .uui-radio-input-container {
189
+ --uui-checkbox-border-radius: 4px;
190
+
191
+ .uui-input-label {
192
+ align-self: center;
193
+ }
194
+
195
+ &.uui-size-20 {
196
+ --uui-size: 14px;
197
+
198
+ .uui-checkbox, .uui-radioinput {
199
+ margin: 3px;
200
+ }
201
+ }
202
+
203
+ &.uui-size-24 {
204
+ --uui-size: 18px;
205
+ --uui-line-height: 22px;
206
+ --uui-font-size: 16px;
207
+
208
+ .uui-checkbox, .uui-radioinput {
209
+ margin: 3px;
210
+ }
211
+ }
212
+
213
+ &.uui-size-28 {
214
+ --uui-size: 22px;
215
+
216
+ .uui-checkbox, .uui-radioinput {
217
+ margin: 3px;
218
+ }
219
+ }
220
+ }
221
+
222
+ .uui-tab-button {
223
+ &.uui-size-48 {
224
+ --uui-size: 50px;
225
+ --uui-horizontal-padding: 16px;
226
+ --uui-horizontal-gap: 4px;
227
+ --uui-icon-size: 20px;
228
+ --uui-font-size: 14px;
229
+ }
230
+ }
231
+
232
+ .uui-count_indicator {
233
+ &.uui-size-20 {
234
+ --uui-horizontal-padding: 6px;
235
+ --uui-line-height: 18px;
236
+ --uui-font-size: 12px;
237
+ }
238
+
239
+ &.uui-size-24 {
240
+ --uui-line-height: 22px;
241
+ --uui-font-size: 14px;
242
+ }
243
+ }
244
+
245
+ .uui-datepicker-body-wrapper {
246
+ --uui-dtp_body-min-height: 310px;
247
+ }
248
+
249
+ .uui-badge {
250
+ &.uui-size-24 {
251
+ --uui-horizontal-gap: 4px;
252
+ }
253
+ }
254
+
255
+ .uui-columns-config-modal {
256
+ --uui-dt-columns_config_modal-subgroup_icon: 20px;
257
+ }
258
+
259
+ .uui-alert {
260
+ --uui-alert-padding-v: 16px;
261
+ --uui-alert-padding-h: 16px;
262
+ font-size: 16px;
263
+ line-height: 24px;
264
+ }
265
+ }