@itwin/itwinui-css 0.63.2-dev.0 → 0.63.2

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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +969 -925
  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/classes.scss +46 -50
  59. package/scss/code/classes.scss +7 -5
  60. package/scss/color-picker/classes.scss +40 -38
  61. package/scss/date-picker/classes.scss +44 -42
  62. package/scss/dialog/classes.scss +45 -43
  63. package/scss/expandable-block/classes.scss +4 -2
  64. package/scss/fieldset/classes.scss +4 -2
  65. package/scss/file-upload/classes.scss +4 -2
  66. package/scss/footer/classes.scss +16 -14
  67. package/scss/header/classes.scss +7 -5
  68. package/scss/icon/classes.scss +19 -17
  69. package/scss/information-panel/classes.scss +18 -16
  70. package/scss/inputs/classes.scss +62 -60
  71. package/scss/keyboard/classes.scss +4 -2
  72. package/scss/location-marker/classes.scss +10 -8
  73. package/scss/menu/classes.scss +14 -12
  74. package/scss/non-ideal-state/classes.scss +4 -2
  75. package/scss/notification-marker/classes.scss +5 -3
  76. package/scss/popover/classes.scss +4 -2
  77. package/scss/progress-indicator/classes.scss +22 -20
  78. package/scss/radio-tile/classes.scss +22 -20
  79. package/scss/reset-global-styles.scss +25 -23
  80. package/scss/side-navigation/classes.scss +10 -8
  81. package/scss/skip-to-content/classes.scss +4 -2
  82. package/scss/slider/classes.scss +37 -35
  83. package/scss/style/global.scss +49 -47
  84. package/scss/surface/classes.scss +4 -2
  85. package/scss/table/classes.scss +45 -43
  86. package/scss/tabs/classes.scss +31 -29
  87. package/scss/tag/classes.scss +20 -18
  88. package/scss/text/classes.scss +36 -34
  89. package/scss/tile/classes.scss +36 -34
  90. package/scss/time-picker/classes.scss +11 -9
  91. package/scss/toast-notification/classes.scss +71 -69
  92. package/scss/toggle-switch/classes.scss +7 -5
  93. package/scss/tooltip/classes.scss +17 -15
  94. package/scss/tree/classes.scss +13 -11
  95. package/scss/user-icon/classes.scss +18 -16
  96. package/scss/wizard/classes.scss +18 -16
package/css/toast-notification.css CHANGED
@@ -2,327 +2,329 @@
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-toast-wrapper{
6
- pointer-events:none;
7
- position:fixed;
8
- display:flex;
9
- align-items:center;
10
- flex-direction:column;
11
- justify-content:center;
12
- z-index:99999;
13
- }
14
- @media screen and (max-width: 400px){
5
+ @layer itwinui-v1{
15
6
  .iui-toast-wrapper{
16
- width:calc(100vw - 36px);
17
- margin-top:11px;
7
+ pointer-events:none;
8
+ position:fixed;
9
+ display:flex;
10
+ align-items:center;
11
+ flex-direction:column;
12
+ justify-content:center;
13
+ z-index:99999;
14
+ }
15
+ @media screen and (max-width: 400px){
16
+ .iui-toast-wrapper{
17
+ width:calc(100vw - 36px);
18
+ margin-top:11px;
19
+ }
20
+ }
21
+ @media screen and (min-width: 401px){
22
+ .iui-toast-wrapper{
23
+ min-width:400px;
24
+ max-width:640px;
25
+ margin:22px 0;
26
+ }
27
+ }
28
+ @media (prefers-reduced-motion: no-preference){
29
+ .iui-toast-wrapper .iui-toast-all{
30
+ transition:all 240ms cubic-bezier(0, 0, 0.2, 1);
31
+ }
32
+ }
33
+ .iui-toast-wrapper.iui-placement-top{
34
+ margin-left:auto;
35
+ margin-right:auto;
36
+ left:0;
37
+ top:0;
38
+ right:0;
39
+ }
40
+ .iui-toast-wrapper.iui-placement-top-start{
41
+ left:0;
42
+ top:0;
43
+ align-items:flex-start;
44
+ }
45
+ .iui-toast-wrapper.iui-placement-top-end{
46
+ right:0;
47
+ top:0;
48
+ align-items:flex-end;
49
+ }
50
+ .iui-toast-wrapper.iui-placement-bottom{
51
+ bottom:0;
52
+ margin-left:auto;
53
+ margin-right:auto;
54
+ left:0;
55
+ right:0;
56
+ }
57
+ .iui-toast-wrapper.iui-placement-bottom .iui-toast{
58
+ margin:11px 16px 0 16px;
59
+ }
60
+ .iui-toast-wrapper.iui-placement-bottom-start{
61
+ bottom:0;
62
+ left:0;
63
+ align-items:flex-start;
64
+ }
65
+ .iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
66
+ margin:11px 16px 0 16px;
67
+ }
68
+ .iui-toast-wrapper.iui-placement-bottom-end{
69
+ bottom:0;
70
+ right:0;
71
+ align-items:flex-end;
72
+ }
73
+ .iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
74
+ margin:11px 16px 0 16px;
18
75
  }
