@itwin/itwinui-react 3.3.0 → 3.3.1
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/Dialog/DialogContent.d.ts +1 -2
- package/cjs/core/Dialog/DialogContent.js +1 -42
- package/cjs/core/Dialog/DialogMain.js +2 -24
- package/cjs/core/Table/Table.js +4 -0
- package/cjs/core/Table/TableCell.js +7 -22
- package/cjs/core/Table/utils.d.ts +6 -0
- package/cjs/core/Table/utils.js +18 -1
- package/esm/core/Dialog/DialogContent.d.ts +1 -2
- package/esm/core/Dialog/DialogContent.js +2 -17
- package/esm/core/Dialog/DialogMain.js +3 -25
- package/esm/core/Table/Table.js +5 -1
- package/esm/core/Table/TableCell.js +8 -23
- package/esm/core/Table/utils.d.ts +6 -0
- package/esm/core/Table/utils.js +16 -0
- package/package.json +2 -2
- package/styles.css +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1796](https://github.com/iTwin/iTwinUI/pull/1796): Fixed a visual issue in `Table` where column headers were not aligned with rows when using expandable `subRows`.
|
|
8
|
+
- [#1795](https://github.com/iTwin/iTwinUI/pull/1795): Fixed blurring and resizing issues in Dialog/Modal by removing `overflow: hidden` and inline `transform` styles.
|
|
9
|
+
|
|
3
10
|
## 3.3.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { PolymorphicForwardRefComponent } from '../utils/index.js';
|
|
2
1
|
/**
|
|
3
2
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
4
3
|
* @example
|
|
@@ -6,5 +5,5 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
|
|
|
6
5
|
* My dialog content
|
|
7
6
|
* </Dialog.Content>
|
|
8
7
|
*/
|
|
9
|
-
export declare const DialogContent: PolymorphicForwardRefComponent<"div", {}>;
|
|
8
|
+
export declare const DialogContent: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
|
|
10
9
|
export default DialogContent;
|
|
@@ -1,38 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
3
|
exports.DialogContent = void 0;
|
|
30
4
|
/*---------------------------------------------------------------------------------------------
|
|
31
5
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
32
6
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
33
7
|
*--------------------------------------------------------------------------------------------*/
|
|
34
|
-
const React = __importStar(require("react"));
|
|
35
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
36
8
|
const index_js_1 = require("../utils/index.js");
|
|
37
9
|
/**
|
|
38
10
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
@@ -41,18 +13,5 @@ const index_js_1 = require("../utils/index.js");
|
|
|
41
13
|
* My dialog content
|
|
42
14
|
* </Dialog.Content>
|
|
43
15
|
*/
|
|
44
|
-
exports.DialogContent =
|
|
45
|
-
const { children, className, ...rest } = props;
|
|
46
|
-
const contentRef = React.useRef(null);
|
|
47
|
-
React.useEffect(() => {
|
|
48
|
-
// firefox hack for adding data-iui-flex in absence of :has
|
|
49
|
-
if (!(0, index_js_1.supportsHas)()) {
|
|
50
|
-
const dialog = contentRef.current?.closest('[role=dialog]');
|
|
51
|
-
if (dialog instanceof HTMLElement) {
|
|
52
|
-
dialog.dataset.iuiFlex = 'true';
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}, []);
|
|
56
|
-
return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-content', className), ref: (0, index_js_1.useMergedRefs)(contentRef, ref), ...rest }, children));
|
|
57
|
-
});
|
|
16
|
+
exports.DialogContent = index_js_1.polymorphic.div('iui-dialog-content');
|
|
58
17
|
exports.default = exports.DialogContent;
|
|
@@ -63,7 +63,6 @@ exports.DialogMain = React.forwardRef((props, ref) => {
|
|
|
63
63
|
const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
|
|
64
64
|
const [style, setStyle] = React.useState();
|
|
65
65
|
const dialogRef = React.useRef(null);
|
|
66
|
-
const [dialogElement, setDialogElement] = React.useState();
|
|
67
66
|
const hasBeenResized = React.useRef(false);
|
|
68
67
|
const previousFocusedElement = React.useRef();
|
|
69
68
|
const originalBodyOverflow = React.useRef('');
|
|
@@ -131,17 +130,13 @@ exports.DialogMain = React.forwardRef((props, ref) => {
|
|
|
131
130
|
...newStyle,
|
|
132
131
|
}));
|
|
133
132
|
}, []);
|
|
134
|
-
const roundedTransform = useRoundedTransform({
|
|
135
|
-
element: dialogElement,
|
|
136
|
-
transform,
|
|
137
|
-
});
|
|
138
133
|
const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
|
|
139
134
|
'iui-dialog-default': styleType === 'default',
|
|
140
135
|
'iui-dialog-full-page': styleType === 'fullPage',
|
|
141
136
|
'iui-dialog-visible': isOpen,
|
|
142
137
|
'iui-dialog-draggable': isDraggable,
|
|
143
|
-
}, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref
|
|
144
|
-
transform
|
|
138
|
+
}, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
|
|
139
|
+
transform,
|
|
145
140
|
...style,
|
|
146
141
|
...propStyle,
|
|
147
142
|
}, ...rest },
|
|
@@ -173,20 +168,3 @@ exports.DialogMain = React.forwardRef((props, ref) => {
|
|
|
173
168
|
!trapFocus && content)));
|
|
174
169
|
});
|
|
175
170
|
exports.default = exports.DialogMain;
|
|
176
|
-
// ----------------------------------------------------------------------------
|
|
177
|
-
/**
|
|
178
|
-
* Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
|
|
179
|
-
*/
|
|
180
|
-
const useRoundedTransform = ({ element, transform, }) => {
|
|
181
|
-
const [roundedStyles, setRoundedStyles] = React.useState(transform);
|
|
182
|
-
(0, index_js_1.useIsomorphicLayoutEffect)(() => {
|
|
183
|
-
if (!element || typeof DOMMatrix === 'undefined') {
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
const [x, y] = transform
|
|
187
|
-
? (0, index_js_1.getTranslateValues)(transform)
|
|
188
|
-
: (0, index_js_1.getTranslateValuesFromElement)(element);
|
|
189
|
-
setRoundedStyles(`translate(${(0, index_js_1.roundByDPR)(x)}px, ${(0, index_js_1.roundByDPR)(y)}px)`);
|
|
190
|
-
}, [element, transform]);
|
|
191
|
-
return roundedStyles;
|
|
192
|
-
};
|
package/cjs/core/Table/Table.js
CHANGED
|
@@ -429,6 +429,9 @@ const Table = (props) => {
|
|
|
429
429
|
React.createElement(index_js_1.Box, { as: 'div', ...headerProps, className: (0, classnames_1.default)('iui-table-header', headerProps?.className) },
|
|
430
430
|
React.createElement(index_js_1.Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
|
|
431
431
|
const { onClick, ...restSortProps } = column.getSortByToggleProps();
|
|
432
|
+
const columnHasExpanders = hasAnySubRows &&
|
|
433
|
+
index ===
|
|
434
|
+
headerGroup.headers.findIndex((c) => c.id !== index_js_5.SELECTION_CELL_ID);
|
|
432
435
|
const columnProps = column.getHeaderProps({
|
|
433
436
|
...restSortProps,
|
|
434
437
|
className: (0, classnames_1.default)('iui-table-cell', {
|
|
@@ -438,6 +441,7 @@ const Table = (props) => {
|
|
|
438
441
|
}, column.columnClassName),
|
|
439
442
|
style: {
|
|
440
443
|
...(0, utils_js_1.getCellStyle)(column, !!state.isTableResizing),
|
|
444
|
+
...(columnHasExpanders && (0, utils_js_1.getSubRowStyle)({ density })),
|
|
441
445
|
...(0, utils_js_1.getStickyStyle)(column, visibleColumns),
|
|
442
446
|
flexWrap: 'unset',
|
|
443
447
|
},
|
|
@@ -42,34 +42,19 @@ const TableCell = (props) => {
|
|
|
42
42
|
const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
|
|
43
43
|
const hasSubRowExpander = cellIndex ===
|
|
44
44
|
cell.row.cells.findIndex((c) => c.column.id !== index_js_1.SELECTION_CELL_ID);
|
|
45
|
-
const getSubRowStyle = () => {
|
|
46
|
-
if (!tableHasSubRows || !hasSubRowExpander) {
|
|
47
|
-
return undefined;
|
|
48
|
-
}
|
|
49
|
-
// If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
|
|
50
|
-
const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
|
|
51
|
-
let cellPadding = 16;
|
|
52
|
-
let expanderMargin = 8;
|
|
53
|
-
if (density === 'condensed') {
|
|
54
|
-
cellPadding = 12;
|
|
55
|
-
expanderMargin = 4;
|
|
56
|
-
}
|
|
57
|
-
else if (density === 'extra-condensed') {
|
|
58
|
-
cellPadding = 8;
|
|
59
|
-
expanderMargin = 4;
|
|
60
|
-
}
|
|
61
|
-
const multiplier = 26 + expanderMargin; // 26 = expander width
|
|
62
|
-
return {
|
|
63
|
-
paddingInlineStart: cellPadding + dynamicMargin * multiplier,
|
|
64
|
-
};
|
|
65
|
-
};
|
|
66
45
|
const cellElementProps = cell.getCellProps({
|
|
67
46
|
className: (0, classnames_1.default)('iui-table-cell', cell.column.cellClassName, {
|
|
68
47
|
'iui-table-cell-sticky': !!cell.column.sticky,
|
|
69
48
|
}),
|
|
70
49
|
style: {
|
|
71
50
|
...(0, utils_js_1.getCellStyle)(cell.column, !!tableInstance.state.isTableResizing),
|
|
72
|
-
...
|
|
51
|
+
...(tableHasSubRows &&
|
|
52
|
+
hasSubRowExpander &&
|
|
53
|
+
(0, utils_js_1.getSubRowStyle)({
|
|
54
|
+
density,
|
|
55
|
+
// If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
|
|
56
|
+
depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
|
|
57
|
+
})),
|
|
73
58
|
...(0, utils_js_1.getStickyStyle)(cell.column, tableInstance.visibleColumns),
|
|
74
59
|
},
|
|
75
60
|
});
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
import type { ColumnInstance } from '../../react-table/react-table.js';
|
|
2
2
|
export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
|
|
3
3
|
export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
|
|
4
|
+
export declare const getSubRowStyle: ({ density, depth }: {
|
|
5
|
+
density?: string | undefined;
|
|
6
|
+
depth?: number | undefined;
|
|
7
|
+
}) => {
|
|
8
|
+
paddingInlineStart: number;
|
|
9
|
+
};
|
package/cjs/core/Table/utils.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getStickyStyle = exports.getCellStyle = void 0;
|
|
3
|
+
exports.getSubRowStyle = exports.getStickyStyle = exports.getCellStyle = void 0;
|
|
4
4
|
const getCellStyle = (column, isTableResizing) => {
|
|
5
5
|
const style = {};
|
|
6
6
|
style.flex = `1 1 145px`;
|
|
@@ -48,3 +48,20 @@ const getStickyStyle = (column, columnList) => {
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
exports.getStickyStyle = getStickyStyle;
|
|
51
|
+
const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
|
|
52
|
+
let cellPadding = 16;
|
|
53
|
+
let expanderMargin = 8;
|
|
54
|
+
if (density === 'condensed') {
|
|
55
|
+
cellPadding = 12;
|
|
56
|
+
expanderMargin = 4;
|
|
57
|
+
}
|
|
58
|
+
else if (density === 'extra-condensed') {
|
|
59
|
+
cellPadding = 8;
|
|
60
|
+
expanderMargin = 4;
|
|
61
|
+
}
|
|
62
|
+
const multiplier = 26 + expanderMargin; // 26 = expander width
|
|
63
|
+
return {
|
|
64
|
+
paddingInlineStart: cellPadding + depth * multiplier,
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
exports.getSubRowStyle = getSubRowStyle;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { PolymorphicForwardRefComponent } from '../utils/index.js';
|
|
2
1
|
/**
|
|
3
2
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
4
3
|
* @example
|
|
@@ -6,5 +5,5 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
|
|
|
6
5
|
* My dialog content
|
|
7
6
|
* </Dialog.Content>
|
|
8
7
|
*/
|
|
9
|
-
export declare const DialogContent: PolymorphicForwardRefComponent<"div", {}>;
|
|
8
|
+
export declare const DialogContent: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
|
|
10
9
|
export default DialogContent;
|
|
@@ -2,9 +2,7 @@
|
|
|
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
|
-
import
|
|
6
|
-
import cx from 'classnames';
|
|
7
|
-
import { supportsHas, useMergedRefs, Box } from '../utils/index.js';
|
|
5
|
+
import { polymorphic } from '../utils/index.js';
|
|
8
6
|
/**
|
|
9
7
|
* Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
|
|
10
8
|
* @example
|
|
@@ -12,18 +10,5 @@ import { supportsHas, useMergedRefs, Box } from '../utils/index.js';
|
|
|
12
10
|
* My dialog content
|
|
13
11
|
* </Dialog.Content>
|
|
14
12
|
*/
|
|
15
|
-
export const DialogContent =
|
|
16
|
-
const { children, className, ...rest } = props;
|
|
17
|
-
const contentRef = React.useRef(null);
|
|
18
|
-
React.useEffect(() => {
|
|
19
|
-
// firefox hack for adding data-iui-flex in absence of :has
|
|
20
|
-
if (!supportsHas()) {
|
|
21
|
-
const dialog = contentRef.current?.closest('[role=dialog]');
|
|
22
|
-
if (dialog instanceof HTMLElement) {
|
|
23
|
-
dialog.dataset.iuiFlex = 'true';
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}, []);
|
|
27
|
-
return (React.createElement(Box, { className: cx('iui-dialog-content', className), ref: useMergedRefs(contentRef, ref), ...rest }, children));
|
|
28
|
-
});
|
|
13
|
+
export const DialogContent = polymorphic.div('iui-dialog-content');
|
|
29
14
|
export default DialogContent;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import cx from 'classnames';
|
|
7
|
-
import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box,
|
|
7
|
+
import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
|
|
8
8
|
import { useDialogContext } from './DialogContext.js';
|
|
9
9
|
import { CSSTransition } from 'react-transition-group';
|
|
10
10
|
import { DialogDragContext } from './DialogDragContext.js';
|
|
@@ -34,7 +34,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
|
|
|
34
34
|
const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
|
|
35
35
|
const [style, setStyle] = React.useState();
|
|
36
36
|
const dialogRef = React.useRef(null);
|
|
37
|
-
const [dialogElement, setDialogElement] = React.useState();
|
|
38
37
|
const hasBeenResized = React.useRef(false);
|
|
39
38
|
const previousFocusedElement = React.useRef();
|
|
40
39
|
const originalBodyOverflow = React.useRef('');
|
|
@@ -102,17 +101,13 @@ export const DialogMain = React.forwardRef((props, ref) => {
|
|
|
102
101
|
...newStyle,
|
|
103
102
|
}));
|
|
104
103
|
}, []);
|
|
105
|
-
const roundedTransform = useRoundedTransform({
|
|
106
|
-
element: dialogElement,
|
|
107
|
-
transform,
|
|
108
|
-
});
|
|
109
104
|
const content = (React.createElement(Box, { className: cx('iui-dialog', {
|
|
110
105
|
'iui-dialog-default': styleType === 'default',
|
|
111
106
|
'iui-dialog-full-page': styleType === 'fullPage',
|
|
112
107
|
'iui-dialog-visible': isOpen,
|
|
113
108
|
'iui-dialog-draggable': isDraggable,
|
|
114
|
-
}, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref
|
|
115
|
-
transform
|
|
109
|
+
}, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
|
|
110
|
+
transform,
|
|
116
111
|
...style,
|
|
117
112
|
...propStyle,
|
|
118
113
|
}, ...rest },
|
|
@@ -144,20 +139,3 @@ export const DialogMain = React.forwardRef((props, ref) => {
|
|
|
144
139
|
!trapFocus && content)));
|
|
145
140
|
});
|
|
146
141
|
export default DialogMain;
|
|
147
|
-
// ----------------------------------------------------------------------------
|
|
148
|
-
/**
|
|
149
|
-
* Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
|
|
150
|
-
*/
|
|
151
|
-
const useRoundedTransform = ({ element, transform, }) => {
|
|
152
|
-
const [roundedStyles, setRoundedStyles] = React.useState(transform);
|
|
153
|
-
useIsomorphicLayoutEffect(() => {
|
|
154
|
-
if (!element || typeof DOMMatrix === 'undefined') {
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
const [x, y] = transform
|
|
158
|
-
? getTranslateValues(transform)
|
|
159
|
-
: getTranslateValuesFromElement(element);
|
|
160
|
-
setRoundedStyles(`translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`);
|
|
161
|
-
}, [element, transform]);
|
|
162
|
-
return roundedStyles;
|
|
163
|
-
};
|
package/esm/core/Table/Table.js
CHANGED
|
@@ -8,7 +8,7 @@ import cx from 'classnames';
|
|
|
8
8
|
import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
|
|
9
9
|
import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
|
|
10
10
|
import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, Box, createWarningLogger, } from '../utils/index.js';
|
|
11
|
-
import { getCellStyle, getStickyStyle } from './utils.js';
|
|
11
|
+
import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
|
|
12
12
|
import { TableRowMemoized } from './TableRowMemoized.js';
|
|
13
13
|
import { FilterToggle } from './filters/index.js';
|
|
14
14
|
import { customFilterFunctions } from './filters/customFilterFunctions.js';
|
|
@@ -400,6 +400,9 @@ export const Table = (props) => {
|
|
|
400
400
|
React.createElement(Box, { as: 'div', ...headerProps, className: cx('iui-table-header', headerProps?.className) },
|
|
401
401
|
React.createElement(Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
|
|
402
402
|
const { onClick, ...restSortProps } = column.getSortByToggleProps();
|
|
403
|
+
const columnHasExpanders = hasAnySubRows &&
|
|
404
|
+
index ===
|
|
405
|
+
headerGroup.headers.findIndex((c) => c.id !== SELECTION_CELL_ID);
|
|
403
406
|
const columnProps = column.getHeaderProps({
|
|
404
407
|
...restSortProps,
|
|
405
408
|
className: cx('iui-table-cell', {
|
|
@@ -409,6 +412,7 @@ export const Table = (props) => {
|
|
|
409
412
|
}, column.columnClassName),
|
|
410
413
|
style: {
|
|
411
414
|
...getCellStyle(column, !!state.isTableResizing),
|
|
415
|
+
...(columnHasExpanders && getSubRowStyle({ density })),
|
|
412
416
|
...getStickyStyle(column, visibleColumns),
|
|
413
417
|
flexWrap: 'unset',
|
|
414
418
|
},
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import cx from 'classnames';
|
|
7
|
-
import { getCellStyle, getStickyStyle } from './utils.js';
|
|
7
|
+
import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
|
|
8
8
|
import { SubRowExpander } from './SubRowExpander.js';
|
|
9
9
|
import { SELECTION_CELL_ID } from './columns/index.js';
|
|
10
10
|
import { DefaultCell } from './cells/index.js';
|
|
@@ -13,34 +13,19 @@ export const TableCell = (props) => {
|
|
|
13
13
|
const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
|
|
14
14
|
const hasSubRowExpander = cellIndex ===
|
|
15
15
|
cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
|
|
16
|
-
const getSubRowStyle = () => {
|
|
17
|
-
if (!tableHasSubRows || !hasSubRowExpander) {
|
|
18
|
-
return undefined;
|
|
19
|
-
}
|
|
20
|
-
// If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
|
|
21
|
-
const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
|
|
22
|
-
let cellPadding = 16;
|
|
23
|
-
let expanderMargin = 8;
|
|
24
|
-
if (density === 'condensed') {
|
|
25
|
-
cellPadding = 12;
|
|
26
|
-
expanderMargin = 4;
|
|
27
|
-
}
|
|
28
|
-
else if (density === 'extra-condensed') {
|
|
29
|
-
cellPadding = 8;
|
|
30
|
-
expanderMargin = 4;
|
|
31
|
-
}
|
|
32
|
-
const multiplier = 26 + expanderMargin; // 26 = expander width
|
|
33
|
-
return {
|
|
34
|
-
paddingInlineStart: cellPadding + dynamicMargin * multiplier,
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
16
|
const cellElementProps = cell.getCellProps({
|
|
38
17
|
className: cx('iui-table-cell', cell.column.cellClassName, {
|
|
39
18
|
'iui-table-cell-sticky': !!cell.column.sticky,
|
|
40
19
|
}),
|
|
41
20
|
style: {
|
|
42
21
|
...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
|
|
43
|
-
...
|
|
22
|
+
...(tableHasSubRows &&
|
|
23
|
+
hasSubRowExpander &&
|
|
24
|
+
getSubRowStyle({
|
|
25
|
+
density,
|
|
26
|
+
// If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
|
|
27
|
+
depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
|
|
28
|
+
})),
|
|
44
29
|
...getStickyStyle(cell.column, tableInstance.visibleColumns),
|
|
45
30
|
},
|
|
46
31
|
});
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
import type { ColumnInstance } from '../../react-table/react-table.js';
|
|
2
2
|
export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
|
|
3
3
|
export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
|
|
4
|
+
export declare const getSubRowStyle: ({ density, depth }: {
|
|
5
|
+
density?: string | undefined;
|
|
6
|
+
depth?: number | undefined;
|
|
7
|
+
}) => {
|
|
8
|
+
paddingInlineStart: number;
|
|
9
|
+
};
|
package/esm/core/Table/utils.js
CHANGED
|
@@ -43,3 +43,19 @@ export const getStickyStyle = (column, columnList) => {
|
|
|
43
43
|
'--iui-table-sticky-right': column.sticky === 'right' ? `${right}px` : undefined,
|
|
44
44
|
};
|
|
45
45
|
};
|
|
46
|
+
export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
|
|
47
|
+
let cellPadding = 16;
|
|
48
|
+
let expanderMargin = 8;
|
|
49
|
+
if (density === 'condensed') {
|
|
50
|
+
cellPadding = 12;
|
|
51
|
+
expanderMargin = 4;
|
|
52
|
+
}
|
|
53
|
+
else if (density === 'extra-condensed') {
|
|
54
|
+
cellPadding = 8;
|
|
55
|
+
expanderMargin = 4;
|
|
56
|
+
}
|
|
57
|
+
const multiplier = 26 + expanderMargin; // 26 = expander width
|
|
58
|
+
return {
|
|
59
|
+
paddingInlineStart: cellPadding + depth * multiplier,
|
|
60
|
+
};
|
|
61
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/itwinui-react",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.1",
|
|
4
4
|
"author": "Bentley Systems",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"tslib": "^2.6.0"
|
|
86
86
|
},
|
|
87
87
|
"devDependencies": {
|
|
88
|
-
"@itwin/itwinui-css": "^2.2.
|
|
88
|
+
"@itwin/itwinui-css": "^2.2.1",
|
|
89
89
|
"@itwin/itwinui-variables": "3.0.0",
|
|
90
90
|
"@swc/cli": "^0.1.62",
|
|
91
91
|
"@swc/core": "^1.3.68",
|
package/styles.css
CHANGED
|
@@ -437,21 +437,21 @@
|
|
|
437
437
|
}
|
|
438
438
|
|
|
439
439
|
@layer itwinui.v3{
|
|
440
|
-
._iui3-calendar-day-outside-month-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-outside-month-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-outside-month-today:hover{background-color:var(--iui-color-background-hover)}._iui3-calendar-day-range-start,._iui3-calendar-day-range-start-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);cursor:pointer;border-start-end-radius:0;border-end-end-radius:0;block-size:36px;inline-size:40px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-start:focus,._iui3-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range-start:focus-visible,._iui3-calendar-day-range-start-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-start:focus,._iui3-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}._iui3-calendar-day-range-start-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-start-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-start-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}._iui3-calendar-day-range-start-today:hover:before{background-color:initial}._iui3-calendar-day-range-start-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}._iui3-calendar-day-range-end,._iui3-calendar-day-range-end-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);border-start-start-radius:0;border-end-start-radius:0;block-size:36px;inline-size:40px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-end:focus,._iui3-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range-end:focus-visible,._iui3-calendar-day-range-end-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-end:focus,._iui3-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}._iui3-calendar-day-range-end-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-end-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-end-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}._iui3-calendar-day-range-end-today:hover:before{background-color:initial}._iui3-calendar-day-range-end-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}._iui3-calendar-day-range,._iui3-calendar-day-range-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;background-color:var(--iui-color-background-accent-muted);border-radius:0;block-size:36px;inline-size:40px}._iui3-calendar-day-range:focus-visible,._iui3-calendar-day-range-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-calendar-day-range:focus,._iui3-calendar-day-range-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range:hover,._iui3-calendar-day-range-today:hover{font-weight:var(--iui-font-weight-semibold);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}._iui3-calendar-day-range-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-today:hover{background-color:var(--iui-color-background-hover);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}._iui3-calendar-day-range-today:before{border-color:var(--iui-color-border-accent)}._iui3-dialog-wrapper{pointer-events:none;z-index:999;isolation:isolate;block-size:100%;inline-size:100%;position:fixed;inset-block-start:0;inset-inline-start:0;overflow:hidden;transform:translate(0)}._iui3-dialog-wrapper[data-iui-relative=true]{position:absolute}._iui3-dialog{z-index:999;isolation:isolate;border-radius:var(--iui-border-radius-1);box-shadow:var(--iui-shadow-5);padding-block:var(--iui-size-s);padding-inline:var(--iui-size-m);pointer-events:auto;background-color:var(--iui-color-background);transition:visibility var(--iui-duration-0)linear,opacity var(--iui-duration-1)ease-out;transition-delay:var(--iui-duration-1),var(--iui-duration-0);flex-direction:column;display:flex;position:fixed
|
|
440
|
+
._iui3-calendar-day-outside-month-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-outside-month-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-outside-month-today:hover{background-color:var(--iui-color-background-hover)}._iui3-calendar-day-range-start,._iui3-calendar-day-range-start-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);cursor:pointer;border-start-end-radius:0;border-end-end-radius:0;block-size:36px;inline-size:40px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-start:focus,._iui3-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range-start:focus-visible,._iui3-calendar-day-range-start-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-start:focus,._iui3-calendar-day-range-start-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}._iui3-calendar-day-range-start-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-start-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-start-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}._iui3-calendar-day-range-start-today:hover:before{background-color:initial}._iui3-calendar-day-range-start-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}._iui3-calendar-day-range-end,._iui3-calendar-day-range-end-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;font-weight:var(--iui-font-weight-semibold);background-color:var(--iui-color-background-accent);color:var(--iui-color-white);border-start-start-radius:0;border-end-start-radius:0;block-size:36px;inline-size:40px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-end:focus,._iui3-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range-end:focus-visible,._iui3-calendar-day-range-end-today:focus-visible{outline:1px solid var(--iui-color-white);outline-offset:-3px}@supports not selector(*:focus-visible){._iui3-calendar-day-range-end:focus,._iui3-calendar-day-range-end-today:focus{outline:1px solid var(--iui-color-white);outline-offset:-3px}}._iui3-calendar-day-range-end-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-end-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-end-today:hover{background-color:var(--iui-color-background-hover);background-color:var(--iui-color-background-accent);color:var(--iui-color-white)}._iui3-calendar-day-range-end-today:hover:before{background-color:initial}._iui3-calendar-day-range-end-today:before{border-color:rgba(255,255,255,var(--iui-opacity-4))}._iui3-calendar-day-range,._iui3-calendar-day-range-today{cursor:pointer;text-align:center;border-radius:var(--iui-border-radius-1);font-variant-numeric:tabular-nums;background-color:var(--iui-color-background-accent-muted);border-radius:0;block-size:36px;inline-size:40px}._iui3-calendar-day-range:focus-visible,._iui3-calendar-day-range-today:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-calendar-day-range:focus,._iui3-calendar-day-range-today:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-calendar-day-range:hover,._iui3-calendar-day-range-today:hover{font-weight:var(--iui-font-weight-semibold);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}._iui3-calendar-day-range-today{font-weight:var(--iui-font-weight-semibold);position:relative}._iui3-calendar-day-range-today:before{content:"";border-radius:var(--iui-border-radius-round);border:2px solid var(--iui-color-border);block-size:32px;inline-size:32px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._iui3-calendar-day-range-today:hover{background-color:var(--iui-color-background-hover);background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}._iui3-calendar-day-range-today:before{border-color:var(--iui-color-border-accent)}._iui3-dialog-wrapper{pointer-events:none;z-index:999;isolation:isolate;block-size:100%;inline-size:100%;position:fixed;inset-block-start:0;inset-inline-start:0;overflow:hidden;transform:translate(0)}._iui3-dialog-wrapper[data-iui-relative=true]{position:absolute}._iui3-dialog{z-index:999;isolation:isolate;border-radius:var(--iui-border-radius-1);box-shadow:var(--iui-shadow-5);padding-block:var(--iui-size-s);padding-inline:var(--iui-size-m);pointer-events:auto;background-color:var(--iui-color-background);transition:visibility var(--iui-duration-0)linear,opacity var(--iui-duration-1)ease-out;transition-delay:var(--iui-duration-1),var(--iui-duration-0);flex-direction:column;display:flex;position:fixed}
|
|
441
441
|
}
|
|
442
442
|
|
|
443
443
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-dialog{border:1px solid}}
|
|
444
444
|
}
|
|
445
445
|
|
|
446
446
|
@layer itwinui.v3{
|
|
447
|
-
._iui3-dialog:
|
|
447
|
+
._iui3-dialog:not(._iui3-dialog-visible){visibility:hidden;opacity:0}._iui3-dialog._iui3-dialog-visible{transition-delay:var(--iui-duration-0)}._iui3-dialog-default{min-block-size:7.75rem;max-block-size:100vh;min-inline-size:min(100%,380px);max-inline-size:max(50%,380px);max-block-size:100dvh}._iui3-dialog-default:not([data-iui-placement]){inset-block-start:33%;inset-inline-start:50%;transform:translate(-50%,-33%)}._iui3-dialog-default[data-iui-placement=top-left]{margin-block-start:var(--iui-size-m);margin-inline-start:var(--iui-size-s);inset-block-start:0;inset-inline-start:0}._iui3-dialog-default[data-iui-placement=top-right]{margin-block-start:var(--iui-size-m);margin-inline-end:var(--iui-size-s);inset-block-start:0;inset-inline-end:0}._iui3-dialog-default[data-iui-placement=bottom-left]{margin-block-end:var(--iui-size-m);margin-inline-start:var(--iui-size-s);inset-block-end:0;inset-inline-start:0}._iui3-dialog-default[data-iui-placement=bottom-right]{margin-block-end:var(--iui-size-m);margin-inline-end:var(--iui-size-s);inset-block-end:0;inset-inline-end:0}._iui3-dialog-full-page{block-size:100vh;block-size:100dvb;inline-size:100vw;will-change:transform;border-radius:0;inline-size:100vi;inset-block-start:0;inset-inline-start:0}._iui3-dialog-full-page:not(._iui3-dialog-visible){transform:translateY(100%)}
|
|
448
448
|
}
|
|
449
449
|
|
|
450
450
|
@layer itwinui.v3{@media (prefers-reduced-motion:no-preference){._iui3-dialog-full-page{transition:visibility var(--iui-duration-0)linear var(--iui-duration-2),opacity var(--iui-duration-0)linear var(--iui-duration-2),transform var(--iui-duration-1)ease-in}._iui3-dialog-full-page._iui3-dialog-visible{transition:transform var(--iui-duration-2)ease-out}}
|
|
451
451
|
}
|
|
452
452
|
|
|
453
453
|
@layer itwinui.v3{
|
|
454
|
-
._iui3-dialog-draggable{border:1px solid var(--iui-color-border)}._iui3-dialog-animation-enter{opacity:0;transform:translateY(100%)}._iui3-dialog-animation-enter-active{opacity:1;transform:translateY(0)}._iui3-dialog-title{font-size:inherit;white-space:nowrap;text-overflow:ellipsis;align-items:center;margin-inline-end:auto;display:flex;overflow:hidden}._iui3-dialog-title-bar{font-size:var(--iui-font-size-3);align-items:center;margin-block-end:var(--iui-size-s);display:flex}._iui3-dialog-title-bar-filled{font-size:var(--iui-font-size-2);padding-block:calc(var(--iui-size-s)*.5);padding-inline:var(--iui-size-m);margin-inline:calc(0px - var(--iui-size-m));margin-block:calc(0px - var(--iui-size-s))var(--iui-size-s);cursor:grab;background-color:var(--iui-color-background-backdrop);border-block-end:1px solid var(--iui-color-border)}._iui3-dialog-title-bar-filled:active{cursor:grabbing}._iui3-dialog-content{margin-inline:calc(0px - var(--iui-size-m));padding-inline:var(--iui-size-m);flex-grow:2;overflow-y:auto}._iui3-dialog-button-bar{justify-content:flex-end;align-items:center;gap:var(--iui-size-xs);margin-block-start:var(--iui-size-s);display:flex}._iui3-expandable-block{--_iui-expandable-block-expander-icon-fill:var(--iui-color-icon);--_iui-expandable-block-expander-icon-transform:none;--_iui-expandable-block-border:1px solid var(--_iui-expandable-block-border-color);--_iui-expandable-block-border-color:var(--iui-color-border);--_iui-expandable-block-background-color:var(--iui-color-background);--_iui-expandable-block-content-padding:var(--iui-size-s);--_iui-expandable-block-header-background-color-disabled:var(--iui-color-background-disabled);--_iui-expandable-block-header-background-color-hover:var(--iui-color-background-hover);--_iui-expandable-block-header-focus-offset:-2px;--_iui-expandable-block-header-focus-thickness:2px;--_iui-expandable-block-expander-icon-size:var(--iui-size-m);--_iui-expandable-block-header-gap:var(--iui-size-s);--_iui-expandable-block-header-padding:var(--iui-size-s);isolation:isolate;border-radius:var(--iui-border-radius-1);flex-direction:column;inline-size:100%;display:flex}._iui3-expandable-block[data-iui-expanded=true]{--_iui-expandable-block-header-bottom-border-radius:0;--_iui-expandable-block-expander-icon-transform:rotate(90deg)}._iui3-expandable-block[data-iui-size=small]{--_iui-expandable-block-expander-icon-size:var(--iui-size-s);--_iui-expandable-block-header-gap:var(--iui-size-xs);--_iui-expandable-block-header-padding:calc(var(--iui-size-s)*.5)var(--iui-size-xs)}._iui3-expandable-block[data-iui-variant=borderless]{--_iui-expandable-block-border:none;--_iui-expandable-block-background-color:transparent;--_iui-expandable-block-content-padding:none;--_iui-expandable-block-header-background-color-disabled:transparent;--_iui-expandable-block-header-focus-offset:-1px;--_iui-expandable-block-header-focus-thickness:1px}._iui3-expandable-block[data-iui-variant=borderless][data-iui-expanded=true]{--_iui-expandable-block-header-bottom-border-radius:inherit}._iui3-expandable-header{vertical-align:baseline;gap:var(--_iui-expandable-block-header-gap);padding:0;padding:var(--_iui-expandable-block-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--iui-color-text);font:inherit;z-index:1;text-align:start;background-color:var(--_iui-expandable-block-background-color);border:none;border:var(--_iui-expandable-block-border);border-radius:inherit;transition:background-color var(--iui-duration-1)ease-out;border-end-end-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);border-end-start-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);align-items:center;margin:0;display:flex}._iui3-expandable-header:focus-visible{outline:var(--_iui-expandable-block-header-focus-thickness)solid var(--iui-color-border-accent);outline-offset:var(--_iui-expandable-block-header-focus-offset)}@supports not selector(*:focus-visible){._iui3-expandable-header:focus{outline:var(--_iui-expandable-block-header-focus-thickness)solid var(--iui-color-border-accent);outline-offset:var(--_iui-expandable-block-header-focus-offset)}}
|
|
454
|
+
._iui3-dialog-draggable{border:1px solid var(--iui-color-border)}._iui3-dialog-animation-enter{opacity:0;transform:translateY(100%)}._iui3-dialog-animation-enter-active{opacity:1;transform:translateY(0)}._iui3-dialog-title{font-size:inherit;white-space:nowrap;text-overflow:ellipsis;align-items:center;margin-inline-end:auto;display:flex;overflow:hidden}._iui3-dialog-title-bar{font-size:var(--iui-font-size-3);align-items:center;margin-block-end:var(--iui-size-s);display:flex}._iui3-dialog-title-bar-filled{font-size:var(--iui-font-size-2);padding-block:calc(var(--iui-size-s)*.5);padding-inline:var(--iui-size-m);margin-inline:calc(0px - var(--iui-size-m));margin-block:calc(0px - var(--iui-size-s))var(--iui-size-s);cursor:grab;background-color:var(--iui-color-background-backdrop);border-block-end:1px solid var(--iui-color-border);border-start-start-radius:var(--iui-border-radius-1);border-start-end-radius:var(--iui-border-radius-1)}._iui3-dialog-title-bar-filled:active{cursor:grabbing}._iui3-dialog-content{margin-inline:calc(0px - var(--iui-size-m));padding-inline:var(--iui-size-m);flex-grow:2;overflow-y:auto}._iui3-dialog-button-bar{justify-content:flex-end;align-items:center;gap:var(--iui-size-xs);margin-block-start:var(--iui-size-s);display:flex}._iui3-expandable-block{--_iui-expandable-block-expander-icon-fill:var(--iui-color-icon);--_iui-expandable-block-expander-icon-transform:none;--_iui-expandable-block-border:1px solid var(--_iui-expandable-block-border-color);--_iui-expandable-block-border-color:var(--iui-color-border);--_iui-expandable-block-background-color:var(--iui-color-background);--_iui-expandable-block-content-padding:var(--iui-size-s);--_iui-expandable-block-header-background-color-disabled:var(--iui-color-background-disabled);--_iui-expandable-block-header-background-color-hover:var(--iui-color-background-hover);--_iui-expandable-block-header-focus-offset:-2px;--_iui-expandable-block-header-focus-thickness:2px;--_iui-expandable-block-expander-icon-size:var(--iui-size-m);--_iui-expandable-block-header-gap:var(--iui-size-s);--_iui-expandable-block-header-padding:var(--iui-size-s);isolation:isolate;border-radius:var(--iui-border-radius-1);flex-direction:column;inline-size:100%;display:flex}._iui3-expandable-block[data-iui-expanded=true]{--_iui-expandable-block-header-bottom-border-radius:0;--_iui-expandable-block-expander-icon-transform:rotate(90deg)}._iui3-expandable-block[data-iui-size=small]{--_iui-expandable-block-expander-icon-size:var(--iui-size-s);--_iui-expandable-block-header-gap:var(--iui-size-xs);--_iui-expandable-block-header-padding:calc(var(--iui-size-s)*.5)var(--iui-size-xs)}._iui3-expandable-block[data-iui-variant=borderless]{--_iui-expandable-block-border:none;--_iui-expandable-block-background-color:transparent;--_iui-expandable-block-content-padding:none;--_iui-expandable-block-header-background-color-disabled:transparent;--_iui-expandable-block-header-focus-offset:-1px;--_iui-expandable-block-header-focus-thickness:1px}._iui3-expandable-block[data-iui-variant=borderless][data-iui-expanded=true]{--_iui-expandable-block-header-bottom-border-radius:inherit}._iui3-expandable-header{vertical-align:baseline;gap:var(--_iui-expandable-block-header-gap);padding:0;padding:var(--_iui-expandable-block-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--iui-color-text);font:inherit;z-index:1;text-align:start;background-color:var(--_iui-expandable-block-background-color);border:none;border:var(--_iui-expandable-block-border);border-radius:inherit;transition:background-color var(--iui-duration-1)ease-out;border-end-end-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);border-end-start-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);align-items:center;margin:0;display:flex}._iui3-expandable-header:focus-visible{outline:var(--_iui-expandable-block-header-focus-thickness)solid var(--iui-color-border-accent);outline-offset:var(--_iui-expandable-block-header-focus-offset)}@supports not selector(*:focus-visible){._iui3-expandable-header:focus{outline:var(--_iui-expandable-block-header-focus-thickness)solid var(--iui-color-border-accent);outline-offset:var(--_iui-expandable-block-header-focus-offset)}}
|
|
455
455
|
}
|
|
456
456
|
|
|
457
457
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-expandable-header{--_iui-expandable-block-expander-icon-fill:CanvasText}}
|
|
@@ -699,14 +699,14 @@
|
|
|
699
699
|
}
|
|
700
700
|
|
|
701
701
|
@layer itwinui.v3{
|
|
702
|
-
._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-icon-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-icon-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-
|
|
702
|
+
._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-icon-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-icon-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-uxjrdyq;-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-uxjrdyq{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}
|
|
703
703
|
}
|
|
704
704
|
|
|
705
705
|
@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}}
|
|
706
706
|
}
|
|
707
707
|
|
|
708
708
|
@layer itwinui.v3{
|
|
709
|
-
._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-
|
|
709
|
+
._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-uxjrdyr}@keyframes _iui3-uxjrdyr{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}
|
|
710
710
|
}
|
|
711
711
|
|
|
712
712
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-radio-tile-input:checked{outline-color:Highlight}}
|