@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/alert.css CHANGED
@@ -11,182 +11,240 @@
11
11
  box-sizing:border-box;
12
12
  display:flex;
13
13
  align-items:center;
14
- border:1px solid #C7CCD1;
14
+ border:1px solid #c7ccd1;
15
15
  color:rgba(0, 0, 0, 0.8);
16
- background-color:#FFF;
16
+ background-color:white;
17
17
  border:1px solid var(--iui-color-background-5);
18
18
  color:var(--iui-text-color);
19
- background-color:var(--iui-color-background-1); }
20
- .iui-alert-icon{
21
- fill:rgba(0, 0, 0, 0.4);
22
- fill:var(--iui-icons-color);
23
- display:inline-flex;
24
- width:16px;
25
- height:16px;
26
- flex-shrink:0;
27
- margin-left:16px; }
28
- .iui-alert-icon.iui-informational{
29
- fill:#008BE1;
30
- fill:var(--iui-icons-color-primary); }
31
- .iui-alert-icon.iui-positive{
32
- fill:#53A21A;
33
- fill:var(--iui-icons-color-positive); }
34
- .iui-alert-icon.iui-warning{
35
- fill:#F18B12;
36
- fill:var(--iui-icons-color-warning); }
37
- .iui-alert-icon.iui-negative{
38
- fill:#D30A0A;
39
- fill:var(--iui-icons-color-negative); }
40
- .iui-alert-message{
41
- margin:11px 16px; }
42
- .iui-alert-link{
43
- cursor:pointer;
44
- margin-left:8px;
45
- text-decoration:underline;
46
- -webkit-user-select:none;
47
- -moz-user-select:none;
48
- -ms-user-select:none;
49
- user-select:none;
50
- white-space:nowrap;
51
- color:#008BE1;
52
- color:var(--iui-color-foreground-primary); }
53
- .iui-alert-link:focus-visible{
54
- outline:1px solid var(--iui-color-foreground-primary);
55
- outline-offset:-1px; }
56
- @supports not selector(*:focus-visible){
57
- .iui-alert-link:focus{
58
- outline:1px solid var(--iui-color-foreground-primary);
59
- outline-offset:-1px; } }
60
- .iui-alert-link:hover{
61
- text-decoration:none;
62
- color:#006bae;
63
- color:var(--iui-color-foreground-primary-overlay); }
64
- .iui-alert > .iui-button{
65
- margin-left:auto;
66
- margin-right:8px; }
67
- .iui-alert.iui-sticky{
68
- border-radius:0;
69
- position:absolute;
70
- top:0;
71
- left:0;
72
- width:100vw; }
73
- .iui-alert.iui-positive{
74
- background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(#FFF, #FFF);
75
- border-color:#53A21A;
76
- background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
77
- border-color:var(--iui-color-foreground-positive); }
78
- .iui-alert.iui-positive .iui-alert-icon{
79
- fill:#53A21A;
80
- fill:var(--iui-icons-color-positive); }
81
- .iui-alert.iui-positive .iui-alert-message::-moz-selection{
82
- background-color:rgba(83, 162, 26, 0.4);
83
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
84
- .iui-alert.iui-positive .iui-alert-message::selection{
85
- background-color:rgba(83, 162, 26, 0.4);
86
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
87
- .iui-alert.iui-positive .iui-alert-link{
88
- border-radius:3px;
89
- color:#53A21A;
90
- color:var(--iui-color-foreground-positive); }
91
- .iui-alert.iui-positive .iui-alert-link:hover{
92
- color:#3c7613;
93
- color:var(--iui-color-foreground-positive-overlay); }
94
- .iui-alert.iui-positive .iui-alert-link:focus-visible{
95
- outline:1px solid var(--iui-color-foreground-positive);
96
- outline-offset:2px; }
97
- @supports not selector(*:focus-visible){
98
- .iui-alert.iui-positive .iui-alert-link:focus{
99
- outline:1px solid var(--iui-color-foreground-positive);
100
- outline-offset:2px; } }
101
- .iui-alert.iui-positive > .iui-button{
102
- outline-color:var(--iui-color-foreground-positive); }
103
- .iui-alert.iui-negative{
104
- background:linear-gradient(rgba(211, 10, 10, 0.1), rgba(211, 10, 10, 0.1)), linear-gradient(#FFF, #FFF);
105
- border-color:#D30A0A;
106
- background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
107
- border-color:var(--iui-color-foreground-negative); }
108
- .iui-alert.iui-negative .iui-alert-icon{
109
- fill:#D30A0A;
110
- fill:var(--iui-icons-color-negative); }
111
- .iui-alert.iui-negative .iui-alert-message::-moz-selection{
112
- background-color:rgba(211, 10, 10, 0.4);
113
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
114
- .iui-alert.iui-negative .iui-alert-message::selection{
115
- background-color:rgba(211, 10, 10, 0.4);
116
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
117
- .iui-alert.iui-negative .iui-alert-link{
118
- border-radius:3px;
119
- color:#D30A0A;
120
- color:var(--iui-color-foreground-negative); }
121
- .iui-alert.iui-negative .iui-alert-link:hover{
122
- color:#a20808;
123
- color:var(--iui-color-foreground-negative-overlay); }
124
- .iui-alert.iui-negative .iui-alert-link:focus-visible{
125
- outline:1px solid var(--iui-color-foreground-negative);
126
- outline-offset:2px; }
127
- @supports not selector(*:focus-visible){
128
- .iui-alert.iui-negative .iui-alert-link:focus{
129
- outline:1px solid var(--iui-color-foreground-negative);
130
- outline-offset:2px; } }
131
- .iui-alert.iui-negative > .iui-button{
132
- outline-color:var(--iui-color-foreground-negative); }
133
- .iui-alert.iui-warning{
134
- background:linear-gradient(rgba(241, 139, 18, 0.1), rgba(241, 139, 18, 0.1)), linear-gradient(#FFF, #FFF);
135
- border-color:#F18B12;
136
- background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
137
- border-color:var(--iui-color-foreground-warning); }
138
- .iui-alert.iui-warning .iui-alert-icon{
139
- fill:#F18B12;
140
- fill:var(--iui-icons-color-warning); }
141
- .iui-alert.iui-warning .iui-alert-message::-moz-selection{
142
- background-color:rgba(241, 139, 18, 0.4);
143
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
144
- .iui-alert.iui-warning .iui-alert-message::selection{
145
- background-color:rgba(241, 139, 18, 0.4);
146
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
147
- .iui-alert.iui-warning .iui-alert-link{
148
- border-radius:3px;
149
- color:#F18B12;
150
- color:var(--iui-color-foreground-warning); }
151
- .iui-alert.iui-warning .iui-alert-link:hover{
152
- color:#c4700c;
153
- color:var(--iui-color-foreground-warning-overlay); }
154
- .iui-alert.iui-warning .iui-alert-link:focus-visible{
155
- outline:1px solid var(--iui-color-foreground-warning);
156
- outline-offset:2px; }
157
- @supports not selector(*:focus-visible){
158
- .iui-alert.iui-warning .iui-alert-link:focus{
159
- outline:1px solid var(--iui-color-foreground-warning);
160
- outline-offset:2px; } }
161
- .iui-alert.iui-warning > .iui-button{
162
- outline-color:var(--iui-color-foreground-warning); }
163
- .iui-alert.iui-informational{
164
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
165
- border-color:#008BE1;
166
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
167
- border-color:var(--iui-color-foreground-primary); }
168
- .iui-alert.iui-informational .iui-alert-icon{
169
- fill:#008BE1;
170
- fill:var(--iui-icons-color-primary); }
171
- .iui-alert.iui-informational .iui-alert-message::-moz-selection{
172
- background-color:rgba(0, 139, 225, 0.4);
173
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
174
- .iui-alert.iui-informational .iui-alert-message::selection{
175
- background-color:rgba(0, 139, 225, 0.4);
176
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
177
- .iui-alert.iui-informational .iui-alert-link{
178
- border-radius:3px;
179
- color:#008BE1;
180
- color:var(--iui-color-foreground-primary); }
181
- .iui-alert.iui-informational .iui-alert-link:hover{
182
- color:#006bae;
183
- color:var(--iui-color-foreground-primary-overlay); }
184
- .iui-alert.iui-informational .iui-alert-link:focus-visible{
185
- outline:1px solid var(--iui-color-foreground-primary);
186
- outline-offset:2px; }
187
- @supports not selector(*:focus-visible){
188
- .iui-alert.iui-informational .iui-alert-link:focus{
189
- outline:1px solid var(--iui-color-foreground-primary);
190
- outline-offset:2px; } }
191
- .iui-alert.iui-informational > .iui-button{
192
- outline-color:var(--iui-color-foreground-primary); }
19
+ background-color:var(--iui-color-background-1);
20
+ }
21
+ .iui-alert-icon{
22
+ fill:rgba(0, 0, 0, 0.4);
23
+ fill:var(--iui-icons-color);
24
+ display:inline-flex;
25
+ width:16px;
26
+ height:16px;
27
+ flex-shrink:0;
28
+ margin-left:16px;
29
+ }
30
+ .iui-alert-icon.iui-informational{
31
+ fill:#008ae0;
32
+ fill:var(--iui-icons-color-primary);
33
+ }
34
+ .iui-alert-icon.iui-positive{
35
+ fill:#53a21a;
36
+ fill:var(--iui-icons-color-positive);
37
+ }
38
+ .iui-alert-icon.iui-warning{
39
+ fill:#f18d13;
40
+ fill:var(--iui-icons-color-warning);
41
+ }
42
+ .iui-alert-icon.iui-negative{
43
+ fill:#d10a0a;
44
+ fill:var(--iui-icons-color-negative);
45
+ }
46
+ .iui-alert-message{
47
+ margin:11px 16px;
48
+ }
49
+ .iui-alert-link{
50
+ cursor:pointer;
51
+ margin-left:8px;
52
+ text-decoration:underline;
53
+ -webkit-user-select:none;
54
+ -moz-user-select:none;
55
+ -ms-user-select:none;
56
+ user-select:none;
57
+ white-space:nowrap;
58
+ color:#008ae0;
59
+ color:var(--iui-color-foreground-primary);
60
+ }
61
+ .iui-alert-link:focus-visible{
62
+ outline:1px solid var(--iui-color-foreground-primary);
63
+ outline-offset:-1px;
64
+ }
65
+ @supports not selector(*:focus-visible){
66
+ .iui-alert-link:focus{
67
+ outline:1px solid var(--iui-color-foreground-primary);
68
+ outline-offset:-1px;
69
+ }
70
+ }
71
+ .iui-alert-link:hover{
72
+ text-decoration:none;
73
+ color:#006bad;
74
+ color:var(--iui-color-foreground-primary-overlay);
75
+ }
76
+ .iui-alert > .iui-button{
77
+ margin-left:auto;
78
+ margin-right:8px;
79
+ }
80
+ .iui-alert.iui-sticky{
81
+ border-radius:0;
82
+ position:absolute;
83
+ top:0;
84
+ left:0;
85
+ width:100vw;
86
+ }
87
+ .iui-alert.iui-positive{
88
+ background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
89
+ border-color:#53a21a;
90
+ background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
91
+ border-color:var(--iui-color-foreground-positive);
92
+ }
93
+ .iui-alert.iui-positive .iui-alert-icon{
94
+ fill:#53a21a;
95
+ fill:var(--iui-icons-color-positive);
96
+ }
97
+ .iui-alert.iui-positive .iui-alert-message::-moz-selection, .iui-alert.iui-positive .iui-alert-message *::-moz-selection{
98
+ background-color:rgba(83, 162, 26, 0.2);
99
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
100
+ }
101
+ .iui-alert.iui-positive .iui-alert-message::selection,
102
+ .iui-alert.iui-positive .iui-alert-message *::selection{
103
+ background-color:rgba(83, 162, 26, 0.2);
104
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
105
+ }
106
+ .iui-alert.iui-positive .iui-alert-link{
107
+ border-radius:3px;
108
+ color:#53a21a;
109
+ color:var(--iui-color-foreground-positive);
110
+ }
111
+ .iui-alert.iui-positive .iui-alert-link:hover{
112
+ color:#3d7613;
113
+ color:var(--iui-color-foreground-positive-overlay);
114
+ }
115
+ .iui-alert.iui-positive .iui-alert-link:focus-visible{
116
+ outline:1px solid var(--iui-color-foreground-positive);
117
+ outline-offset:2px;
118
+ }
119
+ @supports not selector(*:focus-visible){
120
+ .iui-alert.iui-positive .iui-alert-link:focus{
121
+ outline:1px solid var(--iui-color-foreground-positive);
122
+ outline-offset:2px;
123
+ }
124
+ }
125
+ .iui-alert.iui-positive > .iui-button{
126
+ outline-color:var(--iui-color-foreground-positive);
127
+ }
128
+ .iui-alert.iui-negative{
129
+ background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
130
+ border-color:#d10a0a;
131
+ background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
132
+ border-color:var(--iui-color-foreground-negative);
133
+ }
134
+ .iui-alert.iui-negative .iui-alert-icon{
135
+ fill:#d10a0a;
136
+ fill:var(--iui-icons-color-negative);
137
+ }
138
+ .iui-alert.iui-negative .iui-alert-message::-moz-selection, .iui-alert.iui-negative .iui-alert-message *::-moz-selection{
139
+ background-color:rgba(209, 10, 10, 0.2);
140
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
141
+ }
142
+ .iui-alert.iui-negative .iui-alert-message::selection,
143
+ .iui-alert.iui-negative .iui-alert-message *::selection{
144
+ background-color:rgba(209, 10, 10, 0.2);
145
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
146
+ }
147
+ .iui-alert.iui-negative .iui-alert-link{
148
+ border-radius:3px;
149
+ color:#d10a0a;
150
+ color:var(--iui-color-foreground-negative);
151
+ }
152
+ .iui-alert.iui-negative .iui-alert-link:hover{
153
+ color:#a10808;
154
+ color:var(--iui-color-foreground-negative-overlay);
155
+ }
156
+ .iui-alert.iui-negative .iui-alert-link:focus-visible{
157
+ outline:1px solid var(--iui-color-foreground-negative);
158
+ outline-offset:2px;
159
+ }
160
+ @supports not selector(*:focus-visible){
161
+ .iui-alert.iui-negative .iui-alert-link:focus{
162
+ outline:1px solid var(--iui-color-foreground-negative);
163
+ outline-offset:2px;
164
+ }
165
+ }
166
+ .iui-alert.iui-negative > .iui-button{
167
+ outline-color:var(--iui-color-foreground-negative);
168
+ }
169
+ .iui-alert.iui-warning{
170
+ background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
171
+ border-color:#f18d13;
172
+ background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
173
+ border-color:var(--iui-color-foreground-warning);
174
+ }
175
+ .iui-alert.iui-warning .iui-alert-icon{
176
+ fill:#f18d13;
177
+ fill:var(--iui-icons-color-warning);
178
+ }
179
+ .iui-alert.iui-warning .iui-alert-message::-moz-selection, .iui-alert.iui-warning .iui-alert-message *::-moz-selection{
180
+ background-color:rgba(241, 141, 19, 0.2);
181
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
182
+ }
183
+ .iui-alert.iui-warning .iui-alert-message::selection,
184
+ .iui-alert.iui-warning .iui-alert-message *::selection{
185
+ background-color:rgba(241, 141, 19, 0.2);
186
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
187
+ }
188
+ .iui-alert.iui-warning .iui-alert-link{
189
+ border-radius:3px;
190
+ color:#f18d13;
191
+ color:var(--iui-color-foreground-warning);
192
+ }
193
+ .iui-alert.iui-warning .iui-alert-link:hover{
194
+ color:#c6720c;
195
+ color:var(--iui-color-foreground-warning-overlay);
196
+ }
197
+ .iui-alert.iui-warning .iui-alert-link:focus-visible{
198
+ outline:1px solid var(--iui-color-foreground-warning);
199
+ outline-offset:2px;
200
+ }
201
+ @supports not selector(*:focus-visible){
202
+ .iui-alert.iui-warning .iui-alert-link:focus{
203
+ outline:1px solid var(--iui-color-foreground-warning);
204
+ outline-offset:2px;
205
+ }
206
+ }
207
+ .iui-alert.iui-warning > .iui-button{
208
+ outline-color:var(--iui-color-foreground-warning);
209
+ }
210
+ .iui-alert.iui-informational{
211
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
212
+ border-color:#008ae0;
213
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
214
+ border-color:var(--iui-color-foreground-primary);
215
+ }
216
+ .iui-alert.iui-informational .iui-alert-icon{
217
+ fill:#008ae0;
218
+ fill:var(--iui-icons-color-primary);
219
+ }
220
+ .iui-alert.iui-informational .iui-alert-message::-moz-selection, .iui-alert.iui-informational .iui-alert-message *::-moz-selection{
221
+ background-color:rgba(0, 138, 224, 0.2);
222
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
223
+ }
224
+ .iui-alert.iui-informational .iui-alert-message::selection,
225
+ .iui-alert.iui-informational .iui-alert-message *::selection{
226
+ background-color:rgba(0, 138, 224, 0.2);
227
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
228
+ }
229
+ .iui-alert.iui-informational .iui-alert-link{
230
+ border-radius:3px;
231
+ color:#008ae0;
232
+ color:var(--iui-color-foreground-primary);
233
+ }
234
+ .iui-alert.iui-informational .iui-alert-link:hover{
235
+ color:#006bad;
236
+ color:var(--iui-color-foreground-primary-overlay);
237
+ }
238
+ .iui-alert.iui-informational .iui-alert-link:focus-visible{
239
+ outline:1px solid var(--iui-color-foreground-primary);
240
+ outline-offset:2px;
241
+ }
242
+ @supports not selector(*:focus-visible){
243
+ .iui-alert.iui-informational .iui-alert-link:focus{
244
+ outline:1px solid var(--iui-color-foreground-primary);
245
+ outline-offset:2px;
246
+ }
247
+ }
248
+ .iui-alert.iui-informational > .iui-button{
249
+ outline-color:var(--iui-color-foreground-primary);
250
+ }