@itwin/itwinui-css 0.50.0 → 0.52.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 (67) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7324 -5608
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +443 -344
  7. package/css/carousel.css +119 -88
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +114 -44
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +223 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/button/button-group.scss +4 -1
  47. package/scss/carousel/carousel.scss +4 -1
  48. package/scss/code/codeblock.scss +1 -1
  49. package/scss/inputs/checkbox.scss +1 -0
  50. package/scss/inputs/labeled-inputs.scss +8 -8
  51. package/scss/inputs/radio.scss +0 -4
  52. package/scss/location-marker/data-rich.scss +1 -1
  53. package/scss/location-marker/me.scss +4 -4
  54. package/scss/modal/classes.scss +4 -0
  55. package/scss/modal/modal.scss +81 -7
  56. package/scss/popover/popover.scss +1 -2
  57. package/scss/progress-indicator/linear.scss +2 -10
  58. package/scss/style/global.scss +1 -5
  59. package/scss/style/mixins.scss +9 -0
  60. package/scss/style/ripple.scss +1 -1
  61. package/scss/style/speed.scss +1 -0
  62. package/scss/table/table.scss +23 -14
  63. package/scss/toast-notification/categories.scss +1 -5
  64. package/scss/toggle-switch/classes.scss +4 -0
  65. package/scss/toggle-switch/toggle-switch.scss +141 -162
  66. package/scss/tooltip/tooltip.scss +1 -1
  67. package/scss/user-icon/user-icon.scss +38 -19
package/css/notification-marker.css CHANGED
@@ -3,216 +3,291 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-notification-primary{
6
- position:relative; }
6
+ position:relative;
7
+ }
8
+ .iui-notification-primary::before{
9
+ content:"";
10
+ position:absolute;
11
+ width:8px;
12
+ height:8px;
13
+ top:-6px;
14
+ right:-6px;
15
+ border-radius:100%;
16
+ background-color:#008BE1;
17
+ border:2px solid #FFF;
18
+ background-color:var(--iui-color-foreground-primary);
19
+ border:2px solid var(--iui-color-background-1);
20
+ }
21
+ @media (prefers-reduced-motion: no-preference){
7
22
  .iui-notification-primary::before{
8
- content:'';
9
- position:absolute;
10
- width:8px;
11
- height:8px;
12
- top:-6px;
13
- right:-6px;
14
- border-radius:100%;
15
- background-color:#008BE1;
16
- border:2px solid #FFF;
17
- background-color:var(--iui-color-foreground-primary);
18
- border:2px solid var(--iui-color-background-1); }
19
- @media (prefers-reduced-motion: no-preference){
20
- .iui-notification-primary::before{
21
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
22
- @media (prefers-reduced-motion: no-preference){
23
- .iui-notification-primary.iui-urgent::before{
24
- -webkit-animation:pulse-primary 2s infinite;
25
- animation:pulse-primary 2s infinite; } }
26
- @media (prefers-reduced-motion: no-preference){
27
- @-webkit-keyframes pulse-primary{
28
- 0%{
29
- box-shadow:0 0 0 0 #008be1;
30
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1)); }
31
- 70%{
32
- box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
33
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0); }
34
- 100%{
35
- box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
36
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0); } }
37
- @keyframes pulse-primary{
38
- 0%{
39
- box-shadow:0 0 0 0 #008be1;
40
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1)); }
41
- 70%{
42
- box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
43
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0); }
44
- 100%{
45
- box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
46
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0); } } }
23
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
24
+ }
25
+ }
26
+ @media (prefers-reduced-motion: no-preference){
27
+ .iui-notification-primary.iui-urgent::before{
28
+ -webkit-animation:pulse-primary 2s infinite;
29
+ animation:pulse-primary 2s infinite;
30
+ }
31
+ }
32
+ @media (prefers-reduced-motion: no-preference){
33
+ @-webkit-keyframes pulse-primary{
34
+ 0%{
35
+ box-shadow:0 0 0 0 #008be1;
36
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
37
+ }
38
+ 70%{
39
+ box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
40
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
41
+ }
42
+ 100%{
43
+ box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
44
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
45
+ }
46
+ }
47
+ @keyframes pulse-primary{
48
+ 0%{
49
+ box-shadow:0 0 0 0 #008be1;
50
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
51
+ }
52
+ 70%{
53
+ box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
54
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
55
+ }
56
+ 100%{
57
+ box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
58
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
59
+ }
60
+ }
61
+ }
47
62
 
