@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

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 (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/css/information-panel.css CHANGED
@@ -2,200 +2,202 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-information-panel-wrapper{
6
- position:relative;
7
- overflow:hidden;
8
- }
5
+ @layer itwinui-v1{
6
+ .iui-information-panel-wrapper{
7
+ position:relative;
8
+ overflow:hidden;
9
+ }
9
10
 
10
- .iui-information-panel{
11
- position:absolute;
12
- opacity:0;
13
- visibility:hidden;
14
- display:flex;
15
- flex-direction:column;
16
- box-sizing:border-box;
17
- max-width:100%;
18
- max-height:100%;
19
- z-index:2;
20
- background-color:white;
21
- background-color:var(--iui-color-background-1);
22
- }
23
- @media (prefers-reduced-motion: no-preference){
24
11
  .iui-information-panel{
25
- transition:visibility 0s 0.2s ease-in, transform 0.2s ease-out, opacity 0.2s ease;
26
- }
27
- }
28
- .iui-information-panel > .iui-resizer{
29
- display:none;
30
- position:absolute;
31
- touch-action:none;
32
- }
33
- .iui-information-panel > .iui-resizer > .iui-resizer-bar{
34
- background-color:#c7ccd1;
35
- background-color:var(--iui-color-background-border);
36
- }
37
- .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
38
- background-color:#008ae0;
39
- background-color:var(--iui-color-foreground-primary);
40
- }
41
- .iui-information-panel .iui-information-header,
42
- .iui-information-panel .iui-information-body{
43
- padding-left:12px;
44
- padding-right:12px;
45
- box-sizing:border-box;
46
- }
47
- .iui-information-panel .iui-information-header{
48
- height:55px;
49
- flex-shrink:0;
50
- display:flex;
51
- align-items:center;
52
- justify-content:space-between;
53
- background-color:#edeff2;
54
- background-color:var(--iui-color-background-3);
55
- }
56
- .iui-information-panel .iui-information-header .iui-information-header-label{
57
- display:flex;
58
- align-items:center;
59
- overflow:hidden;
60
- }
61
- .iui-information-panel .iui-information-header .iui-information-header-label > *{
62
- white-space:nowrap;
63
- overflow:hidden;
64
- text-overflow:ellipsis;
65
- -webkit-user-select:all;
66
- -moz-user-select:all;
67
- user-select:all;
68
- }
69
- .iui-information-panel .iui-information-header .iui-information-header-label svg{
70
- display:flex;
71
- width:24px;
72
- height:24px;
73
- margin-right:8px;
74
- flex-shrink:0;
75
- fill:rgba(0, 0, 0, 0.4);
76
- fill:var(--iui-icons-color);
77
- }
78
- .iui-information-panel .iui-information-header .iui-information-header-actions{
79
- flex-shrink:0;
80
- margin-left:8px;
81
- }
12
+ position:absolute;
13
+ opacity:0;
14
+ visibility:hidden;
15
+ display:flex;
16
+ flex-direction:column;
17
+ box-sizing:border-box;
18
+ max-width:100%;
19
+ max-height:100%;
20
+ z-index:2;
21
+ background-color:white;
22
+ background-color:var(--iui-color-background-1);
23
+ }
24
+ @media (prefers-reduced-motion: no-preference){
25
+ .iui-information-panel{
26
+ transition:visibility 0s 0.2s ease-in, transform 0.2s ease-out, opacity 0.2s ease;
27
+ }
28
+ }
29
+ .iui-information-panel > .iui-resizer{
30
+ display:none;
31
+ position:absolute;
32
+ touch-action:none;
33
+ }
34
+ .iui-information-panel > .iui-resizer > .iui-resizer-bar{
35
+ background-color:#c7ccd1;
36
+ background-color:var(--iui-color-background-border);
37
+ }
38
+ .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
39
+ background-color:#008ae0;
40
+ background-color:var(--iui-color-foreground-primary);
41
+ }
42
+ .iui-information-panel .iui-information-header,
82
43
  .iui-information-panel .iui-information-body{
83
- padding-top:11px;
84
- padding-bottom:11px;
85
- height:100%;
86
- overflow-x:hidden;
87
- overflow-y:auto;
88
- overflow-y:overlay;
89
- }
90
- .iui-information-panel .iui-information-body > hr{
91
- border-color:#c7ccd1;
92
- border-color:var(--iui-color-background-border);
93
- }
94
- .iui-information-panel.iui-right{
95
- top:0;
96
- right:0;
97
- width:384px;
98
- min-width:192px;
99
- height:100%;
100
- transform:translateX(100%);
101
- box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
102
- -webkit-clip-path:inset(0 0 0 -15px);
103
- clip-path:inset(0 0 0 -15px);
104
- }
105
- .iui-information-panel.iui-right > .iui-resizer{
106
- height:100%;
107
- width:16px;
108
- top:0;
109
- cursor:ew-resize;
110
- justify-content:center;
111
- }
112
- .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
113
- height:100%;
114
- width:1px;
115
- }
116
- @media (prefers-reduced-motion: no-preference){
44
+ padding-left:12px;
45
+ padding-right:12px;
46
+ box-sizing:border-box;
47
+ }
48
+ .iui-information-panel .iui-information-header{
49
+ height:55px;
50
+ flex-shrink:0;
51
+ display:flex;
52
+ align-items:center;
53
+ justify-content:space-between;
54
+ background-color:#edeff2;
55
+ background-color:var(--iui-color-background-3);
56
+ }
57
+ .iui-information-panel .iui-information-header .iui-information-header-label{
58
+ display:flex;
59
+ align-items:center;
60
+ overflow:hidden;
61
+ }
62
+ .iui-information-panel .iui-information-header .iui-information-header-label > *{
63
+ white-space:nowrap;
64
+ overflow:hidden;
65
+ text-overflow:ellipsis;
66
+ -webkit-user-select:all;
67
+ -moz-user-select:all;
68
+ user-select:all;
69
+ }
70
+ .iui-information-panel .iui-information-header .iui-information-header-label svg{
71
+ display:flex;
72
+ width:24px;
73
+ height:24px;
74
+ margin-right:8px;
75
+ flex-shrink:0;
76
+ fill:rgba(0, 0, 0, 0.4);
77
+ fill:var(--iui-icons-color);
78
+ }
79
+ .iui-information-panel .iui-information-header .iui-information-header-actions{
80
+ flex-shrink:0;
81
+ margin-left:8px;
82
+ }
83
+ .iui-information-panel .iui-information-body{
84
+ padding-top:11px;
85
+ padding-bottom:11px;
86
+ height:100%;
87
+ overflow-x:hidden;
88
+ overflow-y:auto;
89
+ overflow-y:overlay;
90
+ }
91
+ .iui-information-panel .iui-information-body > hr{
92
+ border-color:#c7ccd1;
93
+ border-color:var(--iui-color-background-border);
94
+ }
95
+ .iui-information-panel.iui-right{
96
+ top:0;
97
+ right:0;
98
+ width:384px;
99
+ min-width:192px;
100
+ height:100%;
101
+ transform:translateX(100%);
102
+ box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
103
+ -webkit-clip-path:inset(0 0 0 -15px);
104
+ clip-path:inset(0 0 0 -15px);
105
+ }
106
+ .iui-information-panel.iui-right > .iui-resizer{
107
+ height:100%;
108
+ width:16px;
109
+ top:0;
110
+ cursor:ew-resize;
111
+ justify-content:center;
112
+ }
117
113
  .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
