@taiga-ui/styles 5.10.0 → 5.11.0-canary.8d400ed
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/components/avatar.less +2 -0
- package/components/badge.less +30 -21
- package/components/button.less +1 -1
- package/components/chip.less +15 -9
- package/components/label.less +1 -1
- package/components/pin.less +21 -18
- package/components/textfield.less +1 -1
- package/components/toast.less +34 -5
- package/package.json +2 -2
- package/theme/variables.less +6 -0
package/components/avatar.less
CHANGED
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
display: inline-flex;
|
|
31
31
|
flex-shrink: 0;
|
|
32
32
|
inline-size: var(--t-size);
|
|
33
|
+
min-inline-size: var(--t-size);
|
|
33
34
|
block-size: var(--t-size);
|
|
34
35
|
align-items: center;
|
|
35
36
|
justify-content: center;
|
|
@@ -168,6 +169,7 @@
|
|
|
168
169
|
border-radius: 100%;
|
|
169
170
|
background: var(--t-badge);
|
|
170
171
|
transform: translate3d(calc(var(--tui-inline) * -50%), -50%, 0);
|
|
172
|
+
zoom: 1;
|
|
171
173
|
}
|
|
172
174
|
}
|
|
173
175
|
|
package/components/badge.less
CHANGED
|
@@ -17,8 +17,9 @@
|
|
|
17
17
|
* Icons, Appearance, Chip, Block
|
|
18
18
|
*/
|
|
19
19
|
[tuiBadge]:where(*&) {
|
|
20
|
+
--t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);
|
|
20
21
|
--t-icon-size: 1rem;
|
|
21
|
-
--t-padding: 0
|
|
22
|
+
--t-padding: calc(0.5rem * var(--t-scale));
|
|
22
23
|
--t-size: var(--tui-height-xs);
|
|
23
24
|
--t-margin: -0.25rem;
|
|
24
25
|
|
|
@@ -28,22 +29,23 @@
|
|
|
28
29
|
justify-content: center;
|
|
29
30
|
background: #959595;
|
|
30
31
|
color: var(--tui-background-base);
|
|
31
|
-
padding: var(--t-padding);
|
|
32
|
+
padding: 0.0625rem var(--t-padding);
|
|
32
33
|
block-size: var(--t-size);
|
|
33
|
-
min-
|
|
34
|
+
min-block-size: calc(var(--tui-lh) + 0.125rem);
|
|
35
|
+
min-inline-size: ~'max(calc(var(--tui-lh) + 0.125rem), var(--t-size))';
|
|
34
36
|
inline-size: fit-content;
|
|
35
|
-
font: var(--tui-typography-
|
|
37
|
+
font: var(--tui-typography-ui-s);
|
|
38
|
+
zoom: 1;
|
|
36
39
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
block-size: 0.375rem;
|
|
40
|
-
margin: 0;
|
|
40
|
+
@supports not (font-size: 1lh) {
|
|
41
|
+
--tui-lh: 1.2em;
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
> tui-icon,
|
|
44
45
|
&[tuiIcons]::before,
|
|
45
46
|
&[tuiIcons]::after {
|
|
46
|
-
font-size: var(--t-icon-size) !important;
|
|
47
|
+
font-size: calc(var(--t-icon-size) * var(--t-scale)) !important;
|
|
48
|
+
zoom: 1;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
&[data-appearance='negative'] {
|
|
@@ -67,22 +69,23 @@
|
|
|
67
69
|
}
|
|
68
70
|
|
|
69
71
|
&[data-size='s'] {
|
|
70
|
-
--t-padding: 0
|
|
72
|
+
--t-padding: calc(0.25rem * var(--tui-font-scale) * var(--t-scale));
|
|
71
73
|
--t-size: 1rem;
|
|
72
74
|
--t-icon-size: 0.625rem;
|
|
73
|
-
--t-margin: -0.
|
|
75
|
+
--t-margin: -0.0625rem;
|
|
74
76
|
|
|
75
77
|
font: var(--tui-typography-ui-2xs);
|
|
78
|
+
gap: 0.1875rem;
|
|
76
79
|
|
|
77
80
|
&[tuiStatus]::before {
|
|
78
81
|
inline-size: 0.25rem;
|
|
79
82
|
block-size: 0.25rem;
|
|
80
|
-
margin-inline
|
|
83
|
+
margin-inline: 0.0625rem -0.125rem;
|
|
81
84
|
}
|
|
82
85
|
}
|
|
83
86
|
|
|
84
87
|
&[data-size='m'] {
|
|
85
|
-
--t-padding: 0
|
|
88
|
+
--t-padding: calc(0.375rem * var(--tui-font-scale));
|
|
86
89
|
--t-size: 1.25rem;
|
|
87
90
|
--t-icon-size: 0.75rem;
|
|
88
91
|
--t-margin: -0.125rem;
|
|
@@ -90,15 +93,14 @@
|
|
|
90
93
|
|
|
91
94
|
&[data-size='xl'] {
|
|
92
95
|
--t-margin: -0.25rem;
|
|
93
|
-
--t-padding: 0
|
|
96
|
+
--t-padding: 0.75rem;
|
|
94
97
|
--t-size: var(--tui-height-s);
|
|
95
98
|
|
|
96
|
-
font: var(--tui-typography-
|
|
99
|
+
font: var(--tui-typography-ui-m);
|
|
97
100
|
|
|
98
101
|
&[tuiStatus]::before {
|
|
99
102
|
inline-size: 0.5rem;
|
|
100
103
|
block-size: 0.5rem;
|
|
101
|
-
margin-inline-end: -0.125rem;
|
|
102
104
|
}
|
|
103
105
|
}
|
|
104
106
|
|
|
@@ -109,15 +111,22 @@
|
|
|
109
111
|
&[tuiAppearance][data-appearance='neutral'] {
|
|
110
112
|
color: var(--tui-text-primary);
|
|
111
113
|
}
|
|
114
|
+
|
|
115
|
+
&[tuiStatus]::before {
|
|
116
|
+
inline-size: 0.375rem;
|
|
117
|
+
block-size: 0.375rem;
|
|
118
|
+
margin: 0;
|
|
119
|
+
}
|
|
112
120
|
}
|
|
113
121
|
|
|
114
|
-
img[tuiBadge]:where(*&)
|
|
122
|
+
img[tuiBadge]:where(*&),
|
|
123
|
+
tui-icon[tuiBadge]:where(*&) {
|
|
115
124
|
padding: 0;
|
|
116
125
|
inline-size: var(--t-size);
|
|
117
|
-
}
|
|
118
126
|
|
|
119
|
-
|
|
120
|
-
|
|
127
|
+
&::before {
|
|
128
|
+
.fullsize();
|
|
121
129
|
|
|
122
|
-
|
|
130
|
+
--t-margin: 0;
|
|
131
|
+
}
|
|
123
132
|
}
|
package/components/button.less
CHANGED
package/components/chip.less
CHANGED
|
@@ -20,15 +20,16 @@
|
|
|
20
20
|
--t-gap: 0.125rem;
|
|
21
21
|
--t-margin: -0.125rem;
|
|
22
22
|
--t-icon-size: 1rem;
|
|
23
|
-
--t-padding: 0.
|
|
23
|
+
--t-padding: 0.625rem;
|
|
24
24
|
--t-size: var(--tui-height-s);
|
|
25
25
|
|
|
26
26
|
.button-base();
|
|
27
27
|
|
|
28
|
-
font: var(--tui-typography-
|
|
28
|
+
font: var(--tui-typography-ui-s);
|
|
29
29
|
border-radius: var(--tui-radius-m);
|
|
30
|
-
padding: var(--t-padding);
|
|
31
|
-
|
|
30
|
+
padding: 0.125rem var(--t-padding);
|
|
31
|
+
block-size: var(--t-size);
|
|
32
|
+
min-block-size: calc(var(--tui-lh) + 0.25rem);
|
|
32
33
|
inline-size: fit-content;
|
|
33
34
|
max-inline-size: 100%;
|
|
34
35
|
isolation: isolate;
|
|
@@ -37,6 +38,10 @@
|
|
|
37
38
|
cursor: pointer;
|
|
38
39
|
});
|
|
39
40
|
|
|
41
|
+
@supports not (font-size: 1lh) {
|
|
42
|
+
--tui-lh: 1.2em;
|
|
43
|
+
}
|
|
44
|
+
|
|
40
45
|
> tui-icon,
|
|
41
46
|
&[tuiIcons]::before,
|
|
42
47
|
&[tuiIcons]::after {
|
|
@@ -54,11 +59,11 @@
|
|
|
54
59
|
&[data-size='xxs'] {
|
|
55
60
|
// StackBlitz changes "0rem" to "0" breaking calc
|
|
56
61
|
--t-gap: ~'0rem';
|
|
57
|
-
--t-padding: 0
|
|
62
|
+
--t-padding: 0.25rem;
|
|
58
63
|
--t-size: 1rem;
|
|
59
64
|
--t-icon-size: 0.75rem;
|
|
60
65
|
|
|
61
|
-
font: var(--tui-typography-
|
|
66
|
+
font: var(--tui-typography-ui-2xs);
|
|
62
67
|
border-radius: var(--tui-radius-xs);
|
|
63
68
|
|
|
64
69
|
& > [tuiIconButton] {
|
|
@@ -68,7 +73,7 @@
|
|
|
68
73
|
}
|
|
69
74
|
|
|
70
75
|
&[data-size='xs'] {
|
|
71
|
-
--t-padding: 0.
|
|
76
|
+
--t-padding: 0.375rem;
|
|
72
77
|
--t-size: var(--tui-height-xs);
|
|
73
78
|
|
|
74
79
|
border-radius: var(--tui-radius-xs);
|
|
@@ -81,10 +86,10 @@
|
|
|
81
86
|
&[data-size='m'] {
|
|
82
87
|
--t-margin: -0.375rem;
|
|
83
88
|
--t-icon-size: 1.5rem;
|
|
84
|
-
--t-padding:
|
|
89
|
+
--t-padding: 1rem;
|
|
85
90
|
--t-size: var(--tui-height-m);
|
|
86
91
|
|
|
87
|
-
font: var(--tui-typography-
|
|
92
|
+
font: var(--tui-typography-ui-m);
|
|
88
93
|
|
|
89
94
|
& > [tuiIconButton] {
|
|
90
95
|
margin: -0.75rem;
|
|
@@ -105,6 +110,7 @@
|
|
|
105
110
|
&:first-of-type {
|
|
106
111
|
flex: 1 0 30%;
|
|
107
112
|
max-inline-size: fit-content;
|
|
113
|
+
padding: 0.125rem 0;
|
|
108
114
|
}
|
|
109
115
|
|
|
110
116
|
&:last-of-type {
|
package/components/label.less
CHANGED
package/components/pin.less
CHANGED
|
@@ -14,10 +14,11 @@
|
|
|
14
14
|
* Compass
|
|
15
15
|
*/
|
|
16
16
|
[tuiPin]:where(*&) {
|
|
17
|
-
--t-
|
|
17
|
+
--t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);
|
|
18
|
+
--t-size: calc(2rem * var(--t-scale));
|
|
18
19
|
|
|
19
|
-
@bubble-width: 1.875rem;
|
|
20
|
-
@bubble-shift: translate(calc(var(--tui-inline) *
|
|
20
|
+
@bubble-width: calc(1.875rem * var(--t-scale));
|
|
21
|
+
@bubble-shift: translate(calc(var(--tui-inline) * -1 * @bubble-width), calc(-1 * @bubble-width));
|
|
21
22
|
@ground-shift: translate(calc(var(--tui-inline) * -50%), -50%);
|
|
22
23
|
|
|
23
24
|
.transition(~'min-inline-size, grid-template-columns, block-size, border, margin, font', @tui-duration-fast);
|
|
@@ -30,7 +31,7 @@
|
|
|
30
31
|
grid-template-rows: 100%;
|
|
31
32
|
grid-template-columns: var(--t-size) 1fr;
|
|
32
33
|
min-inline-size: var(--t-size);
|
|
33
|
-
max-inline-size: 11.25rem;
|
|
34
|
+
max-inline-size: calc(11.25rem * var(--t-scale));
|
|
34
35
|
block-size: var(--t-size);
|
|
35
36
|
text-align: center;
|
|
36
37
|
border-radius: 100rem;
|
|
@@ -39,7 +40,7 @@
|
|
|
39
40
|
box-sizing: border-box;
|
|
40
41
|
color: var(--tui-text-primary-on-accent-2);
|
|
41
42
|
background: var(--tui-background-accent-2);
|
|
42
|
-
box-shadow: 0 0 0 0.125rem var(--tui-background-elevation-1);
|
|
43
|
+
box-shadow: 0 0 0 calc(0.125rem * var(--t-scale)) var(--tui-background-elevation-1);
|
|
43
44
|
border: 0 solid var(--tui-background-accent-2);
|
|
44
45
|
transform: @ground-shift;
|
|
45
46
|
|
|
@@ -48,7 +49,7 @@
|
|
|
48
49
|
});
|
|
49
50
|
|
|
50
51
|
&:empty {
|
|
51
|
-
--t-size: 0.75rem;
|
|
52
|
+
--t-size: calc(0.75rem * var(--t-scale));
|
|
52
53
|
|
|
53
54
|
&::before {
|
|
54
55
|
display: none;
|
|
@@ -127,22 +128,23 @@
|
|
|
127
128
|
|
|
128
129
|
content: '';
|
|
129
130
|
position: absolute;
|
|
130
|
-
inset: 0;
|
|
131
|
+
inset: -1px 0;
|
|
131
132
|
z-index: -1;
|
|
132
133
|
inset-inline-end: -1px;
|
|
133
134
|
background: var(--tui-background-elevation-1);
|
|
134
135
|
border-radius: 100rem;
|
|
135
136
|
mask-image: radial-gradient(
|
|
136
|
-
circle closest-corner at
|
|
137
|
-
transparent calc(100% -
|
|
138
|
-
black calc(100%)
|
|
137
|
+
circle closest-corner at var(--tui-inline-start) center,
|
|
138
|
+
transparent calc(100% - 1px),
|
|
139
|
+
black calc(100% - 0.5px)
|
|
139
140
|
);
|
|
140
|
-
mask-position: calc(var(--t-size) / 2);
|
|
141
|
+
mask-position: calc(var(--tui-inline) * var(--t-size) / 2);
|
|
141
142
|
mask-repeat: no-repeat;
|
|
142
143
|
}
|
|
143
144
|
|
|
144
145
|
[tuiSubtitle] {
|
|
145
146
|
display: flex;
|
|
147
|
+
align-items: center;
|
|
146
148
|
gap: 0.125rem;
|
|
147
149
|
font: var(--tui-typography-ui-2xs);
|
|
148
150
|
color: var(--tui-text-secondary);
|
|
@@ -154,7 +156,7 @@
|
|
|
154
156
|
}
|
|
155
157
|
|
|
156
158
|
&:has(:checked) {
|
|
157
|
-
--t-size: 3.5rem;
|
|
159
|
+
--t-size: calc(3.5rem * var(--t-scale));
|
|
158
160
|
|
|
159
161
|
font: var(--tui-typography-body-l);
|
|
160
162
|
font-weight: bold;
|
|
@@ -190,14 +192,14 @@
|
|
|
190
192
|
}
|
|
191
193
|
|
|
192
194
|
&::after {
|
|
193
|
-
inset-block-start: 4.5rem;
|
|
195
|
+
inset-block-start: calc(4.5rem * var(--t-scale));
|
|
194
196
|
opacity: 1;
|
|
195
197
|
}
|
|
196
198
|
}
|
|
197
199
|
|
|
198
200
|
// TODO: Fallback until Safari 15.4
|
|
199
201
|
&._open {
|
|
200
|
-
--t-size: 3.5rem;
|
|
202
|
+
--t-size: calc(3.5rem * var(--t-scale));
|
|
201
203
|
|
|
202
204
|
font: var(--tui-typography-body-l);
|
|
203
205
|
font-weight: bold;
|
|
@@ -233,7 +235,7 @@
|
|
|
233
235
|
}
|
|
234
236
|
|
|
235
237
|
&::after {
|
|
236
|
-
inset-block-start: 4.5rem;
|
|
238
|
+
inset-block-start: calc(4.5rem * var(--t-scale));
|
|
237
239
|
opacity: 1;
|
|
238
240
|
}
|
|
239
241
|
}
|
|
@@ -244,10 +246,10 @@
|
|
|
244
246
|
content: '';
|
|
245
247
|
position: absolute;
|
|
246
248
|
z-index: -1;
|
|
247
|
-
inset-block: 50% -0.625rem;
|
|
248
|
-
inset-inline: 50% -0.25rem;
|
|
249
|
+
inset-block: 50% calc(-0.625rem * var(--t-scale));
|
|
250
|
+
inset-inline: 50% calc(-0.25rem * var(--t-scale));
|
|
249
251
|
box-sizing: border-box;
|
|
250
|
-
border-width: 2.2rem @bubble-width;
|
|
252
|
+
border-width: calc(2.2rem * var(--t-scale)) @bubble-width;
|
|
251
253
|
border-style: solid;
|
|
252
254
|
border-color: inherit;
|
|
253
255
|
opacity: 0;
|
|
@@ -256,6 +258,7 @@
|
|
|
256
258
|
pointer-events: none;
|
|
257
259
|
mask-image: url('data:image/svg+xml,<svg width="60" height="66" viewBox="0 0 60 66" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z" /></svg>');
|
|
258
260
|
mask-repeat: no-repeat;
|
|
261
|
+
mask-size: 100%;
|
|
259
262
|
}
|
|
260
263
|
|
|
261
264
|
&::after {
|
package/components/toast.less
CHANGED
|
@@ -3,10 +3,12 @@
|
|
|
3
3
|
[tuiToast]:where(*&) {
|
|
4
4
|
.transition(transform);
|
|
5
5
|
|
|
6
|
-
display:
|
|
6
|
+
display: grid;
|
|
7
|
+
grid-auto-flow: column;
|
|
7
8
|
grid-row: 1 / span 2;
|
|
9
|
+
grid-template-rows: 1fr auto;
|
|
8
10
|
box-sizing: border-box;
|
|
9
|
-
gap: 0.75rem;
|
|
11
|
+
gap: 0 0.75rem;
|
|
10
12
|
color: var(--tui-text-primary);
|
|
11
13
|
background: var(--tui-background-elevation-3);
|
|
12
14
|
min-block-size: 3.5rem;
|
|
@@ -28,11 +30,27 @@
|
|
|
28
30
|
cursor: pointer;
|
|
29
31
|
});
|
|
30
32
|
|
|
31
|
-
> *:not(tui-shrink-wrap)
|
|
33
|
+
> *:not(tui-shrink-wrap) {
|
|
34
|
+
max-inline-size: 50%;
|
|
35
|
+
margin: 0 -0.25rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
> * {
|
|
39
|
+
grid-row: 1;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
> [tuiButtonX],
|
|
43
|
+
> [tuiIconButton],
|
|
44
|
+
> :first-child:not(tui-shrink-wrap, [tuiButton]) {
|
|
45
|
+
grid-row: span 2;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
> tui-icon:not([tuiBadge]),
|
|
32
49
|
&::after,
|
|
33
50
|
&::before {
|
|
34
|
-
|
|
51
|
+
min-inline-size: 1em;
|
|
35
52
|
margin: 0 -0.25rem;
|
|
53
|
+
grid-row: span 2;
|
|
36
54
|
}
|
|
37
55
|
|
|
38
56
|
&::after {
|
|
@@ -40,7 +58,18 @@
|
|
|
40
58
|
color: var(--tui-text-tertiary);
|
|
41
59
|
}
|
|
42
60
|
|
|
43
|
-
[tuiAvatar] {
|
|
61
|
+
> [tuiAvatar] {
|
|
44
62
|
margin-inline-end: 0;
|
|
45
63
|
}
|
|
64
|
+
|
|
65
|
+
> tui-loader,
|
|
66
|
+
> [tuiButton] {
|
|
67
|
+
inline-size: fit-content;
|
|
68
|
+
min-inline-size: fit-content;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&._rearranged > [tuiButton] {
|
|
72
|
+
grid-row: 2;
|
|
73
|
+
margin: 0.75rem 0 0;
|
|
74
|
+
}
|
|
46
75
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiga-ui/styles",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.11.0-canary.8d400ed",
|
|
4
4
|
"description": "Framework-agnostic package with styles for Taiga UI",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -25,6 +25,6 @@
|
|
|
25
25
|
"./*": "./*"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@taiga-ui/design-tokens": "~0.
|
|
28
|
+
"@taiga-ui/design-tokens": "~0.305.0"
|
|
29
29
|
}
|
|
30
30
|
}
|
package/theme/variables.less
CHANGED
|
@@ -54,6 +54,12 @@
|
|
|
54
54
|
@supports (font-size: 1lh) {
|
|
55
55
|
--tui-lh: 1lh;
|
|
56
56
|
}
|
|
57
|
+
|
|
58
|
+
// TODO: drop in v6
|
|
59
|
+
--tui-duration-slowest: calc(var(--tui-duration) / 0.429);
|
|
60
|
+
--tui-duration-slow: calc(var(--tui-duration) / 0.6);
|
|
61
|
+
--tui-duration-fast: calc(var(--tui-duration) / 2);
|
|
62
|
+
--tui-duration-fastest: calc(var(--tui-duration) / 4);
|
|
57
63
|
}
|
|
58
64
|
|
|
59
65
|
[dir='rtl'] {
|