19
- }
20
- @media screen and (min-width: 401px){
21
- .iui-toast-wrapper{
22
- min-width:400px;
23
- max-width:640px;
24
- margin:22px 0;
25
- }
26
- }
27
- @media (prefers-reduced-motion: no-preference){
28
- .iui-toast-wrapper .iui-toast-all{
29
- transition:all 240ms cubic-bezier(0, 0, 0.2, 1);
30
- }
31
- }
32
- .iui-toast-wrapper.iui-placement-top{
33
- margin-left:auto;
34
- margin-right:auto;
35
- left:0;
36
- top:0;
37
- right:0;
38
- }
39
- .iui-toast-wrapper.iui-placement-top-start{
40
- left:0;
41
- top:0;
42
- align-items:flex-start;
43
- }
44
- .iui-toast-wrapper.iui-placement-top-end{
45
- right:0;
46
- top:0;
47
- align-items:flex-end;
48
- }
49
- .iui-toast-wrapper.iui-placement-bottom{
50
- bottom:0;
51
- margin-left:auto;
52
- margin-right:auto;
53
- left:0;
54
- right:0;
55
- }
56
- .iui-toast-wrapper.iui-placement-bottom .iui-toast{
57
- margin:11px 16px 0 16px;
58
- }
59
- .iui-toast-wrapper.iui-placement-bottom-start{
60
- bottom:0;
61
- left:0;
62
- align-items:flex-start;
63
- }
64
- .iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
65
- margin:11px 16px 0 16px;
66
- }
67
- .iui-toast-wrapper.iui-placement-bottom-end{
68
- bottom:0;
69
- right:0;
70
- align-items:flex-end;
71
- }
72
- .iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
73
- margin:11px 16px 0 16px;
74
- }
75
76
 
