@carbon/ibm-products 2.0.0-rc.0 → 2.0.0-rc.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/css/index-full-carbon.css +41 -5
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +3 -3
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +41 -5
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +41 -5
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +140 -12
- package/es/components/Datagrid/useActionsColumn.js +31 -6
- package/es/components/Datagrid/useSelectRows.js +1 -1
- package/es/components/Datagrid/useStickyColumn.js +3 -0
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +149 -10
- package/lib/components/Datagrid/useActionsColumn.js +31 -6
- package/lib/components/Datagrid/useSelectRows.js +1 -1
- package/lib/components/Datagrid/useStickyColumn.js +3 -0
- package/package.json +2 -2
- package/scss/components/AboutModal/_about-modal.scss +2 -1
- package/scss/components/Datagrid/_datagrid.scss +8 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +42 -2
- package/scss/components/InlineEdit/_inline-edit.scss +1 -1
@@ -2,33 +2,172 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
8
10
|
exports.default = void 0;
|
9
11
|
|
10
|
-
var
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
|
+
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
15
|
+
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
17
|
+
|
18
|
+
var _iconsReact = require("@carbon/icons-react");
|
11
19
|
|
12
20
|
var _react2 = require("@carbon/react");
|
13
21
|
|
22
|
+
var _reactResizeDetector = require("react-resize-detector");
|
23
|
+
|
24
|
+
var _ButtonMenu = require("../../ButtonMenu");
|
25
|
+
|
14
26
|
var _settings = require("../../../settings");
|
15
27
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
28
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
29
|
+
|
30
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
31
|
+
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
33
|
+
|
34
|
+
/**
|
35
|
+
* Copyright IBM Corp. 2022, 2022
|
36
|
+
*
|
37
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
38
|
+
* LICENSE file in the root directory of this source tree.
|
22
39
|
*/
|
23
40
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
24
41
|
var TableToolbar = _react2.DataTable.TableToolbar;
|
25
42
|
|
43
|
+
var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
|
44
|
+
var _useState = (0, _react.useState)(false),
|
45
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
46
|
+
displayAllInMenu = _useState2[0],
|
47
|
+
setDisplayAllInMenu = _useState2[1];
|
48
|
+
|
49
|
+
var _useState3 = (0, _react.useState)(null),
|
50
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
51
|
+
initialListWidth = _useState4[0],
|
52
|
+
setInitialListWidth = _useState4[1];
|
53
|
+
|
54
|
+
var _useState5 = (0, _react.useState)(false),
|
55
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
56
|
+
receivedInitialWidth = _useState6[0],
|
57
|
+
setReceivedInitialWidth = _useState6[1];
|
58
|
+
|
59
|
+
var selectedFlatRows = datagridState.selectedFlatRows,
|
60
|
+
toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
|
61
|
+
toolbarBatchActions = datagridState.toolbarBatchActions;
|
62
|
+
var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
|
63
|
+
// used to measure when all items are put inside
|
64
|
+
// the ButtonMenu
|
65
|
+
|
66
|
+
(0, _react.useEffect)(function () {
|
67
|
+
if (totalSelected === 1 && !receivedInitialWidth) {
|
68
|
+
var batchActionListWidth = ref.current.querySelector(".".concat(_settings.carbon.prefix, "--action-list")).offsetWidth;
|
69
|
+
setInitialListWidth(batchActionListWidth);
|
70
|
+
setReceivedInitialWidth(true);
|
71
|
+
}
|
72
|
+
}, [totalSelected, receivedInitialWidth, ref]);
|
73
|
+
(0, _react.useEffect)(function () {
|
74
|
+
var summaryWidth = ref.current.querySelector(".".concat(_settings.carbon.prefix, "--batch-summary")).offsetWidth;
|
75
|
+
|
76
|
+
if (width < summaryWidth + initialListWidth + 32) {
|
77
|
+
setDisplayAllInMenu(true);
|
78
|
+
} else {
|
79
|
+
setDisplayAllInMenu(false);
|
80
|
+
}
|
81
|
+
}, [width, ref, initialListWidth]); // Render batch actions in ButtonMenu
|
82
|
+
|
83
|
+
var renderBatchActionOverflow = function renderBatchActionOverflow() {
|
84
|
+
var minWidthBeforeOverflowIcon = 380; // Do not render ButtonMenu when there are 3 or less items
|
85
|
+
// and if there is enough available space to render all the items
|
86
|
+
|
87
|
+
if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
|
88
|
+
return null;
|
89
|
+
}
|
90
|
+
|
91
|
+
return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
|
92
|
+
label: width > minWidthBeforeOverflowIcon ? 'More' : null,
|
93
|
+
renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add : _iconsReact.OverflowMenuVertical,
|
94
|
+
className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
|
95
|
+
menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
|
96
|
+
flipped: true
|
97
|
+
}, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
|
98
|
+
if (index < 2) {
|
99
|
+
if (displayAllInMenu) {
|
100
|
+
return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
|
101
|
+
key: "".concat(batchAction.label, "-").concat(index),
|
102
|
+
itemText: batchAction.label,
|
103
|
+
onClick: function onClick() {
|
104
|
+
batchAction.onClick();
|
105
|
+
|
106
|
+
if (batchAction.type === 'select_all') {
|
107
|
+
toggleAllRowsSelected(true);
|
108
|
+
}
|
109
|
+
}
|
110
|
+
});
|
111
|
+
}
|
112
|
+
|
113
|
+
return null;
|
114
|
+
}
|
115
|
+
|
116
|
+
return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
|
117
|
+
key: "".concat(batchAction.label, "-").concat(index),
|
118
|
+
itemText: batchAction.label,
|
119
|
+
onClick: function onClick() {
|
120
|
+
batchAction.onClick();
|
121
|
+
|
122
|
+
if (batchAction.type === 'select_all') {
|
123
|
+
toggleAllRowsSelected(true);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
});
|
127
|
+
}));
|
128
|
+
}; // Only display the first two batch actions, the rest are
|
129
|
+
// displayed inside of the ButtonMenu if there are more than
|
130
|
+
// 3 batch actions
|
131
|
+
|
132
|
+
|
133
|
+
return /*#__PURE__*/_react.default.createElement(_react2.TableBatchActions, {
|
134
|
+
shouldShowBatchActions: totalSelected > 0,
|
135
|
+
totalSelected: totalSelected,
|
136
|
+
onCancel: function onCancel() {
|
137
|
+
return toggleAllRowsSelected(false);
|
138
|
+
}
|
139
|
+
}, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
|
140
|
+
if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {
|
141
|
+
return /*#__PURE__*/_react.default.createElement(_react2.TableBatchAction, {
|
142
|
+
key: "".concat(batchAction.label, "-").concat(index),
|
143
|
+
renderIcon: batchAction.renderIcon,
|
144
|
+
onClick: function onClick() {
|
145
|
+
batchAction.onClick();
|
146
|
+
|
147
|
+
if (batchAction.type === 'select_all') {
|
148
|
+
toggleAllRowsSelected(true);
|
149
|
+
}
|
150
|
+
},
|
151
|
+
iconDescription: batchAction.label
|
152
|
+
}, batchAction.label);
|
153
|
+
}
|
154
|
+
})), renderBatchActionOverflow());
|
155
|
+
};
|
156
|
+
|
26
157
|
var DatagridToolbar = function DatagridToolbar(datagridState) {
|
158
|
+
var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)(),
|
159
|
+
width = _useResizeDetector.width,
|
160
|
+
ref = _useResizeDetector.ref;
|
161
|
+
|
27
162
|
var DatagridActions = datagridState.DatagridActions,
|
28
|
-
DatagridBatchActions = datagridState.DatagridBatchActions
|
29
|
-
|
163
|
+
DatagridBatchActions = datagridState.DatagridBatchActions,
|
164
|
+
batchActions = datagridState.batchActions;
|
165
|
+
return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
|
166
|
+
ref: ref,
|
167
|
+
className: "".concat(blockClass, "__table-toolbar")
|
168
|
+
}, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : /*#__PURE__*/_react.default.createElement("div", {
|
30
169
|
className: "".concat(blockClass, "__table-toolbar")
|
31
|
-
}, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)))
|
170
|
+
}, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
|
32
171
|
};
|
33
172
|
|
34
173
|
var _default = DatagridToolbar;
|
@@ -40,19 +40,44 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
40
40
|
|
41
41
|
return [props, {
|
42
42
|
children: /*#__PURE__*/_react.default.createElement("div", {
|
43
|
-
className: "".concat(blockClass, "__actions-column-
|
43
|
+
className: "".concat(blockClass, "__actions-column-contents")
|
44
44
|
}, isFetching && /*#__PURE__*/_react.default.createElement(_react2.IconSkeleton, {
|
45
45
|
className: "".concat(blockClass, "__actions-column-loading")
|
46
|
-
}), !isFetching && /*#__PURE__*/_react.default.createElement(
|
46
|
+
}), !isFetching && rowActions.length <= 2 && /*#__PURE__*/_react.default.createElement("div", {
|
47
|
+
className: "".concat(blockClass, "_actions-column"),
|
48
|
+
style: {
|
49
|
+
display: 'flex'
|
50
|
+
}
|
51
|
+
}, rowActions.map(function (action) {
|
52
|
+
var id = action.id,
|
53
|
+
itemText = action.itemText,
|
54
|
+
_onClick = action.onClick,
|
55
|
+
icon = action.icon;
|
56
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
57
|
+
className: "".concat(blockClass, "__actions-column-button"),
|
58
|
+
key: ""
|
59
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
60
|
+
renderIcon: icon,
|
61
|
+
hasIconOnly: true,
|
62
|
+
light: true,
|
63
|
+
iconDescription: itemText,
|
64
|
+
kind: "ghost",
|
65
|
+
onClick: function onClick(e) {
|
66
|
+
e.stopPropagation();
|
67
|
+
|
68
|
+
_onClick(id, row, e);
|
69
|
+
}
|
70
|
+
}));
|
71
|
+
})), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
47
72
|
size: "sm",
|
48
73
|
light: true,
|
49
74
|
flipped: true,
|
50
75
|
onClick: function onClick(e) {
|
51
|
-
|
76
|
+
e.stopPropagation();
|
52
77
|
}
|
53
78
|
}, rowActions.map(function (action) {
|
54
79
|
var id = action.id,
|
55
|
-
|
80
|
+
_onClick2 = action.onClick,
|
56
81
|
shouldHideMenuItem = action.shouldHideMenuItem,
|
57
82
|
shouldDisableMenuItem = action.shouldDisableMenuItem,
|
58
83
|
disabled = action.disabled,
|
@@ -71,11 +96,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
71
96
|
onClick: function onClick(e) {
|
72
97
|
e.stopPropagation();
|
73
98
|
|
74
|
-
|
99
|
+
_onClick2(id, row, e);
|
75
100
|
},
|
76
101
|
key: id
|
77
102
|
}));
|
78
|
-
}))),
|
103
|
+
})))),
|
79
104
|
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__cell"), true), _cx))
|
80
105
|
}];
|
81
106
|
}
|
@@ -69,7 +69,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
|
|
69
69
|
var getRowProps = function getRowProps(props, _ref) {
|
70
70
|
var row = _ref.row;
|
71
71
|
return [props, {
|
72
|
-
className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected") : '')
|
72
|
+
className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
|
73
73
|
}];
|
74
74
|
};
|
75
75
|
|
@@ -123,6 +123,9 @@ var useStickyColumn = function useStickyColumn(hooks) {
|
|
123
123
|
if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
|
124
124
|
var _temp = newHeaders[spacerIdx];
|
125
125
|
newHeaders[spacerIdx] = newHeaders[stickyIdx];
|
126
|
+
newHeaders[spacerIdx].canResize = false;
|
127
|
+
newHeaders[spacerIdx].disableResizing = true;
|
128
|
+
delete newHeaders[spacerIdx].getResizerProps;
|
126
129
|
newHeaders[stickyIdx] = _temp;
|
127
130
|
}
|
128
131
|
});
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.0.0-rc.
|
4
|
+
"version": "2.0.0-rc.1",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -92,5 +92,5 @@
|
|
92
92
|
"react": "^16.8.6 || ^17.0.1",
|
93
93
|
"react-dom": "^16.8.6 || ^17.0.1"
|
94
94
|
},
|
95
|
-
"gitHead": "
|
95
|
+
"gitHead": "9399021bf42348f451fa0c51089d8ff60e791ab9"
|
96
96
|
}
|
@@ -54,7 +54,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
|
|
54
54
|
|
55
55
|
.#{$block-class}.#{$block-class}--with-tabs
|
56
56
|
.#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
|
57
|
-
|
57
|
+
// stylelint-disable-next-line carbon/layout-token-use
|
58
|
+
bottom: calc(#{$spacing-09} + #{$spacing-08});
|
58
59
|
}
|
59
60
|
|
60
61
|
.#{$block-class}
|
@@ -6,6 +6,7 @@
|
|
6
6
|
//
|
7
7
|
|
8
8
|
// Standard imports.
|
9
|
+
@use '@carbon/styles/scss/spacing' as *;
|
9
10
|
@use '../../global/styles/project-settings' as c4p-settings;
|
10
11
|
@use '../../global/styles/mixins';
|
11
12
|
|
@@ -31,6 +32,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
|
|
31
32
|
}
|
32
33
|
}
|
33
34
|
|
35
|
+
.#{$block-class}__datagridWrap
|
36
|
+
.#{c4p-settings.$carbon-prefix}--overflow-menu-options
|
37
|
+
> .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
|
38
|
+
left: $spacing-01;
|
39
|
+
width: 112px;
|
40
|
+
}
|
41
|
+
|
34
42
|
.#{$block-class}__datagridWrap-simple {
|
35
43
|
display: flex;
|
36
44
|
overflow: hidden;
|
@@ -454,11 +454,13 @@
|
|
454
454
|
}
|
455
455
|
}
|
456
456
|
|
457
|
-
.#{$block-class}
|
457
|
+
.#{$block-class}
|
458
|
+
.#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
|
458
459
|
position: relative;
|
459
460
|
}
|
460
461
|
|
461
|
-
.#{$block-class}
|
462
|
+
.#{$block-class}
|
463
|
+
.#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
|
462
464
|
position: absolute;
|
463
465
|
left: 0;
|
464
466
|
width: $spacing-02;
|
@@ -466,3 +468,41 @@
|
|
466
468
|
background-color: $background-brand;
|
467
469
|
content: '';
|
468
470
|
}
|
471
|
+
|
472
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
|
473
|
+
.#{c4p-settings.$carbon-prefix}--batch-summary__para {
|
474
|
+
white-space: nowrap;
|
475
|
+
}
|
476
|
+
|
477
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
|
478
|
+
.#{c4p-settings.$carbon-prefix}--batch-actions
|
479
|
+
.#{c4p-settings.$carbon-prefix}--batch-actions--active {
|
480
|
+
overflow-x: hidden;
|
481
|
+
}
|
482
|
+
|
483
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
|
484
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu {
|
485
|
+
display: flex;
|
486
|
+
min-width: $spacing-08;
|
487
|
+
justify-content: center;
|
488
|
+
margin-right: $spacing-04;
|
489
|
+
}
|
490
|
+
|
491
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
|
492
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__button-menu {
|
493
|
+
min-width: calc(#{$spacing-12} + #{$spacing-03});
|
494
|
+
}
|
495
|
+
|
496
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
|
497
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu
|
498
|
+
.#{c4p-settings.$pkg-prefix}--button-menu__trigger {
|
499
|
+
display: flex;
|
500
|
+
width: 100%;
|
501
|
+
min-width: $spacing-09;
|
502
|
+
justify-content: center;
|
503
|
+
padding: 0;
|
504
|
+
margin: 0;
|
505
|
+
.#{c4p-settings.$carbon-prefix}--btn__icon {
|
506
|
+
margin: 0;
|
507
|
+
}
|
508
|
+
}
|
@@ -25,7 +25,7 @@
|
|
25
25
|
@mixin input-outline($color: $focus) {
|
26
26
|
/* stylelint-disable-next-line carbon/theme-token-use */
|
27
27
|
outline: $spacing-01 solid $color;
|
28
|
-
outline-offset: calc(-1 * $spacing-01);
|
28
|
+
outline-offset: calc(-1 * #{$spacing-01});
|
29
29
|
|
30
30
|
@media screen and (prefers-contrast) {
|
31
31
|
outline-style: dotted;
|