@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
|
@@ -58,6 +58,40 @@
|
|
|
58
58
|
--pf-t--global--duration--50: 1ms !important;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
+
:root {
|
|
62
|
+
--pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
63
|
+
--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@property --pf-v6-global--danger-jiggle--TranslateX {
|
|
67
|
+
syntax: "<length>";
|
|
68
|
+
inherits: false;
|
|
69
|
+
initial-value: 0;
|
|
70
|
+
}
|
|
71
|
+
@keyframes pf-v6-global-danger-jiggle-motion {
|
|
72
|
+
33% {
|
|
73
|
+
--pf-v6-global--danger-jiggle--TranslateX: -2px;
|
|
74
|
+
}
|
|
75
|
+
66% {
|
|
76
|
+
--pf-v6-global--danger-jiggle--TranslateX: 3px;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
@keyframes pf-v6-global-fade-in {
|
|
80
|
+
from {
|
|
81
|
+
opacity: 0;
|
|
82
|
+
}
|
|
83
|
+
to {
|
|
84
|
+
opacity: 1;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
@keyframes pf-v6-global-fade-out {
|
|
88
|
+
from {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
}
|
|
91
|
+
to {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
61
95
|
@font-face {
|
|
62
96
|
font-family: "Red Hat Text";
|
|
63
97
|
font-style: normal;
|
|
@@ -9009,6 +9043,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9009
9043
|
--pf-v6-c-button--TextDecorationLine: none;
|
|
9010
9044
|
--pf-v6-c-button--TextDecorationStyle: none;
|
|
9011
9045
|
--pf-v6-c-button--TextDecorationColor: currentcolor;
|
|
9046
|
+
--pf-v6-c-button--TransitionDelay: 0s;
|
|
9012
9047
|
--pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
9013
9048
|
--pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
9014
9049
|
--pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
|
|
@@ -9227,6 +9262,16 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9227
9262
|
--pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
|
|
9228
9263
|
--pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
|
|
9229
9264
|
--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
|
|
9265
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9266
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: auto;
|
|
9267
|
+
--pf-v6-c-button__icon--TransitionDuration: 0s;
|
|
9268
|
+
--pf-v6-c-button__icon--TransitionProperty: none;
|
|
9269
|
+
--pf-v6-c-button__icon--Rotate: 0deg;
|
|
9270
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
9271
|
+
--pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
|
|
9272
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
|
9273
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: none;
|
|
9274
|
+
--pf-v6-c-button--hover__icon--Rotate: 0deg;
|
|
9230
9275
|
--pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
9231
9276
|
--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
9232
9277
|
--pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
|
|
@@ -9252,9 +9297,28 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9252
9297
|
--pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
|
9253
9298
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
|
9254
9299
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
9300
|
+
--pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
9301
|
+
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
9302
|
+
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
9303
|
+
--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
9304
|
+
--pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
|
|
9255
9305
|
--pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
|
|
9256
9306
|
--pf-v6-c-button--m-block--Display: flex;
|
|
9257
9307
|
--pf-v6-c-button--m-block--Width: 100%;
|
|
9308
|
+
--pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
9309
|
+
--pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
|
|
9310
|
+
--pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
|
|
9311
|
+
--pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
|
|
9312
|
+
--pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
|
|
9313
|
+
--pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
|
|
9314
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
|
9315
|
+
--pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
|
|
9316
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
|
9317
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
|
9318
|
+
--pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
|
|
9319
|
+
--pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
|
9320
|
+
--pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
|
9321
|
+
--pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
|
|
9258
9322
|
}
|
|
9259
9323
|
|
|
9260
9324
|
.pf-v6-c-button {
|
|
@@ -9286,9 +9350,11 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9286
9350
|
border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9287
9351
|
border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9288
9352
|
border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9353
|
+
transition-delay: var(--pf-v6-c-button--TransitionDelay);
|
|
9289
9354
|
transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
|
|
9290
9355
|
transition-duration: var(--pf-v6-c-button--TransitionDuration);
|
|
9291
9356
|
transition-property: var(--pf-v6-c-button--TransitionProperty);
|
|
9357
|
+
scale: var(--pf-v6-c-button--Scale, revert);
|
|
9292
9358
|
}
|
|
9293
9359
|
.pf-v6-c-button::after {
|
|
9294
9360
|
position: absolute;
|
|
@@ -9558,7 +9624,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9558
9624
|
}
|
|
9559
9625
|
.pf-v6-c-button.pf-m-favorited {
|
|
9560
9626
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
|
|
9627
|
+
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
|
|
9561
9628
|
--pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
|
|
9629
|
+
--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
|
|
9562
9630
|
--pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
|
|
9563
9631
|
--pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
|
|
9564
9632
|
}
|
|
@@ -9567,6 +9635,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9567
9635
|
animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
|
|
9568
9636
|
animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
|
|
9569
9637
|
}
|
|
9638
|
+
.pf-v6-c-button.pf-m-settings {
|
|
9639
|
+
--pf-v6-c-button__icon--TransitionProperty: rotate;
|
|
9640
|
+
--pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
|
|
9641
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
|
|
9642
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: rotate;
|
|
9643
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
|
|
9644
|
+
--pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
|
|
9645
|
+
--pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
|
|
9646
|
+
}
|
|
9647
|
+
.pf-v6-c-button.pf-m-hamburger {
|
|
9648
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
9649
|
+
--pf-v6-c-button__icon--TransitionDuration: 0s;
|
|
9650
|
+
--pf-v6-c-button__icon--TransitionProperty: scale;
|
|
9651
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
9652
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
|
9653
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: scale;
|
|
9654
|
+
}
|
|
9655
|
+
.pf-v6-c-button.pf-m-hamburger.pf-m-expand {
|
|
9656
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
9657
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
9658
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
9659
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9660
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
9661
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
9662
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
9663
|
+
}
|
|
9664
|
+
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
|
|
9665
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
9666
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
9667
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
9668
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9669
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
9670
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
9671
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
9672
|
+
}
|
|
9570
9673
|
.pf-v6-c-button:hover, .pf-v6-c-button:focus {
|
|
9571
9674
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
|
|
9572
9675
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
|
|
@@ -9574,6 +9677,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9574
9677
|
--pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
|
|
9575
9678
|
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
|
|
9576
9679
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
|
|
9680
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
|
|
9681
|
+
--pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
|
|
9682
|
+
--pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
|
|
9683
|
+
--pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
|
|
9577
9684
|
text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
|
|
9578
9685
|
text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
|
|
9579
9686
|
text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
|
|
@@ -9636,6 +9743,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9636
9743
|
margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
|
|
9637
9744
|
margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
|
|
9638
9745
|
color: var(--pf-v6-c-button__icon--Color);
|
|
9746
|
+
transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
|
|
9747
|
+
transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
|
|
9748
|
+
transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
|
|
9749
|
+
transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
|
|
9750
|
+
rotate: var(--pf-v6-c-button__icon--Rotate);
|
|
9751
|
+
scale: var(--pf-v6-c-button__icon--Scale);
|
|
9639
9752
|
}
|
|
9640
9753
|
.pf-v6-c-button__icon.pf-m-start {
|
|
9641
9754
|
--pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
|
|
@@ -9680,6 +9793,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9680
9793
|
align-items: center;
|
|
9681
9794
|
}
|
|
9682
9795
|
|
|
9796
|
+
.pf-v6-c-button--hamburger-icon path {
|
|
9797
|
+
fill: none;
|
|
9798
|
+
stroke: currentcolor;
|
|
9799
|
+
stroke-linecap: round;
|
|
9800
|
+
stroke-linejoin: round;
|
|
9801
|
+
transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
|
|
9802
|
+
}
|
|
9803
|
+
|
|
9804
|
+
.pf-v6-c-button--hamburger-icon--top {
|
|
9805
|
+
d: var(--pf-v6-c-button--hamburger-icon--top--path);
|
|
9806
|
+
}
|
|
9807
|
+
|
|
9808
|
+
.pf-v6-c-button--hamburger-icon--middle {
|
|
9809
|
+
d: var(--pf-v6-c-button--hamburger-icon--middle--path);
|
|
9810
|
+
}
|
|
9811
|
+
|
|
9812
|
+
.pf-v6-c-button--hamburger-icon--arrow {
|
|
9813
|
+
d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
|
|
9814
|
+
}
|
|
9815
|
+
|
|
9816
|
+
.pf-v6-c-button--hamburger-icon--bottom {
|
|
9817
|
+
d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
|
|
9818
|
+
}
|
|
9819
|
+
|
|
9683
9820
|
@keyframes pf-v6-c-button-icon-notify {
|
|
9684
9821
|
33% {
|
|
9685
9822
|
transform: rotate(30deg);
|
|
@@ -14864,6 +15001,22 @@ ul) {
|
|
|
14864
15001
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
|
|
14865
15002
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
|
|
14866
15003
|
}
|
|
15004
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
15005
|
+
.pf-v6-c-form-control.pf-m-error {
|
|
15006
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
15007
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
15008
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
15009
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
15010
|
+
animation-fill-mode: both;
|
|
15011
|
+
}
|
|
15012
|
+
}
|
|
15013
|
+
.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
|
|
15014
|
+
--pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
15015
|
+
--pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
15016
|
+
animation-name: pf-v6-global-fade-in;
|
|
15017
|
+
animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
|
|
15018
|
+
animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
|
|
15019
|
+
}
|
|
14867
15020
|
.pf-v6-c-form-control.pf-m-error > textarea {
|
|
14868
15021
|
padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
|
|
14869
15022
|
}
|
|
@@ -17966,6 +18119,14 @@ ul.pf-v6-c-list {
|
|
|
17966
18119
|
--pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
17967
18120
|
--pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
|
|
17968
18121
|
--pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
18122
|
+
--pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
|
|
18123
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
|
|
18124
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: none;
|
|
18125
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
|
|
18126
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
|
|
18127
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
|
|
18128
|
+
--pf-v6-c-menu-toggle__icon--Rotate: 0deg;
|
|
18129
|
+
--pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
|
|
17969
18130
|
--pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
|
|
17970
18131
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
17971
18132
|
--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
|
|
@@ -18063,6 +18224,11 @@ ul.pf-v6-c-list {
|
|
|
18063
18224
|
--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
18064
18225
|
--pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
18065
18226
|
--pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
18227
|
+
--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
18228
|
+
--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
18229
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
18230
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
18231
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
|
|
18066
18232
|
}
|
|
18067
18233
|
|
|
18068
18234
|
.pf-v6-c-menu-toggle {
|
|
@@ -18176,6 +18342,10 @@ ul.pf-v6-c-list {
|
|
|
18176
18342
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
|
|
18177
18343
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
|
|
18178
18344
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
|
|
18345
|
+
--pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
|
|
18346
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
|
|
18347
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
|
|
18348
|
+
--pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
|
|
18179
18349
|
}
|
|
18180
18350
|
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
|
|
18181
18351
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
|
|
@@ -18231,6 +18401,15 @@ ul.pf-v6-c-list {
|
|
|
18231
18401
|
opacity: 1;
|
|
18232
18402
|
}
|
|
18233
18403
|
}
|
|
18404
|
+
.pf-v6-c-menu-toggle.pf-m-settings {
|
|
18405
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
|
|
18406
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
|
|
18407
|
+
--pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
|
|
18408
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
|
|
18409
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
|
|
18410
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
|
|
18411
|
+
--pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
|
|
18412
|
+
}
|
|
18234
18413
|
.pf-v6-c-menu-toggle.pf-m-placeholder {
|
|
18235
18414
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
|
|
18236
18415
|
}
|
|
@@ -18392,6 +18571,10 @@ ul.pf-v6-c-list {
|
|
|
18392
18571
|
|
|
18393
18572
|
.pf-v6-c-menu-toggle__icon {
|
|
18394
18573
|
flex-shrink: 0;
|
|
18574
|
+
transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
|
|
18575
|
+
transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
|
|
18576
|
+
transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
|
|
18577
|
+
rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
|
|
18395
18578
|
}
|
|
18396
18579
|
.pf-v6-c-menu-toggle__icon :where(picture, img) {
|
|
18397
18580
|
vertical-align: middle;
|
|
@@ -19608,6 +19791,51 @@ ul.pf-v6-c-list {
|
|
|
19608
19791
|
grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
|
|
19609
19792
|
}
|
|
19610
19793
|
}
|
|
19794
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
19795
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19796
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19797
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19798
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19799
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19800
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19801
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19802
|
+
}
|
|
19803
|
+
.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) {
|
|
19804
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19805
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19806
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19807
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19808
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
19809
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19810
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
19811
|
+
}
|
|
19812
|
+
@media (min-width: 75rem) {
|
|
19813
|
+
.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) {
|
|
19814
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
|
19815
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
|
19816
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
|
19817
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
19818
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
19819
|
+
}
|
|
19820
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
19821
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19822
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19823
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19824
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19825
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
19826
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19827
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
19828
|
+
}
|
|
19829
|
+
.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) {
|
|
19830
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19831
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19832
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19833
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19834
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19835
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19836
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19837
|
+
}
|
|
19838
|
+
}
|
|
19611
19839
|
|
|
19612
19840
|
.pf-v6-c-page > .pf-v6-c-masthead {
|
|
19613
19841
|
z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
|
|
@@ -20905,6 +21133,22 @@ ul.pf-v6-c-list {
|
|
|
20905
21133
|
--pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
|
|
20906
21134
|
--pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
|
|
20907
21135
|
}
|
|
21136
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
21137
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
|
|
21138
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
21139
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
21140
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
21141
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
21142
|
+
animation-fill-mode: both;
|
|
21143
|
+
}
|
|
21144
|
+
}
|
|
21145
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
|
|
21146
|
+
--pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
21147
|
+
--pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
21148
|
+
animation-name: pf-v6-global-fade-in;
|
|
21149
|
+
animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
|
|
21150
|
+
animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
|
|
21151
|
+
}
|
|
20908
21152
|
|
|
20909
21153
|
.pf-v6-c-progress__description {
|
|
20910
21154
|
grid-column: 1/2;
|
|
@@ -27124,6 +27368,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
27124
27368
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
|
27125
27369
|
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
|
27126
27370
|
}
|
|
27371
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
27372
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
|
27373
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
27374
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
27375
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
27376
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
27377
|
+
animation-fill-mode: both;
|
|
27378
|
+
}
|
|
27379
|
+
}
|
|
27380
|
+
.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
|
|
27381
|
+
--pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
27382
|
+
--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
27383
|
+
animation-name: pf-v6-global-fade-in;
|
|
27384
|
+
animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
|
|
27385
|
+
animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
|
|
27386
|
+
}
|
|
27127
27387
|
.pf-v6-c-text-input-group:hover {
|
|
27128
27388
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
|
27129
27389
|
}
|