48
63
  .iui-notification-positive{
49
- position:relative; }
64
+ position:relative;
65
+ }
66
+ .iui-notification-positive::before{
67
+ content:"";
68
+ position:absolute;
69
+ width:8px;
70
+ height:8px;
71
+ top:-6px;
72
+ right:-6px;
73
+ border-radius:100%;
74
+ background-color:#53A21A;
75
+ border:2px solid #FFF;
76
+ background-color:var(--iui-color-foreground-positive);
77
+ border:2px solid var(--iui-color-background-1);
78
+ }
79
+ @media (prefers-reduced-motion: no-preference){
50
80
  .iui-notification-positive::before{
51
- content:'';
52
- position:absolute;
53
- width:8px;
54
- height:8px;
55
- top:-6px;
56
- right:-6px;
57
- border-radius:100%;
58
- background-color:#53A21A;
59
- border:2px solid #FFF;
60
- background-color:var(--iui-color-foreground-positive);
61
- border:2px solid var(--iui-color-background-1); }
62
- @media (prefers-reduced-motion: no-preference){
63
- .iui-notification-positive::before{
64
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
65
- @media (prefers-reduced-motion: no-preference){
66
- .iui-notification-positive.iui-urgent::before{
67
- -webkit-animation:pulse-positive 2s infinite;
68
- animation:pulse-positive 2s infinite; } }
69
- @media (prefers-reduced-motion: no-preference){
70
- @-webkit-keyframes pulse-positive{
71
- 0%{
72
- box-shadow:0 0 0 0 #53a21a;
73
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1)); }
74
- 70%{
75
- box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
76
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0); }
77
- 100%{
78
- box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
79
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0); } }
80
- @keyframes pulse-positive{
81
- 0%{
82
- box-shadow:0 0 0 0 #53a21a;
83
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1)); }
84
- 70%{
85
- box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
86
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0); }
87
- 100%{
88
- box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
89
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0); } } }
81
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
82
+ }
83
+ }
84
+ @media (prefers-reduced-motion: no-preference){
85
+ .iui-notification-positive.iui-urgent::before{
86
+ -webkit-animation:pulse-positive 2s infinite;
87
+ animation:pulse-positive 2s infinite;
88
+ }
89
+ }
90
+ @media (prefers-reduced-motion: no-preference){
91
+ @-webkit-keyframes pulse-positive{
92
+ 0%{
93
+ box-shadow:0 0 0 0 #53a21a;
94
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
95
+ }
96
+ 70%{
97
+ box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
98
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
99
+ }
100
+ 100%{
101
+ box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
102
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
103
+ }
104
+ }
105
+ @keyframes pulse-positive{
106
+ 0%{
107
+ box-shadow:0 0 0 0 #53a21a;
108
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
109
+ }
110
+ 70%{
111
+ box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
112
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
113
+ }
114
+ 100%{
115
+ box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
116
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
117
+ }
118
+ }
119
+ }
90
120
 
