@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
package/patternfly.css
CHANGED
|
@@ -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);
|
|
@@ -29785,21 +29782,21 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29785
29782
|
}
|
|
29786
29783
|
}
|
|
29787
29784
|
|
|
29788
|
-
|
|
29785
|
+
:where(:root),
|
|
29786
|
+
:where(.pf-v5-c-tabs) {
|
|
29789
29787
|
--pf-v5-c-tabs--inset: 0;
|
|
29790
29788
|
--pf-v5-c-tabs--Width: auto;
|
|
29791
|
-
--pf-v5-c-tabs--before--BorderColor: var(--pf-
|
|
29792
|
-
--pf-v5-c-tabs--before--border-width--base: var(--pf-
|
|
29789
|
+
--pf-v5-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
29790
|
+
--pf-v5-c-tabs--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
29793
29791
|
--pf-v5-c-tabs--before--BorderTopWidth: 0;
|
|
29794
29792
|
--pf-v5-c-tabs--before--BorderRightWidth: 0;
|
|
29795
29793
|
--pf-v5-c-tabs--before--BorderBottomWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
29796
29794
|
--pf-v5-c-tabs--before--BorderLeftWidth: 0;
|
|
29797
|
-
--pf-v5-c-tabs--m-vertical--inset: var(--pf-
|
|
29798
|
-
--pf-v5-c-tabs--m-page-insets--inset: var(--pf-
|
|
29799
|
-
--pf-v5-c-tabs--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
|
|
29795
|
+
--pf-v5-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
|
|
29796
|
+
--pf-v5-c-tabs--m-page-insets--inset: var(--pf-t--global--spacer--md);
|
|
29800
29797
|
--pf-v5-c-tabs--m-vertical--Width: 100%;
|
|
29801
29798
|
--pf-v5-c-tabs--m-vertical--MaxWidth: 15.625rem;
|
|
29802
|
-
--pf-v5-c-tabs--m-vertical--m-box--inset: var(--pf-
|
|
29799
|
+
--pf-v5-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
|
|
29803
29800
|
--pf-v5-c-tabs--m-vertical__list--before--BorderColor: var(--pf-v5-c-tabs--before--BorderColor);
|
|
29804
29801
|
--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth: 0;
|
|
29805
29802
|
--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth: 0;
|
|
@@ -29807,32 +29804,50 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29807
29804
|
--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
29808
29805
|
--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29809
29806
|
--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
29810
|
-
--pf-v5-c-tabs--m-color-scheme--light-300__link--BackgroundColor: transparent;
|
|
29811
|
-
--pf-v5-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
|
|
29812
|
-
--pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--palette--black-150);
|
|
29813
29807
|
--pf-v5-c-tabs__list--Display: flex;
|
|
29814
|
-
--pf-v5-c-tabs__item--
|
|
29815
|
-
--pf-v5-c-
|
|
29816
|
-
--pf-v5-c-
|
|
29817
|
-
--pf-v5-c-
|
|
29818
|
-
--pf-v5-c-
|
|
29819
|
-
--pf-v5-c-
|
|
29820
|
-
--pf-v5-c-
|
|
29821
|
-
--pf-v5-c-
|
|
29822
|
-
--pf-v5-c-
|
|
29823
|
-
--pf-v5-c-
|
|
29824
|
-
--pf-v5-c-
|
|
29825
|
-
--pf-v5-c-
|
|
29826
|
-
--pf-v5-c-
|
|
29827
|
-
--pf-v5-c-
|
|
29828
|
-
--pf-v5-c-
|
|
29829
|
-
--pf-v5-c-
|
|
29830
|
-
--pf-v5-c-
|
|
29831
|
-
--pf-v5-c-
|
|
29832
|
-
--pf-v5-c-
|
|
29833
|
-
--pf-v5-c-
|
|
29834
|
-
--pf-v5-c-tabs__link--
|
|
29835
|
-
--pf-v5-c-tabs__link--
|
|
29808
|
+
--pf-v5-c-tabs__item--BackgroundColor: transparent;
|
|
29809
|
+
--pf-v5-c-tabs__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
29810
|
+
--pf-v5-c-tabs__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
29811
|
+
--pf-v5-c-tabs__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
29812
|
+
--pf-v5-c-tabs__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
29813
|
+
--pf-v5-c-tabs__item--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
29814
|
+
--pf-v5-c-tabs--m-vertical__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
29815
|
+
--pf-v5-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
29816
|
+
--pf-v5-c-tabs__item--m-current--BackgroundColor: transparent;
|
|
29817
|
+
--pf-v5-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
29818
|
+
--pf-v5-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
29819
|
+
--pf-v5-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
29820
|
+
--pf-v5-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
29821
|
+
--pf-v5-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
|
|
29822
|
+
--pf-v5-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
|
|
29823
|
+
--pf-v5-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
|
|
29824
|
+
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29825
|
+
--pf-v5-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
29826
|
+
--pf-v5-c-tabs__link--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
29827
|
+
--pf-v5-c-tabs__link--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
29828
|
+
--pf-v5-c-tabs__link--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
29829
|
+
--pf-v5-c-tabs__link--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
29830
|
+
--pf-v5-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
29831
|
+
--pf-v5-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
29832
|
+
--pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
29833
|
+
--pf-v5-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
29834
|
+
--pf-v5-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
|
|
29835
|
+
--pf-v5-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29836
|
+
--pf-v5-c-tabs--m-vertical__link--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
29837
|
+
--pf-v5-c-tabs--m-vertical__link--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
29838
|
+
--pf-v5-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29839
|
+
--pf-v5-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
29840
|
+
--pf-v5-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
29841
|
+
--pf-v5-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
29842
|
+
--pf-v5-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29843
|
+
--pf-v5-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29844
|
+
--pf-v5-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
29845
|
+
--pf-v5-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
29846
|
+
--pf-v5-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
29847
|
+
--pf-v5-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
29848
|
+
--pf-v5-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
|
29849
|
+
--pf-v5-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
|
|
29850
|
+
--pf-v5-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
29836
29851
|
--pf-v5-c-tabs__link--before--BorderTopColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
29837
29852
|
--pf-v5-c-tabs__link--before--BorderRightColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
29838
29853
|
--pf-v5-c-tabs__link--before--BorderBottomColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
@@ -29848,29 +29863,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29848
29863
|
--pf-v5-c-tabs__link--after--Top: auto;
|
|
29849
29864
|
--pf-v5-c-tabs__link--after--Right: 0;
|
|
29850
29865
|
--pf-v5-c-tabs__link--after--Bottom: 0;
|
|
29851
|
-
--pf-v5-c-tabs__link--after--BorderColor: var(--pf-
|
|
29866
|
+
--pf-v5-c-tabs__link--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
29852
29867
|
--pf-v5-c-tabs__link--after--BorderWidth: 0;
|
|
29853
29868
|
--pf-v5-c-tabs__link--after--BorderTopWidth: 0;
|
|
29854
29869
|
--pf-v5-c-tabs__link--after--BorderRightWidth: 0;
|
|
29855
29870
|
--pf-v5-c-tabs__link--after--BorderLeftWidth: 0;
|
|
29856
|
-
--pf-v5-c-
|
|
29857
|
-
--pf-v5-c-
|
|
29858
|
-
--pf-v5-c-
|
|
29859
|
-
--pf-v5-c-
|
|
29860
|
-
--pf-v5-c-
|
|
29861
|
-
--pf-v5-c-
|
|
29862
|
-
--pf-v5-c-tabs__scroll-button--
|
|
29863
|
-
--pf-v5-c-tabs__scroll-button--hover--Color: var(--pf-v5-global--active-color--100);
|
|
29864
|
-
--pf-v5-c-tabs__scroll-button--disabled--Color: var(--pf-v5-global--disabled-color--200);
|
|
29865
|
-
--pf-v5-c-tabs__scroll-button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
29866
|
-
--pf-v5-c-tabs__scroll-button--Width: var(--pf-v5-global--spacer--2xl);
|
|
29867
|
-
--pf-v5-c-tabs__scroll-button--xl--Width: var(--pf-v5-global--spacer--3xl);
|
|
29868
|
-
--pf-v5-c-tabs__scroll-button--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
|
|
29871
|
+
--pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
29872
|
+
--pf-v5-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
|
|
29873
|
+
--pf-v5-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
29874
|
+
--pf-v5-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
29875
|
+
--pf-v5-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
29876
|
+
--pf-v5-c-tabs__scroll-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
29877
|
+
--pf-v5-c-tabs__scroll-button--Width: var(--pf-t--global--spacer--2xl);
|
|
29869
29878
|
--pf-v5-c-tabs__scroll-button--TransitionDuration--margin: .125s;
|
|
29870
29879
|
--pf-v5-c-tabs__scroll-button--TransitionDuration--transform: .125s;
|
|
29871
29880
|
--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity: .125s;
|
|
29872
29881
|
--pf-v5-c-tabs__scroll-button--before--BorderColor: var(--pf-v5-c-tabs--before--BorderColor);
|
|
29873
|
-
--pf-v5-c-tabs__scroll-button--before--border-width--base: var(--pf-
|
|
29882
|
+
--pf-v5-c-tabs__scroll-button--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
29874
29883
|
--pf-v5-c-tabs__scroll-button--before--BorderRightWidth: 0;
|
|
29875
29884
|
--pf-v5-c-tabs__scroll-button--before--BorderBottomWidth: var(--pf-v5-c-tabs__scroll-button--before--border-width--base);
|
|
29876
29885
|
--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth: 0;
|
|
@@ -29880,44 +29889,38 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29880
29889
|
--pf-v5-c-tabs__item--ScrollSnapAlign: end;
|
|
29881
29890
|
--pf-v5-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
|
|
29882
29891
|
--pf-v5-c-tabs__toggle--Display: flex;
|
|
29883
|
-
--pf-v5-c-tabs__toggle--MarginBottom: 0;
|
|
29884
|
-
--pf-v5-c-tabs--m-expanded__toggle--MarginBottom: var(--pf-v5-global--spacer--md);
|
|
29885
29892
|
--pf-v5-c-tabs__toggle-icon--Color: currentcolor;
|
|
29886
|
-
--pf-v5-c-tabs__toggle-icon--Transition:
|
|
29893
|
+
--pf-v5-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
|
|
29887
29894
|
--pf-v5-c-tabs__toggle-icon--Rotate: 0;
|
|
29888
29895
|
--pf-v5-c-tabs__toggle-text--MarginLeft: 0;
|
|
29889
|
-
--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft: var(--pf-
|
|
29890
|
-
--pf-v5-c-tabs__toggle-button__toggle-text--Color: var(--pf-
|
|
29891
|
-
--pf-v5-c-
|
|
29892
|
-
--pf-v5-c-tabs__toggle-button--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
|
|
29893
|
-
--pf-v5-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
|
|
29894
|
-
--pf-v5-c-tabs--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
|
|
29896
|
+
--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
|
|
29897
|
+
--pf-v5-c-tabs__toggle-button__toggle-text--Color: var(--pf-t--global--text--color--regular);
|
|
29898
|
+
--pf-v5-c-tabs--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
29895
29899
|
--pf-v5-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
|
|
29896
|
-
--pf-v5-c-
|
|
29897
|
-
--pf-v5-c-tabs--m-
|
|
29898
|
-
--pf-v5-c-
|
|
29899
|
-
--pf-v5-c-
|
|
29900
|
-
--pf-v5-c-
|
|
29901
|
-
--pf-v5-c-tabs__item-action--c-button--
|
|
29902
|
-
--pf-v5-c-
|
|
29903
|
-
--pf-v5-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
|
|
29900
|
+
--pf-v5-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
|
|
29901
|
+
--pf-v5-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
29902
|
+
--pf-v5-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
29903
|
+
--pf-v5-c-tabs--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
29904
|
+
--pf-v5-c-tabs--m-expandable--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
29905
|
+
--pf-v5-c-tabs__item-action--c-button--FontSize: var(--pf-t--global--font--size--sm);
|
|
29906
|
+
--pf-v5-c-tabs--m-subtab__item-action--c-button--FontSize: var(--pf-t--global--font--size--xs);
|
|
29904
29907
|
--pf-v5-c-tabs__item-action-icon--MarginTop: 0.125rem;
|
|
29905
29908
|
--pf-v5-c-tabs__add--before--BorderColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
29906
29909
|
--pf-v5-c-tabs__add--before--BorderLeftWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29907
|
-
--pf-v5-c-tabs__add--c-button--FontSize: var(--pf-
|
|
29908
|
-
--pf-v5-c-tabs--m-
|
|
29909
|
-
--pf-v5-c-tabs__add--
|
|
29910
|
-
--pf-v5-c-tabs__add--
|
|
29911
|
-
--pf-v5-c-tabs__add--
|
|
29912
|
-
--pf-v5-c-
|
|
29910
|
+
--pf-v5-c-tabs__add--c-button--FontSize: var(--pf-t--global--font--size--sm);
|
|
29911
|
+
--pf-v5-c-tabs--m-subtab__add--c-button--FontSize: var(--pf-t--global--font--size--xs);
|
|
29912
|
+
--pf-v5-c-tabs__add--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
29913
|
+
--pf-v5-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
29914
|
+
--pf-v5-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
29915
|
+
--pf-v5-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
29916
|
+
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
29913
29917
|
--pf-v5-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
|
|
29914
29918
|
--pf-v5-c-tabs__link-toggle-icon--Rotate: 0;
|
|
29915
|
-
--pf-v5-c-tabs__link-toggle-icon--FontSize: var(--pf-
|
|
29916
|
-
--pf-v5-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
|
|
29919
|
+
--pf-v5-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--FontSize--sm);
|
|
29917
29920
|
--pf-v5-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
|
|
29918
|
-
|
|
29919
|
-
|
|
29920
|
-
|
|
29921
|
+
}
|
|
29922
|
+
|
|
29923
|
+
.pf-v5-c-tabs {
|
|
29921
29924
|
position: relative;
|
|
29922
29925
|
display: flex;
|
|
29923
29926
|
width: var(--pf-v5-c-tabs--Width);
|
|
@@ -29925,12 +29928,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29925
29928
|
padding-inline-end: var(--pf-v5-c-tabs--inset);
|
|
29926
29929
|
overflow: hidden;
|
|
29927
29930
|
}
|
|
29928
|
-
@media screen and (min-width: 1200px) {
|
|
29929
|
-
.pf-v5-c-tabs {
|
|
29930
|
-
--pf-v5-c-tabs__scroll-button--Width: var(--pf-v5-c-tabs__scroll-button--xl--Width);
|
|
29931
|
-
--pf-v5-c-tabs--m-page-insets--inset: var(--pf-v5-c-tabs--m-page-insets--xl--inset);
|
|
29932
|
-
}
|
|
29933
|
-
}
|
|
29934
29931
|
.pf-v5-c-tabs::before {
|
|
29935
29932
|
position: absolute;
|
|
29936
29933
|
inset-block-end: 0;
|
|
@@ -29977,11 +29974,14 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
29977
29974
|
--pf-v5-c-tabs__link--after--BorderBottomWidth: 0;
|
|
29978
29975
|
}
|
|
29979
29976
|
.pf-v5-c-tabs.pf-m-box {
|
|
29977
|
+
--pf-v5-c-tabs__item--BackgroundColor: var(--pf-v5-c-tabs--m-box__item--BackgroundColor);
|
|
29978
|
+
--pf-v5-c-tabs__item--m-current--BackgroundColor: var(--pf-v5-c-tabs--m-box__item--m-current--BackgroundColor);
|
|
29980
29979
|
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs--m-box__link--BackgroundColor);
|
|
29980
|
+
--pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-c-tabs--m-box__link--disabled--Color);
|
|
29981
29981
|
--pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-c-tabs--m-box__link--disabled--BackgroundColor);
|
|
29982
|
+
--pf-v5-c-tabs__link--hover--BackgroundColor: var(--pf-v5-c-tabs--m-box__link--hover--BackgroundColor);
|
|
29983
|
+
--pf-v5-c-tabs__item--m-current__link--BackgroundColor: var(--pf-v5-c-tabs--m-box__item--m-current__link--BackgroundColor);
|
|
29982
29984
|
--pf-v5-c-tabs__link--before--BorderBottomWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29983
|
-
--pf-v5-c-tabs__link--before--BorderRightWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29984
|
-
--pf-v5-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
29985
29985
|
--pf-v5-c-tabs__link--after--Top: 0;
|
|
29986
29986
|
--pf-v5-c-tabs__link--after--Bottom: auto;
|
|
29987
29987
|
}
|
|
@@ -30010,20 +30010,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30010
30010
|
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item {
|
|
30011
30011
|
--pf-v5-c-tabs__link--before--Left: 0;
|
|
30012
30012
|
}
|
|
30013
|
-
.pf-v5-c-tabs.pf-m-box.pf-m-
|
|
30014
|
-
--pf-v5-c-
|
|
30015
|
-
--pf-v5-c-tabs__item--m-
|
|
30016
|
-
--pf-v5-c-tabs__link--
|
|
30017
|
-
|
|
30018
|
-
|
|
30019
|
-
--pf-v5-c-
|
|
30013
|
+
.pf-v5-c-tabs.pf-m-box.pf-m-secondary {
|
|
30014
|
+
--pf-v5-c-tabs__item--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__item--BackgroundColor);
|
|
30015
|
+
--pf-v5-c-tabs__item--m-current--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor);
|
|
30016
|
+
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__link--BackgroundColor);
|
|
30017
|
+
--pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-c-tabs--m-box--m-secondary__link--disabled--Color);
|
|
30018
|
+
--pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor);
|
|
30019
|
+
--pf-v5-c-tabs__link--hover--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__link--hover--BackgroundColor);
|
|
30020
|
+
--pf-v5-c-tabs__item--m-current__link--BackgroundColor: var(--pf-v5-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor);
|
|
30020
30021
|
}
|
|
30021
30022
|
.pf-v5-c-tabs.pf-m-vertical {
|
|
30022
30023
|
--pf-v5-c-tabs--Width: var(--pf-v5-c-tabs--m-vertical--Width);
|
|
30023
30024
|
--pf-v5-c-tabs--inset: var(--pf-v5-c-tabs--m-vertical--inset);
|
|
30024
30025
|
--pf-v5-c-tabs--before--BorderBottomWidth: 0;
|
|
30025
|
-
--pf-v5-c-
|
|
30026
|
-
--pf-v5-c-
|
|
30026
|
+
--pf-v5-c-tabs__item--PaddingInlineStart: var(--pf-v5-c-tabs--m-vertical__item--PaddingInlineStart);
|
|
30027
|
+
--pf-v5-c-tabs__item--PaddingInlineEnd: var(--pf-v5-c-tabs--m-vertical__item--PaddingInlineEnd);
|
|
30028
|
+
--pf-v5-c-tabs__link--PaddingLeft: var(--pf-v5-c-tabs--m-vertical__link--PaddingLeft);
|
|
30029
|
+
--pf-v5-c-tabs__link--PaddingRight: var(--pf-v5-c-tabs--m-vertical__link--PaddingRight);
|
|
30027
30030
|
--pf-v5-c-tabs__link--before--Left: 0;
|
|
30028
30031
|
--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth: 0;
|
|
30029
30032
|
--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
@@ -30126,9 +30129,15 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30126
30129
|
--pf-v5-c-tabs__toggle--Display: none;
|
|
30127
30130
|
}
|
|
30128
30131
|
}
|
|
30132
|
+
.pf-v5-c-tabs.pf-m-vertical.pf-m-expandable {
|
|
30133
|
+
row-gap: var(--pf-v5-c-tabs--m-expandable--RowGap);
|
|
30134
|
+
padding-block-start: var(--pf-v5-c-tabs--m-expandable--PaddingBlockStart);
|
|
30135
|
+
padding-block-end: var(--pf-v5-c-tabs--m-expandable--PaddingBlockEnd);
|
|
30136
|
+
padding-inline-start: var(--pf-v5-c-tabs--m-expandable--PaddingInlineStart);
|
|
30137
|
+
padding-inline-end: var(--pf-v5-c-tabs--m-expandable--PaddingInlineEnd);
|
|
30138
|
+
}
|
|
30129
30139
|
.pf-v5-c-tabs.pf-m-vertical.pf-m-expanded {
|
|
30130
30140
|
--pf-v5-c-tabs__list--Display: flex;
|
|
30131
|
-
--pf-v5-c-tabs__toggle--MarginBottom: var(--pf-v5-c-tabs--m-expanded__toggle--MarginBottom);
|
|
30132
30141
|
--pf-v5-c-tabs__toggle-icon--Color: var(--pf-v5-c-tabs--m-expanded__toggle-icon--Color);
|
|
30133
30142
|
--pf-v5-c-tabs__toggle-icon--Rotate: var(--pf-v5-c-tabs--m-expanded__toggle-icon--Rotate);
|
|
30134
30143
|
}
|
|
@@ -30136,6 +30145,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30136
30145
|
--pf-v5-c-tabs--inset: var(--pf-v5-c-tabs--m-vertical--m-box--inset);
|
|
30137
30146
|
--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth: 0;
|
|
30138
30147
|
--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
30148
|
+
--pf-v5-c-tabs__link--before--BorderRightWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30139
30149
|
--pf-v5-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
30140
30150
|
--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-v5-c-tabs--before--border-width--base);
|
|
30141
30151
|
--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth: 0;
|
|
@@ -30145,16 +30155,14 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30145
30155
|
inset-inline-end: 0;
|
|
30146
30156
|
}
|
|
30147
30157
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:last-child {
|
|
30148
|
-
--pf-v5-c-tabs__link--before--BorderBottomWidth: 0;
|
|
30149
30158
|
--pf-v5-c-tabs__link--before--BorderRightWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30150
30159
|
}
|
|
30160
|
+
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:first-child {
|
|
30161
|
+
--pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30162
|
+
}
|
|
30151
30163
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current {
|
|
30152
30164
|
--pf-v5-c-tabs__link--before--BorderRightColor: var(--pf-v5-c-tabs__item--m-current__link--BackgroundColor);
|
|
30153
30165
|
--pf-v5-c-tabs__link--before--BorderBottomColor: var(--pf-v5-c-tabs__link--before--border-color--base);
|
|
30154
|
-
--pf-v5-c-tabs__link--before--BorderBottomWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30155
|
-
}
|
|
30156
|
-
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current:first-child {
|
|
30157
|
-
--pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
30158
30166
|
}
|
|
30159
30167
|
.pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:first-child.pf-m-current {
|
|
30160
30168
|
--pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
|
|
@@ -30166,10 +30174,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30166
30174
|
.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 {
|
|
30167
30175
|
inset-block-start: 0;
|
|
30168
30176
|
}
|
|
30169
|
-
.pf-v5-c-tabs.pf-m-
|
|
30170
|
-
--pf-v5-c-tabs__link--FontSize: var(--pf-v5-c-tabs--m-
|
|
30171
|
-
--pf-v5-c-tabs__item-action--c-button--FontSize: var(--pf-v5-c-tabs--m-
|
|
30172
|
-
--pf-v5-c-tabs__add--c-button--FontSize: var(--pf-v5-c-tabs--m-
|
|
30177
|
+
.pf-v5-c-tabs.pf-m-subtab {
|
|
30178
|
+
--pf-v5-c-tabs__link--FontSize: var(--pf-v5-c-tabs--m-subtab__link--FontSize);
|
|
30179
|
+
--pf-v5-c-tabs__item-action--c-button--FontSize: var(--pf-v5-c-tabs--m-subtab__item-action--c-button--FontSize);
|
|
30180
|
+
--pf-v5-c-tabs__add--c-button--FontSize: var(--pf-v5-c-tabs--m-subtab__add--c-button--FontSize);
|
|
30173
30181
|
}
|
|
30174
30182
|
.pf-v5-c-tabs.pf-m-page-insets {
|
|
30175
30183
|
--pf-v5-c-tabs--inset: var(--pf-v5-c-tabs--m-page-insets--inset);
|
|
@@ -30182,15 +30190,11 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30182
30190
|
.pf-v5-c-tabs__toggle {
|
|
30183
30191
|
display: var(--pf-v5-c-tabs__toggle--Display);
|
|
30184
30192
|
align-items: center;
|
|
30185
|
-
margin-block-end: var(--pf-v5-c-tabs__toggle--MarginBottom);
|
|
30186
30193
|
}
|
|
30187
30194
|
|
|
30188
30195
|
.pf-v5-c-tabs__toggle-button {
|
|
30189
30196
|
--pf-v5-c-tabs__toggle-text--MarginLeft: var(--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft);
|
|
30190
30197
|
--pf-v5-c-tabs__toggle-text--Color: var(--pf-v5-c-tabs__toggle-button__toggle-text--Color);
|
|
30191
|
-
margin-block-start: var(--pf-v5-c-tabs__toggle-button--MarginTop);
|
|
30192
|
-
margin-block-end: var(--pf-v5-c-tabs__toggle-button--MarginBottom);
|
|
30193
|
-
margin-inline-start: var(--pf-v5-c-tabs__toggle-button--MarginLeft);
|
|
30194
30198
|
}
|
|
30195
30199
|
.pf-v5-c-tabs__toggle-button .pf-v5-c-button {
|
|
30196
30200
|
display: flex;
|
|
@@ -30229,17 +30233,24 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30229
30233
|
}
|
|
30230
30234
|
|
|
30231
30235
|
.pf-v5-c-tabs__item {
|
|
30236
|
+
position: relative;
|
|
30232
30237
|
display: flex;
|
|
30233
30238
|
flex: none;
|
|
30239
|
+
column-gap: var(--pf-v5-c-tabs__item--ColumnGap);
|
|
30234
30240
|
scroll-snap-align: var(--pf-v5-c-tabs__item--ScrollSnapAlign);
|
|
30241
|
+
padding-block-start: var(--pf-v5-c-tabs__item--PaddingBlockStart);
|
|
30242
|
+
padding-block-end: var(--pf-v5-c-tabs__item--PaddingBlockEnd);
|
|
30243
|
+
padding-inline-start: var(--pf-v5-c-tabs__item--PaddingInlineStart);
|
|
30244
|
+
padding-inline-end: var(--pf-v5-c-tabs__item--PaddingInlineEnd);
|
|
30245
|
+
background-color: var(--pf-v5-c-tabs__item--BackgroundColor);
|
|
30235
30246
|
}
|
|
30236
30247
|
.pf-v5-c-tabs__item.pf-m-current {
|
|
30237
30248
|
--pf-v5-c-tabs__link--Color: var(--pf-v5-c-tabs__item--m-current__link--Color);
|
|
30238
30249
|
--pf-v5-c-tabs__link--after--BorderColor: var(--pf-v5-c-tabs__item--m-current__link--after--BorderColor);
|
|
30239
30250
|
--pf-v5-c-tabs__link--after--BorderWidth: var(--pf-v5-c-tabs__item--m-current__link--after--BorderWidth);
|
|
30251
|
+
--pf-v5-c-tabs__item--BackgroundColor: var(--pf-v5-c-tabs__item--m-current--BackgroundColor);
|
|
30240
30252
|
}
|
|
30241
30253
|
.pf-v5-c-tabs__item.pf-m-action {
|
|
30242
|
-
--pf-v5-c-tabs__link--PaddingRight: var(--pf-v5-c-tabs__item--m-action__link--PaddingRight);
|
|
30243
30254
|
position: relative;
|
|
30244
30255
|
}
|
|
30245
30256
|
.pf-v5-c-tabs__item.pf-m-action::before {
|
|
@@ -30284,9 +30295,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30284
30295
|
}
|
|
30285
30296
|
|
|
30286
30297
|
.pf-v5-c-tabs__link {
|
|
30287
|
-
position: relative;
|
|
30288
30298
|
display: flex;
|
|
30289
30299
|
flex: 1;
|
|
30300
|
+
column-gap: var(--pf-v5-c-tabs__link--ColumnGap);
|
|
30301
|
+
align-items: center;
|
|
30290
30302
|
padding-block-start: var(--pf-v5-c-tabs__link--PaddingTop);
|
|
30291
30303
|
padding-block-end: var(--pf-v5-c-tabs__link--PaddingBottom);
|
|
30292
30304
|
padding-inline-start: var(--pf-v5-c-tabs__link--PaddingLeft);
|
|
@@ -30294,11 +30306,11 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30294
30306
|
font-size: var(--pf-v5-c-tabs__link--FontSize);
|
|
30295
30307
|
color: var(--pf-v5-c-tabs__link--Color);
|
|
30296
30308
|
text-decoration: none;
|
|
30297
|
-
|
|
30309
|
+
background-color: var(--pf-v5-c-tabs__link--BackgroundColor);
|
|
30310
|
+
border-radius: var(--pf-v5-c-tabs__link--BorderRadius);
|
|
30298
30311
|
}
|
|
30299
30312
|
.pf-v5-c-tabs__item.pf-m-action, .pf-v5-c-tabs__link {
|
|
30300
30313
|
--pf-v5-c-tabs__link--after--BorderBottomWidth: var(--pf-v5-c-tabs__link--after--BorderWidth);
|
|
30301
|
-
background-color: var(--pf-v5-c-tabs__link--BackgroundColor);
|
|
30302
30314
|
}
|
|
30303
30315
|
|
|
30304
30316
|
.pf-v5-c-tabs__item.pf-m-action::before, .pf-v5-c-tabs__link::before {
|
|
@@ -30325,52 +30337,32 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30325
30337
|
border-inline-end-width: var(--pf-v5-c-tabs__link--after--BorderRightWidth);
|
|
30326
30338
|
}
|
|
30327
30339
|
|
|
30328
|
-
.pf-v5-c-
|
|
30329
|
-
--pf-v5-c-tabs__link--
|
|
30330
|
-
|
|
30331
|
-
|
|
30332
|
-
.pf-v5-c-tabs__item.pf-m-action:focus-within, .pf-v5-c-tabs__link:focus {
|
|
30333
|
-
--pf-v5-c-tabs__link--after--BorderWidth: var(--pf-v5-c-tabs__link--focus--after--BorderWidth);
|
|
30334
|
-
}
|
|
30335
|
-
|
|
30336
|
-
.pf-v5-c-tabs__item.pf-m-action:active, .pf-v5-c-tabs__link:active {
|
|
30337
|
-
--pf-v5-c-tabs__link--after--BorderWidth: var(--pf-v5-c-tabs__link--active--after--BorderWidth);
|
|
30338
|
-
}
|
|
30339
|
-
|
|
30340
|
-
.pf-v5-c-tabs__link:hover {
|
|
30341
|
-
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-v5-c-tabs__link--hover__toggle-icon--Color);
|
|
30342
|
-
}
|
|
30343
|
-
.pf-v5-c-tabs__link:focus {
|
|
30344
|
-
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-v5-c-tabs__link--focus__toggle-icon--Color);
|
|
30345
|
-
}
|
|
30346
|
-
.pf-v5-c-tabs__link:active, .pf-v5-c-tabs__link.pf-m-active {
|
|
30347
|
-
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-v5-c-tabs__link--active__toggle-icon--Color);
|
|
30340
|
+
.pf-v5-c-tabs__link:where(:hover, :focus) {
|
|
30341
|
+
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs__link--hover--BackgroundColor);
|
|
30342
|
+
mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
|
30348
30343
|
}
|
|
30349
30344
|
.pf-v5-c-tabs__link:disabled, .pf-v5-c-tabs__link.pf-m-disabled {
|
|
30350
30345
|
pointer-events: none;
|
|
30351
30346
|
}
|
|
30352
30347
|
.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 {
|
|
30353
30348
|
--pf-v5-c-tabs__link--Color: var(--pf-v5-c-tabs__link--disabled--Color);
|
|
30354
|
-
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs__link--disabled--BackgroundColor);
|
|
30355
30349
|
--pf-v5-c-tabs__link--before--BorderRightWidth: var(--pf-v5-c-tabs__link--disabled--before--BorderRightWidth);
|
|
30356
30350
|
--pf-v5-c-tabs__link--before--BorderBottomWidth: var(--pf-v5-c-tabs__link--disabled--before--BorderBottomWidth);
|
|
30357
30351
|
--pf-v5-c-tabs__link--before--BorderLeftWidth: var(--pf-v5-c-tabs__link--disabled--before--BorderLeftWidth);
|
|
30358
30352
|
--pf-v5-c-tabs__link--after--BorderWidth: 0;
|
|
30359
30353
|
}
|
|
30360
30354
|
|
|
30361
|
-
.pf-v5-c-tabs__link.pf-m-aria-disabled {
|
|
30362
|
-
|
|
30355
|
+
.pf-v5-c-tabs__link:disabled, .pf-v5-c-tabs__link.pf-m-disabled, .pf-v5-c-tabs__link.pf-m-aria-disabled {
|
|
30356
|
+
--pf-v5-c-tabs__link--BackgroundColor: var(--pf-v5-c-tabs__link--disabled--BackgroundColor);
|
|
30363
30357
|
}
|
|
30364
|
-
.pf-v5-c-
|
|
30365
|
-
|
|
30366
|
-
margin-inline-end: var(--pf-v5-c-tabs__link--child--MarginRight);
|
|
30358
|
+
.pf-v5-c-tabs__item.pf-m-action.pf-m-disabled {
|
|
30359
|
+
--pf-v5-c-tabs__link--BackgroundColor: transparent;
|
|
30367
30360
|
}
|
|
30368
|
-
|
|
30369
|
-
.pf-v5-c-tabs__link
|
|
30370
|
-
|
|
30361
|
+
|
|
30362
|
+
.pf-v5-c-tabs__link.pf-m-aria-disabled {
|
|
30363
|
+
cursor: default;
|
|
30371
30364
|
}
|
|
30372
30365
|
.pf-v5-c-tabs__link.pf-m-expanded {
|
|
30373
|
-
--pf-v5-c-tabs__link-toggle-icon--Color: var(--pf-v5-c-tabs__link--m-expanded__toggle-icon--Color);
|
|
30374
30366
|
--pf-v5-c-tabs__link-toggle-icon--Rotate: var(--pf-v5-c-tabs__link--m-expanded__toggle-icon--Rotate);
|
|
30375
30367
|
}
|
|
30376
30368
|
|
|
@@ -30390,14 +30382,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30390
30382
|
}
|
|
30391
30383
|
.pf-v5-c-tabs__item-action .pf-v5-c-button {
|
|
30392
30384
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-tabs__item-action--c-button--FontSize);
|
|
30393
|
-
--pf-v5-c-button--PaddingTop: var(--pf-v5-c-tabs__item-action--c-button--PaddingTop);
|
|
30394
|
-
--pf-v5-c-button--PaddingRight: var(--pf-v5-c-tabs__item-action--c-button--PaddingRight);
|
|
30395
|
-
--pf-v5-c-button--PaddingBottom: var(--pf-v5-c-tabs__item-action--c-button--PaddingBottom);
|
|
30396
|
-
--pf-v5-c-button--PaddingLeft: var(--pf-v5-c-tabs__item-action--c-button--PaddingLeft);
|
|
30397
|
-
outline-offset: var(--pf-v5-c-tabs__item-action--c-button--OutlineOffset);
|
|
30398
|
-
}
|
|
30399
|
-
.pf-v5-c-tabs__item-action:last-child {
|
|
30400
|
-
--pf-v5-c-tabs__item-action--c-button--PaddingRight: var(--pf-v5-c-tabs__item-action--last-child--c-button--PaddingRight);
|
|
30401
30385
|
}
|
|
30402
30386
|
|
|
30403
30387
|
.pf-v5-c-tabs__item-action-icon {
|
|
@@ -30406,22 +30390,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30406
30390
|
}
|
|
30407
30391
|
|
|
30408
30392
|
.pf-v5-c-tabs__scroll-button {
|
|
30409
|
-
|
|
30410
|
-
|
|
30411
|
-
|
|
30412
|
-
|
|
30413
|
-
background-color: var(--pf-v5-c-tabs__scroll-button--BackgroundColor);
|
|
30414
|
-
outline-offset: var(--pf-v5-c-tabs__scroll-button--OutlineOffset);
|
|
30393
|
+
padding-block-start: var(--pf-v5-c-tabs__scroll-button--PaddingBlockStart);
|
|
30394
|
+
padding-block-end: var(--pf-v5-c-tabs__scroll-button--PaddingBlockEnd);
|
|
30395
|
+
padding-inline-start: var(--pf-v5-c-tabs__scroll-button--PaddingInlineStart);
|
|
30396
|
+
padding-inline-end: var(--pf-v5-c-tabs__scroll-button--PaddingInlineEnd);
|
|
30415
30397
|
opacity: 0;
|
|
30416
30398
|
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);
|
|
30417
30399
|
}
|
|
30418
|
-
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
|
|
30419
|
-
scale: -1 1;
|
|
30420
|
-
}
|
|
30421
|
-
|
|
30422
|
-
.pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
|
|
30423
|
-
--pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
|
|
30424
|
-
}
|
|
30425
30400
|
.pf-v5-c-tabs__scroll-button::before {
|
|
30426
30401
|
border-color: var(--pf-v5-c-tabs__scroll-button--before--BorderColor);
|
|
30427
30402
|
border-block-start-width: 0;
|
|
@@ -30439,23 +30414,20 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30439
30414
|
margin-inline-start: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
|
|
30440
30415
|
transform: translateX(100%);
|
|
30441
30416
|
}
|
|
30442
|
-
.pf-v5-c-tabs__scroll-button:disabled {
|
|
30443
|
-
--pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--disabled--Color);
|
|
30444
|
-
pointer-events: none;
|
|
30445
|
-
}
|
|
30446
30417
|
|
|
30447
30418
|
.pf-v5-c-tabs__add {
|
|
30448
30419
|
position: relative;
|
|
30449
30420
|
display: flex;
|
|
30421
|
+
padding-block-start: var(--pf-v5-c-tabs__add--PaddingBlockStart);
|
|
30422
|
+
padding-block-end: var(--pf-v5-c-tabs__add--PaddingBlockEnd);
|
|
30423
|
+
padding-inline-start: var(--pf-v5-c-tabs__add--PaddingInlineStart);
|
|
30424
|
+
padding-inline-end: var(--pf-v5-c-tabs__add--PaddingInlineEnd);
|
|
30450
30425
|
}
|
|
30451
30426
|
.pf-v5-c-tabs__add::before {
|
|
30452
30427
|
border-inline-start: var(--pf-v5-c-tabs__add--before--BorderLeftWidth) solid var(--pf-v5-c-tabs__add--before--BorderColor);
|
|
30453
30428
|
}
|
|
30454
30429
|
.pf-v5-c-tabs__add .pf-v5-c-button {
|
|
30455
30430
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-tabs__add--c-button--FontSize);
|
|
30456
|
-
--pf-v5-c-button--PaddingTop: var(--pf-v5-c-tabs__add--c-button--PaddingTop);
|
|
30457
|
-
--pf-v5-c-button--PaddingBottom: var(--pf-v5-c-tabs__add--c-button--PaddingBottom);
|
|
30458
|
-
outline-offset: var(--pf-v5-c-tabs__add--c-button--OutlineOffset);
|
|
30459
30431
|
}
|
|
30460
30432
|
|
|
30461
30433
|
.pf-v5-c-tabs.pf-m-inset-none {
|
|
@@ -30649,17 +30621,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
30649
30621
|
}
|
|
30650
30622
|
}
|
|
30651
30623
|
|
|
30652
|
-
: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 {
|
|
30653
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
30654
|
-
}
|
|
30655
|
-
|
|
30656
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-tabs {
|
|
30657
|
-
--pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
|
|
30658
|
-
--pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
30659
|
-
--pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);
|
|
30660
|
-
--pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
30661
|
-
}
|
|
30662
|
-
|
|
30663
30624
|
.pf-v5-c-text-input-group {
|
|
30664
30625
|
--pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
30665
30626
|
--pf-v5-c-text-input-group__text--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
@@ -31083,8 +31044,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
31083
31044
|
--pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
31084
31045
|
--pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
31085
31046
|
--pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
31086
|
-
--pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
31087
|
-
--pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
31088
31047
|
--pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
31089
31048
|
--pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
31090
31049
|
--pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
|
|
@@ -31096,7 +31055,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
31096
31055
|
--pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
31097
31056
|
--pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
|
|
31098
31057
|
--pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
31058
|
+
--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
|
|
31099
31059
|
--pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
31060
|
+
--pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
31061
|
+
--pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
31062
|
+
--pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
|
|
31063
|
+
--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
|
|
31064
|
+
--pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
31100
31065
|
--pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
|
|
31101
31066
|
--pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
31102
31067
|
--pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
|
|
@@ -31149,7 +31114,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
31149
31114
|
inset-inline-end: 0;
|
|
31150
31115
|
pointer-events: none;
|
|
31151
31116
|
content: "";
|
|
31152
|
-
border:
|
|
31117
|
+
border-style: solid;
|
|
31118
|
+
border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
|
|
31119
|
+
border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
|
|
31120
|
+
border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
|
|
31121
|
+
border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
|
|
31122
|
+
border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
|
|
31153
31123
|
}
|
|
31154
31124
|
.pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
|
|
31155
31125
|
--pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
|
|
@@ -31166,9 +31136,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
31166
31136
|
.pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
|
|
31167
31137
|
--pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
|
|
31168
31138
|
--pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
|
|
31139
|
+
--pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
|
|
31140
|
+
--pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
|
|
31169
31141
|
pointer-events: none;
|
|
31170
31142
|
}
|
|
31171
31143
|
|
|
31144
|
+
.pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
|
|
31145
|
+
--pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
|
|
31146
|
+
}
|
|
31147
|
+
|
|
31148
|
+
.pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
|
|
31149
|
+
--pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
|
|
31150
|
+
}
|
|
31151
|
+
|
|
31172
31152
|
.pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
|
|
31173
31153
|
.pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
|
|
31174
31154
|
margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
|