@patternfly/patternfly 4.180.0 → 4.182.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/assets/images/status-icon-sprite.svg +38 -0
- package/components/FormControl/form-control.css +26 -0
- package/components/FormControl/form-control.scss +30 -1
- package/components/Masthead/masthead.css +21 -27
- package/components/Masthead/masthead.scss +21 -27
- package/components/Menu/menu.css +10 -0
- package/components/Menu/menu.scss +14 -0
- package/components/MenuToggle/menu-toggle.css +141 -7
- package/components/MenuToggle/menu-toggle.scss +208 -8
- package/docs/components/FormControl/examples/FormControl.md +151 -0
- package/docs/components/Menu/examples/Menu.md +67 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
- package/docs/components/Page/examples/Page.md +11 -2
- package/docs/components/Table/examples/Table.md +8 -0
- package/docs/components/Wizard/examples/Wizard.md +6 -6
- package/docs/demos/Alert/examples/Alert.md +20 -40
- package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
- package/docs/demos/ContextSelector/examples/ContextSelector.md +86 -166
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
- package/docs/demos/Drawer/examples/Drawer.md +60 -120
- package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
- package/docs/demos/Masthead/examples/Masthead.md +144 -284
- package/docs/demos/Nav/examples/Nav.md +203 -343
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
- package/docs/demos/Page/examples/Page.md +589 -1137
- package/docs/demos/Table/examples/Table.md +26 -26
- package/docs/demos/Tabs/examples/Tabs.md +11 -19
- package/docs/demos/Wizard/examples/Wizard.md +6 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +198 -34
- package/patternfly.css +198 -34
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css
CHANGED
|
@@ -14054,6 +14054,18 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14054
14054
|
--pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
14055
14055
|
--pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
14056
14056
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
14057
|
+
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
|
|
14058
|
+
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
|
|
14059
|
+
--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
|
|
14060
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
|
|
14061
|
+
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
|
|
14062
|
+
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
|
|
14063
|
+
--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#clock");
|
|
14064
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
|
|
14065
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px);
|
|
14066
|
+
--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
|
|
14067
|
+
--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
|
|
14068
|
+
--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
|
|
14057
14069
|
color: var(--pf-global--Color--100);
|
|
14058
14070
|
width: var(--pf-c-form-control--Width);
|
|
14059
14071
|
padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
|
|
@@ -14167,6 +14179,20 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14167
14179
|
.pf-c-form-control.pf-m-icon.pf-m-clock {
|
|
14168
14180
|
--pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
|
|
14169
14181
|
}
|
|
14182
|
+
.pf-c-form-control.pf-m-icon-sprite {
|
|
14183
|
+
--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
|
|
14184
|
+
--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
|
|
14185
|
+
--pf-c-form-control--m-invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl);
|
|
14186
|
+
--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
|
|
14187
|
+
--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
|
|
14188
|
+
--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
|
|
14189
|
+
--pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
|
|
14190
|
+
--pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
|
|
14191
|
+
--pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
|
|
14192
|
+
--pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
|
|
14193
|
+
--pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
|
|
14194
|
+
--pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
|
|
14195
|
+
}
|
|
14170
14196
|
select.pf-c-form-control {
|
|
14171
14197
|
--pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
|
|
14172
14198
|
--pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
|
|
@@ -15873,24 +15899,21 @@ ul.pf-c-list {
|
|
|
15873
15899
|
--pf-c-masthead--c-toolbar__item--Display: flex;
|
|
15874
15900
|
--pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
|
|
15875
15901
|
--pf-c-masthead--c-context-selector--Width: auto;
|
|
15876
|
-
--pf-c-masthead--c-context-selector__toggle--BorderTopColor:
|
|
15877
|
-
--pf-c-masthead--c-context-selector__toggle--BorderRightColor:
|
|
15878
|
-
--pf-c-masthead--c-context-selector__toggle--
|
|
15879
|
-
--pf-c-masthead--c-context-
|
|
15880
|
-
--pf-c-masthead--c-context-selector--m-full-height__toggle--
|
|
15881
|
-
--pf-c-masthead--c-
|
|
15882
|
-
--pf-c-masthead--c-dropdown__toggle--before--
|
|
15883
|
-
--pf-c-masthead--c-dropdown__toggle--before--
|
|
15884
|
-
--pf-c-masthead--c-
|
|
15885
|
-
--pf-c-masthead--c-
|
|
15886
|
-
--pf-c-masthead--c-
|
|
15887
|
-
--pf-c-masthead--c-
|
|
15888
|
-
--pf-c-masthead--c-menu-toggle--before--
|
|
15889
|
-
--pf-c-masthead--c-menu-toggle--before--
|
|
15890
|
-
--pf-c-masthead--c-menu-toggle--before--BorderBottomColor: transparent;
|
|
15891
|
-
--pf-c-masthead--c-menu-toggle--before--BorderLeftColor: transparent;
|
|
15892
|
-
--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
|
|
15893
|
-
--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
|
|
15902
|
+
--pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
|
|
15903
|
+
--pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
|
|
15904
|
+
--pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
|
|
15905
|
+
--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
|
|
15906
|
+
--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
|
|
15907
|
+
--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
|
|
15908
|
+
--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
|
|
15909
|
+
--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
|
|
15910
|
+
--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
|
|
15911
|
+
--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
|
|
15912
|
+
--pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
|
|
15913
|
+
--pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
|
|
15914
|
+
--pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
|
|
15915
|
+
--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
|
|
15916
|
+
--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
|
|
15894
15917
|
--pf-c-masthead--c-toolbar__content--PaddingRight: 0;
|
|
15895
15918
|
--pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
|
|
15896
15919
|
--pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
|
|
@@ -15983,33 +16006,30 @@ ul.pf-c-list {
|
|
|
15983
16006
|
.pf-c-masthead .pf-c-menu-toggle {
|
|
15984
16007
|
--pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
|
|
15985
16008
|
--pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
|
|
15986
|
-
--pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--before--BorderBottomColor);
|
|
15987
16009
|
--pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
|
|
15988
16010
|
}
|
|
15989
16011
|
.pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
|
|
15990
|
-
--pf-c-menu-toggle--before--
|
|
15991
|
-
--pf-c-menu-toggle--before--
|
|
16012
|
+
--pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
|
|
16013
|
+
--pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
|
|
15992
16014
|
}
|
|
15993
16015
|
.pf-c-masthead .pf-c-context-selector {
|
|
15994
16016
|
--pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
|
|
15995
16017
|
--pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
|
|
15996
16018
|
--pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
|
|
15997
|
-
--pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
|
|
15998
16019
|
--pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
|
|
15999
16020
|
}
|
|
16000
16021
|
.pf-c-masthead .pf-c-context-selector.pf-m-full-height {
|
|
16001
|
-
--pf-c-context-selector__toggle--
|
|
16002
|
-
--pf-c-context-selector__toggle--
|
|
16022
|
+
--pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
|
|
16023
|
+
--pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
|
|
16003
16024
|
}
|
|
16004
16025
|
.pf-c-masthead .pf-c-dropdown {
|
|
16005
16026
|
--pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
|
|
16006
16027
|
--pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
|
|
16007
|
-
--pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor);
|
|
16008
16028
|
--pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
|
|
16009
16029
|
}
|
|
16010
16030
|
.pf-c-masthead .pf-c-dropdown.pf-m-full-height {
|
|
16011
|
-
--pf-c-dropdown__toggle--before--
|
|
16012
|
-
--pf-c-dropdown__toggle--before--
|
|
16031
|
+
--pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
|
|
16032
|
+
--pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
|
|
16013
16033
|
}
|
|
16014
16034
|
.pf-c-masthead .pf-c-nav {
|
|
16015
16035
|
align-self: stretch;
|
|
@@ -16517,6 +16537,7 @@ ul.pf-c-list {
|
|
|
16517
16537
|
--pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
|
|
16518
16538
|
--pf-c-menu__item-description--Color: var(--pf-global--Color--200);
|
|
16519
16539
|
--pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
|
|
16540
|
+
--pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
|
|
16520
16541
|
--pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
|
|
16521
16542
|
--pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
|
|
16522
16543
|
--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
|
|
@@ -16879,6 +16900,9 @@ ul.pf-c-list {
|
|
|
16879
16900
|
.pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
|
|
16880
16901
|
opacity: 1;
|
|
16881
16902
|
}
|
|
16903
|
+
label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
16904
|
+
cursor: pointer;
|
|
16905
|
+
}
|
|
16882
16906
|
|
|
16883
16907
|
.pf-c-menu__item-main {
|
|
16884
16908
|
display: flex;
|
|
@@ -16923,6 +16947,12 @@ ul.pf-c-list {
|
|
|
16923
16947
|
margin-right: var(--pf-c-menu__item-icon--MarginRight);
|
|
16924
16948
|
}
|
|
16925
16949
|
|
|
16950
|
+
.pf-c-menu__item-check {
|
|
16951
|
+
display: flex;
|
|
16952
|
+
align-items: center;
|
|
16953
|
+
margin-right: var(--pf-c-menu__item-check--MarginRight);
|
|
16954
|
+
}
|
|
16955
|
+
|
|
16926
16956
|
.pf-c-menu__item-toggle-icon {
|
|
16927
16957
|
padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
|
|
16928
16958
|
padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
|
|
@@ -17071,6 +17101,33 @@ ul.pf-c-list {
|
|
|
17071
17101
|
--pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
|
|
17072
17102
|
--pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
|
|
17073
17103
|
--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
|
|
17104
|
+
--pf-c-menu-toggle--m-split-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
17105
|
+
--pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
17106
|
+
--pf-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-global--Color--dark-200);
|
|
17107
|
+
--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
17108
|
+
--pf-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-global--spacer--sm);
|
|
17109
|
+
--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
|
|
17110
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
|
|
17111
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-global--BorderColor--300);
|
|
17112
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--Left: 0;
|
|
17113
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
17114
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-global--BorderColor--200);
|
|
17115
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
17116
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
|
|
17117
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
|
17118
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
|
|
17119
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
|
17120
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor: var(--pf-global--active-color--100);
|
|
17121
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-global--BorderRadius--sm);
|
|
17122
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
|
|
17123
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
|
|
17124
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
|
|
17125
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
|
|
17126
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-global--primary-color--200);
|
|
17127
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-global--primary-color--200);
|
|
17128
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
|
|
17129
|
+
--pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
|
|
17130
|
+
--pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
|
|
17074
17131
|
position: relative;
|
|
17075
17132
|
display: inline-flex;
|
|
17076
17133
|
align-items: center;
|
|
@@ -17147,34 +17204,32 @@ ul.pf-c-list {
|
|
|
17147
17204
|
--pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
|
|
17148
17205
|
}
|
|
17149
17206
|
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
|
|
17150
|
-
--pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
|
|
17151
|
-
--pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
17152
|
-
--pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
17153
|
-
--pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
17154
|
-
--pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
|
|
17155
17207
|
--pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
|
|
17156
17208
|
--pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
|
|
17157
17209
|
--pf-c-menu-toggle--disabled--BackgroundColor: transparent;
|
|
17158
|
-
--pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
|
|
17159
17210
|
display: inline-block;
|
|
17211
|
+
color: var(--pf-c-menu-toggle--m-plain--Color);
|
|
17160
17212
|
}
|
|
17161
17213
|
.pf-c-menu-toggle:hover {
|
|
17162
17214
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
|
|
17163
17215
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
|
|
17164
17216
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
|
|
17165
17217
|
--pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
|
|
17218
|
+
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
17166
17219
|
}
|
|
17167
17220
|
.pf-c-menu-toggle:focus {
|
|
17168
17221
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
|
|
17169
17222
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
|
|
17170
17223
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
|
|
17171
17224
|
--pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
|
|
17225
|
+
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
|
|
17172
17226
|
}
|
|
17173
17227
|
.pf-c-menu-toggle:active {
|
|
17174
17228
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
|
|
17175
17229
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
|
|
17176
17230
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
|
|
17177
17231
|
--pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
|
|
17232
|
+
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
|
|
17178
17233
|
}
|
|
17179
17234
|
.pf-c-menu-toggle.pf-m-expanded {
|
|
17180
17235
|
--pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-expanded--Color);
|
|
@@ -17182,10 +17237,12 @@ ul.pf-c-list {
|
|
|
17182
17237
|
--pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
|
|
17183
17238
|
--pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
|
|
17184
17239
|
--pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
|
|
17240
|
+
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
|
|
17185
17241
|
}
|
|
17186
|
-
.pf-c-menu-toggle:disabled {
|
|
17242
|
+
.pf-c-menu-toggle:disabled, .pf-c-menu-toggle.pf-m-disabled {
|
|
17187
17243
|
--pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
|
|
17188
17244
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
|
|
17245
|
+
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
|
|
17189
17246
|
pointer-events: none;
|
|
17190
17247
|
}
|
|
17191
17248
|
.pf-c-menu-toggle.pf-m-primary::before, .pf-c-menu-toggle.pf-m-primary::after, .pf-c-menu-toggle.pf-m-plain::before, .pf-c-menu-toggle.pf-m-plain::after, .pf-c-menu-toggle:disabled::before, .pf-c-menu-toggle:disabled::after {
|
|
@@ -17201,6 +17258,113 @@ ul.pf-c-list {
|
|
|
17201
17258
|
--pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
|
|
17202
17259
|
height: 100%;
|
|
17203
17260
|
}
|
|
17261
|
+
.pf-c-menu-toggle.pf-m-split-button {
|
|
17262
|
+
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
17263
|
+
padding: 0;
|
|
17264
|
+
}
|
|
17265
|
+
.pf-c-menu-toggle.pf-m-split-button > * {
|
|
17266
|
+
position: relative;
|
|
17267
|
+
padding: var(--pf-c-menu-toggle--PaddingTop) var(--pf-c-menu-toggle--PaddingRight) var(--pf-c-menu-toggle--PaddingBottom) var(--pf-c-menu-toggle--PaddingLeft);
|
|
17268
|
+
}
|
|
17269
|
+
.pf-c-menu-toggle.pf-m-split-button > *:first-child {
|
|
17270
|
+
padding-right: var(--pf-c-menu-toggle--m-split-button--first-child--PaddingRight);
|
|
17271
|
+
}
|
|
17272
|
+
.pf-c-menu-toggle.pf-m-split-button:where(:not(.pf-m-action)) > :last-child {
|
|
17273
|
+
padding-left: var(--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft);
|
|
17274
|
+
}
|
|
17275
|
+
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check {
|
|
17276
|
+
--pf-c-menu-toggle--PaddingRight: 0;
|
|
17277
|
+
--pf-c-check__input--MarginTop: 0;
|
|
17278
|
+
--pf-c-check__label--Color: var(--pf-c-check__label--Color, inherit);
|
|
17279
|
+
align-items: center;
|
|
17280
|
+
align-self: stretch;
|
|
17281
|
+
}
|
|
17282
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
|
|
17283
|
+
position: absolute;
|
|
17284
|
+
top: 0;
|
|
17285
|
+
right: 0;
|
|
17286
|
+
bottom: 0;
|
|
17287
|
+
left: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--Left);
|
|
17288
|
+
pointer-events: none;
|
|
17289
|
+
content: "";
|
|
17290
|
+
border-bottom: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor);
|
|
17291
|
+
}
|
|
17292
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover {
|
|
17293
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth);
|
|
17294
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor);
|
|
17295
|
+
}
|
|
17296
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus {
|
|
17297
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth);
|
|
17298
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor);
|
|
17299
|
+
}
|
|
17300
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:active, .pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *.pf-m-active {
|
|
17301
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth);
|
|
17302
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor);
|
|
17303
|
+
}
|
|
17304
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary {
|
|
17305
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor);
|
|
17306
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
|
|
17307
|
+
}
|
|
17308
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])) {
|
|
17309
|
+
background-color: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor);
|
|
17310
|
+
}
|
|
17311
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):hover {
|
|
17312
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor);
|
|
17313
|
+
}
|
|
17314
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):focus {
|
|
17315
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor);
|
|
17316
|
+
}
|
|
17317
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):active, .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])).pf-m-active {
|
|
17318
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor);
|
|
17319
|
+
}
|
|
17320
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded {
|
|
17321
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor);
|
|
17322
|
+
}
|
|
17323
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary {
|
|
17324
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor);
|
|
17325
|
+
}
|
|
17326
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary, .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary {
|
|
17327
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
|
|
17328
|
+
}
|
|
17329
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :first-child, .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary > :first-child {
|
|
17330
|
+
border-top-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
|
|
17331
|
+
border-bottom-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
|
|
17332
|
+
}
|
|
17333
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :last-child, .pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary > :last-child {
|
|
17334
|
+
border-top-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
|
|
17335
|
+
border-bottom-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
|
|
17336
|
+
}
|
|
17337
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
|
|
17338
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--Left: calc(var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) * -1);
|
|
17339
|
+
border-left: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
|
|
17340
|
+
}
|
|
17341
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded) {
|
|
17342
|
+
--pf-c-menu-toggle--after--BorderBottomColor: transparent;
|
|
17343
|
+
}
|
|
17344
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled, .pf-c-menu-toggle.pf-m-split-button:disabled {
|
|
17345
|
+
--pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
17346
|
+
--pf-c-menu-toggle--m-split-button--child--Color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
17347
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
|
|
17348
|
+
}
|
|
17349
|
+
.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled::before, .pf-c-menu-toggle.pf-m-split-button.pf-m-disabled::after, .pf-c-menu-toggle.pf-m-split-button:disabled::before, .pf-c-menu-toggle.pf-m-split-button:disabled::after {
|
|
17350
|
+
content: none;
|
|
17351
|
+
}
|
|
17352
|
+
.pf-c-menu-toggle.pf-m-split-button > .pf-m-disabled,
|
|
17353
|
+
.pf-c-menu-toggle.pf-m-split-button > :disabled {
|
|
17354
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
|
|
17355
|
+
color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
17356
|
+
background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
17357
|
+
}
|
|
17358
|
+
|
|
17359
|
+
.pf-c-menu-toggle__button {
|
|
17360
|
+
color: inherit;
|
|
17361
|
+
border: 0;
|
|
17362
|
+
}
|
|
17363
|
+
.pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
|
|
17364
|
+
padding-left: 0;
|
|
17365
|
+
margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
|
|
17366
|
+
margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
|
|
17367
|
+
}
|
|
17204
17368
|
|
|
17205
17369
|
.pf-c-menu-toggle__icon {
|
|
17206
17370
|
display: inline-flex;
|