91
121
  .iui-notification-warning{
92
- position:relative; }
122
+ position:relative;
123
+ }
124
+ .iui-notification-warning::before{
125
+ content:"";
126
+ position:absolute;
127
+ width:8px;
128
+ height:8px;
129
+ top:-6px;
130
+ right:-6px;
131
+ border-radius:100%;
132
+ background-color:#F18B12;
133
+ border:2px solid #FFF;
134
+ background-color:var(--iui-color-foreground-warning);
135
+ border:2px solid var(--iui-color-background-1);
136
+ }
137
+ @media (prefers-reduced-motion: no-preference){
93
138
  .iui-notification-warning::before{
94
- content:'';
95
- position:absolute;
96
- width:8px;
97
- height:8px;
98
- top:-6px;
99
- right:-6px;
100
- border-radius:100%;
101
- background-color:#F18B12;
102
- border:2px solid #FFF;
103
- background-color:var(--iui-color-foreground-warning);
104
- border:2px solid var(--iui-color-background-1); }
105
- @media (prefers-reduced-motion: no-preference){
106
- .iui-notification-warning::before{
107
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
108
- @media (prefers-reduced-motion: no-preference){
109
- .iui-notification-warning.iui-urgent::before{
110
- -webkit-animation:pulse-warning 2s infinite;
111
- animation:pulse-warning 2s infinite; } }
112
- @media (prefers-reduced-motion: no-preference){
113
- @-webkit-keyframes pulse-warning{
114
- 0%{
115
- box-shadow:0 0 0 0 #f18b12;
116
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1)); }
117
- 70%{
118
- box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
119
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0); }
120
- 100%{
121
- box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
122
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0); } }
123
- @keyframes pulse-warning{
124
- 0%{
125
- box-shadow:0 0 0 0 #f18b12;
126
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1)); }
127
- 70%{
128
- box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
129
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0); }
130
- 100%{
131
- box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
132
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0); } } }
139
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
140
+ }
141
+ }
142
+ @media (prefers-reduced-motion: no-preference){
143
+ .iui-notification-warning.iui-urgent::before{
144
+ -webkit-animation:pulse-warning 2s infinite;
145
+ animation:pulse-warning 2s infinite;
146
+ }
147
+ }
148
+ @media (prefers-reduced-motion: no-preference){
149
+ @-webkit-keyframes pulse-warning{
150
+ 0%{
151
+ box-shadow:0 0 0 0 #f18b12;
152
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
153
+ }
154
+ 70%{
155
+ box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
156
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
157
+ }
158
+ 100%{
159
+ box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
160
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
161
+ }
162
+ }
163
+ @keyframes pulse-warning{
164
+ 0%{
165
+ box-shadow:0 0 0 0 #f18b12;
166
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
167
+ }
168
+ 70%{
169
+ box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
170
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
171
+ }
172
+ 100%{
173
+ box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
174
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
175
+ }
176
+ }
177
+ }
133
178
 
134
179
  .iui-notification-negative{
135
- position:relative; }
180
+ position:relative;
181
+ }
182
+ .iui-notification-negative::before{
183
+ content:"";
184
+ position:absolute;
185
+ width:8px;
186
+ height:8px;
187
+ top:-6px;
188
+ right:-6px;
189
+ border-radius:100%;
190
+ background-color:#D30A0A;
191
+ border:2px solid #FFF;
192
+ background-color:var(--iui-color-foreground-negative);
193
+ border:2px solid var(--iui-color-background-1);
194
+ }
195
+ @media (prefers-reduced-motion: no-preference){
136
196
  .iui-notification-negative::before{
137
- content:'';
138
- position:absolute;
139
- width:8px;
140
- height:8px;
141
- top:-6px;
142
- right:-6px;
143
- border-radius:100%;
144
- background-color:#D30A0A;
145
- border:2px solid #FFF;
146
- background-color:var(--iui-color-foreground-negative);
147
- border:2px solid var(--iui-color-background-1); }
148
- @media (prefers-reduced-motion: no-preference){
149
- .iui-notification-negative::before{
150
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
151
- @media (prefers-reduced-motion: no-preference){
152
- .iui-notification-negative.iui-urgent::before{
153
- -webkit-animation:pulse-negative 2s infinite;
154
- animation:pulse-negative 2s infinite; } }
155
- @media (prefers-reduced-motion: no-preference){
156
- @-webkit-keyframes pulse-negative{
157
- 0%{
158
- box-shadow:0 0 0 0 #d30a0a;
159
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1)); }
160
- 70%{
161
- box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
162
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0); }
163
- 100%{
164
- box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
165
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0); } }
166
- @keyframes pulse-negative{
167
- 0%{
168
- box-shadow:0 0 0 0 #d30a0a;
169
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1)); }
170
- 70%{
171
- box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
172
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0); }
173
- 100%{
174
- box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
175
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0); } } }
197
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
198
+ }
199
+ }
200
+ @media (prefers-reduced-motion: no-preference){
201
+ .iui-notification-negative.iui-urgent::before{
202
+ -webkit-animation:pulse-negative 2s infinite;
203
+ animation:pulse-negative 2s infinite;
204
+ }
205
+ }
206
+ @media (prefers-reduced-motion: no-preference){
207
+ @-webkit-keyframes pulse-negative{
208
+ 0%{
209
+ box-shadow:0 0 0 0 #d30a0a;
210
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
211
+ }
212
+ 70%{
213
+ box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
214
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
215
+ }
216
+ 100%{
217
+ box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
218
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
219
+ }
220
+ }
221
+ @keyframes pulse-negative{
222
+ 0%{
223
+ box-shadow:0 0 0 0 #d30a0a;
224
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
225
+ }
226
+ 70%{
227
+ box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
228
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
229
+ }
230
+ 100%{
231
+ box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
232
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
233
+ }
234
+ }
235
+ }
176
236
 
