@itwin/itwinui-css 0.50.1 → 0.53.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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  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 +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
package/css/non-ideal-state.css CHANGED
@@ -16,43 +16,50 @@
16
16
  left:50%;
17
17
  top:40%;
18
18
  min-width:220px;
19
- transform:translate(-50%, -40%); }
20
- .iui-non-ideal-state > .iui-non-ideal-state-illustration{
21
- max-width:220px;
22
- max-height:242px;
23
- margin-bottom:22px;
24
- text-align:center;
25
- display:flex;
26
- justify-content:center;
27
- align-items:center; }
28
- .iui-non-ideal-state > .iui-non-ideal-state-title{
29
- margin:0;
30
- padding:0;
31
- border:none;
32
- vertical-align:baseline;
33
- font-size:32px;
34
- font-weight:300;
35
- line-height:44px;
36
- padding:0;
37
- margin:0 0 22px; }
38
- .iui-non-ideal-state > .iui-non-ideal-state-description{
39
- margin:0;
40
- padding:0;
41
- border:none;
42
- vertical-align:baseline;
43
- font-size:14px;
44
- font-weight:400;
45
- line-height:22px;
46
- padding:0;
47
- margin:0 0 22px; }
48
- .iui-non-ideal-state > .iui-non-ideal-state-actions{
49
- display:flex;
50
- align-items:center;
51
- margin-bottom:8px; }
52
- .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
53
- display:inline-block;
54
- width:200px;
55
- text-align:left;
56
- margin:0 4px 0 0; }
57
- .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
58
- margin:0 4px; }
19
+ transform:translate(-50%, -40%);
20
+ }
21
+ .iui-non-ideal-state > .iui-non-ideal-state-illustration{
22
+ max-width:220px;
23
+ max-height:242px;
24
+ margin-bottom:22px;
25
+ text-align:center;
26
+ display:flex;
27
+ justify-content:center;
28
+ align-items:center;
29
+ }
30
+ .iui-non-ideal-state > .iui-non-ideal-state-title{
31
+ margin:0;
32
+ padding:0;
33
+ border:none;
34
+ vertical-align:baseline;
35
+ font-size:32px;
36
+ font-weight:300;
37
+ line-height:44px;
38
+ padding:0;
39
+ margin:0 0 22px;
40
+ }
41
+ .iui-non-ideal-state > .iui-non-ideal-state-description{
42
+ margin:0;
43
+ padding:0;
44
+ border:none;
45
+ vertical-align:baseline;
46
+ font-size:14px;
47
+ font-weight:400;
48
+ line-height:22px;
49
+ padding:0;
50
+ margin:0 0 22px;
51
+ }
52
+ .iui-non-ideal-state > .iui-non-ideal-state-actions{
53
+ display:flex;
54
+ align-items:center;
55
+ margin-bottom:8px;
56
+ }
57
+ .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
58
+ display:inline-block;
59
+ width:200px;
60
+ text-align:left;
61
+ margin:0 4px 0 0;
62
+ }
63
+ .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
64
+ margin:0 4px;
65
+ }
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:#008ae0;
17
+ border:2px solid white;
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 #008ae0;
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, 138, 224, 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, 138, 224, 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 #008ae0;
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, 138, 224, 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, 138, 224, 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 white;
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:#f18d13;
133
+ border:2px solid white;
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 #f18d13;
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, 141, 19, 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, 141, 19, 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 #f18d13;
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, 141, 19, 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, 141, 19, 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:#d10a0a;
191
+ border:2px solid white;
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 #d10a0a;
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(209, 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(209, 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 #d10a0a;
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(209, 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(209, 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:white;
249
+ border:2px solid white;
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
+ }