@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/dialog.css CHANGED
@@ -2,169 +2,171 @@
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-dialog-wrapper{
6
- position:relative;
7
- overflow:hidden;
8
- top:0;
9
- left:0;
10
- width:100%;
11
- height:100%;
12
- pointer-events:none;
13
- transform:translateX(0);
14
- }
5
+ @layer itwinui-v1{
6
+ .iui-dialog-wrapper{
7
+ position:relative;
8
+ overflow:hidden;
9
+ top:0;
10
+ left:0;
11
+ width:100%;
12
+ height:100%;
13
+ pointer-events:none;
14
+ transform:translateX(0);
15
+ }
15
16
 
16
- .iui-dialog{
17
- z-index:999;
18
- isolation:isolate;
19
- border-radius:4px;
20
- box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
21
- box-sizing:border-box;
22
- position:fixed;
23
- padding:11px 16px;
24
- box-sizing:border-box;
25
- padding:11px 16px;
26
- overflow:hidden;
27
- pointer-events:auto;
28
- background-color:#FFF;
29
- background-color:var(--iui-color-background-1);
30
- transition:visibility 0s linear, opacity 0.2s ease-out;
31
- transition-delay:0.2s, 0s;
32
- }
33
- @media (forced-colors: active){
34
17
  .iui-dialog{
35
- border:1px solid;
36
- }
37
- }
38
- .iui-dialog:not(.iui-dialog-visible){
39
- visibility:hidden;
40
- opacity:0;
41
- }
42
- .iui-dialog.iui-dialog-visible{
43
- transition-delay:0s;
44
- }
18
+ z-index:999;
19
+ isolation:isolate;
20
+ border-radius:4px;
21
+ box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
22
+ box-sizing:border-box;
23
+ position:fixed;
24
+ padding:11px 16px;
25
+ box-sizing:border-box;
26
+ padding:11px 16px;
27
+ overflow:hidden;
28
+ pointer-events:auto;
29
+ background-color:#FFF;
30
+ background-color:var(--iui-color-background-1);
31
+ transition:visibility 0s linear, opacity 0.2s ease-out;
32
+ transition-delay:0.2s, 0s;
33
+ }
34
+ @media (forced-colors: active){
35
+ .iui-dialog{
36
+ border:1px solid;
37
+ }
38
+ }
39
+ .iui-dialog:not(.iui-dialog-visible){
40
+ visibility:hidden;
41
+ opacity:0;
42
+ }
43
+ .iui-dialog.iui-dialog-visible{
44
+ transition-delay:0s;
45
+ }
45
46
 
46
- .iui-dialog-default{
47
- max-width:max(50%, 380px);
48
- min-width:380px;
49
- max-height:100vh;
50
- }
51
- .iui-dialog-default:not([data-iui-placement]){
52
- left:50%;
53
- top:33%;
54
- transform:translate(-50%, -33%);
55
- }
56
- .iui-dialog-default[data-iui-placement=top-left]{
57
- top:0;
58
- left:0;
59
- margin-left:11px;
60
- margin-top:16px;
61
- }
62
- .iui-dialog-default[data-iui-placement=top-right]{
63
- top:0;
64
- right:0;
65
- margin-right:11px;
66
- margin-top:16px;
67
- }
68
- .iui-dialog-default[data-iui-placement=bottom-left]{
69
- bottom:0;
70
- left:0;
71
- margin-left:11px;
72
- margin-bottom:16px;
73
- }
74
- .iui-dialog-default[data-iui-placement=bottom-right]{
75
- bottom:0;
76
- right:0;
77
- margin-right:11px;
78
- margin-bottom:16px;
79
- }
47
+ .iui-dialog-default{
48
+ max-width:max(50%, 380px);
49
+ min-width:380px;
50
+ max-height:100vh;
51
+ }
52
+ .iui-dialog-default:not([data-iui-placement]){
53
+ left:50%;
54
+ top:33%;
55
+ transform:translate(-50%, -33%);
56
+ }
57
+ .iui-dialog-default[data-iui-placement=top-left]{
58
+ top:0;
59
+ left:0;
60
+ margin-left:11px;
61
+ margin-top:16px;
62
+ }
63
+ .iui-dialog-default[data-iui-placement=top-right]{
64
+ top:0;
65
+ right:0;
66
+ margin-right:11px;
67
+ margin-top:16px;
68
+ }
69
+ .iui-dialog-default[data-iui-placement=bottom-left]{
70
+ bottom:0;
71
+ left:0;
72
+ margin-left:11px;
73
+ margin-bottom:16px;
74
+ }
75
+ .iui-dialog-default[data-iui-placement=bottom-right]{
76
+ bottom:0;
77
+ right:0;
78
+ margin-right:11px;
79
+ margin-bottom:16px;
80
+ }
80
81
 
