@itwin/itwinui-react 3.0.0 → 3.0.2
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 +13 -0
- package/README.md +2 -2
- package/cjs/core/Select/Select.js +7 -1
- package/cjs/core/ThemeProvider/ThemeProvider.d.ts +2 -1
- package/cjs/core/ThemeProvider/ThemeProvider.js +11 -11
- package/cjs/styles.js +2 -2
- package/esm/core/Select/Select.js +7 -1
- package/esm/core/ThemeProvider/ThemeProvider.d.ts +2 -1
- package/esm/core/ThemeProvider/ThemeProvider.js +11 -11
- package/esm/styles.js +2 -2
- package/package.json +1 -1
- package/styles.css +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1663](https://github.com/iTwin/iTwinUI/pull/1663): Fixed `ThemeProvider` to correctly inherit `highContrast` option when using `theme="inherit"`.
|
|
8
|
+
|
|
9
|
+
## 3.0.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#1661](https://github.com/iTwin/iTwinUI/pull/1661): Fixed Select re-rendering infinitely when used with React 17.
|
|
14
|
+
|
|
3
15
|
## 3.0.0
|
|
4
16
|
|
|
5
17
|
Welcome to the v3 release of `@itwin/itwinui-react`. 🎉
|
|
@@ -61,6 +73,7 @@ This release includes a few breaking changes which have been briefly listed belo
|
|
|
61
73
|
- [#1328](https://github.com/iTwin/iTwinUI/pull/1328): Added new `Overlay` component with customizable subcomponents: `Overlay.Wrapper`, `Overlay.HiddenContent`, `Overlay.Overlay`.
|
|
62
74
|
- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added `status` prop to `Input`, `Textarea` and `Select`.
|
|
63
75
|
- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added two new components for building complex input layouts.
|
|
76
|
+
|
|
64
77
|
- `InputGrid` for the "outer" layout (label, inputs and statusMessage)
|
|
65
78
|
- `InputWithDecorations` for the "inner" layout (start icon/button, end icon/button)
|
|
66
79
|
|
package/README.md
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
<picture>
|
|
3
3
|
<source
|
|
4
4
|
media='(prefers-color-scheme: dark)'
|
|
5
|
-
srcset='https://itwin.github.io/iTwinUI/
|
|
5
|
+
srcset='https://itwin.github.io/iTwinUI/logo-dark.svg'
|
|
6
6
|
/>
|
|
7
7
|
<img
|
|
8
|
-
src='https://itwin.github.io/iTwinUI/
|
|
8
|
+
src='https://itwin.github.io/iTwinUI/logo.svg'
|
|
9
9
|
alt='iTwinUI logo'
|
|
10
10
|
/>
|
|
11
11
|
</picture>
|
|
@@ -279,7 +279,13 @@ exports.Select = React.forwardRef((props, forwardedRef) => {
|
|
|
279
279
|
}
|
|
280
280
|
},
|
|
281
281
|
}),
|
|
282
|
-
ref:
|
|
282
|
+
ref: (node) => {
|
|
283
|
+
// early return if ref is already set, to prevent repeated re-renders
|
|
284
|
+
if (popover.refs.floating.current || !node) {
|
|
285
|
+
return;
|
|
286
|
+
}
|
|
287
|
+
popover.refs.setFloating(node);
|
|
288
|
+
},
|
|
283
289
|
},
|
|
284
290
|
menuItems,
|
|
285
291
|
),
|
|
@@ -18,7 +18,8 @@ type RootProps = {
|
|
|
18
18
|
*
|
|
19
19
|
* The 'inherit' option is intended to be used by packages, to enable incremental adoption
|
|
20
20
|
* of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
|
|
21
|
-
* if no parent theme is found. Additionally, it will attempt to inherit
|
|
21
|
+
* if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
|
|
22
|
+
* and `portalContainer` (if possible).
|
|
22
23
|
*
|
|
23
24
|
* @default 'inherit'
|
|
24
25
|
*/
|
|
@@ -44,12 +44,20 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
44
44
|
const {
|
|
45
45
|
theme: themeProp = 'inherit',
|
|
46
46
|
children,
|
|
47
|
-
themeOptions,
|
|
47
|
+
themeOptions = {},
|
|
48
48
|
portalContainer: portalContainerProp,
|
|
49
49
|
...rest
|
|
50
50
|
} = props;
|
|
51
51
|
const [parentTheme, rootRef, parentContext] = useParentTheme();
|
|
52
52
|
const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
|
|
53
|
+
// default apply background only for topmost ThemeProvider
|
|
54
|
+
themeOptions.applyBackground ?? (themeOptions.applyBackground = !parentTheme);
|
|
55
|
+
// default inherit highContrast option from parent if also inheriting base theme
|
|
56
|
+
themeOptions.highContrast ??
|
|
57
|
+
(themeOptions.highContrast =
|
|
58
|
+
themeProp === 'inherit'
|
|
59
|
+
? parentContext?.themeOptions?.highContrast
|
|
60
|
+
: undefined);
|
|
53
61
|
/**
|
|
54
62
|
* We will portal our portal container into `portalContainer` prop (if specified),
|
|
55
63
|
* or inherit `portalContainer` from context (if also inheriting theme).
|
|
@@ -59,7 +67,6 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
59
67
|
(themeProp === 'inherit' ? parentContext?.portalContainer : undefined);
|
|
60
68
|
const [portalContainer, setPortalContainer] = (0,
|
|
61
69
|
index_js_1.useControlledState)(null, portaledPortalContainer);
|
|
62
|
-
const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
|
|
63
70
|
const contextValue = React.useMemo(
|
|
64
71
|
() => ({ theme, themeOptions, portalContainer }),
|
|
65
72
|
// we do include all dependencies below, but we want to stringify the objects as they could be different on each render
|
|
@@ -73,7 +80,6 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
73
80
|
Root,
|
|
74
81
|
{
|
|
75
82
|
theme: theme,
|
|
76
|
-
shouldApplyBackground: shouldApplyBackground,
|
|
77
83
|
themeOptions: themeOptions,
|
|
78
84
|
ref: (0, index_js_1.useMergedRefs)(forwardedRef, rootRef),
|
|
79
85
|
...rest,
|
|
@@ -99,14 +105,7 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
99
105
|
exports.default = exports.ThemeProvider;
|
|
100
106
|
// ----------------------------------------------------------------------------
|
|
101
107
|
const Root = React.forwardRef((props, forwardedRef) => {
|
|
102
|
-
const {
|
|
103
|
-
theme,
|
|
104
|
-
children,
|
|
105
|
-
themeOptions,
|
|
106
|
-
shouldApplyBackground,
|
|
107
|
-
className,
|
|
108
|
-
...rest
|
|
109
|
-
} = props;
|
|
108
|
+
const { theme, children, themeOptions, className, ...rest } = props;
|
|
110
109
|
const prefersDark = (0, index_js_1.useMediaQuery)(
|
|
111
110
|
'(prefers-color-scheme: dark)',
|
|
112
111
|
);
|
|
@@ -115,6 +114,7 @@ const Root = React.forwardRef((props, forwardedRef) => {
|
|
|
115
114
|
);
|
|
116
115
|
const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
|
|
117
116
|
const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
|
|
117
|
+
const shouldApplyBackground = themeOptions?.applyBackground;
|
|
118
118
|
return React.createElement(
|
|
119
119
|
index_js_1.Box,
|
|
120
120
|
{
|
package/cjs/styles.js
CHANGED
|
@@ -213,10 +213,10 @@ const styles = {
|
|
|
213
213
|
'iui-overlay-exiting': '_iui3-overlay-exiting',
|
|
214
214
|
closeAnimation,
|
|
215
215
|
'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
|
|
216
|
-
'iui-
|
|
216
|
+
'iui-urozg4u': '_iui3-urozg4u',
|
|
217
217
|
'iui-progress-indicator-linear-label':
|
|
218
218
|
'_iui3-progress-indicator-linear-label',
|
|
219
|
-
'iui-
|
|
219
|
+
'iui-urozg5t': '_iui3-urozg5t',
|
|
220
220
|
'iui-radio': '_iui3-radio',
|
|
221
221
|
'iui-radio-tile': '_iui3-radio-tile',
|
|
222
222
|
'iui-radio-tile-icon': '_iui3-radio-tile-icon',
|
|
@@ -275,7 +275,13 @@ export const Select = React.forwardRef((props, forwardedRef) => {
|
|
|
275
275
|
}
|
|
276
276
|
},
|
|
277
277
|
}),
|
|
278
|
-
ref:
|
|
278
|
+
ref: (node) => {
|
|
279
|
+
// early return if ref is already set, to prevent repeated re-renders
|
|
280
|
+
if (popover.refs.floating.current || !node) {
|
|
281
|
+
return;
|
|
282
|
+
}
|
|
283
|
+
popover.refs.setFloating(node);
|
|
284
|
+
},
|
|
279
285
|
},
|
|
280
286
|
menuItems,
|
|
281
287
|
),
|
|
@@ -18,7 +18,8 @@ type RootProps = {
|
|
|
18
18
|
*
|
|
19
19
|
* The 'inherit' option is intended to be used by packages, to enable incremental adoption
|
|
20
20
|
* of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
|
|
21
|
-
* if no parent theme is found. Additionally, it will attempt to inherit
|
|
21
|
+
* if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
|
|
22
|
+
* and `portalContainer` (if possible).
|
|
22
23
|
*
|
|
23
24
|
* @default 'inherit'
|
|
24
25
|
*/
|
|
@@ -46,12 +46,20 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
46
46
|
const {
|
|
47
47
|
theme: themeProp = 'inherit',
|
|
48
48
|
children,
|
|
49
|
-
themeOptions,
|
|
49
|
+
themeOptions = {},
|
|
50
50
|
portalContainer: portalContainerProp,
|
|
51
51
|
...rest
|
|
52
52
|
} = props;
|
|
53
53
|
const [parentTheme, rootRef, parentContext] = useParentTheme();
|
|
54
54
|
const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
|
|
55
|
+
// default apply background only for topmost ThemeProvider
|
|
56
|
+
themeOptions.applyBackground ?? (themeOptions.applyBackground = !parentTheme);
|
|
57
|
+
// default inherit highContrast option from parent if also inheriting base theme
|
|
58
|
+
themeOptions.highContrast ??
|
|
59
|
+
(themeOptions.highContrast =
|
|
60
|
+
themeProp === 'inherit'
|
|
61
|
+
? parentContext?.themeOptions?.highContrast
|
|
62
|
+
: undefined);
|
|
55
63
|
/**
|
|
56
64
|
* We will portal our portal container into `portalContainer` prop (if specified),
|
|
57
65
|
* or inherit `portalContainer` from context (if also inheriting theme).
|
|
@@ -63,7 +71,6 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
63
71
|
null,
|
|
64
72
|
portaledPortalContainer,
|
|
65
73
|
);
|
|
66
|
-
const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
|
|
67
74
|
const contextValue = React.useMemo(
|
|
68
75
|
() => ({ theme, themeOptions, portalContainer }),
|
|
69
76
|
// we do include all dependencies below, but we want to stringify the objects as they could be different on each render
|
|
@@ -77,7 +84,6 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
77
84
|
Root,
|
|
78
85
|
{
|
|
79
86
|
theme: theme,
|
|
80
|
-
shouldApplyBackground: shouldApplyBackground,
|
|
81
87
|
themeOptions: themeOptions,
|
|
82
88
|
ref: useMergedRefs(forwardedRef, rootRef),
|
|
83
89
|
...rest,
|
|
@@ -103,18 +109,12 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
103
109
|
export default ThemeProvider;
|
|
104
110
|
// ----------------------------------------------------------------------------
|
|
105
111
|
const Root = React.forwardRef((props, forwardedRef) => {
|
|
106
|
-
const {
|
|
107
|
-
theme,
|
|
108
|
-
children,
|
|
109
|
-
themeOptions,
|
|
110
|
-
shouldApplyBackground,
|
|
111
|
-
className,
|
|
112
|
-
...rest
|
|
113
|
-
} = props;
|
|
112
|
+
const { theme, children, themeOptions, className, ...rest } = props;
|
|
114
113
|
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
|
|
115
114
|
const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
|
|
116
115
|
const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
|
|
117
116
|
const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
|
|
117
|
+
const shouldApplyBackground = themeOptions?.applyBackground;
|
|
118
118
|
return React.createElement(
|
|
119
119
|
Box,
|
|
120
120
|
{
|
package/esm/styles.js
CHANGED
|
@@ -212,10 +212,10 @@ const styles = {
|
|
|
212
212
|
'iui-overlay-exiting': '_iui3-overlay-exiting',
|
|
213
213
|
closeAnimation,
|
|
214
214
|
'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
|
|
215
|
-
'iui-
|
|
215
|
+
'iui-urozg4u': '_iui3-urozg4u',
|
|
216
216
|
'iui-progress-indicator-linear-label':
|
|
217
217
|
'_iui3-progress-indicator-linear-label',
|
|
218
|
-
'iui-
|
|
218
|
+
'iui-urozg5t': '_iui3-urozg5t',
|
|
219
219
|
'iui-radio': '_iui3-radio',
|
|
220
220
|
'iui-radio-tile': '_iui3-radio-tile',
|
|
221
221
|
'iui-radio-tile-icon': '_iui3-radio-tile-icon',
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -694,14 +694,14 @@
|
|
|
694
694
|
}
|
|
695
695
|
|
|
696
696
|
@layer itwinui.v3{
|
|
697
|
-
._iui3-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}._iui3-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}._iui3-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-
|
|
697
|
+
._iui3-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}._iui3-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}._iui3-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-urozg4u;-webkit-mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0);mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0)}@keyframes _iui3-urozg4u{to{transform:rotate(360deg)}}._iui3-progress-indicator-linear-label{font-size:var(--iui-font-size-0);color:var(--_iui-progress-indicator-linear-label-color);--iui-svg-fill:var(--_iui-progress-indicator-linear-label-fill);justify-content:space-between;align-items:center;display:flex}._iui3-progress-indicator-linear-label>:only-child{margin-inline:auto}._iui3-progress-indicator-linear{gap:var(--iui-size-2xs);display:grid}._iui3-progress-indicator-linear:before{content:"";block-size:var(--iui-size-2xs);background-color:var(--iui-color-border);background-image:linear-gradient(90deg,var(--_iui-progress-indicator-track-fill,var(--iui-color-border-accent))0% 100%);background-repeat:no-repeat;background-size:var(--iui-progress-percentage,100%)100%;forced-color-adjust:none}
|
|
698
698
|
}
|
|
699
699
|
|
|
700
700
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-progress-indicator-linear:before{background-color:#0000;background-image:linear-gradient(90deg,CanvasText 0% 100%);border:.5px solid}}
|
|
701
701
|
}
|
|
702
702
|
|
|
703
703
|
@layer itwinui.v3{
|
|
704
|
-
._iui3-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}._iui3-progress-indicator-linear[data-iui-status=positive]::selection,._iui3-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}._iui3-progress-indicator-linear[data-iui-status=negative]::selection,._iui3-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}._iui3-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite _iui3-
|
|
704
|
+
._iui3-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}._iui3-progress-indicator-linear[data-iui-status=positive]::selection,._iui3-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}._iui3-progress-indicator-linear[data-iui-status=negative]::selection,._iui3-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}._iui3-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite _iui3-urozg5t}@keyframes _iui3-urozg5t{0%{background-position:-60% 0;background-size:30% 100%}40%{background-position:-40% 0;background-size:40% 100%}to{background-position:200% 0;background-size:50% 100%}}._iui3-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;inline-size:-moz-fit-content;inline-size:fit-content;margin:0;padding:0;display:flex;position:relative}._iui3-radio-wrapper._iui3-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}._iui3-radio-wrapper>._iui3-checkbox-label,._iui3-radio-wrapper>._iui3-radio-label{line-height:var(--iui-size-l)}._iui3-radio-wrapper>._iui3-checkbox-label svg,._iui3-radio-wrapper>._iui3-radio-label svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-radio-wrapper._iui3-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}._iui3-radio-wrapper._iui3-disabled svg{fill:var(--iui-color-icon-disabled)}._iui3-radio-wrapper._iui3-positive{color:var(--iui-color-text-positive)}._iui3-radio-wrapper._iui3-warning{color:var(--iui-color-text-warning)}._iui3-radio-wrapper._iui3-negative{color:var(--iui-color-text-negative)}._iui3-radio{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;inline-size:var(--iui-size-m);block-size:var(--iui-size-m);appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;transition:outline-color var(--iui-duration-1)ease-out;outline:solid 1px var(--_iui-checkbox-border-color);outline-offset:-1px;border-radius:50%;flex-shrink:0;margin:0;display:flex;position:relative}._iui3-radio:before{content:"";inset:calc((var(--iui-checkbox-target-size,24px) - 16px)/-2);position:absolute}._iui3-radio:after{content:"";background-color:var(--_iui-checkbox-svg-color);-webkit-mask:var(--_iui-checkbox-mask-image)no-repeat center;mask:var(--_iui-checkbox-mask-image)no-repeat center;position:absolute;inset:0}._iui3-radio:not(:checked){--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg)}._iui3-radio:hover{--_iui-checkbox-border-color:var(--iui-color-border-foreground-hover)}._iui3-radio:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-radio:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-radio:disabled{--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-border-color:var(--iui-color-border-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled);cursor:not-allowed}._iui3-radio._iui3-checkbox-visibility{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z\" opacity=\".33\" /><path d=\"m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z\" /></svg>");--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;outline-width:1px}._iui3-radio._iui3-checkbox-visibility:where(:not(:checked):not(:indeterminate)){--_iui-checkbox-svg-color:var(--iui-color-icon)}._iui3-radio._iui3-checkbox-visibility:where(:hover){--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:var(--iui-color-background-transparent-hover)}._iui3-radio._iui3-checkbox-visibility:where(:disabled){--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled)}._iui3-radio._iui3-loading{--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;opacity:0;cursor:wait;position:absolute}._iui3-radio:checked{--_iui-checkbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>")}._iui3-radio:not(:checked),._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio-tile{-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));inline-size:calc(var(--iui-size-xl)*5);padding:var(--iui-size-xs);z-index:1;outline:1px solid var(--iui-color-border);background-color:var(--iui-color-background);transition:outline-color var(--iui-duration-1)ease-out;align-content:center;justify-items:center;display:grid;position:relative}._iui3-radio-tile:where(:hover){z-index:2;outline-color:var(--iui-color-border-hover)}._iui3-radio-tile:where(:hover) ._iui3-radio-tile-icon svg{fill:var(--iui-color-icon-hover)}._iui3-radio-tile:where(:has(input:disabled),[data-iui-disabled=true]){outline-color:var(--iui-color-border-disabled);background-color:var(--iui-color-background-disabled)}._iui3-radio-tile-container{-webkit-user-select:none;user-select:none;isolation:isolate;flex-wrap:wrap;gap:1px;display:inline-flex;position:relative}._iui3-radio-tile-input{z-index:1;appearance:none;cursor:pointer;margin:0;position:absolute;inset:0}._iui3-radio-tile-input:checked{z-index:3;outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}
|
|
705
705
|
}
|
|
706
706
|
|
|
707
707
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-radio-tile-input:checked{outline-color:Highlight}}
|