@itwin/itwinui-css 0.50.1 → 0.51.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 (60) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7242 -5607
  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 +441 -345
  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 +54 -43
  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 +204 -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/carousel/carousel.scss +4 -1
  47. package/scss/code/codeblock.scss +1 -1
  48. package/scss/inputs/checkbox.scss +1 -0
  49. package/scss/inputs/labeled-inputs.scss +8 -8
  50. package/scss/inputs/radio.scss +0 -4
  51. package/scss/location-marker/data-rich.scss +1 -1
  52. package/scss/location-marker/me.scss +4 -4
  53. package/scss/popover/popover.scss +1 -2
  54. package/scss/progress-indicator/linear.scss +2 -10
  55. package/scss/style/global.scss +1 -5
  56. package/scss/style/mixins.scss +9 -0
  57. package/scss/table/table.scss +23 -14
  58. package/scss/toast-notification/categories.scss +1 -5
  59. package/scss/toggle-switch/classes.scss +4 -0
  60. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/time-picker.css CHANGED
@@ -15,57 +15,72 @@
15
15
  height:286px;
16
16
  display:inline-flex;
17
17
  background-color:#FFF;
18
- background-color:var(--iui-color-background-1); }
19
- .iui-time-picker:not(:first-child){
20
- border-left:1px solid #DCE0E3;
21
- border-left:1px solid var(--iui-color-background-4); }
22
- .iui-time-picker:first-child{
23
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); }
18
+ background-color:var(--iui-color-background-1);
19
+ }
20
+ .iui-time-picker:not(:first-child){
21
+ border-left:1px solid #DCE0E3;
22
+ border-left:1px solid var(--iui-color-background-4);
23
+ }
24
+ .iui-time-picker:first-child{
25
+ box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
26
+ }
24
27
 
25
28
  .iui-time{
26
29
  padding:11px 8px;
27
30
  overflow-y:auto;
28
31
  overflow-y:overlay;
29
- scrollbar-width:none; }
30
- .iui-time:not(:first-child){
31
- border-left:1px solid #DCE0E3;
32
- border-left:1px solid var(--iui-color-background-4); }
33
- .iui-time > ol{
34
- margin:0;
35
- padding:0;
36
- border:none;
37
- vertical-align:baseline;
38
- list-style:none; }
39
- .iui-time > ol > li{
40
- padding:6px 16px;
41
- border-radius:3px; }
42
- .iui-time > ol > li:focus-visible{
43
- outline:1px solid var(--iui-color-foreground-primary);
44
- outline-offset:-1px; }
45
- @supports not selector(*:focus-visible){
46
- .iui-time > ol > li:focus{
47
- outline:1px solid var(--iui-color-foreground-primary);
48
- outline-offset:-1px; } }
49
- .iui-time > ol > li:hover{
50
- cursor:pointer;
51
- color:#008BE1;
52
- background-color:rgba(0, 139, 225, 0.1);
53
- color:var(--iui-color-foreground-primary);
54
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
55
- .iui-time > ol > li.iui-selected{
56
- font-weight:600;
57
- cursor:default;
58
- background-color:#008BE1;
59
- color:#FFF;
60
- background-color:var(--iui-color-background-primary);
61
- color:var(--iui-color-foreground-accessory); }
62
- .iui-time > ol > li.iui-selected:focus-visible{
63
- outline:1px solid var(--iui-color-foreground-accessory);
64
- outline-offset:-3px; }
65
- @supports not selector(*:focus-visible){
66
- .iui-time > ol > li.iui-selected:focus{
67
- outline:1px solid var(--iui-color-foreground-accessory);
68
- outline-offset:-3px; } }
32
+ scrollbar-width:none;
33
+ }
34
+ .iui-time:not(:first-child){
35
+ border-left:1px solid #DCE0E3;
36
+ border-left:1px solid var(--iui-color-background-4);
37
+ }
38
+ .iui-time > ol{
39
+ margin:0;
40
+ padding:0;
41
+ border:none;
42
+ vertical-align:baseline;
43
+ list-style:none;
44
+ }
45
+ .iui-time > ol > li{
46
+ padding:6px 16px;
47
+ border-radius:3px;
48
+ }
49
+ .iui-time > ol > li:focus-visible{
50
+ outline:1px solid var(--iui-color-foreground-primary);
51
+ outline-offset:-1px;
52
+ }
53
+ @supports not selector(*:focus-visible){
54
+ .iui-time > ol > li:focus{
55
+ outline:1px solid var(--iui-color-foreground-primary);
56
+ outline-offset:-1px;
57
+ }
58
+ }
59
+ .iui-time > ol > li:hover{
60
+ cursor:pointer;
61
+ color:#008BE1;
62
+ background-color:rgba(0, 139, 225, 0.1);
63
+ color:var(--iui-color-foreground-primary);
64
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
65
+ }
66
+ .iui-time > ol > li.iui-selected{
67
+ font-weight:600;
68
+ cursor:default;
69
+ background-color:#008BE1;
70
+ color:#FFF;
71
+ background-color:var(--iui-color-background-primary);
72
+ color:var(--iui-color-foreground-accessory);
73
+ }
74
+ .iui-time > ol > li.iui-selected:focus-visible{
75
+ outline:1px solid var(--iui-color-foreground-accessory);
76
+ outline-offset:-3px;
77
+ }
78
+ @supports not selector(*:focus-visible){
79
+ .iui-time > ol > li.iui-selected:focus{
80
+ outline:1px solid var(--iui-color-foreground-accessory);
81
+ outline-offset:-3px;
82
+ }
83
+ }
69
84
 
