@itwin/itwinui-css 0.38.0 → 0.41.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.
Files changed (72) hide show
  1. package/css/all.css +686 -357
  2. package/css/breadcrumbs.css +31 -15
  3. package/css/button.css +228 -137
  4. package/css/code.css +2 -0
  5. package/css/color-picker.css +2 -0
  6. package/css/date-picker.css +2 -0
  7. package/css/header.css +134 -91
  8. package/css/information-panel.css +26 -0
  9. package/css/inputs.css +40 -31
  10. package/css/menu.css +3 -3
  11. package/css/side-navigation.css +27 -24
  12. package/css/table.css +18 -3
  13. package/css/tabs.css +15 -12
  14. package/css/tile.css +51 -40
  15. package/css/tree.css +107 -0
  16. package/css/user-icon.css +3 -1
  17. package/package.json +6 -2
  18. package/scss/breadcrumbs/breadcrumbs.scss +1 -1
  19. package/scss/button/borderless.scss +37 -45
  20. package/scss/button/button-group.scss +6 -15
  21. package/scss/button/button-icon.scss +12 -0
  22. package/scss/button/button.scss +28 -35
  23. package/scss/button/classes.scss +25 -3
  24. package/scss/button/cta.scss +31 -21
  25. package/scss/button/default.scss +40 -45
  26. package/scss/button/disabled.scss +3 -14
  27. package/scss/button/high-visibility.scss +31 -21
  28. package/scss/button/index.scss +1 -0
  29. package/scss/button/split-menu.scss +7 -8
  30. package/scss/classes.scss +1 -0
  31. package/scss/code/codeblock.scss +4 -0
  32. package/scss/color-picker/color-picker.scss +16 -1
  33. package/scss/date-picker/date-picker.scss +2 -8
  34. package/scss/header/classes.scss +4 -0
  35. package/scss/header/header.scss +71 -59
  36. package/scss/index.scss +1 -0
  37. package/scss/information-panel/classes.scss +4 -0
  38. package/scss/information-panel/information-panel.scss +37 -0
  39. package/scss/inputs/checkbox-radio.scss +1 -3
  40. package/scss/inputs/checkbox.scss +5 -2
  41. package/scss/inputs/classes.scss +5 -1
  42. package/scss/inputs/labeled-inputs.scss +41 -16
  43. package/scss/inputs/radio-tile.scss +2 -4
  44. package/scss/keyboard/keyboard.scss +2 -4
  45. package/scss/location-marker/data-rich.scss +1 -2
  46. package/scss/menu/menu.scss +3 -11
  47. package/scss/modal/modal.scss +1 -2
  48. package/scss/progress-indicator/linear.scss +3 -10
  49. package/scss/progress-indicator/overlay.scss +3 -9
  50. package/scss/progress-indicator/radial.scss +4 -4
  51. package/scss/side-navigation/side-navigation.scss +32 -29
  52. package/scss/slider/slider.scss +5 -3
  53. package/scss/style/global.scss +1 -4
  54. package/scss/style/mixins.scss +17 -12
  55. package/scss/style/theme.scss +63 -208
  56. package/scss/table/paginator.scss +9 -1
  57. package/scss/table/table.scss +11 -19
  58. package/scss/table/variables.scss +2 -4
  59. package/scss/tabs/borderless.scss +3 -12
  60. package/scss/tabs/pill.scss +2 -8
  61. package/scss/tabs/tabs.scss +11 -8
  62. package/scss/tile/tile.scss +4 -2
  63. package/scss/time-picker/time-picker.scss +1 -4
  64. package/scss/toast-notification/categories.scss +1 -4
  65. package/scss/toast-notification/toast.scss +1 -3
  66. package/scss/toggle-switch/toggle-switch.scss +4 -8
  67. package/scss/tooltip/tooltip.scss +1 -2
  68. package/scss/tree/classes.scss +15 -0
  69. package/scss/tree/index.scss +3 -0
  70. package/scss/tree/tree.scss +137 -0
  71. package/scss/user-icon/user-icon.scss +6 -6
  72. 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 > .iui-left .iui-header-button-icon{
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 > .iui-left .iui-header-button-icon{
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 > .iui-left .iui-header-button{
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 > .iui-left .iui-header-button:focus{
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 > .iui-left .iui-header-button:focus:not(:focus-visible){
58
+ .iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
52
59
  outline:0; }
53
- .iui-page-header > .iui-left .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-left .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-left .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-left .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-left .iui-header-button > .iui-icon{
74
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
68
75
  flex-shrink:0; }
69
- .iui-page-header > .iui-left .iui-header-button .iui-header-button-icon{
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 > .iui-left .iui-header-button .iui-header-button-icon{
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 > .iui-left .iui-header-button.iui-active svg{
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 > .iui-left .iui-header-button.iui-active, .iui-page-header > .iui-left .iui-header-button.iui-active:hover{
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 > .iui-left .iui-header-button.iui-active .iui-header-button-icon, .iui-page-header > .iui-left .iui-header-button.iui-active:hover .iui-header-button-icon{
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 > .iui-left .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
- .iui-page-header > .iui-left .iui-header-button.iui-active:focus{
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 > .iui-left .iui-header-button.iui-active:focus:not(:focus-visible){
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 > .iui-left .iui-header-button.iui-active.iui-disabled, .iui-page-header > .iui-left .iui-header-button.iui-active:disabled{
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 > .iui-left .iui-header-button.iui-active.iui-disabled .iui-label, .iui-page-header > .iui-left .iui-header-button.iui-active:disabled .iui-label{
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 > .iui-left .iui-header-button.iui-active.iui-disabled .iui-icon, .iui-page-header > .iui-left .iui-header-button.iui-active:disabled .iui-icon{
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 > .iui-left .iui-header-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header > .iui-left .iui-header-button.iui-active:disabled .iui-header-button-icon{
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 > .iui-left .iui-header-button:disabled .iui-header-button-icon{
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 .iui-label .iui-description{
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 > .iui-left .iui-header-split-button{
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 > .iui-left .iui-header-split-button .iui-button{
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 > .iui-left .iui-header-split-button .iui-button:focus{
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 > .iui-left .iui-header-split-button .iui-button:focus:not(:focus-visible){
162
+ .iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
145
163
  outline:0; }
146
- .iui-page-header > .iui-left .iui-header-split-button .iui-button > .iui-label{
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 > .iui-left .iui-header-split-button .iui-button > .iui-label > div{
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 > .iui-left .iui-header-split-button .iui-button > .iui-label .iui-description{
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 > .iui-left .iui-header-split-button .iui-button > .iui-label .iui-description{
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 > .iui-left .iui-header-split-button .iui-button > .iui-icon{
178
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
161
179
  flex-shrink:0; }
162
- .iui-page-header > .iui-left .iui-header-split-button .iui-button .iui-header-button-icon{
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 > .iui-left .iui-header-split-button .iui-button .iui-header-button-icon{
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 > .iui-left .iui-header-split-button .iui-button.iui-active svg{
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 > .iui-left .iui-header-split-button .iui-button.iui-active, .iui-page-header > .iui-left .iui-header-split-button .iui-button.iui-active:hover{
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 > .iui-left .iui-header-split-button .iui-button.iui-active .iui-header-button-icon, .iui-page-header > .iui-left .iui-header-split-button .iui-button.iui-active:hover .iui-header-button-icon{
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 > .iui-left .iui-header-split-button .iui-button.iui-active .iui-label{
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 > .iui-left .iui-header-split-button .iui-button.iui-active:focus{
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 > .iui-left .iui-header-split-button .iui-button.iui-active:focus:not(:focus-visible){
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 > .iui-left .iui-header-split-button .iui-button.iui-active.iui-disabled, .iui-page-header > .iui-left .iui-header-split-button .iui-button.iui-active:disabled{
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 > .iui-left .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-label, .iui-page-header > .iui-left .iui-header-split-button .iui-button.iui-active:disabled .iui-label{
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 > .iui-left .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-icon, .iui-page-header > .iui-left .iui-header-split-button .iui-button.iui-active:disabled .iui-icon{
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 > .iui-left .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header > .iui-left .iui-header-split-button .iui-button.iui-active:disabled .iui-header-button-icon{
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 > .iui-left .iui-header-split-button .iui-button:disabled .iui-header-button-icon{
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 .iui-label .iui-description{
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 > .iui-left .iui-header-split-button .iui-button:first-child{
244
+ .iui-page-header .iui-header-split-button .iui-button:first-child{
223
245
  padding-left:12px; }
224
- .iui-page-header > .iui-left .iui-header-split-button.iui-active svg{
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 > .iui-left .iui-header-split-button.iui-active, .iui-page-header > .iui-left .iui-header-split-button.iui-active:hover{
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 > .iui-left .iui-header-split-button.iui-active .iui-header-button-icon, .iui-page-header > .iui-left .iui-header-split-button.iui-active:hover .iui-header-button-icon{
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 > .iui-left .iui-header-split-button.iui-active .iui-label{
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 > .iui-left .iui-header-split-button.iui-active:focus{
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 > .iui-left .iui-header-split-button.iui-active:focus:not(:focus-visible){
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 > .iui-left .iui-header-split-button.iui-active.iui-disabled, .iui-page-header > .iui-left .iui-header-split-button.iui-active:disabled{
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 > .iui-left .iui-header-split-button.iui-active.iui-disabled .iui-label, .iui-page-header > .iui-left .iui-header-split-button.iui-active:disabled .iui-label{
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 > .iui-left .iui-header-split-button.iui-active.iui-disabled .iui-icon, .iui-page-header > .iui-left .iui-header-split-button.iui-active:disabled .iui-icon{
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 > .iui-left .iui-header-split-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header > .iui-left .iui-header-split-button.iui-active:disabled .iui-header-button-icon{
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 > .iui-left .iui-header-split-button.iui-active .iui-button.iui-borderless, .iui-page-header > .iui-left .iui-header-split-button.iui-active .iui-button.iui-borderless:hover{
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 > .iui-left .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
286
+ .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
263
287
  display:none; }
264
- .iui-page-header > .iui-left .iui-header-split-button.iui-active .iui-button:last-child:hover{
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 > .iui-left .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
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:rgba(0, 0, 0, 0.1);
286
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
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-header-button .iui-header-button-icon.iui-header-button-icon, .iui-page-header.iui-slim.iui-slim .iui-left .iui-header-button .iui-header-button-icon.iui-header-button-icon{
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-header-button .iui-header-button-icon + .iui-label, .iui-page-header.iui-slim.iui-slim .iui-left .iui-header-button .iui-header-button-icon + .iui-label{
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; } }
package/css/information-panel.css CHANGED
@@ -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; }
package/css/inputs.css CHANGED
@@ -92,12 +92,13 @@
92
92
  -ms-grid-column:1;
93
93
  -ms-grid-column-span:2;
94
94
  font-weight:600;
95
+ margin-bottom:3px;
95
96
  grid-area:label;
96
97
  -ms-grid-row-align:center;
97
- align-self:center;
98
- margin-bottom:3px; }
98
+ align-self:center; }
99
99
  .iui-input-container > .iui-label.iui-required::after{
100
- content:' *';
100
+ content:'*';
101
+ margin-left:4px;
101
102
  color:#D30A0A;
102
103
  color:var(--iui-color-foreground-negative); }
103
104
  .iui-input-container .iui-input-icon{
@@ -293,6 +294,28 @@
293
294
  border-bottom:2px solid var(--iui-color-foreground-warning);
294
295
  box-shadow:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
295
296
 
297
+ .iui-input-label{
298
+ font-weight:600;
299
+ margin-bottom:3px;
300
+ cursor:default;
301
+ display:block; }
302
+ .iui-input-label.iui-required::after{
303
+ content:'*';
304
+ margin-left:4px;
305
+ color:#D30A0A;
306
+ color:var(--iui-color-foreground-negative); }
307
+ label.iui-input-label{
308
+ cursor:pointer; }
309
+ label.iui-input-label.iui-disabled{
310
+ cursor:not-allowed; }
311
+ .iui-input-label.iui-inline{
312
+ margin:0 16px 0 0;
313
+ -ms-grid-column-span:1;
314
+ display:inline-flex;
315
+ align-items:center; }
316
+ .iui-input-label.iui-inline.iui-required{
317
+ margin-right:6px; }
318
+
296
319
  .iui-input{
297
320
  margin:0;
298
321
  padding:0;
@@ -688,22 +711,14 @@
688
711
  .iui-checkbox .iui-radio-dot svg:not(.iui-radial){
689
712
  width:12px;
690
713
  height:12px; }
691
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > path,
692
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
693
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
694
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
695
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
696
- .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) > *{
697
716
  opacity:0;
698
717
  fill:#008BE1;
699
718
  fill:var(--iui-icons-color-primary); }
700
719
  @media (prefers-reduced-motion: no-preference){
701
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > path,
702
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
703
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
704
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
705
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
706
- .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) > *{
707
722
  transition:opacity 0.2s ease; } }
708
723
  .iui-checkbox > .iui-label{
709
724
  margin-right:8px; }
@@ -786,8 +801,8 @@
786
801
  .iui-checkbox.iui-loading input:disabled ~ .iui-label{
787
802
  cursor:wait; }
788
803
  .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
789
- background-color:#f2f2f2;
790
- background-color:var(--iui-color-background-1-overlay); }
804
+ background-color:rgba(0, 0, 0, 0.1);
805
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
791
806
  .iui-checkbox-visibility input ~ .iui-checkbox-checkmark,
792
807
  .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
793
808
  border:none; }
@@ -799,9 +814,11 @@
799
814
  .iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
800
815
  .iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
801
816
  opacity:0; }
802
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark > svg > .iui-uncheck{
817
+ .iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
803
818
  opacity:1;
804
- 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); }
805
822
 
806
823
  .iui-radio{
807
824
  margin:0;
@@ -849,22 +866,14 @@
849
866
  .iui-radio .iui-radio-dot svg:not(.iui-radial){
850
867
  width:12px;
851
868
  height:12px; }
852
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > path,
853
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
854
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
855
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
856
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
857
- .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) > *{
858
871
  opacity:0;
859
872
  fill:#008BE1;
860
873
  fill:var(--iui-icons-color-primary); }
861
874
  @media (prefers-reduced-motion: no-preference){
862
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > path,
863
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
864
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
865
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
866
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
867
- .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) > *{
868
877
  transition:opacity 0.2s ease; } }
869
878
  .iui-radio > .iui-label{
870
879
  margin-right:8px; }
package/css/menu.css CHANGED
@@ -9,7 +9,9 @@
9
9
  vertical-align:baseline;
10
10
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
11
11
  background-color:#FFF;
12
+ color:rgba(0, 0, 0, 0.8);
12
13
  background-color:var(--iui-color-background-1);
14
+ color:var(--iui-text-color);
13
15
  list-style-type:none;
14
16
  -webkit-user-select:none;
15
17
  -moz-user-select:none;
@@ -37,9 +39,7 @@
37
39
  height:38px;
38
40
  cursor:pointer;
39
41
  box-sizing:border-box;
40
- line-height:normal;
41
- color:rgba(0, 0, 0, 0.8);
42
- color:var(--iui-text-color); }
42
+ line-height:normal; }
43
43
  .iui-menu-item + .iui-menu-item{
44
44
  margin-top:-1px; }
45
45
  .iui-menu-item .iui-content,