76
- .iui-toast{
77
- margin:0;
78
- padding:0;
79
- border:none;
80
- vertical-align:baseline;
81
- display:inline-flex;
82
- align-items:center;
83
- box-sizing:border-box;
84
- pointer-events:all;
85
- margin:0 16px 11px 16px;
86
- min-height:44px;
87
- border-radius:4px;
88
- background-color:white;
89
- border:1px solid black;
90
- box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4), 0 9px 46px rgba(0, 0, 0, 0.25);
91
- background-color:var(--iui-color-background-1);
92
- border:1px solid var(--iui-color-foreground-body);
93
- box-shadow:0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), 0 9px 46px rgba(0, 0, 0, 0.25);
94
- }
95
- .iui-toast > .iui-status-area{
96
- display:flex;
97
- -ms-grid-row-align:stretch;
98
- align-self:stretch;
99
- justify-content:center;
100
- align-items:center;
101
- width:48px;
102
- flex-shrink:0;
103
- background-color:#c7ccd1;
104
- background-color:var(--iui-color-background-5);
105
- }
106
- .iui-toast > .iui-status-area > .iui-icon{
107
- height:16px;
108
- width:16px;
109
- fill:white;
110
- fill:var(--iui-color-foreground-accessory);
111
- }
112
- .iui-toast > .iui-message{
113
- flex-grow:1;
114
- font-size:14px;
115
- margin-top:5.5px;
116
- margin-bottom:5.5px;
117
- margin-right:24px;
118
- margin-left:16px;
119
- line-height:22px;
120
- font-weight:400;
121
- font-style:normal;
122
- color:rgba(0, 0, 0, 0.8);
123
- color:var(--iui-text-color);
124
- }
125
- .iui-toast-anchor{
126
- text-decoration:underline;
127
- border-radius:4px;
128
- cursor:pointer;
129
- font-size:12px;
130
- margin-right:16px;
131
- -webkit-user-select:none;
132
- -moz-user-select:none;
133
- -ms-user-select:none;
134
- user-select:none;
135
- white-space:nowrap;
136
- }
137
- .iui-toast-anchor:hover{
138
- text-decoration:none;
139
- }
140
- .iui-toast > .iui-button{
141
- margin-right:8px;
142
- }
143
- @media screen and (max-width: 400px){
144
77
  .iui-toast{
145
- width:calc(100vw - 36px);
78
+ margin:0;
79
+ padding:0;
80
+ border:none;
81
+ vertical-align:baseline;
82
+ display:inline-flex;
83
+ align-items:center;
84
+ box-sizing:border-box;
85
+ pointer-events:all;
86
+ margin:0 16px 11px 16px;
87
+ min-height:44px;
88
+ border-radius:4px;
89
+ background-color:white;
90
+ border:1px solid black;
91
+ box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4), 0 9px 46px rgba(0, 0, 0, 0.25);
92
+ background-color:var(--iui-color-background-1);
93
+ border:1px solid var(--iui-color-foreground-body);
94
+ box-shadow:0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), 0 9px 46px rgba(0, 0, 0, 0.25);
146
95
  }
147
- }
148
- @media screen and (min-width: 401px){
149
- .iui-toast{
150
- min-width:400px;
151
- max-width:640px;
152
- }
153
- }
154
- .iui-toast.iui-informational{
155
- border-color:#008ae0;
156
- border-color:var(--iui-color-foreground-primary);
157
- }
158
- .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
159
- background-color:rgba(0, 138, 224, 0.2);
160
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
161
- }
162
- .iui-toast.iui-informational > .iui-message::selection,
96
+ .iui-toast > .iui-status-area{
97
+ display:flex;
98
+ -ms-grid-row-align:stretch;
99
+ align-self:stretch;
100
+ justify-content:center;
101
+ align-items:center;
102
+ width:48px;
103
+ flex-shrink:0;
104
+ background-color:#c7ccd1;
105
+ background-color:var(--iui-color-background-5);
106
+ }
107
+ .iui-toast > .iui-status-area > .iui-icon{
108
+ height:16px;
109
+ width:16px;
110
+ fill:white;
111
+ fill:var(--iui-color-foreground-accessory);
112
+ }
113
+ .iui-toast > .iui-message{
114
+ flex-grow:1;
115
+ font-size:14px;
116
+ margin-top:5.5px;
117
+ margin-bottom:5.5px;
118
+ margin-right:24px;
119
+ margin-left:16px;
120
+ line-height:22px;
121
+ font-weight:400;
122
+ font-style:normal;
123
+ color:rgba(0, 0, 0, 0.8);
124
+ color:var(--iui-text-color);
125
+ }
126
+ .iui-toast-anchor{
127
+ text-decoration:underline;
128
+ border-radius:4px;
129
+ cursor:pointer;
130
+ font-size:12px;
131
+ margin-right:16px;
132
+ -webkit-user-select:none;
133
+ -moz-user-select:none;
134
+ -ms-user-select:none;
135
+ user-select:none;
136
+ white-space:nowrap;
137
+ }
138
+ .iui-toast-anchor:hover{
139
+ text-decoration:none;
140
+ }
141
+ .iui-toast > .iui-button{
142
+ margin-right:8px;
143
+ }
144
+ @media screen and (max-width: 400px){
145
+ .iui-toast{
146
+ width:calc(100vw - 36px);
147
+ }
148
+ }
149
+ @media screen and (min-width: 401px){
150
+ .iui-toast{
151
+ min-width:400px;
152
+ max-width:640px;
153
+ }
154
+ }
155
+ .iui-toast.iui-informational{
156
+ border-color:#008ae0;
157
+ border-color:var(--iui-color-foreground-primary);
158
+ }
159
+ .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
160
+ background-color:rgba(0, 138, 224, 0.2);
161
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
162
+ }
163
+ .iui-toast.iui-informational > .iui-message::selection,
163
164
  .iui-toast.iui-informational > .iui-message *::selection{
164
- background-color:rgba(0, 138, 224, 0.2);
165
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
166
- }
167
- .iui-toast.iui-informational > .iui-status-area{
168
- background-color:#008ae0;
169
- background-color:var(--iui-color-background-primary);
170
- }
171
- .iui-toast.iui-informational > .iui-toast-anchor{
172
- color:#008ae0;
173
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
174
- color:var(--iui-color-foreground-primary);
175
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
176
- }
177
- .iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
178
- outline:1px solid var(--iui-color-foreground-primary);
179
- outline-offset:1px;
180
- }
181
- @supports not selector(*:focus-visible){
182
- .iui-toast.iui-informational > .iui-toast-anchor:focus{
165
+ background-color:rgba(0, 138, 224, 0.2);
166
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
167
+ }
168
+ .iui-toast.iui-informational > .iui-status-area{
169
+ background-color:#008ae0;
170
+ background-color:var(--iui-color-background-primary);
171
+ }
172
+ .iui-toast.iui-informational > .iui-toast-anchor{
173
+ color:#008ae0;
174
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
175
+ color:var(--iui-color-foreground-primary);
176
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
177
+ }
178
+ .iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
183
179
  outline:1px solid var(--iui-color-foreground-primary);
184
180
  outline-offset:1px;
185
181
  }