70
85
  .iui-period{
71
86
  padding:11px 8px;
@@ -73,43 +88,55 @@
73
88
  overflow-y:overlay;
74
89
  scrollbar-width:none;
75
90
  display:flex;
76
- align-items:center; }
77
- .iui-period:not(:first-child){
78
- border-left:1px solid #DCE0E3;
79
- border-left:1px solid var(--iui-color-background-4); }
80
- .iui-period > ol{
81
- margin:0;
82
- padding:0;
83
- border:none;
84
- vertical-align:baseline;
85
- list-style:none; }
86
- .iui-period > ol > li{
87
- padding:6px 16px;
88
- border-radius:3px; }
89
- .iui-period > ol > li:focus-visible{
90
- outline:1px solid var(--iui-color-foreground-primary);
91
- outline-offset:-1px; }
92
- @supports not selector(*:focus-visible){
93
- .iui-period > ol > li:focus{
94
- outline:1px solid var(--iui-color-foreground-primary);
95
- outline-offset:-1px; } }
96
- .iui-period > ol > li:hover{
97
- cursor:pointer;
98
- color:#008BE1;
99
- background-color:rgba(0, 139, 225, 0.1);
100
- color:var(--iui-color-foreground-primary);
101
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
102
- .iui-period > ol > li.iui-selected{
103
- font-weight:600;
104
- cursor:default;
105
- background-color:#008BE1;
106
- color:#FFF;
107
- background-color:var(--iui-color-background-primary);
108
- color:var(--iui-color-foreground-accessory); }
109
- .iui-period > ol > li.iui-selected:focus-visible{
110
- outline:1px solid var(--iui-color-foreground-accessory);
111
- outline-offset:-3px; }
112
- @supports not selector(*:focus-visible){
113
- .iui-period > ol > li.iui-selected:focus{
114
- outline:1px solid var(--iui-color-foreground-accessory);
115
- outline-offset:-3px; } }
91
+ align-items:center;
92
+ }
93
+ .iui-period:not(:first-child){
94
+ border-left:1px solid #DCE0E3;
95
+ border-left:1px solid var(--iui-color-background-4);
96
+ }
97
+ .iui-period > ol{
98
+ margin:0;
99
+ padding:0;
100
+ border:none;
101
+ vertical-align:baseline;
102
+ list-style:none;
103
+ }
104
+ .iui-period > ol > li{
105
+ padding:6px 16px;
106
+ border-radius:3px;
107
+ }
108
+ .iui-period > ol > li:focus-visible{
109
+ outline:1px solid var(--iui-color-foreground-primary);
110
+ outline-offset:-1px;
111
+ }
112
+ @supports not selector(*:focus-visible){
113
+ .iui-period > ol > li:focus{
114
+ outline:1px solid var(--iui-color-foreground-primary);
115
+ outline-offset:-1px;
116
+ }
117
+ }
118
+ .iui-period > ol > li:hover{
119
+ cursor:pointer;
120
+ color:#008BE1;
121
+ background-color:rgba(0, 139, 225, 0.1);
122
+ color:var(--iui-color-foreground-primary);
123
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
124
+ }
125
+ .iui-period > ol > li.iui-selected{
126
+ font-weight:600;
127
+ cursor:default;
128
+ background-color:#008BE1;
129
+ color:#FFF;
130
+ background-color:var(--iui-color-background-primary);
131
+ color:var(--iui-color-foreground-accessory);
132
+ }
133
+ .iui-period > ol > li.iui-selected:focus-visible{
134
+ outline:1px solid var(--iui-color-foreground-accessory);
135
+ outline-offset:-3px;
136
+ }
137
+ @supports not selector(*:focus-visible){
138
+ .iui-period > ol > li.iui-selected:focus{
139
+ outline:1px solid var(--iui-color-foreground-accessory);
140
+ outline-offset:-3px;
141
+ }
142
+ }
package/css/toast-notification.css CHANGED
@@ -9,53 +9,69 @@
9
9
  align-items:center;
