@itwin/itwinui-css 0.39.1 → 0.42.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/all.css +607 -362
- package/css/breadcrumbs.css +31 -15
- package/css/button.css +279 -189
- package/css/code.css +2 -0
- package/css/header.css +50 -30
- package/css/inputs.css +26 -40
- package/css/side-navigation.css +27 -24
- package/css/table.css +34 -23
- package/css/tile.css +51 -40
- package/css/tree.css +107 -0
- package/css/user-icon.css +3 -1
- package/package.json +1 -1
- package/scss/breadcrumbs/breadcrumbs.scss +1 -1
- package/scss/button/borderless.scss +37 -39
- package/scss/button/button-group.scss +54 -47
- package/scss/button/button-icon.scss +12 -0
- package/scss/button/button.scss +27 -32
- package/scss/button/classes.scss +25 -3
- package/scss/button/cta.scss +31 -21
- package/scss/button/default.scss +40 -45
- package/scss/button/disabled.scss +3 -14
- package/scss/button/high-visibility.scss +31 -21
- package/scss/button/index.scss +1 -0
- package/scss/button/split-menu.scss +39 -20
- package/scss/classes.scss +1 -0
- package/scss/code/codeblock.scss +4 -0
- package/scss/header/header.scss +38 -18
- package/scss/index.scss +1 -0
- package/scss/inputs/checkbox-radio.scss +1 -3
- package/scss/inputs/checkbox.scss +5 -2
- package/scss/inputs/classes.scss +2 -2
- package/scss/inputs/labeled-inputs.scss +3 -3
- package/scss/side-navigation/side-navigation.scss +27 -22
- package/scss/table/paginator.scss +34 -21
- package/scss/table/table.scss +12 -8
- package/scss/tile/tile.scss +4 -2
- package/scss/tree/classes.scss +15 -0
- package/scss/tree/index.scss +3 -0
- package/scss/tree/tree.scss +137 -0
- package/scss/user-icon/user-icon.scss +3 -0
package/css/header.css
CHANGED
|
@@ -40,7 +40,14 @@
|
|
|
40
40
|
.iui-page-header .iui-header-button-icon{
|
|
41
41
|
transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
|
|
42
42
|
.iui-page-header .iui-header-button.iui-header-button{
|
|
43
|
+
padding:0 12px;
|
|
44
|
+
height:49px;
|
|
45
|
+
font-size:16px;
|
|
46
|
+
gap:12px;
|
|
47
|
+
gap:0;
|
|
43
48
|
max-width:25vw;
|
|
49
|
+
height:100%;
|
|
50
|
+
border-radius:0;
|
|
44
51
|
overflow:hidden;
|
|
45
52
|
padding-right:8px; }
|
|
46
53
|
.iui-page-header .iui-header-button.iui-header-button:focus{
|
|
@@ -50,22 +57,24 @@
|
|
|
50
57
|
outline:1px solid var(--iui-color-foreground-primary); }
|
|
51
58
|
.iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
|
|
52
59
|
outline:0; }
|
|
53
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-label{
|
|
60
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-label{
|
|
54
61
|
text-align:left;
|
|
55
62
|
font-size:14px;
|
|
56
63
|
overflow:hidden; }
|
|
57
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-label > div{
|
|
64
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-label > div{
|
|
58
65
|
overflow:hidden;
|
|
59
66
|
text-overflow:ellipsis; }
|
|
60
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-label .iui-description{
|
|
67
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
|
|
61
68
|
height:22px;
|
|
62
69
|
opacity:0.6;
|
|
63
70
|
opacity:var(--iui-opacity-3); }
|
|
64
71
|
@media (prefers-reduced-motion: no-preference){
|
|
65
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-label .iui-description{
|
|
72
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
|
|
66
73
|
transition:all 0.2s ease; } }
|
|
67
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-icon{
|
|
74
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
|
|
68
75
|
flex-shrink:0; }
|
|
76
|
+
.iui-page-header .iui-header-button.iui-header-button > * + *{
|
|
77
|
+
margin-left:12px; }
|
|
69
78
|
.iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
|
|
70
79
|
padding:4px;
|
|
71
80
|
width:16px;
|
|
@@ -91,7 +100,7 @@
|
|
|
91
100
|
background-color:rgba(0, 139, 225, 0.1);
|
|
92
101
|
fill:var(--iui-icons-color-primary);
|
|
93
102
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
94
|
-
.iui-page-header .iui-header-button.iui-header-button.iui-active .iui-label{
|
|
103
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
|
|
95
104
|
color:#008BE1;
|
|
96
105
|
color:var(--iui-color-foreground-primary); }
|
|
97
106
|
.iui-page-header .iui-header-button.iui-header-button.iui-active:focus{
|
|
@@ -105,11 +114,11 @@
|
|
|
105
114
|
box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
|
|
106
115
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
|
|
107
116
|
box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
|
|
108
|
-
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-label{
|
|
117
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-button-label{
|
|
109
118
|
color:rgba(0, 0, 0, 0.2);
|
|
110
119
|
color:var(--iui-icons-color-actionable-disabled); }
|
|
111
|
-
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-icon,
|
|
112
|
-
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-icon,
|
|
120
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-icon,
|
|
121
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-button-icon,
|
|
113
122
|
.iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
|
|
114
123
|
fill:rgba(0, 0, 0, 0.2);
|
|
115
124
|
fill:var(--iui-icons-color-actionable-disabled); }
|
|
@@ -122,19 +131,28 @@
|
|
|
122
131
|
width:12px;
|
|
123
132
|
height:12px;
|
|
124
133
|
padding:2px; }
|
|
125
|
-
.iui-page-header.iui-slim > .iui-left .iui-button
|
|
134
|
+
.iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
|
|
126
135
|
opacity:0;
|
|
127
136
|
height:0.1px;
|
|
128
137
|
width:0.1px;
|
|
129
138
|
margin:0;
|
|
130
139
|
padding:0; }
|
|
131
140
|
.iui-page-header .iui-header-split-button{
|
|
132
|
-
height:100%;
|
|
133
|
-
display:flex;
|
|
134
|
-
overflow:hidden;
|
|
135
141
|
max-width:25vw; }
|
|
142
|
+
.iui-page-header .iui-header-split-button,
|
|
143
|
+
.iui-page-header .iui-header-split-button > *{
|
|
144
|
+
height:100%;
|
|
145
|
+
display:flex;
|
|
146
|
+
overflow:hidden; }
|
|
136
147
|
.iui-page-header .iui-header-split-button .iui-button{
|
|
148
|
+
padding:0 12px;
|
|
149
|
+
height:49px;
|
|
150
|
+
font-size:16px;
|
|
151
|
+
gap:12px;
|
|
152
|
+
gap:0;
|
|
137
153
|
max-width:25vw;
|
|
154
|
+
height:100%;
|
|
155
|
+
border-radius:0;
|
|
138
156
|
overflow:hidden;
|
|
139
157
|
padding-right:8px;
|
|
140
158
|
padding:0 4px; }
|
|
@@ -145,22 +163,24 @@
|
|
|
145
163
|
outline:1px solid var(--iui-color-foreground-primary); }
|
|
146
164
|
.iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
|
|
147
165
|
outline:0; }
|
|
148
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-label{
|
|
166
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label{
|
|
149
167
|
text-align:left;
|
|
150
168
|
font-size:14px;
|
|
151
169
|
overflow:hidden; }
|
|
152
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-label > div{
|
|
170
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label > div{
|
|
153
171
|
overflow:hidden;
|
|
154
172
|
text-overflow:ellipsis; }
|
|
155
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-label .iui-description{
|
|
173
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
|
|
156
174
|
height:22px;
|
|
157
175
|
opacity:0.6;
|
|
158
176
|
opacity:var(--iui-opacity-3); }
|
|
159
177
|
@media (prefers-reduced-motion: no-preference){
|
|
160
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-label .iui-description{
|
|
178
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
|
|
161
179
|
transition:all 0.2s ease; } }
|
|
162
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-icon{
|
|
180
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
|
|
163
181
|
flex-shrink:0; }
|
|
182
|
+
.iui-page-header .iui-header-split-button .iui-button > * + *{
|
|
183
|
+
margin-left:12px; }
|
|
164
184
|
.iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
|
|
165
185
|
padding:4px;
|
|
166
186
|
width:16px;
|
|
@@ -186,7 +206,7 @@
|
|
|
186
206
|
background-color:rgba(0, 139, 225, 0.1);
|
|
187
207
|
fill:var(--iui-icons-color-primary);
|
|
188
208
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
189
|
-
.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-label{
|
|
209
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
|
|
190
210
|
color:#008BE1;
|
|
191
211
|
color:var(--iui-color-foreground-primary); }
|
|
192
212
|
.iui-page-header .iui-header-split-button .iui-button.iui-active:focus{
|
|
@@ -200,11 +220,11 @@
|
|
|
200
220
|
box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
|
|
201
221
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
|
|
202
222
|
box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
|
|
203
|
-
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-label{
|
|
223
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-button-label{
|
|
204
224
|
color:rgba(0, 0, 0, 0.2);
|
|
205
225
|
color:var(--iui-icons-color-actionable-disabled); }
|
|
206
|
-
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-icon,
|
|
207
|
-
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-icon,
|
|
226
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-icon,
|
|
227
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-button-icon,
|
|
208
228
|
.iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
|
|
209
229
|
fill:rgba(0, 0, 0, 0.2);
|
|
210
230
|
fill:var(--iui-icons-color-actionable-disabled); }
|
|
@@ -217,13 +237,13 @@
|
|
|
217
237
|
width:12px;
|
|
218
238
|
height:12px;
|
|
219
239
|
padding:2px; }
|
|
220
|
-
.iui-page-header.iui-slim > .iui-left .iui-button
|
|
240
|
+
.iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
|
|
221
241
|
opacity:0;
|
|
222
242
|
height:0.1px;
|
|
223
243
|
width:0.1px;
|
|
224
244
|
margin:0;
|
|
225
245
|
padding:0; }
|
|
226
|
-
.iui-page-header .iui-header-split-button .iui-button
|
|
246
|
+
.iui-page-header .iui-header-split-button > *:first-child .iui-button{
|
|
227
247
|
padding-left:12px; }
|
|
228
248
|
.iui-page-header .iui-header-split-button.iui-active svg{
|
|
229
249
|
fill:#008BE1;
|
|
@@ -238,7 +258,7 @@
|
|
|
238
258
|
background-color:rgba(0, 139, 225, 0.1);
|
|
239
259
|
fill:var(--iui-icons-color-primary);
|
|
240
260
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
241
|
-
.iui-page-header .iui-header-split-button.iui-active .iui-label{
|
|
261
|
+
.iui-page-header .iui-header-split-button.iui-active .iui-button-label{
|
|
242
262
|
color:#008BE1;
|
|
243
263
|
color:var(--iui-color-foreground-primary); }
|
|
244
264
|
.iui-page-header .iui-header-split-button.iui-active:focus{
|
|
@@ -252,11 +272,11 @@
|
|
|
252
272
|
box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
|
|
253
273
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
|
|
254
274
|
box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
|
|
255
|
-
.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-label{
|
|
275
|
+
.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-button-label{
|
|
256
276
|
color:rgba(0, 0, 0, 0.2);
|
|
257
277
|
color:var(--iui-icons-color-actionable-disabled); }
|
|
258
|
-
.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-icon,
|
|
259
|
-
.iui-page-header .iui-header-split-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-icon,
|
|
278
|
+
.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-icon,
|
|
279
|
+
.iui-page-header .iui-header-split-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-button-icon,
|
|
260
280
|
.iui-page-header .iui-header-split-button.iui-active:disabled svg{
|
|
261
281
|
fill:rgba(0, 0, 0, 0.2);
|
|
262
282
|
fill:var(--iui-icons-color-actionable-disabled); }
|
|
@@ -267,7 +287,7 @@
|
|
|
267
287
|
background-color:transparent; }
|
|
268
288
|
.iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
|
|
269
289
|
display:none; }
|
|
270
|
-
.iui-page-header .iui-header-split-button.iui-active .iui-button:
|
|
290
|
+
.iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
|
|
271
291
|
background-color:rgba(0, 139, 225, 0.1);
|
|
272
292
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
273
293
|
.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
|
|
@@ -343,7 +363,7 @@
|
|
|
343
363
|
width:0.1px;
|
|
344
364
|
margin:0;
|
|
345
365
|
padding:0; }
|
|
346
|
-
.iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-label{
|
|
366
|
+
.iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-button-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-button-label{
|
|
347
367
|
margin-left:0; } }
|
|
348
368
|
@media (max-width: 1024px){
|
|
349
369
|
.iui-page-header .iui-left .iui-header-logo > .iui-label{
|
package/css/inputs.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
-ms-grid-columns:auto 1fr;
|
|
14
14
|
grid-template:'label label' 'inputs inputs' / auto 1fr;
|
|
15
15
|
cursor:default; }
|
|
16
|
-
.iui-input-container.iui-inline-icon:not(.iui-inline-label) .iui-input-icon{
|
|
16
|
+
.iui-input-container.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon{
|
|
17
17
|
-ms-grid-row:2;
|
|
18
18
|
-ms-grid-column:2; }
|
|
19
19
|
.iui-input-container.iui-inline-icon > .iui-input,
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
-ms-grid-rows:auto auto auto;
|
|
27
27
|
-ms-grid-columns:auto 1fr;
|
|
28
28
|
grid-template:'label label' 'inputs inputs' 'icon message' / auto 1fr; }
|
|
29
|
-
.iui-input-container.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
|
|
29
|
+
.iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
|
|
30
30
|
margin-top:3px; }
|
|
31
31
|
.iui-input-container .iui-input,
|
|
32
32
|
.iui-input-container .iui-textarea,
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
-ms-grid-rows:auto auto;
|
|
68
68
|
-ms-grid-columns:auto auto 1fr;
|
|
69
69
|
grid-template:'label inputs inputs' '. icon message' / auto auto 1fr; }
|
|
70
|
-
.iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
|
|
70
|
+
.iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
|
|
71
71
|
-ms-grid-row:2;
|
|
72
72
|
-ms-grid-column:2; }
|
|
73
73
|
.iui-input-container.iui-inline-label.iui-with-message .iui-message{
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
margin-left:4px;
|
|
102
102
|
color:#D30A0A;
|
|
103
103
|
color:var(--iui-color-foreground-negative); }
|
|
104
|
-
.iui-input-container .iui-input-icon{
|
|
104
|
+
.iui-input-container > .iui-input-icon{
|
|
105
105
|
-ms-grid-row:3;
|
|
106
106
|
-ms-grid-column:1;
|
|
107
107
|
display:flex;
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
align-self:center;
|
|
113
113
|
fill:rgba(0, 0, 0, 0.4);
|
|
114
114
|
fill:var(--iui-icons-color); }
|
|
115
|
-
.iui-input-container .iui-input-icon:not(:last-child){
|
|
115
|
+
.iui-input-container > .iui-input-icon:not(:last-child){
|
|
116
116
|
margin-right:4px; }
|
|
117
117
|
.iui-input-container .iui-message{
|
|
118
118
|
-ms-grid-row:3;
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
-ms-grid-column-span:1; }
|
|
133
133
|
.iui-input-container.iui-inline-label > .iui-label.iui-required{
|
|
134
134
|
margin-right:6px; }
|
|
135
|
-
.iui-input-container.iui-inline-icon .iui-input-icon{
|
|
135
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon{
|
|
136
136
|
-ms-grid-row:1;
|
|
137
137
|
-ms-grid-column:3;
|
|
138
138
|
grid-area:inputs;
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
justify-self:end;
|
|
141
141
|
margin:0 12px 0 0;
|
|
142
142
|
position:relative; }
|
|
143
|
-
.iui-input-container.iui-inline-icon .iui-input-icon.iui-button{
|
|
143
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
|
|
144
144
|
height:100%;
|
|
145
145
|
width:-webkit-fit-content;
|
|
146
146
|
width:-moz-fit-content;
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
margin-right:0;
|
|
149
149
|
border-top-left-radius:0;
|
|
150
150
|
border-bottom-left-radius:0; }
|
|
151
|
-
.iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable{
|
|
151
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
|
|
152
152
|
align-items:center;
|
|
153
153
|
height:90%;
|
|
154
154
|
margin-right:1px;
|
|
@@ -156,19 +156,19 @@
|
|
|
156
156
|
cursor:pointer;
|
|
157
157
|
background-position:center;
|
|
158
158
|
transition:background 0.4s ease-out; }
|
|
159
|
-
.iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:hover{
|
|
159
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
|
|
160
160
|
background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
|
|
161
|
-
.iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:active{
|
|
161
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
|
|
162
162
|
background-color:var(--iui-color-background-2);
|
|
163
163
|
background-size:100%;
|
|
164
164
|
transition:background 0s; }
|
|
165
|
-
.iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable svg{
|
|
165
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
|
|
166
166
|
width:16px;
|
|
167
167
|
height:16px;
|
|
168
168
|
fill:rgba(0, 0, 0, 0.4);
|
|
169
169
|
fill:var(--iui-icons-color);
|
|
170
170
|
transition:transform 0.2s ease-out; }
|
|
171
|
-
.iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable.iui-open svg{
|
|
171
|
+
.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
|
|
172
172
|
transform:rotate(180deg); }
|
|
173
173
|
.iui-input-container.iui-positive *::-moz-selection{
|
|
174
174
|
background-color:rgba(83, 162, 26, 0.4);
|
|
@@ -711,22 +711,14 @@
|
|
|
711
711
|
.iui-checkbox .iui-radio-dot svg:not(.iui-radial){
|
|
712
712
|
width:12px;
|
|
713
713
|
height:12px; }
|
|
714
|
-
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) >
|
|
715
|
-
.iui-checkbox .iui-
|
|
716
|
-
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
|
|
717
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
|
|
718
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
|
|
719
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > g{
|
|
714
|
+
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
|
|
715
|
+
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
|
|
720
716
|
opacity:0;
|
|
721
717
|
fill:#008BE1;
|
|
722
718
|
fill:var(--iui-icons-color-primary); }
|
|
723
719
|
@media (prefers-reduced-motion: no-preference){
|
|
724
|
-
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) >
|
|
725
|
-
.iui-checkbox .iui-
|
|
726
|
-
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
|
|
727
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
|
|
728
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
|
|
729
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > g{
|
|
720
|
+
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
|
|
721
|
+
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
|
|
730
722
|
transition:opacity 0.2s ease; } }
|
|
731
723
|
.iui-checkbox > .iui-label{
|
|
732
724
|
margin-right:8px; }
|
|
@@ -809,8 +801,8 @@
|
|
|
809
801
|
.iui-checkbox.iui-loading input:disabled ~ .iui-label{
|
|
810
802
|
cursor:wait; }
|
|
811
803
|
.iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
|
|
812
|
-
background-color
|
|
813
|
-
background-color:var(--iui-color-
|
|
804
|
+
background-color:rgba(0, 0, 0, 0.1);
|
|
805
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
|
|
814
806
|
.iui-checkbox-visibility input ~ .iui-checkbox-checkmark,
|
|
815
807
|
.iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
|
|
816
808
|
border:none; }
|
|
@@ -822,9 +814,11 @@
|
|
|
822
814
|
.iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
|
|
823
815
|
.iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
|
|
824
816
|
opacity:0; }
|
|
825
|
-
.iui-checkbox-visibility input ~ .iui-checkbox-checkmark
|
|
817
|
+
.iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
|
|
826
818
|
opacity:1;
|
|
827
|
-
transition:opacity 0.2s ease;
|
|
819
|
+
transition:opacity 0.2s ease;
|
|
820
|
+
fill:rgba(0, 0, 0, 0.8);
|
|
821
|
+
fill:var(--iui-icons-color-actionable); }
|
|
828
822
|
|
|
829
823
|
.iui-radio{
|
|
830
824
|
margin:0;
|
|
@@ -872,22 +866,14 @@
|
|
|
872
866
|
.iui-radio .iui-radio-dot svg:not(.iui-radial){
|
|
873
867
|
width:12px;
|
|
874
868
|
height:12px; }
|
|
875
|
-
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) >
|
|
876
|
-
.iui-radio .iui-
|
|
877
|
-
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
|
|
878
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
|
|
879
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
|
|
880
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > g{
|
|
869
|
+
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
|
|
870
|
+
.iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
|
|
881
871
|
opacity:0;
|
|
882
872
|
fill:#008BE1;
|
|
883
873
|
fill:var(--iui-icons-color-primary); }
|
|
884
874
|
@media (prefers-reduced-motion: no-preference){
|
|
885
|
-
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) >
|
|
886
|
-
.iui-radio .iui-
|
|
887
|
-
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
|
|
888
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
|
|
889
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
|
|
890
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > g{
|
|
875
|
+
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
|
|
876
|
+
.iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
|
|
891
877
|
transition:opacity 0.2s ease; } }
|
|
892
878
|
.iui-radio > .iui-label{
|
|
893
879
|
margin-right:8px; }
|
package/css/side-navigation.css
CHANGED
|
@@ -46,10 +46,11 @@
|
|
|
46
46
|
.iui-side-navigation.iui-expanded,
|
|
47
47
|
.iui-side-navigation > .iui-sidenav-content{
|
|
48
48
|
max-width:288px; }
|
|
49
|
-
.iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-icon,
|
|
50
|
-
.iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-icon{
|
|
49
|
+
.iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
|
|
50
|
+
.iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
|
|
51
51
|
transform:scaleX(-1); }
|
|
52
52
|
.iui-side-navigation .iui-sidenav-button{
|
|
53
|
+
gap:24px;
|
|
53
54
|
border-radius:0;
|
|
54
55
|
border-left:none;
|
|
55
56
|
border-right:none;
|
|
@@ -60,28 +61,33 @@
|
|
|
60
61
|
@supports (padding: max(0px)){
|
|
61
62
|
.iui-side-navigation .iui-sidenav-button:not(.iui-expand){
|
|
62
63
|
padding-left:max(24px, 24px + env(safe-area-inset-left)); } }
|
|
63
|
-
.iui-side-navigation .iui-sidenav-button
|
|
64
|
+
.iui-side-navigation .iui-sidenav-button > .iui-button-label{
|
|
65
|
+
white-space:nowrap;
|
|
66
|
+
overflow:hidden;
|
|
67
|
+
text-overflow:ellipsis; }
|
|
68
|
+
.iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:focus{
|
|
64
69
|
border-color:#C7CCD1;
|
|
65
70
|
border-color:var(--iui-color-background-5); }
|
|
66
|
-
.iui-side-navigation .iui-sidenav-button
|
|
71
|
+
.iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
|
|
72
|
+
border-color:#C7CCD1;
|
|
73
|
+
border-color:var(--iui-color-background-5); }
|
|
74
|
+
.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
|
|
67
75
|
width:24px;
|
|
68
76
|
height:24px;
|
|
69
77
|
flex-shrink:0; }
|
|
70
|
-
|
|
71
|
-
margin-left:24px;
|
|
72
|
-
white-space:nowrap;
|
|
73
|
-
overflow:hidden;
|
|
74
|
-
text-overflow:ellipsis; }
|
|
75
|
-
.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-icon{
|
|
78
|
+
.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
|
|
76
79
|
fill:#008BE1;
|
|
77
80
|
fill:var(--iui-color-foreground-primary); }
|
|
78
|
-
.iui-side-navigation .iui-sidenav-button.iui-active
|
|
79
|
-
box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
|
|
80
|
-
box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
81
|
-
.iui-side-navigation .iui-sidenav-button.iui-active, .iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
|
|
81
|
+
.iui-side-navigation .iui-sidenav-button.iui-active{
|
|
82
82
|
box-shadow:inset 2px 0 0 0 #008BE1;
|
|
83
83
|
box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
84
|
-
|
|
84
|
+
.iui-side-navigation .iui-sidenav-button.iui-active:focus{
|
|
85
|
+
box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
|
|
86
|
+
box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
87
|
+
.iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
|
|
88
|
+
box-shadow:inset 2px 0 0 0 #008BE1;
|
|
89
|
+
box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
90
|
+
.iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
|
|
85
91
|
background-color:#F8F9FB;
|
|
86
92
|
background-color:var(--iui-color-background-2); }
|
|
87
93
|
.iui-side-navigation .iui-sidenav-button:focus{
|
|
@@ -90,35 +96,32 @@
|
|
|
90
96
|
box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
|
|
91
97
|
.iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
|
|
92
98
|
box-shadow:none; }
|
|
93
|
-
.iui-side-navigation .iui-sidenav-button:focus-visible{
|
|
94
|
-
outline:0;
|
|
95
|
-
box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
|
|
96
99
|
.iui-side-navigation .iui-sidenav-button.iui-expand{
|
|
97
100
|
height:22px;
|
|
98
101
|
justify-content:center;
|
|
99
102
|
border:none;
|
|
100
103
|
border-bottom:1px solid #C7CCD1;
|
|
101
104
|
border-bottom:1px solid var(--iui-color-background-5); }
|
|
102
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
|
|
105
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
|
|
103
106
|
fill:rgba(0, 0, 0, 0.4);
|
|
104
107
|
fill:var(--iui-icons-color);
|
|
105
108
|
display:inline-flex;
|
|
106
109
|
width:12px;
|
|
107
110
|
height:12px; }
|
|
108
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-informational{
|
|
111
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
|
|
109
112
|
fill:#008BE1;
|
|
110
113
|
fill:var(--iui-icons-color-primary); }
|
|
111
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-positive{
|
|
114
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
|
|
112
115
|
fill:#53A21A;
|
|
113
116
|
fill:var(--iui-icons-color-positive); }
|
|
114
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-warning{
|
|
117
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
|
|
115
118
|
fill:#F18B12;
|
|
116
119
|
fill:var(--iui-icons-color-warning); }
|
|
117
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-negative{
|
|
120
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
|
|
118
121
|
fill:#D30A0A;
|
|
119
122
|
fill:var(--iui-icons-color-negative); }
|
|
120
123
|
@media (prefers-reduced-motion: no-preference){
|
|
121
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
|
|
124
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
|
|
122
125
|
transition:transform 0.4s ease-out; } }
|
|
123
126
|
|
|
124
127
|
.iui-side-navigation-submenu{
|
package/css/table.css
CHANGED
|
@@ -12,9 +12,6 @@
|
|
|
12
12
|
flex-direction:column; }
|
|
13
13
|
.iui-table *{
|
|
14
14
|
box-sizing:border-box; }
|
|
15
|
-
.iui-table.iui-zebra-striping > .iui-table-body > .iui-row:nth-child(even):not(.iui-selected){
|
|
16
|
-
background:rgba(0, 0, 0, 0.02);
|
|
17
|
-
background:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
|
|
18
15
|
.iui-table .iui-cell-end-icon,
|
|
19
16
|
.iui-table .iui-cell-start-icon{
|
|
20
17
|
flex-shrink:0;
|
|
@@ -129,6 +126,9 @@
|
|
|
129
126
|
scroll-snap-type:y mandatory; }
|
|
130
127
|
.iui-table-body.iui-scroll-snapping .iui-row{
|
|
131
128
|
scroll-snap-align:start; }
|
|
129
|
+
.iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
|
|
130
|
+
background-color:rgba(0, 0, 0, 0.02);
|
|
131
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
|
|
132
132
|
.iui-table-body .iui-row{
|
|
133
133
|
display:flex;
|
|
134
134
|
border:solid 1px transparent;
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
.iui-table-body .iui-row:not(.iui-disabled):focus-within > .iui-slot > .iui-more-options{
|
|
148
148
|
visibility:visible; }
|
|
149
149
|
@media (prefers-reduced-motion: no-preference){
|
|
150
|
-
.iui-table-body .iui-row .iui-row-expander > .iui-icon{
|
|
150
|
+
.iui-table-body .iui-row .iui-row-expander > .iui-button-icon{
|
|
151
151
|
transition:transform 0.2s ease-out; } }
|
|
152
152
|
.iui-table-body .iui-row.iui-row-expanded{
|
|
153
153
|
overflow:hidden;
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
border-left-color:var(--iui-color-background-4);
|
|
158
158
|
border-right-color:var(--iui-color-background-4);
|
|
159
159
|
border-bottom-color:transparent; }
|
|
160
|
-
.iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-icon{
|
|
160
|
+
.iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-button-icon{
|
|
161
161
|
transform:rotate(90deg); }
|
|
162
162
|
.iui-table-body .iui-row.iui-row-expanded + .iui-expanded-content{
|
|
163
163
|
border-left-color:#DCE0E3;
|
|
@@ -304,6 +304,8 @@
|
|
|
304
304
|
justify-content:center;
|
|
305
305
|
align-items:center;
|
|
306
306
|
flex-basis:48px; }
|
|
307
|
+
.iui-cell:not(.iui-slot):last-child{
|
|
308
|
+
padding-right:16px; }
|
|
307
309
|
.iui-cell.iui-positive{
|
|
308
310
|
background-color:rgba(83, 162, 26, 0.1);
|
|
309
311
|
background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)); }
|
|
@@ -346,7 +348,7 @@
|
|
|
346
348
|
border:none;
|
|
347
349
|
vertical-align:baseline;
|
|
348
350
|
display:flex;
|
|
349
|
-
justify-content:space-
|
|
351
|
+
justify-content:space-between;
|
|
350
352
|
align-items:center;
|
|
351
353
|
min-height:55px;
|
|
352
354
|
padding:0 16px;
|
|
@@ -371,25 +373,34 @@
|
|
|
371
373
|
color:var(--iui-text-color); }
|
|
372
374
|
.iui-paginator > .iui-center .iui-button-group{
|
|
373
375
|
margin:0 8px; }
|
|
374
|
-
.iui-paginator > .iui-center .iui-button-group >
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
.iui-paginator > .iui-center .iui-button-group > .iui-button
|
|
378
|
-
.iui-paginator > .iui-center .iui-button-group > .iui-ellipsis
|
|
379
|
-
width:
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
376
|
+
.iui-paginator > .iui-center .iui-button-group > *{
|
|
377
|
+
margin-right:0;
|
|
378
|
+
display:flex; }
|
|
379
|
+
.iui-paginator > .iui-center .iui-button-group > * > .iui-button,
|
|
380
|
+
.iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
|
|
381
|
+
width:38px; }
|
|
382
|
+
.iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
|
|
383
|
+
.iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
|
|
384
|
+
width:27px; }
|
|
385
|
+
.iui-paginator > .iui-center .iui-button-group > * > .iui-button{
|
|
386
|
+
transition:none; }
|
|
387
|
+
.iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
|
|
388
|
+
display:flex;
|
|
389
|
+
justify-content:center;
|
|
390
|
+
align-items:center;
|
|
391
|
+
color:rgba(0, 0, 0, 0.4);
|
|
392
|
+
color:var(--iui-text-color-muted); }
|
|
393
|
+
.iui-paginator > .iui-center .iui-button-group > * > .iui-active::after{
|
|
394
|
+
top:auto;
|
|
395
|
+
bottom:2px; }
|
|
391
396
|
.iui-paginator > .iui-right{
|
|
392
397
|
justify-content:flex-end; }
|
|
398
|
+
.iui-paginator-page-size-label{
|
|
399
|
+
color:rgba(0, 0, 0, 0.4);
|
|
400
|
+
color:var(--iui-text-color-muted);
|
|
401
|
+
white-space:nowrap;
|
|
402
|
+
overflow:hidden;
|
|
403
|
+
text-overflow:ellipsis; }
|
|
393
404
|
|
|
394
405
|
.iui-column-filter{
|
|
395
406
|
margin:0;
|