186
- }
187
- .iui-toast.iui-informational > .iui-toast-anchor:hover{
188
- color:#006bad;
189
- color:var(--iui-color-foreground-primary-overlay);
190
- }
191
- .iui-toast.iui-positive{
192
- border-color:#53a21a;
193
- border-color:var(--iui-color-foreground-positive);
194
- }
195
- .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
196
- background-color:rgba(83, 162, 26, 0.2);
197
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
198
- }
199
- .iui-toast.iui-positive > .iui-message::selection,
182
+ @supports not selector(*:focus-visible){
183
+ .iui-toast.iui-informational > .iui-toast-anchor:focus{
184
+ outline:1px solid var(--iui-color-foreground-primary);
185
+ outline-offset:1px;
186
+ }
187
+ }
188
+ .iui-toast.iui-informational > .iui-toast-anchor:hover{
189
+ color:#006bad;
190
+ color:var(--iui-color-foreground-primary-overlay);
191
+ }
192
+ .iui-toast.iui-positive{
193
+ border-color:#53a21a;
194
+ border-color:var(--iui-color-foreground-positive);
195
+ }
196
+ .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
197
+ background-color:rgba(83, 162, 26, 0.2);
198
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
199
+ }
200
+ .iui-toast.iui-positive > .iui-message::selection,
200
201
  .iui-toast.iui-positive > .iui-message *::selection{
201
- background-color:rgba(83, 162, 26, 0.2);
202
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
203
- }
204
- .iui-toast.iui-positive > .iui-status-area{
205
- background-color:#53a21a;
206
- background-color:var(--iui-color-background-positive);
207
- }
208
- .iui-toast.iui-positive > .iui-toast-anchor{
209
- color:#53a21a;
210
- -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
211
- color:var(--iui-color-foreground-positive);
212
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
213
- }
214
- .iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
215
- outline:1px solid var(--iui-color-foreground-positive);
216
- outline-offset:1px;
217
- }
218
- @supports not selector(*:focus-visible){
219
- .iui-toast.iui-positive > .iui-toast-anchor:focus{
202
+ background-color:rgba(83, 162, 26, 0.2);
203
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
204
+ }
205
+ .iui-toast.iui-positive > .iui-status-area{
206
+ background-color:#53a21a;
207
+ background-color:var(--iui-color-background-positive);
208
+ }
209
+ .iui-toast.iui-positive > .iui-toast-anchor{
210
+ color:#53a21a;
211
+ -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
212
+ color:var(--iui-color-foreground-positive);
213
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
214
+ }
215
+ .iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
220
216
  outline:1px solid var(--iui-color-foreground-positive);
221
217
  outline-offset:1px;
222
218
  }
