@itwin/itwinui-css 0.53.3 → 0.54.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.
- package/css/alert.css +61 -43
- package/css/all.css +374 -118
- package/css/anchor.css +68 -0
- package/css/breadcrumbs.css +48 -5
- package/css/footer.css +48 -5
- package/css/global.css +0 -23
- package/css/skip-to-content.css +2 -1
- package/css/table.css +9 -9
- package/css/tag.css +47 -5
- package/css/toast-notification.css +94 -27
- package/package.json +1 -1
- package/scss/alert/alert.scss +5 -25
- package/scss/anchor/anchor.scss +79 -0
- package/scss/anchor/classes.scss +7 -0
- package/scss/anchor/index.scss +3 -0
- package/scss/breadcrumbs/breadcrumbs.scss +2 -1
- package/scss/classes.scss +1 -0
- package/scss/footer/footer.scss +1 -0
- package/scss/index.scss +1 -0
- package/scss/skip-to-content/skip-to-content.scss +2 -1
- package/scss/style/global.scss +0 -4
- package/scss/style/mixins.scss +0 -17
- package/scss/table/table.scss +5 -5
- package/scss/tag/classes.scss +1 -0
- package/scss/toast-notification/categories.scss +3 -20
- package/scss/toast-notification/toast.scss +5 -6
package/css/alert.css
CHANGED
|
@@ -47,31 +47,18 @@
|
|
|
47
47
|
margin:11px 16px;
|
|
48
48
|
}
|
|
49
49
|
.iui-alert-link{
|
|
50
|
+
text-decoration:underline;
|
|
51
|
+
border-radius:3px;
|
|
50
52
|
cursor:pointer;
|
|
51
53
|
margin-left:8px;
|
|
52
|
-
text-decoration:underline;
|
|
53
54
|
-webkit-user-select:none;
|
|
54
55
|
-moz-user-select:none;
|
|
55
56
|
-ms-user-select:none;
|
|
56
57
|
user-select:none;
|
|
57
58
|
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
59
|
}
|
|
71
60
|
.iui-alert-link:hover{
|
|
72
61
|
text-decoration:none;
|
|
73
|
-
color:#006bad;
|
|
74
|
-
color:var(--iui-color-foreground-primary-overlay);
|
|
75
62
|
}
|
|
76
63
|
.iui-alert > .iui-button{
|
|
77
64
|
margin-left:auto;
|
|
@@ -104,24 +91,34 @@
|
|
|
104
91
|
background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
|
|
105
92
|
}
|
|
106
93
|
.iui-alert.iui-positive .iui-alert-link{
|
|
107
|
-
border-radius:3px;
|
|
108
94
|
color:#53a21a;
|
|
95
|
+
-webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
|
|
109
96
|
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);
|
|
97
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
|
|
114
98
|
}
|
|
115
99
|
.iui-alert.iui-positive .iui-alert-link:focus-visible{
|
|
116
100
|
outline:1px solid var(--iui-color-foreground-positive);
|
|
117
|
-
outline-offset:
|
|
101
|
+
outline-offset:1px;
|
|
118
102
|
}
|
|
119
103
|
@supports not selector(*:focus-visible){
|
|
120
104
|
.iui-alert.iui-positive .iui-alert-link:focus{
|
|
121
105
|
outline:1px solid var(--iui-color-foreground-positive);
|
|
122
|
-
outline-offset:
|
|
106
|
+
outline-offset:1px;
|
|
123
107
|
}
|
|
124
108
|
}
|
|
109
|
+
.iui-alert.iui-positive .iui-alert-link::-moz-selection, .iui-alert.iui-positive .iui-alert-link *::-moz-selection{
|
|
110
|
+
background-color:rgba(83, 162, 26, 0.2);
|
|
111
|
+
background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
|
|
112
|
+
}
|
|
113
|
+
.iui-alert.iui-positive .iui-alert-link::selection,
|
|
114
|
+
.iui-alert.iui-positive .iui-alert-link *::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:hover{
|
|
119
|
+
color:#3d7613;
|
|
120
|
+
color:var(--iui-color-foreground-positive-overlay);
|
|
121
|
+
}
|
|
125
122
|
.iui-alert.iui-positive > .iui-button{
|
|
126
123
|
outline-color:var(--iui-color-foreground-positive);
|
|
127
124
|
}
|
|
@@ -145,24 +142,34 @@
|
|
|
145
142
|
background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
|
|
146
143
|
}
|
|
147
144
|
.iui-alert.iui-negative .iui-alert-link{
|
|
148
|
-
border-radius:3px;
|
|
149
145
|
color:#d10a0a;
|
|
146
|
+
-webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
|
|
150
147
|
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);
|
|
148
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
|
|
155
149
|
}
|
|
156
150
|
.iui-alert.iui-negative .iui-alert-link:focus-visible{
|
|
157
151
|
outline:1px solid var(--iui-color-foreground-negative);
|
|
158
|
-
outline-offset:
|
|
152
|
+
outline-offset:1px;
|
|
159
153
|
}
|
|
160
154
|
@supports not selector(*:focus-visible){
|
|
161
155
|
.iui-alert.iui-negative .iui-alert-link:focus{
|
|
162
156
|
outline:1px solid var(--iui-color-foreground-negative);
|
|
163
|
-
outline-offset:
|
|
157
|
+
outline-offset:1px;
|
|
164
158
|
}
|
|
165
159
|
}
|
|
160
|
+
.iui-alert.iui-negative .iui-alert-link::-moz-selection, .iui-alert.iui-negative .iui-alert-link *::-moz-selection{
|
|
161
|
+
background-color:rgba(209, 10, 10, 0.2);
|
|
162
|
+
background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
|
|
163
|
+
}
|
|
164
|
+
.iui-alert.iui-negative .iui-alert-link::selection,
|
|
165
|
+
.iui-alert.iui-negative .iui-alert-link *::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:hover{
|
|
170
|
+
color:#a10808;
|
|
171
|
+
color:var(--iui-color-foreground-negative-overlay);
|
|
172
|
+
}
|
|
166
173
|
.iui-alert.iui-negative > .iui-button{
|
|
167
174
|
outline-color:var(--iui-color-foreground-negative);
|
|
168
175
|
}
|
|
@@ -186,24 +193,34 @@
|
|
|
186
193
|
background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
|
|
187
194
|
}
|
|
188
195
|
.iui-alert.iui-warning .iui-alert-link{
|
|
189
|
-
border-radius:3px;
|
|
190
196
|
color:#f18d13;
|
|
197
|
+
-webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
|
|
191
198
|
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);
|
|
199
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
|
|
196
200
|
}
|
|
197
201
|
.iui-alert.iui-warning .iui-alert-link:focus-visible{
|
|
198
202
|
outline:1px solid var(--iui-color-foreground-warning);
|
|
199
|
-
outline-offset:
|
|
203
|
+
outline-offset:1px;
|
|
200
204
|
}
|
|
201
205
|
@supports not selector(*:focus-visible){
|
|
202
206
|
.iui-alert.iui-warning .iui-alert-link:focus{
|
|
203
207
|
outline:1px solid var(--iui-color-foreground-warning);
|
|
204
|
-
outline-offset:
|
|
208
|
+
outline-offset:1px;
|
|
205
209
|
}
|
|
206
210
|
}
|
|
211
|
+
.iui-alert.iui-warning .iui-alert-link::-moz-selection, .iui-alert.iui-warning .iui-alert-link *::-moz-selection{
|
|
212
|
+
background-color:rgba(241, 141, 19, 0.2);
|
|
213
|
+
background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
|
|
214
|
+
}
|
|
215
|
+
.iui-alert.iui-warning .iui-alert-link::selection,
|
|
216
|
+
.iui-alert.iui-warning .iui-alert-link *::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:hover{
|
|
221
|
+
color:#c6720c;
|
|
222
|
+
color:var(--iui-color-foreground-warning-overlay);
|
|
223
|
+
}
|
|
207
224
|
.iui-alert.iui-warning > .iui-button{
|
|
208
225
|
outline-color:var(--iui-color-foreground-warning);
|
|
209
226
|
}
|
|
@@ -227,24 +244,25 @@
|
|
|
227
244
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
228
245
|
}
|
|
229
246
|
.iui-alert.iui-informational .iui-alert-link{
|
|
230
|
-
border-radius:3px;
|
|
231
247
|
color:#008ae0;
|
|
248
|
+
-webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
|
|
232
249
|
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);
|
|
250
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
237
251
|
}
|
|
238
252
|
.iui-alert.iui-informational .iui-alert-link:focus-visible{
|
|
239
253
|
outline:1px solid var(--iui-color-foreground-primary);
|
|
240
|
-
outline-offset:
|
|
254
|
+
outline-offset:1px;
|
|
241
255
|
}
|
|
242
256
|
@supports not selector(*:focus-visible){
|
|
243
257
|
.iui-alert.iui-informational .iui-alert-link:focus{
|
|
244
258
|
outline:1px solid var(--iui-color-foreground-primary);
|
|
245
|
-
outline-offset:
|
|
259
|
+
outline-offset:1px;
|
|
246
260
|
}
|
|
247
261
|
}
|
|
262
|
+
.iui-alert.iui-informational .iui-alert-link:hover{
|
|
263
|
+
color:#006bad;
|
|
264
|
+
color:var(--iui-color-foreground-primary-overlay);
|
|
265
|
+
}
|
|
248
266
|
.iui-alert.iui-informational > .iui-button{
|
|
249
267
|
outline-color:var(--iui-color-foreground-primary);
|
|
250
268
|
}
|