@itwin/itwinui-css 1.0.0-dev.1 → 1.0.0-dev.11
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/alert.css +78 -79
- package/css/all.css +1824 -2303
- package/css/anchor.css +3 -3
- package/css/avatar.css +46 -46
- package/css/backdrop.css +6 -4
- package/css/badge.css +8 -8
- package/css/blockquote.css +6 -6
- package/css/breadcrumbs.css +57 -52
- package/css/button.css +93 -90
- package/css/carousel.css +15 -15
- package/css/checkbox.css +23 -21
- package/css/code.css +14 -14
- package/css/color-picker.css +36 -39
- package/css/date-picker.css +59 -88
- package/css/dialog.css +31 -32
- package/css/expandable-block.css +33 -43
- package/css/fieldset.css +7 -7
- package/css/file-upload.css +13 -12
- package/css/footer.css +11 -11
- package/css/global.css +50 -617
- package/css/header.css +52 -51
- package/css/information-panel.css +33 -32
- package/css/input.css +56 -55
- package/css/keyboard.css +6 -10
- package/css/location-marker.css +26 -18
- package/css/menu.css +35 -28
- package/css/non-ideal-state.css +12 -12
- package/css/progress-indicator.css +33 -35
- package/css/radio-tile.css +33 -41
- package/css/radio.css +23 -21
- package/css/select.css +85 -81
- package/css/side-navigation.css +32 -31
- package/css/skip-to-content.css +11 -11
- package/css/slider.css +75 -32
- package/css/stepper.css +15 -15
- package/css/surface.css +2 -2
- package/css/table.css +180 -144
- package/css/tabs.css +54 -47
- package/css/tag.css +24 -25
- package/css/text.css +24 -24
- package/css/tile.css +135 -127
- package/css/time-picker.css +16 -14
- package/css/toast.css +47 -47
- package/css/toggle-switch.css +26 -26
- package/css/tooltip.css +6 -10
- package/css/tree.css +24 -22
- package/css/utils.css +162 -147
- package/css/workflow-diagram.css +8 -8
- package/package.json +2 -2
package/css/utils.css
CHANGED
|
@@ -5,47 +5,47 @@
|
|
|
5
5
|
[data-iui-icon-size=s]{
|
|
6
6
|
display:flex;
|
|
7
7
|
flex-shrink:0;
|
|
8
|
-
width:
|
|
9
|
-
height:
|
|
8
|
+
width:var(--iui-size-s);
|
|
9
|
+
height:var(--iui-size-s);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
[data-iui-icon-size=m]{
|
|
13
13
|
display:flex;
|
|
14
14
|
flex-shrink:0;
|
|
15
|
-
width:
|
|
16
|
-
height:
|
|
15
|
+
width:var(--iui-size-m);
|
|
16
|
+
height:var(--iui-size-m);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
[data-iui-icon-size=l]{
|
|
20
20
|
display:flex;
|
|
21
21
|
flex-shrink:0;
|
|
22
|
-
width:
|
|
23
|
-
height:
|
|
22
|
+
width:calc(1.5 * var(--iui-size-m));
|
|
23
|
+
height:calc(1.5 * var(--iui-size-m));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
[data-iui-icon-size=xl]{
|
|
27
27
|
display:flex;
|
|
28
28
|
flex-shrink:0;
|
|
29
|
-
width:
|
|
30
|
-
height:
|
|
29
|
+
width:var(--iui-size-xl);
|
|
30
|
+
height:var(--iui-size-xl);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
[data-iui-icon-size="2xl"]{
|
|
34
34
|
display:flex;
|
|
35
35
|
flex-shrink:0;
|
|
36
|
-
width:
|
|
37
|
-
height:
|
|
36
|
+
width:calc(3 * var(--iui-size-m));
|
|
37
|
+
height:calc(3 * var(--iui-size-m));
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
[data-iui-icon-size="3xl"]{
|
|
41
41
|
display:flex;
|
|
42
42
|
flex-shrink:0;
|
|
43
|
-
width:
|
|
44
|
-
height:
|
|
43
|
+
width:var(--iui-size-2xl);
|
|
44
|
+
height:var(--iui-size-2xl);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
[data-iui-icon-color=default]{
|
|
48
|
-
fill:var(--iui-
|
|
48
|
+
fill:var(--iui-color-foreground-4);
|
|
49
49
|
}
|
|
50
50
|
@media (forced-colors: active){
|
|
51
51
|
[data-iui-icon-color=default]{
|
|
@@ -54,19 +54,19 @@
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
[data-iui-icon-color=informational]{
|
|
57
|
-
fill:var(--iui-
|
|
57
|
+
fill:var(--iui-color-foreground-primary);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
[data-iui-icon-color=positive]{
|
|
61
|
-
fill:var(--iui-
|
|
61
|
+
fill:var(--iui-color-foreground-positive);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
[data-iui-icon-color=warning]{
|
|
65
|
-
fill:var(--iui-
|
|
65
|
+
fill:var(--iui-color-foreground-warning);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
[data-iui-icon-color=negative]{
|
|
69
|
-
fill:var(--iui-
|
|
69
|
+
fill:var(--iui-color-foreground-negative);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
.iui-input-container{
|
|
@@ -79,16 +79,16 @@
|
|
|
79
79
|
cursor:default;
|
|
80
80
|
}
|
|
81
81
|
.iui-input-container.iui-inline-icon > .iui-input{
|
|
82
|
-
padding-right:
|
|
82
|
+
padding-right:var(--iui-component-height);
|
|
83
83
|
}
|
|
84
84
|
.iui-input-container.iui-inline-icon > .iui-input:last-child{
|
|
85
|
-
padding-right:
|
|
85
|
+
padding-right:var(--iui-size-s);
|
|
86
86
|
}
|
|
87
87
|
.iui-input-container.iui-with-message{
|
|
88
88
|
grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
|
|
89
89
|
}
|
|
90
90
|
.iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
|
|
91
|
-
margin-top:
|
|
91
|
+
margin-top:var(--iui-size-2xs);
|
|
92
92
|
}
|
|
93
93
|
.iui-input-container .iui-input,
|
|
94
94
|
.iui-input-container .iui-input-with-icon,
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
grid-area:inputs;
|
|
97
97
|
}
|
|
98
98
|
.iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
|
|
99
|
-
padding:
|
|
99
|
+
padding:calc(var(--iui-size-s) * 0.5) 0;
|
|
100
100
|
}
|
|
101
101
|
label.iui-input-container{
|
|
102
102
|
cursor:pointer;
|
|
@@ -110,7 +110,7 @@ label.iui-input-container.iui-disabled{
|
|
|
110
110
|
}
|
|
111
111
|
.iui-input-container .iui-checkbox-wrapper,
|
|
112
112
|
.iui-input-container .iui-radio-wrapper{
|
|
113
|
-
min-height:
|
|
113
|
+
min-height:var(--iui-size-l);
|
|
114
114
|
}
|
|
115
115
|
.iui-input-container.iui-inline-label{
|
|
116
116
|
grid-template:"label inputs icon"/auto 1fr auto;
|
|
@@ -120,28 +120,28 @@ label.iui-input-container.iui-disabled{
|
|
|
120
120
|
}
|
|
121
121
|
.iui-input-container.iui-inline-label > .iui-input-group{
|
|
122
122
|
display:flex;
|
|
123
|
-
gap:
|
|
123
|
+
gap:var(--iui-size-m);
|
|
124
124
|
}
|
|
125
125
|
.iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
|
|
126
|
-
margin-right:
|
|
126
|
+
margin-right:var(--iui-size-m);
|
|
127
127
|
}
|
|
128
128
|
.iui-input-container > .iui-label{
|
|
129
|
-
font-weight:
|
|
130
|
-
margin-bottom:
|
|
129
|
+
font-weight:var(--iui-font-weight-semibold);
|
|
130
|
+
margin-bottom:var(--iui-size-2xs);
|
|
131
131
|
grid-area:label;
|
|
132
132
|
align-self:center;
|
|
133
133
|
}
|
|
134
134
|
.iui-input-container > .iui-label.iui-required::after{
|
|
135
135
|
content:"*";
|
|
136
|
-
margin-left:
|
|
136
|
+
margin-left:var(--iui-size-2xs);
|
|
137
137
|
color:var(--iui-color-foreground-negative);
|
|
138
138
|
}
|
|
139
139
|
.iui-input-container .iui-input-icon{
|
|
140
140
|
display:flex;
|
|
141
141
|
flex-shrink:0;
|
|
142
|
-
width:
|
|
143
|
-
height:
|
|
144
|
-
fill:var(--iui-
|
|
142
|
+
width:var(--iui-size-m);
|
|
143
|
+
height:var(--iui-size-m);
|
|
144
|
+
fill:var(--iui-color-foreground-4);
|
|
145
145
|
grid-area:icon;
|
|
146
146
|
align-self:center;
|
|
147
147
|
}
|
|
@@ -151,13 +151,13 @@ label.iui-input-container.iui-disabled{
|
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
.iui-input-container .iui-input-icon:not(:last-child){
|
|
154
|
-
margin-right:
|
|
154
|
+
margin-right:var(--iui-size-2xs);
|
|
155
155
|
}
|
|
156
156
|
.iui-input-container .iui-message{
|
|
157
|
-
font-size:
|
|
157
|
+
font-size:var(--iui-font-size-0);
|
|
158
158
|
grid-area:message;
|
|
159
|
-
margin-top:
|
|
160
|
-
color:var(--iui-
|
|
159
|
+
margin-top:var(--iui-size-2xs);
|
|
160
|
+
color:var(--iui-color-foreground-4);
|
|
161
161
|
}
|
|
162
162
|
.iui-input-container .iui-message a{
|
|
163
163
|
-webkit-user-select:none;
|
|
@@ -168,14 +168,14 @@ label.iui-input-container.iui-disabled{
|
|
|
168
168
|
.iui-input-container.iui-inline-icon > .iui-input-icon{
|
|
169
169
|
grid-area:inputs;
|
|
170
170
|
justify-self:end;
|
|
171
|
-
margin:0
|
|
171
|
+
margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
|
|
172
172
|
position:relative;
|
|
173
173
|
}
|
|
174
174
|
.iui-input-container.iui-inline-icon > .iui-input-icon svg{
|
|
175
175
|
display:flex;
|
|
176
176
|
flex-shrink:0;
|
|
177
|
-
width:
|
|
178
|
-
height:
|
|
177
|
+
width:var(--iui-size-m);
|
|
178
|
+
height:var(--iui-size-m);
|
|
179
179
|
}
|
|
180
180
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
|
|
181
181
|
height:100%;
|
|
@@ -190,12 +190,14 @@ label.iui-input-container.iui-disabled{
|
|
|
190
190
|
}
|
|
191
191
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
|
|
192
192
|
align-items:center;
|
|
193
|
-
height:
|
|
193
|
+
height:calc(100% - 4px);
|
|
194
194
|
margin-right:2px;
|
|
195
|
-
|
|
195
|
+
border-radius:var(--iui-border-radius-1);
|
|
196
|
+
padding-inline:calc(var(--iui-size-xs) + 1px);
|
|
196
197
|
cursor:pointer;
|
|
198
|
+
box-sizing:content-box;
|
|
197
199
|
background-position:center;
|
|
198
|
-
transition:background
|
|
200
|
+
transition:background var(--iui-duration-2) ease-out;
|
|
199
201
|
}
|
|
200
202
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
|
|
201
203
|
background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
|
|
@@ -203,11 +205,11 @@ label.iui-input-container.iui-disabled{
|
|
|
203
205
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
|
|
204
206
|
background-color:var(--iui-color-background-2);
|
|
205
207
|
background-size:100%;
|
|
206
|
-
transition:background
|
|
208
|
+
transition:background var(--iui-duration-0);
|
|
207
209
|
}
|
|
208
210
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
|
|
209
|
-
fill:var(--iui-
|
|
210
|
-
transition:transform
|
|
211
|
+
fill:var(--iui-color-foreground-2);
|
|
212
|
+
transition:transform var(--iui-duration-1) ease-out;
|
|
211
213
|
}
|
|
212
214
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
|
|
213
215
|
transform:rotate(180deg);
|
|
@@ -216,20 +218,20 @@ label.iui-input-container.iui-disabled{
|
|
|
216
218
|
cursor:not-allowed;
|
|
217
219
|
}
|
|
218
220
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
|
|
219
|
-
fill:var(--iui-
|
|
221
|
+
fill:var(--iui-color-foreground-5);
|
|
220
222
|
}
|
|
221
223
|
.iui-input-container.iui-inline-label > .iui-label{
|
|
222
|
-
margin:0
|
|
224
|
+
margin:0 var(--iui-size-m) 0 0;
|
|
223
225
|
}
|
|
224
226
|
.iui-input-container.iui-inline-label > .iui-label.iui-required{
|
|
225
|
-
margin-right:
|
|
227
|
+
margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
|
|
226
228
|
}
|
|
227
229
|
.iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
|
|
228
|
-
background-color:
|
|
230
|
+
background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
|
|
229
231
|
}
|
|
230
232
|
.iui-input-container.iui-positive::selection,
|
|
231
233
|
.iui-input-container.iui-positive *::selection{
|
|
232
|
-
background-color:
|
|
234
|
+
background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
|
|
233
235
|
}
|
|
234
236
|
.iui-input-container.iui-positive .iui-input-icon{
|
|
235
237
|
fill:var(--iui-color-foreground-positive);
|
|
@@ -243,25 +245,25 @@ label.iui-input-container.iui-disabled{
|
|
|
243
245
|
}
|
|
244
246
|
.iui-input-container.iui-positive .iui-message a:hover{
|
|
245
247
|
text-decoration:none;
|
|
246
|
-
color:var(--iui-color-foreground-positive-
|
|
248
|
+
color:var(--iui-color-foreground-positive-hover);
|
|
247
249
|
}
|
|
248
250
|
.iui-input-container.iui-positive .iui-input{
|
|
249
|
-
padding-bottom:
|
|
250
|
-
border-bottom:
|
|
251
|
+
padding-bottom:calc(var(--iui-size-2xs) - 1px);
|
|
252
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
|
|
251
253
|
}
|
|
252
|
-
.iui-input-container.iui-positive .iui-input
|
|
253
|
-
padding-bottom:
|
|
254
|
+
.iui-input-container.iui-positive .iui-input[data-iui-size=small]{
|
|
255
|
+
padding-bottom:0;
|
|
254
256
|
}
|
|
255
|
-
.iui-input-container.iui-positive .iui-input
|
|
256
|
-
padding-bottom:
|
|
257
|
+
.iui-input-container.iui-positive .iui-input[data-iui-size=large]{
|
|
258
|
+
padding-bottom:calc(var(--iui-size-xs) - 1px);
|
|
257
259
|
}
|
|
258
260
|
.iui-input-container.iui-positive .iui-input:focus{
|
|
259
|
-
border-bottom:
|
|
261
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
|
|
260
262
|
outline:2px solid var(--iui-color-foreground-positive);
|
|
261
263
|
outline-offset:-2px;
|
|
262
264
|
}
|
|
263
265
|
.iui-input-container.iui-positive .iui-input-with-icon{
|
|
264
|
-
--
|
|
266
|
+
--_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-positive);
|
|
265
267
|
--_focus-color:var(--iui-color-foreground-positive);
|
|
266
268
|
}
|
|
267
269
|
.iui-input-container.iui-positive .iui-select-button{
|
|
@@ -273,15 +275,15 @@ label.iui-input-container.iui-disabled{
|
|
|
273
275
|
position:absolute;
|
|
274
276
|
bottom:0;
|
|
275
277
|
left:0;
|
|
276
|
-
height:
|
|
278
|
+
height:var(--iui-size-3xs);
|
|
277
279
|
background-color:var(--iui-color-foreground-positive);
|
|
278
280
|
}
|
|
279
281
|
.iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
|
|
280
|
-
background-color:
|
|
282
|
+
background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
|
|
281
283
|
}
|
|
282
284
|
.iui-input-container.iui-negative::selection,
|
|
283
285
|
.iui-input-container.iui-negative *::selection{
|
|
284
|
-
background-color:
|
|
286
|
+
background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
|
|
285
287
|
}
|
|
286
288
|
.iui-input-container.iui-negative .iui-input-icon{
|
|
287
289
|
fill:var(--iui-color-foreground-negative);
|
|
@@ -295,25 +297,25 @@ label.iui-input-container.iui-disabled{
|
|
|
295
297
|
}
|
|
296
298
|
.iui-input-container.iui-negative .iui-message a:hover{
|
|
297
299
|
text-decoration:none;
|
|
298
|
-
color:var(--iui-color-foreground-negative-
|
|
300
|
+
color:var(--iui-color-foreground-negative-hover);
|
|
299
301
|
}
|
|
300
302
|
.iui-input-container.iui-negative .iui-input{
|
|
301
|
-
padding-bottom:
|
|
302
|
-
border-bottom:
|
|
303
|
+
padding-bottom:calc(var(--iui-size-2xs) - 1px);
|
|
304
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
|
|
303
305
|
}
|
|
304
|
-
.iui-input-container.iui-negative .iui-input
|
|
305
|
-
padding-bottom:
|
|
306
|
+
.iui-input-container.iui-negative .iui-input[data-iui-size=small]{
|
|
307
|
+
padding-bottom:0;
|
|
306
308
|
}
|
|
307
|
-
.iui-input-container.iui-negative .iui-input
|
|
308
|
-
padding-bottom:
|
|
309
|
+
.iui-input-container.iui-negative .iui-input[data-iui-size=large]{
|
|
310
|
+
padding-bottom:calc(var(--iui-size-xs) - 1px);
|
|
309
311
|
}
|
|
310
312
|
.iui-input-container.iui-negative .iui-input:focus{
|
|
311
|
-
border-bottom:
|
|
313
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
|
|
312
314
|
outline:2px solid var(--iui-color-foreground-negative);
|
|
313
315
|
outline-offset:-2px;
|
|
314
316
|
}
|
|
315
317
|
.iui-input-container.iui-negative .iui-input-with-icon{
|
|
316
|
-
--
|
|
318
|
+
--_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-negative);
|
|
317
319
|
--_focus-color:var(--iui-color-foreground-negative);
|
|
318
320
|
}
|
|
319
321
|
.iui-input-container.iui-negative .iui-select-button{
|
|
@@ -325,15 +327,15 @@ label.iui-input-container.iui-disabled{
|
|
|
325
327
|
position:absolute;
|
|
326
328
|
bottom:0;
|
|
327
329
|
left:0;
|
|
328
|
-
height:
|
|
330
|
+
height:var(--iui-size-3xs);
|
|
329
331
|
background-color:var(--iui-color-foreground-negative);
|
|
330
332
|
}
|
|
331
333
|
.iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
|
|
332
|
-
background-color:
|
|
334
|
+
background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
|
|
333
335
|
}
|
|
334
336
|
.iui-input-container.iui-warning::selection,
|
|
335
337
|
.iui-input-container.iui-warning *::selection{
|
|
336
|
-
background-color:
|
|
338
|
+
background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
|
|
337
339
|
}
|
|
338
340
|
.iui-input-container.iui-warning .iui-input-icon{
|
|
339
341
|
fill:var(--iui-color-foreground-warning);
|
|
@@ -347,25 +349,25 @@ label.iui-input-container.iui-disabled{
|
|
|
347
349
|
}
|
|
348
350
|
.iui-input-container.iui-warning .iui-message a:hover{
|
|
349
351
|
text-decoration:none;
|
|
350
|
-
color:var(--iui-color-foreground-warning-
|
|
352
|
+
color:var(--iui-color-foreground-warning-hover);
|
|
351
353
|
}
|
|
352
354
|
.iui-input-container.iui-warning .iui-input{
|
|
353
|
-
padding-bottom:
|
|
354
|
-
border-bottom:
|
|
355
|
+
padding-bottom:calc(var(--iui-size-2xs) - 1px);
|
|
356
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
|
|
355
357
|
}
|
|
356
|
-
.iui-input-container.iui-warning .iui-input
|
|
357
|
-
padding-bottom:
|
|
358
|
+
.iui-input-container.iui-warning .iui-input[data-iui-size=small]{
|
|
359
|
+
padding-bottom:0;
|
|
358
360
|
}
|
|
359
|
-
.iui-input-container.iui-warning .iui-input
|
|
360
|
-
padding-bottom:
|
|
361
|
+
.iui-input-container.iui-warning .iui-input[data-iui-size=large]{
|
|
362
|
+
padding-bottom:calc(var(--iui-size-xs) - 1px);
|
|
361
363
|
}
|
|
362
364
|
.iui-input-container.iui-warning .iui-input:focus{
|
|
363
|
-
border-bottom:
|
|
365
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
|
|
364
366
|
outline:2px solid var(--iui-color-foreground-warning);
|
|
365
367
|
outline-offset:-2px;
|
|
366
368
|
}
|
|
367
369
|
.iui-input-container.iui-warning .iui-input-with-icon{
|
|
368
|
-
--
|
|
370
|
+
--_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-warning);
|
|
369
371
|
--_focus-color:var(--iui-color-foreground-warning);
|
|
370
372
|
}
|
|
371
373
|
.iui-input-container.iui-warning .iui-select-button{
|
|
@@ -377,19 +379,19 @@ label.iui-input-container.iui-disabled{
|
|
|
377
379
|
position:absolute;
|
|
378
380
|
bottom:0;
|
|
379
381
|
left:0;
|
|
380
|
-
height:
|
|
382
|
+
height:var(--iui-size-3xs);
|
|
381
383
|
background-color:var(--iui-color-foreground-warning);
|
|
382
384
|
}
|
|
383
385
|
|
|
384
386
|
.iui-input-label{
|
|
385
|
-
font-weight:
|
|
386
|
-
margin-bottom:
|
|
387
|
+
font-weight:var(--iui-font-weight-semibold);
|
|
388
|
+
margin-bottom:var(--iui-size-2xs);
|
|
387
389
|
cursor:default;
|
|
388
390
|
display:block;
|
|
389
391
|
}
|
|
390
392
|
.iui-input-label.iui-required::after{
|
|
391
393
|
content:"*";
|
|
392
|
-
margin-left:
|
|
394
|
+
margin-left:var(--iui-size-2xs);
|
|
393
395
|
color:var(--iui-color-foreground-negative);
|
|
394
396
|
}
|
|
395
397
|
label.iui-input-label{
|
|
@@ -400,12 +402,12 @@ label.iui-input-label.iui-disabled{
|
|
|
400
402
|
}
|
|
401
403
|
|
|
402
404
|
.iui-input-label.iui-inline{
|
|
403
|
-
margin:0
|
|
405
|
+
margin:0 var(--iui-size-m) 0 0;
|
|
404
406
|
display:inline-flex;
|
|
405
407
|
align-items:center;
|
|
406
408
|
}
|
|
407
409
|
.iui-input-label.iui-inline.iui-required{
|
|
408
|
-
margin-right:
|
|
410
|
+
margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
|
|
409
411
|
}
|
|
410
412
|
|
|
411
413
|
.iui-notification-primary{
|
|
@@ -414,17 +416,17 @@ label.iui-input-label.iui-disabled{
|
|
|
414
416
|
.iui-notification-primary::before{
|
|
415
417
|
content:"";
|
|
416
418
|
position:absolute;
|
|
417
|
-
width:
|
|
418
|
-
height:
|
|
419
|
-
top
|
|
420
|
-
right
|
|
419
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
420
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
421
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
422
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
421
423
|
border-radius:100%;
|
|
422
424
|
background-color:var(--iui-color-foreground-primary);
|
|
423
|
-
border:
|
|
425
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
424
426
|
}
|
|
425
427
|
@media (prefers-reduced-motion: no-preference){
|
|
426
428
|
.iui-notification-primary::before{
|
|
427
|
-
transition:background-color
|
|
429
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
428
430
|
}
|
|
429
431
|
}
|
|
430
432
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -436,24 +438,24 @@ label.iui-input-label.iui-disabled{
|
|
|
436
438
|
@media (prefers-reduced-motion: no-preference){
|
|
437
439
|
@-webkit-keyframes pulse-primary{
|
|
438
440
|
0%{
|
|
439
|
-
box-shadow:0 0 0 0
|
|
441
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
|
|
440
442
|
}
|
|
441
443
|
70%{
|
|
442
|
-
box-shadow:0 0 0 7px rgba(
|
|
444
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
443
445
|
}
|
|
444
446
|
100%{
|
|
445
|
-
box-shadow:0 0 0 0 rgba(
|
|
447
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
446
448
|
}
|
|
447
449
|
}
|
|
448
450
|
@keyframes pulse-primary{
|
|
449
451
|
0%{
|
|
450
|
-
box-shadow:0 0 0 0
|
|
452
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
|
|
451
453
|
}
|
|
452
454
|
70%{
|
|
453
|
-
box-shadow:0 0 0 7px rgba(
|
|
455
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
454
456
|
}
|
|
455
457
|
100%{
|
|
456
|
-
box-shadow:0 0 0 0 rgba(
|
|
458
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
457
459
|
}
|
|
458
460
|
}
|
|
459
461
|
}
|
|
@@ -464,17 +466,17 @@ label.iui-input-label.iui-disabled{
|
|
|
464
466
|
.iui-notification-positive::before{
|
|
465
467
|
content:"";
|
|
466
468
|
position:absolute;
|
|
467
|
-
width:
|
|
468
|
-
height:
|
|
469
|
-
top
|
|
470
|
-
right
|
|
469
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
470
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
471
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
472
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
471
473
|
border-radius:100%;
|
|
472
474
|
background-color:var(--iui-color-foreground-positive);
|
|
473
|
-
border:
|
|
475
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
474
476
|
}
|
|
475
477
|
@media (prefers-reduced-motion: no-preference){
|
|
476
478
|
.iui-notification-positive::before{
|
|
477
|
-
transition:background-color
|
|
479
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
478
480
|
}
|
|
479
481
|
}
|
|
480
482
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -486,24 +488,24 @@ label.iui-input-label.iui-disabled{
|
|
|
486
488
|
@media (prefers-reduced-motion: no-preference){
|
|
487
489
|
@-webkit-keyframes pulse-positive{
|
|
488
490
|
0%{
|
|
489
|
-
box-shadow:0 0 0 0
|
|
491
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
|
|
490
492
|
}
|
|
491
493
|
70%{
|
|
492
|
-
box-shadow:0 0 0 7px rgba(
|
|
494
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
493
495
|
}
|
|
494
496
|
100%{
|
|
495
|
-
box-shadow:0 0 0 0 rgba(
|
|
497
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
496
498
|
}
|
|
497
499
|
}
|
|
498
500
|
@keyframes pulse-positive{
|
|
499
501
|
0%{
|
|
500
|
-
box-shadow:0 0 0 0
|
|
502
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
|
|
501
503
|
}
|
|
502
504
|
70%{
|
|
503
|
-
box-shadow:0 0 0 7px rgba(
|
|
505
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
504
506
|
}
|
|
505
507
|
100%{
|
|
506
|
-
box-shadow:0 0 0 0 rgba(
|
|
508
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
507
509
|
}
|
|
508
510
|
}
|
|
509
511
|
}
|
|
@@ -514,17 +516,17 @@ label.iui-input-label.iui-disabled{
|
|
|
514
516
|
.iui-notification-warning::before{
|
|
515
517
|
content:"";
|
|
516
518
|
position:absolute;
|
|
517
|
-
width:
|
|
518
|
-
height:
|
|
519
|
-
top
|
|
520
|
-
right
|
|
519
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
520
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
521
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
522
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
521
523
|
border-radius:100%;
|
|
522
524
|
background-color:var(--iui-color-foreground-warning);
|
|
523
|
-
border:
|
|
525
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
524
526
|
}
|
|
525
527
|
@media (prefers-reduced-motion: no-preference){
|
|
526
528
|
.iui-notification-warning::before{
|
|
527
|
-
transition:background-color
|
|
529
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
528
530
|
}
|
|
529
531
|
}
|
|
530
532
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -536,24 +538,24 @@ label.iui-input-label.iui-disabled{
|
|
|
536
538
|
@media (prefers-reduced-motion: no-preference){
|
|
537
539
|
@-webkit-keyframes pulse-warning{
|
|
538
540
|
0%{
|
|
539
|
-
box-shadow:0 0 0 0
|
|
541
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
|
|
540
542
|
}
|
|
541
543
|
70%{
|
|
542
|
-
box-shadow:0 0 0 7px rgba(
|
|
544
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
543
545
|
}
|
|
544
546
|
100%{
|
|
545
|
-
box-shadow:0 0 0 0 rgba(
|
|
547
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
546
548
|
}
|
|
547
549
|
}
|
|
548
550
|
@keyframes pulse-warning{
|
|
549
551
|
0%{
|
|
550
|
-
box-shadow:0 0 0 0
|
|
552
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
|
|
551
553
|
}
|
|
552
554
|
70%{
|
|
553
|
-
box-shadow:0 0 0 7px rgba(
|
|
555
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
554
556
|
}
|
|
555
557
|
100%{
|
|
556
|
-
box-shadow:0 0 0 0 rgba(
|
|
558
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
557
559
|
}
|
|
558
560
|
}
|
|
559
561
|
}
|
|
@@ -564,17 +566,17 @@ label.iui-input-label.iui-disabled{
|
|
|
564
566
|
.iui-notification-negative::before{
|
|
565
567
|
content:"";
|
|
566
568
|
position:absolute;
|
|
567
|
-
width:
|
|
568
|
-
height:
|
|
569
|
-
top
|
|
570
|
-
right
|
|
569
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
570
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
571
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
572
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
571
573
|
border-radius:100%;
|
|
572
574
|
background-color:var(--iui-color-foreground-negative);
|
|
573
|
-
border:
|
|
575
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
574
576
|
}
|
|
575
577
|
@media (prefers-reduced-motion: no-preference){
|
|
576
578
|
.iui-notification-negative::before{
|
|
577
|
-
transition:background-color
|
|
579
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
578
580
|
}
|
|
579
581
|
}
|
|
580
582
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -586,24 +588,24 @@ label.iui-input-label.iui-disabled{
|
|
|
586
588
|
@media (prefers-reduced-motion: no-preference){
|
|
587
589
|
@-webkit-keyframes pulse-negative{
|
|
588
590
|
0%{
|
|
589
|
-
box-shadow:0 0 0 0
|
|
591
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
|
|
590
592
|
}
|
|
591
593
|
70%{
|
|
592
|
-
box-shadow:0 0 0 7px rgba(
|
|
594
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
593
595
|
}
|
|
594
596
|
100%{
|
|
595
|
-
box-shadow:0 0 0 0 rgba(
|
|
597
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
596
598
|
}
|
|
597
599
|
}
|
|
598
600
|
@keyframes pulse-negative{
|
|
599
601
|
0%{
|
|
600
|
-
box-shadow:0 0 0 0
|
|
602
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
|
|
601
603
|
}
|
|
602
604
|
70%{
|
|
603
|
-
box-shadow:0 0 0 7px rgba(
|
|
605
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
604
606
|
}
|
|
605
607
|
100%{
|
|
606
|
-
box-shadow:0 0 0 0 rgba(
|
|
608
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
607
609
|
}
|
|
608
610
|
}
|
|
609
611
|
}
|
|
@@ -614,17 +616,17 @@ label.iui-input-label.iui-disabled{
|
|
|
614
616
|
.iui-notification-accessory::before{
|
|
615
617
|
content:"";
|
|
616
618
|
position:absolute;
|
|
617
|
-
width:
|
|
618
|
-
height:
|
|
619
|
-
top
|
|
620
|
-
right
|
|
619
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
620
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
621
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
622
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
621
623
|
border-radius:100%;
|
|
622
624
|
background-color:var(--iui-color-foreground-accessory);
|
|
623
|
-
border:
|
|
625
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
624
626
|
}
|
|
625
627
|
@media (prefers-reduced-motion: no-preference){
|
|
626
628
|
.iui-notification-accessory::before{
|
|
627
|
-
transition:background-color
|
|
629
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
628
630
|
}
|
|
629
631
|
}
|
|
630
632
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -636,24 +638,24 @@ label.iui-input-label.iui-disabled{
|
|
|
636
638
|
@media (prefers-reduced-motion: no-preference){
|
|
637
639
|
@-webkit-keyframes pulse-accessory{
|
|
638
640
|
0%{
|
|
639
|
-
box-shadow:0 0 0 0
|
|
641
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
|
|
640
642
|
}
|
|
641
643
|
70%{
|
|
642
|
-
box-shadow:0 0 0 7px rgba(
|
|
644
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
643
645
|
}
|
|
644
646
|
100%{
|
|
645
|
-
box-shadow:0 0 0 0 rgba(
|
|
647
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
646
648
|
}
|
|
647
649
|
}
|
|
648
650
|
@keyframes pulse-accessory{
|
|
649
651
|
0%{
|
|
650
|
-
box-shadow:0 0 0 0
|
|
652
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
|
|
651
653
|
}
|
|
652
654
|
70%{
|
|
653
|
-
box-shadow:0 0 0 7px rgba(
|
|
655
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
654
656
|
}
|
|
655
657
|
100%{
|
|
656
|
-
box-shadow:0 0 0 0 rgba(
|
|
658
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
657
659
|
}
|
|
658
660
|
}
|
|
659
661
|
}
|
|
@@ -666,4 +668,17 @@ label.iui-input-label.iui-disabled{
|
|
|
666
668
|
}
|
|
667
669
|
.iui-popover .tippy-content{
|
|
668
670
|
all:revert;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
.iui-visually-hidden{
|
|
674
|
+
-webkit-clip-path:inset(50%);
|
|
675
|
+
clip-path:inset(50%);
|
|
676
|
+
overflow:hidden;
|
|
677
|
+
position:absolute;
|
|
678
|
+
white-space:nowrap;
|
|
679
|
+
height:1px;
|
|
680
|
+
width:1px;
|
|
681
|
+
padding:0;
|
|
682
|
+
margin:-1px;
|
|
683
|
+
border-width:0;
|
|
669
684
|
}
|