@epam/assets 5.9.4 → 5.10.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.
- package/css/theme/theme_electric.css +238 -175
- package/css/theme/theme_electric.css.map +1 -1
- package/css/theme/theme_loveship.css +236 -173
- package/css/theme/theme_loveship.css.map +1 -1
- package/css/theme/theme_loveship_dark.css +238 -175
- package/css/theme/theme_loveship_dark.css.map +1 -1
- package/css/theme/theme_promo.css +234 -171
- package/css/theme/theme_promo.css.map +1 -1
- package/css/theme/theme_vanilla_thunder.css +83 -21
- package/css/theme/theme_vanilla_thunder.css.map +1 -1
- package/package.json +2 -2
- package/scss/loveship/typography.scss +2 -2
- package/theme/theme_6px.scss +112 -38
- package/theme/theme_electric.scss +9 -12
- package/theme/theme_loveship.scss +9 -9
- package/theme/theme_loveship_dark.scss +10 -11
- package/theme/theme_promo.scss +9 -10
- package/theme/theme_vanilla_thunder.scss +6 -2
package/theme/theme_6px.scss
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
@mixin uui-6px-grid {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
+
}
|
|
9
11
|
|
|
10
12
|
.uui-size-12 {
|
|
11
13
|
--uui-size: 12px;
|
|
@@ -17,7 +19,7 @@
|
|
|
17
19
|
--uui-icon-size: 12px;
|
|
18
20
|
--uui-line-height: 12px;
|
|
19
21
|
--uui-font-size: 12px;
|
|
20
|
-
|
|
22
|
+
--uui-dot-size: 6px;
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
.uui-size-18 {
|
|
@@ -30,7 +32,7 @@
|
|
|
30
32
|
--uui-icon-size: 12px;
|
|
31
33
|
--uui-line-height: 12px;
|
|
32
34
|
--uui-font-size: 10px;
|
|
33
|
-
|
|
35
|
+
--uui-dot-size: 6px;
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
.uui-size-24 {
|
|
@@ -43,6 +45,7 @@
|
|
|
43
45
|
--uui-icon-size: 12px;
|
|
44
46
|
--uui-line-height: 18px;
|
|
45
47
|
--uui-font-size: 12px;
|
|
48
|
+
--uui-dot-size: 8px;
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
.uui-size-30 {
|
|
@@ -55,6 +58,7 @@
|
|
|
55
58
|
--uui-icon-size: 18px;
|
|
56
59
|
--uui-line-height: 18px;
|
|
57
60
|
--uui-font-size: 14px;
|
|
61
|
+
--uui-dot-size: 8px;
|
|
58
62
|
}
|
|
59
63
|
|
|
60
64
|
.uui-size-36 {
|
|
@@ -63,10 +67,11 @@
|
|
|
63
67
|
--uui-horizontal-gap: 6px;
|
|
64
68
|
--uui-vertical-gap: 3px;
|
|
65
69
|
--uui-horizontal-padding: 6px;
|
|
66
|
-
--uui-vertical-padding: 3px;
|
|
70
|
+
--uui-vertical-padding: 3px; // update paddings change C:\Users\Siarhei_Dzeraviannik\WebstormProjects\UUI\uui\components\pickers\PickerToggler.module.scss
|
|
67
71
|
--uui-icon-size: 18px;
|
|
68
72
|
--uui-line-height: 18px;
|
|
69
73
|
--uui-font-size: 14px;
|
|
74
|
+
--uui-dot-size: 8px;
|
|
70
75
|
}
|
|
71
76
|
|
|
72
77
|
.uui-size-42 {
|
|
@@ -79,6 +84,7 @@
|
|
|
79
84
|
--uui-icon-size: 18px;
|
|
80
85
|
--uui-line-height: 24px;
|
|
81
86
|
--uui-font-size: 16px;
|
|
87
|
+
--uui-dot-size: 10px;
|
|
82
88
|
}
|
|
83
89
|
|
|
84
90
|
.uui-size-48 {
|
|
@@ -91,6 +97,7 @@
|
|
|
91
97
|
--uui-icon-size: 24px;
|
|
92
98
|
--uui-line-height: 24px;
|
|
93
99
|
--uui-font-size: 16px;
|
|
100
|
+
--uui-dot-size: 12px;
|
|
94
101
|
}
|
|
95
102
|
|
|
96
103
|
.uui-size-60 {
|
|
@@ -103,6 +110,7 @@
|
|
|
103
110
|
--uui-icon-size: 24px;
|
|
104
111
|
--uui-line-height: 24px;
|
|
105
112
|
--uui-font-size: 20px;
|
|
113
|
+
--uui-dot-size: 12px;
|
|
106
114
|
}
|
|
107
115
|
|
|
108
116
|
.uui-input-box {
|
|
@@ -113,11 +121,19 @@
|
|
|
113
121
|
&.uui-size-48 {
|
|
114
122
|
--uui-horizontal-padding: 6px;
|
|
115
123
|
}
|
|
124
|
+
|
|
125
|
+
&.uui-textarea {
|
|
126
|
+
--uui-horizontal-padding: 12px;
|
|
127
|
+
|
|
128
|
+
&.uui-size-24 {
|
|
129
|
+
--uui-line-height: 12px;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
116
132
|
}
|
|
117
133
|
|
|
118
134
|
.uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
|
|
119
|
-
--uui-horizontal-padding:
|
|
120
|
-
--uui-horizontal-gap:
|
|
135
|
+
--uui-horizontal-padding: 6px;
|
|
136
|
+
--uui-horizontal-gap: 3px;
|
|
121
137
|
--uui-icon-size: 18px;
|
|
122
138
|
--uui-line-height: 18px;
|
|
123
139
|
--uui-font-size: 14px;
|
|
@@ -161,24 +177,6 @@
|
|
|
161
177
|
}
|
|
162
178
|
}
|
|
163
179
|
|
|
164
|
-
.uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36, .uui-size-42) {
|
|
165
|
-
.uui-tag.uui-size-inherit {
|
|
166
|
-
--uui-horizontal-gap: 3px;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36) {
|
|
171
|
-
.uui-tag.uui-size-inherit {
|
|
172
|
-
--uui-horizontal-padding: 3px;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.uui-size-48.uui-picker_toggler {
|
|
177
|
-
.uui-tag.uui-size-inherit {
|
|
178
|
-
--uui-horizontal-padding: 6px;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
180
|
.uui-checkbox-container, .uui-radio-input-container {
|
|
183
181
|
&.uui-size-18 {
|
|
184
182
|
--uui-horizontal-gap: 12px;
|
|
@@ -201,16 +199,92 @@
|
|
|
201
199
|
}
|
|
202
200
|
}
|
|
203
201
|
|
|
204
|
-
.uui-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
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
|
+
}
|
|
208
212
|
|
|
213
|
+
&.uui-size-48 {
|
|
214
|
+
--uui-icon-size: 18px;
|
|
215
|
+
--uui-line-height: 18px;
|
|
216
|
+
--uui-font-size: 14px;
|
|
217
|
+
}
|
|
209
218
|
}
|
|
210
219
|
|
|
211
|
-
.uui-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
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
|
+
}
|
|
215
289
|
}
|
|
216
290
|
}
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
|
|
7
7
|
|
|
8
8
|
@mixin theme-electric {
|
|
9
|
-
@include tokens.theme-tokens;
|
|
10
9
|
--uui-font: 'Source Sans Pro', sans-serif;
|
|
11
10
|
--uui-font-mono: 'Roboto Mono', monospace;
|
|
12
11
|
|
|
@@ -20,17 +19,15 @@
|
|
|
20
19
|
--gradient-5: linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
|
|
21
20
|
|
|
22
21
|
/* shadows */
|
|
23
|
-
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.
|
|
24
|
-
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.
|
|
25
|
-
--uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px
|
|
26
|
-
|
|
27
|
-
--uui-border-radius: 3px;
|
|
22
|
+
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);
|
|
23
|
+
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
|
|
24
|
+
--uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);
|
|
28
25
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
/* ------------------------------------ */
|
|
26
|
+
@include tokens.theme-tokens;
|
|
32
27
|
|
|
33
|
-
|
|
28
|
+
& {
|
|
29
|
+
--uui-border-radius: 3px;
|
|
30
|
+
}
|
|
34
31
|
|
|
35
32
|
/* begin color classes */
|
|
36
33
|
.uui-color-fire {
|
|
@@ -319,7 +316,7 @@
|
|
|
319
316
|
/* Status Indicator */
|
|
320
317
|
|
|
321
318
|
.uui-status_indicator.uui-color-white.uui-fill-outline {
|
|
322
|
-
.uui-
|
|
319
|
+
.uui-status_indicator-dot {
|
|
323
320
|
background-color: color-mix(in srgb, var(--white) 20%, transparent);
|
|
324
321
|
border: 1px solid var(--uui-neutral-40);
|
|
325
322
|
}
|
|
@@ -513,6 +510,6 @@
|
|
|
513
510
|
}
|
|
514
511
|
|
|
515
512
|
.uui-theme-electric {
|
|
516
|
-
@include uui-6px-grid();
|
|
517
513
|
@include theme-electric();
|
|
514
|
+
@include uui-6px-grid();
|
|
518
515
|
}
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
|
|
6
6
|
|
|
7
7
|
@mixin theme-loveship {
|
|
8
|
-
@include tokens.theme-tokens;
|
|
9
8
|
--uui-font: 'Source Sans Pro', sans-serif;
|
|
10
9
|
--uui-font-mono: 'Roboto Mono', monospace;
|
|
11
10
|
|
|
@@ -19,15 +18,16 @@
|
|
|
19
18
|
/* end Loveship old colors */
|
|
20
19
|
|
|
21
20
|
/* shadows */
|
|
22
|
-
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.
|
|
23
|
-
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.
|
|
24
|
-
--uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px
|
|
21
|
+
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);
|
|
22
|
+
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
|
|
23
|
+
--uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);
|
|
25
24
|
|
|
26
|
-
|
|
25
|
+
@include tokens.theme-tokens;
|
|
27
26
|
|
|
28
|
-
/* core variables end */
|
|
29
27
|
|
|
30
|
-
|
|
28
|
+
& {
|
|
29
|
+
--uui-border-radius: 3px;
|
|
30
|
+
}
|
|
31
31
|
|
|
32
32
|
/* begin color classes */
|
|
33
33
|
|
|
@@ -357,7 +357,7 @@
|
|
|
357
357
|
/* Status Indicator */
|
|
358
358
|
|
|
359
359
|
.uui-status_indicator.uui-color-white.uui-fill-outline {
|
|
360
|
-
.uui-
|
|
360
|
+
.uui-status_indicator-dot {
|
|
361
361
|
background-color: color-mix(in srgb, var(--white) 20%, transparent);
|
|
362
362
|
border: 1px solid var(--uui-neutral-40);
|
|
363
363
|
}
|
|
@@ -588,6 +588,6 @@
|
|
|
588
588
|
}
|
|
589
589
|
|
|
590
590
|
.uui-theme-loveship {
|
|
591
|
-
@include uui-6px-grid();
|
|
592
591
|
@include theme-loveship();
|
|
592
|
+
@include uui-6px-grid();
|
|
593
593
|
}
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
|
|
6
6
|
|
|
7
7
|
@mixin theme-loveship_dark {
|
|
8
|
-
@include tokens.theme-tokens;
|
|
9
8
|
--uui-font: 'Source Sans Pro', sans-serif;
|
|
10
9
|
--uui-font-mono: 'Roboto Mono', monospace;
|
|
11
10
|
|
|
@@ -14,11 +13,11 @@
|
|
|
14
13
|
--uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
|
|
15
14
|
--uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56);
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
/* core variables end */
|
|
16
|
+
@include tokens.theme-tokens;
|
|
20
17
|
|
|
21
|
-
|
|
18
|
+
& {
|
|
19
|
+
--uui-border-radius: 3px;
|
|
20
|
+
}
|
|
22
21
|
|
|
23
22
|
/* begin color classes */
|
|
24
23
|
|
|
@@ -498,7 +497,7 @@
|
|
|
498
497
|
/* Status Indicator */
|
|
499
498
|
|
|
500
499
|
.uui-status_indicator.uui-color-white.uui-fill-outline {
|
|
501
|
-
.uui-
|
|
500
|
+
.uui-status_indicator-dot {
|
|
502
501
|
background-color: color-mix(in srgb, var(--white) 20%, transparent);
|
|
503
502
|
border: 1px solid var(--white);
|
|
504
503
|
}
|
|
@@ -506,12 +505,12 @@
|
|
|
506
505
|
|
|
507
506
|
.uui-status_indicator.uui-color-night600,
|
|
508
507
|
.uui-status_indicator.uui-color-neutral {
|
|
509
|
-
.uui-
|
|
508
|
+
.uui-status_indicator-dot {
|
|
510
509
|
background-color: var(--uui-neutral-30);
|
|
511
510
|
}
|
|
512
511
|
|
|
513
512
|
&.uui-fill-outline {
|
|
514
|
-
.uui-
|
|
513
|
+
.uui-status_indicator-dot {
|
|
515
514
|
background-color: color-mix(in srgb, var(--uui-neutral-30) 20%, transparent);
|
|
516
515
|
border: 1px solid var(--uui-neutral-30);
|
|
517
516
|
}
|
|
@@ -718,8 +717,8 @@
|
|
|
718
717
|
|
|
719
718
|
/* PickerInput */
|
|
720
719
|
|
|
721
|
-
.uui-
|
|
722
|
-
--uui-
|
|
720
|
+
.uui-picker_input-body {
|
|
721
|
+
--uui-picker_input-selected_mark: var(--uui-info-60);
|
|
723
722
|
}
|
|
724
723
|
|
|
725
724
|
/* fonts */
|
|
@@ -818,6 +817,6 @@
|
|
|
818
817
|
}
|
|
819
818
|
|
|
820
819
|
.uui-theme-loveship_dark {
|
|
821
|
-
@include uui-6px-grid();
|
|
822
820
|
@include theme-loveship_dark();
|
|
821
|
+
@include uui-6px-grid();
|
|
823
822
|
}
|
package/theme/theme_promo.scss
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
|
|
6
6
|
|
|
7
7
|
@mixin theme-promo {
|
|
8
|
-
@include tokens.theme-tokens;
|
|
9
8
|
--uui-font: 'Source Sans Pro', sans-serif;
|
|
10
9
|
--uui-font-mono: 'Roboto Mono', monospace;
|
|
11
10
|
|
|
@@ -14,15 +13,15 @@
|
|
|
14
13
|
--font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
|
|
15
14
|
|
|
16
15
|
/* shadows */
|
|
17
|
-
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.
|
|
18
|
-
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.
|
|
19
|
-
--uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px
|
|
20
|
-
|
|
21
|
-
--uui-border-radius: 0;
|
|
16
|
+
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);
|
|
17
|
+
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
|
|
18
|
+
--uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);
|
|
22
19
|
|
|
23
|
-
|
|
20
|
+
@include tokens.theme-tokens;
|
|
24
21
|
|
|
25
|
-
|
|
22
|
+
& {
|
|
23
|
+
--uui-border-radius: 0;
|
|
24
|
+
}
|
|
26
25
|
|
|
27
26
|
/* begin color classes */
|
|
28
27
|
|
|
@@ -353,7 +352,7 @@
|
|
|
353
352
|
/* Status Indicator */
|
|
354
353
|
|
|
355
354
|
.uui-status_indicator.uui-color-white.uui-fill-outline {
|
|
356
|
-
.uui-
|
|
355
|
+
.uui-status_indicator-dot {
|
|
357
356
|
background-color: color-mix(in srgb, var(--white) 20%, transparent);
|
|
358
357
|
border: 1px solid var(--uui-neutral-40);
|
|
359
358
|
}
|
|
@@ -601,7 +600,7 @@
|
|
|
601
600
|
}
|
|
602
601
|
|
|
603
602
|
.uui-theme-promo {
|
|
604
|
-
@include uui-6px-grid();
|
|
605
603
|
@include theme-promo();
|
|
604
|
+
@include uui-6px-grid();
|
|
606
605
|
}
|
|
607
606
|
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
/* Name convention */
|
|
4
4
|
/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
|
|
5
5
|
.uui-theme-vanilla_thunder {
|
|
6
|
-
@include uui-6px-grid();
|
|
7
6
|
--uui-font: var(--font-inter);
|
|
8
7
|
--uui-font-mono: 'Roboto Mono', monospace;
|
|
9
8
|
|
|
@@ -210,7 +209,11 @@
|
|
|
210
209
|
|
|
211
210
|
/* core variables end */
|
|
212
211
|
|
|
213
|
-
/*
|
|
212
|
+
/* size theme start */
|
|
213
|
+
|
|
214
|
+
@include uui-6px-grid();
|
|
215
|
+
|
|
216
|
+
/* size theme end */
|
|
214
217
|
|
|
215
218
|
/* begin color classes */
|
|
216
219
|
|
|
@@ -326,6 +329,7 @@
|
|
|
326
329
|
|
|
327
330
|
.uui-main_menu {
|
|
328
331
|
--uui-main_menu-text: var(--chromatic-500);
|
|
332
|
+
--uui-main_menu-text-hover: var(--chromatic-500);
|
|
329
333
|
--uui-main_menu-text-active: var(--uui-info-50);
|
|
330
334
|
--uui-main_menu-bg: var(--uui-info-5);
|
|
331
335
|
--uui-main_menu-hover: var(--uui-neutral-0);
|