@bi-digital/css 0.4.2 → 0.6.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/dist/baseline.css +2 -7
- package/dist/components/alert.css +24 -0
- package/dist/components/button.css +5 -13
- package/dist/components/card.css +62 -27
- package/dist/components/checkbox-subsection.css +1 -1
- package/dist/components/chip.css +182 -95
- package/dist/components/details.css +1 -1
- package/dist/components/dialog.css +3 -3
- package/dist/components/dropdown.css +3 -3
- package/dist/components/field.css +7 -37
- package/dist/components/filter-group.css +3 -3
- package/dist/components/input.css +11 -39
- package/dist/components/label.css +1 -5
- package/dist/components/popover.css +3 -3
- package/dist/components/spinner.css +3 -3
- package/dist/components/validation-message.css +1 -5
- package/dist/components.css +310 -238
- package/dist/index.css +61 -224
- package/dist/reset.css +2 -14
- package/dist/salesforce.css +367 -441
- package/dist/tokens.css +57 -203
- package/package.json +3 -3
package/dist/salesforce.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
:root {
|
|
1
|
+
:root, :host {
|
|
2
2
|
--bi-basic-key: #000;
|
|
3
3
|
--bi-basic-white: #fff;
|
|
4
4
|
--bi-neutral-0: #fafbfc;
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
--bi-primary-95: #002341;
|
|
37
37
|
--bi-primary-100: #001932;
|
|
38
38
|
--bi-secondary-0: #fffbeb;
|
|
39
|
-
--bi-secondary-5: #
|
|
39
|
+
--bi-secondary-5: #fff7d5;
|
|
40
40
|
--bi-secondary-10: #fff2bf;
|
|
41
41
|
--bi-secondary-15: #ffea95;
|
|
42
42
|
--bi-secondary-20: #ffe680;
|
|
@@ -138,6 +138,7 @@
|
|
|
138
138
|
--bi-scale-12x: 3rem;
|
|
139
139
|
--bi-scale-14x: 3.5rem;
|
|
140
140
|
--bi-scale-16x: 4rem;
|
|
141
|
+
--bi-scale-18x: 4.5rem;
|
|
141
142
|
--bi-scale-20x: 5rem;
|
|
142
143
|
--bi-scale-24x: 6rem;
|
|
143
144
|
--bi-scale-32x: 8rem;
|
|
@@ -148,23 +149,26 @@
|
|
|
148
149
|
--bi-scale-64x: 16rem;
|
|
149
150
|
--bi-scale-80x: 20rem;
|
|
150
151
|
--bi-scale-max: 624.938rem;
|
|
151
|
-
--bi-opacity-dark-80:
|
|
152
|
-
--bi-opacity-dark-50:
|
|
153
|
-
--bi-opacity-light-100:
|
|
154
|
-
--bi-opacity-light-80:
|
|
155
|
-
--bi-opacity-light-50:
|
|
156
|
-
--bi-stroke-
|
|
157
|
-
--bi-elevation-25:
|
|
158
|
-
--bi-
|
|
159
|
-
--bi-
|
|
160
|
-
--bi-
|
|
161
|
-
--bi-
|
|
152
|
+
--bi-opacity-dark-80: #26333f33;
|
|
153
|
+
--bi-opacity-dark-50: #26333f80;
|
|
154
|
+
--bi-opacity-light-100: #fff0;
|
|
155
|
+
--bi-opacity-light-80: #fff3;
|
|
156
|
+
--bi-opacity-light-50: #ffffff80;
|
|
157
|
+
--bi-stroke-medium: .09375rem;
|
|
158
|
+
--bi-elevation-25: #26333f26;
|
|
159
|
+
--bi-font-family-plain: "museo-sans", Arial, sans-serif;
|
|
160
|
+
--bi-font-family-brand: "museo-slab", serif;
|
|
161
|
+
--bi-font-weight-bold: 700;
|
|
162
|
+
--bi-font-weight-regular: 500;
|
|
163
|
+
--bi-font-color-secondary-dark-background-2: #ffffffb3;
|
|
164
|
+
--bi-font-color-disabled-dark-background: #ffffffb3;
|
|
165
|
+
--bi-states-hover-dark: #26333f1a;
|
|
166
|
+
--bi-states-hover-light: #ffffff1a;
|
|
167
|
+
--bi-states-press-dark: #26333f26;
|
|
168
|
+
--bi-states-press-light: #ffffff26;
|
|
162
169
|
--bi-stroke-none: var(--bi-scale-0);
|
|
163
170
|
--bi-stroke-thin: var(--bi-scale-0-25x);
|
|
164
171
|
--bi-stroke-thick: var(--bi-scale-0-50x);
|
|
165
|
-
--bi-stroke-color-1: var(--bi-neutral-15);
|
|
166
|
-
--bi-stroke-color-2: var(--bi-neutral-25);
|
|
167
|
-
--bi-stroke-color-3: var(--bi-neutral-50);
|
|
168
172
|
--bi-radius-none: var(--bi-scale-0);
|
|
169
173
|
--bi-radius-small: var(--bi-scale-0-50x);
|
|
170
174
|
--bi-radius-medium: var(--bi-scale-1x);
|
|
@@ -177,197 +181,47 @@
|
|
|
177
181
|
--bi-icon-large: var(--bi-scale-8x);
|
|
178
182
|
--bi-icon-xl: var(--bi-scale-10x);
|
|
179
183
|
--bi-icon-2xl: var(--bi-scale-11x);
|
|
180
|
-
--bi-icon-primary: var(--bi-neutral-
|
|
181
|
-
--bi-icon-secondary: var(--bi-neutral-60);
|
|
182
|
-
--bi-icon-disabled: var(--bi-neutral-50);
|
|
183
|
-
--bi-icon-link: var(--bi-primary-50);
|
|
184
|
-
--bi-layout-navbar-height: var(--bi-scale-16x);
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
:host {
|
|
188
|
-
--bi-basic-key: #000;
|
|
189
|
-
--bi-basic-white: #fff;
|
|
190
|
-
--bi-neutral-0: #fafbfc;
|
|
191
|
-
--bi-neutral-5: #f5f7fa;
|
|
192
|
-
--bi-neutral-10: #e4e8ed;
|
|
193
|
-
--bi-neutral-15: #d5dde4;
|
|
194
|
-
--bi-neutral-20: #c8d1db;
|
|
195
|
-
--bi-neutral-25: #bac6d2;
|
|
196
|
-
--bi-neutral-30: #acbbca;
|
|
197
|
-
--bi-neutral-40: #90a3b7;
|
|
198
|
-
--bi-neutral-50: #597694;
|
|
199
|
-
--bi-neutral-60: #475e75;
|
|
200
|
-
--bi-neutral-70: #3e5266;
|
|
201
|
-
--bi-neutral-75: #344557;
|
|
202
|
-
--bi-neutral-80: #303f4f;
|
|
203
|
-
--bi-neutral-85: #2b3947;
|
|
204
|
-
--bi-neutral-90: #26333f;
|
|
205
|
-
--bi-neutral-95: #222d38;
|
|
206
|
-
--bi-neutral-100: #171f26;
|
|
207
|
-
--bi-primary-0: #ebf3ff;
|
|
208
|
-
--bi-primary-5: #d9e6f9;
|
|
209
|
-
--bi-primary-10: #c5d9f7;
|
|
210
|
-
--bi-primary-15: #b2cdf4;
|
|
211
|
-
--bi-primary-20: #9ec0f1;
|
|
212
|
-
--bi-primary-25: #8bb3ee;
|
|
213
|
-
--bi-primary-30: #75a5f1;
|
|
214
|
-
--bi-primary-40: #6196f4;
|
|
215
|
-
--bi-primary-50: #0a64ff;
|
|
216
|
-
--bi-primary-60: #0b4db4;
|
|
217
|
-
--bi-primary-70: #0b49a1;
|
|
218
|
-
--bi-primary-75: #0c468f;
|
|
219
|
-
--bi-primary-80: #093f82;
|
|
220
|
-
--bi-primary-85: #083a76;
|
|
221
|
-
--bi-primary-90: #042f5b;
|
|
222
|
-
--bi-primary-95: #002341;
|
|
223
|
-
--bi-primary-100: #001932;
|
|
224
|
-
--bi-secondary-0: #fffbeb;
|
|
225
|
-
--bi-secondary-5: #fcf6df;
|
|
226
|
-
--bi-secondary-10: #fff2bf;
|
|
227
|
-
--bi-secondary-15: #ffea95;
|
|
228
|
-
--bi-secondary-20: #ffe680;
|
|
229
|
-
--bi-secondary-25: #ffe26a;
|
|
230
|
-
--bi-secondary-30: #ffde55;
|
|
231
|
-
--bi-secondary-40: #ffd52b;
|
|
232
|
-
--bi-secondary-50: #ffcd00;
|
|
233
|
-
--bi-secondary-60: #deb300;
|
|
234
|
-
--bi-secondary-70: #bd9800;
|
|
235
|
-
--bi-secondary-75: #9d7e00;
|
|
236
|
-
--bi-secondary-80: #7c6400;
|
|
237
|
-
--bi-secondary-85: #5b4900;
|
|
238
|
-
--bi-secondary-90: #4a3c01;
|
|
239
|
-
--bi-secondary-95: #3a2f00;
|
|
240
|
-
--bi-secondary-100: #262000;
|
|
241
|
-
--bi-info-0: #f3ebff;
|
|
242
|
-
--bi-info-5: #e6d5ff;
|
|
243
|
-
--bi-info-10: #d9bfff;
|
|
244
|
-
--bi-info-15: #cdaaff;
|
|
245
|
-
--bi-info-20: #c094ff;
|
|
246
|
-
--bi-info-25: #b480ff;
|
|
247
|
-
--bi-info-30: #a76aff;
|
|
248
|
-
--bi-info-40: #822bff;
|
|
249
|
-
--bi-info-50: #6900ff;
|
|
250
|
-
--bi-info-60: #5c03dc;
|
|
251
|
-
--bi-info-70: #4f05b9;
|
|
252
|
-
--bi-info-75: #420896;
|
|
253
|
-
--bi-info-80: #3b0984;
|
|
254
|
-
--bi-info-85: #350a73;
|
|
255
|
-
--bi-info-90: #2e0b61;
|
|
256
|
-
--bi-info-95: #280d50;
|
|
257
|
-
--bi-info-100: #1a0833;
|
|
258
|
-
--bi-warning-0: #fffbeb;
|
|
259
|
-
--bi-warning-5: #fff7d5;
|
|
260
|
-
--bi-warning-10: #fff2bf;
|
|
261
|
-
--bi-warning-15: #ffea95;
|
|
262
|
-
--bi-warning-20: #ffe680;
|
|
263
|
-
--bi-warning-25: #ffe26a;
|
|
264
|
-
--bi-warning-30: #ffde55;
|
|
265
|
-
--bi-warning-40: #ffd52b;
|
|
266
|
-
--bi-warning-50: #ffcd00;
|
|
267
|
-
--bi-warning-60: #deb300;
|
|
268
|
-
--bi-warning-70: #bd9800;
|
|
269
|
-
--bi-warning-75: #9d7e00;
|
|
270
|
-
--bi-warning-80: #7c6400;
|
|
271
|
-
--bi-warning-85: #5b4900;
|
|
272
|
-
--bi-warning-90: #4a3c01;
|
|
273
|
-
--bi-warning-95: #3a2f00;
|
|
274
|
-
--bi-warning-100: #262000;
|
|
275
|
-
--bi-success-0: #ebffeb;
|
|
276
|
-
--bi-success-5: #d5f4d6;
|
|
277
|
-
--bi-success-10: #bfeec2;
|
|
278
|
-
--bi-success-15: #aae8ae;
|
|
279
|
-
--bi-success-20: #95e299;
|
|
280
|
-
--bi-success-25: #80dd85;
|
|
281
|
-
--bi-success-30: #55d15c;
|
|
282
|
-
--bi-success-40: #2bc634;
|
|
283
|
-
--bi-success-50: #00ab0b;
|
|
284
|
-
--bi-success-60: #04a30d;
|
|
285
|
-
--bi-success-70: #078b0f;
|
|
286
|
-
--bi-success-75: #0b7411;
|
|
287
|
-
--bi-success-80: #0f5d13;
|
|
288
|
-
--bi-success-85: #124515;
|
|
289
|
-
--bi-success-90: #143a16;
|
|
290
|
-
--bi-success-95: #162e17;
|
|
291
|
-
--bi-success-100: #0f1f0f;
|
|
292
|
-
--bi-alert-0: #fff1f0;
|
|
293
|
-
--bi-alert-5: #ffe1df;
|
|
294
|
-
--bi-alert-10: #ffd7d5;
|
|
295
|
-
--bi-alert-15: #ffc3bf;
|
|
296
|
-
--bi-alert-20: #ffafaa;
|
|
297
|
-
--bi-alert-25: #ff8780;
|
|
298
|
-
--bi-alert-30: #ff5f55;
|
|
299
|
-
--bi-alert-40: #ff372b;
|
|
300
|
-
--bi-alert-50: #ff0f00;
|
|
301
|
-
--bi-alert-60: #e41100;
|
|
302
|
-
--bi-alert-70: #c91300;
|
|
303
|
-
--bi-alert-75: #ae1601;
|
|
304
|
-
--bi-alert-80: #931801;
|
|
305
|
-
--bi-alert-85: #731a15;
|
|
306
|
-
--bi-alert-90: #6a1b16;
|
|
307
|
-
--bi-alert-95: #5d1c18;
|
|
308
|
-
--bi-alert-100: #280c0a;
|
|
309
|
-
--bi-scale-0: 0;
|
|
310
|
-
--bi-scale-0-25x: .0625rem;
|
|
311
|
-
--bi-scale-0-50x: .125rem;
|
|
312
|
-
--bi-scale-0-75x: .1875rem;
|
|
313
|
-
--bi-scale-1x: .25rem;
|
|
314
|
-
--bi-scale-1-5x: .375rem;
|
|
315
|
-
--bi-scale-2x: .5rem;
|
|
316
|
-
--bi-scale-3x: .75rem;
|
|
317
|
-
--bi-scale-4x: 1rem;
|
|
318
|
-
--bi-scale-5x: 1.25rem;
|
|
319
|
-
--bi-scale-6x: 1.5rem;
|
|
320
|
-
--bi-scale-8x: 2rem;
|
|
321
|
-
--bi-scale-9x: 2.25rem;
|
|
322
|
-
--bi-scale-10x: 2.5rem;
|
|
323
|
-
--bi-scale-11x: 2.75rem;
|
|
324
|
-
--bi-scale-12x: 3rem;
|
|
325
|
-
--bi-scale-14x: 3.5rem;
|
|
326
|
-
--bi-scale-16x: 4rem;
|
|
327
|
-
--bi-scale-20x: 5rem;
|
|
328
|
-
--bi-scale-24x: 6rem;
|
|
329
|
-
--bi-scale-32x: 8rem;
|
|
330
|
-
--bi-scale-36x: 9rem;
|
|
331
|
-
--bi-scale-40x: 10rem;
|
|
332
|
-
--bi-scale-48x: 12rem;
|
|
333
|
-
--bi-scale-56x: 14rem;
|
|
334
|
-
--bi-scale-64x: 16rem;
|
|
335
|
-
--bi-scale-80x: 20rem;
|
|
336
|
-
--bi-scale-max: 624.938rem;
|
|
337
|
-
--bi-opacity-dark-80: rgba(38, 51, 63, .2);
|
|
338
|
-
--bi-opacity-dark-50: rgba(38, 51, 63, .5);
|
|
339
|
-
--bi-opacity-light-100: rgba(255, 255, 255, 0);
|
|
340
|
-
--bi-opacity-light-80: rgba(255, 255, 255, .2);
|
|
341
|
-
--bi-opacity-light-50: rgba(255, 255, 255, .5);
|
|
342
|
-
--bi-stroke-default: .09375rem;
|
|
343
|
-
--bi-elevation-25: rgba(38, 51, 63, .15);
|
|
344
|
-
--bi-states-hover-dark: rgba(38, 51, 63, .1);
|
|
345
|
-
--bi-states-hover-light: rgba(255, 255, 255, .1);
|
|
346
|
-
--bi-states-press-dark: rgba(38, 51, 63, .15);
|
|
347
|
-
--bi-states-press-light: rgba(255, 255, 255, .15);
|
|
348
|
-
--bi-stroke-none: var(--bi-scale-0);
|
|
349
|
-
--bi-stroke-thin: var(--bi-scale-0-25x);
|
|
350
|
-
--bi-stroke-thick: var(--bi-scale-0-50x);
|
|
351
|
-
--bi-stroke-color-1: var(--bi-neutral-15);
|
|
352
|
-
--bi-stroke-color-2: var(--bi-neutral-25);
|
|
353
|
-
--bi-stroke-color-3: var(--bi-neutral-50);
|
|
354
|
-
--bi-radius-none: var(--bi-scale-0);
|
|
355
|
-
--bi-radius-small: var(--bi-scale-0-50x);
|
|
356
|
-
--bi-radius-medium: var(--bi-scale-1x);
|
|
357
|
-
--bi-radius-large: var(--bi-scale-2x);
|
|
358
|
-
--bi-radius-xl: var(--bi-scale-3x);
|
|
359
|
-
--bi-radius-brand: var(--bi-scale-12x);
|
|
360
|
-
--bi-radius-full: var(--bi-scale-max);
|
|
361
|
-
--bi-icon-small: var(--bi-scale-5x);
|
|
362
|
-
--bi-icon-medium: var(--bi-scale-6x);
|
|
363
|
-
--bi-icon-large: var(--bi-scale-8x);
|
|
364
|
-
--bi-icon-xl: var(--bi-scale-10x);
|
|
365
|
-
--bi-icon-2xl: var(--bi-scale-11x);
|
|
366
|
-
--bi-icon-primary: var(--bi-neutral-90);
|
|
184
|
+
--bi-icon-primary: var(--bi-neutral-95);
|
|
367
185
|
--bi-icon-secondary: var(--bi-neutral-60);
|
|
368
186
|
--bi-icon-disabled: var(--bi-neutral-50);
|
|
369
187
|
--bi-icon-link: var(--bi-primary-50);
|
|
188
|
+
--bi-font-color-primary: var(--bi-neutral-95);
|
|
189
|
+
--bi-font-color-secondary: var(--bi-neutral-60);
|
|
190
|
+
--bi-font-color-disabled: var(--bi-neutral-50);
|
|
191
|
+
--bi-font-color-accent: var(--bi-primary-60);
|
|
192
|
+
--bi-font-color-link: var(--bi-primary-50);
|
|
193
|
+
--bi-font-color-primary-dark-background: var(--bi-basic-white);
|
|
194
|
+
--bi-font-color-accent-dark-background: var(--bi-primary-20);
|
|
370
195
|
--bi-layout-navbar-height: var(--bi-scale-16x);
|
|
196
|
+
--bi-font-display-large: var(--bi-font-weight-regular) 4rem / 4.5rem var(--bi-font-family-brand);
|
|
197
|
+
--bi-font-display-medium: var(--bi-font-weight-regular) 3rem / 3.5rem var(--bi-font-family-brand);
|
|
198
|
+
--bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem / 2.875rem var(--bi-font-family-brand);
|
|
199
|
+
--bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-plain);
|
|
200
|
+
--bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-brand);
|
|
201
|
+
--bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem / 2.25rem var(--bi-font-family-plain);
|
|
202
|
+
--bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem / 2rem var(--bi-font-family-plain);
|
|
203
|
+
--bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem / 1.6875rem var(--bi-font-family-plain);
|
|
204
|
+
--bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem / 1.4375rem var(--bi-font-family-plain);
|
|
205
|
+
--bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem / 1.25rem var(--bi-font-family-plain);
|
|
206
|
+
--bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem / 1.125rem var(--bi-font-family-plain);
|
|
207
|
+
--bi-font-title-bold-xxs: var(--bi-font-weight-bold) .875rem / 1rem var(--bi-font-family-plain);
|
|
208
|
+
--bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem / 2.25rem var(--bi-font-family-plain);
|
|
209
|
+
--bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-plain);
|
|
210
|
+
--bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem / 1.6875rem var(--bi-font-family-plain);
|
|
211
|
+
--bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem / 1.4375rem var(--bi-font-family-plain);
|
|
212
|
+
--bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem / 1.25rem var(--bi-font-family-plain);
|
|
213
|
+
--bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem / 1.125rem var(--bi-font-family-plain);
|
|
214
|
+
--bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem / 1rem var(--bi-font-family-plain);
|
|
215
|
+
--bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
|
|
216
|
+
--bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
|
|
217
|
+
--bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
|
|
218
|
+
--bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
|
|
219
|
+
--bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
|
|
220
|
+
--bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem / 1.6875rem var(--bi-font-family-plain);
|
|
221
|
+
--bi-font-label-large: var(--bi-font-weight-bold) 1rem / 1.5rem var(--bi-font-family-plain);
|
|
222
|
+
--bi-font-label-medium: var(--bi-font-weight-bold) .875rem / 1.25rem var(--bi-font-family-plain);
|
|
223
|
+
--bi-font-label-small: var(--bi-font-weight-bold) .8125rem / 1.25rem var(--bi-font-family-plain);
|
|
224
|
+
--bi-font-label-xs: var(--bi-font-weight-bold) .75rem / 1.125rem var(--bi-font-family-plain);
|
|
371
225
|
}
|
|
372
226
|
|
|
373
227
|
.bi-alert {
|
|
@@ -462,6 +316,30 @@
|
|
|
462
316
|
--bic-alert-color: var(--bi-warning-5);
|
|
463
317
|
}
|
|
464
318
|
|
|
319
|
+
.bi-alert[data-variant="info"] {
|
|
320
|
+
--bic-alert-background: var(--bi-info-5);
|
|
321
|
+
--bic-alert-border-color: var(--bi-info-10);
|
|
322
|
+
--bic-alert-color: var(--bi-info-90);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.bi-alert[data-variant="info"][data-dark="true"] {
|
|
326
|
+
--bic-alert-background: var(--bi-info-90);
|
|
327
|
+
--bic-alert-border-color: var(--bi-info-80);
|
|
328
|
+
--bic-alert-color: var(--bi-info-10);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.bi-alert[data-variant="neutral"] {
|
|
332
|
+
--bic-alert-background: var(--bi-neutral-10);
|
|
333
|
+
--bic-alert-border-color: var(--bi-neutral-15);
|
|
334
|
+
--bic-alert-color: var(--bi-neutral-95);
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.bi-alert[data-variant="neutral"][data-dark="true"] {
|
|
338
|
+
--bic-alert-background: var(--bi-neutral-90);
|
|
339
|
+
--bic-alert-border-color: var(--bi-neutral-90);
|
|
340
|
+
--bic-alert-color: var(--bi-neutral-30);
|
|
341
|
+
}
|
|
342
|
+
|
|
465
343
|
.bi-alert:has( > .bi-alert--footer) {
|
|
466
344
|
width: 100%;
|
|
467
345
|
}
|
|
@@ -737,7 +615,7 @@
|
|
|
737
615
|
--bic-button-background: var(--bi-primary-50);
|
|
738
616
|
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
|
|
739
617
|
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
|
|
740
|
-
--bic-button-box-shadow: 0px 0px 0px 2px
|
|
618
|
+
--bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
|
|
741
619
|
}
|
|
742
620
|
|
|
743
621
|
.bi-button[data-variant="filled"] {
|
|
@@ -745,7 +623,7 @@
|
|
|
745
623
|
--bic-button-background: var(--bi-primary-50);
|
|
746
624
|
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
|
|
747
625
|
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
|
|
748
|
-
--bic-button-box-shadow: 0px 0px 0px 2px
|
|
626
|
+
--bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
|
|
749
627
|
}
|
|
750
628
|
|
|
751
629
|
.bi-button[data-variant="outlined"] {
|
|
@@ -783,17 +661,13 @@
|
|
|
783
661
|
|
|
784
662
|
.bi-button[data-variant="flat"][data-dark="true"] {
|
|
785
663
|
--bic-button-color: var(--bi-basic-white);
|
|
786
|
-
--bic-button-background:
|
|
664
|
+
--bic-button-background: #ffffff1a;
|
|
787
665
|
--bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
|
|
788
666
|
--bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
|
|
789
667
|
}
|
|
790
668
|
|
|
791
669
|
@media (hover: hover) and (pointer: fine) {
|
|
792
|
-
.bi-button:where(:not(
|
|
793
|
-
background: var(--bic-button-background-hover);
|
|
794
|
-
}
|
|
795
|
-
|
|
796
|
-
.bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):hover {
|
|
670
|
+
.bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
|
|
797
671
|
background: var(--bic-button-background-hover);
|
|
798
672
|
}
|
|
799
673
|
}
|
|
@@ -818,11 +692,7 @@
|
|
|
818
692
|
cursor: progress;
|
|
819
693
|
}
|
|
820
694
|
|
|
821
|
-
.bi-button:where(:not(
|
|
822
|
-
background: var(--bic-button-background-press);
|
|
823
|
-
}
|
|
824
|
-
|
|
825
|
-
.bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):active {
|
|
695
|
+
.bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
|
|
826
696
|
background: var(--bic-button-background-press);
|
|
827
697
|
}
|
|
828
698
|
|
|
@@ -837,36 +707,54 @@
|
|
|
837
707
|
}
|
|
838
708
|
|
|
839
709
|
.bi-card {
|
|
840
|
-
--bic-card-border-color: var(--bi-neutral-15);
|
|
841
|
-
--bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
|
|
842
|
-
--bic-card-border-radius: var(--bi-radius-medium);
|
|
843
710
|
--bic-card-background-color: var(--bi-basic-white);
|
|
711
|
+
--bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
|
|
712
|
+
--bic-card-border-color: var(--bi-neutral-15);
|
|
844
713
|
--bic-card-color: var(--bi-neutral-95);
|
|
845
714
|
--bic-card-header-title-color: var(--bi-neutral-95);
|
|
846
715
|
--bic-card-header-bold-color: var(--bi-primary-60);
|
|
847
716
|
--bic-card-header-label-color: var(--bi-neutral-50);
|
|
848
|
-
--bic-card-actions-background-color: var(--bi-neutral-10);
|
|
849
|
-
--bic-card-actions-icon-color: var(--bi-primary-50);
|
|
850
|
-
--bic-card-actions-flex-direction: column;
|
|
851
|
-
--bic-card-content-padding: var(--bi-scale-4x);
|
|
852
717
|
--bic-card-content-color: var(--bi-neutral-50);
|
|
718
|
+
--bic-card-content-padding: var(--bi-scale-4x);
|
|
719
|
+
--bic-card-border-radius: var(--bi-radius-medium);
|
|
853
720
|
--bic-card-content-lines: 2;
|
|
854
721
|
--bic-card-media-width: 100%;
|
|
855
722
|
--bic-card-media-date-width: 3.1875rem;
|
|
856
723
|
--bic-card-media-date-height: 2.875rem;
|
|
724
|
+
--bic-card-actions-flex-direction: column;
|
|
725
|
+
--bic-card-actions-background-color: var(--bi-neutral-10);
|
|
726
|
+
--bic-card-actions-icon-color: var(--bi-primary-50);
|
|
727
|
+
--bic-card-border-hover-color: var(--bi-neutral-50);
|
|
728
|
+
--bic-card-box-shadow-hover-color: #0000000d;
|
|
729
|
+
--bic-card-box-shadow-focus-color: var(--bi-primary-50);
|
|
730
|
+
--bic-card-box-shadow-focus-background-color: var(--bi-basic-white);
|
|
731
|
+
--bic-card-box-shadow-focus-outer-border: 6px;
|
|
732
|
+
--bic-card-box-shadow-focus-inner-border: 4px;
|
|
733
|
+
--bic-card-border-active-color: var(--bi-primary-50);
|
|
734
|
+
--bic-card-box-shadow-active-color: #0000000d;
|
|
735
|
+
--bic-card-box-shadow-active-outer-border: 20px;
|
|
736
|
+
--bic-card-box-shadow-active-inner-border: 10px;
|
|
857
737
|
}
|
|
858
738
|
|
|
859
739
|
.bi-card[data-dark="true"] {
|
|
740
|
+
--bic-card-background-color: var(--bi-neutral-90);
|
|
860
741
|
--bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
|
|
861
742
|
--bic-card-border-color: var(--bi-neutral-70);
|
|
862
|
-
--bic-card-background-color: var(--bi-neutral-95);
|
|
863
743
|
--bic-card-color: var(--bi-neutral-5);
|
|
864
744
|
--bic-card-header-title-color: var(--bi-neutral-5);
|
|
865
745
|
--bic-card-header-bold-color: var(--bi-primary-20);
|
|
866
746
|
--bic-card-header-label-color: var(--bi-neutral-30);
|
|
867
|
-
--bic-card-actions-background-color: var(--bi-neutral-75);
|
|
868
|
-
--bic-card-actions-icon-color: var(--bi-primary-20);
|
|
869
747
|
--bic-card-content-color: var(--bi-neutral-30);
|
|
748
|
+
--bic-card-actions-background-color: var(--bi-neutral-75);
|
|
749
|
+
--bic-card-actions-icon-color: var(--bi-neutral-10);
|
|
750
|
+
--bic-card-border-hover-color: var(--bi-neutral-25);
|
|
751
|
+
--bic-card-box-shadow-hover-color: #b2cdf40d;
|
|
752
|
+
--bic-card-box-shadow-focus-color: var(--bi-secondary-50);
|
|
753
|
+
--bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
|
|
754
|
+
--bic-card-box-shadow-focus-outer-border: 4.5px;
|
|
755
|
+
--bic-card-box-shadow-focus-inner-border: 4px;
|
|
756
|
+
--bic-card-border-active-color: var(--bi-primary-50);
|
|
757
|
+
--bic-card-box-shadow-active-color: #b2cdf40d;
|
|
870
758
|
}
|
|
871
759
|
|
|
872
760
|
.bi-card {
|
|
@@ -945,6 +833,23 @@
|
|
|
945
833
|
--bic-card-header-label-color: var(--bi-warning-90);
|
|
946
834
|
}
|
|
947
835
|
|
|
836
|
+
.bi-card[data-color="primary"][data-dark="true"] {
|
|
837
|
+
--bic-card-background-color: var(--bi-primary-90);
|
|
838
|
+
--bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
|
|
839
|
+
--bic-card-border-color: var(--bi-primary-75);
|
|
840
|
+
--bic-card-color: var(--bi-neutral-5);
|
|
841
|
+
--bic-card-header-title-color: var(--bi-neutral-5);
|
|
842
|
+
--bic-card-header-bold-color: var(--bi-primary-20);
|
|
843
|
+
--bic-card-header-label-color: var(--bi-neutral-30);
|
|
844
|
+
--bic-card-content-color: var(--bi-neutral-30);
|
|
845
|
+
--bic-card-actions-background-color: var(--bi-primary-85);
|
|
846
|
+
--bic-card-actions-icon-color: var(--bi-primary-10);
|
|
847
|
+
--bic-card-border-hover-color: var(--bi-primary-40);
|
|
848
|
+
--bic-card-box-shadow-focus-color: var(--bi-neutral-15);
|
|
849
|
+
--bic-card-box-shadow-focus-background-color: var(--bi-secondary-50);
|
|
850
|
+
--bic-card-border-active-color: var(--bi-primary-10);
|
|
851
|
+
}
|
|
852
|
+
|
|
948
853
|
.bi-card[data-error="true"] {
|
|
949
854
|
box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
|
|
950
855
|
--bic-card-border-color: transparent;
|
|
@@ -992,8 +897,8 @@
|
|
|
992
897
|
}
|
|
993
898
|
|
|
994
899
|
.bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
|
|
995
|
-
box-shadow: var(--bic-card-box-shadow)
|
|
996
|
-
outline: var(--_bi--focus, 1.5px solid var(--
|
|
900
|
+
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
|
|
901
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
997
902
|
outline-offset: var(--_bi--focus, 2px);
|
|
998
903
|
}
|
|
999
904
|
|
|
@@ -1003,12 +908,12 @@
|
|
|
1003
908
|
|
|
1004
909
|
@media (hover: hover) and (pointer: fine) {
|
|
1005
910
|
.bi-card:-webkit-any(a, button):not(.disabled):hover {
|
|
1006
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--
|
|
911
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
|
|
1007
912
|
}
|
|
1008
913
|
}
|
|
1009
914
|
|
|
1010
915
|
.bi-card:-webkit-any(a, button):not(.disabled):active {
|
|
1011
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-
|
|
916
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
|
|
1012
917
|
}
|
|
1013
918
|
|
|
1014
919
|
.bi-card:-webkit-any(a, button):disabled {
|
|
@@ -1023,8 +928,8 @@
|
|
|
1023
928
|
}
|
|
1024
929
|
|
|
1025
930
|
.bi-card:is(a, button):not(.disabled):focus-visible {
|
|
1026
|
-
box-shadow: var(--bic-card-box-shadow)
|
|
1027
|
-
outline: var(--_bi--focus, 1.5px solid var(--
|
|
931
|
+
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
|
|
932
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
1028
933
|
outline-offset: var(--_bi--focus, 2px);
|
|
1029
934
|
}
|
|
1030
935
|
|
|
@@ -1034,12 +939,12 @@
|
|
|
1034
939
|
|
|
1035
940
|
@media (hover: hover) and (pointer: fine) {
|
|
1036
941
|
.bi-card:is(a, button):not(.disabled):hover {
|
|
1037
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--
|
|
942
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
|
|
1038
943
|
}
|
|
1039
944
|
}
|
|
1040
945
|
|
|
1041
946
|
.bi-card:is(a, button):not(.disabled):active {
|
|
1042
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-
|
|
947
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
|
|
1043
948
|
}
|
|
1044
949
|
|
|
1045
950
|
.bi-card:is(a, button):disabled {
|
|
@@ -1054,8 +959,8 @@
|
|
|
1054
959
|
}
|
|
1055
960
|
|
|
1056
961
|
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
|
|
1057
|
-
box-shadow: var(--bic-card-box-shadow)
|
|
1058
|
-
outline: var(--_bi--focus, 1.5px solid var(--
|
|
962
|
+
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
|
|
963
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
1059
964
|
outline-offset: var(--_bi--focus, 2px);
|
|
1060
965
|
}
|
|
1061
966
|
|
|
@@ -1065,12 +970,12 @@
|
|
|
1065
970
|
|
|
1066
971
|
@media (hover: hover) and (pointer: fine) {
|
|
1067
972
|
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
|
|
1068
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--
|
|
973
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
|
|
1069
974
|
}
|
|
1070
975
|
}
|
|
1071
976
|
|
|
1072
977
|
.bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
|
|
1073
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-
|
|
978
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
|
|
1074
979
|
}
|
|
1075
980
|
|
|
1076
981
|
.bi-card .bi-card--content:-webkit-any(a, button):disabled {
|
|
@@ -1085,8 +990,8 @@
|
|
|
1085
990
|
}
|
|
1086
991
|
|
|
1087
992
|
.bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
|
|
1088
|
-
box-shadow: var(--bic-card-box-shadow)
|
|
1089
|
-
outline: var(--_bi--focus, 1.5px solid var(--
|
|
993
|
+
box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
|
|
994
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
|
|
1090
995
|
outline-offset: var(--_bi--focus, 2px);
|
|
1091
996
|
}
|
|
1092
997
|
|
|
@@ -1096,12 +1001,12 @@
|
|
|
1096
1001
|
|
|
1097
1002
|
@media (hover: hover) and (pointer: fine) {
|
|
1098
1003
|
.bi-card .bi-card--content:is(a, button):not(.disabled):hover {
|
|
1099
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--
|
|
1004
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
|
|
1100
1005
|
}
|
|
1101
1006
|
}
|
|
1102
1007
|
|
|
1103
1008
|
.bi-card .bi-card--content:is(a, button):not(.disabled):active {
|
|
1104
|
-
box-shadow: 0px 0px 0px var(--bi-stroke-
|
|
1009
|
+
box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
|
|
1105
1010
|
}
|
|
1106
1011
|
|
|
1107
1012
|
.bi-card .bi-card--content:is(a, button):disabled {
|
|
@@ -1246,7 +1151,7 @@
|
|
|
1246
1151
|
padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
|
|
1247
1152
|
border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
|
|
1248
1153
|
background: var(--bic-card-background-color);
|
|
1249
|
-
box-shadow: 0px 8px 16px var(--bi-scale-1-5x)
|
|
1154
|
+
box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
|
|
1250
1155
|
color: var(--bic-card-header-title-color);
|
|
1251
1156
|
text-align: center;
|
|
1252
1157
|
flex-direction: column;
|
|
@@ -1278,7 +1183,7 @@
|
|
|
1278
1183
|
.bi-checkbox-subsection > div:first-child {
|
|
1279
1184
|
margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
|
|
1280
1185
|
background-color: var(--bic-checkbox-subsection-line-bg);
|
|
1281
|
-
width: var(--bi-stroke-
|
|
1186
|
+
width: var(--bi-stroke-medium);
|
|
1282
1187
|
}
|
|
1283
1188
|
|
|
1284
1189
|
.bi-checkbox-subsection > div:last-child {
|
|
@@ -1291,15 +1196,17 @@
|
|
|
1291
1196
|
|
|
1292
1197
|
.bi-chip {
|
|
1293
1198
|
--bic-chip-background: var(--bi-primary-5);
|
|
1294
|
-
--bic-chip-
|
|
1295
|
-
--bic-chip-
|
|
1199
|
+
--bic-chip-focus-inner: var(--bi-basic-white);
|
|
1200
|
+
--bic-chip-focus-outer: var(--bi-primary-50);
|
|
1201
|
+
--bic-chip-background-hover: var(--bi-states-hover-dark);
|
|
1202
|
+
--bic-chip-background-press: var(--bi-states-press-dark);
|
|
1296
1203
|
--bic-chip-text-color: var(--bi-neutral-90);
|
|
1297
1204
|
--bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
|
|
1298
1205
|
--bic-chip-icon-size: var(--bi-scale-6x);
|
|
1299
1206
|
--bic-chip-font-size: .875rem;
|
|
1300
1207
|
--bic-chip-line-height: 1.5;
|
|
1301
1208
|
gap: var(--bi-scale-1x);
|
|
1302
|
-
border-radius: var(--bi-
|
|
1209
|
+
border-radius: var(--bi-radius-full);
|
|
1303
1210
|
width: -webkit-fit-content;
|
|
1304
1211
|
width: fit-content;
|
|
1305
1212
|
color: var(--bic-chip-text-color);
|
|
@@ -1314,6 +1221,163 @@
|
|
|
1314
1221
|
overflow: hidden;
|
|
1315
1222
|
}
|
|
1316
1223
|
|
|
1224
|
+
.bi-chip[data-size="small"] {
|
|
1225
|
+
--bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
|
|
1226
|
+
--bic-chip-font-size: .8125rem;
|
|
1227
|
+
--bic-chip-icon-size: var(--bi-scale-5x);
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
.bi-chip[data-size="large"] {
|
|
1231
|
+
--bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
|
|
1232
|
+
--bic-chip-font-size: 1rem;
|
|
1233
|
+
--bic-chip-size: var(--bi-scale-14x);
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1236
|
+
.bi-chip[data-dark="true"] {
|
|
1237
|
+
--bic-chip-focus-inner: var(--bi-neutral-95);
|
|
1238
|
+
--bic-chip-focus-outer: var(--bi-secondary-50);
|
|
1239
|
+
--bic-chip-background-hover: var(--bi-states-hover-light);
|
|
1240
|
+
--bic-chip-background-press: var(--bi-states-press-light);
|
|
1241
|
+
}
|
|
1242
|
+
|
|
1243
|
+
.bi-chip[data-selected="true"] {
|
|
1244
|
+
--bic-chip-background-hover: var(--bi-states-hover-light);
|
|
1245
|
+
--bic-chip-background-press: var(--bi-states-press-light);
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
.bi-chip[data-color="white"] {
|
|
1249
|
+
--bic-chip-background: var(--bi-basic-white);
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
.bi-chip[data-color="white"][data-selected="true"] {
|
|
1253
|
+
--bic-chip-background: var(--bi-neutral-60);
|
|
1254
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
.bi-chip[data-color="white"][data-dark="true"] {
|
|
1258
|
+
--bic-chip-background: var(--bi-neutral-100);
|
|
1259
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1262
|
+
.bi-chip[data-color="white"][data-dark="true"][data-selected="true"] {
|
|
1263
|
+
--bic-chip-background: var(--bi-neutral-50);
|
|
1264
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1265
|
+
}
|
|
1266
|
+
|
|
1267
|
+
.bi-chip[data-color="neutral"] {
|
|
1268
|
+
--bic-chip-background: var(--bi-neutral-5);
|
|
1269
|
+
}
|
|
1270
|
+
|
|
1271
|
+
.bi-chip[data-color="neutral"][data-selected="true"] {
|
|
1272
|
+
--bic-chip-background: var(--bi-neutral-60);
|
|
1273
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1274
|
+
}
|
|
1275
|
+
|
|
1276
|
+
.bi-chip[data-color="neutral"][data-dark="true"] {
|
|
1277
|
+
--bic-chip-background: var(--bi-neutral-95);
|
|
1278
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1279
|
+
}
|
|
1280
|
+
|
|
1281
|
+
.bi-chip[data-color="neutral"][data-dark="true"][data-selected="true"] {
|
|
1282
|
+
--bic-chip-background: var(--bi-neutral-50);
|
|
1283
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
.bi-chip[data-color="primary"] {
|
|
1287
|
+
--bic-chip-background: var(--bi-primary-5);
|
|
1288
|
+
}
|
|
1289
|
+
|
|
1290
|
+
.bi-chip[data-color="primary"][data-selected="true"] {
|
|
1291
|
+
--bic-chip-background: var(--bi-primary-50);
|
|
1292
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
.bi-chip[data-color="primary"][data-dark="true"] {
|
|
1296
|
+
--bic-chip-background: var(--bi-primary-85);
|
|
1297
|
+
--bic-chip-text-color: var(--bi-primary-10);
|
|
1298
|
+
}
|
|
1299
|
+
|
|
1300
|
+
.bi-chip[data-color="primary"][data-dark="true"][data-selected="true"] {
|
|
1301
|
+
--bic-chip-background: var(--bi-primary-50);
|
|
1302
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1303
|
+
}
|
|
1304
|
+
|
|
1305
|
+
.bi-chip[data-color="info"] {
|
|
1306
|
+
--bic-chip-background: var(--bi-info-5);
|
|
1307
|
+
}
|
|
1308
|
+
|
|
1309
|
+
.bi-chip[data-color="info"][data-selected="true"] {
|
|
1310
|
+
--bic-chip-background: var(--bi-info-50);
|
|
1311
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1312
|
+
}
|
|
1313
|
+
|
|
1314
|
+
.bi-chip[data-color="info"][data-dark="true"] {
|
|
1315
|
+
--bic-chip-background: var(--bi-info-95);
|
|
1316
|
+
--bic-chip-text-color: var(--bi-info-15);
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
.bi-chip[data-color="info"][data-dark="true"][data-selected="true"] {
|
|
1320
|
+
--bic-chip-background: var(--bi-info-50);
|
|
1321
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1322
|
+
}
|
|
1323
|
+
|
|
1324
|
+
.bi-chip[data-color="alert"] {
|
|
1325
|
+
--bic-chip-background: var(--bi-alert-10);
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
.bi-chip[data-color="alert"][data-selected="true"] {
|
|
1329
|
+
--bic-chip-background: var(--bi-alert-60);
|
|
1330
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1331
|
+
}
|
|
1332
|
+
|
|
1333
|
+
.bi-chip[data-color="alert"][data-dark="true"] {
|
|
1334
|
+
--bic-chip-background: var(--bi-alert-95);
|
|
1335
|
+
--bic-chip-text-color: var(--bi-alert-15);
|
|
1336
|
+
}
|
|
1337
|
+
|
|
1338
|
+
.bi-chip[data-color="alert"][data-dark="true"][data-selected="true"] {
|
|
1339
|
+
--bic-chip-background: var(--bi-alert-60);
|
|
1340
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1341
|
+
}
|
|
1342
|
+
|
|
1343
|
+
.bi-chip[data-color="warning"] {
|
|
1344
|
+
--bic-chip-background: var(--bi-warning-10);
|
|
1345
|
+
}
|
|
1346
|
+
|
|
1347
|
+
.bi-chip[data-color="warning"][data-selected="true"] {
|
|
1348
|
+
--bic-chip-background: var(--bi-warning-75);
|
|
1349
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
.bi-chip[data-color="warning"][data-dark="true"] {
|
|
1353
|
+
--bic-chip-background: var(--bi-warning-90);
|
|
1354
|
+
--bic-chip-text-color: var(--bi-warning-15);
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
.bi-chip[data-color="warning"][data-dark="true"][data-selected="true"] {
|
|
1358
|
+
--bic-chip-background: var(--bi-warning-70);
|
|
1359
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1360
|
+
}
|
|
1361
|
+
|
|
1362
|
+
.bi-chip[data-color="success"] {
|
|
1363
|
+
--bic-chip-background: var(--bi-success-5);
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
.bi-chip[data-color="success"][data-selected="true"] {
|
|
1367
|
+
--bic-chip-background: var(--bi-success-70);
|
|
1368
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
.bi-chip[data-color="success"][data-dark="true"] {
|
|
1372
|
+
--bic-chip-background: var(--bi-success-90);
|
|
1373
|
+
--bic-chip-text-color: var(--bi-success-10);
|
|
1374
|
+
}
|
|
1375
|
+
|
|
1376
|
+
.bi-chip[data-color="success"][data-dark="true"][data-selected="true"] {
|
|
1377
|
+
--bic-chip-background: var(--bi-success-70);
|
|
1378
|
+
--bic-chip-text-color: var(--bi-basic-white);
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1317
1381
|
.bi-chip:-webkit-any(button) {
|
|
1318
1382
|
cursor: pointer;
|
|
1319
1383
|
border: none;
|
|
@@ -1321,20 +1385,19 @@
|
|
|
1321
1385
|
}
|
|
1322
1386
|
|
|
1323
1387
|
.bi-chip:-webkit-any(button):focus-visible {
|
|
1324
|
-
|
|
1325
|
-
outline: 1.5px solid var(--
|
|
1326
|
-
|
|
1327
|
-
box-shadow: 0 0 0 2px #fff;
|
|
1388
|
+
box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
|
|
1389
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
|
|
1390
|
+
outline-offset: var(--_bi--focus, 2px);
|
|
1328
1391
|
}
|
|
1329
1392
|
|
|
1330
1393
|
@media (hover: hover) and (pointer: fine) {
|
|
1331
1394
|
.bi-chip:-webkit-any(button):hover {
|
|
1332
|
-
--
|
|
1395
|
+
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
|
|
1333
1396
|
}
|
|
1334
1397
|
}
|
|
1335
1398
|
|
|
1336
1399
|
.bi-chip:-webkit-any(button):active {
|
|
1337
|
-
--
|
|
1400
|
+
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
|
|
1338
1401
|
}
|
|
1339
1402
|
|
|
1340
1403
|
.bi-chip:is(button) {
|
|
@@ -1344,20 +1407,19 @@
|
|
|
1344
1407
|
}
|
|
1345
1408
|
|
|
1346
1409
|
.bi-chip:is(button):focus-visible {
|
|
1347
|
-
|
|
1348
|
-
outline: 1.5px solid var(--
|
|
1349
|
-
|
|
1350
|
-
box-shadow: 0 0 0 2px #fff;
|
|
1410
|
+
box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
|
|
1411
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
|
|
1412
|
+
outline-offset: var(--_bi--focus, 2px);
|
|
1351
1413
|
}
|
|
1352
1414
|
|
|
1353
1415
|
@media (hover: hover) and (pointer: fine) {
|
|
1354
1416
|
.bi-chip:is(button):hover {
|
|
1355
|
-
--
|
|
1417
|
+
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
|
|
1356
1418
|
}
|
|
1357
1419
|
}
|
|
1358
1420
|
|
|
1359
1421
|
.bi-chip:is(button):active {
|
|
1360
|
-
--
|
|
1422
|
+
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
|
|
1361
1423
|
}
|
|
1362
1424
|
|
|
1363
1425
|
.bi-chip:-webkit-any(a) {
|
|
@@ -1367,20 +1429,19 @@
|
|
|
1367
1429
|
}
|
|
1368
1430
|
|
|
1369
1431
|
.bi-chip:-webkit-any(a):focus-visible {
|
|
1370
|
-
|
|
1371
|
-
outline: 1.5px solid var(--
|
|
1372
|
-
|
|
1373
|
-
box-shadow: 0 0 0 2px #fff;
|
|
1432
|
+
box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
|
|
1433
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
|
|
1434
|
+
outline-offset: var(--_bi--focus, 2px);
|
|
1374
1435
|
}
|
|
1375
1436
|
|
|
1376
1437
|
@media (hover: hover) and (pointer: fine) {
|
|
1377
1438
|
.bi-chip:-webkit-any(a):hover {
|
|
1378
|
-
--
|
|
1439
|
+
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
|
|
1379
1440
|
}
|
|
1380
1441
|
}
|
|
1381
1442
|
|
|
1382
1443
|
.bi-chip:-webkit-any(a):active {
|
|
1383
|
-
--
|
|
1444
|
+
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
|
|
1384
1445
|
}
|
|
1385
1446
|
|
|
1386
1447
|
.bi-chip:is(a) {
|
|
@@ -1390,88 +1451,19 @@
|
|
|
1390
1451
|
}
|
|
1391
1452
|
|
|
1392
1453
|
.bi-chip:is(a):focus-visible {
|
|
1393
|
-
|
|
1394
|
-
outline: 1.5px solid var(--
|
|
1395
|
-
|
|
1396
|
-
box-shadow: 0 0 0 2px #fff;
|
|
1454
|
+
box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
|
|
1455
|
+
outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
|
|
1456
|
+
outline-offset: var(--_bi--focus, 2px);
|
|
1397
1457
|
}
|
|
1398
1458
|
|
|
1399
1459
|
@media (hover: hover) and (pointer: fine) {
|
|
1400
1460
|
.bi-chip:is(a):hover {
|
|
1401
|
-
--
|
|
1461
|
+
background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
|
|
1402
1462
|
}
|
|
1403
1463
|
}
|
|
1404
1464
|
|
|
1405
1465
|
.bi-chip:is(a):active {
|
|
1406
|
-
--
|
|
1407
|
-
}
|
|
1408
|
-
|
|
1409
|
-
.bi-chip[data-size="small"] {
|
|
1410
|
-
--bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
|
|
1411
|
-
--bic-chip-font-size: .8125rem;
|
|
1412
|
-
--bic-chip-icon-size: var(--bi-scale-5x);
|
|
1413
|
-
}
|
|
1414
|
-
|
|
1415
|
-
.bi-chip[data-size="large"] {
|
|
1416
|
-
--bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
|
|
1417
|
-
--bic-chip-font-size: 1rem;
|
|
1418
|
-
--bic-chip-size: var(--bi-scale-14x);
|
|
1419
|
-
}
|
|
1420
|
-
|
|
1421
|
-
.bi-chip[data-color="neutral"] {
|
|
1422
|
-
--bic-chip-background: var(--bi-neutral-5);
|
|
1423
|
-
--bic-chip-background-hover: var(--bi-neutral-20);
|
|
1424
|
-
--bic-chip-background-press: var(--bi-neutral-30);
|
|
1425
|
-
--bic-chip-text-color: var(--bi-neutral-90);
|
|
1426
|
-
}
|
|
1427
|
-
|
|
1428
|
-
.bi-chip[data-color="primary-light"] {
|
|
1429
|
-
--bic-chip-background: var(--bi-primary-5);
|
|
1430
|
-
--bic-chip-background-hover: var(--bi-primary-20);
|
|
1431
|
-
--bic-chip-background-press: var(--bi-primary-30);
|
|
1432
|
-
--bic-chip-text-color: var(--bi-neutral-90);
|
|
1433
|
-
}
|
|
1434
|
-
|
|
1435
|
-
.bi-chip[data-color="info"] {
|
|
1436
|
-
--bic-chip-background: var(--bi-info-5);
|
|
1437
|
-
--bic-chip-background-hover: var(--bi-info-20);
|
|
1438
|
-
--bic-chip-background-press: var(--bi-info-30);
|
|
1439
|
-
--bic-chip-text-color: var(--bi-info-90);
|
|
1440
|
-
}
|
|
1441
|
-
|
|
1442
|
-
.bi-chip[data-color="white"] {
|
|
1443
|
-
--bic-chip-background: var(--bi-basic-white);
|
|
1444
|
-
--bic-chip-background-hover: var(--bi-neutral-20);
|
|
1445
|
-
--bic-chip-background-press: var(--bi-neutral-30);
|
|
1446
|
-
--bic-chip-text-color: var(--bi-neutral-90);
|
|
1447
|
-
}
|
|
1448
|
-
|
|
1449
|
-
.bi-chip[data-color="primary"] {
|
|
1450
|
-
--bic-chip-background: var(--bi-primary-50);
|
|
1451
|
-
--bic-chip-background-hover: var(--bi-primary-60);
|
|
1452
|
-
--bic-chip-background-press: var(--bi-primary-70);
|
|
1453
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
1454
|
-
}
|
|
1455
|
-
|
|
1456
|
-
.bi-chip[data-color="alert"] {
|
|
1457
|
-
--bic-chip-background: var(--bi-alert-5);
|
|
1458
|
-
--bic-chip-background-hover: var(--bi-alert-20);
|
|
1459
|
-
--bic-chip-background-press: var(--bi-alert-30);
|
|
1460
|
-
--bic-chip-text-color: var(--bi-alert-90);
|
|
1461
|
-
}
|
|
1462
|
-
|
|
1463
|
-
.bi-chip[data-color="warning"] {
|
|
1464
|
-
--bic-chip-background: var(--bi-warning-5);
|
|
1465
|
-
--bic-chip-background-hover: var(--bi-warning-20);
|
|
1466
|
-
--bic-chip-background-press: var(--bi-warning-30);
|
|
1467
|
-
--bic-chip-text-color: var(--bi-warning-90);
|
|
1468
|
-
}
|
|
1469
|
-
|
|
1470
|
-
.bi-chip[data-color="success"] {
|
|
1471
|
-
--bic-chip-background: var(--bi-success-5);
|
|
1472
|
-
--bic-chip-background-hover: var(--bi-success-20);
|
|
1473
|
-
--bic-chip-background-press: var(--bi-success-30);
|
|
1474
|
-
--bic-chip-text-color: var(--bi-success-90);
|
|
1466
|
+
background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
|
|
1475
1467
|
}
|
|
1476
1468
|
|
|
1477
1469
|
.bi-chip > svg {
|
|
@@ -1484,7 +1476,7 @@ details.bi-details {
|
|
|
1484
1476
|
--bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
|
|
1485
1477
|
--bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
|
|
1486
1478
|
--bic-details-color: var(--bi-neutral-90);
|
|
1487
|
-
--bic-details-border-color: var(--bi-
|
|
1479
|
+
--bic-details-border-color: var(--bi-neutral-15);
|
|
1488
1480
|
--bic-details-padding: var(--bi-scale-4x);
|
|
1489
1481
|
}
|
|
1490
1482
|
|
|
@@ -1618,7 +1610,7 @@ details.bi-details > *:not(summary) + * {
|
|
|
1618
1610
|
|
|
1619
1611
|
.bi-dialog {
|
|
1620
1612
|
--bic-dialog-animation-duration: .2s;
|
|
1621
|
-
--bic-dialog-backdrop-background:
|
|
1613
|
+
--bic-dialog-backdrop-background: #00000080;
|
|
1622
1614
|
--bic-dialog-background: var(--bi-basic-white);
|
|
1623
1615
|
--bic-dialog-border-color: var(--bi-neutral-15);
|
|
1624
1616
|
--bic-dialog-icon-spacing: .625rem;
|
|
@@ -1638,7 +1630,7 @@ details.bi-details > *:not(summary) + * {
|
|
|
1638
1630
|
animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
|
|
1639
1631
|
background: var(--bic-dialog-background);
|
|
1640
1632
|
border-radius: var(--bi-radius-large);
|
|
1641
|
-
box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0
|
|
1633
|
+
box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
|
|
1642
1634
|
color: var(--bic-dialog-color);
|
|
1643
1635
|
max-height: var(--bic-dialog-max-height);
|
|
1644
1636
|
max-width: var(--bic-dialog-max-width);
|
|
@@ -1657,7 +1649,7 @@ details.bi-details > *:not(summary) + * {
|
|
|
1657
1649
|
|
|
1658
1650
|
.bi-dialog::backdrop {
|
|
1659
1651
|
animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
|
|
1660
|
-
background: var(--bic-dialog-backdrop-background,
|
|
1652
|
+
background: var(--bic-dialog-backdrop-background, #00000080);
|
|
1661
1653
|
}
|
|
1662
1654
|
|
|
1663
1655
|
.bi-dialog[open] {
|
|
@@ -1850,15 +1842,15 @@ body:has(.bi-dialog:modal) {
|
|
|
1850
1842
|
--bic-dropdown-background: var(--bi-basic-white);
|
|
1851
1843
|
--bic-dropdown-border-width: var(--bi-stroke-thin);
|
|
1852
1844
|
--bic-dropdown-border-style: solid;
|
|
1853
|
-
--bic-dropdown-border-color: var(--bi-
|
|
1854
|
-
--bic-dropdown-box-shadow: 0px 8px 16px -4px
|
|
1845
|
+
--bic-dropdown-border-color: var(--bi-neutral-15);
|
|
1846
|
+
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
|
|
1855
1847
|
}
|
|
1856
1848
|
|
|
1857
1849
|
.bi-dropdown[data-dark="true"] {
|
|
1858
1850
|
--bic-dropdown-background: var(--bi-neutral-100);
|
|
1859
1851
|
--bic-dropdown-border-color: var(--bi-neutral-90);
|
|
1860
1852
|
--bic-dropdown-color: var(--bi-neutral-5);
|
|
1861
|
-
--bic-dropdown-box-shadow: 0px 8px 16px -4px
|
|
1853
|
+
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
|
|
1862
1854
|
}
|
|
1863
1855
|
|
|
1864
1856
|
.bi-dropdown {
|
|
@@ -2028,19 +2020,11 @@ body:has(.bi-dialog:modal) {
|
|
|
2028
2020
|
gap: 0;
|
|
2029
2021
|
}
|
|
2030
2022
|
|
|
2031
|
-
.bi-field:has(.bi-input
|
|
2023
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
|
|
2032
2024
|
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
2033
2025
|
}
|
|
2034
2026
|
|
|
2035
|
-
.bi-field:has(.bi-input
|
|
2036
|
-
--_bi--hover: ;
|
|
2037
|
-
}
|
|
2038
|
-
|
|
2039
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
|
|
2040
|
-
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
2041
|
-
}
|
|
2042
|
-
|
|
2043
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
|
|
2027
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
|
|
2044
2028
|
--_bi--hover: ;
|
|
2045
2029
|
}
|
|
2046
2030
|
|
|
@@ -2111,19 +2095,11 @@ body:has(.bi-dialog:modal) {
|
|
|
2111
2095
|
gap: 0;
|
|
2112
2096
|
}
|
|
2113
2097
|
|
|
2114
|
-
.bi-field:has(.bi-input
|
|
2098
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
|
|
2115
2099
|
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
2116
2100
|
}
|
|
2117
2101
|
|
|
2118
|
-
.bi-field:has(.bi-input
|
|
2119
|
-
--_bi--hover: ;
|
|
2120
|
-
}
|
|
2121
|
-
|
|
2122
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
|
|
2123
|
-
background: var(--_bi--hover, var(--bic-field-background-hover));
|
|
2124
|
-
}
|
|
2125
|
-
|
|
2126
|
-
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
|
|
2102
|
+
.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
|
|
2127
2103
|
--_bi--hover: ;
|
|
2128
2104
|
}
|
|
2129
2105
|
|
|
@@ -2178,7 +2154,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2178
2154
|
.bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
|
|
2179
2155
|
outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
|
|
2180
2156
|
outline-offset: 0;
|
|
2181
|
-
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x)
|
|
2157
|
+
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
|
|
2182
2158
|
}
|
|
2183
2159
|
|
|
2184
2160
|
.bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
|
|
@@ -2196,14 +2172,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2196
2172
|
display: flex;
|
|
2197
2173
|
}
|
|
2198
2174
|
|
|
2199
|
-
.bi-field .bi-field--affixes .bi-field--affix:first-child:not(
|
|
2200
|
-
border-top-left-radius: inherit;
|
|
2201
|
-
border-bottom-left-radius: inherit;
|
|
2202
|
-
border-right: 0;
|
|
2203
|
-
padding-right: 0;
|
|
2204
|
-
}
|
|
2205
|
-
|
|
2206
|
-
.bi-field .bi-field--affixes .bi-field--affix:first-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
2175
|
+
.bi-field .bi-field--affixes .bi-field--affix:first-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
2207
2176
|
border-top-left-radius: inherit;
|
|
2208
2177
|
border-bottom-left-radius: inherit;
|
|
2209
2178
|
border-right: 0;
|
|
@@ -2224,14 +2193,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2224
2193
|
padding-left: 0;
|
|
2225
2194
|
}
|
|
2226
2195
|
|
|
2227
|
-
.bi-field .bi-field--affixes .bi-field--affix:last-child:not(
|
|
2228
|
-
border-top-right-radius: inherit;
|
|
2229
|
-
border-bottom-right-radius: inherit;
|
|
2230
|
-
border-left: 0;
|
|
2231
|
-
padding-left: 0;
|
|
2232
|
-
}
|
|
2233
|
-
|
|
2234
|
-
.bi-field .bi-field--affixes .bi-field--affix:last-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
2196
|
+
.bi-field .bi-field--affixes .bi-field--affix:last-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
2235
2197
|
border-top-right-radius: inherit;
|
|
2236
2198
|
border-bottom-right-radius: inherit;
|
|
2237
2199
|
border-left: 0;
|
|
@@ -2300,7 +2262,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2300
2262
|
--bic-filter-group-background: var(--bi-basic-white);
|
|
2301
2263
|
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
|
|
2302
2264
|
--bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
|
|
2303
|
-
--bic-filter-group-background-expanded: var(--bi-
|
|
2265
|
+
--bic-filter-group-background-expanded: var(--bi-neutral-15);
|
|
2304
2266
|
--bic-filter-group-border-color: var(--bi-neutral-15);
|
|
2305
2267
|
--bic-filter-group-text-color: var(--bi-neutral-90);
|
|
2306
2268
|
}
|
|
@@ -2383,7 +2345,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2383
2345
|
|
|
2384
2346
|
.bi-filter-group:last-of-type > button {
|
|
2385
2347
|
border-radius: var(--bi-radius-small);
|
|
2386
|
-
border-bottom-color:
|
|
2348
|
+
border-bottom-color: #0000;
|
|
2387
2349
|
}
|
|
2388
2350
|
|
|
2389
2351
|
.bi-filter-group:last-of-type > div {
|
|
@@ -2396,7 +2358,7 @@ body:has(.bi-dialog:modal) {
|
|
|
2396
2358
|
|
|
2397
2359
|
.bi-filter-group[data-expanded="true"] > button {
|
|
2398
2360
|
border-radius: var(--bi-radius-small);
|
|
2399
|
-
border-bottom-color:
|
|
2361
|
+
border-bottom-color: #0000;
|
|
2400
2362
|
}
|
|
2401
2363
|
|
|
2402
2364
|
.bi-filter-group[data-expanded="true"] > div {
|
|
@@ -2687,26 +2649,18 @@ svg[data-color="white"] {
|
|
|
2687
2649
|
--bic-input-font-size: 1.25rem;
|
|
2688
2650
|
}
|
|
2689
2651
|
|
|
2690
|
-
.bi-input:where(:not(
|
|
2691
|
-
box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
|
|
2692
|
-
}
|
|
2693
|
-
|
|
2694
|
-
.bi-input:where(:not(:-webkit-any([type="checkbox"], [type="radio"]))):focus-visible {
|
|
2695
|
-
--bic-input-border-color: var(--bi-primary-50);
|
|
2696
|
-
}
|
|
2697
|
-
|
|
2698
|
-
.bi-input:where(:not(:is([type="checkbox"], [type="radio"]))):hover {
|
|
2652
|
+
.bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
|
|
2699
2653
|
box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
|
|
2700
2654
|
}
|
|
2701
2655
|
|
|
2702
|
-
.bi-input:where(:not(
|
|
2656
|
+
.bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
|
|
2703
2657
|
--bic-input-border-color: var(--bi-primary-50);
|
|
2704
2658
|
}
|
|
2705
2659
|
|
|
2706
2660
|
.bi-input:focus-visible {
|
|
2707
2661
|
outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
|
|
2708
2662
|
outline-offset: 0;
|
|
2709
|
-
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x)
|
|
2663
|
+
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
|
|
2710
2664
|
}
|
|
2711
2665
|
|
|
2712
2666
|
.bi-input:focus-visible * {
|
|
@@ -2717,11 +2671,7 @@ svg[data-color="white"] {
|
|
|
2717
2671
|
color: var(--bic-input-placeholder-color);
|
|
2718
2672
|
}
|
|
2719
2673
|
|
|
2720
|
-
.bi-input:not(
|
|
2721
|
-
width: 100%;
|
|
2722
|
-
}
|
|
2723
|
-
|
|
2724
|
-
.bi-input:not(:is([size], [cols])) {
|
|
2674
|
+
.bi-input:not([size], [cols]) {
|
|
2725
2675
|
width: 100%;
|
|
2726
2676
|
}
|
|
2727
2677
|
|
|
@@ -2775,26 +2725,18 @@ svg[data-color="white"] {
|
|
|
2775
2725
|
field-sizing: content;
|
|
2776
2726
|
}
|
|
2777
2727
|
|
|
2778
|
-
.bi-input:-webkit-any(select):not(
|
|
2728
|
+
.bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
|
|
2779
2729
|
cursor: pointer;
|
|
2780
2730
|
}
|
|
2781
2731
|
|
|
2782
|
-
.bi-input
|
|
2783
|
-
cursor: pointer;
|
|
2784
|
-
}
|
|
2785
|
-
|
|
2786
|
-
.bi-input:is(select) {
|
|
2732
|
+
.bi-input:-webkit-any(select) {
|
|
2787
2733
|
background-image: var(--bic-input-select-chevron);
|
|
2788
2734
|
background-position: calc(100% - .5em);
|
|
2789
2735
|
background-repeat: no-repeat;
|
|
2790
2736
|
background-size: 1.5em;
|
|
2791
2737
|
}
|
|
2792
2738
|
|
|
2793
|
-
.bi-input
|
|
2794
|
-
cursor: pointer;
|
|
2795
|
-
}
|
|
2796
|
-
|
|
2797
|
-
.bi-input:is(select):not(:is([readonly], [aria-disabled="true"], :disabled)) {
|
|
2739
|
+
.bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
|
|
2798
2740
|
cursor: pointer;
|
|
2799
2741
|
}
|
|
2800
2742
|
|
|
@@ -2811,7 +2753,7 @@ svg[data-color="white"] {
|
|
|
2811
2753
|
height: var(--bic-input-toggle-size);
|
|
2812
2754
|
width: var(--bic-input-toggle-size);
|
|
2813
2755
|
box-shadow: none;
|
|
2814
|
-
border-width: var(--bi-stroke-
|
|
2756
|
+
border-width: var(--bi-stroke-medium);
|
|
2815
2757
|
border-style: solid;
|
|
2816
2758
|
border-color: var(--bic-input-border-color);
|
|
2817
2759
|
background: none;
|
|
@@ -2828,11 +2770,7 @@ svg[data-color="white"] {
|
|
|
2828
2770
|
--_bi--focus: ;
|
|
2829
2771
|
}
|
|
2830
2772
|
|
|
2831
|
-
.bi-input
|
|
2832
|
-
cursor: pointer;
|
|
2833
|
-
}
|
|
2834
|
-
|
|
2835
|
-
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not(:is([readonly], [aria-disabled="true"], :disabled)) {
|
|
2773
|
+
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
|
|
2836
2774
|
cursor: pointer;
|
|
2837
2775
|
}
|
|
2838
2776
|
|
|
@@ -2908,7 +2846,7 @@ svg[data-color="white"] {
|
|
|
2908
2846
|
height: var(--bic-input-toggle-size);
|
|
2909
2847
|
width: var(--bic-input-toggle-size);
|
|
2910
2848
|
box-shadow: none;
|
|
2911
|
-
border-width: var(--bi-stroke-
|
|
2849
|
+
border-width: var(--bi-stroke-medium);
|
|
2912
2850
|
border-style: solid;
|
|
2913
2851
|
border-color: var(--bic-input-border-color);
|
|
2914
2852
|
background: none;
|
|
@@ -2925,11 +2863,7 @@ svg[data-color="white"] {
|
|
|
2925
2863
|
--_bi--focus: ;
|
|
2926
2864
|
}
|
|
2927
2865
|
|
|
2928
|
-
.bi-input
|
|
2929
|
-
cursor: pointer;
|
|
2930
|
-
}
|
|
2931
|
-
|
|
2932
|
-
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not(:is([readonly], [aria-disabled="true"], :disabled)) {
|
|
2866
|
+
.bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
|
|
2933
2867
|
cursor: pointer;
|
|
2934
2868
|
}
|
|
2935
2869
|
|
|
@@ -3030,11 +2964,7 @@ svg[data-color="white"] {
|
|
|
3030
2964
|
color: var(--bic-label-required-color);
|
|
3031
2965
|
}
|
|
3032
2966
|
|
|
3033
|
-
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(
|
|
3034
|
-
padding-right: var(--bi-scale-0-25x);
|
|
3035
|
-
}
|
|
3036
|
-
|
|
3037
|
-
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
|
|
2967
|
+
.bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
|
|
3038
2968
|
padding-right: var(--bi-scale-0-25x);
|
|
3039
2969
|
}
|
|
3040
2970
|
|
|
@@ -3346,19 +3276,19 @@ svg[data-color="white"] {
|
|
|
3346
3276
|
--bic-popover-background: var(--bi-basic-white);
|
|
3347
3277
|
--bic-popover-border-width: var(--bi-stroke-thin);
|
|
3348
3278
|
--bic-popover-border-style: solid;
|
|
3349
|
-
--bic-popover-border-color: var(--bi-
|
|
3279
|
+
--bic-popover-border-color: var(--bi-neutral-15);
|
|
3350
3280
|
--bic-popover-color: var(--bi-neutral-90);
|
|
3351
3281
|
--bic-popover-border-radius: var(--bi-radius-medium);
|
|
3352
3282
|
--bic-popover-max-width: 300px;
|
|
3353
3283
|
--bic-popover-padding: var(--bi-scale-1x);
|
|
3354
|
-
--bic-popover-box-shadow: 0px 8px 16px -4px
|
|
3284
|
+
--bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
|
|
3355
3285
|
}
|
|
3356
3286
|
|
|
3357
3287
|
.bi-popover[data-dark="true"] {
|
|
3358
3288
|
--bic-popover-background: var(--bi-neutral-95);
|
|
3359
3289
|
--bic-popover-border-color: var(--bi-neutral-70);
|
|
3360
3290
|
--bic-popover-color: var(--bi-neutral-5);
|
|
3361
|
-
--bic-popover-box-shadow: 0px 8px 16px -4px
|
|
3291
|
+
--bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
|
|
3362
3292
|
}
|
|
3363
3293
|
|
|
3364
3294
|
.bi-popover {
|
|
@@ -3451,13 +3381,13 @@ svg[data-color="white"] {
|
|
|
3451
3381
|
.bi-spinner {
|
|
3452
3382
|
--bic-spinner-color: currentColor;
|
|
3453
3383
|
aspect-ratio: 1;
|
|
3454
|
-
background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%,
|
|
3384
|
+
background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top / 4px 4px no-repeat, conic-gradient(#0000 30%, var(--bic-spinner-color));
|
|
3455
3385
|
border-radius: 50%;
|
|
3456
3386
|
width: 1em;
|
|
3457
3387
|
height: 1em;
|
|
3458
3388
|
animation: 1s linear infinite bi-spinner;
|
|
3459
|
-
-webkit-mask: radial-gradient(farthest-side,
|
|
3460
|
-
mask: radial-gradient(farthest-side,
|
|
3389
|
+
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
|
|
3390
|
+
mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
|
|
3461
3391
|
}
|
|
3462
3392
|
|
|
3463
3393
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -3619,11 +3549,7 @@ svg[data-color="white"] {
|
|
|
3619
3549
|
position: relative;
|
|
3620
3550
|
}
|
|
3621
3551
|
|
|
3622
|
-
.bi-validation-message:has( > svg):not(
|
|
3623
|
-
padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
3624
|
-
}
|
|
3625
|
-
|
|
3626
|
-
.bi-validation-message:has( > svg):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
3552
|
+
.bi-validation-message:has( > svg):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
3627
3553
|
padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
|
|
3628
3554
|
}
|
|
3629
3555
|
|