81
- .iui-dialog-full-page{
82
- border-radius:0;
83
- height:100vh;
84
- height:100dvh;
85
- width:100vw;
86
- top:0;
87
- left:0;
88
- display:flex;
89
- flex-direction:column;
90
- will-change:transform;
91
- }
92
- .iui-dialog-full-page:not(.iui-dialog-visible){
93
- transform:translateY(100%);
94
- }
95
- @media (prefers-reduced-motion: no-preference){
96
82
  .iui-dialog-full-page{
97
- transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.2s ease-in;
83
+ border-radius:0;
84
+ height:100vh;
85
+ height:100dvh;
86
+ width:100vw;
87
+ top:0;
88
+ left:0;
89
+ display:flex;
90
+ flex-direction:column;
91
+ will-change:transform;
98
92
  }
99
- .iui-dialog-full-page.iui-dialog-visible{
100
- transition:transform 0.4s ease-out;
93
+ .iui-dialog-full-page:not(.iui-dialog-visible){
94
+ transform:translateY(100%);
95
+ }
96
+ @media (prefers-reduced-motion: no-preference){
97
+ .iui-dialog-full-page{
98
+ transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.2s ease-in;
99
+ }
100
+ .iui-dialog-full-page.iui-dialog-visible{
101
+ transition:transform 0.4s ease-out;
102
+ }
101
103
  }
102
- }
103
104
 
104
- .iui-dialog-draggable{
105
- max-width:100%;
106
- max-height:100vh;
107
- min-width:380px;
108
- min-height:144px;
109
- display:flex;
110
- flex-direction:column;
111
- border:1px solid var(--iui-color-background-border);
112
- }
105
+ .iui-dialog-draggable{
106
+ max-width:100%;
107
+ max-height:100vh;
108
+ min-width:380px;
109
+ min-height:144px;
110
+ display:flex;
111
+ flex-direction:column;
112
+ border:1px solid var(--iui-color-background-border);
113
+ }
113
114
 
114
- .iui-dialog-title{
115
- display:flex;
116
- align-items:center;
117
- font-size:inherit;
118
- white-space:nowrap;
119
- overflow:hidden;
120
- text-overflow:ellipsis;
121
- line-height:1.5;
122
- margin-right:auto;
123
- }
115
+ .iui-dialog-title{
116
+ display:flex;
117
+ align-items:center;
118
+ font-size:inherit;
119
+ white-space:nowrap;
120
+ overflow:hidden;
121
+ text-overflow:ellipsis;
122
+ line-height:1.5;
123
+ margin-right:auto;
124
+ }
124
125
 
125
- .iui-dialog-title-bar{
126
- display:flex;
127
- align-items:center;
128
- margin-bottom:11px;
129
- box-sizing:border-box;
130
- font-size:18px;
131
- }
126
+ .iui-dialog-title-bar{
127
+ display:flex;
128
+ align-items:center;
129
+ margin-bottom:11px;
130
+ box-sizing:border-box;
131
+ font-size:18px;
132
+ }
132
133
 
133
- .iui-dialog-title-bar-filled{
134
- font-size:16px;
135
- padding:6px 16px;
136
- margin:-11px -16px 11px -16px;
137
- cursor:-webkit-grab;
138
- cursor:grab;
139
- background-color:var(--iui-color-background-3);
140
- border-bottom:1px solid var(--iui-color-background-border);
141
- }
142
- .iui-dialog-title-bar-filled:active{
143
- cursor:-webkit-grabbing;
144
- cursor:grabbing;
145
- }
134
+ .iui-dialog-title-bar-filled{
135
+ font-size:16px;
136
+ padding:6px 16px;
137
+ margin:-11px -16px 11px -16px;
138
+ cursor:-webkit-grab;
139
+ cursor:grab;
140
+ background-color:var(--iui-color-background-3);
141
+ border-bottom:1px solid var(--iui-color-background-border);
142
+ }
143
+ .iui-dialog-title-bar-filled:active{
144
+ cursor:-webkit-grabbing;
145
+ cursor:grabbing;
146
+ }
146
147
 
147
- .iui-dialog-content{
148
- flex-grow:2;
149
- margin:0 -16px;
150
- padding:0 16px;
151
- overflow-y:auto;
152
- overflow-y:overlay;
153
- }
148
+ .iui-dialog-content{
149
+ flex-grow:2;
150
+ margin:0 -16px;
151
+ padding:0 16px;
152
+ overflow-y:auto;
153
+ overflow-y:overlay;
154
+ }
154
155
 
155
- .iui-dialog-button-bar{
156
- margin-top:11px;
157
- display:flex;
158
- align-items:center;
159
- justify-content:flex-end;
160
- gap:8px;
161
- }
156
+ .iui-dialog-button-bar{
157
+ margin-top:11px;
158
+ display:flex;
159
+ align-items:center;
160
+ justify-content:flex-end;
161
+ gap:8px;
162
+ }
162
163
 
163
- .iui-dialog-animation-enter{
164
- transform:translateY(100%);
165
- opacity:0;
166
- }
167
- .iui-dialog-animation-enter-active{
168
- transform:translateY(0);
169
- opacity:1;
164
+ .iui-dialog-animation-enter{
165
+ transform:translateY(100%);
166
+ opacity:0;
167
+ }
168
+ .iui-dialog-animation-enter-active{
169
+ transform:translateY(0);
170
+ opacity:1;
171
+ }
170
172
  }