223
- }
224
- .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
225
- background-color:rgba(83, 162, 26, 0.2);
226
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
227
- }
228
- .iui-toast.iui-positive > .iui-toast-anchor::selection,
219
+ @supports not selector(*:focus-visible){
220
+ .iui-toast.iui-positive > .iui-toast-anchor:focus{
221
+ outline:1px solid var(--iui-color-foreground-positive);
222
+ outline-offset:1px;
223
+ }
224
+ }
225
+ .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
226
+ background-color:rgba(83, 162, 26, 0.2);
227
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
228
+ }
229
+ .iui-toast.iui-positive > .iui-toast-anchor::selection,
229
230
  .iui-toast.iui-positive > .iui-toast-anchor *::selection{
230
- background-color:rgba(83, 162, 26, 0.2);
231
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
232
- }
233
- .iui-toast.iui-positive > .iui-toast-anchor:hover{
234
- color:#3d7613;
235
- color:var(--iui-color-foreground-positive-overlay);
236
- }
237
- .iui-toast.iui-negative{
238
- border-color:#d10a0a;
239
- border-color:var(--iui-color-foreground-negative);
240
- }
241
- .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
242
- background-color:rgba(209, 10, 10, 0.2);
243
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
244
- }
245
- .iui-toast.iui-negative > .iui-message::selection,
231
+ background-color:rgba(83, 162, 26, 0.2);
232
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
233
+ }
234
+ .iui-toast.iui-positive > .iui-toast-anchor:hover{
235
+ color:#3d7613;
236
+ color:var(--iui-color-foreground-positive-overlay);
237
+ }
238
+ .iui-toast.iui-negative{
239
+ border-color:#d10a0a;
240
+ border-color:var(--iui-color-foreground-negative);
241
+ }
242
+ .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
243
+ background-color:rgba(209, 10, 10, 0.2);
244
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
245
+ }
246
+ .iui-toast.iui-negative > .iui-message::selection,
246
247
  .iui-toast.iui-negative > .iui-message *::selection{
247
- background-color:rgba(209, 10, 10, 0.2);
248
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
249
- }
250
- .iui-toast.iui-negative > .iui-status-area{
251
- background-color:#d10a0a;
252
- background-color:var(--iui-color-background-negative);
253
- }
254
- .iui-toast.iui-negative > .iui-toast-anchor{
255
- color:#d10a0a;
256
- -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
257
- color:var(--iui-color-foreground-negative);
258
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
259
- }
260
- .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
261
- outline:1px solid var(--iui-color-foreground-negative);
262
- outline-offset:1px;
263
- }
264
- @supports not selector(*:focus-visible){
265
- .iui-toast.iui-negative > .iui-toast-anchor:focus{
248
+ background-color:rgba(209, 10, 10, 0.2);
249
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
250
+ }
251
+ .iui-toast.iui-negative > .iui-status-area{
252
+ background-color:#d10a0a;
253
+ background-color:var(--iui-color-background-negative);
254
+ }
255
+ .iui-toast.iui-negative > .iui-toast-anchor{
256
+ color:#d10a0a;
257
+ -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
258
+ color:var(--iui-color-foreground-negative);
259
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
260
+ }
261
+ .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
266
262
  outline:1px solid var(--iui-color-foreground-negative);
267
263
  outline-offset:1px;
268
264
  }
