@itwin/itwinui-css 1.0.0-dev.1 → 1.0.0-dev.10
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 -78
- package/css/all.css +1814 -2296
- 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 -89
- 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 +29 -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 -56
- 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 +83 -80
- package/css/side-navigation.css +27 -26
- 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 +179 -143
- 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 -148
- 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,13 @@ 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:
|
|
194
|
-
margin-right:
|
|
195
|
-
padding:
|
|
193
|
+
height:calc(100% - 4px);
|
|
194
|
+
margin-right:1px;
|
|
195
|
+
padding-inline:calc(var(--iui-size-xs) + 1px);
|
|
196
196
|
cursor:pointer;
|
|
197
|
+
box-sizing:content-box;
|
|
197
198
|
background-position:center;
|
|
198
|
-
transition:background
|
|
199
|
+
transition:background var(--iui-duration-2) ease-out;
|
|
199
200
|
}
|
|
200
201
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
|
|
201
202
|
background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
|
|
@@ -203,11 +204,11 @@ label.iui-input-container.iui-disabled{
|
|
|
203
204
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
|
|
204
205
|
background-color:var(--iui-color-background-2);
|
|
205
206
|
background-size:100%;
|
|
206
|
-
transition:background
|
|
207
|
+
transition:background var(--iui-duration-0);
|
|
207
208
|
}
|
|
208
209
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
|
|
209
|
-
fill:var(--iui-
|
|
210
|
-
transition:transform
|
|
210
|
+
fill:var(--iui-color-foreground-2);
|
|
211
|
+
transition:transform var(--iui-duration-1) ease-out;
|
|
211
212
|
}
|
|
212
213
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
|
|
213
214
|
transform:rotate(180deg);
|
|
@@ -216,20 +217,20 @@ label.iui-input-container.iui-disabled{
|
|
|
216
217
|
cursor:not-allowed;
|
|
217
218
|
}
|
|
218
219
|
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
|
|
219
|
-
fill:var(--iui-
|
|
220
|
+
fill:var(--iui-color-foreground-5);
|
|
220
221
|
}
|
|
221
222
|
.iui-input-container.iui-inline-label > .iui-label{
|
|
222
|
-
margin:0
|
|
223
|
+
margin:0 var(--iui-size-m) 0 0;
|
|
223
224
|
}
|
|
224
225
|
.iui-input-container.iui-inline-label > .iui-label.iui-required{
|
|
225
|
-
margin-right:
|
|
226
|
+
margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
|
|
226
227
|
}
|
|
227
228
|
.iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
|
|
228
|
-
background-color:
|
|
229
|
+
background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
|
|
229
230
|
}
|
|
230
231
|
.iui-input-container.iui-positive::selection,
|
|
231
232
|
.iui-input-container.iui-positive *::selection{
|
|
232
|
-
background-color:
|
|
233
|
+
background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
|
|
233
234
|
}
|
|
234
235
|
.iui-input-container.iui-positive .iui-input-icon{
|
|
235
236
|
fill:var(--iui-color-foreground-positive);
|
|
@@ -243,25 +244,25 @@ label.iui-input-container.iui-disabled{
|
|
|
243
244
|
}
|
|
244
245
|
.iui-input-container.iui-positive .iui-message a:hover{
|
|
245
246
|
text-decoration:none;
|
|
246
|
-
color:var(--iui-color-foreground-positive-
|
|
247
|
+
color:var(--iui-color-foreground-positive-hover);
|
|
247
248
|
}
|
|
248
249
|
.iui-input-container.iui-positive .iui-input{
|
|
249
|
-
padding-bottom:
|
|
250
|
-
border-bottom:
|
|
250
|
+
padding-bottom:calc(var(--iui-size-2xs) - 1px);
|
|
251
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
|
|
251
252
|
}
|
|
252
|
-
.iui-input-container.iui-positive .iui-input
|
|
253
|
-
padding-bottom:
|
|
253
|
+
.iui-input-container.iui-positive .iui-input[data-iui-size=small]{
|
|
254
|
+
padding-bottom:0;
|
|
254
255
|
}
|
|
255
|
-
.iui-input-container.iui-positive .iui-input
|
|
256
|
-
padding-bottom:
|
|
256
|
+
.iui-input-container.iui-positive .iui-input[data-iui-size=large]{
|
|
257
|
+
padding-bottom:calc(var(--iui-size-xs) - 1px);
|
|
257
258
|
}
|
|
258
259
|
.iui-input-container.iui-positive .iui-input:focus{
|
|
259
|
-
border-bottom:
|
|
260
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
|
|
260
261
|
outline:2px solid var(--iui-color-foreground-positive);
|
|
261
262
|
outline-offset:-2px;
|
|
262
263
|
}
|
|
263
264
|
.iui-input-container.iui-positive .iui-input-with-icon{
|
|
264
|
-
--
|
|
265
|
+
--_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-positive);
|
|
265
266
|
--_focus-color:var(--iui-color-foreground-positive);
|
|
266
267
|
}
|
|
267
268
|
.iui-input-container.iui-positive .iui-select-button{
|
|
@@ -273,15 +274,15 @@ label.iui-input-container.iui-disabled{
|
|
|
273
274
|
position:absolute;
|
|
274
275
|
bottom:0;
|
|
275
276
|
left:0;
|
|
276
|
-
height:
|
|
277
|
+
height:var(--iui-size-3xs);
|
|
277
278
|
background-color:var(--iui-color-foreground-positive);
|
|
278
279
|
}
|
|
279
280
|
.iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
|
|
280
|
-
background-color:
|
|
281
|
+
background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
|
|
281
282
|
}
|
|
282
283
|
.iui-input-container.iui-negative::selection,
|
|
283
284
|
.iui-input-container.iui-negative *::selection{
|
|
284
|
-
background-color:
|
|
285
|
+
background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
|
|
285
286
|
}
|
|
286
287
|
.iui-input-container.iui-negative .iui-input-icon{
|
|
287
288
|
fill:var(--iui-color-foreground-negative);
|
|
@@ -295,25 +296,25 @@ label.iui-input-container.iui-disabled{
|
|
|
295
296
|
}
|
|
296
297
|
.iui-input-container.iui-negative .iui-message a:hover{
|
|
297
298
|
text-decoration:none;
|
|
298
|
-
color:var(--iui-color-foreground-negative-
|
|
299
|
+
color:var(--iui-color-foreground-negative-hover);
|
|
299
300
|
}
|
|
300
301
|
.iui-input-container.iui-negative .iui-input{
|
|
301
|
-
padding-bottom:
|
|
302
|
-
border-bottom:
|
|
302
|
+
padding-bottom:calc(var(--iui-size-2xs) - 1px);
|
|
303
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
|
|
303
304
|
}
|
|
304
|
-
.iui-input-container.iui-negative .iui-input
|
|
305
|
-
padding-bottom:
|
|
305
|
+
.iui-input-container.iui-negative .iui-input[data-iui-size=small]{
|
|
306
|
+
padding-bottom:0;
|
|
306
307
|
}
|
|
307
|
-
.iui-input-container.iui-negative .iui-input
|
|
308
|
-
padding-bottom:
|
|
308
|
+
.iui-input-container.iui-negative .iui-input[data-iui-size=large]{
|
|
309
|
+
padding-bottom:calc(var(--iui-size-xs) - 1px);
|
|
309
310
|
}
|
|
310
311
|
.iui-input-container.iui-negative .iui-input:focus{
|
|
311
|
-
border-bottom:
|
|
312
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
|
|
312
313
|
outline:2px solid var(--iui-color-foreground-negative);
|
|
313
314
|
outline-offset:-2px;
|
|
314
315
|
}
|
|
315
316
|
.iui-input-container.iui-negative .iui-input-with-icon{
|
|
316
|
-
--
|
|
317
|
+
--_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-negative);
|
|
317
318
|
--_focus-color:var(--iui-color-foreground-negative);
|
|
318
319
|
}
|
|
319
320
|
.iui-input-container.iui-negative .iui-select-button{
|
|
@@ -325,15 +326,15 @@ label.iui-input-container.iui-disabled{
|
|
|
325
326
|
position:absolute;
|
|
326
327
|
bottom:0;
|
|
327
328
|
left:0;
|
|
328
|
-
height:
|
|
329
|
+
height:var(--iui-size-3xs);
|
|
329
330
|
background-color:var(--iui-color-foreground-negative);
|
|
330
331
|
}
|
|
331
332
|
.iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
|
|
332
|
-
background-color:
|
|
333
|
+
background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
|
|
333
334
|
}
|
|
334
335
|
.iui-input-container.iui-warning::selection,
|
|
335
336
|
.iui-input-container.iui-warning *::selection{
|
|
336
|
-
background-color:
|
|
337
|
+
background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
|
|
337
338
|
}
|
|
338
339
|
.iui-input-container.iui-warning .iui-input-icon{
|
|
339
340
|
fill:var(--iui-color-foreground-warning);
|
|
@@ -347,25 +348,25 @@ label.iui-input-container.iui-disabled{
|
|
|
347
348
|
}
|
|
348
349
|
.iui-input-container.iui-warning .iui-message a:hover{
|
|
349
350
|
text-decoration:none;
|
|
350
|
-
color:var(--iui-color-foreground-warning-
|
|
351
|
+
color:var(--iui-color-foreground-warning-hover);
|
|
351
352
|
}
|
|
352
353
|
.iui-input-container.iui-warning .iui-input{
|
|
353
|
-
padding-bottom:
|
|
354
|
-
border-bottom:
|
|
354
|
+
padding-bottom:calc(var(--iui-size-2xs) - 1px);
|
|
355
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
|
|
355
356
|
}
|
|
356
|
-
.iui-input-container.iui-warning .iui-input
|
|
357
|
-
padding-bottom:
|
|
357
|
+
.iui-input-container.iui-warning .iui-input[data-iui-size=small]{
|
|
358
|
+
padding-bottom:0;
|
|
358
359
|
}
|
|
359
|
-
.iui-input-container.iui-warning .iui-input
|
|
360
|
-
padding-bottom:
|
|
360
|
+
.iui-input-container.iui-warning .iui-input[data-iui-size=large]{
|
|
361
|
+
padding-bottom:calc(var(--iui-size-xs) - 1px);
|
|
361
362
|
}
|
|
362
363
|
.iui-input-container.iui-warning .iui-input:focus{
|
|
363
|
-
border-bottom:
|
|
364
|
+
border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
|
|
364
365
|
outline:2px solid var(--iui-color-foreground-warning);
|
|
365
366
|
outline-offset:-2px;
|
|
366
367
|
}
|
|
367
368
|
.iui-input-container.iui-warning .iui-input-with-icon{
|
|
368
|
-
--
|
|
369
|
+
--_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-warning);
|
|
369
370
|
--_focus-color:var(--iui-color-foreground-warning);
|
|
370
371
|
}
|
|
371
372
|
.iui-input-container.iui-warning .iui-select-button{
|
|
@@ -377,19 +378,19 @@ label.iui-input-container.iui-disabled{
|
|
|
377
378
|
position:absolute;
|
|
378
379
|
bottom:0;
|
|
379
380
|
left:0;
|
|
380
|
-
height:
|
|
381
|
+
height:var(--iui-size-3xs);
|
|
381
382
|
background-color:var(--iui-color-foreground-warning);
|
|
382
383
|
}
|
|
383
384
|
|
|
384
385
|
.iui-input-label{
|
|
385
|
-
font-weight:
|
|
386
|
-
margin-bottom:
|
|
386
|
+
font-weight:var(--iui-font-weight-semibold);
|
|
387
|
+
margin-bottom:var(--iui-size-2xs);
|
|
387
388
|
cursor:default;
|
|
388
389
|
display:block;
|
|
389
390
|
}
|
|
390
391
|
.iui-input-label.iui-required::after{
|
|
391
392
|
content:"*";
|
|
392
|
-
margin-left:
|
|
393
|
+
margin-left:var(--iui-size-2xs);
|
|
393
394
|
color:var(--iui-color-foreground-negative);
|
|
394
395
|
}
|
|
395
396
|
label.iui-input-label{
|
|
@@ -400,12 +401,12 @@ label.iui-input-label.iui-disabled{
|
|
|
400
401
|
}
|
|
401
402
|
|
|
402
403
|
.iui-input-label.iui-inline{
|
|
403
|
-
margin:0
|
|
404
|
+
margin:0 var(--iui-size-m) 0 0;
|
|
404
405
|
display:inline-flex;
|
|
405
406
|
align-items:center;
|
|
406
407
|
}
|
|
407
408
|
.iui-input-label.iui-inline.iui-required{
|
|
408
|
-
margin-right:
|
|
409
|
+
margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
|
|
409
410
|
}
|
|
410
411
|
|
|
411
412
|
.iui-notification-primary{
|
|
@@ -414,17 +415,17 @@ label.iui-input-label.iui-disabled{
|
|
|
414
415
|
.iui-notification-primary::before{
|
|
415
416
|
content:"";
|
|
416
417
|
position:absolute;
|
|
417
|
-
width:
|
|
418
|
-
height:
|
|
419
|
-
top
|
|
420
|
-
right
|
|
418
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
419
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
420
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
421
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
421
422
|
border-radius:100%;
|
|
422
423
|
background-color:var(--iui-color-foreground-primary);
|
|
423
|
-
border:
|
|
424
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
424
425
|
}
|
|
425
426
|
@media (prefers-reduced-motion: no-preference){
|
|
426
427
|
.iui-notification-primary::before{
|
|
427
|
-
transition:background-color
|
|
428
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
428
429
|
}
|
|
429
430
|
}
|
|
430
431
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -436,24 +437,24 @@ label.iui-input-label.iui-disabled{
|
|
|
436
437
|
@media (prefers-reduced-motion: no-preference){
|
|
437
438
|
@-webkit-keyframes pulse-primary{
|
|
438
439
|
0%{
|
|
439
|
-
box-shadow:0 0 0 0
|
|
440
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
|
|
440
441
|
}
|
|
441
442
|
70%{
|
|
442
|
-
box-shadow:0 0 0 7px rgba(
|
|
443
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
443
444
|
}
|
|
444
445
|
100%{
|
|
445
|
-
box-shadow:0 0 0 0 rgba(
|
|
446
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
446
447
|
}
|
|
447
448
|
}
|
|
448
449
|
@keyframes pulse-primary{
|
|
449
450
|
0%{
|
|
450
|
-
box-shadow:0 0 0 0
|
|
451
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
|
|
451
452
|
}
|
|
452
453
|
70%{
|
|
453
|
-
box-shadow:0 0 0 7px rgba(
|
|
454
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
454
455
|
}
|
|
455
456
|
100%{
|
|
456
|
-
box-shadow:0 0 0 0 rgba(
|
|
457
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
457
458
|
}
|
|
458
459
|
}
|
|
459
460
|
}
|
|
@@ -464,17 +465,17 @@ label.iui-input-label.iui-disabled{
|
|
|
464
465
|
.iui-notification-positive::before{
|
|
465
466
|
content:"";
|
|
466
467
|
position:absolute;
|
|
467
|
-
width:
|
|
468
|
-
height:
|
|
469
|
-
top
|
|
470
|
-
right
|
|
468
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
469
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
470
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
471
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
471
472
|
border-radius:100%;
|
|
472
473
|
background-color:var(--iui-color-foreground-positive);
|
|
473
|
-
border:
|
|
474
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
474
475
|
}
|
|
475
476
|
@media (prefers-reduced-motion: no-preference){
|
|
476
477
|
.iui-notification-positive::before{
|
|
477
|
-
transition:background-color
|
|
478
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
478
479
|
}
|
|
479
480
|
}
|
|
480
481
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -486,24 +487,24 @@ label.iui-input-label.iui-disabled{
|
|
|
486
487
|
@media (prefers-reduced-motion: no-preference){
|
|
487
488
|
@-webkit-keyframes pulse-positive{
|
|
488
489
|
0%{
|
|
489
|
-
box-shadow:0 0 0 0
|
|
490
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
|
|
490
491
|
}
|
|
491
492
|
70%{
|
|
492
|
-
box-shadow:0 0 0 7px rgba(
|
|
493
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
493
494
|
}
|
|
494
495
|
100%{
|
|
495
|
-
box-shadow:0 0 0 0 rgba(
|
|
496
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
496
497
|
}
|
|
497
498
|
}
|
|
498
499
|
@keyframes pulse-positive{
|
|
499
500
|
0%{
|
|
500
|
-
box-shadow:0 0 0 0
|
|
501
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
|
|
501
502
|
}
|
|
502
503
|
70%{
|
|
503
|
-
box-shadow:0 0 0 7px rgba(
|
|
504
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
504
505
|
}
|
|
505
506
|
100%{
|
|
506
|
-
box-shadow:0 0 0 0 rgba(
|
|
507
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
507
508
|
}
|
|
508
509
|
}
|
|
509
510
|
}
|
|
@@ -514,17 +515,17 @@ label.iui-input-label.iui-disabled{
|
|
|
514
515
|
.iui-notification-warning::before{
|
|
515
516
|
content:"";
|
|
516
517
|
position:absolute;
|
|
517
|
-
width:
|
|
518
|
-
height:
|
|
519
|
-
top
|
|
520
|
-
right
|
|
518
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
519
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
520
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
521
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
521
522
|
border-radius:100%;
|
|
522
523
|
background-color:var(--iui-color-foreground-warning);
|
|
523
|
-
border:
|
|
524
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
524
525
|
}
|
|
525
526
|
@media (prefers-reduced-motion: no-preference){
|
|
526
527
|
.iui-notification-warning::before{
|
|
527
|
-
transition:background-color
|
|
528
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
528
529
|
}
|
|
529
530
|
}
|
|
530
531
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -536,24 +537,24 @@ label.iui-input-label.iui-disabled{
|
|
|
536
537
|
@media (prefers-reduced-motion: no-preference){
|
|
537
538
|
@-webkit-keyframes pulse-warning{
|
|
538
539
|
0%{
|
|
539
|
-
box-shadow:0 0 0 0
|
|
540
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
|
|
540
541
|
}
|
|
541
542
|
70%{
|
|
542
|
-
box-shadow:0 0 0 7px rgba(
|
|
543
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
543
544
|
}
|
|
544
545
|
100%{
|
|
545
|
-
box-shadow:0 0 0 0 rgba(
|
|
546
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
546
547
|
}
|
|
547
548
|
}
|
|
548
549
|
@keyframes pulse-warning{
|
|
549
550
|
0%{
|
|
550
|
-
box-shadow:0 0 0 0
|
|
551
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
|
|
551
552
|
}
|
|
552
553
|
70%{
|
|
553
|
-
box-shadow:0 0 0 7px rgba(
|
|
554
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
554
555
|
}
|
|
555
556
|
100%{
|
|
556
|
-
box-shadow:0 0 0 0 rgba(
|
|
557
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
557
558
|
}
|
|
558
559
|
}
|
|
559
560
|
}
|
|
@@ -564,17 +565,17 @@ label.iui-input-label.iui-disabled{
|
|
|
564
565
|
.iui-notification-negative::before{
|
|
565
566
|
content:"";
|
|
566
567
|
position:absolute;
|
|
567
|
-
width:
|
|
568
|
-
height:
|
|
569
|
-
top
|
|
570
|
-
right
|
|
568
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
569
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
570
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
571
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
571
572
|
border-radius:100%;
|
|
572
573
|
background-color:var(--iui-color-foreground-negative);
|
|
573
|
-
border:
|
|
574
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
574
575
|
}
|
|
575
576
|
@media (prefers-reduced-motion: no-preference){
|
|
576
577
|
.iui-notification-negative::before{
|
|
577
|
-
transition:background-color
|
|
578
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
578
579
|
}
|
|
579
580
|
}
|
|
580
581
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -586,24 +587,24 @@ label.iui-input-label.iui-disabled{
|
|
|
586
587
|
@media (prefers-reduced-motion: no-preference){
|
|
587
588
|
@-webkit-keyframes pulse-negative{
|
|
588
589
|
0%{
|
|
589
|
-
box-shadow:0 0 0 0
|
|
590
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
|
|
590
591
|
}
|
|
591
592
|
70%{
|
|
592
|
-
box-shadow:0 0 0 7px rgba(
|
|
593
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
593
594
|
}
|
|
594
595
|
100%{
|
|
595
|
-
box-shadow:0 0 0 0 rgba(
|
|
596
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
596
597
|
}
|
|
597
598
|
}
|
|
598
599
|
@keyframes pulse-negative{
|
|
599
600
|
0%{
|
|
600
|
-
box-shadow:0 0 0 0
|
|
601
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
|
|
601
602
|
}
|
|
602
603
|
70%{
|
|
603
|
-
box-shadow:0 0 0 7px rgba(
|
|
604
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
604
605
|
}
|
|
605
606
|
100%{
|
|
606
|
-
box-shadow:0 0 0 0 rgba(
|
|
607
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
607
608
|
}
|
|
608
609
|
}
|
|
609
610
|
}
|
|
@@ -614,17 +615,17 @@ label.iui-input-label.iui-disabled{
|
|
|
614
615
|
.iui-notification-accessory::before{
|
|
615
616
|
content:"";
|
|
616
617
|
position:absolute;
|
|
617
|
-
width:
|
|
618
|
-
height:
|
|
619
|
-
top
|
|
620
|
-
right
|
|
618
|
+
width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
619
|
+
height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
|
|
620
|
+
top:calc(var(--iui-size-s) * -0.5);
|
|
621
|
+
right:calc(var(--iui-size-s) * -0.5);
|
|
621
622
|
border-radius:100%;
|
|
622
623
|
background-color:var(--iui-color-foreground-accessory);
|
|
623
|
-
border:
|
|
624
|
+
border:var(--iui-size-3xs) solid var(--iui-color-background-1);
|
|
624
625
|
}
|
|
625
626
|
@media (prefers-reduced-motion: no-preference){
|
|
626
627
|
.iui-notification-accessory::before{
|
|
627
|
-
transition:background-color
|
|
628
|
+
transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
|
|
628
629
|
}
|
|
629
630
|
}
|
|
630
631
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -636,24 +637,24 @@ label.iui-input-label.iui-disabled{
|
|
|
636
637
|
@media (prefers-reduced-motion: no-preference){
|
|
637
638
|
@-webkit-keyframes pulse-accessory{
|
|
638
639
|
0%{
|
|
639
|
-
box-shadow:0 0 0 0
|
|
640
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
|
|
640
641
|
}
|
|
641
642
|
70%{
|
|
642
|
-
box-shadow:0 0 0 7px rgba(
|
|
643
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
643
644
|
}
|
|
644
645
|
100%{
|
|
645
|
-
box-shadow:0 0 0 0 rgba(
|
|
646
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
646
647
|
}
|
|
647
648
|
}
|
|
648
649
|
@keyframes pulse-accessory{
|
|
649
650
|
0%{
|
|
650
|
-
box-shadow:0 0 0 0
|
|
651
|
+
box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
|
|
651
652
|
}
|
|
652
653
|
70%{
|
|
653
|
-
box-shadow:0 0 0 7px rgba(
|
|
654
|
+
box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
|
|
654
655
|
}
|
|
655
656
|
100%{
|
|
656
|
-
box-shadow:0 0 0 0 rgba(
|
|
657
|
+
box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
|
|
657
658
|
}
|
|
658
659
|
}
|
|
659
660
|
}
|
|
@@ -666,4 +667,17 @@ label.iui-input-label.iui-disabled{
|
|
|
666
667
|
}
|
|
667
668
|
.iui-popover .tippy-content{
|
|
668
669
|
all:revert;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.iui-visually-hidden{
|
|
673
|
+
-webkit-clip-path:inset(50%);
|
|
674
|
+
clip-path:inset(50%);
|
|
675
|
+
overflow:hidden;
|
|
676
|
+
position:absolute;
|
|
677
|
+
white-space:nowrap;
|
|
678
|
+
height:1px;
|
|
679
|
+
width:1px;
|
|
680
|
+
padding:0;
|
|
681
|
+
margin:-1px;
|
|
682
|
+
border-width:0;
|
|
669
683
|
}
|