@patternfly/patternfly 6.3.0-prerelease.25 → 6.3.0-prerelease.27
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-common.css +35 -0
- package/base/patternfly-common.scss +46 -1
- package/components/Button/button.css +103 -0
- package/components/Button/button.scss +103 -2
- package/components/FormControl/form-control.css +16 -0
- package/components/FormControl/form-control.scss +9 -0
- package/components/MenuToggle/menu-toggle.css +30 -0
- package/components/MenuToggle/menu-toggle.scss +33 -0
- package/components/Page/page.css +45 -0
- package/components/Page/page.scss +29 -0
- package/components/Progress/progress.css +16 -0
- package/components/Progress/progress.scss +11 -1
- package/components/TextInputGroup/text-input-group.css +16 -0
- package/components/TextInputGroup/text-input-group.scss +8 -0
- package/components/_index.css +226 -0
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Button/examples/Button.md +85 -3
- package/docs/components/Card/examples/Card.md +8 -8
- package/docs/components/DataList/examples/DataList.md +23 -23
- package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
- package/docs/components/Hint/examples/Hint.md +3 -3
- package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
- package/docs/components/Masthead/examples/masthead.md +90 -12
- package/docs/components/Menu/examples/Menu.md +2 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
- package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
- package/docs/components/Page/examples/Page.md +147 -14
- package/docs/components/Pagination/examples/Pagination.md +12 -12
- package/docs/components/Table/examples/Table.md +240 -240
- package/docs/components/Toolbar/examples/Toolbar.md +7 -7
- package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
- package/docs/demos/Alert/examples/Alert.md +66 -9
- package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
- package/docs/demos/Banner/examples/Banner.md +47 -6
- package/docs/demos/Card/examples/Card.md +4 -4
- package/docs/demos/CardView/examples/CardView.md +24 -5
- package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
- package/docs/demos/DataList/examples/DataList.md +100 -24
- package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -9
- package/docs/demos/Drawer/examples/Drawer.md +110 -15
- package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
- package/docs/demos/Masthead/examples/Masthead.md +170 -18
- package/docs/demos/Modal/examples/Modal.md +132 -18
- package/docs/demos/Nav/examples/Nav.md +111 -16
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
- package/docs/demos/Page/examples/Page.md +309 -43
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -27
- package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
- package/docs/demos/Table/examples/Table.md +435 -150
- package/docs/demos/Tabs/examples/Tabs.md +137 -23
- package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
- package/docs/demos/Wizard/examples/Wizard.md +198 -27
- package/package.json +2 -2
- package/patternfly-base-no-globals.css +34 -0
- package/patternfly-base.css +34 -0
- package/patternfly-no-globals.css +260 -0
- package/patternfly.css +260 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +54 -0
package/patternfly.css
CHANGED
|
@@ -194,6 +194,40 @@ button) {
|
|
|
194
194
|
--pf-t--global--duration--50: 1ms !important;
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
+
:root {
|
|
198
|
+
--pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
199
|
+
--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
@property --pf-v6-global--danger-jiggle--TranslateX {
|
|
203
|
+
syntax: "<length>";
|
|
204
|
+
inherits: false;
|
|
205
|
+
initial-value: 0;
|
|
206
|
+
}
|
|
207
|
+
@keyframes pf-v6-global-danger-jiggle-motion {
|
|
208
|
+
33% {
|
|
209
|
+
--pf-v6-global--danger-jiggle--TranslateX: -2px;
|
|
210
|
+
}
|
|
211
|
+
66% {
|
|
212
|
+
--pf-v6-global--danger-jiggle--TranslateX: 3px;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
@keyframes pf-v6-global-fade-in {
|
|
216
|
+
from {
|
|
217
|
+
opacity: 0;
|
|
218
|
+
}
|
|
219
|
+
to {
|
|
220
|
+
opacity: 1;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
@keyframes pf-v6-global-fade-out {
|
|
224
|
+
from {
|
|
225
|
+
opacity: 1;
|
|
226
|
+
}
|
|
227
|
+
to {
|
|
228
|
+
opacity: 0;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
197
231
|
@font-face {
|
|
198
232
|
font-family: "Red Hat Text";
|
|
199
233
|
font-style: normal;
|
|
@@ -9145,6 +9179,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9145
9179
|
--pf-v6-c-button--TextDecorationLine: none;
|
|
9146
9180
|
--pf-v6-c-button--TextDecorationStyle: none;
|
|
9147
9181
|
--pf-v6-c-button--TextDecorationColor: currentcolor;
|
|
9182
|
+
--pf-v6-c-button--TransitionDelay: 0s;
|
|
9148
9183
|
--pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
9149
9184
|
--pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
9150
9185
|
--pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
|
|
@@ -9363,6 +9398,16 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9363
9398
|
--pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
|
|
9364
9399
|
--pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
|
|
9365
9400
|
--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
|
|
9401
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9402
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: auto;
|
|
9403
|
+
--pf-v6-c-button__icon--TransitionDuration: 0s;
|
|
9404
|
+
--pf-v6-c-button__icon--TransitionProperty: none;
|
|
9405
|
+
--pf-v6-c-button__icon--Rotate: 0deg;
|
|
9406
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
9407
|
+
--pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
|
|
9408
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
|
9409
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: none;
|
|
9410
|
+
--pf-v6-c-button--hover__icon--Rotate: 0deg;
|
|
9366
9411
|
--pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
9367
9412
|
--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
9368
9413
|
--pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
|
|
@@ -9388,9 +9433,28 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9388
9433
|
--pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
|
9389
9434
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
|
9390
9435
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
9436
|
+
--pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
9437
|
+
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
9438
|
+
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
9439
|
+
--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
9440
|
+
--pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
|
|
9391
9441
|
--pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
|
|
9392
9442
|
--pf-v6-c-button--m-block--Display: flex;
|
|
9393
9443
|
--pf-v6-c-button--m-block--Width: 100%;
|
|
9444
|
+
--pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
9445
|
+
--pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
|
|
9446
|
+
--pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
|
|
9447
|
+
--pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
|
|
9448
|
+
--pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
|
|
9449
|
+
--pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
|
|
9450
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
|
9451
|
+
--pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
|
|
9452
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
|
9453
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
|
9454
|
+
--pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
|
|
9455
|
+
--pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
|
9456
|
+
--pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
|
9457
|
+
--pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
|
|
9394
9458
|
}
|
|
9395
9459
|
|
|
9396
9460
|
.pf-v6-c-button {
|
|
@@ -9422,9 +9486,11 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9422
9486
|
border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9423
9487
|
border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9424
9488
|
border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9489
|
+
transition-delay: var(--pf-v6-c-button--TransitionDelay);
|
|
9425
9490
|
transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
|
|
9426
9491
|
transition-duration: var(--pf-v6-c-button--TransitionDuration);
|
|
9427
9492
|
transition-property: var(--pf-v6-c-button--TransitionProperty);
|
|
9493
|
+
scale: var(--pf-v6-c-button--Scale, revert);
|
|
9428
9494
|
}
|
|
9429
9495
|
.pf-v6-c-button::after {
|
|
9430
9496
|
position: absolute;
|
|
@@ -9694,7 +9760,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9694
9760
|
}
|
|
9695
9761
|
.pf-v6-c-button.pf-m-favorited {
|
|
9696
9762
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
|
|
9763
|
+
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
|
|
9697
9764
|
--pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
|
|
9765
|
+
--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
|
|
9698
9766
|
--pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
|
|
9699
9767
|
--pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
|
|
9700
9768
|
}
|
|
@@ -9703,6 +9771,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9703
9771
|
animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
|
|
9704
9772
|
animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
|
|
9705
9773
|
}
|
|
9774
|
+
.pf-v6-c-button.pf-m-settings {
|
|
9775
|
+
--pf-v6-c-button__icon--TransitionProperty: rotate;
|
|
9776
|
+
--pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
|
|
9777
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
|
|
9778
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: rotate;
|
|
9779
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
|
|
9780
|
+
--pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
|
|
9781
|
+
--pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
|
|
9782
|
+
}
|
|
9783
|
+
.pf-v6-c-button.pf-m-hamburger {
|
|
9784
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
9785
|
+
--pf-v6-c-button__icon--TransitionDuration: 0s;
|
|
9786
|
+
--pf-v6-c-button__icon--TransitionProperty: scale;
|
|
9787
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
9788
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
|
9789
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: scale;
|
|
9790
|
+
}
|
|
9791
|
+
.pf-v6-c-button.pf-m-hamburger.pf-m-expand {
|
|
9792
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
9793
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
9794
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
9795
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9796
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
9797
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
9798
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
9799
|
+
}
|
|
9800
|
+
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
|
|
9801
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
9802
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
9803
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
9804
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9805
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
9806
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
9807
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
9808
|
+
}
|
|
9706
9809
|
.pf-v6-c-button:hover, .pf-v6-c-button:focus {
|
|
9707
9810
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
|
|
9708
9811
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
|
|
@@ -9710,6 +9813,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9710
9813
|
--pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
|
|
9711
9814
|
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
|
|
9712
9815
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
|
|
9816
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
|
|
9817
|
+
--pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
|
|
9818
|
+
--pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
|
|
9819
|
+
--pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
|
|
9713
9820
|
text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
|
|
9714
9821
|
text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
|
|
9715
9822
|
text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
|
|
@@ -9772,6 +9879,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9772
9879
|
margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
|
|
9773
9880
|
margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
|
|
9774
9881
|
color: var(--pf-v6-c-button__icon--Color);
|
|
9882
|
+
transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
|
|
9883
|
+
transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
|
|
9884
|
+
transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
|
|
9885
|
+
transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
|
|
9886
|
+
rotate: var(--pf-v6-c-button__icon--Rotate);
|
|
9887
|
+
scale: var(--pf-v6-c-button__icon--Scale);
|
|
9775
9888
|
}
|
|
9776
9889
|
.pf-v6-c-button__icon.pf-m-start {
|
|
9777
9890
|
--pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
|
|
@@ -9816,6 +9929,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9816
9929
|
align-items: center;
|
|
9817
9930
|
}
|
|
9818
9931
|
|
|
9932
|
+
.pf-v6-c-button--hamburger-icon path {
|
|
9933
|
+
fill: none;
|
|
9934
|
+
stroke: currentcolor;
|
|
9935
|
+
stroke-linecap: round;
|
|
9936
|
+
stroke-linejoin: round;
|
|
9937
|
+
transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
|
|
9938
|
+
}
|
|
9939
|
+
|
|
9940
|
+
.pf-v6-c-button--hamburger-icon--top {
|
|
9941
|
+
d: var(--pf-v6-c-button--hamburger-icon--top--path);
|
|
9942
|
+
}
|
|
9943
|
+
|
|
9944
|
+
.pf-v6-c-button--hamburger-icon--middle {
|
|
9945
|
+
d: var(--pf-v6-c-button--hamburger-icon--middle--path);
|
|
9946
|
+
}
|
|
9947
|
+
|
|
9948
|
+
.pf-v6-c-button--hamburger-icon--arrow {
|
|
9949
|
+
d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
|
|
9950
|
+
}
|
|
9951
|
+
|
|
9952
|
+
.pf-v6-c-button--hamburger-icon--bottom {
|
|
9953
|
+
d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
|
|
9954
|
+
}
|
|
9955
|
+
|
|
9819
9956
|
@keyframes pf-v6-c-button-icon-notify {
|
|
9820
9957
|
33% {
|
|
9821
9958
|
transform: rotate(30deg);
|
|
@@ -15000,6 +15137,22 @@ ul) {
|
|
|
15000
15137
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
|
|
15001
15138
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
|
|
15002
15139
|
}
|
|
15140
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
15141
|
+
.pf-v6-c-form-control.pf-m-error {
|
|
15142
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
15143
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
15144
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
15145
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
15146
|
+
animation-fill-mode: both;
|
|
15147
|
+
}
|
|
15148
|
+
}
|
|
15149
|
+
.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
|
|
15150
|
+
--pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
15151
|
+
--pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
15152
|
+
animation-name: pf-v6-global-fade-in;
|
|
15153
|
+
animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
|
|
15154
|
+
animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
|
|
15155
|
+
}
|
|
15003
15156
|
.pf-v6-c-form-control.pf-m-error > textarea {
|
|
15004
15157
|
padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
|
|
15005
15158
|
}
|
|
@@ -18102,6 +18255,14 @@ ul.pf-v6-c-list {
|
|
|
18102
18255
|
--pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
18103
18256
|
--pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
|
|
18104
18257
|
--pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
18258
|
+
--pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
|
|
18259
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
|
|
18260
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: none;
|
|
18261
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
|
|
18262
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
|
|
18263
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
|
|
18264
|
+
--pf-v6-c-menu-toggle__icon--Rotate: 0deg;
|
|
18265
|
+
--pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
|
|
18105
18266
|
--pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
|
|
18106
18267
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
18107
18268
|
--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
|
|
@@ -18199,6 +18360,11 @@ ul.pf-v6-c-list {
|
|
|
18199
18360
|
--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
18200
18361
|
--pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
18201
18362
|
--pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
18363
|
+
--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
18364
|
+
--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
18365
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
18366
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
18367
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
|
|
18202
18368
|
}
|
|
18203
18369
|
|
|
18204
18370
|
.pf-v6-c-menu-toggle {
|
|
@@ -18312,6 +18478,10 @@ ul.pf-v6-c-list {
|
|
|
18312
18478
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
|
|
18313
18479
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
|
|
18314
18480
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
|
|
18481
|
+
--pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
|
|
18482
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
|
|
18483
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
|
|
18484
|
+
--pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
|
|
18315
18485
|
}
|
|
18316
18486
|
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
|
|
18317
18487
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
|
|
@@ -18367,6 +18537,15 @@ ul.pf-v6-c-list {
|
|
|
18367
18537
|
opacity: 1;
|
|
18368
18538
|
}
|
|
18369
18539
|
}
|
|
18540
|
+
.pf-v6-c-menu-toggle.pf-m-settings {
|
|
18541
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
|
|
18542
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
|
|
18543
|
+
--pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
|
|
18544
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
|
|
18545
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
|
|
18546
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
|
|
18547
|
+
--pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
|
|
18548
|
+
}
|
|
18370
18549
|
.pf-v6-c-menu-toggle.pf-m-placeholder {
|
|
18371
18550
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
|
|
18372
18551
|
}
|
|
@@ -18528,6 +18707,10 @@ ul.pf-v6-c-list {
|
|
|
18528
18707
|
|
|
18529
18708
|
.pf-v6-c-menu-toggle__icon {
|
|
18530
18709
|
flex-shrink: 0;
|
|
18710
|
+
transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
|
|
18711
|
+
transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
|
|
18712
|
+
transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
|
|
18713
|
+
rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
|
|
18531
18714
|
}
|
|
18532
18715
|
.pf-v6-c-menu-toggle__icon :where(picture, img) {
|
|
18533
18716
|
vertical-align: middle;
|
|
@@ -19744,6 +19927,51 @@ ul.pf-v6-c-list {
|
|
|
19744
19927
|
grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
|
|
19745
19928
|
}
|
|
19746
19929
|
}
|
|
19930
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
19931
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19932
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19933
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19934
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19935
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19936
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19937
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19938
|
+
}
|
|
19939
|
+
.pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
|
|
19940
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19941
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19942
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19943
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19944
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
19945
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19946
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
19947
|
+
}
|
|
19948
|
+
@media (min-width: 75rem) {
|
|
19949
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
|
|
19950
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
|
19951
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
|
19952
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
|
19953
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
19954
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
19955
|
+
}
|
|
19956
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
19957
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19958
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19959
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19960
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19961
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
19962
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19963
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
19964
|
+
}
|
|
19965
|
+
.pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
19966
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19967
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19968
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19969
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19970
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19971
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19972
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19973
|
+
}
|
|
19974
|
+
}
|
|
19747
19975
|
|
|
19748
19976
|
.pf-v6-c-page > .pf-v6-c-masthead {
|
|
19749
19977
|
z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
|
|
@@ -21041,6 +21269,22 @@ ul.pf-v6-c-list {
|
|
|
21041
21269
|
--pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
|
|
21042
21270
|
--pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
|
|
21043
21271
|
}
|
|
21272
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
21273
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
|
|
21274
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
21275
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
21276
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
21277
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
21278
|
+
animation-fill-mode: both;
|
|
21279
|
+
}
|
|
21280
|
+
}
|
|
21281
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
|
|
21282
|
+
--pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
21283
|
+
--pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
21284
|
+
animation-name: pf-v6-global-fade-in;
|
|
21285
|
+
animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
|
|
21286
|
+
animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
|
|
21287
|
+
}
|
|
21044
21288
|
|
|
21045
21289
|
.pf-v6-c-progress__description {
|
|
21046
21290
|
grid-column: 1/2;
|
|
@@ -27260,6 +27504,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
27260
27504
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
|
27261
27505
|
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
|
27262
27506
|
}
|
|
27507
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
27508
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
|
27509
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
27510
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
27511
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
27512
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
27513
|
+
animation-fill-mode: both;
|
|
27514
|
+
}
|
|
27515
|
+
}
|
|
27516
|
+
.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
|
|
27517
|
+
--pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
27518
|
+
--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
27519
|
+
animation-name: pf-v6-global-fade-in;
|
|
27520
|
+
animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
|
|
27521
|
+
animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
|
|
27522
|
+
}
|
|
27263
27523
|
.pf-v6-c-text-input-group:hover {
|
|
27264
27524
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
|
27265
27525
|
}
|