@patternfly/react-styles 5.0.0 → 5.1.1-prerelease.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +10 -0
- package/css/components/AboutModalBox/about-modal-box.css +20 -13
- package/css/components/Accordion/accordion.css +30 -20
- package/css/components/ActionList/action-list.css +2 -2
- package/css/components/Alert/alert-group.css +7 -4
- package/css/components/Alert/alert.css +16 -13
- package/css/components/AppLauncher/app-launcher.css +32 -23
- package/css/components/BackToTop/back-to-top.css +2 -2
- package/css/components/Backdrop/backdrop.css +2 -2
- package/css/components/BackgroundImage/background-image.css +2 -2
- package/css/components/Badge/badge.css +2 -2
- package/css/components/Banner/banner.css +5 -2
- package/css/components/Breadcrumb/breadcrumb.css +6 -3
- package/css/components/Button/button.css +23 -17
- package/css/components/CalendarMonth/calendar-month.css +21 -15
- package/css/components/Card/card.css +21 -16
- package/css/components/Check/check.css +2 -2
- package/css/components/Chip/chip-group.css +6 -6
- package/css/components/Chip/chip.css +16 -9
- package/css/components/Chip/chip.d.ts +1 -0
- package/css/components/Chip/chip.js +1 -0
- package/css/components/Chip/chip.mjs +1 -0
- package/css/components/ClipboardCopy/clipboard-copy.css +16 -10
- package/css/components/CodeBlock/code-block.css +6 -3
- package/css/components/CodeEditor/code-editor.css +31 -22
- package/css/components/Content/content.css +33 -30
- package/css/components/ContextSelector/context-selector.css +41 -26
- package/css/components/DataList/data-list-grid.css +21 -49
- package/css/components/DataList/data-list.css +66 -84
- package/css/components/DatePicker/date-picker.css +8 -8
- package/css/components/DescriptionList/description-list.css +8 -5
- package/css/components/DragDrop/drag-drop.css +8 -8
- package/css/components/Drawer/drawer.css +75 -60
- package/css/components/Dropdown/dropdown.css +75 -66
- package/css/components/DualListSelector/dual-list-selector.css +20 -14
- package/css/components/EmptyState/empty-state.css +7 -4
- package/css/components/ExpandableSection/expandable-section.css +13 -10
- package/css/components/FileUpload/file-upload.css +9 -15
- package/css/components/Form/form.css +50 -50
- package/css/components/FormControl/form-control.css +21 -11
- package/css/components/HelperText/helper-text.css +1 -1
- package/css/components/Hint/hint.css +9 -6
- package/css/components/Icon/icon.css +1 -1
- package/css/components/InlineEdit/inline-edit.css +4 -4
- package/css/components/InputGroup/input-group.css +12 -6
- package/css/components/JumpLinks/jump-links.css +24 -24
- package/css/components/Label/label-group.css +13 -10
- package/css/components/Label/label.css +9 -9
- package/css/components/List/list.css +9 -9
- package/css/components/LogViewer/log-viewer.css +14 -14
- package/css/components/Login/login.css +36 -27
- package/css/components/Masthead/masthead.css +19 -22
- package/css/components/Menu/menu.css +69 -66
- package/css/components/MenuToggle/menu-toggle.css +41 -29
- package/css/components/ModalBox/modal-box.css +19 -19
- package/css/components/MultipleFileUpload/multiple-file-upload.css +11 -8
- package/css/components/Nav/nav.css +100 -93
- package/css/components/NotificationBadge/notification-badge.css +13 -7
- package/css/components/NotificationDrawer/notification-drawer.css +28 -19
- package/css/components/NumberInput/number-input.css +3 -3
- package/css/components/OptionsMenu/options-menu.css +43 -31
- package/css/components/OverflowMenu/overflow-menu.css +2 -2
- package/css/components/Page/page.css +119 -65
- package/css/components/Pagination/pagination.css +24 -18
- package/css/components/Panel/panel.css +13 -7
- package/css/components/Popover/popover.css +24 -21
- package/css/components/Progress/progress.css +7 -7
- package/css/components/ProgressStepper/progress-stepper.css +26 -20
- package/css/components/Radio/radio.css +4 -5
- package/css/components/Select/select.css +56 -47
- package/css/components/Sidebar/sidebar.css +11 -5
- package/css/components/SimpleList/simple-list.css +10 -4
- package/css/components/Skeleton/skeleton.css +2 -5
- package/css/components/SkipToContent/skip-to-content.css +3 -3
- package/css/components/Slider/slider.css +17 -20
- package/css/components/Switch/switch.css +5 -5
- package/css/components/TabContent/tab-content.css +4 -1
- package/css/components/Table/table-grid.css +256 -219
- package/css/components/Table/table-scrollable.css +2 -2
- package/css/components/Table/table-tree-view.css +107 -104
- package/css/components/Table/table.css +87 -69
- package/css/components/Tabs/tabs.css +66 -48
- package/css/components/TextInputGroup/text-input-group.css +15 -15
- package/css/components/Tile/tile.css +10 -10
- package/css/components/ToggleGroup/toggle-group.css +14 -11
- package/css/components/Toolbar/toolbar.css +44 -41
- package/css/components/Tooltip/tooltip.css +19 -16
- package/css/components/TreeView/tree-view.css +42 -27
- package/css/components/Wizard/wizard.css +47 -35
- package/css/docs/components/Button/examples/Button.css +2 -2
- package/css/docs/components/DragDrop/examples/DragDrop.css +2 -2
- package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
- package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
- package/css/docs/components/Nav/examples/Navigation.css +2 -2
- package/css/docs/components/Popover/examples/Popover.css +2 -2
- package/css/docs/components/Select/deprecated/Select.css +3 -3
- package/css/docs/components/Table/examples/Table.css +2 -2
- package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
- package/css/docs/components/Tile/examples/Tile.css +1 -1
- package/css/docs/demos/Card/examples/Card.css +3 -3
- package/css/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
- package/css/layouts/Flex/flex.css +115 -43
- package/css/utilities/Accessibility/accessibility.css +12 -12
- package/css/utilities/Spacing/spacing.css +720 -960
- package/package.json +3 -3
@@ -17,8 +17,8 @@
|
|
17
17
|
--pf-v5-c-table--cell--Overflow: visible;
|
18
18
|
--pf-v5-c-table--m-sticky-header--cell--ZIndex: var(--pf-v5-c-table--m-sticky-header__sticky-cell--ZIndex);
|
19
19
|
position: sticky;
|
20
|
-
|
21
|
-
|
20
|
+
inset-inline-start: var(--pf-v5-c-table__sticky-cell--Left);
|
21
|
+
inset-inline-end: var(--pf-v5-c-table__sticky-cell--Right);
|
22
22
|
z-index: var(--pf-v5-c-table__sticky-cell--ZIndex);
|
23
23
|
min-width: var(--pf-v5-c-table__sticky-cell--MinWidth);
|
24
24
|
background-color: var(--pf-v5-c-table__sticky-cell--BackgroundColor);
|
@@ -59,26 +59,29 @@
|
|
59
59
|
display: flex;
|
60
60
|
align-items: baseline;
|
61
61
|
min-width: 0;
|
62
|
-
padding-
|
63
|
-
margin-
|
64
|
-
text-align:
|
62
|
+
padding-inline-start: var(--pf-v5-c-table__tree-view-main--PaddingLeft);
|
63
|
+
margin-inline-start: var(--pf-v5-c-table__tree-view-main--MarginLeft);
|
64
|
+
text-align: start;
|
65
65
|
cursor: pointer;
|
66
66
|
}
|
67
67
|
.pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
|
68
68
|
position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
|
69
|
-
|
69
|
+
inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
|
70
70
|
transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
|
71
71
|
}
|
72
72
|
.pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
|
73
73
|
min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
|
74
74
|
}
|
75
75
|
.pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
|
76
|
-
margin-
|
76
|
+
margin-inline-end: var(--pf-v5-c-table__tree-view-main--c-table__check--MarginRight);
|
77
77
|
}
|
78
78
|
.pf-v5-c-table__tree-view-main > .pf-v5-c-table__check label {
|
79
|
-
padding-
|
80
|
-
padding-
|
81
|
-
margin
|
79
|
+
padding-inline-start: var(--pf-v5-c-table__tree-view-main--c-table__check--PaddingLeft);
|
80
|
+
padding-inline-end: var(--pf-v5-c-table__tree-view-main--c-table__check--PaddingRight);
|
81
|
+
margin-block-start: 0;
|
82
|
+
margin-block-end: 0;
|
83
|
+
margin-inline-start: 0;
|
84
|
+
margin-inline-end: calc(var(--pf-v5-c-table__tree-view-main--c-table__check--MarginRight) * -1);
|
82
85
|
}
|
83
86
|
|
84
87
|
.pf-v5-c-table__tree-view-text {
|
@@ -87,7 +90,7 @@
|
|
87
90
|
|
88
91
|
.pf-v5-c-table__tree-view-icon {
|
89
92
|
min-width: var(--pf-v5-c-table__tree-view-icon--MinWidth);
|
90
|
-
margin-
|
93
|
+
margin-inline-end: var(--pf-v5-c-table__tree-view-icon--MarginRight);
|
91
94
|
}
|
92
95
|
|
93
96
|
.pf-v5-c-table__tree-view-details-toggle {
|
@@ -121,17 +124,17 @@
|
|
121
124
|
}
|
122
125
|
.pf-m-tree-view-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
|
123
126
|
position: relative;
|
124
|
-
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
125
127
|
border: none;
|
128
|
+
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
126
129
|
}
|
127
130
|
.pf-m-tree-view-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
|
128
131
|
position: absolute;
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
132
|
+
inset-block-start: 0;
|
133
|
+
inset-block-end: 0;
|
134
|
+
inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
135
|
+
inset-inline-end: 0;
|
134
136
|
content: "";
|
137
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
135
138
|
}
|
136
139
|
.pf-m-tree-view-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
|
137
140
|
display: grid;
|
@@ -146,10 +149,10 @@
|
|
146
149
|
.pf-m-tree-view-grid.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
|
147
150
|
--pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
|
148
151
|
--pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
|
149
|
-
padding-
|
152
|
+
padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
150
153
|
}
|
151
154
|
.pf-m-tree-view-grid.pf-v5-c-table .pf-v5-c-table__tree-view-text {
|
152
|
-
padding-
|
155
|
+
padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
|
153
156
|
}
|
154
157
|
.pf-m-tree-view-grid.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
|
155
158
|
display: none;
|
@@ -158,21 +161,21 @@
|
|
158
161
|
display: none;
|
159
162
|
}
|
160
163
|
.pf-m-tree-view-grid.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
|
164
|
+
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
161
165
|
grid-column: 1;
|
162
166
|
grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
|
163
|
-
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
164
167
|
align-items: start;
|
165
168
|
}
|
166
169
|
.pf-m-tree-view-grid.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
|
167
170
|
grid-column: 2;
|
168
171
|
}
|
169
172
|
.pf-m-tree-view-grid.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
|
170
|
-
font-weight: bold;
|
171
|
-
text-align:
|
173
|
+
font-weight: var(--pf-v5-global--FontWeight--bold);
|
174
|
+
text-align: start;
|
172
175
|
content: attr(data-label);
|
173
176
|
}
|
174
177
|
.pf-m-tree-view-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
|
175
|
-
padding-
|
178
|
+
padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
|
176
179
|
}
|
177
180
|
.pf-m-tree-view-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
|
178
181
|
display: grid;
|
@@ -189,21 +192,21 @@
|
|
189
192
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
|
190
193
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
|
191
194
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
|
192
|
-
grid-column: 2;
|
193
195
|
grid-row: 1;
|
196
|
+
grid-column: 2;
|
194
197
|
}
|
195
198
|
.pf-m-tree-view-grid.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
|
196
|
-
margin-
|
197
|
-
margin-
|
199
|
+
margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
|
200
|
+
margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
|
198
201
|
}
|
199
202
|
.pf-m-tree-view-grid.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
|
200
|
-
margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
201
|
-
margin-left: auto;
|
202
203
|
order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
|
204
|
+
margin-inline-start: auto;
|
205
|
+
margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
203
206
|
}
|
204
207
|
.pf-m-tree-view-grid.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
|
205
|
-
margin-
|
206
|
-
margin-
|
208
|
+
margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
|
209
|
+
margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
|
207
210
|
}
|
208
211
|
.pf-m-tree-view-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
|
209
212
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
|
@@ -261,17 +264,17 @@
|
|
261
264
|
}
|
262
265
|
.pf-m-tree-view-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
|
263
266
|
position: relative;
|
264
|
-
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
265
267
|
border: none;
|
268
|
+
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
266
269
|
}
|
267
270
|
.pf-m-tree-view-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
|
268
271
|
position: absolute;
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
272
|
+
inset-block-start: 0;
|
273
|
+
inset-block-end: 0;
|
274
|
+
inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
275
|
+
inset-inline-end: 0;
|
274
276
|
content: "";
|
277
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
275
278
|
}
|
276
279
|
.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
|
277
280
|
display: grid;
|
@@ -286,10 +289,10 @@
|
|
286
289
|
.pf-m-tree-view-grid-md.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
|
287
290
|
--pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
|
288
291
|
--pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
|
289
|
-
padding-
|
292
|
+
padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
290
293
|
}
|
291
294
|
.pf-m-tree-view-grid-md.pf-v5-c-table .pf-v5-c-table__tree-view-text {
|
292
|
-
padding-
|
295
|
+
padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
|
293
296
|
}
|
294
297
|
.pf-m-tree-view-grid-md.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
|
295
298
|
display: none;
|
@@ -298,21 +301,21 @@
|
|
298
301
|
display: none;
|
299
302
|
}
|
300
303
|
.pf-m-tree-view-grid-md.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
|
304
|
+
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
301
305
|
grid-column: 1;
|
302
306
|
grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
|
303
|
-
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
304
307
|
align-items: start;
|
305
308
|
}
|
306
309
|
.pf-m-tree-view-grid-md.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
|
307
310
|
grid-column: 2;
|
308
311
|
}
|
309
312
|
.pf-m-tree-view-grid-md.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
|
310
|
-
font-weight: bold;
|
311
|
-
text-align:
|
313
|
+
font-weight: var(--pf-v5-global--FontWeight--bold);
|
314
|
+
text-align: start;
|
312
315
|
content: attr(data-label);
|
313
316
|
}
|
314
317
|
.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
|
315
|
-
padding-
|
318
|
+
padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
|
316
319
|
}
|
317
320
|
.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
|
318
321
|
display: grid;
|
@@ -329,21 +332,21 @@
|
|
329
332
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
|
330
333
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
|
331
334
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
|
332
|
-
grid-column: 2;
|
333
335
|
grid-row: 1;
|
336
|
+
grid-column: 2;
|
334
337
|
}
|
335
338
|
.pf-m-tree-view-grid-md.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
|
336
|
-
margin-
|
337
|
-
margin-
|
339
|
+
margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
|
340
|
+
margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
|
338
341
|
}
|
339
342
|
.pf-m-tree-view-grid-md.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
|
340
|
-
margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
341
|
-
margin-left: auto;
|
342
343
|
order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
|
344
|
+
margin-inline-start: auto;
|
345
|
+
margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
343
346
|
}
|
344
347
|
.pf-m-tree-view-grid-md.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
|
345
|
-
margin-
|
346
|
-
margin-
|
348
|
+
margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
|
349
|
+
margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
|
347
350
|
}
|
348
351
|
.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
|
349
352
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
|
@@ -402,17 +405,17 @@
|
|
402
405
|
}
|
403
406
|
.pf-m-tree-view-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
|
404
407
|
position: relative;
|
405
|
-
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
406
408
|
border: none;
|
409
|
+
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
407
410
|
}
|
408
411
|
.pf-m-tree-view-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
|
409
412
|
position: absolute;
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
413
|
+
inset-block-start: 0;
|
414
|
+
inset-block-end: 0;
|
415
|
+
inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
416
|
+
inset-inline-end: 0;
|
415
417
|
content: "";
|
418
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
416
419
|
}
|
417
420
|
.pf-m-tree-view-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
|
418
421
|
display: grid;
|
@@ -427,10 +430,10 @@
|
|
427
430
|
.pf-m-tree-view-grid-lg.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
|
428
431
|
--pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
|
429
432
|
--pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
|
430
|
-
padding-
|
433
|
+
padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
431
434
|
}
|
432
435
|
.pf-m-tree-view-grid-lg.pf-v5-c-table .pf-v5-c-table__tree-view-text {
|
433
|
-
padding-
|
436
|
+
padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
|
434
437
|
}
|
435
438
|
.pf-m-tree-view-grid-lg.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
|
436
439
|
display: none;
|
@@ -439,21 +442,21 @@
|
|
439
442
|
display: none;
|
440
443
|
}
|
441
444
|
.pf-m-tree-view-grid-lg.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
|
445
|
+
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
442
446
|
grid-column: 1;
|
443
447
|
grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
|
444
|
-
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
445
448
|
align-items: start;
|
446
449
|
}
|
447
450
|
.pf-m-tree-view-grid-lg.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
|
448
451
|
grid-column: 2;
|
449
452
|
}
|
450
453
|
.pf-m-tree-view-grid-lg.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
|
451
|
-
font-weight: bold;
|
452
|
-
text-align:
|
454
|
+
font-weight: var(--pf-v5-global--FontWeight--bold);
|
455
|
+
text-align: start;
|
453
456
|
content: attr(data-label);
|
454
457
|
}
|
455
458
|
.pf-m-tree-view-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
|
456
|
-
padding-
|
459
|
+
padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
|
457
460
|
}
|
458
461
|
.pf-m-tree-view-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
|
459
462
|
display: grid;
|
@@ -470,21 +473,21 @@
|
|
470
473
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
|
471
474
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
|
472
475
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
|
473
|
-
grid-column: 2;
|
474
476
|
grid-row: 1;
|
477
|
+
grid-column: 2;
|
475
478
|
}
|
476
479
|
.pf-m-tree-view-grid-lg.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
|
477
|
-
margin-
|
478
|
-
margin-
|
480
|
+
margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
|
481
|
+
margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
|
479
482
|
}
|
480
483
|
.pf-m-tree-view-grid-lg.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
|
481
|
-
margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
482
|
-
margin-left: auto;
|
483
484
|
order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
|
485
|
+
margin-inline-start: auto;
|
486
|
+
margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
484
487
|
}
|
485
488
|
.pf-m-tree-view-grid-lg.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
|
486
|
-
margin-
|
487
|
-
margin-
|
489
|
+
margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
|
490
|
+
margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
|
488
491
|
}
|
489
492
|
.pf-m-tree-view-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
|
490
493
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
|
@@ -543,17 +546,17 @@
|
|
543
546
|
}
|
544
547
|
.pf-m-tree-view-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
|
545
548
|
position: relative;
|
546
|
-
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
547
549
|
border: none;
|
550
|
+
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
548
551
|
}
|
549
552
|
.pf-m-tree-view-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
|
550
553
|
position: absolute;
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
554
|
+
inset-block-start: 0;
|
555
|
+
inset-block-end: 0;
|
556
|
+
inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
557
|
+
inset-inline-end: 0;
|
556
558
|
content: "";
|
559
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
557
560
|
}
|
558
561
|
.pf-m-tree-view-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
|
559
562
|
display: grid;
|
@@ -568,10 +571,10 @@
|
|
568
571
|
.pf-m-tree-view-grid-xl.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
|
569
572
|
--pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
|
570
573
|
--pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
|
571
|
-
padding-
|
574
|
+
padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
572
575
|
}
|
573
576
|
.pf-m-tree-view-grid-xl.pf-v5-c-table .pf-v5-c-table__tree-view-text {
|
574
|
-
padding-
|
577
|
+
padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
|
575
578
|
}
|
576
579
|
.pf-m-tree-view-grid-xl.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
|
577
580
|
display: none;
|
@@ -580,21 +583,21 @@
|
|
580
583
|
display: none;
|
581
584
|
}
|
582
585
|
.pf-m-tree-view-grid-xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
|
586
|
+
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
583
587
|
grid-column: 1;
|
584
588
|
grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
|
585
|
-
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
586
589
|
align-items: start;
|
587
590
|
}
|
588
591
|
.pf-m-tree-view-grid-xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
|
589
592
|
grid-column: 2;
|
590
593
|
}
|
591
594
|
.pf-m-tree-view-grid-xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
|
592
|
-
font-weight: bold;
|
593
|
-
text-align:
|
595
|
+
font-weight: var(--pf-v5-global--FontWeight--bold);
|
596
|
+
text-align: start;
|
594
597
|
content: attr(data-label);
|
595
598
|
}
|
596
599
|
.pf-m-tree-view-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
|
597
|
-
padding-
|
600
|
+
padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
|
598
601
|
}
|
599
602
|
.pf-m-tree-view-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
|
600
603
|
display: grid;
|
@@ -611,21 +614,21 @@
|
|
611
614
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
|
612
615
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
|
613
616
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
|
614
|
-
grid-column: 2;
|
615
617
|
grid-row: 1;
|
618
|
+
grid-column: 2;
|
616
619
|
}
|
617
620
|
.pf-m-tree-view-grid-xl.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
|
618
|
-
margin-
|
619
|
-
margin-
|
621
|
+
margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
|
622
|
+
margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
|
620
623
|
}
|
621
624
|
.pf-m-tree-view-grid-xl.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
|
622
|
-
margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
623
|
-
margin-left: auto;
|
624
625
|
order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
|
626
|
+
margin-inline-start: auto;
|
627
|
+
margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
625
628
|
}
|
626
629
|
.pf-m-tree-view-grid-xl.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
|
627
|
-
margin-
|
628
|
-
margin-
|
630
|
+
margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
|
631
|
+
margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
|
629
632
|
}
|
630
633
|
.pf-m-tree-view-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
|
631
634
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
|
@@ -684,17 +687,17 @@
|
|
684
687
|
}
|
685
688
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
|
686
689
|
position: relative;
|
687
|
-
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
688
690
|
border: none;
|
691
|
+
outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
|
689
692
|
}
|
690
693
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
|
691
694
|
position: absolute;
|
692
|
-
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
695
|
+
inset-block-start: 0;
|
696
|
+
inset-block-end: 0;
|
697
|
+
inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
698
|
+
inset-inline-end: 0;
|
697
699
|
content: "";
|
700
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
698
701
|
}
|
699
702
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
|
700
703
|
display: grid;
|
@@ -709,10 +712,10 @@
|
|
709
712
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
|
710
713
|
--pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
|
711
714
|
--pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
|
712
|
-
padding-
|
715
|
+
padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
|
713
716
|
}
|
714
717
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table .pf-v5-c-table__tree-view-text {
|
715
|
-
padding-
|
718
|
+
padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
|
716
719
|
}
|
717
720
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
|
718
721
|
display: none;
|
@@ -721,21 +724,21 @@
|
|
721
724
|
display: none;
|
722
725
|
}
|
723
726
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
|
727
|
+
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
724
728
|
grid-column: 1;
|
725
729
|
grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
|
726
|
-
grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
727
730
|
align-items: start;
|
728
731
|
}
|
729
732
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
|
730
733
|
grid-column: 2;
|
731
734
|
}
|
732
735
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
|
733
|
-
font-weight: bold;
|
734
|
-
text-align:
|
736
|
+
font-weight: var(--pf-v5-global--FontWeight--bold);
|
737
|
+
text-align: start;
|
735
738
|
content: attr(data-label);
|
736
739
|
}
|
737
740
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
|
738
|
-
padding-
|
741
|
+
padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
|
739
742
|
}
|
740
743
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
|
741
744
|
display: grid;
|
@@ -752,21 +755,21 @@
|
|
752
755
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
|
753
756
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
|
754
757
|
--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
|
755
|
-
grid-column: 2;
|
756
758
|
grid-row: 1;
|
759
|
+
grid-column: 2;
|
757
760
|
}
|
758
761
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
|
759
|
-
margin-
|
760
|
-
margin-
|
762
|
+
margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
|
763
|
+
margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
|
761
764
|
}
|
762
765
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
|
763
|
-
margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
764
|
-
margin-left: auto;
|
765
766
|
order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
|
767
|
+
margin-inline-start: auto;
|
768
|
+
margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
766
769
|
}
|
767
770
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
|
768
|
-
margin-
|
769
|
-
margin-
|
771
|
+
margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
|
772
|
+
margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
|
770
773
|
}
|
771
774
|
.pf-m-tree-view-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
|
772
775
|
--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
|