@itwin/itwinui-react 3.0.3 → 3.0.4
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 +7 -0
- package/cjs/core/Select/Select.js +1 -7
- package/cjs/core/Tabs/Tabs.d.ts +3 -5
- package/cjs/core/Tabs/Tabs.js +3 -5
- package/cjs/core/Toast/Toaster.js +16 -17
- package/cjs/core/utils/hooks/useId.js +2 -1
- package/cjs/styles.js +2 -2
- package/esm/core/Select/Select.js +1 -7
- package/esm/core/Tabs/Tabs.d.ts +3 -5
- package/esm/core/Tabs/Tabs.js +3 -5
- package/esm/core/Toast/Toaster.js +16 -17
- package/esm/core/utils/hooks/useId.js +2 -1
- package/esm/styles.js +2 -2
- package/package.json +1 -1
- package/styles.css +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1682](https://github.com/iTwin/iTwinUI/pull/1682): Memoize `useToaster`'s return value so that it can be more reliably used in dependency arrays.
|
|
8
|
+
- [#1681](https://github.com/iTwin/iTwinUI/pull/1681): Fixed an issue where `Select`'s menu was being positioned incorrectly after its first render.
|
|
9
|
+
|
|
3
10
|
## 3.0.3
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -279,13 +279,7 @@ exports.Select = React.forwardRef((props, forwardedRef) => {
|
|
|
279
279
|
}
|
|
280
280
|
},
|
|
281
281
|
}),
|
|
282
|
-
ref:
|
|
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
|
-
},
|
|
282
|
+
ref: popover.refs.setFloating,
|
|
289
283
|
},
|
|
290
284
|
menuItems,
|
|
291
285
|
),
|
package/cjs/core/Tabs/Tabs.d.ts
CHANGED
|
@@ -199,11 +199,9 @@ export { LegacyTab as Tab };
|
|
|
199
199
|
* <Tabs.Tab value='tab2' label='Label 2' />
|
|
200
200
|
* <Tabs.Tab value='tab3' label='Label 3' />
|
|
201
201
|
* </Tabs.TabList>
|
|
202
|
-
* <Tabs.
|
|
203
|
-
* <
|
|
204
|
-
*
|
|
205
|
-
* </Tabs.Actions>
|
|
206
|
-
* </Tabs.ActionsWrapper>
|
|
202
|
+
* <Tabs.Actions>
|
|
203
|
+
* <Button>Sample Button</Button>
|
|
204
|
+
* </Tabs.Actions>
|
|
207
205
|
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
|
|
208
206
|
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
|
|
209
207
|
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
|
package/cjs/core/Tabs/Tabs.js
CHANGED
|
@@ -417,11 +417,9 @@ exports.Tab = LegacyTab;
|
|
|
417
417
|
* <Tabs.Tab value='tab2' label='Label 2' />
|
|
418
418
|
* <Tabs.Tab value='tab3' label='Label 3' />
|
|
419
419
|
* </Tabs.TabList>
|
|
420
|
-
* <Tabs.
|
|
421
|
-
* <
|
|
422
|
-
*
|
|
423
|
-
* </Tabs.Actions>
|
|
424
|
-
* </Tabs.ActionsWrapper>
|
|
420
|
+
* <Tabs.Actions>
|
|
421
|
+
* <Button>Sample Button</Button>
|
|
422
|
+
* </Tabs.Actions>
|
|
425
423
|
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
|
|
426
424
|
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
|
|
427
425
|
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
|
|
@@ -17,29 +17,28 @@ const Toast_js_1 = require('./Toast.js');
|
|
|
17
17
|
// ----------------------------------------------------------------------------
|
|
18
18
|
const useToaster = () => {
|
|
19
19
|
const dispatch = (0, index_js_1.useSafeContext)(ToasterDispatchContext);
|
|
20
|
-
|
|
21
|
-
(category) => (content, options) => {
|
|
20
|
+
return React.useMemo(() => {
|
|
21
|
+
const showToast = (category) => (content, options) => {
|
|
22
22
|
const id = nextId();
|
|
23
23
|
dispatch({
|
|
24
24
|
type: 'add',
|
|
25
25
|
toast: { ...options, id, content, category },
|
|
26
26
|
});
|
|
27
27
|
return { close: () => dispatch({ type: 'remove', id }) };
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
};
|
|
28
|
+
};
|
|
29
|
+
return {
|
|
30
|
+
positive: showToast('positive'),
|
|
31
|
+
informational: showToast('informational'),
|
|
32
|
+
negative: showToast('negative'),
|
|
33
|
+
warning: showToast('warning'),
|
|
34
|
+
closeAll: () => {
|
|
35
|
+
dispatch({ type: 'close-all' });
|
|
36
|
+
},
|
|
37
|
+
setSettings: (settings) => {
|
|
38
|
+
dispatch({ type: 'settings', settings });
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
}, [dispatch]);
|
|
43
42
|
};
|
|
44
43
|
exports.useToaster = useToaster;
|
|
45
44
|
// ----------------------------------------------------------------------------
|
|
@@ -21,4 +21,5 @@ exports.useId = useId;
|
|
|
21
21
|
// Read more: https://github.com/webpack/webpack/issues/14814
|
|
22
22
|
const _React = React;
|
|
23
23
|
const useUniqueValue =
|
|
24
|
-
_React.useId ??
|
|
24
|
+
_React.useId ??
|
|
25
|
+
(() => React.useMemo(() => (0, numbers_js_1.getRandomValue)(10), []));
|
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-uvcq473': '_iui3-uvcq473',
|
|
217
217
|
'iui-progress-indicator-linear-label':
|
|
218
218
|
'_iui3-progress-indicator-linear-label',
|
|
219
|
-
'iui-
|
|
219
|
+
'iui-uvcq47n': '_iui3-uvcq47n',
|
|
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,13 +275,7 @@ export const Select = React.forwardRef((props, forwardedRef) => {
|
|
|
275
275
|
}
|
|
276
276
|
},
|
|
277
277
|
}),
|
|
278
|
-
ref:
|
|
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
|
-
},
|
|
278
|
+
ref: popover.refs.setFloating,
|
|
285
279
|
},
|
|
286
280
|
menuItems,
|
|
287
281
|
),
|
package/esm/core/Tabs/Tabs.d.ts
CHANGED
|
@@ -199,11 +199,9 @@ export { LegacyTab as Tab };
|
|
|
199
199
|
* <Tabs.Tab value='tab2' label='Label 2' />
|
|
200
200
|
* <Tabs.Tab value='tab3' label='Label 3' />
|
|
201
201
|
* </Tabs.TabList>
|
|
202
|
-
* <Tabs.
|
|
203
|
-
* <
|
|
204
|
-
*
|
|
205
|
-
* </Tabs.Actions>
|
|
206
|
-
* </Tabs.ActionsWrapper>
|
|
202
|
+
* <Tabs.Actions>
|
|
203
|
+
* <Button>Sample Button</Button>
|
|
204
|
+
* </Tabs.Actions>
|
|
207
205
|
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
|
|
208
206
|
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
|
|
209
207
|
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
|
package/esm/core/Tabs/Tabs.js
CHANGED
|
@@ -405,11 +405,9 @@ export { LegacyTab as Tab };
|
|
|
405
405
|
* <Tabs.Tab value='tab2' label='Label 2' />
|
|
406
406
|
* <Tabs.Tab value='tab3' label='Label 3' />
|
|
407
407
|
* </Tabs.TabList>
|
|
408
|
-
* <Tabs.
|
|
409
|
-
* <
|
|
410
|
-
*
|
|
411
|
-
* </Tabs.Actions>
|
|
412
|
-
* </Tabs.ActionsWrapper>
|
|
408
|
+
* <Tabs.Actions>
|
|
409
|
+
* <Button>Sample Button</Button>
|
|
410
|
+
* </Tabs.Actions>
|
|
413
411
|
* <Tabs.Panel value='tab1'>Content 1</Tabs.Panel>
|
|
414
412
|
* <Tabs.Panel value='tab2'>Content 2</Tabs.Panel>
|
|
415
413
|
* <Tabs.Panel value='tab3'>Content 3</Tabs.Panel>
|
|
@@ -9,29 +9,28 @@ import { Toast } from './Toast.js';
|
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
10
|
export const useToaster = () => {
|
|
11
11
|
const dispatch = useSafeContext(ToasterDispatchContext);
|
|
12
|
-
|
|
13
|
-
(category) => (content, options) => {
|
|
12
|
+
return React.useMemo(() => {
|
|
13
|
+
const showToast = (category) => (content, options) => {
|
|
14
14
|
const id = nextId();
|
|
15
15
|
dispatch({
|
|
16
16
|
type: 'add',
|
|
17
17
|
toast: { ...options, id, content, category },
|
|
18
18
|
});
|
|
19
19
|
return { close: () => dispatch({ type: 'remove', id }) };
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
};
|
|
20
|
+
};
|
|
21
|
+
return {
|
|
22
|
+
positive: showToast('positive'),
|
|
23
|
+
informational: showToast('informational'),
|
|
24
|
+
negative: showToast('negative'),
|
|
25
|
+
warning: showToast('warning'),
|
|
26
|
+
closeAll: () => {
|
|
27
|
+
dispatch({ type: 'close-all' });
|
|
28
|
+
},
|
|
29
|
+
setSettings: (settings) => {
|
|
30
|
+
dispatch({ type: 'settings', settings });
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
}, [dispatch]);
|
|
35
34
|
};
|
|
36
35
|
// ----------------------------------------------------------------------------
|
|
37
36
|
export const Toaster = () => {
|
|
@@ -15,4 +15,5 @@ export const useId = () => {
|
|
|
15
15
|
// This is needed to avoid bundlers trying to import non-existing export.
|
|
16
16
|
// Read more: https://github.com/webpack/webpack/issues/14814
|
|
17
17
|
const _React = React;
|
|
18
|
-
const useUniqueValue =
|
|
18
|
+
const useUniqueValue =
|
|
19
|
+
_React.useId ?? (() => React.useMemo(() => getRandomValue(10), []));
|
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-uvcq473': '_iui3-uvcq473',
|
|
216
216
|
'iui-progress-indicator-linear-label':
|
|
217
217
|
'_iui3-progress-indicator-linear-label',
|
|
218
|
-
'iui-
|
|
218
|
+
'iui-uvcq47n': '_iui3-uvcq47n',
|
|
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-uvcq473;-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-uvcq473{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-uvcq47n}@keyframes _iui3-uvcq47n{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}}
|