@patternfly/patternfly 4.152.0 → 4.154.1
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/MenuToggle/menu-toggle.css +1 -1
- package/components/MenuToggle/menu-toggle.scss +1 -1
- package/components/Nav/nav.css +4 -6
- package/components/Nav/nav.scss +5 -9
- package/components/OptionsMenu/options-menu.css +5 -13
- package/components/OptionsMenu/options-menu.scss +3 -13
- package/components/TextInputGroup/text-input-group.css +13 -0
- package/components/TextInputGroup/text-input-group.scss +19 -0
- package/docs/components/MenuToggle/examples/MenuToggle.md +48 -0
- package/docs/components/OptionsMenu/examples/options-menu.md +34 -40
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +23 -20
- package/patternfly.css +23 -20
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/patternfly.css
CHANGED
|
@@ -16358,7 +16358,7 @@ ul.pf-c-list {
|
|
|
16358
16358
|
--pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
|
|
16359
16359
|
--pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
|
|
16360
16360
|
}
|
|
16361
|
-
.pf-c-menu-toggle.pf-m-plain {
|
|
16361
|
+
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
|
|
16362
16362
|
--pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
|
|
16363
16363
|
--pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
16364
16364
|
--pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
|
|
@@ -17098,13 +17098,11 @@ ul.pf-c-list {
|
|
|
17098
17098
|
}
|
|
17099
17099
|
|
|
17100
17100
|
.pf-c-nav__item {
|
|
17101
|
-
--pf-c-nav__item__toggle-icon--Rotate: 0;
|
|
17102
17101
|
position: relative;
|
|
17103
17102
|
margin-top: var(--pf-c-nav__item--MarginTop);
|
|
17104
17103
|
}
|
|
17105
17104
|
.pf-c-nav__item.pf-m-expandable {
|
|
17106
17105
|
--pf-c-nav__link--before--BorderBottomWidth: 0;
|
|
17107
|
-
--pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
|
|
17108
17106
|
}
|
|
17109
17107
|
.pf-c-nav__item.pf-m-expandable::before {
|
|
17110
17108
|
position: absolute;
|
|
@@ -17114,6 +17112,9 @@ ul.pf-c-list {
|
|
|
17114
17112
|
content: "";
|
|
17115
17113
|
border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
|
|
17116
17114
|
}
|
|
17115
|
+
.pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
|
|
17116
|
+
transform: rotate(0);
|
|
17117
|
+
}
|
|
17117
17118
|
.pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
|
|
17118
17119
|
--pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
|
|
17119
17120
|
--pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
|
|
@@ -17363,10 +17364,7 @@ ul.pf-c-list {
|
|
|
17363
17364
|
display: inline-block;
|
|
17364
17365
|
transition: var(--pf-c-nav__toggle-icon--Transition);
|
|
17365
17366
|
}
|
|
17366
|
-
.pf-c-nav__item.pf-m-expanded .pf-c-
|
|
17367
|
-
transform: rotate(0deg);
|
|
17368
|
-
}
|
|
17369
|
-
.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
|
|
17367
|
+
.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
|
|
17370
17368
|
transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
|
|
17371
17369
|
}
|
|
17372
17370
|
|
|
@@ -17913,37 +17911,29 @@ ul.pf-c-list {
|
|
|
17913
17911
|
justify-content: space-between;
|
|
17914
17912
|
min-width: var(--pf-c-options-menu__toggle--MinWidth);
|
|
17915
17913
|
max-width: 100%;
|
|
17916
|
-
padding
|
|
17914
|
+
padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
|
|
17917
17915
|
line-height: var(--pf-c-options-menu__toggle--LineHeight);
|
|
17918
17916
|
color: var(--pf-c-options-menu__toggle--Color);
|
|
17919
17917
|
background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
|
|
17920
17918
|
border: none;
|
|
17921
17919
|
}
|
|
17922
|
-
.pf-c-options-menu__toggle:not(.pf-m-text) {
|
|
17923
|
-
padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
|
|
17924
|
-
padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
|
|
17925
|
-
padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
|
|
17926
|
-
}
|
|
17927
17920
|
.pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
|
|
17928
17921
|
--pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
|
|
17929
17922
|
border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
|
|
17930
17923
|
}
|
|
17931
|
-
.pf-c-options-menu__toggle.pf-m-plain {
|
|
17924
|
+
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
|
|
17932
17925
|
--pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
|
|
17933
17926
|
--pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
|
|
17934
17927
|
display: inline-block;
|
|
17935
|
-
}
|
|
17936
|
-
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
|
|
17937
|
-
justify-content: center;
|
|
17938
17928
|
color: var(--pf-c-options-menu__toggle--m-plain--Color);
|
|
17939
17929
|
}
|
|
17940
|
-
.pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
|
|
17930
|
+
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
|
|
17941
17931
|
line-height: var(--pf-c-options-menu__toggle--LineHeight);
|
|
17942
17932
|
}
|
|
17943
|
-
.pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
|
|
17933
|
+
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
|
|
17944
17934
|
--pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
|
|
17945
17935
|
}
|
|
17946
|
-
.pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
|
|
17936
|
+
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
|
|
17947
17937
|
--pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
|
|
17948
17938
|
}
|
|
17949
17939
|
.pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
|
|
@@ -25920,6 +25910,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
25920
25910
|
}
|
|
25921
25911
|
|
|
25922
25912
|
.pf-c-text-input-group {
|
|
25913
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
25923
25914
|
--pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
25924
25915
|
--pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
|
|
25925
25916
|
--pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
@@ -25944,12 +25935,24 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
25944
25935
|
--pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
|
|
25945
25936
|
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
|
|
25946
25937
|
--pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
|
|
25938
|
+
--pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
|
|
25939
|
+
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
25947
25940
|
position: relative;
|
|
25948
25941
|
display: flex;
|
|
25942
|
+
color: var(--pf-c-text-input-group--Color, inherit);
|
|
25943
|
+
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
25949
25944
|
}
|
|
25950
25945
|
.pf-c-text-input-group:hover {
|
|
25951
25946
|
--pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
|
|
25952
25947
|
}
|
|
25948
|
+
.pf-c-text-input-group.pf-m-disabled {
|
|
25949
|
+
--pf-c-text-input-group__text--before--BorderWidth: 0;
|
|
25950
|
+
--pf-c-text-input-group__text--after--BorderBottomWidth: 0;
|
|
25951
|
+
--pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
25952
|
+
--pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
25953
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
25954
|
+
pointer-events: none;
|
|
25955
|
+
}
|
|
25953
25956
|
|
|
25954
25957
|
.pf-c-text-input-group__main {
|
|
25955
25958
|
display: flex;
|