10
10
  flex-direction:column;
11
11
  justify-content:center;
12
- z-index:1070; }
13
- @media screen and (max-width: 400px){
14
- .iui-toast-wrapper{
15
- width:calc(100vw - 36px);
16
- margin-top:11px; } }
17
- @media screen and (min-width: 401px){
18
- .iui-toast-wrapper{
19
- min-width:400px;
20
- max-width:640px;
21
- margin:22px 0; } }
22
- @media (prefers-reduced-motion: no-preference){
23
- .iui-toast-wrapper .iui-toast-all{
24
- transition:all 240ms cubic-bezier(0, 0, 0.2, 1); } }
25
- .iui-toast-wrapper.iui-placement-top{
26
- margin-left:auto;
27
- margin-right:auto;
28
- left:0;
29
- top:0;
30
- right:0; }
31
- .iui-toast-wrapper.iui-placement-top-start{
32
- left:0;
33
- top:0;
34
- align-items:flex-start; }
35
- .iui-toast-wrapper.iui-placement-top-end{
36
- right:0;
37
- top:0;
38
- align-items:flex-end; }
39
- .iui-toast-wrapper.iui-placement-bottom{
40
- bottom:0;
41
- margin-left:auto;
42
- margin-right:auto;
43
- left:0;
44
- right:0; }
45
- .iui-toast-wrapper.iui-placement-bottom .iui-toast{
46
- margin:11px 16px 0 16px; }
47
- .iui-toast-wrapper.iui-placement-bottom-start{
48
- bottom:0;
49
- left:0;
50
- align-items:flex-start; }
51
- .iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
52
- margin:11px 16px 0 16px; }
53
- .iui-toast-wrapper.iui-placement-bottom-end{
54
- bottom:0;
55
- right:0;
56
- align-items:flex-end; }
57
- .iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
58
- margin:11px 16px 0 16px; }
12
+ z-index:1070;
13
+ }
14
+ @media screen and (max-width: 400px){
15
+ .iui-toast-wrapper{
16
+ width:calc(100vw - 36px);
17
+ margin-top:11px;
18
+ }
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
+ }
59
75
 