269
- }
270
- .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
271
- background-color:rgba(209, 10, 10, 0.2);
272
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
273
- }
274
- .iui-toast.iui-negative > .iui-toast-anchor::selection,
265
+ @supports not selector(*:focus-visible){
266
+ .iui-toast.iui-negative > .iui-toast-anchor:focus{
267
+ outline:1px solid var(--iui-color-foreground-negative);
268
+ outline-offset:1px;
269
+ }
270
+ }
271
+ .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
272
+ background-color:rgba(209, 10, 10, 0.2);
273
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
274
+ }
275
+ .iui-toast.iui-negative > .iui-toast-anchor::selection,
275
276
  .iui-toast.iui-negative > .iui-toast-anchor *::selection{
276
- background-color:rgba(209, 10, 10, 0.2);
277
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
278
- }
279
- .iui-toast.iui-negative > .iui-toast-anchor:hover{
280
- color:#a10808;
281
- color:var(--iui-color-foreground-negative-overlay);
282
- }
283
- .iui-toast.iui-warning{
284
- border-color:#f18d13;
285
- border-color:var(--iui-color-foreground-warning);
286
- }
287
- .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
288
- background-color:rgba(241, 141, 19, 0.2);
289
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
290
- }
291
- .iui-toast.iui-warning > .iui-message::selection,
277
+ background-color:rgba(209, 10, 10, 0.2);
278
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
279
+ }
280
+ .iui-toast.iui-negative > .iui-toast-anchor:hover{
281
+ color:#a10808;
282
+ color:var(--iui-color-foreground-negative-overlay);
283
+ }
284
+ .iui-toast.iui-warning{
285
+ border-color:#f18d13;
286
+ border-color:var(--iui-color-foreground-warning);
287
+ }
288
+ .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
289
+ background-color:rgba(241, 141, 19, 0.2);
290
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
291
+ }
292
+ .iui-toast.iui-warning > .iui-message::selection,
292
293
  .iui-toast.iui-warning > .iui-message *::selection{
293
- background-color:rgba(241, 141, 19, 0.2);
294
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
295
- }
296
- .iui-toast.iui-warning > .iui-status-area{
297
- background-color:#f18d13;
298
- background-color:var(--iui-color-background-warning);
299
- }
300
- .iui-toast.iui-warning > .iui-toast-anchor{
301
- color:#f18d13;
302
- -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
303
- color:var(--iui-color-foreground-warning);
304
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
305
- }
306
- .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
307
- outline:1px solid var(--iui-color-foreground-warning);
308
- outline-offset:1px;
309
- }
310
- @supports not selector(*:focus-visible){
311
- .iui-toast.iui-warning > .iui-toast-anchor:focus{
294
+ background-color:rgba(241, 141, 19, 0.2);
295
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
296
+ }
297
+ .iui-toast.iui-warning > .iui-status-area{
298
+ background-color:#f18d13;
299
+ background-color:var(--iui-color-background-warning);
300
+ }
301
+ .iui-toast.iui-warning > .iui-toast-anchor{
302
+ color:#f18d13;
303
+ -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
304
+ color:var(--iui-color-foreground-warning);
305
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
306
+ }
307
+ .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
312
308
  outline:1px solid var(--iui-color-foreground-warning);
313
309
  outline-offset:1px;
314
310
  }
315
- }
316
- .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
317
- background-color:rgba(241, 141, 19, 0.2);
318
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
319
- }
320
- .iui-toast.iui-warning > .iui-toast-anchor::selection,
311
+ @supports not selector(*:focus-visible){
312
+ .iui-toast.iui-warning > .iui-toast-anchor:focus{
313
+ outline:1px solid var(--iui-color-foreground-warning);
314
+ outline-offset:1px;
315
+ }
316
+ }
317
+ .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
318
+ background-color:rgba(241, 141, 19, 0.2);
319
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
320
+ }
321
+ .iui-toast.iui-warning > .iui-toast-anchor::selection,
321
322
  .iui-toast.iui-warning > .iui-toast-anchor *::selection{
322
- background-color:rgba(241, 141, 19, 0.2);
323
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
324
- }
325
- .iui-toast.iui-warning > .iui-toast-anchor:hover{
326
- color:#c6720c;
327
- color:var(--iui-color-foreground-warning-overlay);
323
+ background-color:rgba(241, 141, 19, 0.2);
324
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
325
+ }
326
+ .iui-toast.iui-warning > .iui-toast-anchor:hover{
327
+ color:#c6720c;
328
+ color:var(--iui-color-foreground-warning-overlay);
329
+ }
328
330
  }