@patternfly/patternfly 6.0.0-alpha.66 → 6.0.0-alpha.68
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/base/patternfly-variables.css +1 -4
- package/base/tokens/_tokens-default.scss +4 -4
- package/components/Tabs/tabs.css +143 -175
- package/components/Tabs/tabs.scss +159 -217
- package/components/ToggleGroup/toggle-group.css +22 -3
- package/components/ToggleGroup/toggle-group.scss +30 -7
- package/docs/components/Tabs/examples/Tabs.css +1 -1
- package/docs/components/Tabs/examples/Tabs.md +1025 -826
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +36 -28
- package/docs/demos/Tabs/examples/Tabs.md +21 -17
- package/package.json +1 -1
- package/patternfly-base-no-globals-theme-dark-unversioned.css +1 -4
- package/patternfly-base-no-globals.css +1 -4
- package/patternfly-base-theme-dark-unversioned.css +1 -4
- package/patternfly-base.css +1 -4
- package/patternfly-no-globals.css +166 -186
- package/patternfly-theme-dark-unversioned.css +166 -186
- package/patternfly.css +166 -186
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Tabs/themes/dark/tabs.scss +0 -10
|
@@ -495,10 +495,6 @@ html .ws-preview {
|
|
|
495
495
|
--pf-t--color--white: #fff;
|
|
496
496
|
}
|
|
497
497
|
|
|
498
|
-
/**
|
|
499
|
-
* Do not edit directly
|
|
500
|
-
* Generated on Tue, 05 Dec 2023 16:11:05 GMT
|
|
501
|
-
*/
|
|
502
498
|
:root {
|
|
503
499
|
--pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
|
|
504
500
|
--pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
|
|
@@ -781,6 +777,7 @@ html .ws-preview {
|
|
|
781
777
|
--pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
|
|
782
778
|
--pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
|
|
783
779
|
--pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
|
|
780
|
+
--pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
|
|
784
781
|
--pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
|
|
785
782
|
--pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
|
|
786
783
|
--pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
|
|
@@ -29668,21 +29665,21 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29668
29665
|
}
|
|
29669
29666
|
}
|
|
29670
29667
|
|
|
29671
|
-
|
|
29668
|
+
:where(:root),
|
|
29669
|
+
:where(.pf-v5-c-tabs) {
|
|
29672
29670
|
--pf-v5-c-tabs--inset: 0;
|
|
29673
29671
|
--pf-v5-c-tabs--Width: auto;
|
|
29674
|
-
--pf-v5-c-tabs--before--BorderColor: var(--pf-
|
|
29675
|
-
--pf-v5-c-tabs--before--border-width--base: var(--pf-
|
|
29672
|
+
--pf-v5-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
29673
|
+
--pf-v5-c-tabs--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
29676
29674
|
--pf-v5-c-tabs--before--BorderTopWidth: 0;
|
|
29677
29675
|
--pf-v5-c-tabs--before--BorderRightWidth: 0;
|
|
29678
29676
|
--pf-v5-c-tabs--before--BorderBottomWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
29679
29677
|
--pf-v5-c-tabs--before--BorderLeftWidth: 0;
|
|
29680
|
-
--pf-v5-c-tabs--m-vertical--inset: var(--pf-
|
|
29681
|
-
--pf-v5-c-tabs--m-page-insets--inset: var(--pf-
|
|
29682
|
-
--pf-v5-c-tabs--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
|
|
29678
|
+
--pf-v5-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
|
|
29679
|
+
--pf-v5-c-tabs--m-page-insets--inset: var(--pf-t--global--spacer--md);
|
|
29683
29680
|
--pf-v5-c-tabs--m-vertical--Width: 100%;
|
|
29684
29681
|
--pf-v5-c-tabs--m-vertical--MaxWidth: 15.625rem;
|
|
29685
|
-
--pf-v5-c-tabs--m-vertical--m-box--inset: var(--pf-
|
|
29682
|
+
--pf-v5-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
|
|
29686
29683
|
--pf-v5-c-tabs--m-vertical__list--before--BorderColor: var(--pf-v5-c-tabs--before--BorderColor);
|
|
29687
29684
|
--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth: 0;
|
|
29688
29685
|
--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth: 0;
|
|
@@ -29690,32 +29687,50 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29690
29687
|
--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
29691
29688
|
--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29692
29689
|
--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
29693
|
-
--pf-v5-c-tabs--m-color-scheme--light-300__link--BackgroundColor: transparent;
|
|
29694
|
-
--pf-v5-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
|
|
29695
|
-
--pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--palette--black-150);
|
|
29696
29690
|
--pf-v5-c-tabs__list--Display: flex;
|
|
29697
|
-
--pf-v5-c-tabs__item--
|
|
29698
|
-
--pf-v5-c-
|
|
29699
|
-
--pf-v5-c-
|
|
29700
|
-
--pf-v5-c-
|
|
29701
|
-
--pf-v5-c-
|
|
29702
|
-
--pf-v5-c-
|
|
29703
|
-
--pf-v5-c-
|
|
29704
|
-
--pf-v5-c-
|
|
29705
|
-
--pf-v5-c-
|
|
29706
|
-
--pf-v5-c-
|
|
29707
|
-
--pf-v5-c-
|
|
29708
|
-
--pf-v5-c-
|
|
29709
|
-
--pf-v5-c-
|
|
29710
|
-
--pf-v5-c-
|
|
29711
|
-
--pf-v5-c-
|
|
29712
|
-
--pf-v5-c-
|
|
29713
|
-
--pf-v5-c-
|
|
29714
|
-
--pf-v5-c-
|
|
29715
|
-
--pf-v5-c-
|
|
29716
|
-
--pf-v5-c-
|
|
29717
|
-
--pf-v5-c-tabs__link--
|
|
29718
|
-
--pf-v5-c-tabs__link--
|
|
29691
|
+
--pf-v5-c-tabs__item--BackgroundColor: transparent;
|
|
29692
|
+
--pf-v5-c-tabs__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
29693
|
+
--pf-v5-c-tabs__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
29694
|
+
--pf-v5-c-tabs__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
29695
|
+
--pf-v5-c-tabs__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
29696
|
+
--pf-v5-c-tabs__item--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
29697
|
+
--pf-v5-c-tabs--m-vertical__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
29698
|
+
--pf-v5-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
29699
|
+
--pf-v5-c-tabs__item--m-current--BackgroundColor: transparent;
|
|
29700
|
+
--pf-v5-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
29701
|
+
--pf-v5-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
29702
|
+
--pf-v5-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
29703
|
+
--pf-v5-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
29704
|
+
--pf-v5-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
|
|
29705
|
+
--pf-v5-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
|
|
29706
|
+
--pf-v5-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
|
|
29707
|
+
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29708
|
+
--pf-v5-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
29709
|
+
--pf-v5-c-tabs__link--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
29710
|
+
--pf-v5-c-tabs__link--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
29711
|
+
--pf-v5-c-tabs__link--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
29712
|
+
--pf-v5-c-tabs__link--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
29713
|
+
--pf-v5-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
29714
|
+
--pf-v5-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
29715
|
+
--pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
29716
|
+
--pf-v5-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
29717
|
+
--pf-v5-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
|
|
29718
|
+
--pf-v5-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29719
|
+
--pf-v5-c-tabs--m-vertical__link--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
29720
|
+
--pf-v5-c-tabs--m-vertical__link--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
29721
|
+
--pf-v5-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29722
|
+
--pf-v5-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
29723
|
+
--pf-v5-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
29724
|
+
--pf-v5-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
29725
|
+
--pf-v5-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29726
|
+
--pf-v5-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29727
|
+
--pf-v5-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
29728
|
+
--pf-v5-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
29729
|
+
--pf-v5-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
29730
|
+
--pf-v5-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29731
|
+
--pf-v5-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
|
29732
|
+
--pf-v5-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
|
|
29733
|
+
--pf-v5-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
29719
29734
|
--pf-v5-c-tabs__link--before--BorderTopColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
29720
29735
|
--pf-v5-c-tabs__link--before--BorderRightColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
29721
29736
|
--pf-v5-c-tabs__link--before--BorderBottomColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
@@ -29731,29 +29746,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29731
29746
|
--pf-v5-c-tabs__link--after--Top: auto;
|
|
29732
29747
|
--pf-v5-c-tabs__link--after--Right: 0;
|
|
29733
29748
|
--pf-v5-c-tabs__link--after--Bottom: 0;
|
|
29734
|
-
--pf-v5-c-tabs__link--after--BorderColor: var(--pf-
|
|
29749
|
+
--pf-v5-c-tabs__link--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
29735
29750
|
--pf-v5-c-tabs__link--after--BorderWidth: 0;
|
|
29736
29751
|
--pf-v5-c-tabs__link--after--BorderTopWidth: 0;
|
|
29737
29752
|
--pf-v5-c-tabs__link--after--BorderRightWidth: 0;
|
|
29738
29753
|
--pf-v5-c-tabs__link--after--BorderLeftWidth: 0;
|
|
29739
|
-
--pf-v5-c-
|
|
29740
|
-
--pf-v5-c-
|
|
29741
|
-
--pf-v5-c-
|
|
29742
|
-
--pf-v5-c-
|
|
29743
|
-
--pf-v5-c-
|
|
29744
|
-
--pf-v5-c-
|
|
29745
|
-
--pf-v5-c-tabs__scroll-button--
|
|
29746
|
-
--pf-v5-c-tabs__scroll-button--hover--Color: var(--pf-v5-global--active-color--100);
|
|
29747
|
-
--pf-v5-c-tabs__scroll-button--disabled--Color: var(--pf-v5-global--disabled-color--200);
|
|
29748
|
-
--pf-v5-c-tabs__scroll-button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
29749
|
-
--pf-v5-c-tabs__scroll-button--Width: var(--pf-v5-global--spacer--2xl);
|
|
29750
|
-
--pf-v5-c-tabs__scroll-button--xl--Width: var(--pf-v5-global--spacer--3xl);
|
|
29751
|
-
--pf-v5-c-tabs__scroll-button--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
|
|
29754
|
+
--pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
29755
|
+
--pf-v5-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
|
|
29756
|
+
--pf-v5-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
29757
|
+
--pf-v5-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
29758
|
+
--pf-v5-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
29759
|
+
--pf-v5-c-tabs__scroll-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
29760
|
+
--pf-v5-c-tabs__scroll-button--Width: var(--pf-t--global--spacer--2xl);
|
|
29752
29761
|
--pf-v5-c-tabs__scroll-button--TransitionDuration--margin: .125s;
|
|
29753
29762
|
--pf-v5-c-tabs__scroll-button--TransitionDuration--transform: .125s;
|
|
29754
29763
|
--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity: .125s;
|
|
29755
29764
|
--pf-v5-c-tabs__scroll-button--before--BorderColor: var(--pf-v5-c-tabs--before--BorderColor);
|
|
29756
|
-
--pf-v5-c-tabs__scroll-button--before--border-width--base: var(--pf-
|
|
29765
|
+
--pf-v5-c-tabs__scroll-button--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
29757
29766
|
--pf-v5-c-tabs__scroll-button--before--BorderRightWidth: 0;
|
|
29758
29767
|
--pf-v5-c-tabs__scroll-button--before--BorderBottomWidth: var(--pf-v5-c-tabs__scroll-button--before--border-width--base);
|
|
29759
29768
|
--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth: 0;
|
|
@@ -29763,44 +29772,38 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29763
29772
|
--pf-v5-c-tabs__item--ScrollSnapAlign: end;
|
|
29764
29773
|
--pf-v5-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
|
|
29765
29774
|
--pf-v5-c-tabs__toggle--Display: flex;
|
|
29766
|
-
--pf-v5-c-tabs__toggle--MarginBottom: 0;
|
|
29767
|
-
--pf-v5-c-tabs--m-expanded__toggle--MarginBottom: var(--pf-v5-global--spacer--md);
|
|
29768
29775
|
--pf-v5-c-tabs__toggle-icon--Color: currentcolor;
|
|
29769
|
-
--pf-v5-c-tabs__toggle-icon--Transition:
|
|
29776
|
+
--pf-v5-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
|
|
29770
29777
|
--pf-v5-c-tabs__toggle-icon--Rotate: 0;
|
|
29771
29778
|
--pf-v5-c-tabs__toggle-text--MarginLeft: 0;
|
|
29772
|
-
--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft: var(--pf-
|
|
29773
|
-
--pf-v5-c-tabs__toggle-button__toggle-text--Color: var(--pf-
|
|
29774
|
-
--pf-v5-c-
|
|
29775
|
-
--pf-v5-c-tabs__toggle-button--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
|
|
29776
|
-
--pf-v5-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
|
|
29777
|
-
--pf-v5-c-tabs--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
|
|
29779
|
+
--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
|
|
29780
|
+
--pf-v5-c-tabs__toggle-button__toggle-text--Color: var(--pf-t--global--text--color--regular);
|
|
29781
|
+
--pf-v5-c-tabs--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
29778
29782
|
--pf-v5-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
|
|
29779
|
-
--pf-v5-c-
|
|
29780
|
-
--pf-v5-c-tabs--m-
|
|
29781
|
-
--pf-v5-c-
|
|
29782
|
-
--pf-v5-c-
|
|
29783
|
-
--pf-v5-c-
|
|
29784
|
-
--pf-v5-c-tabs__item-action--c-button--
|
|
29785
|
-
--pf-v5-c-
|
|
29786
|
-
--pf-v5-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
|
|
29783
|
+
--pf-v5-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
|
|
29784
|
+
--pf-v5-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
29785
|
+
--pf-v5-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
29786
|
+
--pf-v5-c-tabs--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
29787
|
+
--pf-v5-c-tabs--m-expandable--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
29788
|
+
--pf-v5-c-tabs__item-action--c-button--FontSize: var(--pf-t--global--font--size--sm);
|
|
29789
|
+
--pf-v5-c-tabs--m-subtab__item-action--c-button--FontSize: var(--pf-t--global--font--size--xs);
|
|
29787
29790
|
--pf-v5-c-tabs__item-action-icon--MarginTop: 0.125rem;
|
|
29788
29791
|
--pf-v5-c-tabs__add--before--BorderColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
29789
29792
|
--pf-v5-c-tabs__add--before--BorderLeftWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29790
|
-
--pf-v5-c-tabs__add--c-button--FontSize: var(--pf-
|
|
29791
|
-
--pf-v5-c-tabs--m-
|
|
29792
|
-
--pf-v5-c-tabs__add--
|
|
29793
|
-
--pf-v5-c-tabs__add--
|
|
29794
|
-
--pf-v5-c-tabs__add--
|
|
29795
|
-
--pf-v5-c-
|
|
29793
|
+
--pf-v5-c-tabs__add--c-button--FontSize: var(--pf-t--global--font--size--sm);
|
|
29794
|
+
--pf-v5-c-tabs--m-subtab__add--c-button--FontSize: var(--pf-t--global--font--size--xs);
|
|
29795
|
+
--pf-v5-c-tabs__add--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
29796
|
+
--pf-v5-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
29797
|
+
--pf-v5-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
29798
|
+
--pf-v5-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
29799
|
+
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
29796
29800
|
--pf-v5-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
|
|
29797
29801
|
--pf-v5-c-tabs__link-toggle-icon--Rotate: 0;
|
|
29798
|
-
--pf-v5-c-tabs__link-toggle-icon--FontSize: var(--pf-
|
|
29799
|
-
--pf-v5-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
|
|
29802
|
+
--pf-v5-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--FontSize--sm);
|
|
29800
29803
|
--pf-v5-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
|
|
29801
|
-
|
|
29802
|
-
|
|
29803
|
-
|
|
29804
|
+
}
|
|
29805
|
+
|
|
29806
|
+
.pf-v5-c-tabs {
|
|
29804
29807
|
position: relative;
|
|
29805
29808
|
display: flex;
|
|
29806
29809
|
width: var(--pf-v5-c-tabs--Width);
|
|
@@ -29808,12 +29811,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29808
29811
|
padding-inline-end: var(--pf-v5-c-tabs--inset);
|
|
29809
29812
|
overflow: hidden;
|
|
29810
29813
|
}
|
|
29811
|
-
@media screen and (min-width: 1200px) {
|
|
29812
|
-
.pf-v5-c-tabs {
|
|
29813
|
-
--pf-v5-c-tabs__scroll-button--Width: var(--pf-v5-c-tabs__scroll-button--xl--Width);
|
|
29814
|
-
--pf-v5-c-tabs--m-page-insets--inset: var(--pf-v5-c-tabs--m-page-insets--xl--inset);
|
|
29815
|
-
}
|
|
29816
|
-
}
|
|
29817
29814
|
.pf-v5-c-tabs::before {
|
|
29818
29815
|
position: absolute;
|
|
29819
29816
|
inset-block-end: 0;
|
|
@@ -29860,11 +29857,14 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29860
29857
|
--pf-v5-c-tabs__link--after--BorderBottomWidth: 0;
|
|
29861
29858
|
}
|
|
29862
29859
|
.pf-v5-c-tabs.pf-m-box {
|
|
29860
|
+
--pf-v5-c-tabs__item--BackgroundColor: var(--pf-v5-c-tabs--m-box__item--BackgroundColor);
|
|
29861
|
+
--pf-v5-c-tabs__item--m-current--BackgroundColor: var(--pf-v5-c-tabs--m-box__item--m-current--BackgroundColor);
|
|
29863
29862
|
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs--m-box__link--BackgroundColor);
|
|
29863
|
+
--pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-c-tabs--m-box__link--disabled--Color);
|
|
29864
29864
|
--pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-c-tabs--m-box__link--disabled--BackgroundColor);
|
|
29865
|
+
--pf-v5-c-tabs__link--hover--BackgroundColor: var(--pf-v5-c-tabs--m-box__link--hover--BackgroundColor);
|
|
29866
|
+
--pf-v5-c-tabs__item--m-current__link--BackgroundColor: var(--pf-v5-c-tabs--m-box__item--m-current__link--BackgroundColor);
|
|
29865
29867
|
--pf-v5-c-tabs__link--before--BorderBottomWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29866
|
-
--pf-v5-c-tabs__link--before--BorderRightWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29867
|
-
--pf-v5-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29868
29868
|
--pf-v5-c-tabs__link--after--Top: 0;
|
|
29869
29869
|
--pf-v5-c-tabs__link--after--Bottom: auto;
|
|
29870
29870
|
}
|
|
@@ -29893,20 +29893,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29893
29893
|
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item {
|
|
29894
29894
|
--pf-v5-c-tabs__link--before--Left: 0;
|
|
29895
29895
|
}
|
|
29896
|
-
.pf-v5-c-tabs.pf-m-box.pf-m-
|
|
29897
|
-
--pf-v5-c-
|
|
29898
|
-
--pf-v5-c-tabs__item--m-
|
|
29899
|
-
--pf-v5-c-tabs__link--
|
|
29900
|
-
|
|
29901
|
-
|
|
29902
|
-
--pf-v5-c-
|
|
29896
|
+
.pf-v5-c-tabs.pf-m-box.pf-m-secondary {
|
|
29897
|
+
--pf-v5-c-tabs__item--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__item--BackgroundColor);
|
|
29898
|
+
--pf-v5-c-tabs__item--m-current--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor);
|
|
29899
|
+
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__link--BackgroundColor);
|
|
29900
|
+
--pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-c-tabs--m-box--m-secondary__link--disabled--Color);
|
|
29901
|
+
--pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor);
|
|
29902
|
+
--pf-v5-c-tabs__link--hover--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__link--hover--BackgroundColor);
|
|
29903
|
+
--pf-v5-c-tabs__item--m-current__link--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor);
|
|
29903
29904
|
}
|
|
29904
29905
|
.pf-v5-c-tabs.pf-m-vertical {
|
|
29905
29906
|
--pf-v5-c-tabs--Width: var(--pf-v5-c-tabs--m-vertical--Width);
|
|
29906
29907
|
--pf-v5-c-tabs--inset: var(--pf-v5-c-tabs--m-vertical--inset);
|
|
29907
29908
|
--pf-v5-c-tabs--before--BorderBottomWidth: 0;
|
|
29908
|
-
--pf-v5-c-
|
|
29909
|
-
--pf-v5-c-
|
|
29909
|
+
--pf-v5-c-tabs__item--PaddingInlineStart: var(--pf-v5-c-tabs--m-vertical__item--PaddingInlineStart);
|
|
29910
|
+
--pf-v5-c-tabs__item--PaddingInlineEnd: var(--pf-v5-c-tabs--m-vertical__item--PaddingInlineEnd);
|
|
29911
|
+
--pf-v5-c-tabs__link--PaddingLeft: var(--pf-v5-c-tabs--m-vertical__link--PaddingLeft);
|
|
29912
|
+
--pf-v5-c-tabs__link--PaddingRight: var(--pf-v5-c-tabs--m-vertical__link--PaddingRight);
|
|
29910
29913
|
--pf-v5-c-tabs__link--before--Left: 0;
|
|
29911
29914
|
--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth: 0;
|
|
29912
29915
|
--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
@@ -30009,9 +30012,15 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30009
30012
|
--pf-v5-c-tabs__toggle--Display: none;
|
|
30010
30013
|
}
|
|
30011
30014
|
}
|
|
30015
|
+
.pf-v5-c-tabs.pf-m-vertical.pf-m-expandable {
|
|
30016
|
+
row-gap: var(--pf-v5-c-tabs--m-expandable--RowGap);
|
|
30017
|
+
padding-block-start: var(--pf-v5-c-tabs--m-expandable--PaddingBlockStart);
|
|
30018
|
+
padding-block-end: var(--pf-v5-c-tabs--m-expandable--PaddingBlockEnd);
|
|
30019
|
+
padding-inline-start: var(--pf-v5-c-tabs--m-expandable--PaddingInlineStart);
|
|
30020
|
+
padding-inline-end: var(--pf-v5-c-tabs--m-expandable--PaddingInlineEnd);
|
|
30021
|
+
}
|
|
30012
30022
|
.pf-v5-c-tabs.pf-m-vertical.pf-m-expanded {
|
|
30013
30023
|
--pf-v5-c-tabs__list--Display: flex;
|
|
30014
|
-
--pf-v5-c-tabs__toggle--MarginBottom: var(--pf-v5-c-tabs--m-expanded__toggle--MarginBottom);
|
|
30015
30024
|
--pf-v5-c-tabs__toggle-icon--Color: var(--pf-v5-c-tabs--m-expanded__toggle-icon--Color);
|
|
30016
30025
|
--pf-v5-c-tabs__toggle-icon--Rotate: var(--pf-v5-c-tabs--m-expanded__toggle-icon--Rotate);
|
|
30017
30026
|
}
|
|
@@ -30019,6 +30028,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30019
30028
|
--pf-v5-c-tabs--inset: var(--pf-v5-c-tabs--m-vertical--m-box--inset);
|
|
30020
30029
|
--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth: 0;
|
|
30021
30030
|
--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
30031
|
+
--pf-v5-c-tabs__link--before--BorderRightWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30022
30032
|
--pf-v5-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
30023
30033
|
--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
30024
30034
|
--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth: 0;
|
|
@@ -30028,16 +30038,14 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30028
30038
|
inset-inline-end: 0;
|
|
30029
30039
|
}
|
|
30030
30040
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:last-child {
|
|
30031
|
-
--pf-v5-c-tabs__link--before--BorderBottomWidth: 0;
|
|
30032
30041
|
--pf-v5-c-tabs__link--before--BorderRightWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30033
30042
|
}
|
|
30043
|
+
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:first-child {
|
|
30044
|
+
--pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30045
|
+
}
|
|
30034
30046
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current {
|
|
30035
30047
|
--pf-v5-c-tabs__link--before--BorderRightColor: var(--pf-v5-c-tabs__item--m-current__link--BackgroundColor);
|
|
30036
30048
|
--pf-v5-c-tabs__link--before--BorderBottomColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
30037
|
-
--pf-v5-c-tabs__link--before--BorderBottomWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30038
|
-
}
|
|
30039
|
-
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current:first-child {
|
|
30040
|
-
--pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30041
30049
|
}
|
|
30042
30050
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:first-child.pf-m-current {
|
|
30043
30051
|
--pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
@@ -30049,10 +30057,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30049
30057
|
.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 {
|
|
30050
30058
|
inset-block-start: 0;
|
|
30051
30059
|
}
|
|
30052
|
-
.pf-v5-c-tabs.pf-m-
|
|
30053
|
-
--pf-v5-c-tabs__link--FontSize: var(--pf-v5-c-tabs--m-
|
|
30054
|
-
--pf-v5-c-tabs__item-action--c-button--FontSize: var(--pf-v5-c-tabs--m-
|
|
30055
|
-
--pf-v5-c-tabs__add--c-button--FontSize: var(--pf-v5-c-tabs--m-
|
|
30060
|
+
.pf-v5-c-tabs.pf-m-subtab {
|
|
30061
|
+
--pf-v5-c-tabs__link--FontSize: var(--pf-v5-c-tabs--m-subtab__link--FontSize);
|
|
30062
|
+
--pf-v5-c-tabs__item-action--c-button--FontSize: var(--pf-v5-c-tabs--m-subtab__item-action--c-button--FontSize);
|
|
30063
|
+
--pf-v5-c-tabs__add--c-button--FontSize: var(--pf-v5-c-tabs--m-subtab__add--c-button--FontSize);
|
|
30056
30064
|
}
|
|
30057
30065
|
.pf-v5-c-tabs.pf-m-page-insets {
|
|
30058
30066
|
--pf-v5-c-tabs--inset: var(--pf-v5-c-tabs--m-page-insets--inset);
|
|
@@ -30065,15 +30073,11 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30065
30073
|
.pf-v5-c-tabs__toggle {
|
|
30066
30074
|
display: var(--pf-v5-c-tabs__toggle--Display);
|
|
30067
30075
|
align-items: center;
|
|
30068
|
-
margin-block-end: var(--pf-v5-c-tabs__toggle--MarginBottom);
|
|
30069
30076
|
}
|
|
30070
30077
|
|
|
30071
30078
|
.pf-v5-c-tabs__toggle-button {
|
|
30072
30079
|
--pf-v5-c-tabs__toggle-text--MarginLeft: var(--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft);
|
|
30073
30080
|
--pf-v5-c-tabs__toggle-text--Color: var(--pf-v5-c-tabs__toggle-button__toggle-text--Color);
|
|
30074
|
-
margin-block-start: var(--pf-v5-c-tabs__toggle-button--MarginTop);
|
|
30075
|
-
margin-block-end: var(--pf-v5-c-tabs__toggle-button--MarginBottom);
|
|
30076
|
-
margin-inline-start: var(--pf-v5-c-tabs__toggle-button--MarginLeft);
|
|
30077
30081
|
}
|
|
30078
30082
|
.pf-v5-c-tabs__toggle-button .pf-v5-c-button {
|
|
30079
30083
|
display: flex;
|
|
@@ -30112,17 +30116,24 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30112
30116
|
}
|
|
30113
30117
|
|
|
30114
30118
|
.pf-v5-c-tabs__item {
|
|
30119
|
+
position: relative;
|
|
30115
30120
|
display: flex;
|
|
30116
30121
|
flex: none;
|
|
30122
|
+
column-gap: var(--pf-v5-c-tabs__item--ColumnGap);
|
|
30117
30123
|
scroll-snap-align: var(--pf-v5-c-tabs__item--ScrollSnapAlign);
|
|
30124
|
+
padding-block-start: var(--pf-v5-c-tabs__item--PaddingBlockStart);
|
|
30125
|
+
padding-block-end: var(--pf-v5-c-tabs__item--PaddingBlockEnd);
|
|
30126
|
+
padding-inline-start: var(--pf-v5-c-tabs__item--PaddingInlineStart);
|
|
30127
|
+
padding-inline-end: var(--pf-v5-c-tabs__item--PaddingInlineEnd);
|
|
30128
|
+
background-color: var(--pf-v5-c-tabs__item--BackgroundColor);
|
|
30118
30129
|
}
|
|
30119
30130
|
.pf-v5-c-tabs__item.pf-m-current {
|
|
30120
30131
|
--pf-v5-c-tabs__link--Color: var(--pf-v5-c-tabs__item--m-current__link--Color);
|
|
30121
30132
|
--pf-v5-c-tabs__link--after--BorderColor: var(--pf-v5-c-tabs__item--m-current__link--after--BorderColor);
|
|
30122
30133
|
--pf-v5-c-tabs__link--after--BorderWidth: var(--pf-v5-c-tabs__item--m-current__link--after--BorderWidth);
|
|
30134
|
+
--pf-v5-c-tabs__item--BackgroundColor: var(--pf-v5-c-tabs__item--m-current--BackgroundColor);
|
|
30123
30135
|
}
|
|
30124
30136
|
.pf-v5-c-tabs__item.pf-m-action {
|
|
30125
|
-
--pf-v5-c-tabs__link--PaddingRight: var(--pf-v5-c-tabs__item--m-action__link--PaddingRight);
|
|
30126
30137
|
position: relative;
|
|
30127
30138
|
}
|
|
30128
30139
|
.pf-v5-c-tabs__item.pf-m-action::before {
|
|
@@ -30167,9 +30178,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30167
30178
|
}
|
|
30168
30179
|
|
|
30169
30180
|
.pf-v5-c-tabs__link {
|
|
30170
|
-
position: relative;
|
|
30171
30181
|
display: flex;
|
|
30172
30182
|
flex: 1;
|
|
30183
|
+
column-gap: var(--pf-v5-c-tabs__link--ColumnGap);
|
|
30184
|
+
align-items: center;
|
|
30173
30185
|
padding-block-start: var(--pf-v5-c-tabs__link--PaddingTop);
|
|
30174
30186
|
padding-block-end: var(--pf-v5-c-tabs__link--PaddingBottom);
|
|
30175
30187
|
padding-inline-start: var(--pf-v5-c-tabs__link--PaddingLeft);
|
|
@@ -30177,11 +30189,11 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30177
30189
|
font-size: var(--pf-v5-c-tabs__link--FontSize);
|
|
30178
30190
|
color: var(--pf-v5-c-tabs__link--Color);
|
|
30179
30191
|
text-decoration: none;
|
|
30180
|
-
|
|
30192
|
+
background-color: var(--pf-v5-c-tabs__link--BackgroundColor);
|
|
30193
|
+
border-radius: var(--pf-v5-c-tabs__link--BorderRadius);
|
|
30181
30194
|
}
|
|
30182
30195
|
.pf-v5-c-tabs__item.pf-m-action, .pf-v5-c-tabs__link {
|
|
30183
30196
|
--pf-v5-c-tabs__link--after--BorderBottomWidth: var(--pf-v5-c-tabs__link--after--BorderWidth);
|
|
30184
|
-
background-color: var(--pf-v5-c-tabs__link--BackgroundColor);
|
|
30185
30197
|
}
|
|
30186
30198
|
|
|
30187
30199
|
.pf-v5-c-tabs__item.pf-m-action::before, .pf-v5-c-tabs__link::before {
|
|
@@ -30208,52 +30220,32 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30208
30220
|
border-inline-end-width: var(--pf-v5-c-tabs__link--after--BorderRightWidth);
|
|
30209
30221
|
}
|
|
30210
30222
|
|
|
30211
|
-
.pf-v5-c-
|
|
30212
|
-
--pf-v5-c-tabs__link--
|
|
30213
|
-
|
|
30214
|
-
|
|
30215
|
-
.pf-v5-c-tabs__item.pf-m-action:focus-within, .pf-v5-c-tabs__link:focus {
|
|
30216
|
-
--pf-v5-c-tabs__link--after--BorderWidth: var(--pf-v5-c-tabs__link--focus--after--BorderWidth);
|
|
30217
|
-
}
|
|
30218
|
-
|
|
30219
|
-
.pf-v5-c-tabs__item.pf-m-action:active, .pf-v5-c-tabs__link:active {
|
|
30220
|
-
--pf-v5-c-tabs__link--after--BorderWidth: var(--pf-v5-c-tabs__link--active--after--BorderWidth);
|
|
30221
|
-
}
|
|
30222
|
-
|
|
30223
|
-
.pf-v5-c-tabs__link:hover {
|
|
30224
|
-
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-v5-c-tabs__link--hover__toggle-icon--Color);
|
|
30225
|
-
}
|
|
30226
|
-
.pf-v5-c-tabs__link:focus {
|
|
30227
|
-
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-v5-c-tabs__link--focus__toggle-icon--Color);
|
|
30228
|
-
}
|
|
30229
|
-
.pf-v5-c-tabs__link:active, .pf-v5-c-tabs__link.pf-m-active {
|
|
30230
|
-
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-v5-c-tabs__link--active__toggle-icon--Color);
|
|
30223
|
+
.pf-v5-c-tabs__link:where(:hover, :focus) {
|
|
30224
|
+
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs__link--hover--BackgroundColor);
|
|
30225
|
+
mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
|
30231
30226
|
}
|
|
30232
30227
|
.pf-v5-c-tabs__link:disabled, .pf-v5-c-tabs__link.pf-m-disabled {
|
|
30233
30228
|
pointer-events: none;
|
|
30234
30229
|
}
|
|
30235
30230
|
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled, .pf-v5-c-tabs__link:disabled, .pf-v5-c-tabs__link.pf-m-disabled, .pf-v5-c-tabs__link.pf-m-aria-disabled {
|
|
30236
30231
|
--pf-v5-c-tabs__link--Color: var(--pf-v5-c-tabs__link--disabled--Color);
|
|
30237
|
-
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs__link--disabled--BackgroundColor);
|
|
30238
30232
|
--pf-v5-c-tabs__link--before--BorderRightWidth: var(--pf-v5-c-tabs__link--disabled--before--BorderRightWidth);
|
|
30239
30233
|
--pf-v5-c-tabs__link--before--BorderBottomWidth: var(--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth);
|
|
30240
30234
|
--pf-v5-c-tabs__link--before--BorderLeftWidth: var(--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth);
|
|
30241
30235
|
--pf-v5-c-tabs__link--after--BorderWidth: 0;
|
|
30242
30236
|
}
|
|
30243
30237
|
|
|
30244
|
-
.pf-v5-c-tabs__link.pf-m-aria-disabled {
|
|
30245
|
-
|
|
30238
|
+
.pf-v5-c-tabs__link:disabled, .pf-v5-c-tabs__link.pf-m-disabled, .pf-v5-c-tabs__link.pf-m-aria-disabled {
|
|
30239
|
+
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs__link--disabled--BackgroundColor);
|
|
30246
30240
|
}
|
|
30247
|
-
.pf-v5-c-
|
|
30248
|
-
|
|
30249
|
-
margin-inline-end: var(--pf-v5-c-tabs__link--child--MarginRight);
|
|
30241
|
+
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled {
|
|
30242
|
+
--pf-v5-c-tabs__link--BackgroundColor: transparent;
|
|
30250
30243
|
}
|
|
30251
|
-
|
|
30252
|
-
.pf-v5-c-tabs__link
|
|
30253
|
-
|
|
30244
|
+
|
|
30245
|
+
.pf-v5-c-tabs__link.pf-m-aria-disabled {
|
|
30246
|
+
cursor: default;
|
|
30254
30247
|
}
|
|
30255
30248
|
.pf-v5-c-tabs__link.pf-m-expanded {
|
|
30256
|
-
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-v5-c-tabs__link--m-expanded__toggle-icon--Color);
|
|
30257
30249
|
--pf-v5-c-tabs__link-toggle-icon--Rotate: var(--pf-v5-c-tabs__link--m-expanded__toggle-icon--Rotate);
|
|
30258
30250
|
}
|
|
30259
30251
|
|
|
@@ -30273,14 +30265,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30273
30265
|
}
|
|
30274
30266
|
.pf-v5-c-tabs__item-action .pf-v5-c-button {
|
|
30275
30267
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-tabs__item-action--c-button--FontSize);
|
|
30276
|
-
--pf-v5-c-button--PaddingTop: var(--pf-v5-c-tabs__item-action--c-button--PaddingTop);
|
|
30277
|
-
--pf-v5-c-button--PaddingRight: var(--pf-v5-c-tabs__item-action--c-button--PaddingRight);
|
|
30278
|
-
--pf-v5-c-button--PaddingBottom: var(--pf-v5-c-tabs__item-action--c-button--PaddingBottom);
|
|
30279
|
-
--pf-v5-c-button--PaddingLeft: var(--pf-v5-c-tabs__item-action--c-button--PaddingLeft);
|
|
30280
|
-
outline-offset: var(--pf-v5-c-tabs__item-action--c-button--OutlineOffset);
|
|
30281
|
-
}
|
|
30282
|
-
.pf-v5-c-tabs__item-action:last-child {
|
|
30283
|
-
--pf-v5-c-tabs__item-action--c-button--PaddingRight: var(--pf-v5-c-tabs__item-action--last-child--c-button--PaddingRight);
|
|
30284
30268
|
}
|
|
30285
30269
|
|
|
30286
30270
|
.pf-v5-c-tabs__item-action-icon {
|
|
@@ -30289,22 +30273,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30289
30273
|
}
|
|
30290
30274
|
|
|
30291
30275
|
.pf-v5-c-tabs__scroll-button {
|
|
30292
|
-
|
|
30293
|
-
|
|
30294
|
-
|
|
30295
|
-
|
|
30296
|
-
background-color: var(--pf-v5-c-tabs__scroll-button--BackgroundColor);
|
|
30297
|
-
outline-offset: var(--pf-v5-c-tabs__scroll-button--OutlineOffset);
|
|
30276
|
+
padding-block-start: var(--pf-v5-c-tabs__scroll-button--PaddingBlockStart);
|
|
30277
|
+
padding-block-end: var(--pf-v5-c-tabs__scroll-button--PaddingBlockEnd);
|
|
30278
|
+
padding-inline-start: var(--pf-v5-c-tabs__scroll-button--PaddingInlineStart);
|
|
30279
|
+
padding-inline-end: var(--pf-v5-c-tabs__scroll-button--PaddingInlineEnd);
|
|
30298
30280
|
opacity: 0;
|
|
30299
30281
|
transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
|
|
30300
30282
|
}
|
|
30301
|
-
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
|
|
30302
|
-
scale: -1 1;
|
|
30303
|
-
}
|
|
30304
|
-
|
|
30305
|
-
.pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
|
|
30306
|
-
--pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
|
|
30307
|
-
}
|
|
30308
30283
|
.pf-v5-c-tabs__scroll-button::before {
|
|
30309
30284
|
border-color: var(--pf-v5-c-tabs__scroll-button--before--BorderColor);
|
|
30310
30285
|
border-block-start-width: 0;
|
|
@@ -30322,23 +30297,20 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30322
30297
|
margin-inline-start: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
|
|
30323
30298
|
transform: translateX(100%);
|
|
30324
30299
|
}
|
|
30325
|
-
.pf-v5-c-tabs__scroll-button:disabled {
|
|
30326
|
-
--pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--disabled--Color);
|
|
30327
|
-
pointer-events: none;
|
|
30328
|
-
}
|
|
30329
30300
|
|
|
30330
30301
|
.pf-v5-c-tabs__add {
|
|
30331
30302
|
position: relative;
|
|
30332
30303
|
display: flex;
|
|
30304
|
+
padding-block-start: var(--pf-v5-c-tabs__add--PaddingBlockStart);
|
|
30305
|
+
padding-block-end: var(--pf-v5-c-tabs__add--PaddingBlockEnd);
|
|
30306
|
+
padding-inline-start: var(--pf-v5-c-tabs__add--PaddingInlineStart);
|
|
30307
|
+
padding-inline-end: var(--pf-v5-c-tabs__add--PaddingInlineEnd);
|
|
30333
30308
|
}
|
|
30334
30309
|
.pf-v5-c-tabs__add::before {
|
|
30335
30310
|
border-inline-start: var(--pf-v5-c-tabs__add--before--BorderLeftWidth) solid var(--pf-v5-c-tabs__add--before--BorderColor);
|
|
30336
30311
|
}
|
|
30337
30312
|
.pf-v5-c-tabs__add .pf-v5-c-button {
|
|
30338
30313
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-tabs__add--c-button--FontSize);
|
|
30339
|
-
--pf-v5-c-button--PaddingTop: var(--pf-v5-c-tabs__add--c-button--PaddingTop);
|
|
30340
|
-
--pf-v5-c-button--PaddingBottom: var(--pf-v5-c-tabs__add--c-button--PaddingBottom);
|
|
30341
|
-
outline-offset: var(--pf-v5-c-tabs__add--c-button--OutlineOffset);
|
|
30342
30314
|
}
|
|
30343
30315
|
|
|
30344
30316
|
.pf-v5-c-tabs.pf-m-inset-none {
|
|
@@ -30532,17 +30504,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30532
30504
|
}
|
|
30533
30505
|
}
|
|
30534
30506
|
|
|
30535
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
|
|
30536
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
30537
|
-
}
|
|
30538
|
-
|
|
30539
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-tabs {
|
|
30540
|
-
--pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
|
|
30541
|
-
--pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
30542
|
-
--pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);
|
|
30543
|
-
--pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
30544
|
-
}
|
|
30545
|
-
|
|
30546
30507
|
.pf-v5-c-text-input-group {
|
|
30547
30508
|
--pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
30548
30509
|
--pf-v5-c-text-input-group__text--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
@@ -30966,8 +30927,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30966
30927
|
--pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
30967
30928
|
--pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
30968
30929
|
--pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
30969
|
-
--pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
30970
|
-
--pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
30971
30930
|
--pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
30972
30931
|
--pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
30973
30932
|
--pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
|
|
@@ -30979,7 +30938,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30979
30938
|
--pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
30980
30939
|
--pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
|
|
30981
30940
|
--pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
30941
|
+
--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
|
|
30982
30942
|
--pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
30943
|
+
--pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
30944
|
+
--pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
30945
|
+
--pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
|
|
30946
|
+
--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
|
|
30947
|
+
--pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
30983
30948
|
--pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
|
|
30984
30949
|
--pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
30985
30950
|
--pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
|
|
@@ -31032,7 +30997,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
31032
30997
|
inset-inline-end: 0;
|
|
31033
30998
|
pointer-events: none;
|
|
31034
30999
|
content: "";
|
|
31035
|
-
border:
|
|
31000
|
+
border-style: solid;
|
|
31001
|
+
border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
|
|
31002
|
+
border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
|
|
31003
|
+
border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
|
|
31004
|
+
border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
|
|
31005
|
+
border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
|
|
31036
31006
|
}
|
|
31037
31007
|
.pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
|
|
31038
31008
|
--pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
|
|
@@ -31049,9 +31019,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
31049
31019
|
.pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
|
|
31050
31020
|
--pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
|
|
31051
31021
|
--pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
|
|
31022
|
+
--pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
|
|
31023
|
+
--pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
|
|
31052
31024
|
pointer-events: none;
|
|
31053
31025
|
}
|
|
31054
31026
|
|
|
31027
|
+
.pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
|
|
31028
|
+
--pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
|
|
31029
|
+
}
|
|
31030
|
+
|
|
31031
|
+
.pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
|
|
31032
|
+
--pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
|
|
31033
|
+
}
|
|
31034
|
+
|
|
31055
31035
|
.pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
|
|
31056
31036
|
.pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
|
|
31057
31037
|
margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
|