@patternfly/patternfly 4.151.4 → 4.154.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/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/TextInputGroup/text-input-group.css +13 -0
- package/components/TextInputGroup/text-input-group.scss +19 -0
- package/components/Tooltip/tooltip.css +18 -4
- package/components/Tooltip/tooltip.scss +42 -4
- package/docs/components/MenuToggle/examples/MenuToggle.md +48 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -0
- package/docs/components/Tooltip/examples/Tooltip.md +56 -10
- package/package.json +1 -1
- package/patternfly-no-reset.css +36 -11
- package/patternfly.css +36 -11
- 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
|
|
|
@@ -25920,6 +25918,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
25920
25918
|
}
|
|
25921
25919
|
|
|
25922
25920
|
.pf-c-text-input-group {
|
|
25921
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
25923
25922
|
--pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
25924
25923
|
--pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
|
|
25925
25924
|
--pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
@@ -25944,12 +25943,24 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
25944
25943
|
--pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
|
|
25945
25944
|
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
|
|
25946
25945
|
--pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
|
|
25946
|
+
--pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
|
|
25947
|
+
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
25947
25948
|
position: relative;
|
|
25948
25949
|
display: flex;
|
|
25950
|
+
color: var(--pf-c-text-input-group--Color, inherit);
|
|
25951
|
+
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
25949
25952
|
}
|
|
25950
25953
|
.pf-c-text-input-group:hover {
|
|
25951
25954
|
--pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
|
|
25952
25955
|
}
|
|
25956
|
+
.pf-c-text-input-group.pf-m-disabled {
|
|
25957
|
+
--pf-c-text-input-group__text--before--BorderWidth: 0;
|
|
25958
|
+
--pf-c-text-input-group__text--after--BorderBottomWidth: 0;
|
|
25959
|
+
--pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
25960
|
+
--pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
25961
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
25962
|
+
pointer-events: none;
|
|
25963
|
+
}
|
|
25953
25964
|
|
|
25954
25965
|
.pf-c-text-input-group__main {
|
|
25955
25966
|
display: flex;
|
|
@@ -26373,26 +26384,40 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26373
26384
|
max-width: var(--pf-c-tooltip--MaxWidth);
|
|
26374
26385
|
box-shadow: var(--pf-c-tooltip--BoxShadow);
|
|
26375
26386
|
}
|
|
26376
|
-
.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
|
|
26387
|
+
.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
|
|
26377
26388
|
bottom: 0;
|
|
26378
26389
|
left: 50%;
|
|
26379
26390
|
transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
|
|
26380
26391
|
}
|
|
26381
|
-
.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
|
|
26392
|
+
.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
|
|
26382
26393
|
top: 0;
|
|
26383
26394
|
left: 50%;
|
|
26384
26395
|
transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
|
|
26385
26396
|
}
|
|
26386
|
-
.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
|
|
26397
|
+
.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
|
|
26387
26398
|
top: 50%;
|
|
26388
26399
|
right: 0;
|
|
26389
26400
|
transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
|
|
26390
26401
|
}
|
|
26391
|
-
.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
|
|
26402
|
+
.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
|
|
26392
26403
|
top: 50%;
|
|
26393
26404
|
left: 0;
|
|
26394
26405
|
transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
|
|
26395
26406
|
}
|
|
26407
|
+
.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
|
|
26408
|
+
top: var(--pf-c-tooltip__arrow--Height);
|
|
26409
|
+
}
|
|
26410
|
+
.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
|
|
26411
|
+
top: auto;
|
|
26412
|
+
bottom: 0;
|
|
26413
|
+
}
|
|
26414
|
+
.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
|
|
26415
|
+
left: var(--pf-c-tooltip__arrow--Width);
|
|
26416
|
+
}
|
|
26417
|
+
.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
|
|
26418
|
+
right: 0;
|
|
26419
|
+
left: auto;
|
|
26420
|
+
}
|
|
26396
26421
|
|
|
26397
26422
|
.pf-c-tooltip__content {
|
|
26398
26423
|
position: relative;
|