@patternfly/patternfly 4.188.0 → 4.189.0
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/components/Tabs/tabs.css +93 -13
- package/components/Tabs/tabs.scss +129 -23
- package/docs/components/Tabs/examples/Tabs.md +1606 -31
- package/package.json +1 -1
- package/patternfly-no-reset.css +93 -13
- package/patternfly.css +93 -13
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -26532,6 +26532,8 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26532
26532
|
--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
|
|
26533
26533
|
--pf-c-tabs__list--Display: flex;
|
|
26534
26534
|
--pf-c-tabs__list--Visibility: visible;
|
|
26535
|
+
--pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
|
|
26536
|
+
--pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
|
|
26535
26537
|
--pf-c-tabs__link--Color: var(--pf-global--Color--200);
|
|
26536
26538
|
--pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
|
|
26537
26539
|
--pf-c-tabs__link--BackgroundColor: transparent;
|
|
@@ -26547,11 +26549,14 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26547
26549
|
--pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
|
|
26548
26550
|
--pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
|
26549
26551
|
--pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
|
|
26552
|
+
--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
|
|
26550
26553
|
--pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
|
|
26551
26554
|
--pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
|
|
26555
|
+
--pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
|
|
26556
|
+
--pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26552
26557
|
--pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26553
26558
|
--pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26554
|
-
--pf-c-tabs__link--before--
|
|
26559
|
+
--pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26555
26560
|
--pf-c-tabs__link--before--BorderTopWidth: 0;
|
|
26556
26561
|
--pf-c-tabs__link--before--BorderRightWidth: 0;
|
|
26557
26562
|
--pf-c-tabs__link--before--BorderBottomWidth: 0;
|
|
@@ -26609,6 +26614,19 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26609
26614
|
--pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
|
|
26610
26615
|
--pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
|
|
26611
26616
|
--pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
|
|
26617
|
+
--pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
|
|
26618
|
+
--pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
|
|
26619
|
+
--pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
|
|
26620
|
+
--pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
|
|
26621
|
+
--pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
|
26622
|
+
--pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
|
|
26623
|
+
--pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
|
|
26624
|
+
--pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26625
|
+
--pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
|
|
26626
|
+
--pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
|
|
26627
|
+
--pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
|
|
26628
|
+
--pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
|
|
26629
|
+
--pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
|
|
26612
26630
|
position: relative;
|
|
26613
26631
|
display: flex;
|
|
26614
26632
|
width: var(--pf-c-tabs--Width);
|
|
@@ -26707,6 +26725,9 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26707
26725
|
--pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
|
|
26708
26726
|
--pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
|
|
26709
26727
|
}
|
|
26728
|
+
.pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
|
|
26729
|
+
--pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
|
|
26730
|
+
}
|
|
26710
26731
|
.pf-c-tabs.pf-m-vertical {
|
|
26711
26732
|
--pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
|
|
26712
26733
|
--pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
|
|
@@ -26879,6 +26900,8 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26879
26900
|
}
|
|
26880
26901
|
.pf-c-tabs.pf-m-secondary {
|
|
26881
26902
|
--pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
|
|
26903
|
+
--pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
|
|
26904
|
+
--pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
|
|
26882
26905
|
}
|
|
26883
26906
|
.pf-c-tabs.pf-m-page-insets {
|
|
26884
26907
|
--pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
|
|
@@ -26942,12 +26965,26 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26942
26965
|
--pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
|
|
26943
26966
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
|
|
26944
26967
|
}
|
|
26968
|
+
.pf-c-tabs__item.pf-m-action {
|
|
26969
|
+
--pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
|
|
26970
|
+
position: relative;
|
|
26971
|
+
}
|
|
26972
|
+
.pf-c-tabs__item.pf-m-action::before {
|
|
26973
|
+
z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
|
|
26974
|
+
}
|
|
26975
|
+
.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
|
|
26976
|
+
.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
|
|
26977
|
+
content: revert;
|
|
26978
|
+
}
|
|
26945
26979
|
|
|
26946
26980
|
.pf-c-tabs::before,
|
|
26947
26981
|
.pf-c-tabs__list::before,
|
|
26948
26982
|
.pf-c-tabs__link::before,
|
|
26949
26983
|
.pf-c-tabs__link::after,
|
|
26950
|
-
.pf-c-
|
|
26984
|
+
.pf-c-tabs__item.pf-m-action::before,
|
|
26985
|
+
.pf-c-tabs__item.pf-m-action::after,
|
|
26986
|
+
.pf-c-tabs__scroll-button::before,
|
|
26987
|
+
.pf-c-tabs__add::before {
|
|
26951
26988
|
position: absolute;
|
|
26952
26989
|
right: 0;
|
|
26953
26990
|
bottom: 0;
|
|
@@ -26959,18 +26996,21 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26959
26996
|
.pf-c-tabs__list::before,
|
|
26960
26997
|
.pf-c-tabs__link::before,
|
|
26961
26998
|
.pf-c-tabs__link::after,
|
|
26962
|
-
.pf-c-
|
|
26999
|
+
.pf-c-tabs__item.pf-m-action::before,
|
|
27000
|
+
.pf-c-tabs__item.pf-m-action::after,
|
|
27001
|
+
.pf-c-tabs__scroll-button::before,
|
|
27002
|
+
.pf-c-tabs__add::before {
|
|
26963
27003
|
top: 0;
|
|
26964
27004
|
}
|
|
26965
27005
|
|
|
26966
27006
|
.pf-c-tabs__link,
|
|
26967
27007
|
.pf-c-tabs__scroll-button,
|
|
26968
|
-
.pf-c-tabs__list::before
|
|
27008
|
+
.pf-c-tabs__list::before,
|
|
27009
|
+
.pf-c-tabs__add::before {
|
|
26969
27010
|
border: 0;
|
|
26970
27011
|
}
|
|
26971
27012
|
|
|
26972
27013
|
.pf-c-tabs__link {
|
|
26973
|
-
--pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
|
|
26974
27014
|
position: relative;
|
|
26975
27015
|
display: flex;
|
|
26976
27016
|
flex: 1;
|
|
@@ -26978,17 +27018,23 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26978
27018
|
font-size: var(--pf-c-tabs__link--FontSize);
|
|
26979
27019
|
color: var(--pf-c-tabs__link--Color);
|
|
26980
27020
|
text-decoration: none;
|
|
26981
|
-
background-color: var(--pf-c-tabs__link--BackgroundColor);
|
|
26982
27021
|
outline-offset: var(--pf-c-tabs__link--OutlineOffset);
|
|
26983
27022
|
}
|
|
26984
|
-
.pf-c-tabs__link
|
|
27023
|
+
.pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
|
|
27024
|
+
--pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
|
|
27025
|
+
background-color: var(--pf-c-tabs__link--BackgroundColor);
|
|
27026
|
+
}
|
|
27027
|
+
|
|
27028
|
+
.pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
|
|
26985
27029
|
pointer-events: none;
|
|
26986
|
-
border-color: var(--pf-c-tabs__link--before--border-color--base);
|
|
26987
27030
|
border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
|
|
27031
|
+
border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
|
|
26988
27032
|
border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
|
|
26989
27033
|
border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
|
|
27034
|
+
border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
|
|
26990
27035
|
}
|
|
26991
|
-
|
|
27036
|
+
|
|
27037
|
+
.pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
|
|
26992
27038
|
top: var(--pf-c-tabs__link--after--Top);
|
|
26993
27039
|
right: var(--pf-c-tabs__link--after--Right);
|
|
26994
27040
|
bottom: var(--pf-c-tabs__link--after--Bottom);
|
|
@@ -26996,25 +27042,30 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26996
27042
|
border-color: var(--pf-c-tabs__link--after--BorderColor);
|
|
26997
27043
|
border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
|
|
26998
27044
|
}
|
|
26999
|
-
|
|
27045
|
+
|
|
27046
|
+
.pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
|
|
27000
27047
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
|
|
27001
27048
|
}
|
|
27002
|
-
|
|
27049
|
+
|
|
27050
|
+
.pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
|
|
27003
27051
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
|
|
27004
27052
|
}
|
|
27005
|
-
|
|
27053
|
+
|
|
27054
|
+
.pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
|
|
27006
27055
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
|
|
27007
27056
|
}
|
|
27057
|
+
|
|
27008
27058
|
.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
|
|
27009
27059
|
pointer-events: none;
|
|
27010
27060
|
}
|
|
27011
|
-
.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
|
|
27061
|
+
.pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
|
|
27012
27062
|
--pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
|
|
27013
27063
|
--pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
|
|
27014
27064
|
--pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
|
|
27015
27065
|
--pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
|
|
27016
27066
|
--pf-c-tabs__link--after--BorderWidth: 0;
|
|
27017
27067
|
}
|
|
27068
|
+
|
|
27018
27069
|
.pf-c-tabs__link.pf-m-aria-disabled {
|
|
27019
27070
|
cursor: default;
|
|
27020
27071
|
}
|
|
@@ -27027,6 +27078,22 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27027
27078
|
--pf-c-tabs__link--child--MarginRight: 0;
|
|
27028
27079
|
}
|
|
27029
27080
|
|
|
27081
|
+
.pf-c-tabs__item-close {
|
|
27082
|
+
display: flex;
|
|
27083
|
+
}
|
|
27084
|
+
.pf-c-tabs__item-close .pf-c-button {
|
|
27085
|
+
--pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
|
|
27086
|
+
--pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
|
|
27087
|
+
--pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
|
|
27088
|
+
--pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
|
|
27089
|
+
outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
|
|
27090
|
+
}
|
|
27091
|
+
|
|
27092
|
+
.pf-c-tabs__item-close-icon {
|
|
27093
|
+
display: inline-block;
|
|
27094
|
+
margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
|
|
27095
|
+
}
|
|
27096
|
+
|
|
27030
27097
|
.pf-c-tabs__scroll-button {
|
|
27031
27098
|
flex: none;
|
|
27032
27099
|
width: var(--pf-c-tabs__scroll-button--Width);
|
|
@@ -27059,6 +27126,19 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27059
27126
|
pointer-events: none;
|
|
27060
27127
|
}
|
|
27061
27128
|
|
|
27129
|
+
.pf-c-tabs__add {
|
|
27130
|
+
position: relative;
|
|
27131
|
+
display: flex;
|
|
27132
|
+
}
|
|
27133
|
+
.pf-c-tabs__add::before {
|
|
27134
|
+
border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
|
|
27135
|
+
}
|
|
27136
|
+
.pf-c-tabs__add .pf-c-button {
|
|
27137
|
+
--pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
|
|
27138
|
+
--pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
|
|
27139
|
+
--pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
|
|
27140
|
+
}
|
|
27141
|
+
|
|
27062
27142
|
.pf-c-tabs.pf-m-inset-none {
|
|
27063
27143
|
--pf-c-tabs--inset: 0;
|
|
27064
27144
|
--pf-c-tabs--m-vertical--inset: 0;
|
package/patternfly.css
CHANGED
|
@@ -26659,6 +26659,8 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26659
26659
|
--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
|
|
26660
26660
|
--pf-c-tabs__list--Display: flex;
|
|
26661
26661
|
--pf-c-tabs__list--Visibility: visible;
|
|
26662
|
+
--pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
|
|
26663
|
+
--pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
|
|
26662
26664
|
--pf-c-tabs__link--Color: var(--pf-global--Color--200);
|
|
26663
26665
|
--pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
|
|
26664
26666
|
--pf-c-tabs__link--BackgroundColor: transparent;
|
|
@@ -26674,11 +26676,14 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26674
26676
|
--pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
|
|
26675
26677
|
--pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
|
26676
26678
|
--pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
|
|
26679
|
+
--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
|
|
26677
26680
|
--pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
|
|
26678
26681
|
--pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
|
|
26682
|
+
--pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
|
|
26683
|
+
--pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26679
26684
|
--pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26680
26685
|
--pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26681
|
-
--pf-c-tabs__link--before--
|
|
26686
|
+
--pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26682
26687
|
--pf-c-tabs__link--before--BorderTopWidth: 0;
|
|
26683
26688
|
--pf-c-tabs__link--before--BorderRightWidth: 0;
|
|
26684
26689
|
--pf-c-tabs__link--before--BorderBottomWidth: 0;
|
|
@@ -26736,6 +26741,19 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26736
26741
|
--pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
|
|
26737
26742
|
--pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
|
|
26738
26743
|
--pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
|
|
26744
|
+
--pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
|
|
26745
|
+
--pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
|
|
26746
|
+
--pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
|
|
26747
|
+
--pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
|
|
26748
|
+
--pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
|
26749
|
+
--pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
|
|
26750
|
+
--pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
|
|
26751
|
+
--pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
26752
|
+
--pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
|
|
26753
|
+
--pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
|
|
26754
|
+
--pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
|
|
26755
|
+
--pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
|
|
26756
|
+
--pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
|
|
26739
26757
|
position: relative;
|
|
26740
26758
|
display: flex;
|
|
26741
26759
|
width: var(--pf-c-tabs--Width);
|
|
@@ -26834,6 +26852,9 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26834
26852
|
--pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
|
|
26835
26853
|
--pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
|
|
26836
26854
|
}
|
|
26855
|
+
.pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
|
|
26856
|
+
--pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
|
|
26857
|
+
}
|
|
26837
26858
|
.pf-c-tabs.pf-m-vertical {
|
|
26838
26859
|
--pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
|
|
26839
26860
|
--pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
|
|
@@ -27006,6 +27027,8 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27006
27027
|
}
|
|
27007
27028
|
.pf-c-tabs.pf-m-secondary {
|
|
27008
27029
|
--pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
|
|
27030
|
+
--pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
|
|
27031
|
+
--pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
|
|
27009
27032
|
}
|
|
27010
27033
|
.pf-c-tabs.pf-m-page-insets {
|
|
27011
27034
|
--pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
|
|
@@ -27069,12 +27092,26 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27069
27092
|
--pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
|
|
27070
27093
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
|
|
27071
27094
|
}
|
|
27095
|
+
.pf-c-tabs__item.pf-m-action {
|
|
27096
|
+
--pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
|
|
27097
|
+
position: relative;
|
|
27098
|
+
}
|
|
27099
|
+
.pf-c-tabs__item.pf-m-action::before {
|
|
27100
|
+
z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
|
|
27101
|
+
}
|
|
27102
|
+
.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
|
|
27103
|
+
.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
|
|
27104
|
+
content: revert;
|
|
27105
|
+
}
|
|
27072
27106
|
|
|
27073
27107
|
.pf-c-tabs::before,
|
|
27074
27108
|
.pf-c-tabs__list::before,
|
|
27075
27109
|
.pf-c-tabs__link::before,
|
|
27076
27110
|
.pf-c-tabs__link::after,
|
|
27077
|
-
.pf-c-
|
|
27111
|
+
.pf-c-tabs__item.pf-m-action::before,
|
|
27112
|
+
.pf-c-tabs__item.pf-m-action::after,
|
|
27113
|
+
.pf-c-tabs__scroll-button::before,
|
|
27114
|
+
.pf-c-tabs__add::before {
|
|
27078
27115
|
position: absolute;
|
|
27079
27116
|
right: 0;
|
|
27080
27117
|
bottom: 0;
|
|
@@ -27086,18 +27123,21 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27086
27123
|
.pf-c-tabs__list::before,
|
|
27087
27124
|
.pf-c-tabs__link::before,
|
|
27088
27125
|
.pf-c-tabs__link::after,
|
|
27089
|
-
.pf-c-
|
|
27126
|
+
.pf-c-tabs__item.pf-m-action::before,
|
|
27127
|
+
.pf-c-tabs__item.pf-m-action::after,
|
|
27128
|
+
.pf-c-tabs__scroll-button::before,
|
|
27129
|
+
.pf-c-tabs__add::before {
|
|
27090
27130
|
top: 0;
|
|
27091
27131
|
}
|
|
27092
27132
|
|
|
27093
27133
|
.pf-c-tabs__link,
|
|
27094
27134
|
.pf-c-tabs__scroll-button,
|
|
27095
|
-
.pf-c-tabs__list::before
|
|
27135
|
+
.pf-c-tabs__list::before,
|
|
27136
|
+
.pf-c-tabs__add::before {
|
|
27096
27137
|
border: 0;
|
|
27097
27138
|
}
|
|
27098
27139
|
|
|
27099
27140
|
.pf-c-tabs__link {
|
|
27100
|
-
--pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
|
|
27101
27141
|
position: relative;
|
|
27102
27142
|
display: flex;
|
|
27103
27143
|
flex: 1;
|
|
@@ -27105,17 +27145,23 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27105
27145
|
font-size: var(--pf-c-tabs__link--FontSize);
|
|
27106
27146
|
color: var(--pf-c-tabs__link--Color);
|
|
27107
27147
|
text-decoration: none;
|
|
27108
|
-
background-color: var(--pf-c-tabs__link--BackgroundColor);
|
|
27109
27148
|
outline-offset: var(--pf-c-tabs__link--OutlineOffset);
|
|
27110
27149
|
}
|
|
27111
|
-
.pf-c-tabs__link
|
|
27150
|
+
.pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
|
|
27151
|
+
--pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
|
|
27152
|
+
background-color: var(--pf-c-tabs__link--BackgroundColor);
|
|
27153
|
+
}
|
|
27154
|
+
|
|
27155
|
+
.pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
|
|
27112
27156
|
pointer-events: none;
|
|
27113
|
-
border-color: var(--pf-c-tabs__link--before--border-color--base);
|
|
27114
27157
|
border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
|
|
27158
|
+
border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
|
|
27115
27159
|
border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
|
|
27116
27160
|
border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
|
|
27161
|
+
border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
|
|
27117
27162
|
}
|
|
27118
|
-
|
|
27163
|
+
|
|
27164
|
+
.pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
|
|
27119
27165
|
top: var(--pf-c-tabs__link--after--Top);
|
|
27120
27166
|
right: var(--pf-c-tabs__link--after--Right);
|
|
27121
27167
|
bottom: var(--pf-c-tabs__link--after--Bottom);
|
|
@@ -27123,25 +27169,30 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27123
27169
|
border-color: var(--pf-c-tabs__link--after--BorderColor);
|
|
27124
27170
|
border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
|
|
27125
27171
|
}
|
|
27126
|
-
|
|
27172
|
+
|
|
27173
|
+
.pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
|
|
27127
27174
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
|
|
27128
27175
|
}
|
|
27129
|
-
|
|
27176
|
+
|
|
27177
|
+
.pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
|
|
27130
27178
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
|
|
27131
27179
|
}
|
|
27132
|
-
|
|
27180
|
+
|
|
27181
|
+
.pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
|
|
27133
27182
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
|
|
27134
27183
|
}
|
|
27184
|
+
|
|
27135
27185
|
.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
|
|
27136
27186
|
pointer-events: none;
|
|
27137
27187
|
}
|
|
27138
|
-
.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
|
|
27188
|
+
.pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
|
|
27139
27189
|
--pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
|
|
27140
27190
|
--pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
|
|
27141
27191
|
--pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
|
|
27142
27192
|
--pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
|
|
27143
27193
|
--pf-c-tabs__link--after--BorderWidth: 0;
|
|
27144
27194
|
}
|
|
27195
|
+
|
|
27145
27196
|
.pf-c-tabs__link.pf-m-aria-disabled {
|
|
27146
27197
|
cursor: default;
|
|
27147
27198
|
}
|
|
@@ -27154,6 +27205,22 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27154
27205
|
--pf-c-tabs__link--child--MarginRight: 0;
|
|
27155
27206
|
}
|
|
27156
27207
|
|
|
27208
|
+
.pf-c-tabs__item-close {
|
|
27209
|
+
display: flex;
|
|
27210
|
+
}
|
|
27211
|
+
.pf-c-tabs__item-close .pf-c-button {
|
|
27212
|
+
--pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
|
|
27213
|
+
--pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
|
|
27214
|
+
--pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
|
|
27215
|
+
--pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
|
|
27216
|
+
outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
|
|
27217
|
+
}
|
|
27218
|
+
|
|
27219
|
+
.pf-c-tabs__item-close-icon {
|
|
27220
|
+
display: inline-block;
|
|
27221
|
+
margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
|
|
27222
|
+
}
|
|
27223
|
+
|
|
27157
27224
|
.pf-c-tabs__scroll-button {
|
|
27158
27225
|
flex: none;
|
|
27159
27226
|
width: var(--pf-c-tabs__scroll-button--Width);
|
|
@@ -27186,6 +27253,19 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27186
27253
|
pointer-events: none;
|
|
27187
27254
|
}
|
|
27188
27255
|
|
|
27256
|
+
.pf-c-tabs__add {
|
|
27257
|
+
position: relative;
|
|
27258
|
+
display: flex;
|
|
27259
|
+
}
|
|
27260
|
+
.pf-c-tabs__add::before {
|
|
27261
|
+
border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
|
|
27262
|
+
}
|
|
27263
|
+
.pf-c-tabs__add .pf-c-button {
|
|
27264
|
+
--pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
|
|
27265
|
+
--pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
|
|
27266
|
+
--pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
|
|
27267
|
+
}
|
|
27268
|
+
|
|
27189
27269
|
.pf-c-tabs.pf-m-inset-none {
|
|
27190
27270
|
--pf-c-tabs--inset: 0;
|
|
27191
27271
|
--pf-c-tabs--m-vertical--inset: 0;
|