60
76
  .iui-toast{
61
77
  margin:0;
@@ -74,129 +90,172 @@
74
90
  box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4), 0 9px 46px rgba(0, 0, 0, 0.25);
75
91
  background-color:var(--iui-color-background-1);
76
92
  border:1px solid var(--iui-color-foreground-body);
77
- 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); }
78
- .iui-toast > .iui-status-area{
79
- display:flex;
80
- -ms-grid-row-align:stretch;
81
- align-self:stretch;
82
- justify-content:center;
83
- align-items:center;
84
- width:48px;
85
- flex-shrink:0;
86
- background-color:#C7CCD1;
87
- background-color:var(--iui-color-background-5); }
88
- .iui-toast > .iui-status-area > .iui-icon{
89
- height:16px;
90
- width:16px;
91
- fill:#FFF;
92
- fill:var(--iui-color-foreground-accessory); }
93
- .iui-toast > .iui-message{
94
- flex-grow:1;
95
- font-size:14px;
96
- margin-top:5.5px;
97
- margin-bottom:5.5px;
98
- margin-right:24px;
99
- margin-left:16px;
100
- line-height:22px;
101
- font-weight:400;
102
- font-style:normal;
103
- color:rgba(0, 0, 0, 0.8);
104
- color:var(--iui-text-color); }
105
- .iui-toast > .iui-anchor{
106
- font-size:12px;
107
- margin-right:16px;
108
- -webkit-user-select:none;
109
- -moz-user-select:none;
110
- -ms-user-select:none;
111
- user-select:none;
112
- text-decoration:underline;
113
- white-space:nowrap; }
114
- .iui-toast > .iui-anchor:hover{
115
- text-decoration:none; }
116
- .iui-toast > .iui-button{
117
- margin-right:8px; }
118
- @media screen and (max-width: 400px){
119
- .iui-toast{
120
- width:calc(100vw - 36px); } }
121
- @media screen and (min-width: 401px){
122
- .iui-toast{
123
- min-width:400px;
124
- max-width:640px; } }
125
- .iui-toast.iui-informational{
126
- border-color:#008BE1;
127
- border-color:var(--iui-color-foreground-primary); }
128
- .iui-toast.iui-informational > .iui-message::-moz-selection{
129
- background-color:rgba(0, 139, 225, 0.4);
130
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
131
- .iui-toast.iui-informational > .iui-message::selection{
132
- background-color:rgba(0, 139, 225, 0.4);
133
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
134
- .iui-toast.iui-informational > .iui-status-area{
135
- background-color:#008BE1;
136
- background-color:var(--iui-color-background-primary); }
137
- .iui-toast.iui-positive{
138
- border-color:#53A21A;
139
- border-color:var(--iui-color-foreground-positive); }
140
- .iui-toast.iui-positive > .iui-message::-moz-selection{
141
- background-color:rgba(83, 162, 26, 0.4);
142
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
143
- .iui-toast.iui-positive > .iui-message::selection{
144
- background-color:rgba(83, 162, 26, 0.4);
145
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
146
- .iui-toast.iui-positive > .iui-status-area{
147
- background-color:#53A21A;
148
- background-color:var(--iui-color-background-positive); }
149
- .iui-toast.iui-positive > .iui-anchor{
150
- color:#53A21A;
151
- color:var(--iui-color-foreground-positive); }
152
- .iui-toast.iui-positive > .iui-anchor:hover{
153
- color:#3c7613;
154
- color:var(--iui-color-foreground-positive-overlay); }
155
- .iui-toast.iui-positive > .iui-anchor{
156
- outline-color:var(--iui-color-foreground-positive); }
157
- .iui-toast.iui-positive > .iui-button{
158
- outline-color:var(--iui-color-foreground-positive); }
159
- .iui-toast.iui-negative{
160
- border-color:#D30A0A;
161
- border-color:var(--iui-color-foreground-negative); }
162
- .iui-toast.iui-negative > .iui-message::-moz-selection{
163
- background-color:rgba(211, 10, 10, 0.4);
164
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
165
- .iui-toast.iui-negative > .iui-message::selection{
166
- background-color:rgba(211, 10, 10, 0.4);
167
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
168
- .iui-toast.iui-negative > .iui-status-area{
169
- background-color:#D30A0A;
170
- background-color:var(--iui-color-background-negative); }
171
- .iui-toast.iui-negative > .iui-anchor{
172
- color:#D30A0A;
173
- color:var(--iui-color-foreground-negative); }
174
- .iui-toast.iui-negative > .iui-anchor:hover{
175
- color:#a20808;
176
- color:var(--iui-color-foreground-negative-overlay); }
177
- .iui-toast.iui-negative > .iui-anchor{
178
- outline-color:var(--iui-color-foreground-negative); }
179
- .iui-toast.iui-negative > .iui-button{
180
- outline-color:var(--iui-color-foreground-negative); }
181
- .iui-toast.iui-warning{
182
- border-color:#F18B12;
183
- border-color:var(--iui-color-foreground-warning); }
184
- .iui-toast.iui-warning > .iui-message::-moz-selection{
185
- background-color:rgba(241, 139, 18, 0.4);
186
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
187
- .iui-toast.iui-warning > .iui-message::selection{
188
- background-color:rgba(241, 139, 18, 0.4);
189
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
190
- .iui-toast.iui-warning > .iui-status-area{
191
- background-color:#F18B12;
192
- background-color:var(--iui-color-background-warning); }
193
- .iui-toast.iui-warning > .iui-anchor{
194
- color:#F18B12;
195
- color:var(--iui-color-foreground-warning); }
196
- .iui-toast.iui-warning > .iui-anchor:hover{
197
- color:#c4700c;
198
- color:var(--iui-color-foreground-warning-overlay); }
199
- .iui-toast.iui-warning > .iui-anchor{
200
- outline-color:var(--iui-color-foreground-warning); }
201
- .iui-toast.iui-warning > .iui-button{
202
- outline-color:var(--iui-color-foreground-warning); }
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:#FFF;
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 > .iui-anchor{
126
+ font-size:12px;
127
+ margin-right:16px;
128
+ -webkit-user-select:none;
129
+ -moz-user-select:none;
130
+ -ms-user-select:none;
131
+ user-select:none;
132
+ text-decoration:underline;
133
+ white-space:nowrap;
134
+ }
135
+ .iui-toast > .iui-anchor:hover{
136
+ text-decoration:none;
137
+ }
138
+ .iui-toast > .iui-button{
139
+ margin-right:8px;
140
+ }
141
+ @media screen and (max-width: 400px){
142
+ .iui-toast{
143
+ width:calc(100vw - 36px);
144
+ }
145
+ }
146
+ @media screen and (min-width: 401px){
147
+ .iui-toast{
148
+ min-width:400px;
149
+ max-width:640px;
150
+ }
151
+ }
152
+ .iui-toast.iui-informational{
153
+ border-color:#008BE1;
154
+ border-color:var(--iui-color-foreground-primary);
155
+ }
156
+ .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
157
+ background-color:rgba(0, 139, 225, 0.4);
158
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
159
+ }
160
+ .iui-toast.iui-informational > .iui-message::selection,
161
+ .iui-toast.iui-informational > .iui-message *::selection{
162
+ background-color:rgba(0, 139, 225, 0.4);
163
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
164
+ }
165
+ .iui-toast.iui-informational > .iui-status-area{
166
+ background-color:#008BE1;
167
+ background-color:var(--iui-color-background-primary);
168
+ }
169
+ .iui-toast.iui-positive{
170
+ border-color:#53A21A;
171
+ border-color:var(--iui-color-foreground-positive);
172
+ }
173
+ .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
174
+ background-color:rgba(83, 162, 26, 0.4);
175
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
176
+ }
177
+ .iui-toast.iui-positive > .iui-message::selection,
178
+ .iui-toast.iui-positive > .iui-message *::selection{
179
+ background-color:rgba(83, 162, 26, 0.4);
180
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
181
+ }
182
+ .iui-toast.iui-positive > .iui-status-area{
183
+ background-color:#53A21A;
184
+ background-color:var(--iui-color-background-positive);
185
+ }
186
+ .iui-toast.iui-positive > .iui-anchor{
187
+ color:#53A21A;
188
+ color:var(--iui-color-foreground-positive);
189
+ }
190
+ .iui-toast.iui-positive > .iui-anchor:hover{
191
+ color:#3c7613;
192
+ color:var(--iui-color-foreground-positive-overlay);
193
+ }
194
+ .iui-toast.iui-positive > .iui-anchor{
195
+ outline-color:var(--iui-color-foreground-positive);
196
+ }
197
+ .iui-toast.iui-positive > .iui-button{
198
+ outline-color:var(--iui-color-foreground-positive);
199
+ }
200
+ .iui-toast.iui-negative{
201
+ border-color:#D30A0A;
202
+ border-color:var(--iui-color-foreground-negative);
203
+ }
204
+ .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
205
+ background-color:rgba(211, 10, 10, 0.4);
206
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
207
+ }
208
+ .iui-toast.iui-negative > .iui-message::selection,
209
+ .iui-toast.iui-negative > .iui-message *::selection{
210
+ background-color:rgba(211, 10, 10, 0.4);
211
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
212
+ }
213
+ .iui-toast.iui-negative > .iui-status-area{
214
+ background-color:#D30A0A;
215
+ background-color:var(--iui-color-background-negative);
216
+ }
217
+ .iui-toast.iui-negative > .iui-anchor{
218
+ color:#D30A0A;
219
+ color:var(--iui-color-foreground-negative);
220
+ }
221
+ .iui-toast.iui-negative > .iui-anchor:hover{
222
+ color:#a20808;
223
+ color:var(--iui-color-foreground-negative-overlay);
224
+ }
225
+ .iui-toast.iui-negative > .iui-anchor{
226
+ outline-color:var(--iui-color-foreground-negative);
227
+ }
228
+ .iui-toast.iui-negative > .iui-button{
229
+ outline-color:var(--iui-color-foreground-negative);
230
+ }
231
+ .iui-toast.iui-warning{
232
+ border-color:#F18B12;
233
+ border-color:var(--iui-color-foreground-warning);
234
+ }
235
+ .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
236
+ background-color:rgba(241, 139, 18, 0.4);
237
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4));
238
+ }
239
+ .iui-toast.iui-warning > .iui-message::selection,
240
+ .iui-toast.iui-warning > .iui-message *::selection{
241
+ background-color:rgba(241, 139, 18, 0.4);
242
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4));
243
+ }
244
+ .iui-toast.iui-warning > .iui-status-area{
245
+ background-color:#F18B12;
246
+ background-color:var(--iui-color-background-warning);
247
+ }
248
+ .iui-toast.iui-warning > .iui-anchor{
249
+ color:#F18B12;
250
+ color:var(--iui-color-foreground-warning);
251
+ }
252
+ .iui-toast.iui-warning > .iui-anchor:hover{
253
+ color:#c4700c;
254
+ color:var(--iui-color-foreground-warning-overlay);
255
+ }
256
+ .iui-toast.iui-warning > .iui-anchor{
257
+ outline-color:var(--iui-color-foreground-warning);
258
+ }
259
+ .iui-toast.iui-warning > .iui-button{
260
+ outline-color:var(--iui-color-foreground-warning);
261
+ }