@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

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 (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  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/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ### 0.63.2
4
+
5
+ - All styles are now wrapped in `@layer`. This makes it possible to easily override and prevent conflicts with the next major version. ([#1037](https://www.github.com/iTwin/iTwinUI/pull/1037))
6
+
3
7
  ### [0.63.1](https://www.github.com/iTwin/iTwinUI/compare/v0.63.0...v0.63.1) (2022-08-11)
4
8
 
5
9
  ### Fixes
package/css/alert.css CHANGED
@@ -2,272 +2,274 @@
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-alert{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- border-radius:4px;
11
- box-sizing:border-box;
12
- display:flex;
13
- align-items:center;
14
- border:1px solid #c7ccd1;
15
- color:rgba(0, 0, 0, 0.8);
16
- background-color:white;
17
- border:1px solid var(--iui-color-background-5);
18
- color:var(--iui-text-color);
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
- @media (forced-colors: active){
5
+ @layer itwinui-v1{
6
+ .iui-alert{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ border-radius:4px;
12
+ box-sizing:border-box;
13
+ display:flex;
14
+ align-items:center;
15
+ border:1px solid #c7ccd1;
16
+ color:rgba(0, 0, 0, 0.8);
17
+ background-color:white;
18
+ border:1px solid var(--iui-color-background-5);
19
+ color:var(--iui-text-color);
20
+ background-color:var(--iui-color-background-1);
21
+ }
31
22
  .iui-alert-icon{
32
- fill:CanvasText;
33
- }
34
- }
35
- .iui-alert-icon.iui-informational{
36
- fill:#008ae0;
37
- fill:var(--iui-icons-color-primary);
38
- }
39
- .iui-alert-icon.iui-positive{
40
- fill:#53a21a;
41
- fill:var(--iui-icons-color-positive);
42
- }
43
- .iui-alert-icon.iui-warning{
44
- fill:#f18d13;
45
- fill:var(--iui-icons-color-warning);
46
- }
47
- .iui-alert-icon.iui-negative{
48
- fill:#d10a0a;
49
- fill:var(--iui-icons-color-negative);
50
- }
51
- .iui-alert-message{
52
- margin:11px 16px;
53
- }
54
- .iui-alert-link{
55
- text-decoration:underline;
56
- border-radius:4px;
57
- cursor:pointer;
58
- margin-left:8px;
59
- -webkit-user-select:none;
60
- -moz-user-select:none;
61
- -ms-user-select:none;
62
- user-select:none;
63
- white-space:nowrap;
64
- }
65
- .iui-alert-link:hover{
66
- text-decoration:none;
67
- }
68
- .iui-alert > .iui-button{
69
- margin-left:auto;
70
- margin-right:8px;
71
- }
72
- .iui-alert.iui-sticky{
73
- border-radius:0;
74
- position:absolute;
75
- top:0;
76
- left:0;
77
- width:100vw;
78
- }
79
- .iui-alert.iui-positive{
80
- background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
81
- border-color:#53a21a;
82
- 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));
83
- border-color:var(--iui-color-foreground-positive);
84
- }
85
- .iui-alert.iui-positive .iui-alert-icon{
86
- fill:#53a21a;
87
- fill:var(--iui-icons-color-positive);
88
- }
89
- .iui-alert.iui-positive .iui-alert-message::-moz-selection, .iui-alert.iui-positive .iui-alert-message *::-moz-selection{
90
- background-color:rgba(83, 162, 26, 0.2);
91
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
92
- }
93
- .iui-alert.iui-positive .iui-alert-message::selection,
23
+ fill:rgba(0, 0, 0, 0.4);
24
+ fill:var(--iui-icons-color);
25
+ display:inline-flex;
26
+ width:16px;
27
+ height:16px;
28
+ flex-shrink:0;
29
+ margin-left:16px;
30
+ }
31
+ @media (forced-colors: active){
32
+ .iui-alert-icon{
33
+ fill:CanvasText;
34
+ }
35
+ }
36
+ .iui-alert-icon.iui-informational{
37
+ fill:#008ae0;
38
+ fill:var(--iui-icons-color-primary);
39
+ }
40
+ .iui-alert-icon.iui-positive{
41
+ fill:#53a21a;
42
+ fill:var(--iui-icons-color-positive);
43
+ }
44
+ .iui-alert-icon.iui-warning{
45
+ fill:#f18d13;
46
+ fill:var(--iui-icons-color-warning);
47
+ }
48
+ .iui-alert-icon.iui-negative{
49
+ fill:#d10a0a;
50
+ fill:var(--iui-icons-color-negative);
51
+ }
52
+ .iui-alert-message{
53
+ margin:11px 16px;
54
+ }
55
+ .iui-alert-link{
56
+ text-decoration:underline;
57
+ border-radius:4px;
58
+ cursor:pointer;
59
+ margin-left:8px;
60
+ -webkit-user-select:none;
61
+ -moz-user-select:none;
62
+ -ms-user-select:none;
63
+ user-select:none;
64
+ white-space:nowrap;
65
+ }
66
+ .iui-alert-link:hover{
67
+ text-decoration:none;
68
+ }
69
+ .iui-alert > .iui-button{
70
+ margin-left:auto;
71
+ margin-right:8px;
72
+ }
73
+ .iui-alert.iui-sticky{
74
+ border-radius:0;
75
+ position:absolute;
76
+ top:0;
77
+ left:0;
78
+ width:100vw;
79
+ }
80
+ .iui-alert.iui-positive{
81
+ background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
82
+ border-color:#53a21a;
83
+ 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));
84
+ border-color:var(--iui-color-foreground-positive);
85
+ }
86
+ .iui-alert.iui-positive .iui-alert-icon{
87
+ fill:#53a21a;
88
+ fill:var(--iui-icons-color-positive);
89
+ }
90
+ .iui-alert.iui-positive .iui-alert-message::-moz-selection, .iui-alert.iui-positive .iui-alert-message *::-moz-selection{
91
+ background-color:rgba(83, 162, 26, 0.2);
92
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
93
+ }
94
+ .iui-alert.iui-positive .iui-alert-message::selection,
94
95
  .iui-alert.iui-positive .iui-alert-message *::selection{
95
- background-color:rgba(83, 162, 26, 0.2);
96
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
97
- }
98
- .iui-alert.iui-positive .iui-alert-link{
99
- color:#53a21a;
100
- -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
101
- color:var(--iui-color-foreground-positive);
102
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
103
- }
104
- .iui-alert.iui-positive .iui-alert-link:focus-visible{
105
- outline:1px solid var(--iui-color-foreground-positive);
106
- outline-offset:1px;
107
- }
108
- @supports not selector(*:focus-visible){
109
- .iui-alert.iui-positive .iui-alert-link:focus{
96
+ background-color:rgba(83, 162, 26, 0.2);
97
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
98
+ }
99
+ .iui-alert.iui-positive .iui-alert-link{
100
+ color:#53a21a;
101
+ -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
102
+ color:var(--iui-color-foreground-positive);
103
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
104
+ }
105
+ .iui-alert.iui-positive .iui-alert-link:focus-visible{
110
106
  outline:1px solid var(--iui-color-foreground-positive);
111
107
  outline-offset:1px;
112
108
  }
113
- }
114
- .iui-alert.iui-positive .iui-alert-link::-moz-selection, .iui-alert.iui-positive .iui-alert-link *::-moz-selection{
115
- background-color:rgba(83, 162, 26, 0.2);
116
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
117
- }
118
- .iui-alert.iui-positive .iui-alert-link::selection,
109
+ @supports not selector(*:focus-visible){
110
+ .iui-alert.iui-positive .iui-alert-link:focus{
111
+ outline:1px solid var(--iui-color-foreground-positive);
112
+ outline-offset:1px;
113
+ }
114
+ }
115
+ .iui-alert.iui-positive .iui-alert-link::-moz-selection, .iui-alert.iui-positive .iui-alert-link *::-moz-selection{
116
+ background-color:rgba(83, 162, 26, 0.2);
117
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
118
+ }
119
+ .iui-alert.iui-positive .iui-alert-link::selection,
119
120
  .iui-alert.iui-positive .iui-alert-link *::selection{
120
- background-color:rgba(83, 162, 26, 0.2);
121
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
122
- }
123
- .iui-alert.iui-positive .iui-alert-link:hover{
124
- color:#3d7613;
125
- color:var(--iui-color-foreground-positive-overlay);
126
- }
127
- .iui-alert.iui-positive > .iui-button{
128
- outline-color:var(--iui-color-foreground-positive);
129
- }
130
- .iui-alert.iui-negative{
131
- background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
132
- border-color:#d10a0a;
133
- 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));
134
- border-color:var(--iui-color-foreground-negative);
135
- }
136
- .iui-alert.iui-negative .iui-alert-icon{
137
- fill:#d10a0a;
138
- fill:var(--iui-icons-color-negative);
139
- }
140
- .iui-alert.iui-negative .iui-alert-message::-moz-selection, .iui-alert.iui-negative .iui-alert-message *::-moz-selection{
141
- background-color:rgba(209, 10, 10, 0.2);
142
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
143
- }
144
- .iui-alert.iui-negative .iui-alert-message::selection,
121
+ background-color:rgba(83, 162, 26, 0.2);
122
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
123
+ }
124
+ .iui-alert.iui-positive .iui-alert-link:hover{
125
+ color:#3d7613;
126
+ color:var(--iui-color-foreground-positive-overlay);
127
+ }
128
+ .iui-alert.iui-positive > .iui-button{
129
+ outline-color:var(--iui-color-foreground-positive);
130
+ }
131
+ .iui-alert.iui-negative{
132
+ background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
133
+ border-color:#d10a0a;
134
+ 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));
135
+ border-color:var(--iui-color-foreground-negative);
136
+ }
137
+ .iui-alert.iui-negative .iui-alert-icon{
138
+ fill:#d10a0a;
139
+ fill:var(--iui-icons-color-negative);
140
+ }
141
+ .iui-alert.iui-negative .iui-alert-message::-moz-selection, .iui-alert.iui-negative .iui-alert-message *::-moz-selection{
142
+ background-color:rgba(209, 10, 10, 0.2);
143
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
144
+ }
145
+ .iui-alert.iui-negative .iui-alert-message::selection,
145
146
  .iui-alert.iui-negative .iui-alert-message *::selection{
146
- background-color:rgba(209, 10, 10, 0.2);
147
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
148
- }
149
- .iui-alert.iui-negative .iui-alert-link{
150
- color:#d10a0a;
151
- -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
152
- color:var(--iui-color-foreground-negative);
153
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
154
- }
155
- .iui-alert.iui-negative .iui-alert-link:focus-visible{
156
- outline:1px solid var(--iui-color-foreground-negative);
157
- outline-offset:1px;
158
- }
159
- @supports not selector(*:focus-visible){
160
- .iui-alert.iui-negative .iui-alert-link:focus{
147
+ background-color:rgba(209, 10, 10, 0.2);
148
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
149
+ }
150
+ .iui-alert.iui-negative .iui-alert-link{
151
+ color:#d10a0a;
152
+ -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
153
+ color:var(--iui-color-foreground-negative);
154
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
155
+ }
156
+ .iui-alert.iui-negative .iui-alert-link:focus-visible{
161
157
  outline:1px solid var(--iui-color-foreground-negative);
162
158
  outline-offset:1px;
163
159
  }
164
- }
165
- .iui-alert.iui-negative .iui-alert-link::-moz-selection, .iui-alert.iui-negative .iui-alert-link *::-moz-selection{
166
- background-color:rgba(209, 10, 10, 0.2);
167
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
168
- }
169
- .iui-alert.iui-negative .iui-alert-link::selection,
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:1px;
164
+ }
165
+ }
166
+ .iui-alert.iui-negative .iui-alert-link::-moz-selection, .iui-alert.iui-negative .iui-alert-link *::-moz-selection{
167
+ background-color:rgba(209, 10, 10, 0.2);
168
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
169
+ }
170
+ .iui-alert.iui-negative .iui-alert-link::selection,
170
171
  .iui-alert.iui-negative .iui-alert-link *::selection{
171
- background-color:rgba(209, 10, 10, 0.2);
172
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
173
- }
174
- .iui-alert.iui-negative .iui-alert-link:hover{
175
- color:#a10808;
176
- color:var(--iui-color-foreground-negative-overlay);
177
- }
178
- .iui-alert.iui-negative > .iui-button{
179
- outline-color:var(--iui-color-foreground-negative);
180
- }
181
- .iui-alert.iui-warning{
182
- background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
183
- border-color:#f18d13;
184
- 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));
185
- border-color:var(--iui-color-foreground-warning);
186
- }
187
- .iui-alert.iui-warning .iui-alert-icon{
188
- fill:#f18d13;
189
- fill:var(--iui-icons-color-warning);
190
- }
191
- .iui-alert.iui-warning .iui-alert-message::-moz-selection, .iui-alert.iui-warning .iui-alert-message *::-moz-selection{
192
- background-color:rgba(241, 141, 19, 0.2);
193
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
194
- }
195
- .iui-alert.iui-warning .iui-alert-message::selection,
172
+ background-color:rgba(209, 10, 10, 0.2);
173
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
174
+ }
175
+ .iui-alert.iui-negative .iui-alert-link:hover{
176
+ color:#a10808;
177
+ color:var(--iui-color-foreground-negative-overlay);
178
+ }
179
+ .iui-alert.iui-negative > .iui-button{
180
+ outline-color:var(--iui-color-foreground-negative);
181
+ }
182
+ .iui-alert.iui-warning{
183
+ background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
184
+ border-color:#f18d13;
185
+ 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));
186
+ border-color:var(--iui-color-foreground-warning);
187
+ }
188
+ .iui-alert.iui-warning .iui-alert-icon{
189
+ fill:#f18d13;
190
+ fill:var(--iui-icons-color-warning);
191
+ }
192
+ .iui-alert.iui-warning .iui-alert-message::-moz-selection, .iui-alert.iui-warning .iui-alert-message *::-moz-selection{
193
+ background-color:rgba(241, 141, 19, 0.2);
194
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
195
+ }
196
+ .iui-alert.iui-warning .iui-alert-message::selection,
196
197
  .iui-alert.iui-warning .iui-alert-message *::selection{
197
- background-color:rgba(241, 141, 19, 0.2);
198
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
199
- }
200
- .iui-alert.iui-warning .iui-alert-link{
201
- color:#f18d13;
202
- -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
203
- color:var(--iui-color-foreground-warning);
204
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
205
- }
206
- .iui-alert.iui-warning .iui-alert-link:focus-visible{
207
- outline:1px solid var(--iui-color-foreground-warning);
208
- outline-offset:1px;
209
- }
210
- @supports not selector(*:focus-visible){
211
- .iui-alert.iui-warning .iui-alert-link:focus{
198
+ background-color:rgba(241, 141, 19, 0.2);
199
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
200
+ }
201
+ .iui-alert.iui-warning .iui-alert-link{
202
+ color:#f18d13;
203
+ -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
204
+ color:var(--iui-color-foreground-warning);
205
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
206
+ }
207
+ .iui-alert.iui-warning .iui-alert-link:focus-visible{
212
208
  outline:1px solid var(--iui-color-foreground-warning);
213
209
  outline-offset:1px;
214
210
  }
215
- }
216
- .iui-alert.iui-warning .iui-alert-link::-moz-selection, .iui-alert.iui-warning .iui-alert-link *::-moz-selection{
217
- background-color:rgba(241, 141, 19, 0.2);
218
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
219
- }
220
- .iui-alert.iui-warning .iui-alert-link::selection,
211
+ @supports not selector(*:focus-visible){
212
+ .iui-alert.iui-warning .iui-alert-link:focus{
213
+ outline:1px solid var(--iui-color-foreground-warning);
214
+ outline-offset:1px;
215
+ }
216
+ }
217
+ .iui-alert.iui-warning .iui-alert-link::-moz-selection, .iui-alert.iui-warning .iui-alert-link *::-moz-selection{
218
+ background-color:rgba(241, 141, 19, 0.2);
219
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
220
+ }
221
+ .iui-alert.iui-warning .iui-alert-link::selection,
221
222
  .iui-alert.iui-warning .iui-alert-link *::selection{
222
- background-color:rgba(241, 141, 19, 0.2);
223
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
224
- }
225
- .iui-alert.iui-warning .iui-alert-link:hover{
226
- color:#c6720c;
227
- color:var(--iui-color-foreground-warning-overlay);
228
- }
229
- .iui-alert.iui-warning > .iui-button{
230
- outline-color:var(--iui-color-foreground-warning);
231
- }
232
- .iui-alert.iui-informational{
233
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
234
- border-color:#008ae0;
235
- 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));
236
- border-color:var(--iui-color-foreground-primary);
237
- }
238
- .iui-alert.iui-informational .iui-alert-icon{
239
- fill:#008ae0;
240
- fill:var(--iui-icons-color-primary);
241
- }
242
- .iui-alert.iui-informational .iui-alert-message::-moz-selection, .iui-alert.iui-informational .iui-alert-message *::-moz-selection{
243
- background-color:rgba(0, 138, 224, 0.2);
244
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
245
- }
246
- .iui-alert.iui-informational .iui-alert-message::selection,
223
+ background-color:rgba(241, 141, 19, 0.2);
224
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
225
+ }
226
+ .iui-alert.iui-warning .iui-alert-link:hover{
227
+ color:#c6720c;
228
+ color:var(--iui-color-foreground-warning-overlay);
229
+ }
230
+ .iui-alert.iui-warning > .iui-button{
231
+ outline-color:var(--iui-color-foreground-warning);
232
+ }
233
+ .iui-alert.iui-informational{
234
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
235
+ border-color:#008ae0;
236
+ 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));
237
+ border-color:var(--iui-color-foreground-primary);
238
+ }
239
+ .iui-alert.iui-informational .iui-alert-icon{
240
+ fill:#008ae0;
241
+ fill:var(--iui-icons-color-primary);
242
+ }
243
+ .iui-alert.iui-informational .iui-alert-message::-moz-selection, .iui-alert.iui-informational .iui-alert-message *::-moz-selection{
244
+ background-color:rgba(0, 138, 224, 0.2);
245
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
246
+ }
247
+ .iui-alert.iui-informational .iui-alert-message::selection,
247
248
  .iui-alert.iui-informational .iui-alert-message *::selection{
248
- background-color:rgba(0, 138, 224, 0.2);
249
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
250
- }
251
- .iui-alert.iui-informational .iui-alert-link{
252
- color:#008ae0;
253
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
254
- color:var(--iui-color-foreground-primary);
255
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
256
- }
257
- .iui-alert.iui-informational .iui-alert-link:focus-visible{
258
- outline:1px solid var(--iui-color-foreground-primary);
259
- outline-offset:1px;
260
- }
261
- @supports not selector(*:focus-visible){
262
- .iui-alert.iui-informational .iui-alert-link:focus{
249
+ background-color:rgba(0, 138, 224, 0.2);
250
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
251
+ }
252
+ .iui-alert.iui-informational .iui-alert-link{
253
+ color:#008ae0;
254
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
255
+ color:var(--iui-color-foreground-primary);
256
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
257
+ }
258
+ .iui-alert.iui-informational .iui-alert-link:focus-visible{
263
259
  outline:1px solid var(--iui-color-foreground-primary);
264
260
  outline-offset:1px;
265
261
  }
266
- }
267
- .iui-alert.iui-informational .iui-alert-link:hover{
268
- color:#006bad;
269
- color:var(--iui-color-foreground-primary-overlay);
270
- }
271
- .iui-alert.iui-informational > .iui-button{
272
- outline-color:var(--iui-color-foreground-primary);
262
+ @supports not selector(*:focus-visible){
263
+ .iui-alert.iui-informational .iui-alert-link:focus{
264
+ outline:1px solid var(--iui-color-foreground-primary);
265
+ outline-offset:1px;
266
+ }
267
+ }
268
+ .iui-alert.iui-informational .iui-alert-link:hover{
269
+ color:#006bad;
270
+ color:var(--iui-color-foreground-primary-overlay);
271
+ }
272
+ .iui-alert.iui-informational > .iui-button{
273
+ outline-color:var(--iui-color-foreground-primary);
274
+ }
273
275
  }