@itwin/itwinui-css 1.2.2 → 1.4.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/CHANGELOG.md +71 -15
- package/LICENSE.md +1 -1
- package/README.md +1 -1
- package/css/alert.css +1 -1
- package/css/all.css +1 -1
- package/css/anchor.css +1 -1
- package/css/breadcrumbs.css +1 -1
- package/css/button.css +1 -1
- package/css/footer.css +1 -1
- package/css/select.css +1 -1
- package/css/tabs.css +1 -1
- package/css/tag.css +1 -1
- package/css/toggle-switch.css +1 -1
- package/css/utils.css +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,35 +1,91 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## 1.4.0
|
|
4
4
|
|
|
5
|
-
###
|
|
5
|
+
### Minor Changes
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- f7caf384: \* Added new `iui-tabs-actions-wrapper` and `iui-tabs-actions` to `.iui-tabs-wrapper` to add right/bottom content to the horizontal/vertical tabs.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
```html
|
|
10
|
+
<div class="iui-tabs-wrapper iui-horizontal">
|
|
11
|
+
<ul class="iui-tabs iui-default">
|
|
12
|
+
...
|
|
13
|
+
</ul>
|
|
10
14
|
|
|
11
|
-
|
|
15
|
+
<div class="iui-tabs-actions-wrapper">
|
|
16
|
+
<div class="iui-tabs-actions">...</div>
|
|
17
|
+
</div>
|
|
12
18
|
|
|
13
|
-
|
|
19
|
+
<div class="iui-tabs-content">...</div>
|
|
20
|
+
</div>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
- dd13257f: Added new `iui-svg-icon` class for displaying svgs
|
|
24
|
+
|
|
25
|
+
- Supports `data-iui-icon-size` attribute for size. Can be one of: 's', 'm', 'l', 'auto'
|
|
26
|
+
- Supports `data-iui-icon-color` attribute for fill. Can be one of: 'informational', 'positive', 'warning', 'negative'
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<span
|
|
30
|
+
class="iui-svg-icon"
|
|
31
|
+
data-iui-icon-size="m"
|
|
32
|
+
data-iui-icon-color="positive"
|
|
33
|
+
>
|
|
34
|
+
<svg>...</svg>
|
|
35
|
+
</span>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Patch Changes
|
|
39
|
+
|
|
40
|
+
- ec26b72d: `Anchor` can now be rendered as a button using `as` prop.
|
|
41
|
+
|
|
42
|
+
```jsx
|
|
43
|
+
<Anchor as='button' onClick={() => {}}>
|
|
44
|
+
...
|
|
45
|
+
</Anchor>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## [1.3.0](https://www.github.com/iTwin/iTwinUI/compare/v1.2.2...v1.3.0) (2022-12-19)
|
|
49
|
+
|
|
50
|
+
### Minor changes
|
|
51
|
+
|
|
52
|
+
- **Tag:** Tag body receives focus instead of close button within it ([#835](https://www.github.com/iTwin/iTwinUI/issues/835))
|
|
53
|
+
|
|
54
|
+
### Patch changes
|
|
55
|
+
|
|
56
|
+
- **Inputs:** border color changes to status color on hover ([#847](https://www.github.com/iTwin/iTwinUI/issues/847))
|
|
57
|
+
- **ToggleSwitch:** Define height of toggle switch to display correctly in iOS ([#852](https://www.github.com/iTwin/iTwinUI/issues/852))
|
|
58
|
+
|
|
59
|
+
## [1.2.2](https://www.github.com/iTwin/iTwinUI/compare/v1.2.1...v1.2.2) (2022-12-09)
|
|
60
|
+
|
|
61
|
+
### Patch changes
|
|
62
|
+
|
|
63
|
+
- **Select:** Use correct placeholder text color ([#846](https://www.github.com/iTwin/iTwinUI/issues/846))
|
|
64
|
+
|
|
65
|
+
## [1.2.1](https://www.github.com/iTwin/iTwinUI/compare/v1.2.0...v1.2.1) (2022-12-08)
|
|
66
|
+
|
|
67
|
+
### Patch changes
|
|
68
|
+
|
|
69
|
+
- **Code:** Remove `user-select: all` and extra declarations ([#836](https://www.github.com/iTwin/iTwinUI/issues/836))
|
|
14
70
|
|
|
15
71
|
## [1.2.0](https://www.github.com/iTwin/iTwinUI/compare/v1.1.0...v1.2.0) (2022-12-06)
|
|
16
72
|
|
|
17
|
-
###
|
|
73
|
+
### Minor changes
|
|
18
74
|
|
|
19
|
-
|
|
20
|
-
|
|
75
|
+
- **ExpandableBlock:** Add disabled state support through `disabled`/`aria-disabled` attribute on the toggle ([#821](https://www.github.com/iTwin/iTwinUI/issues/821))
|
|
76
|
+
- **`iui-root`**: Add `.iui-root-background` modifier to opt into setting the recommended background-color ([#833](https://www.github.com/iTwin/iTwinUI/issues/833))
|
|
21
77
|
|
|
22
78
|
## [1.1.0](https://www.github.com/iTwin/iTwinUI/compare/v1.0.0...v1.1.0) (2022-12-01)
|
|
23
79
|
|
|
24
|
-
###
|
|
80
|
+
### Minor changes
|
|
25
81
|
|
|
26
|
-
|
|
82
|
+
- **ComboBox:** Add multi-select tags ([#817](https://www.github.com/iTwin/iTwinUI/issues/817))
|
|
27
83
|
|
|
28
|
-
###
|
|
84
|
+
### Patch changes
|
|
29
85
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
86
|
+
- **Avatar:** Sizes have lower specificity, use CSS vars. ([#818](https://www.github.com/iTwin/iTwinUI/issues/818))
|
|
87
|
+
- **Progress-indicator**: Overlay now intercepts clicks ([#827](https://www.github.com/iTwin/iTwinUI/issues/827))
|
|
88
|
+
- **Slider:** Change align `start` to `flex-start` ([#825](https://www.github.com/iTwin/iTwinUI/issues/825))
|
|
33
89
|
|
|
34
90
|
## [1.0.0](https://www.github.com/iTwin/iTwinUI/compare/v0.63.1...v1.0.0) (2022-11-14)
|
|
35
91
|
|
package/LICENSE.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# MIT License
|
|
2
2
|
|
|
3
|
-
Copyright © Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
Copyright © 2021-2023 Bentley Systems, Incorporated. All rights reserved.
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
6
|
|
package/README.md
CHANGED
|
@@ -28,7 +28,7 @@ iTwinUI-css consists of the following packages:
|
|
|
28
28
|
- `@itwin/itwinui-css` - the CSS for every component as well as some global styles
|
|
29
29
|
- `@itwin/itwinui-variables` - CSS variables for iTwinUI's design tokens
|
|
30
30
|
|
|
31
|
-
If you're looking for React components, check out [`@itwin/itwinui-react`](https://github.com/iTwin/iTwinUI-react) which is built on top of iTwinUI-css.
|
|
31
|
+
If you're looking for React components, check out [`@itwin/itwinui-react`](https://github.com/iTwin/iTwinUI/packages/itwinui-react) which is built on top of iTwinUI-css.
|
|
32
32
|
|
|
33
33
|
---
|
|
34
34
|
|
package/css/alert.css
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
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{vertical-align:baseline;--_iui-alert-border-color:var(--iui-color-border);border-radius:var(--iui-border-radius-1);color:var(--iui-color-text);background-color:var(--iui-color-background);border:none;border:1px solid var(--_iui-alert-border-color);box-shadow:inset var(--iui-size-2xs)0 0 var(--_iui-alert-border-color);align-items:center;margin:0;padding:0;display:flex}.iui-alert:where([data-iui-status=informational]){--_iui-alert-border-color:var(--iui-color-border-informational);--_iui-alert-icon-color:var(--iui-color-icon-informational)}.iui-alert:where([data-iui-status=informational])::selection,.iui-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link{color:var(--iui-color-text-informational);-webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}.iui-alert:where([data-iui-status=informational]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=informational]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link:hover{color:var(--iui-color-text-informational-hover)}.iui-alert:where([data-iui-status=informational]) .iui-alert-button{outline-color:var(--iui-color-text-informational)}.iui-alert:where([data-iui-status=positive]){--_iui-alert-border-color:var(--iui-color-border-positive);--_iui-alert-icon-color:var(--iui-color-icon-positive)}.iui-alert:where([data-iui-status=positive])::selection,.iui-alert:where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link{color:var(--iui-color-text-positive);-webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}.iui-alert:where([data-iui-status=positive]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=positive]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link:hover{color:var(--iui-color-text-positive-hover)}.iui-alert:where([data-iui-status=positive]) .iui-alert-button{outline-color:var(--iui-color-text-positive)}.iui-alert:where([data-iui-status=warning]){--_iui-alert-border-color:var(--iui-color-border-warning);--_iui-alert-icon-color:var(--iui-color-icon-warning)}.iui-alert:where([data-iui-status=warning])::selection,.iui-alert:where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link{color:var(--iui-color-text-warning);-webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}.iui-alert:where([data-iui-status=warning]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=warning]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link:hover{color:var(--iui-color-text-warning-hover)}.iui-alert:where([data-iui-status=warning]) .iui-alert-button{outline-color:var(--iui-color-text-warning)}.iui-alert:where([data-iui-status=negative]){--_iui-alert-border-color:var(--iui-color-border-negative);--_iui-alert-icon-color:var(--iui-color-icon-negative)}.iui-alert:where([data-iui-status=negative])::selection,.iui-alert:where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link{color:var(--iui-color-text-negative);-webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}.iui-alert:where([data-iui-status=negative]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=negative]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link:hover{color:var(--iui-color-text-negative-hover)}.iui-alert:where([data-iui-status=negative]) .iui-alert-button{outline-color:var(--iui-color-text-negative)}.iui-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;top:0;left:0}.iui-alert-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-height:var(--_iui-button-min-height);min-width:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs);margin:0 0 0 auto;margin-right:var(--iui-size-xs);flex-shrink:0;text-decoration:none;display:inline-flex;position:relative}.iui-alert-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-alert-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-alert-button:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-alert-button:where(:focus){outline-offset:-1px;outline-width:1px}.iui-alert-button:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-alert-icon{width:var(--iui-size-m);height:var(--iui-size-m);margin-left:var(--iui-size-m);fill:var(--_iui-alert-icon-color,var(--iui-color-icon-muted));flex-shrink:0;display:flex}@media (forced-colors:active){.iui-alert-icon{fill:CanvasText}}.iui-alert-message{margin:var(--iui-size-s)var(--iui-size-m)}.iui-alert-link{border-radius:var(--iui-border-radius-1);cursor:pointer;margin-left:var(--iui-size-xs);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}.iui-alert-link:hover{text-decoration:none}.iui-alert-button-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);transition:fill var(--iui-duration-1)ease-out;fill:var(--_iui-button-icon-fill,currentColor);flex-shrink:0;display:flex}
|
|
5
|
+
.iui-alert{vertical-align:baseline;--_iui-alert-border-color:var(--iui-color-border);border-radius:var(--iui-border-radius-1);color:var(--iui-color-text);background-color:var(--iui-color-background);border:none;border:1px solid var(--_iui-alert-border-color);box-shadow:inset var(--iui-size-2xs)0 0 var(--_iui-alert-border-color);align-items:center;margin:0;padding:0;display:flex}.iui-alert:where([data-iui-status=informational]){--_iui-alert-border-color:var(--iui-color-border-informational);--_iui-alert-icon-color:var(--iui-color-icon-informational)}.iui-alert:where([data-iui-status=informational])::selection,.iui-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link{color:var(--iui-color-text-informational);-webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}.iui-alert:where([data-iui-status=informational]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=informational]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link:hover{color:var(--iui-color-text-informational-hover)}.iui-alert:where([data-iui-status=informational]) .iui-alert-button{outline-color:var(--iui-color-text-informational)}.iui-alert:where([data-iui-status=positive]){--_iui-alert-border-color:var(--iui-color-border-positive);--_iui-alert-icon-color:var(--iui-color-icon-positive)}.iui-alert:where([data-iui-status=positive])::selection,.iui-alert:where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link{color:var(--iui-color-text-positive);-webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}.iui-alert:where([data-iui-status=positive]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=positive]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link:hover{color:var(--iui-color-text-positive-hover)}.iui-alert:where([data-iui-status=positive]) .iui-alert-button{outline-color:var(--iui-color-text-positive)}.iui-alert:where([data-iui-status=warning]){--_iui-alert-border-color:var(--iui-color-border-warning);--_iui-alert-icon-color:var(--iui-color-icon-warning)}.iui-alert:where([data-iui-status=warning])::selection,.iui-alert:where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link{color:var(--iui-color-text-warning);-webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}.iui-alert:where([data-iui-status=warning]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=warning]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link:hover{color:var(--iui-color-text-warning-hover)}.iui-alert:where([data-iui-status=warning]) .iui-alert-button{outline-color:var(--iui-color-text-warning)}.iui-alert:where([data-iui-status=negative]){--_iui-alert-border-color:var(--iui-color-border-negative);--_iui-alert-icon-color:var(--iui-color-icon-negative)}.iui-alert:where([data-iui-status=negative])::selection,.iui-alert:where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link{color:var(--iui-color-text-negative);-webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}.iui-alert:where([data-iui-status=negative]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=negative]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link:hover{color:var(--iui-color-text-negative-hover)}.iui-alert:where([data-iui-status=negative]) .iui-alert-button{outline-color:var(--iui-color-text-negative)}.iui-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;top:0;left:0}.iui-alert-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-height:var(--_iui-button-min-height);min-width:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs);margin:0 0 0 auto;margin-right:var(--iui-size-xs);flex-shrink:0;text-decoration:none;display:inline-flex;position:relative}.iui-alert-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-alert-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-alert-button:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-alert-button:where(:focus){outline-offset:-1px;outline-width:1px}.iui-alert-button:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-alert-icon{width:var(--iui-size-m);height:var(--iui-size-m);margin-left:var(--iui-size-m);fill:var(--_iui-alert-icon-color,var(--iui-color-icon-muted));flex-shrink:0;display:flex}@media (forced-colors:active){.iui-alert-icon{fill:CanvasText}}.iui-alert-message{margin:var(--iui-size-s)var(--iui-size-m)}.iui-alert-link{border-radius:var(--iui-border-radius-1);cursor:pointer;margin-left:var(--iui-size-xs);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}.iui-alert-link:hover{text-decoration:none}.iui-alert-button-icon{display:inline-flex}.iui-alert-button-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);transition:fill var(--iui-duration-1)ease-out;fill:var(--_iui-button-icon-fill,currentColor);flex-shrink:0;display:flex}
|