118
- transition:background-color 0.2s ease-out, width 0.2s ease-out;
119
- }
120
- }
121
- .iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
122
- width:4px;
123
- }
124
- .iui-information-panel.iui-right > .iui-resizer{
125
- left:-8px;
126
- }
127
- .iui-information-panel.iui-bottom{
128
- left:0;
129
- bottom:0;
130
- height:384px;
131
- min-height:192px;
132
- width:100%;
133
- transform:translateY(100%);
134
- box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
135
- -webkit-clip-path:inset(-15px 0 0 0);
136
- clip-path:inset(-15px 0 0 0);
137
- }
138
- .iui-information-panel.iui-bottom > .iui-resizer{
139
- width:100%;
140
- height:16px;
141
- left:0;
142
- cursor:ns-resize;
143
- align-items:center;
144
- }
145
- .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
146
- width:100%;
147
- height:1px;
148
- }
149
- @media (prefers-reduced-motion: no-preference){
114
+ height:100%;
115
+ width:1px;
116
+ }
117
+ @media (prefers-reduced-motion: no-preference){
118
+ .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
119
+ transition:background-color 0.2s ease-out, width 0.2s ease-out;
120
+ }
121
+ }
122
+ .iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
123
+ width:4px;
124
+ }
125
+ .iui-information-panel.iui-right > .iui-resizer{
126
+ left:-8px;
127
+ }
128
+ .iui-information-panel.iui-bottom{
129
+ left:0;
130
+ bottom:0;
131
+ height:384px;
132
+ min-height:192px;
133
+ width:100%;
134
+ transform:translateY(100%);
135
+ box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
136
+ -webkit-clip-path:inset(-15px 0 0 0);
137
+ clip-path:inset(-15px 0 0 0);
138
+ }
139
+ .iui-information-panel.iui-bottom > .iui-resizer{
140
+ width:100%;
141
+ height:16px;
142
+ left:0;
143
+ cursor:ns-resize;
144
+ align-items:center;
145
+ }
150
146
  .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
