@itwin/itwinui-css 0.37.2 → 0.40.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 +563 -367
- package/css/breadcrumbs.css +26 -15
- package/css/button.css +192 -137
- package/css/code.css +2 -0
- package/css/color-picker.css +2 -0
- package/css/date-picker.css +2 -0
- package/css/header.css +134 -91
- package/css/information-panel.css +26 -0
- package/css/inputs.css +79 -43
- package/css/menu.css +3 -3
- package/css/side-navigation.css +27 -24
- package/css/table.css +9 -2
- package/css/tabs.css +15 -12
- package/css/tile.css +46 -40
- package/package.json +6 -2
- package/scss/breadcrumbs/breadcrumbs.scss +1 -1
- package/scss/button/borderless.scss +31 -46
- package/scss/button/button-group.scss +6 -15
- package/scss/button/button-icon.scss +12 -0
- package/scss/button/button.scss +28 -35
- package/scss/button/classes.scss +25 -3
- package/scss/button/cta.scss +22 -19
- package/scss/button/default.scss +29 -41
- package/scss/button/disabled.scss +3 -14
- package/scss/button/high-visibility.scss +22 -19
- package/scss/button/index.scss +1 -0
- package/scss/button/split-menu.scss +7 -8
- package/scss/code/codeblock.scss +4 -0
- package/scss/color-picker/color-picker.scss +16 -1
- package/scss/date-picker/date-picker.scss +2 -8
- package/scss/header/classes.scss +4 -0
- package/scss/header/header.scss +72 -60
- package/scss/information-panel/classes.scss +4 -0
- package/scss/information-panel/information-panel.scss +37 -0
- package/scss/inputs/checkbox-radio.scss +9 -9
- package/scss/inputs/checkbox.scss +36 -0
- package/scss/inputs/classes.scss +5 -1
- package/scss/inputs/labeled-inputs.scss +41 -16
- package/scss/inputs/radio-tile.scss +2 -4
- package/scss/keyboard/keyboard.scss +2 -4
- package/scss/location-marker/data-rich.scss +1 -2
- package/scss/menu/menu.scss +3 -11
- package/scss/modal/modal.scss +1 -2
- package/scss/progress-indicator/linear.scss +3 -10
- package/scss/progress-indicator/overlay.scss +3 -9
- package/scss/progress-indicator/radial.scss +4 -4
- package/scss/side-navigation/side-navigation.scss +32 -29
- package/scss/slider/slider.scss +5 -3
- package/scss/style/global.scss +1 -4
- package/scss/style/mixins.scss +17 -12
- package/scss/style/theme.scss +63 -208
- package/scss/table/table.scss +7 -19
- package/scss/table/variables.scss +2 -4
- package/scss/tabs/borderless.scss +3 -12
- package/scss/tabs/pill.scss +2 -8
- package/scss/tabs/tabs.scss +11 -8
- package/scss/tile/tile.scss +4 -2
- package/scss/time-picker/time-picker.scss +1 -4
- package/scss/toast-notification/categories.scss +1 -4
- package/scss/toast-notification/toast.scss +1 -3
- package/scss/toggle-switch/toggle-switch.scss +4 -8
- package/scss/tooltip/tooltip.scss +1 -2
- package/scss/user-icon/user-icon.scss +3 -6
- package/scss/wizard/wizard.scss +2 -1
package/css/header.css
CHANGED
|
@@ -32,41 +32,50 @@
|
|
|
32
32
|
display:flex;
|
|
33
33
|
align-items:center;
|
|
34
34
|
height:100%; }
|
|
35
|
-
.iui-page-header
|
|
35
|
+
.iui-page-header .iui-header-button-icon{
|
|
36
36
|
width:24px;
|
|
37
37
|
height:24px;
|
|
38
38
|
border-radius:3px; }
|
|
39
39
|
@media (prefers-reduced-motion: no-preference){
|
|
40
|
-
.iui-page-header
|
|
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
|
-
.iui-page-header
|
|
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
|
-
.iui-page-header
|
|
53
|
+
.iui-page-header .iui-header-button.iui-header-button:focus{
|
|
47
54
|
box-shadow:none;
|
|
48
55
|
outline-offset:-1px;
|
|
49
56
|
outline:1px solid #008BE1;
|
|
50
57
|
outline:1px solid var(--iui-color-foreground-primary); }
|
|
51
|
-
.iui-page-header
|
|
58
|
+
.iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
|
|
52
59
|
outline:0; }
|
|
53
|
-
.iui-page-header
|
|
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
|
|
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
|
|
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
|
|
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
|
|
74
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
|
|
68
75
|
flex-shrink:0; }
|
|
69
|
-
.iui-page-header
|
|
76
|
+
.iui-page-header .iui-header-button.iui-header-button > * + *{
|
|
77
|
+
margin-left:12px; }
|
|
78
|
+
.iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
|
|
70
79
|
padding:4px;
|
|
71
80
|
width:16px;
|
|
72
81
|
height:16px;
|
|
@@ -76,90 +85,101 @@
|
|
|
76
85
|
background-color:var(--iui-color-background-3);
|
|
77
86
|
fill:var(--iui-icons-color); }
|
|
78
87
|
@media (prefers-reduced-motion: no-preference){
|
|
79
|
-
.iui-page-header
|
|
88
|
+
.iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
|
|
80
89
|
transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
|
|
81
|
-
.iui-page-header
|
|
90
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active svg{
|
|
82
91
|
fill:#008BE1;
|
|
83
92
|
fill:var(--iui-icons-color-primary); }
|
|
84
|
-
.iui-page-header
|
|
93
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover{
|
|
85
94
|
box-shadow:0 2px 0 0 #008BE1;
|
|
86
95
|
background-color:rgba(0, 139, 225, 0.1);
|
|
87
96
|
box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
|
|
88
97
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
89
|
-
.iui-page-header
|
|
98
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover .iui-header-button-icon{
|
|
90
99
|
fill:#008BE1;
|
|
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
|
|
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
|
-
.iui-page-header
|
|
106
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active:focus{
|
|
98
107
|
box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px, 0 2px 0 0 #008BE1;
|
|
99
108
|
box-shadow:var(--iui-focus-box-shadow), 0 2px 0 0 var(--iui-color-foreground-primary); }
|
|
100
|
-
.iui-page-header
|
|
109
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active:focus:not(:focus-visible){
|
|
101
110
|
box-shadow:0 2px 0 0 #008BE1;
|
|
102
111
|
box-shadow:0 2px 0 0 var(--iui-color-foreground-primary); }
|
|
103
|
-
.iui-page-header
|
|
112
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled{
|
|
104
113
|
background-color:rgba(0, 0, 0, 0.05);
|
|
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
|
|
117
|
+
.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{
|
|
109
118
|
color:rgba(0, 0, 0, 0.2);
|
|
110
119
|
color:var(--iui-icons-color-actionable-disabled); }
|
|
111
|
-
.iui-page-header
|
|
120
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-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-icon,
|
|
122
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
|
|
112
123
|
fill:rgba(0, 0, 0, 0.2);
|
|
113
124
|
fill:var(--iui-icons-color-actionable-disabled); }
|
|
114
|
-
.iui-page-header
|
|
125
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-header-button-icon{
|
|
115
126
|
background-color:rgba(0, 0, 0, 0.05);
|
|
116
127
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
117
|
-
.iui-page-header
|
|
128
|
+
.iui-page-header .iui-header-button.iui-header-button:disabled .iui-header-button-icon{
|
|
118
129
|
filter:grayscale(1) opacity(0.7); }
|
|
119
130
|
.iui-page-header.iui-slim > .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
|
|
120
131
|
width:12px;
|
|
121
132
|
height:12px;
|
|
122
133
|
padding:2px; }
|
|
123
|
-
.iui-page-header.iui-slim > .iui-left .iui-button
|
|
134
|
+
.iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
|
|
124
135
|
opacity:0;
|
|
125
136
|
height:0.1px;
|
|
126
137
|
width:0.1px;
|
|
127
138
|
margin:0;
|
|
128
139
|
padding:0; }
|
|
129
|
-
.iui-page-header
|
|
140
|
+
.iui-page-header .iui-header-split-button{
|
|
130
141
|
height:100%;
|
|
131
142
|
display:flex;
|
|
132
143
|
overflow:hidden;
|
|
133
144
|
max-width:25vw; }
|
|
134
|
-
.iui-page-header
|
|
145
|
+
.iui-page-header .iui-header-split-button .iui-button{
|
|
146
|
+
padding:0 12px;
|
|
147
|
+
height:49px;
|
|
148
|
+
font-size:16px;
|
|
149
|
+
gap:12px;
|
|
150
|
+
gap:0;
|
|
135
151
|
max-width:25vw;
|
|
152
|
+
height:100%;
|
|
153
|
+
border-radius:0;
|
|
136
154
|
overflow:hidden;
|
|
137
155
|
padding-right:8px;
|
|
138
156
|
padding:0 4px; }
|
|
139
|
-
.iui-page-header
|
|
157
|
+
.iui-page-header .iui-header-split-button .iui-button:focus{
|
|
140
158
|
box-shadow:none;
|
|
141
159
|
outline-offset:-1px;
|
|
142
160
|
outline:1px solid #008BE1;
|
|
143
161
|
outline:1px solid var(--iui-color-foreground-primary); }
|
|
144
|
-
.iui-page-header
|
|
162
|
+
.iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
|
|
145
163
|
outline:0; }
|
|
146
|
-
.iui-page-header
|
|
164
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label{
|
|
147
165
|
text-align:left;
|
|
148
166
|
font-size:14px;
|
|
149
167
|
overflow:hidden; }
|
|
150
|
-
.iui-page-header
|
|
168
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label > div{
|
|
151
169
|
overflow:hidden;
|
|
152
170
|
text-overflow:ellipsis; }
|
|
153
|
-
.iui-page-header
|
|
171
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
|
|
154
172
|
height:22px;
|
|
155
173
|
opacity:0.6;
|
|
156
174
|
opacity:var(--iui-opacity-3); }
|
|
157
175
|
@media (prefers-reduced-motion: no-preference){
|
|
158
|
-
.iui-page-header
|
|
176
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
|
|
159
177
|
transition:all 0.2s ease; } }
|
|
160
|
-
.iui-page-header
|
|
178
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
|
|
161
179
|
flex-shrink:0; }
|
|
162
|
-
.iui-page-header
|
|
180
|
+
.iui-page-header .iui-header-split-button .iui-button > * + *{
|
|
181
|
+
margin-left:12px; }
|
|
182
|
+
.iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
|
|
163
183
|
padding:4px;
|
|
164
184
|
width:16px;
|
|
165
185
|
height:16px;
|
|
@@ -169,131 +189,108 @@
|
|
|
169
189
|
background-color:var(--iui-color-background-3);
|
|
170
190
|
fill:var(--iui-icons-color); }
|
|
171
191
|
@media (prefers-reduced-motion: no-preference){
|
|
172
|
-
.iui-page-header
|
|
192
|
+
.iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
|
|
173
193
|
transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
|
|
174
|
-
.iui-page-header
|
|
194
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active svg{
|
|
175
195
|
fill:#008BE1;
|
|
176
196
|
fill:var(--iui-icons-color-primary); }
|
|
177
|
-
.iui-page-header
|
|
197
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover{
|
|
178
198
|
box-shadow:0 2px 0 0 #008BE1;
|
|
179
199
|
background-color:rgba(0, 139, 225, 0.1);
|
|
180
200
|
box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
|
|
181
201
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
182
|
-
.iui-page-header
|
|
202
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover .iui-header-button-icon{
|
|
183
203
|
fill:#008BE1;
|
|
184
204
|
background-color:rgba(0, 139, 225, 0.1);
|
|
185
205
|
fill:var(--iui-icons-color-primary);
|
|
186
206
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
187
|
-
.iui-page-header
|
|
207
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
|
|
188
208
|
color:#008BE1;
|
|
189
209
|
color:var(--iui-color-foreground-primary); }
|
|
190
|
-
.iui-page-header
|
|
210
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active:focus{
|
|
191
211
|
box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px, 0 2px 0 0 #008BE1;
|
|
192
212
|
box-shadow:var(--iui-focus-box-shadow), 0 2px 0 0 var(--iui-color-foreground-primary); }
|
|
193
|
-
.iui-page-header
|
|
213
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active:focus:not(:focus-visible){
|
|
194
214
|
box-shadow:0 2px 0 0 #008BE1;
|
|
195
215
|
box-shadow:0 2px 0 0 var(--iui-color-foreground-primary); }
|
|
196
|
-
.iui-page-header
|
|
216
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled{
|
|
197
217
|
background-color:rgba(0, 0, 0, 0.05);
|
|
198
218
|
box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
|
|
199
219
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
|
|
200
220
|
box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
|
|
201
|
-
.iui-page-header
|
|
221
|
+
.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{
|
|
202
222
|
color:rgba(0, 0, 0, 0.2);
|
|
203
223
|
color:var(--iui-icons-color-actionable-disabled); }
|
|
204
|
-
.iui-page-header
|
|
224
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-icon,
|
|
225
|
+
.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:disabled svg{
|
|
205
227
|
fill:rgba(0, 0, 0, 0.2);
|
|
206
228
|
fill:var(--iui-icons-color-actionable-disabled); }
|
|
207
|
-
.iui-page-header
|
|
229
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-header-button-icon{
|
|
208
230
|
background-color:rgba(0, 0, 0, 0.05);
|
|
209
231
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
210
|
-
.iui-page-header
|
|
232
|
+
.iui-page-header .iui-header-split-button .iui-button:disabled .iui-header-button-icon{
|
|
211
233
|
filter:grayscale(1) opacity(0.7); }
|
|
212
234
|
.iui-page-header.iui-slim > .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
|
|
213
235
|
width:12px;
|
|
214
236
|
height:12px;
|
|
215
237
|
padding:2px; }
|
|
216
|
-
.iui-page-header.iui-slim > .iui-left .iui-button
|
|
238
|
+
.iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
|
|
217
239
|
opacity:0;
|
|
218
240
|
height:0.1px;
|
|
219
241
|
width:0.1px;
|
|
220
242
|
margin:0;
|
|
221
243
|
padding:0; }
|
|
222
|
-
.iui-page-header
|
|
244
|
+
.iui-page-header .iui-header-split-button .iui-button:first-child{
|
|
223
245
|
padding-left:12px; }
|
|
224
|
-
.iui-page-header
|
|
246
|
+
.iui-page-header .iui-header-split-button.iui-active svg{
|
|
225
247
|
fill:#008BE1;
|
|
226
248
|
fill:var(--iui-icons-color-primary); }
|
|
227
|
-
.iui-page-header
|
|
249
|
+
.iui-page-header .iui-header-split-button.iui-active, .iui-page-header .iui-header-split-button.iui-active:hover{
|
|
228
250
|
box-shadow:0 2px 0 0 #008BE1;
|
|
229
251
|
background-color:rgba(0, 139, 225, 0.1);
|
|
230
252
|
box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
|
|
231
253
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
232
|
-
.iui-page-header
|
|
254
|
+
.iui-page-header .iui-header-split-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:hover .iui-header-button-icon{
|
|
233
255
|
fill:#008BE1;
|
|
234
256
|
background-color:rgba(0, 139, 225, 0.1);
|
|
235
257
|
fill:var(--iui-icons-color-primary);
|
|
236
258
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
237
|
-
.iui-page-header
|
|
259
|
+
.iui-page-header .iui-header-split-button.iui-active .iui-button-label{
|
|
238
260
|
color:#008BE1;
|
|
239
261
|
color:var(--iui-color-foreground-primary); }
|
|
240
|
-
.iui-page-header
|
|
262
|
+
.iui-page-header .iui-header-split-button.iui-active:focus{
|
|
241
263
|
box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px, 0 2px 0 0 #008BE1;
|
|
242
264
|
box-shadow:var(--iui-focus-box-shadow), 0 2px 0 0 var(--iui-color-foreground-primary); }
|
|
243
|
-
.iui-page-header
|
|
265
|
+
.iui-page-header .iui-header-split-button.iui-active:focus:not(:focus-visible){
|
|
244
266
|
box-shadow:0 2px 0 0 #008BE1;
|
|
245
267
|
box-shadow:0 2px 0 0 var(--iui-color-foreground-primary); }
|
|
246
|
-
.iui-page-header
|
|
268
|
+
.iui-page-header .iui-header-split-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button.iui-active:disabled{
|
|
247
269
|
background-color:rgba(0, 0, 0, 0.05);
|
|
248
270
|
box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
|
|
249
271
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
|
|
250
272
|
box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
|
|
251
|
-
.iui-page-header
|
|
273
|
+
.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{
|
|
252
274
|
color:rgba(0, 0, 0, 0.2);
|
|
253
275
|
color:var(--iui-icons-color-actionable-disabled); }
|
|
254
|
-
.iui-page-header
|
|
276
|
+
.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-icon,
|
|
277
|
+
.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:disabled svg{
|
|
255
279
|
fill:rgba(0, 0, 0, 0.2);
|
|
256
280
|
fill:var(--iui-icons-color-actionable-disabled); }
|
|
257
|
-
.iui-page-header
|
|
281
|
+
.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-header-button-icon{
|
|
258
282
|
background-color:rgba(0, 0, 0, 0.05);
|
|
259
283
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
260
|
-
.iui-page-header
|
|
284
|
+
.iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless, .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless:hover{
|
|
261
285
|
background-color:transparent; }
|
|
262
|
-
.iui-page-header
|
|
286
|
+
.iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
|
|
263
287
|
display:none; }
|
|
264
|
-
.iui-page-header
|
|
288
|
+
.iui-page-header .iui-header-split-button.iui-active .iui-button:last-child:hover{
|
|
265
289
|
background-color:rgba(0, 139, 225, 0.1);
|
|
266
290
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
267
|
-
.iui-page-header
|
|
291
|
+
.iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
|
|
268
292
|
background-color:transparent;
|
|
269
293
|
background-color:transparent; }
|
|
270
|
-
.iui-page-header > .iui-left .iui-header-logo{
|
|
271
|
-
display:inline-flex;
|
|
272
|
-
align-items:center;
|
|
273
|
-
white-space:nowrap;
|
|
274
|
-
height:100%; }
|
|
275
|
-
.iui-page-header > .iui-left .iui-header-logo[role='button']{
|
|
276
|
-
cursor:pointer; }
|
|
277
|
-
.iui-page-header > .iui-left .iui-header-logo[role='button']:focus{
|
|
278
|
-
box-shadow:none;
|
|
279
|
-
outline-offset:-1px;
|
|
280
|
-
outline:1px solid #008BE1;
|
|
281
|
-
outline:1px solid var(--iui-color-foreground-primary); }
|
|
282
|
-
.iui-page-header > .iui-left .iui-header-logo[role='button']:focus:not(:focus-visible){
|
|
283
|
-
outline:0; }
|
|
284
|
-
.iui-page-header > .iui-left .iui-header-logo[role='button']:hover, .iui-page-header > .iui-left .iui-header-logo[role='button']:focus-visible{
|
|
285
|
-
background-color:#f2f2f2;
|
|
286
|
-
background-color:var(--iui-color-background-1-overlay); }
|
|
287
|
-
.iui-page-header > .iui-left .iui-header-logo .iui-header-button-icon{
|
|
288
|
-
margin:0 24px;
|
|
289
|
-
fill:rgba(0, 0, 0, 0.8);
|
|
290
|
-
fill:var(--iui-icons-color-actionable); }
|
|
291
|
-
.iui-page-header > .iui-left .iui-header-logo > .iui-label{
|
|
292
|
-
margin-right:12px;
|
|
293
|
-
font-size:16px; }
|
|
294
|
-
@media (prefers-reduced-motion: no-preference){
|
|
295
|
-
.iui-page-header > .iui-left .iui-header-logo > .iui-label{
|
|
296
|
-
transition:font-size 0.2s ease-out; } }
|
|
297
294
|
.iui-page-header > .iui-left > nav{
|
|
298
295
|
display:flex;
|
|
299
296
|
align-items:center;
|
|
@@ -301,6 +298,7 @@
|
|
|
301
298
|
.iui-page-header > .iui-left,
|
|
302
299
|
.iui-page-header > .iui-left > nav{
|
|
303
300
|
overflow:hidden;
|
|
301
|
+
box-sizing:content-box;
|
|
304
302
|
margin-bottom:-4px;
|
|
305
303
|
padding-bottom:4px; }
|
|
306
304
|
.iui-page-header > .iui-left .iui-chevron{
|
|
@@ -357,14 +355,59 @@
|
|
|
357
355
|
line-height:24px;
|
|
358
356
|
font-size:12px; }
|
|
359
357
|
@media (max-width: 768px){
|
|
360
|
-
.iui-page-header .iui-left .iui-
|
|
358
|
+
.iui-page-header .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
|
|
361
359
|
opacity:0;
|
|
362
360
|
height:0.1px;
|
|
363
361
|
width:0.1px;
|
|
364
362
|
margin:0;
|
|
365
363
|
padding:0; }
|
|
366
|
-
.iui-page-header .iui-left .iui-
|
|
364
|
+
.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{
|
|
367
365
|
margin-left:0; } }
|
|
368
366
|
@media (max-width: 1024px){
|
|
369
367
|
.iui-page-header .iui-left .iui-header-logo > .iui-label{
|
|
370
368
|
display:none; } }
|
|
369
|
+
|
|
370
|
+
.iui-header-logo{
|
|
371
|
+
display:inline-flex;
|
|
372
|
+
align-items:center;
|
|
373
|
+
white-space:nowrap;
|
|
374
|
+
height:100%; }
|
|
375
|
+
a.iui-header-logo,
|
|
376
|
+
button.iui-header-logo, .iui-header-logo[role='button']{
|
|
377
|
+
cursor:pointer;
|
|
378
|
+
margin:0;
|
|
379
|
+
padding:0;
|
|
380
|
+
border:none;
|
|
381
|
+
vertical-align:baseline;
|
|
382
|
+
font-family:inherit;
|
|
383
|
+
background-color:unset;
|
|
384
|
+
color:unset; }
|
|
385
|
+
a.iui-header-logo:focus,
|
|
386
|
+
button.iui-header-logo:focus, .iui-header-logo[role='button']:focus{
|
|
387
|
+
box-shadow:none;
|
|
388
|
+
outline-offset:-1px;
|
|
389
|
+
outline:1px solid #008BE1;
|
|
390
|
+
outline:1px solid var(--iui-color-foreground-primary); }
|
|
391
|
+
a.iui-header-logo:focus:not(:focus-visible),
|
|
392
|
+
button.iui-header-logo:focus:not(:focus-visible), .iui-header-logo[role='button']:focus:not(:focus-visible){
|
|
393
|
+
outline:0; }
|
|
394
|
+
a.iui-header-logo:hover, a.iui-header-logo:focus,
|
|
395
|
+
button.iui-header-logo:hover,
|
|
396
|
+
button.iui-header-logo:focus, .iui-header-logo[role='button']:hover, .iui-header-logo[role='button']:focus{
|
|
397
|
+
background-color:rgba(0, 0, 0, 0.1);
|
|
398
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
|
|
399
|
+
a.iui-header-logo:hover:not(:focus-visible):not(:hover), a.iui-header-logo:focus:not(:focus-visible):not(:hover),
|
|
400
|
+
button.iui-header-logo:hover:not(:focus-visible):not(:hover),
|
|
401
|
+
button.iui-header-logo:focus:not(:focus-visible):not(:hover), .iui-header-logo[role='button']:hover:not(:focus-visible):not(:hover), .iui-header-logo[role='button']:focus:not(:focus-visible):not(:hover){
|
|
402
|
+
background-color:#FFF;
|
|
403
|
+
background-color:var(--iui-color-background-1); }
|
|
404
|
+
.iui-header-logo .iui-header-button-icon{
|
|
405
|
+
margin:0 24px;
|
|
406
|
+
fill:rgba(0, 0, 0, 0.8);
|
|
407
|
+
fill:var(--iui-icons-color-actionable); }
|
|
408
|
+
.iui-header-logo > .iui-label{
|
|
409
|
+
margin-right:12px;
|
|
410
|
+
font-size:16px; }
|
|
411
|
+
@media (prefers-reduced-motion: no-preference){
|
|
412
|
+
.iui-header-logo > .iui-label{
|
|
413
|
+
transition:font-size 0.2s ease-out; } }
|
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
display:flex;
|
|
13
13
|
flex-direction:column;
|
|
14
14
|
box-sizing:border-box;
|
|
15
|
+
max-width:100%;
|
|
16
|
+
max-height:100%;
|
|
15
17
|
z-index:2;
|
|
16
18
|
background-color:#FFF;
|
|
17
19
|
background-color:var(--iui-color-background-1); }
|
|
@@ -57,6 +59,7 @@
|
|
|
57
59
|
width:24px;
|
|
58
60
|
height:24px;
|
|
59
61
|
margin-right:8px;
|
|
62
|
+
flex-shrink:0;
|
|
60
63
|
fill:rgba(0, 0, 0, 0.4);
|
|
61
64
|
fill:var(--iui-icons-color); }
|
|
62
65
|
.iui-information-panel .iui-information-header .iui-information-header-actions{
|
|
@@ -129,3 +132,26 @@
|
|
|
129
132
|
transform:translate(0); }
|
|
130
133
|
.iui-information-panel.iui-visible > .iui-resizer{
|
|
131
134
|
display:flex; }
|
|
135
|
+
|
|
136
|
+
.iui-information-body-content{
|
|
137
|
+
display:-ms-grid;
|
|
138
|
+
display:grid; }
|
|
139
|
+
.iui-information-body-content .iui-input-label{
|
|
140
|
+
font-weight:400;
|
|
141
|
+
color:rgba(0, 0, 0, 0.4);
|
|
142
|
+
color:var(--iui-text-color-muted); }
|
|
143
|
+
.iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
|
|
144
|
+
margin-bottom:11px; }
|
|
145
|
+
.iui-information-body-content.iui-inline{
|
|
146
|
+
row-gap:11px;
|
|
147
|
+
-ms-grid-columns:auto 1fr;
|
|
148
|
+
grid-template-columns:auto 1fr;
|
|
149
|
+
align-items:center; }
|
|
150
|
+
.iui-information-body-content.iui-inline .iui-input-label{
|
|
151
|
+
margin:0 16px 0 0;
|
|
152
|
+
-ms-grid-column-span:1;
|
|
153
|
+
-ms-grid-column-align:end;
|
|
154
|
+
justify-self:end;
|
|
155
|
+
text-align:end; }
|
|
156
|
+
.iui-information-body-content.iui-inline .iui-input-label.iui-required{
|
|
157
|
+
margin-right:6px; }
|