@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/time-picker.css CHANGED
@@ -14,58 +14,73 @@
14
14
  text-align:center;
15
15
  height:286px;
16
16
  display:inline-flex;
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); }
17
+ background-color:white;
18
+ background-color:var(--iui-color-background-1);
19
+ }
20
+ .iui-time-picker:not(:first-child){
21
+ border-left:1px solid #c7ccd1;
22
+ border-left:1px solid var(--iui-color-background-border);
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 #c7ccd1;
36
+ border-left:1px solid var(--iui-color-background-border);
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:#008ae0;
62
+ background-color:rgba(0, 138, 224, 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:#008ae0;
70
+ color:white;
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 #c7ccd1;
95
+ border-left:1px solid var(--iui-color-background-border);
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:#008ae0;
121
+ background-color:rgba(0, 138, 224, 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:#008ae0;
129
+ color:white;
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;
@@ -69,134 +85,177 @@
69
85
  margin:0 16px 11px 16px;
70
86
  min-height:44px;
71
87
  border-radius:3px;
72
- background-color:#FFF;
73
- border:1px solid #000;
88
+ background-color:white;
89
+ border:1px solid black;
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: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 > .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:#008ae0;
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, 138, 224, 0.2);
158
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
159
+ }
160
+ .iui-toast.iui-informational > .iui-message::selection,
161
+ .iui-toast.iui-informational > .iui-message *::selection{
162
+ background-color:rgba(0, 138, 224, 0.2);
163
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
164
+ }
165
+ .iui-toast.iui-informational > .iui-status-area{
166
+ background-color:#008ae0;
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.2);
175
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
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.2);
180
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
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:#3d7613;
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:#d10a0a;
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(209, 10, 10, 0.2);
206
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
207
+ }
208
+ .iui-toast.iui-negative > .iui-message::selection,
209
+ .iui-toast.iui-negative > .iui-message *::selection{
210
+ background-color:rgba(209, 10, 10, 0.2);
211
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
212
+ }
213
+ .iui-toast.iui-negative > .iui-status-area{
214
+ background-color:#d10a0a;
215
+ background-color:var(--iui-color-background-negative);
216
+ }
217
+ .iui-toast.iui-negative > .iui-anchor{
218
+ color:#d10a0a;
219
+ color:var(--iui-color-foreground-negative);
220
+ }
221
+ .iui-toast.iui-negative > .iui-anchor:hover{
222
+ color:#a10808;
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:#f18d13;
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, 141, 19, 0.2);
237
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
238
+ }
239
+ .iui-toast.iui-warning > .iui-message::selection,
240
+ .iui-toast.iui-warning > .iui-message *::selection{
241
+ background-color:rgba(241, 141, 19, 0.2);
242
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
243
+ }
244
+ .iui-toast.iui-warning > .iui-status-area{
245
+ background-color:#f18d13;
246
+ background-color:var(--iui-color-background-warning);
247
+ }
248
+ .iui-toast.iui-warning > .iui-anchor{
249
+ color:#f18d13;
250
+ color:var(--iui-color-foreground-warning);
251
+ }
252
+ .iui-toast.iui-warning > .iui-anchor:hover{
253
+ color:#c6720c;
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
+ }