@patternfly/patternfly 6.3.0-prerelease.24 → 6.3.0-prerelease.26
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/Button/button.css +115 -5
- package/components/Button/button.scss +118 -6
- package/components/Menu/menu.css +24 -4
- package/components/Menu/menu.scss +20 -5
- 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/_index.css +214 -9
- 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-no-globals.css +214 -9
- package/patternfly.css +214 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +35 -0
|
@@ -9009,9 +9009,10 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9009
9009
|
--pf-v6-c-button--TextDecorationLine: none;
|
|
9010
9010
|
--pf-v6-c-button--TextDecorationStyle: none;
|
|
9011
9011
|
--pf-v6-c-button--TextDecorationColor: currentcolor;
|
|
9012
|
+
--pf-v6-c-button--TransitionDelay: 0s;
|
|
9012
9013
|
--pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
9013
|
-
--pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--
|
|
9014
|
-
--pf-v6-c-button--TransitionProperty: color, background
|
|
9014
|
+
--pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
9015
|
+
--pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
|
|
9015
9016
|
--pf-v6-c-button--hover--BackgroundColor: transparent;
|
|
9016
9017
|
--pf-v6-c-button--hover--BorderColor: transparent;
|
|
9017
9018
|
--pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
|
|
@@ -9227,6 +9228,16 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9227
9228
|
--pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
|
|
9228
9229
|
--pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
|
|
9229
9230
|
--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
|
|
9231
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9232
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: auto;
|
|
9233
|
+
--pf-v6-c-button__icon--TransitionDuration: 0s;
|
|
9234
|
+
--pf-v6-c-button__icon--TransitionProperty: none;
|
|
9235
|
+
--pf-v6-c-button__icon--Rotate: 0deg;
|
|
9236
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
9237
|
+
--pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
|
|
9238
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
|
9239
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: none;
|
|
9240
|
+
--pf-v6-c-button--hover__icon--Rotate: 0deg;
|
|
9230
9241
|
--pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
9231
9242
|
--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
9232
9243
|
--pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
|
|
@@ -9252,9 +9263,28 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9252
9263
|
--pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
|
9253
9264
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
|
9254
9265
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
9266
|
+
--pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
9267
|
+
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
9268
|
+
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
9269
|
+
--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
9270
|
+
--pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
|
|
9255
9271
|
--pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
|
|
9256
9272
|
--pf-v6-c-button--m-block--Display: flex;
|
|
9257
9273
|
--pf-v6-c-button--m-block--Width: 100%;
|
|
9274
|
+
--pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
9275
|
+
--pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
|
|
9276
|
+
--pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
|
|
9277
|
+
--pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
|
|
9278
|
+
--pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
|
|
9279
|
+
--pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
|
|
9280
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
|
9281
|
+
--pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
|
|
9282
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
|
9283
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
|
9284
|
+
--pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
|
|
9285
|
+
--pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
|
9286
|
+
--pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
|
9287
|
+
--pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
|
|
9258
9288
|
}
|
|
9259
9289
|
|
|
9260
9290
|
.pf-v6-c-button {
|
|
@@ -9278,16 +9308,19 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9278
9308
|
text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
|
|
9279
9309
|
white-space: nowrap;
|
|
9280
9310
|
cursor: pointer;
|
|
9311
|
+
-webkit-user-select: none;
|
|
9281
9312
|
user-select: none;
|
|
9282
|
-
background
|
|
9313
|
+
background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
|
|
9283
9314
|
border: 0;
|
|
9284
9315
|
border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9285
9316
|
border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9286
9317
|
border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9287
9318
|
border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
|
|
9319
|
+
transition-delay: var(--pf-v6-c-button--TransitionDelay);
|
|
9288
9320
|
transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
|
|
9289
9321
|
transition-duration: var(--pf-v6-c-button--TransitionDuration);
|
|
9290
9322
|
transition-property: var(--pf-v6-c-button--TransitionProperty);
|
|
9323
|
+
scale: var(--pf-v6-c-button--Scale, revert);
|
|
9291
9324
|
}
|
|
9292
9325
|
.pf-v6-c-button::after {
|
|
9293
9326
|
position: absolute;
|
|
@@ -9396,6 +9429,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
9396
9429
|
--pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
|
|
9397
9430
|
text-align: start;
|
|
9398
9431
|
white-space: normal;
|
|
9432
|
+
background: transparent;
|
|
9399
9433
|
outline-offset: 0.125rem;
|
|
9400
9434
|
}
|
|
9401
9435
|
span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
@@ -9529,6 +9563,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9529
9563
|
--pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
|
|
9530
9564
|
--pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
|
|
9531
9565
|
min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
|
|
9566
|
+
background: var(--pf-v6-c-button--BackgroundColor);
|
|
9532
9567
|
}
|
|
9533
9568
|
.pf-v6-c-button.pf-m-block {
|
|
9534
9569
|
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
|
|
@@ -9555,7 +9590,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9555
9590
|
}
|
|
9556
9591
|
.pf-v6-c-button.pf-m-favorited {
|
|
9557
9592
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
|
|
9593
|
+
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
|
|
9558
9594
|
--pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
|
|
9595
|
+
--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
|
|
9559
9596
|
--pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
|
|
9560
9597
|
--pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
|
|
9561
9598
|
}
|
|
@@ -9564,6 +9601,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9564
9601
|
animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
|
|
9565
9602
|
animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
|
|
9566
9603
|
}
|
|
9604
|
+
.pf-v6-c-button.pf-m-settings {
|
|
9605
|
+
--pf-v6-c-button__icon--TransitionProperty: rotate;
|
|
9606
|
+
--pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
|
|
9607
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
|
|
9608
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: rotate;
|
|
9609
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
|
|
9610
|
+
--pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
|
|
9611
|
+
--pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
|
|
9612
|
+
}
|
|
9613
|
+
.pf-v6-c-button.pf-m-hamburger {
|
|
9614
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
9615
|
+
--pf-v6-c-button__icon--TransitionDuration: 0s;
|
|
9616
|
+
--pf-v6-c-button__icon--TransitionProperty: scale;
|
|
9617
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
9618
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
|
9619
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: scale;
|
|
9620
|
+
}
|
|
9621
|
+
.pf-v6-c-button.pf-m-hamburger.pf-m-expand {
|
|
9622
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
9623
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
9624
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
9625
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9626
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
9627
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
9628
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
9629
|
+
}
|
|
9630
|
+
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
|
|
9631
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
9632
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
9633
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
9634
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
9635
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
9636
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
9637
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
9638
|
+
}
|
|
9567
9639
|
.pf-v6-c-button:hover, .pf-v6-c-button:focus {
|
|
9568
9640
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
|
|
9569
9641
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
|
|
@@ -9571,24 +9643,32 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9571
9643
|
--pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
|
|
9572
9644
|
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
|
|
9573
9645
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
|
|
9646
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
|
|
9647
|
+
--pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
|
|
9648
|
+
--pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
|
|
9649
|
+
--pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
|
|
9574
9650
|
text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
|
|
9575
9651
|
text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
|
|
9576
9652
|
text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
|
|
9577
9653
|
}
|
|
9578
|
-
.pf-v6-c-button.pf-m-clicked {
|
|
9654
|
+
.pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
|
|
9579
9655
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
|
|
9580
9656
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
|
|
9581
9657
|
--pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
|
|
9582
9658
|
--pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
|
|
9583
9659
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
|
|
9584
9660
|
}
|
|
9661
|
+
.pf-v6-c-button:active {
|
|
9662
|
+
background-size: 100%;
|
|
9663
|
+
transition-duration: 0s;
|
|
9664
|
+
}
|
|
9585
9665
|
.pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
|
|
9586
9666
|
pointer-events: none;
|
|
9587
9667
|
}
|
|
9588
9668
|
.pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
|
|
9589
9669
|
color: var(--pf-v6-c-button--disabled--Color);
|
|
9590
9670
|
text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
|
|
9591
|
-
background
|
|
9671
|
+
background: var(--pf-v6-c-button--disabled--BackgroundColor);
|
|
9592
9672
|
}
|
|
9593
9673
|
.pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
|
|
9594
9674
|
border-color: transparent;
|
|
@@ -9629,6 +9709,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9629
9709
|
margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
|
|
9630
9710
|
margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
|
|
9631
9711
|
color: var(--pf-v6-c-button__icon--Color);
|
|
9712
|
+
transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
|
|
9713
|
+
transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
|
|
9714
|
+
transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
|
|
9715
|
+
transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
|
|
9716
|
+
rotate: var(--pf-v6-c-button__icon--Rotate);
|
|
9717
|
+
scale: var(--pf-v6-c-button__icon--Scale);
|
|
9632
9718
|
}
|
|
9633
9719
|
.pf-v6-c-button__icon.pf-m-start {
|
|
9634
9720
|
--pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
|
|
@@ -9673,6 +9759,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
9673
9759
|
align-items: center;
|
|
9674
9760
|
}
|
|
9675
9761
|
|
|
9762
|
+
.pf-v6-c-button--hamburger-icon path {
|
|
9763
|
+
fill: none;
|
|
9764
|
+
stroke: currentcolor;
|
|
9765
|
+
stroke-linecap: round;
|
|
9766
|
+
stroke-linejoin: round;
|
|
9767
|
+
transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
|
|
9768
|
+
}
|
|
9769
|
+
|
|
9770
|
+
.pf-v6-c-button--hamburger-icon--top {
|
|
9771
|
+
d: var(--pf-v6-c-button--hamburger-icon--top--path);
|
|
9772
|
+
}
|
|
9773
|
+
|
|
9774
|
+
.pf-v6-c-button--hamburger-icon--middle {
|
|
9775
|
+
d: var(--pf-v6-c-button--hamburger-icon--middle--path);
|
|
9776
|
+
}
|
|
9777
|
+
|
|
9778
|
+
.pf-v6-c-button--hamburger-icon--arrow {
|
|
9779
|
+
d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
|
|
9780
|
+
}
|
|
9781
|
+
|
|
9782
|
+
.pf-v6-c-button--hamburger-icon--bottom {
|
|
9783
|
+
d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
|
|
9784
|
+
}
|
|
9785
|
+
|
|
9676
9786
|
@keyframes pf-v6-c-button-icon-notify {
|
|
9677
9787
|
33% {
|
|
9678
9788
|
transform: rotate(30deg);
|
|
@@ -17325,7 +17435,7 @@ ul.pf-v6-c-list {
|
|
|
17325
17435
|
--pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
|
|
17326
17436
|
--pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
|
|
17327
17437
|
--pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
|
|
17328
|
-
--pf-v6-c-menu--TransitionDuration:
|
|
17438
|
+
--pf-v6-c-menu--TransitionDuration: 0s;
|
|
17329
17439
|
--pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
17330
17440
|
--pf-v6-c-menu--m-plain--BoxShadow: none;
|
|
17331
17441
|
--pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
|
|
@@ -17398,14 +17508,34 @@ ul.pf-v6-c-list {
|
|
|
17398
17508
|
--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
|
|
17399
17509
|
--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
|
|
17400
17510
|
--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
|
|
17401
|
-
--pf-v6-c-menu--m-drilldown__content--Transition:
|
|
17511
|
+
--pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
|
|
17402
17512
|
--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
|
|
17403
|
-
--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform:
|
|
17513
|
+
--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
|
|
17404
17514
|
--pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
|
|
17405
|
-
--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform:
|
|
17515
|
+
--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
|
|
17406
17516
|
--pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
|
|
17407
17517
|
--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
|
|
17408
17518
|
}
|
|
17519
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
17520
|
+
.pf-v6-c-menu {
|
|
17521
|
+
--pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
17522
|
+
}
|
|
17523
|
+
}
|
|
17524
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
17525
|
+
.pf-v6-c-menu {
|
|
17526
|
+
--pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
|
|
17527
|
+
}
|
|
17528
|
+
}
|
|
17529
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
17530
|
+
.pf-v6-c-menu {
|
|
17531
|
+
--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
|
|
17532
|
+
}
|
|
17533
|
+
}
|
|
17534
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
17535
|
+
.pf-v6-c-menu {
|
|
17536
|
+
--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
|
|
17537
|
+
}
|
|
17538
|
+
}
|
|
17409
17539
|
|
|
17410
17540
|
.pf-v6-c-menu__content,
|
|
17411
17541
|
.pf-v6-c-menu__list-item,
|
|
@@ -17939,6 +18069,14 @@ ul.pf-v6-c-list {
|
|
|
17939
18069
|
--pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
17940
18070
|
--pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
|
|
17941
18071
|
--pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
18072
|
+
--pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
|
|
18073
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
|
|
18074
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: none;
|
|
18075
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
|
|
18076
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
|
|
18077
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
|
|
18078
|
+
--pf-v6-c-menu-toggle__icon--Rotate: 0deg;
|
|
18079
|
+
--pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
|
|
17942
18080
|
--pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
|
|
17943
18081
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
17944
18082
|
--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
|
|
@@ -18036,6 +18174,11 @@ ul.pf-v6-c-list {
|
|
|
18036
18174
|
--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
18037
18175
|
--pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
18038
18176
|
--pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
18177
|
+
--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
18178
|
+
--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
18179
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
18180
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
18181
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
|
|
18039
18182
|
}
|
|
18040
18183
|
|
|
18041
18184
|
.pf-v6-c-menu-toggle {
|
|
@@ -18149,6 +18292,10 @@ ul.pf-v6-c-list {
|
|
|
18149
18292
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
|
|
18150
18293
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
|
|
18151
18294
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
|
|
18295
|
+
--pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
|
|
18296
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
|
|
18297
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
|
|
18298
|
+
--pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
|
|
18152
18299
|
}
|
|
18153
18300
|
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
|
|
18154
18301
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
|
|
@@ -18204,6 +18351,15 @@ ul.pf-v6-c-list {
|
|
|
18204
18351
|
opacity: 1;
|
|
18205
18352
|
}
|
|
18206
18353
|
}
|
|
18354
|
+
.pf-v6-c-menu-toggle.pf-m-settings {
|
|
18355
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
|
|
18356
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
|
|
18357
|
+
--pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
|
|
18358
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
|
|
18359
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
|
|
18360
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
|
|
18361
|
+
--pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
|
|
18362
|
+
}
|
|
18207
18363
|
.pf-v6-c-menu-toggle.pf-m-placeholder {
|
|
18208
18364
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
|
|
18209
18365
|
}
|
|
@@ -18365,6 +18521,10 @@ ul.pf-v6-c-list {
|
|
|
18365
18521
|
|
|
18366
18522
|
.pf-v6-c-menu-toggle__icon {
|
|
18367
18523
|
flex-shrink: 0;
|
|
18524
|
+
transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
|
|
18525
|
+
transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
|
|
18526
|
+
transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
|
|
18527
|
+
rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
|
|
18368
18528
|
}
|
|
18369
18529
|
.pf-v6-c-menu-toggle__icon :where(picture, img) {
|
|
18370
18530
|
vertical-align: middle;
|
|
@@ -19581,6 +19741,51 @@ ul.pf-v6-c-list {
|
|
|
19581
19741
|
grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
|
|
19582
19742
|
}
|
|
19583
19743
|
}
|
|
19744
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
19745
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19746
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19747
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19748
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19749
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19750
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19751
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19752
|
+
}
|
|
19753
|
+
.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) {
|
|
19754
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19755
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19756
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19757
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19758
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
19759
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19760
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
19761
|
+
}
|
|
19762
|
+
@media (min-width: 75rem) {
|
|
19763
|
+
.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) {
|
|
19764
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
|
19765
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
|
19766
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
|
19767
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
19768
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
19769
|
+
}
|
|
19770
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
19771
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19772
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19773
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19774
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19775
|
+
--pf-v6-c-button__icon--Scale: 1;
|
|
19776
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19777
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
|
19778
|
+
}
|
|
19779
|
+
.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) {
|
|
19780
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
19781
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
19782
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
19783
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
19784
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19785
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
19786
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
|
19787
|
+
}
|
|
19788
|
+
}
|
|
19584
19789
|
|
|
19585
19790
|
.pf-v6-c-page > .pf-v6-c-masthead {
|
|
19586
19791
|
z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
|