@patternfly/react-styles 5.1.0 → 5.1.1-prerelease.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +8 -2
- package/css/components/AboutModalBox/about-modal-box.css +20 -13
- package/css/components/Accordion/accordion.css +33 -20
- package/css/components/Accordion/accordion.d.ts +3 -1
- package/css/components/Accordion/accordion.js +3 -1
- package/css/components/Accordion/accordion.mjs +3 -1
- package/css/components/ActionList/action-list.css +2 -2
- package/css/components/Alert/alert-group.css +7 -4
- package/css/components/Alert/alert.css +19 -13
- package/css/components/Alert/alert.d.ts +3 -1
- package/css/components/Alert/alert.js +3 -1
- package/css/components/Alert/alert.mjs +3 -1
- 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 +9 -3
- package/css/components/Breadcrumb/breadcrumb.d.ts +3 -1
- package/css/components/Breadcrumb/breadcrumb.js +3 -1
- package/css/components/Breadcrumb/breadcrumb.mjs +3 -1
- package/css/components/Button/button.css +23 -17
- package/css/components/CalendarMonth/calendar-month.css +25 -15
- package/css/components/CalendarMonth/calendar-month.d.ts +3 -1
- package/css/components/CalendarMonth/calendar-month.js +3 -1
- package/css/components/CalendarMonth/calendar-month.mjs +3 -1
- 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 +19 -10
- package/css/components/ClipboardCopy/clipboard-copy.d.ts +3 -1
- package/css/components/ClipboardCopy/clipboard-copy.js +3 -1
- package/css/components/ClipboardCopy/clipboard-copy.mjs +3 -1
- 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 +29 -15
- package/css/components/DualListSelector/dual-list-selector.d.ts +4 -1
- package/css/components/DualListSelector/dual-list-selector.js +4 -1
- package/css/components/DualListSelector/dual-list-selector.mjs +4 -1
- package/css/components/EmptyState/empty-state.css +7 -4
- package/css/components/ExpandableSection/expandable-section.css +17 -10
- package/css/components/ExpandableSection/expandable-section.d.ts +3 -1
- package/css/components/ExpandableSection/expandable-section.js +3 -1
- package/css/components/ExpandableSection/expandable-section.mjs +3 -1
- 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 +80 -66
- package/css/components/Menu/menu.d.ts +3 -1
- package/css/components/Menu/menu.js +3 -1
- package/css/components/Menu/menu.mjs +3 -1
- 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 +120 -93
- package/css/components/Nav/nav.d.ts +3 -1
- package/css/components/Nav/nav.js +3 -1
- package/css/components/Nav/nav.mjs +3 -1
- package/css/components/NotificationBadge/notification-badge.css +13 -7
- package/css/components/NotificationDrawer/notification-drawer.css +32 -19
- package/css/components/NotificationDrawer/notification-drawer.d.ts +3 -1
- package/css/components/NotificationDrawer/notification-drawer.js +3 -1
- package/css/components/NotificationDrawer/notification-drawer.mjs +3 -1
- 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 +123 -65
- package/css/components/Page/page.d.ts +3 -1
- package/css/components/Page/page.js +3 -1
- package/css/components/Page/page.mjs +3 -1
- package/css/components/Pagination/pagination.css +28 -18
- package/css/components/Pagination/pagination.d.ts +3 -1
- package/css/components/Pagination/pagination.js +3 -1
- package/css/components/Pagination/pagination.mjs +3 -1
- 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 +46 -26
- package/css/components/Slider/slider.d.ts +3 -1
- package/css/components/Slider/slider.js +3 -1
- package/css/components/Slider/slider.mjs +3 -1
- package/css/components/Switch/switch.css +9 -5
- package/css/components/Switch/switch.d.ts +3 -1
- package/css/components/Switch/switch.js +3 -1
- package/css/components/Switch/switch.mjs +3 -1
- 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 +57 -36
- package/css/components/Wizard/wizard.d.ts +3 -1
- package/css/components/Wizard/wizard.js +3 -1
- package/css/components/Wizard/wizard.mjs +3 -1
- 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 +3 -26
- package/css/docs/components/Nav/examples/Navigation.d.ts +1 -1
- package/css/docs/components/Nav/examples/Navigation.js +1 -1
- package/css/docs/components/Nav/examples/Navigation.mjs +1 -1
- 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 +4 -8
@@ -289,27 +289,27 @@
|
|
289
289
|
position: relative;
|
290
290
|
}
|
291
291
|
.pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) {
|
292
|
-
border-
|
292
|
+
border-block-end: 0;
|
293
293
|
}
|
294
294
|
.pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) > * {
|
295
295
|
z-index: var(--pf-v5-c-table--m-sticky-header--cell--ZIndex);
|
296
296
|
}
|
297
297
|
.pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > * {
|
298
298
|
position: sticky;
|
299
|
-
|
299
|
+
inset-block-start: 0;
|
300
300
|
background: var(--pf-v5-c-table--BackgroundColor);
|
301
301
|
}
|
302
302
|
.pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > *::after {
|
303
303
|
position: absolute;
|
304
|
-
|
305
|
-
|
306
|
-
|
304
|
+
inset-block-end: 0;
|
305
|
+
inset-inline-start: 0;
|
306
|
+
inset-inline-end: 0;
|
307
307
|
content: "";
|
308
|
-
border-
|
308
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
309
309
|
}
|
310
310
|
.pf-v5-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
|
311
311
|
position: sticky;
|
312
|
-
|
312
|
+
inset-block-start: 0;
|
313
313
|
z-index: var(--pf-v5-global--ZIndex--xs);
|
314
314
|
background: var(--pf-v5-c-table--BackgroundColor);
|
315
315
|
}
|
@@ -322,7 +322,7 @@
|
|
322
322
|
--pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table__thead--m-nested-column-header__tr--PaddingBottom);
|
323
323
|
}
|
324
324
|
.pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) {
|
325
|
-
border-
|
325
|
+
border-block-end: 0;
|
326
326
|
}
|
327
327
|
.pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) th:where(.pf-v5-c-table__th):not([rowspan]),
|
328
328
|
.pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) td:where(.pf-v5-c-table__td):not([rowspan]) {
|
@@ -336,7 +336,7 @@
|
|
336
336
|
background: var(--pf-v5-c-table--m-striped__tr--BackgroundColor);
|
337
337
|
}
|
338
338
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
|
339
|
-
border-
|
339
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
340
340
|
}
|
341
341
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row).pf-m-ghost-row {
|
342
342
|
background-color: var(--pf-v5-c-table__tr--m-ghost-row--BackgroundColor);
|
@@ -348,7 +348,10 @@
|
|
348
348
|
width: var(--pf-v5-c-table--cell--Width);
|
349
349
|
min-width: var(--pf-v5-c-table--cell--MinWidth);
|
350
350
|
max-width: var(--pf-v5-c-table--cell--MaxWidth);
|
351
|
-
padding: var(--pf-v5-c-table--cell--PaddingTop)
|
351
|
+
padding-block-start: var(--pf-v5-c-table--cell--PaddingTop);
|
352
|
+
padding-block-end: var(--pf-v5-c-table--cell--PaddingBottom);
|
353
|
+
padding-inline-start: var(--pf-v5-c-table--cell--PaddingLeft);
|
354
|
+
padding-inline-end: var(--pf-v5-c-table--cell--PaddingRight);
|
352
355
|
overflow: var(--pf-v5-c-table--cell--Overflow);
|
353
356
|
font-size: var(--pf-v5-c-table--cell--FontSize);
|
354
357
|
font-weight: var(--pf-v5-c-table--cell--FontWeight);
|
@@ -382,26 +385,26 @@
|
|
382
385
|
}
|
383
386
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before, .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
|
384
387
|
position: absolute;
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
388
|
+
inset-block-start: 0;
|
389
|
+
inset-block-end: 0;
|
390
|
+
inset-inline-start: 0;
|
391
|
+
inset-inline-end: 0;
|
389
392
|
pointer-events: none;
|
390
393
|
content: "";
|
391
394
|
}
|
392
395
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before {
|
393
|
-
border-
|
396
|
+
border-inline-end: var(--pf-v5-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-v5-c-table--cell--m-border-right--before--BorderRightColor);
|
394
397
|
}
|
395
398
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
|
396
|
-
border-
|
399
|
+
border-inline-start: var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftColor);
|
397
400
|
}
|
398
401
|
.pf-v5-c-table caption:where(.pf-v5-c-table__caption) {
|
399
|
-
padding-
|
400
|
-
padding-
|
401
|
-
padding-
|
402
|
+
padding-block-start: var(--pf-v5-c-table__caption--PaddingTop);
|
403
|
+
padding-block-end: var(--pf-v5-c-table__caption--PaddingBottom);
|
404
|
+
padding-inline-start: var(--pf-v5-c-table__caption--PaddingLeft);
|
402
405
|
font-size: var(--pf-v5-c-table__caption--FontSize);
|
403
406
|
color: var(--pf-v5-c-table__caption--Color);
|
404
|
-
text-align:
|
407
|
+
text-align: start;
|
405
408
|
background-color: var(--pf-v5-c-table--BackgroundColor);
|
406
409
|
}
|
407
410
|
.pf-v5-c-table thead:where(.pf-v5-c-table__thead) {
|
@@ -439,19 +442,19 @@
|
|
439
442
|
}
|
440
443
|
.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
|
441
444
|
position: absolute;
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
+
inset-block-start: var(--pf-v5-c-table__expandable-row--after--Top);
|
446
|
+
inset-block-end: var(--pf-v5-c-table__expandable-row--after--Bottom);
|
447
|
+
inset-inline-start: 0;
|
445
448
|
content: "";
|
446
449
|
background-color: transparent;
|
447
|
-
border-
|
450
|
+
border-inline-start: var(--pf-v5-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-v5-c-table__expandable-row--after--BorderColor);
|
448
451
|
}
|
449
452
|
.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__check input:where(.pf-v5-c-check__input) {
|
450
|
-
margin-
|
453
|
+
margin-block-start: var(--pf-v5-c-table__check--input--MarginTop);
|
451
454
|
vertical-align: top;
|
452
455
|
}
|
453
456
|
.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > :first-child:not(.pf-v5-c-table__control-row) {
|
454
|
-
border-
|
457
|
+
border-block-end-width: 0;
|
455
458
|
}
|
456
459
|
.pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:first-child, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:last-child {
|
457
460
|
padding: 0;
|
@@ -497,19 +500,19 @@
|
|
497
500
|
--pf-v5-c-table--cell--WhiteSpace: normal;
|
498
501
|
}
|
499
502
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) {
|
500
|
-
border-
|
503
|
+
border-block-end: 0;
|
501
504
|
}
|
502
505
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
|
503
|
-
border-
|
506
|
+
border-inline-start: 0;
|
504
507
|
}
|
505
508
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody):not(.pf-m-expanded) .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
|
506
509
|
display: none;
|
507
510
|
}
|
508
511
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > .pf-v5-c-table__control-row {
|
509
|
-
border-
|
512
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
510
513
|
}
|
511
514
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__control-row > .pf-v5-c-table__compound-expansion-toggle:first-child > ::before {
|
512
|
-
border-
|
515
|
+
border-inline-start-width: 0;
|
513
516
|
}
|
514
517
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable {
|
515
518
|
cursor: pointer;
|
@@ -620,11 +623,14 @@
|
|
620
623
|
.pf-v5-c-table__button {
|
621
624
|
position: static;
|
622
625
|
width: 100%;
|
623
|
-
padding: var(--pf-v5-c-table--cell--PaddingTop)
|
626
|
+
padding-block-start: var(--pf-v5-c-table--cell--PaddingTop);
|
627
|
+
padding-block-end: var(--pf-v5-c-table--cell--PaddingBottom);
|
628
|
+
padding-inline-start: var(--pf-v5-c-table--cell--PaddingLeft);
|
629
|
+
padding-inline-end: var(--pf-v5-c-table--cell--PaddingRight);
|
624
630
|
font-size: inherit;
|
625
631
|
font-weight: inherit;
|
626
632
|
color: var(--pf-v5-c-table__button--Color);
|
627
|
-
text-align:
|
633
|
+
text-align: start;
|
628
634
|
white-space: inherit;
|
629
635
|
user-select: text;
|
630
636
|
background-color: var(--pf-v5-c-table__button--BackgroundColor);
|
@@ -632,10 +638,10 @@
|
|
632
638
|
}
|
633
639
|
.pf-v5-c-table__button::before {
|
634
640
|
position: absolute;
|
635
|
-
|
636
|
-
|
637
|
-
|
638
|
-
|
641
|
+
inset-block-start: 0;
|
642
|
+
inset-block-end: 0;
|
643
|
+
inset-inline-start: 0;
|
644
|
+
inset-inline-end: 0;
|
639
645
|
cursor: pointer;
|
640
646
|
content: "";
|
641
647
|
}
|
@@ -718,8 +724,8 @@
|
|
718
724
|
vertical-align: top;
|
719
725
|
}
|
720
726
|
.pf-v5-c-table__toggle .pf-v5-c-button {
|
721
|
-
margin-
|
722
|
-
margin-
|
727
|
+
margin-block-start: var(--pf-v5-c-table__toggle--c-button--MarginTop);
|
728
|
+
margin-block-end: var(--pf-v5-c-table__toggle--c-button--MarginBottom);
|
723
729
|
}
|
724
730
|
.pf-v5-c-table__toggle .pf-v5-c-button.pf-m-expanded .pf-v5-c-table__toggle-icon {
|
725
731
|
transform: rotate(var(--pf-v5-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
|
@@ -742,20 +748,29 @@
|
|
742
748
|
.pf-v5-c-table__check label {
|
743
749
|
display: block;
|
744
750
|
padding: inherit;
|
745
|
-
margin: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1)
|
751
|
+
margin-block-start: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1);
|
752
|
+
margin-block-end: calc(var(--pf-v5-c-table--cell--PaddingBottom) * -1);
|
753
|
+
margin-inline-start: calc(var(--pf-v5-c-table--cell--PaddingLeft) * -1);
|
754
|
+
margin-inline-end: calc(var(--pf-v5-c-table--cell--PaddingRight) * -1);
|
746
755
|
}
|
747
756
|
|
748
757
|
.pf-v5-c-table__favorite .pf-v5-c-button {
|
749
758
|
--pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--c-button--Color);
|
750
759
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-table__favorite--c-button--FontSize);
|
751
|
-
margin: var(--pf-v5-c-table__favorite--c-button--MarginTop)
|
760
|
+
margin-block-start: var(--pf-v5-c-table__favorite--c-button--MarginTop);
|
761
|
+
margin-block-end: var(--pf-v5-c-table__favorite--c-button--MarginBottom);
|
762
|
+
margin-inline-start: var(--pf-v5-c-table__favorite--c-button--MarginLeft);
|
763
|
+
margin-inline-end: var(--pf-v5-c-table__favorite--c-button--MarginRight);
|
752
764
|
}
|
753
765
|
.pf-m-favorited.pf-v5-c-table__favorite .pf-v5-c-button {
|
754
766
|
--pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--m-favorited--c-button--Color);
|
755
767
|
}
|
756
768
|
|
757
769
|
.pf-v5-c-table__draggable .pf-v5-c-button {
|
758
|
-
margin: var(--pf-v5-c-table__draggable--c-button--MarginTop)
|
770
|
+
margin-block-start: var(--pf-v5-c-table__draggable--c-button--MarginTop);
|
771
|
+
margin-block-end: var(--pf-v5-c-table__draggable--c-button--MarginBottom);
|
772
|
+
margin-inline-start: var(--pf-v5-c-table__draggable--c-button--MarginLeft);
|
773
|
+
margin-inline-end: var(--pf-v5-c-table__draggable--c-button--MarginRight);
|
759
774
|
cursor: grab;
|
760
775
|
}
|
761
776
|
.pf-v5-c-table__draggable .pf-v5-c-button:active {
|
@@ -768,19 +783,19 @@
|
|
768
783
|
--pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table__action--PaddingRight);
|
769
784
|
--pf-v5-c-table--cell--PaddingBottom: 0;
|
770
785
|
--pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table__action--PaddingLeft);
|
771
|
-
padding-
|
772
|
-
padding-
|
786
|
+
padding-block-start: 0;
|
787
|
+
padding-block-end: 0;
|
773
788
|
vertical-align: middle;
|
774
789
|
}
|
775
790
|
|
776
791
|
.pf-v5-c-table__action {
|
777
|
-
text-align:
|
792
|
+
text-align: end;
|
778
793
|
}
|
779
794
|
|
780
795
|
.pf-v5-c-table__inline-edit-action {
|
781
796
|
--pf-v5-c-table--cell--PaddingLeft: 0;
|
782
797
|
--pf-v5-c-table--cell--PaddingRight: 0;
|
783
|
-
text-align:
|
798
|
+
text-align: end;
|
784
799
|
}
|
785
800
|
|
786
801
|
.pf-v5-c-table__compound-expansion-toggle {
|
@@ -803,25 +818,25 @@
|
|
803
818
|
.pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before,
|
804
819
|
.pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::after {
|
805
820
|
position: absolute;
|
806
|
-
|
821
|
+
inset-inline-end: 0;
|
807
822
|
content: "";
|
808
823
|
border-style: solid;
|
809
824
|
border-width: 0;
|
810
825
|
}
|
811
826
|
.pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
|
812
|
-
|
813
|
-
|
814
|
-
|
827
|
+
inset-block-start: 0;
|
828
|
+
inset-block-end: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Bottom);
|
829
|
+
inset-inline-start: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Left);
|
815
830
|
border-color: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderColor);
|
816
|
-
border-
|
817
|
-
border-
|
831
|
+
border-inline-start-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
|
832
|
+
border-inline-end-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
|
818
833
|
}
|
819
834
|
.pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::after {
|
820
|
-
|
821
|
-
|
835
|
+
inset-block-start: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Top);
|
836
|
+
inset-inline-start: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Left);
|
822
837
|
pointer-events: none;
|
823
838
|
border-color: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderColor);
|
824
|
-
border-
|
839
|
+
border-block-start-width: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
|
825
840
|
}
|
826
841
|
.pf-v5-c-table__compound-expansion-toggle:hover, .pf-v5-c-table__compound-expansion-toggle:focus-within, .pf-v5-c-table__compound-expansion-toggle.pf-m-expanded {
|
827
842
|
--pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
|
@@ -833,7 +848,7 @@
|
|
833
848
|
--pf-v5-c-table__compound-expansion-toggle__button--after--Left: 0;
|
834
849
|
}
|
835
850
|
.pf-v5-c-table__compound-expansion-toggle.pf-m-expanded .pf-v5-c-table__button::before {
|
836
|
-
border-
|
851
|
+
border-block-end: var(--pf-v5-c-table--BackgroundColor) solid var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
|
837
852
|
}
|
838
853
|
.pf-v5-c-table__compound-expansion-toggle.pf-m-expanded:first-child {
|
839
854
|
--pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
|
@@ -849,14 +864,14 @@
|
|
849
864
|
}
|
850
865
|
|
851
866
|
.pf-v5-c-table__column-help-action {
|
852
|
-
margin-
|
867
|
+
margin-inline-start: var(--pf-v5-c-table__column-help--MarginLeft);
|
853
868
|
transform: translateY(var(--pf-v5-c-table__column-help--TranslateY));
|
854
869
|
}
|
855
870
|
.pf-v5-c-table__column-help-action .pf-v5-c-button {
|
856
871
|
--pf-v5-c-button--PaddingRight: var(--pf-v5-c-table__column-help--c-button--PaddingRight);
|
857
872
|
--pf-v5-c-button--PaddingLeft: var(--pf-v5-c-table__column-help--c-button--PaddingLeft);
|
858
|
-
margin-
|
859
|
-
margin-
|
873
|
+
margin-block-start: var(--pf-v5-c-table__column-help--c-button--MarginTop);
|
874
|
+
margin-block-end: var(--pf-v5-c-table__column-help--c-button--MarginBottom);
|
860
875
|
font-size: inherit;
|
861
876
|
line-height: 1;
|
862
877
|
}
|
@@ -868,9 +883,9 @@
|
|
868
883
|
--pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table__sort__button--PaddingLeft);
|
869
884
|
display: flex;
|
870
885
|
width: auto;
|
871
|
-
margin-
|
872
|
-
margin-
|
873
|
-
margin-
|
886
|
+
margin-block-start: var(--pf-v5-c-table__sort__button--MarginTop);
|
887
|
+
margin-block-end: var(--pf-v5-c-table__sort__button--MarginBottom);
|
888
|
+
margin-inline-start: var(--pf-v5-c-table__sort__button--MarginLeft);
|
874
889
|
}
|
875
890
|
.pf-v5-c-table__sort .pf-v5-c-table__button:hover {
|
876
891
|
--pf-v5-c-table__sort-indicator--Color: var(--pf-v5-c-table__sort__button--hover__sort-indicator--Color);
|
@@ -905,7 +920,7 @@
|
|
905
920
|
|
906
921
|
.pf-v5-c-table__sort-indicator {
|
907
922
|
grid-column: 2;
|
908
|
-
margin-
|
923
|
+
margin-inline-start: var(--pf-v5-c-table__sort-indicator--MarginLeft);
|
909
924
|
color: var(--pf-v5-c-table__sort-indicator--Color);
|
910
925
|
pointer-events: none;
|
911
926
|
}
|
@@ -914,7 +929,7 @@
|
|
914
929
|
--pf-v5-c-table--cell--PaddingTop: 0;
|
915
930
|
--pf-v5-c-table--cell--PaddingBottom: 0;
|
916
931
|
position: relative;
|
917
|
-
border-
|
932
|
+
border-block-end: 0 solid transparent;
|
918
933
|
box-shadow: 0 0 0 0 transparent;
|
919
934
|
}
|
920
935
|
.pf-v5-c-table__expandable-row,
|
@@ -923,19 +938,22 @@
|
|
923
938
|
}
|
924
939
|
.pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding,
|
925
940
|
.pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding {
|
926
|
-
padding: 0
|
941
|
+
padding-block-start: 0;
|
942
|
+
padding-inline-end: 0;
|
943
|
+
padding-block-end: 0;
|
944
|
+
padding-inline-start: var(--pf-v5-c-table__expandable-row--after--border-width--base);
|
927
945
|
}
|
928
946
|
.pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding .pf-v5-c-table__expandable-row-content,
|
929
947
|
.pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding .pf-v5-c-table__expandable-row-content {
|
930
948
|
padding: 0;
|
931
949
|
}
|
932
950
|
.pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
|
933
|
-
padding-
|
934
|
-
padding-
|
951
|
+
padding-block-start: var(--pf-v5-c-table__expandable-row-content--PaddingTop);
|
952
|
+
padding-block-end: var(--pf-v5-c-table__expandable-row-content--PaddingBottom);
|
935
953
|
}
|
936
954
|
.pf-v5-c-table__expandable-row.pf-m-expanded {
|
937
|
-
border-
|
938
|
-
border-
|
955
|
+
border-block-end-color: var(--pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor);
|
956
|
+
border-block-end-width: var(--pf-v5-c-table--border-width--base);
|
939
957
|
box-shadow: var(--pf-v5-c-table__expandable-row--m-expanded--BoxShadow);
|
940
958
|
}
|
941
959
|
.pf-v5-c-table__expandable-row:not(.pf-m-expanded) {
|
@@ -1005,7 +1023,7 @@
|
|
1005
1023
|
align-items: center;
|
1006
1024
|
}
|
1007
1025
|
.pf-v5-c-table__icon-inline > :not(:last-child) {
|
1008
|
-
margin-
|
1026
|
+
margin-inline-end: var(--pf-v5-c-table__icon-inline--MarginRight);
|
1009
1027
|
}
|
1010
1028
|
|
1011
1029
|
.pf-v5-c-table .pf-m-width-10 {
|
@@ -134,8 +134,8 @@
|
|
134
134
|
position: relative;
|
135
135
|
display: flex;
|
136
136
|
width: var(--pf-v5-c-tabs--Width);
|
137
|
-
padding-
|
138
|
-
padding-
|
137
|
+
padding-inline-start: var(--pf-v5-c-tabs--inset);
|
138
|
+
padding-inline-end: var(--pf-v5-c-tabs--inset);
|
139
139
|
overflow: hidden;
|
140
140
|
}
|
141
141
|
@media screen and (min-width: 1200px) {
|
@@ -146,11 +146,14 @@
|
|
146
146
|
}
|
147
147
|
.pf-v5-c-tabs::before {
|
148
148
|
position: absolute;
|
149
|
-
|
150
|
-
|
151
|
-
|
149
|
+
inset-block-end: 0;
|
150
|
+
inset-inline-start: 0;
|
151
|
+
inset-inline-end: 0;
|
152
152
|
border: solid var(--pf-v5-c-tabs--before--BorderColor);
|
153
|
-
border-width: var(--pf-v5-c-tabs--before--BorderTopWidth)
|
153
|
+
border-block-start-width: var(--pf-v5-c-tabs--before--BorderTopWidth);
|
154
|
+
border-block-end-width: var(--pf-v5-c-tabs--before--BorderBottomWidth);
|
155
|
+
border-inline-start-width: var(--pf-v5-c-tabs--before--BorderLeftWidth);
|
156
|
+
border-inline-end-width: var(--pf-v5-c-tabs--before--BorderRightWidth);
|
154
157
|
}
|
155
158
|
.pf-v5-c-tabs.pf-m-fill .pf-v5-c-tabs__list {
|
156
159
|
flex-basis: 100%;
|
@@ -172,11 +175,11 @@
|
|
172
175
|
opacity: 1;
|
173
176
|
}
|
174
177
|
.pf-v5-c-tabs.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(1) {
|
175
|
-
margin-
|
178
|
+
margin-inline-end: 0;
|
176
179
|
transform: translateX(0);
|
177
180
|
}
|
178
181
|
.pf-v5-c-tabs.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(2) {
|
179
|
-
margin-
|
182
|
+
margin-inline-start: 0;
|
180
183
|
transform: translateX(0);
|
181
184
|
}
|
182
185
|
.pf-v5-c-tabs.pf-m-no-border-bottom {
|
@@ -206,16 +209,16 @@
|
|
206
209
|
--pf-v5-c-tabs__link--before--BorderBottomColor: var(--pf-v5-c-tabs__link--BackgroundColor);
|
207
210
|
}
|
208
211
|
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current:first-child .pf-v5-c-tabs__link::before {
|
209
|
-
border-
|
212
|
+
border-inline-start-width: var(--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
|
210
213
|
}
|
211
214
|
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current:last-child .pf-v5-c-tabs__link::before {
|
212
|
-
border-
|
215
|
+
border-inline-end-width: var(--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth);
|
213
216
|
}
|
214
217
|
.pf-v5-c-tabs.pf-m-box.pf-m-scrollable .pf-v5-c-tabs__item.pf-m-current:first-child .pf-v5-c-tabs__link::before {
|
215
|
-
|
218
|
+
inset-inline-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
|
216
219
|
}
|
217
220
|
.pf-v5-c-tabs.pf-m-box.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(2)::before {
|
218
|
-
|
221
|
+
inset-inline-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
|
219
222
|
}
|
220
223
|
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item {
|
221
224
|
--pf-v5-c-tabs__link--before--Left: 0;
|
@@ -255,21 +258,24 @@
|
|
255
258
|
}
|
256
259
|
.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__list::before {
|
257
260
|
position: absolute;
|
258
|
-
|
261
|
+
inset-inline-end: auto;
|
259
262
|
border: solid var(--pf-v5-c-tabs--m-vertical__list--before--BorderColor);
|
260
|
-
border-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth)
|
263
|
+
border-block-start-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth);
|
264
|
+
border-block-end-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderBottomWidth);
|
265
|
+
border-inline-start-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth);
|
266
|
+
border-inline-end-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth);
|
261
267
|
}
|
262
268
|
.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item:first-child {
|
263
|
-
margin-
|
269
|
+
margin-block-start: var(--pf-v5-c-tabs--inset);
|
264
270
|
}
|
265
271
|
.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item:last-child {
|
266
|
-
margin-
|
272
|
+
margin-block-end: var(--pf-v5-c-tabs--inset);
|
267
273
|
}
|
268
274
|
.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__link {
|
269
275
|
--pf-v5-c-tabs__link--after--BorderTopWidth: 0;
|
270
276
|
--pf-v5-c-tabs__link--after--BorderLeftWidth: var(--pf-v5-c-tabs__link--after--BorderWidth);
|
271
277
|
max-width: 100%;
|
272
|
-
text-align:
|
278
|
+
text-align: start;
|
273
279
|
}
|
274
280
|
.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item-text {
|
275
281
|
max-width: 100%;
|
@@ -348,8 +354,8 @@
|
|
348
354
|
--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth: 0;
|
349
355
|
}
|
350
356
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__list::before {
|
351
|
-
|
352
|
-
|
357
|
+
inset-inline-start: auto;
|
358
|
+
inset-inline-end: 0;
|
353
359
|
}
|
354
360
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:last-child {
|
355
361
|
--pf-v5-c-tabs__link--before--BorderBottomWidth: 0;
|
@@ -367,11 +373,11 @@
|
|
367
373
|
--pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
368
374
|
}
|
369
375
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__link::after {
|
370
|
-
|
376
|
+
inset-block-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
|
371
377
|
}
|
372
378
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:first-child .pf-v5-c-tabs__link::after,
|
373
379
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item .pf-v5-c-tabs__link::after {
|
374
|
-
|
380
|
+
inset-block-start: 0;
|
375
381
|
}
|
376
382
|
.pf-v5-c-tabs.pf-m-secondary {
|
377
383
|
--pf-v5-c-tabs__link--FontSize: var(--pf-v5-c-tabs--m-secondary__link--FontSize);
|
@@ -389,19 +395,19 @@
|
|
389
395
|
.pf-v5-c-tabs__toggle {
|
390
396
|
display: var(--pf-v5-c-tabs__toggle--Display);
|
391
397
|
align-items: center;
|
392
|
-
margin-
|
398
|
+
margin-block-end: var(--pf-v5-c-tabs__toggle--MarginBottom);
|
393
399
|
}
|
394
400
|
|
395
401
|
.pf-v5-c-tabs__toggle-button {
|
396
402
|
--pf-v5-c-tabs__toggle-text--MarginLeft: var(--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft);
|
397
403
|
--pf-v5-c-tabs__toggle-text--Color: var(--pf-v5-c-tabs__toggle-button__toggle-text--Color);
|
398
|
-
margin-
|
399
|
-
margin-
|
400
|
-
margin-
|
404
|
+
margin-block-start: var(--pf-v5-c-tabs__toggle-button--MarginTop);
|
405
|
+
margin-block-end: var(--pf-v5-c-tabs__toggle-button--MarginBottom);
|
406
|
+
margin-inline-start: var(--pf-v5-c-tabs__toggle-button--MarginLeft);
|
401
407
|
}
|
402
408
|
.pf-v5-c-tabs__toggle-button .pf-v5-c-button {
|
403
409
|
display: flex;
|
404
|
-
text-align:
|
410
|
+
text-align: start;
|
405
411
|
white-space: normal;
|
406
412
|
}
|
407
413
|
|
@@ -413,7 +419,7 @@
|
|
413
419
|
}
|
414
420
|
|
415
421
|
.pf-v5-c-tabs__toggle-text {
|
416
|
-
margin-
|
422
|
+
margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
|
417
423
|
color: var(--pf-v5-c-tabs__toggle-text--Color, inherit);
|
418
424
|
}
|
419
425
|
|
@@ -463,9 +469,9 @@
|
|
463
469
|
.pf-v5-c-tabs__scroll-button::before,
|
464
470
|
.pf-v5-c-tabs__add::before {
|
465
471
|
position: absolute;
|
466
|
-
|
467
|
-
|
468
|
-
|
472
|
+
inset-block-end: 0;
|
473
|
+
inset-inline-start: 0;
|
474
|
+
inset-inline-end: 0;
|
469
475
|
content: "";
|
470
476
|
border-style: solid;
|
471
477
|
}
|
@@ -477,7 +483,7 @@
|
|
477
483
|
.pf-v5-c-tabs__item.pf-m-action::after,
|
478
484
|
.pf-v5-c-tabs__scroll-button::before,
|
479
485
|
.pf-v5-c-tabs__add::before {
|
480
|
-
|
486
|
+
inset-block-start: 0;
|
481
487
|
}
|
482
488
|
|
483
489
|
.pf-v5-c-tabs__link,
|
@@ -491,7 +497,10 @@
|
|
491
497
|
position: relative;
|
492
498
|
display: flex;
|
493
499
|
flex: 1;
|
494
|
-
padding: var(--pf-v5-c-tabs__link--PaddingTop)
|
500
|
+
padding-block-start: var(--pf-v5-c-tabs__link--PaddingTop);
|
501
|
+
padding-block-end: var(--pf-v5-c-tabs__link--PaddingBottom);
|
502
|
+
padding-inline-start: var(--pf-v5-c-tabs__link--PaddingLeft);
|
503
|
+
padding-inline-end: var(--pf-v5-c-tabs__link--PaddingRight);
|
495
504
|
font-size: var(--pf-v5-c-tabs__link--FontSize);
|
496
505
|
color: var(--pf-v5-c-tabs__link--Color);
|
497
506
|
text-decoration: none;
|
@@ -504,20 +513,26 @@
|
|
504
513
|
|
505
514
|
.pf-v5-c-tabs__item.pf-m-action::before, .pf-v5-c-tabs__link::before {
|
506
515
|
pointer-events: none;
|
507
|
-
border-
|
508
|
-
border-
|
509
|
-
border-
|
510
|
-
border-
|
511
|
-
border-
|
516
|
+
border-block-start-color: var(--pf-v5-c-tabs__link--before--BorderTopColor);
|
517
|
+
border-block-start-width: var(--pf-v5-c-tabs__link--before--BorderTopWidth);
|
518
|
+
border-block-end-color: var(--pf-v5-c-tabs__link--before--BorderBottomColor);
|
519
|
+
border-block-end-width: var(--pf-v5-c-tabs__link--before--BorderBottomWidth);
|
520
|
+
border-inline-start-color: var(--pf-v5-c-tabs__link--before--BorderLeftColor);
|
521
|
+
border-inline-start-width: var(--pf-v5-c-tabs__link--before--BorderLeftWidth);
|
522
|
+
border-inline-end-color: var(--pf-v5-c-tabs__link--before--BorderRightColor);
|
523
|
+
border-inline-end-width: var(--pf-v5-c-tabs__link--before--BorderRightWidth);
|
512
524
|
}
|
513
525
|
|
514
526
|
.pf-v5-c-tabs__item.pf-m-action::after, .pf-v5-c-tabs__link::after {
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
527
|
+
inset-block-start: var(--pf-v5-c-tabs__link--after--Top);
|
528
|
+
inset-block-end: var(--pf-v5-c-tabs__link--after--Bottom);
|
529
|
+
inset-inline-start: var(--pf-v5-c-tabs__link--before--Left);
|
530
|
+
inset-inline-end: var(--pf-v5-c-tabs__link--after--Right);
|
519
531
|
border-color: var(--pf-v5-c-tabs__link--after--BorderColor);
|
520
|
-
border-width: var(--pf-v5-c-tabs__link--after--BorderTopWidth)
|
532
|
+
border-block-start-width: var(--pf-v5-c-tabs__link--after--BorderTopWidth);
|
533
|
+
border-block-end-width: var(--pf-v5-c-tabs__link--after--BorderBottomWidth);
|
534
|
+
border-inline-start-width: var(--pf-v5-c-tabs__link--after--BorderLeftWidth);
|
535
|
+
border-inline-end-width: var(--pf-v5-c-tabs__link--after--BorderRightWidth);
|
521
536
|
}
|
522
537
|
|
523
538
|
.pf-v5-c-tabs__item.pf-m-action:hover, .pf-v5-c-tabs__link:hover {
|
@@ -558,7 +573,7 @@
|
|
558
573
|
}
|
559
574
|
.pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon,
|
560
575
|
.pf-v5-c-tabs__link .pf-v5-c-tabs__item-text {
|
561
|
-
margin-
|
576
|
+
margin-inline-end: var(--pf-v5-c-tabs__link--child--MarginRight);
|
562
577
|
}
|
563
578
|
.pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon:last-child,
|
564
579
|
.pf-v5-c-tabs__link .pf-v5-c-tabs__item-text:last-child {
|
@@ -594,7 +609,7 @@
|
|
594
609
|
|
595
610
|
.pf-v5-c-tabs__item-action-icon {
|
596
611
|
display: inline-block;
|
597
|
-
margin-
|
612
|
+
margin-block-start: var(--pf-v5-c-tabs__item-action-icon--MarginTop);
|
598
613
|
}
|
599
614
|
|
600
615
|
.pf-v5-c-tabs__scroll-button {
|
@@ -612,16 +627,19 @@
|
|
612
627
|
}
|
613
628
|
.pf-v5-c-tabs__scroll-button::before {
|
614
629
|
border-color: var(--pf-v5-c-tabs__scroll-button--before--BorderColor);
|
615
|
-
border-width: 0
|
630
|
+
border-block-start-width: 0;
|
631
|
+
border-block-end-width: var(--pf-v5-c-tabs__scroll-button--before--BorderBottomWidth);
|
632
|
+
border-inline-start-width: var(--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth);
|
633
|
+
border-inline-end-width: var(--pf-v5-c-tabs__scroll-button--before--BorderRightWidth);
|
616
634
|
}
|
617
635
|
.pf-v5-c-tabs__scroll-button:nth-of-type(1) {
|
618
636
|
--pf-v5-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-v5-c-tabs__scroll-button--before--border-width--base);
|
619
|
-
margin-
|
637
|
+
margin-inline-end: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
|
620
638
|
transform: translateX(-100%);
|
621
639
|
}
|
622
640
|
.pf-v5-c-tabs__scroll-button:nth-of-type(2) {
|
623
641
|
--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-v5-c-tabs__scroll-button--before--border-width--base);
|
624
|
-
margin-
|
642
|
+
margin-inline-start: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
|
625
643
|
transform: translateX(100%);
|
626
644
|
}
|
627
645
|
.pf-v5-c-tabs__scroll-button:disabled {
|
@@ -634,7 +652,7 @@
|
|
634
652
|
display: flex;
|
635
653
|
}
|
636
654
|
.pf-v5-c-tabs__add::before {
|
637
|
-
border-
|
655
|
+
border-inline-start: var(--pf-v5-c-tabs__add--before--BorderLeftWidth) solid var(--pf-v5-c-tabs__add--before--BorderColor);
|
638
656
|
}
|
639
657
|
.pf-v5-c-tabs__add .pf-v5-c-button {
|
640
658
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-tabs__add--c-button--FontSize);
|