177
237
  .iui-notification-accessory{
178
- position:relative; }
238
+ position:relative;
239
+ }
240
+ .iui-notification-accessory::before{
241
+ content:"";
242
+ position:absolute;
243
+ width:8px;
244
+ height:8px;
245
+ top:-6px;
246
+ right:-6px;
247
+ border-radius:100%;
248
+ background-color:#FFF;
249
+ border:2px solid #FFF;
250
+ background-color:var(--iui-color-foreground-accessory);
251
+ border:2px solid var(--iui-color-background-1);
252
+ }
253
+ @media (prefers-reduced-motion: no-preference){
179
254
  .iui-notification-accessory::before{
180
- content:'';
181
- position:absolute;
182
- width:8px;
183
- height:8px;
184
- top:-6px;
185
- right:-6px;
186
- border-radius:100%;
187
- background-color:#FFF;
188
- border:2px solid #FFF;
189
- background-color:var(--iui-color-foreground-accessory);
190
- border:2px solid var(--iui-color-background-1); }
191
- @media (prefers-reduced-motion: no-preference){
192
- .iui-notification-accessory::before{
193
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
194
- @media (prefers-reduced-motion: no-preference){
195
- .iui-notification-accessory.iui-urgent::before{
196
- -webkit-animation:pulse-accessory 2s infinite;
197
- animation:pulse-accessory 2s infinite; } }
198
- @media (prefers-reduced-motion: no-preference){
199
- @-webkit-keyframes pulse-accessory{
200
- 0%{
201
- box-shadow:0 0 0 0 white;
202
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)); }
203
- 70%{
204
- box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
205
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0); }
206
- 100%{
207
- box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
208
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } }
209
- @keyframes pulse-accessory{
210
- 0%{
211
- box-shadow:0 0 0 0 white;
212
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)); }
213
- 70%{
214
- box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
215
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0); }
216
- 100%{
217
- box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
218
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } } }
255
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
256
+ }
257
+ }
258
+ @media (prefers-reduced-motion: no-preference){
259
+ .iui-notification-accessory.iui-urgent::before{
260
+ -webkit-animation:pulse-accessory 2s infinite;
261
+ animation:pulse-accessory 2s infinite;
262
+ }
263
+ }
264
+ @media (prefers-reduced-motion: no-preference){
265
+ @-webkit-keyframes pulse-accessory{
266
+ 0%{
267
+ box-shadow:0 0 0 0 white;
268
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
269
+ }
270
+ 70%{
271
+ box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
272
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
273
+ }
274
+ 100%{
275
+ box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
276
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
277
+ }
278
+ }
279
+ @keyframes pulse-accessory{
280
+ 0%{
281
+ box-shadow:0 0 0 0 white;
282
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
283
+ }
284
+ 70%{
285
+ box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
286
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
287
+ }
288
+ 100%{
289
+ box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
290
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
291
+ }
292
+ }
293
+ }
package/css/popover.css CHANGED
@@ -2,11 +2,13 @@
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-popover{ }
6
- .iui-popover.tippy-box{
7
- all:revert; }
8
- .iui-popover.tippy-box[data-reference-hidden]{
9
- visibility:visible;
10
- pointer-events:auto; }
11
- .iui-popover .tippy-content{
12
- all:revert; }
5
+ .iui-popover.tippy-box{
6
+ all:revert;
7
+ }
8
+ .iui-popover.tippy-box[data-reference-hidden]{
9
+ visibility:visible;
10
+ pointer-events:auto;
11
+ }
12
+ .iui-popover .tippy-content{
13
+ all:revert;
14
+ }