151
- transition:background-color 0.2s ease-out, height 0.2s ease-out;
152
- }
153
- }
154
- .iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
155
- height:4px;
156
- }
157
- .iui-information-panel.iui-bottom > .iui-resizer{
158
- top:-8px;
159
- }
160
- .iui-information-panel.iui-visible{
161
- opacity:1;
162
- visibility:visible;
163
- transform:translate(0);
164
- }
165
- @media (prefers-reduced-motion: no-preference){
147
+ width:100%;
148
+ height:1px;
149
+ }
150
+ @media (prefers-reduced-motion: no-preference){
151
+ .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
152
+ transition:background-color 0.2s ease-out, height 0.2s ease-out;
153
+ }
154
+ }
155
+ .iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
156
+ height:4px;
157
+ }
158
+ .iui-information-panel.iui-bottom > .iui-resizer{
159
+ top:-8px;
160
+ }
166
161
  .iui-information-panel.iui-visible{
167
- transition:transform 0.2s ease-out, opacity 0.2s ease;
162
+ opacity:1;
163
+ visibility:visible;
164
+ transform:translate(0);
165
+ }
166
+ @media (prefers-reduced-motion: no-preference){
167
+ .iui-information-panel.iui-visible{
168
+ transition:transform 0.2s ease-out, opacity 0.2s ease;
169
+ }
170
+ }
171
+ .iui-information-panel.iui-visible > .iui-resizer{
172
+ display:flex;
168
173
  }
169
- }
170
- .iui-information-panel.iui-visible > .iui-resizer{
171
- display:flex;
172
- }
173
174
 
174
- .iui-information-body-content{
175
- display:-ms-grid;
176
- display:grid;
177
- }
178
- .iui-information-body-content .iui-input-label{
179
- font-weight:400;
180
- color:rgba(0, 0, 0, 0.4);
181
- color:var(--iui-text-color-muted);
182
- }
183
- .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
184
- margin-bottom:11px;
185
- }
186
- .iui-information-body-content.iui-inline{
187
- row-gap:11px;
188
- -ms-grid-columns:auto 1fr;
189
- grid-template-columns:auto 1fr;
190
- align-items:center;
191
- }
192
- .iui-information-body-content.iui-inline .iui-input-label{
193
- margin:0 16px 0 0;
194
- -ms-grid-column-span:1;
195
- -ms-grid-column-align:end;
196
- justify-self:end;
197
- text-align:end;
198
- }
199
- .iui-information-body-content.iui-inline .iui-input-label.iui-required{
200
- margin-right:6px;
175
+ .iui-information-body-content{
176
+ display:-ms-grid;
177
+ display:grid;
178
+ }
179
+ .iui-information-body-content .iui-input-label{
180
+ font-weight:400;
181
+ color:rgba(0, 0, 0, 0.4);
182
+ color:var(--iui-text-color-muted);
183
+ }
184
+ .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
185
+ margin-bottom:11px;
186
+ }
187
+ .iui-information-body-content.iui-inline{
188
+ row-gap:11px;
189
+ -ms-grid-columns:auto 1fr;
190
+ grid-template-columns:auto 1fr;
191
+ align-items:center;
192
+ }
193
+ .iui-information-body-content.iui-inline .iui-input-label{
194
+ margin:0 16px 0 0;
195
+ -ms-grid-column-span:1;
196
+ -ms-grid-column-align:end;
197
+ justify-self:end;
198
+ text-align:end;
199
+ }
200
+ .iui-information-body-content.iui-inline .iui-input-label.iui-required{
201
+ margin-right:6px;
202
+ }
201
203
  }