@patternfly/react-styles 6.5.0-prerelease.6 → 6.5.0-prerelease.9
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/CHANGELOG.md +6 -0
- package/css/components/Compass/compass.css +68 -29
- package/css/components/Compass/compass.d.ts +2 -0
- package/css/components/Compass/compass.js +2 -0
- package/css/components/Compass/compass.mjs +2 -0
- package/css/components/Drawer/drawer.css +30 -26
- package/css/components/ExpandableSection/expandable-section.css +3 -0
- package/css/components/Masthead/masthead.css +52 -0
- package/css/components/Masthead/masthead.d.ts +1 -0
- package/css/components/Masthead/masthead.js +1 -0
- package/css/components/Masthead/masthead.mjs +1 -0
- package/css/components/Nav/nav.css +59 -0
- package/css/components/Nav/nav.d.ts +3 -1
- package/css/components/Nav/nav.js +3 -1
- package/css/components/Nav/nav.mjs +3 -1
- package/css/components/Page/page.css +20 -0
- package/css/components/Page/page.d.ts +2 -0
- package/css/components/Page/page.js +2 -0
- package/css/components/Page/page.mjs +2 -0
- package/css/components/Toolbar/toolbar.css +32 -6
- package/css/components/Toolbar/toolbar.d.ts +1 -0
- package/css/components/Toolbar/toolbar.js +1 -0
- package/css/components/Toolbar/toolbar.mjs +1 -0
- package/css/components/_index.css +264 -61
- package/css/components/_index.d.ts +5 -0
- package/css/components/_index.js +5 -0
- package/css/components/_index.mjs +5 -0
- package/css/docs/components/Compass/examples/Compass.css +8 -2
- package/css/docs/components/Compass/examples/Compass.d.ts +4 -1
- package/css/docs/components/Compass/examples/Compass.js +4 -1
- package/css/docs/components/Compass/examples/Compass.mjs +4 -1
- package/css/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
- package/css/docs/layouts/Bullseye/examples/Bullseye.d.ts +1 -1
- package/css/docs/layouts/Bullseye/examples/Bullseye.js +1 -1
- package/css/docs/layouts/Bullseye/examples/Bullseye.mjs +1 -1
- package/css/docs/layouts/Flex/examples/Flex.css +3 -3
- package/css/docs/layouts/Flex/examples/Flex.d.ts +2 -2
- package/css/docs/layouts/Flex/examples/Flex.js +2 -2
- package/css/docs/layouts/Flex/examples/Flex.mjs +2 -2
- package/css/docs/layouts/Gallery/examples/Gallery.css +2 -2
- package/css/docs/layouts/Gallery/examples/Gallery.d.ts +1 -1
- package/css/docs/layouts/Gallery/examples/Gallery.js +1 -1
- package/css/docs/layouts/Gallery/examples/Gallery.mjs +1 -1
- package/css/docs/layouts/Grid/examples/Grid.css +1 -1
- package/css/docs/layouts/Grid/examples/Grid.d.ts +1 -1
- package/css/docs/layouts/Grid/examples/Grid.js +1 -1
- package/css/docs/layouts/Grid/examples/Grid.mjs +1 -1
- package/css/docs/layouts/Level/examples/Level.css +3 -3
- package/css/docs/layouts/Level/examples/Level.d.ts +1 -1
- package/css/docs/layouts/Level/examples/Level.js +1 -1
- package/css/docs/layouts/Level/examples/Level.mjs +1 -1
- package/css/docs/layouts/Split/examples/Split.css +1 -1
- package/css/docs/layouts/Split/examples/Split.d.ts +1 -1
- package/css/docs/layouts/Split/examples/Split.js +1 -1
- package/css/docs/layouts/Split/examples/Split.mjs +1 -1
- package/css/docs/layouts/Stack/examples/Stack.css +3 -3
- package/css/docs/layouts/Stack/examples/Stack.d.ts +1 -1
- package/css/docs/layouts/Stack/examples/Stack.js +1 -1
- package/css/docs/layouts/Stack/examples/Stack.mjs +1 -1
- package/css/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/css/docs/utilities/Alignment/examples/Alignment.d.ts +1 -1
- package/css/docs/utilities/Alignment/examples/Alignment.js +1 -1
- package/css/docs/utilities/Alignment/examples/Alignment.mjs +1 -1
- package/css/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
- package/css/docs/utilities/BoxShadow/examples/box-shadow.d.ts +1 -1
- package/css/docs/utilities/BoxShadow/examples/box-shadow.js +1 -1
- package/css/docs/utilities/BoxShadow/examples/box-shadow.mjs +1 -1
- package/css/docs/utilities/Display/examples/Display.css +1 -1
- package/css/docs/utilities/Display/examples/Display.d.ts +1 -1
- package/css/docs/utilities/Display/examples/Display.js +1 -1
- package/css/docs/utilities/Display/examples/Display.mjs +1 -1
- package/css/docs/utilities/Flex/examples/Flex.css +7 -7
- package/css/docs/utilities/Flex/examples/Flex.d.ts +1 -1
- package/css/docs/utilities/Flex/examples/Flex.js +1 -1
- package/css/docs/utilities/Flex/examples/Flex.mjs +1 -1
- package/css/docs/utilities/Float/examples/Float.css +2 -2
- package/css/docs/utilities/Float/examples/Float.d.ts +1 -1
- package/css/docs/utilities/Float/examples/Float.js +1 -1
- package/css/docs/utilities/Float/examples/Float.mjs +1 -1
- package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/css/docs/utilities/Spacing/examples/Spacing.d.ts +1 -1
- package/css/docs/utilities/Spacing/examples/Spacing.js +1 -1
- package/css/docs/utilities/Spacing/examples/Spacing.mjs +1 -1
- package/package.json +3 -3
|
@@ -3512,8 +3512,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3512
3512
|
--pf-v6-c-compass--BackgroundImage--light: none;
|
|
3513
3513
|
--pf-v6-c-compass--BackgroundImage--dark: none;
|
|
3514
3514
|
--pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3515
|
-
--pf-v6-c-compass--
|
|
3516
|
-
--pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3515
|
+
--pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3517
3516
|
--pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
|
|
3518
3517
|
--pf-v6-c-compass__nav--PaddingBlockStart: 0;
|
|
3519
3518
|
--pf-v6-c-compass__nav--PaddingBlockEnd: 0;
|
|
@@ -3528,47 +3527,59 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3528
3527
|
--pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
|
|
3529
3528
|
--pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
|
|
3530
3529
|
--pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
|
|
3531
|
-
--pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--
|
|
3532
|
-
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
3533
|
-
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
3534
|
-
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
3530
|
+
--pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
|
|
3535
3531
|
--pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
3536
3532
|
--pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3537
3533
|
--pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3538
3534
|
--pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3539
3535
|
--pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
|
|
3540
|
-
--pf-v6-c-compass__panel--
|
|
3536
|
+
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
3537
|
+
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
3541
3538
|
--pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
|
|
3539
|
+
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
3540
|
+
--pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
3542
3541
|
--pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
3543
3542
|
--pf-v6-c-compass__message-bar--Width: 450px;
|
|
3544
3543
|
--pf-v6-c-compass__message-bar--MinWidth: 300px;
|
|
3545
3544
|
--pf-v6-c-compass__message-bar--MaxWidth: 600px;
|
|
3546
|
-
--pf-v6-c-compass--section--
|
|
3545
|
+
--pf-v6-c-compass--section--slide--length--header: 100%;
|
|
3546
|
+
--pf-v6-c-compass--section--slide--length--sidebar: 100%;
|
|
3547
|
+
--pf-v6-c-compass--section--slide--length--main-footer: 100%;
|
|
3548
|
+
--pf-v6-c-compass--section--slide--length--footer: 100%;
|
|
3549
|
+
--pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
|
|
3547
3550
|
--pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
3548
|
-
--pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
|
|
3549
|
-
--pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate,
|
|
3550
|
-
--pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
|
|
3551
|
+
--pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
|
|
3552
|
+
--pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
|
|
3553
|
+
--pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
|
|
3551
3554
|
--pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
|
|
3552
|
-
--pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
|
|
3555
|
+
--pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
|
|
3553
3556
|
--pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
|
|
3554
3557
|
}
|
|
3555
3558
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
3556
3559
|
.pf-v6-c-compass {
|
|
3557
|
-
--pf-v6-c-compass--section--
|
|
3558
|
-
--pf-v6-c-compass--section--
|
|
3559
|
-
--pf-v6-c-compass--section--
|
|
3560
|
-
|
|
3561
|
-
|
|
3560
|
+
--pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
|
|
3561
|
+
--pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
|
|
3562
|
+
--pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
|
|
3563
|
+
}
|
|
3564
|
+
.pf-v6-c-compass.pf-m-animate-smoothly {
|
|
3565
|
+
--pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
|
|
3566
|
+
--pf-v6-c-compass--section--slide--length--header: 10rem;
|
|
3567
|
+
--pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
|
|
3568
|
+
--pf-v6-c-compass--section--slide--length--main-footer: 6rem;
|
|
3569
|
+
--pf-v6-c-compass--section--slide--length--footer: 6rem;
|
|
3570
|
+
--pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
|
|
3571
|
+
--pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
|
|
3572
|
+
--pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
|
|
3562
3573
|
}
|
|
3563
3574
|
}
|
|
3564
3575
|
|
|
3565
3576
|
.pf-v6-c-compass {
|
|
3577
|
+
interpolate-size: allow-keywords;
|
|
3566
3578
|
display: grid;
|
|
3567
3579
|
grid-template-areas: "header header header" "sidebar-start main sidebar-end";
|
|
3568
3580
|
grid-template-rows: auto 1fr;
|
|
3569
3581
|
grid-template-columns: auto 1fr auto;
|
|
3570
3582
|
grid-auto-rows: auto;
|
|
3571
|
-
gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
|
|
3572
3583
|
align-items: center;
|
|
3573
3584
|
justify-content: center;
|
|
3574
3585
|
height: 100dvh;
|
|
@@ -3577,6 +3588,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3577
3588
|
background-image: var(--pf-v6-c-compass--BackgroundImage);
|
|
3578
3589
|
background-size: cover;
|
|
3579
3590
|
}
|
|
3591
|
+
.pf-v6-c-compass.pf-m-dock {
|
|
3592
|
+
grid-template-areas: "dock main";
|
|
3593
|
+
grid-template-rows: auto;
|
|
3594
|
+
grid-template-columns: auto 1fr;
|
|
3595
|
+
align-items: stretch;
|
|
3596
|
+
padding: 0;
|
|
3597
|
+
}
|
|
3598
|
+
.pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
|
|
3599
|
+
padding: var(--pf-v6-c-compass--Padding);
|
|
3600
|
+
}
|
|
3580
3601
|
:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
|
|
3581
3602
|
--pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
|
|
3582
3603
|
}
|
|
@@ -3588,6 +3609,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3588
3609
|
.pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
|
|
3589
3610
|
.pf-v6-c-compass__main-footer,
|
|
3590
3611
|
.pf-v6-c-compass__footer {
|
|
3612
|
+
margin: 0;
|
|
3591
3613
|
visibility: hidden;
|
|
3592
3614
|
opacity: 0;
|
|
3593
3615
|
transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
|
|
@@ -3609,12 +3631,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3609
3631
|
.pf-v6-c-compass__header,
|
|
3610
3632
|
.pf-v6-c-compass__main-footer,
|
|
3611
3633
|
.pf-v6-c-compass__footer {
|
|
3612
|
-
|
|
3634
|
+
height: 0;
|
|
3613
3635
|
}
|
|
3614
3636
|
.pf-v6-c-compass__header.pf-m-expanded,
|
|
3615
3637
|
.pf-v6-c-compass__main-footer.pf-m-expanded,
|
|
3616
3638
|
.pf-v6-c-compass__footer.pf-m-expanded {
|
|
3617
|
-
|
|
3639
|
+
height: auto;
|
|
3618
3640
|
}
|
|
3619
3641
|
|
|
3620
3642
|
.pf-v6-c-compass__header {
|
|
@@ -3622,7 +3644,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3622
3644
|
grid-area: header;
|
|
3623
3645
|
grid-template-columns: 1fr auto 1fr;
|
|
3624
3646
|
align-items: start;
|
|
3625
|
-
translate: 0 -
|
|
3647
|
+
translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
|
|
3648
|
+
}
|
|
3649
|
+
.pf-v6-c-compass__header.pf-m-expanded {
|
|
3650
|
+
margin-block-end: var(--pf-v6-c-compass--Gap);
|
|
3626
3651
|
}
|
|
3627
3652
|
|
|
3628
3653
|
.pf-v6-c-compass__profile {
|
|
@@ -3659,25 +3684,33 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3659
3684
|
--pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
|
|
3660
3685
|
--pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
|
|
3661
3686
|
--pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
|
|
3662
|
-
|
|
3687
|
+
display: flex;
|
|
3688
|
+
width: 0;
|
|
3663
3689
|
}
|
|
3664
3690
|
.pf-v6-c-compass__sidebar.pf-m-expanded {
|
|
3665
|
-
|
|
3691
|
+
width: auto;
|
|
3666
3692
|
}
|
|
3667
3693
|
.pf-v6-c-compass__sidebar.pf-m-start {
|
|
3668
|
-
translate: -
|
|
3694
|
+
translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
|
|
3669
3695
|
grid-area: sidebar-start;
|
|
3670
3696
|
}
|
|
3671
3697
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
|
|
3672
|
-
translate:
|
|
3698
|
+
translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
|
|
3673
3699
|
}
|
|
3674
3700
|
|
|
3701
|
+
.pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
|
|
3702
|
+
margin-inline-end: var(--pf-v6-c-compass--Gap);
|
|
3703
|
+
}
|
|
3675
3704
|
.pf-v6-c-compass__sidebar.pf-m-end {
|
|
3676
|
-
translate:
|
|
3705
|
+
translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
|
|
3677
3706
|
grid-area: sidebar-end;
|
|
3678
3707
|
}
|
|
3679
3708
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
|
|
3680
|
-
translate: -
|
|
3709
|
+
translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
|
|
3710
|
+
}
|
|
3711
|
+
|
|
3712
|
+
.pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
|
|
3713
|
+
margin-inline-start: var(--pf-v6-c-compass--Gap);
|
|
3681
3714
|
}
|
|
3682
3715
|
|
|
3683
3716
|
.pf-v6-c-compass__main {
|
|
@@ -3713,15 +3746,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3713
3746
|
.pf-v6-c-compass__main-footer {
|
|
3714
3747
|
display: flex;
|
|
3715
3748
|
justify-content: center;
|
|
3749
|
+
min-height: 0;
|
|
3750
|
+
translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
|
|
3751
|
+
}
|
|
3752
|
+
.pf-v6-c-compass__main-footer.pf-m-expanded {
|
|
3716
3753
|
margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
|
|
3717
|
-
translate: 0 100%;
|
|
3718
3754
|
}
|
|
3719
3755
|
|
|
3720
3756
|
.pf-v6-c-compass__footer {
|
|
3721
3757
|
display: flex;
|
|
3722
3758
|
grid-column: 1/-1;
|
|
3723
3759
|
justify-content: center;
|
|
3724
|
-
translate: 0
|
|
3760
|
+
translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
|
|
3761
|
+
}
|
|
3762
|
+
.pf-v6-c-compass__footer.pf-m-expanded {
|
|
3763
|
+
margin-block-start: var(--pf-v6-c-compass--Gap);
|
|
3725
3764
|
}
|
|
3726
3765
|
|
|
3727
3766
|
.pf-v6-c-compass__message-bar {
|
|
@@ -6218,7 +6257,7 @@ ul) {
|
|
|
6218
6257
|
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
|
|
6219
6258
|
--pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
|
|
6220
6259
|
--pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
|
|
6221
|
-
--pf-v6-c-drawer--m-pill--m-expanded__panel--inset:
|
|
6260
|
+
--pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
|
|
6222
6261
|
}
|
|
6223
6262
|
.pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
|
|
6224
6263
|
padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
|
|
@@ -6247,7 +6286,7 @@ ul) {
|
|
|
6247
6286
|
visibility: visible;
|
|
6248
6287
|
}
|
|
6249
6288
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
6250
|
-
transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
|
|
6289
|
+
transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
|
|
6251
6290
|
}
|
|
6252
6291
|
|
|
6253
6292
|
.pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
@@ -6596,82 +6635,86 @@ ul) {
|
|
|
6596
6635
|
}
|
|
6597
6636
|
@media (min-width: 48rem) {
|
|
6598
6637
|
.pf-v6-c-drawer__panel.pf-m-width-25 {
|
|
6599
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 25
|
|
6638
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6600
6639
|
}
|
|
6601
6640
|
.pf-v6-c-drawer__panel.pf-m-width-33 {
|
|
6602
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 33
|
|
6641
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6603
6642
|
}
|
|
6604
6643
|
.pf-v6-c-drawer__panel.pf-m-width-50 {
|
|
6605
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 50
|
|
6644
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6606
6645
|
}
|
|
6607
6646
|
.pf-v6-c-drawer__panel.pf-m-width-66 {
|
|
6608
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 66
|
|
6647
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6609
6648
|
}
|
|
6610
6649
|
.pf-v6-c-drawer__panel.pf-m-width-75 {
|
|
6611
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 75
|
|
6650
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6612
6651
|
}
|
|
6613
6652
|
.pf-v6-c-drawer__panel.pf-m-width-100 {
|
|
6614
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 100
|
|
6653
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6654
|
+
--pf-v6-c-drawer__main--Gap: 0;
|
|
6615
6655
|
}
|
|
6616
6656
|
}
|
|
6617
6657
|
@media (min-width: 62rem) {
|
|
6618
6658
|
.pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
|
|
6619
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 25
|
|
6659
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6620
6660
|
}
|
|
6621
6661
|
.pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
|
|
6622
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 33
|
|
6662
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6623
6663
|
}
|
|
6624
6664
|
.pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
|
|
6625
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 50
|
|
6665
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6626
6666
|
}
|
|
6627
6667
|
.pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
|
|
6628
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 66
|
|
6668
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6629
6669
|
}
|
|
6630
6670
|
.pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
|
|
6631
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 75
|
|
6671
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6632
6672
|
}
|
|
6633
6673
|
.pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
|
|
6634
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 100
|
|
6674
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6675
|
+
--pf-v6-c-drawer__main--Gap: 0;
|
|
6635
6676
|
}
|
|
6636
6677
|
}
|
|
6637
6678
|
@media (min-width: 75rem) {
|
|
6638
6679
|
.pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
|
|
6639
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 25
|
|
6680
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6640
6681
|
}
|
|
6641
6682
|
.pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
|
|
6642
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 33
|
|
6683
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6643
6684
|
}
|
|
6644
6685
|
.pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
|
|
6645
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 50
|
|
6686
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6646
6687
|
}
|
|
6647
6688
|
.pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
|
|
6648
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 66
|
|
6689
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6649
6690
|
}
|
|
6650
6691
|
.pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
|
|
6651
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 75
|
|
6692
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6652
6693
|
}
|
|
6653
6694
|
.pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
|
|
6654
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 100
|
|
6695
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6696
|
+
--pf-v6-c-drawer__main--Gap: 0;
|
|
6655
6697
|
}
|
|
6656
6698
|
}
|
|
6657
6699
|
@media (min-width: 90.625rem) {
|
|
6658
6700
|
.pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
|
|
6659
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 25
|
|
6701
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6660
6702
|
}
|
|
6661
6703
|
.pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
|
|
6662
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 33
|
|
6704
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6663
6705
|
}
|
|
6664
6706
|
.pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
|
|
6665
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 50
|
|
6707
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6666
6708
|
}
|
|
6667
6709
|
.pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
|
|
6668
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 66
|
|
6710
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6669
6711
|
}
|
|
6670
6712
|
.pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
|
|
6671
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 75
|
|
6713
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6672
6714
|
}
|
|
6673
6715
|
.pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
|
|
6674
|
-
--pf-v6-c-drawer__panel--md--FlexBasis: 100
|
|
6716
|
+
--pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
|
|
6717
|
+
--pf-v6-c-drawer__main--Gap: 0;
|
|
6675
6718
|
}
|
|
6676
6719
|
}
|
|
6677
6720
|
@media (min-width: 48rem) {
|
|
@@ -7103,6 +7146,9 @@ ul) {
|
|
|
7103
7146
|
--pf-v6-c-expandable-section__content--Opacity: 0;
|
|
7104
7147
|
--pf-v6-c-expandable-section__content--TranslateY: 0;
|
|
7105
7148
|
--pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
|
|
7149
|
+
--pf-v6-c-expandable-section__content--MaxHeight: 0px;
|
|
7150
|
+
--pf-v6-c-expandable-section__content--Visibility: hidden;
|
|
7151
|
+
--pf-v6-c-expandable-section__content--Opacity: 0;
|
|
7106
7152
|
--pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
|
|
7107
7153
|
--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
|
|
7108
7154
|
--pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
|
|
@@ -10206,6 +10252,15 @@ ul.pf-v6-c-list {
|
|
|
10206
10252
|
--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
|
|
10207
10253
|
--pf-v6-c-masthead--m-display-inline__main--Display: flex;
|
|
10208
10254
|
--pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
|
|
10255
|
+
--pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
|
|
10256
|
+
--pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
|
|
10257
|
+
--pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
10258
|
+
--pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
10259
|
+
--pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
10260
|
+
--pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
10261
|
+
--pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
10262
|
+
--pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
10263
|
+
--pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
|
|
10209
10264
|
--pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
|
|
10210
10265
|
--pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
|
|
10211
10266
|
--pf-v6-c-masthead--c-toolbar--Width: 100%;
|
|
@@ -10226,6 +10281,7 @@ ul.pf-v6-c-list {
|
|
|
10226
10281
|
--pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
|
|
10227
10282
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
|
|
10228
10283
|
display: grid;
|
|
10284
|
+
grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
|
|
10229
10285
|
grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
|
|
10230
10286
|
row-gap: var(--pf-v6-c-masthead--RowGap);
|
|
10231
10287
|
column-gap: var(--pf-v6-c-masthead--ColumnGap);
|
|
@@ -10258,6 +10314,48 @@ ul.pf-v6-c-list {
|
|
|
10258
10314
|
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
|
|
10259
10315
|
}
|
|
10260
10316
|
}
|
|
10317
|
+
.pf-v6-c-masthead.pf-m-docked {
|
|
10318
|
+
--pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
|
|
10319
|
+
--pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
|
|
10320
|
+
--pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
|
|
10321
|
+
--pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
|
|
10322
|
+
--pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
|
|
10323
|
+
--pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
|
|
10324
|
+
--pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
|
|
10325
|
+
--pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
|
|
10326
|
+
--pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
|
|
10327
|
+
--pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
|
|
10328
|
+
--pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
|
|
10329
|
+
--pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
|
|
10330
|
+
--pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
|
|
10331
|
+
--pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
|
|
10332
|
+
--pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
|
|
10333
|
+
--pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
|
|
10334
|
+
--pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
|
|
10335
|
+
--pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
|
|
10336
|
+
--pf-v6-c-masthead--GridTemplateColumns: auto;
|
|
10337
|
+
--pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
|
|
10338
|
+
--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
|
|
10339
|
+
--pf-v6-c-masthead__main--GridColumn: auto;
|
|
10340
|
+
--pf-v6-c-masthead__content--GridColumn: auto;
|
|
10341
|
+
--pf-v6-c-masthead__logo--Width: auto;
|
|
10342
|
+
--pf-v6-c-masthead__main--MarginInlineEnd: 0;
|
|
10343
|
+
display: flex;
|
|
10344
|
+
flex-direction: column;
|
|
10345
|
+
align-items: center;
|
|
10346
|
+
width: fit-content;
|
|
10347
|
+
height: 100%;
|
|
10348
|
+
backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
|
|
10349
|
+
}
|
|
10350
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
|
|
10351
|
+
flex-direction: column;
|
|
10352
|
+
flex-grow: 1;
|
|
10353
|
+
align-self: revert;
|
|
10354
|
+
}
|
|
10355
|
+
.pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
|
|
10356
|
+
--pf-v6-c-masthead--c-toolbar--Width: fit-content;
|
|
10357
|
+
height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
|
|
10358
|
+
}
|
|
10261
10359
|
.pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
|
|
10262
10360
|
flex-wrap: nowrap;
|
|
10263
10361
|
min-width: 0;
|
|
@@ -12306,6 +12404,15 @@ ul.pf-v6-c-list {
|
|
|
12306
12404
|
--pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
|
|
12307
12405
|
--pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
|
|
12308
12406
|
--pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
|
|
12407
|
+
--pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
|
|
12408
|
+
--pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
|
|
12409
|
+
--pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
12410
|
+
--pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
12411
|
+
--pf-v6-c-nav__item--accent--ScaleY: 0;
|
|
12412
|
+
--pf-v6-c-nav__item--current--accent--ScaleY: 1;
|
|
12413
|
+
--pf-v6-c-nav__item--accent--TransitionDuration: 0;
|
|
12414
|
+
--pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
|
12415
|
+
--pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
12309
12416
|
--pf-v6-c-nav__item__toggle-icon--Rotate: 0;
|
|
12310
12417
|
--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
|
|
12311
12418
|
--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
|
|
@@ -12330,6 +12437,7 @@ ul.pf-v6-c-list {
|
|
|
12330
12437
|
--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
|
|
12331
12438
|
--pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
12332
12439
|
--pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
12440
|
+
--pf-v6-c-nav__link-text--FontSize: initial;
|
|
12333
12441
|
--pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
|
|
12334
12442
|
--pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
|
|
12335
12443
|
--pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
|
|
@@ -12370,6 +12478,11 @@ ul.pf-v6-c-list {
|
|
|
12370
12478
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
12371
12479
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
12372
12480
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
12481
|
+
--pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
|
|
12482
|
+
--pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
12483
|
+
--pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
12484
|
+
--pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
12485
|
+
--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
12373
12486
|
}
|
|
12374
12487
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
12375
12488
|
.pf-v6-c-nav {
|
|
@@ -12411,6 +12524,25 @@ ul.pf-v6-c-list {
|
|
|
12411
12524
|
.pf-v6-c-nav.pf-m-fill {
|
|
12412
12525
|
flex-grow: 1;
|
|
12413
12526
|
}
|
|
12527
|
+
.pf-v6-c-nav.pf-m-docked {
|
|
12528
|
+
--pf-v6-c-nav--PaddingBlockStart: 0;
|
|
12529
|
+
--pf-v6-c-nav--PaddingBlockEnd: 0;
|
|
12530
|
+
--pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
|
|
12531
|
+
--pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
|
|
12532
|
+
--pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
|
|
12533
|
+
--pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
|
|
12534
|
+
--pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
|
|
12535
|
+
width: fit-content;
|
|
12536
|
+
}
|
|
12537
|
+
.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
|
|
12538
|
+
position: relative;
|
|
12539
|
+
align-self: center;
|
|
12540
|
+
min-width: 1lh;
|
|
12541
|
+
text-align: center;
|
|
12542
|
+
}
|
|
12543
|
+
.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
|
|
12544
|
+
display: none;
|
|
12545
|
+
}
|
|
12414
12546
|
.pf-v6-c-nav .pf-v6-c-menu {
|
|
12415
12547
|
--pf-v6-c-menu--MinWidth: 100%;
|
|
12416
12548
|
}
|
|
@@ -12474,14 +12606,34 @@ ul.pf-v6-c-list {
|
|
|
12474
12606
|
}
|
|
12475
12607
|
|
|
12476
12608
|
.pf-v6-c-nav__item {
|
|
12609
|
+
position: relative;
|
|
12477
12610
|
scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
|
|
12478
12611
|
}
|
|
12612
|
+
.pf-v6-c-nav__item::before {
|
|
12613
|
+
position: absolute;
|
|
12614
|
+
inset-block-start: 0;
|
|
12615
|
+
inset-block-end: 0;
|
|
12616
|
+
inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
|
|
12617
|
+
width: var(--pf-v6-c-nav__item--accent--size);
|
|
12618
|
+
pointer-events: none;
|
|
12619
|
+
content: var(--pf-v6-c-nav__item--accent--content, "");
|
|
12620
|
+
background-color: var(--pf-v6-c-nav__item--accent--color);
|
|
12621
|
+
border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
|
|
12622
|
+
transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
|
|
12623
|
+
transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
|
|
12624
|
+
transition-property: scale;
|
|
12625
|
+
scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
|
|
12626
|
+
}
|
|
12479
12627
|
.pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
|
|
12480
12628
|
margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
|
|
12481
12629
|
}
|
|
12482
12630
|
.pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
|
|
12483
12631
|
margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
|
|
12484
12632
|
}
|
|
12633
|
+
.pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
|
|
12634
|
+
--pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
|
|
12635
|
+
--pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
|
|
12636
|
+
}
|
|
12485
12637
|
|
|
12486
12638
|
.pf-v6-c-nav__section {
|
|
12487
12639
|
row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
|
|
@@ -12543,6 +12695,10 @@ ul.pf-v6-c-list {
|
|
|
12543
12695
|
color: var(--pf-v6-c-nav__link-icon--Color);
|
|
12544
12696
|
}
|
|
12545
12697
|
|
|
12698
|
+
.pf-v6-c-nav__link-text {
|
|
12699
|
+
font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
|
|
12700
|
+
}
|
|
12701
|
+
|
|
12546
12702
|
.pf-v6-c-nav__toggle {
|
|
12547
12703
|
flex: none;
|
|
12548
12704
|
align-self: start;
|
|
@@ -12598,6 +12754,7 @@ ul.pf-v6-c-list {
|
|
|
12598
12754
|
}
|
|
12599
12755
|
|
|
12600
12756
|
.pf-v6-c-nav:where(.pf-m-horizontal) {
|
|
12757
|
+
--pf-v6-c-nav__item--accent--content: none;
|
|
12601
12758
|
padding: 0;
|
|
12602
12759
|
overflow: hidden;
|
|
12603
12760
|
}
|
|
@@ -12963,6 +13120,7 @@ ul.pf-v6-c-list {
|
|
|
12963
13120
|
--pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
12964
13121
|
--pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
12965
13122
|
--pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
|
|
13123
|
+
--pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
|
|
12966
13124
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
12967
13125
|
--pf-v6-c-page__sidebar--Width--base: 18.125rem;
|
|
12968
13126
|
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
@@ -13070,6 +13228,9 @@ ul.pf-v6-c-list {
|
|
|
13070
13228
|
--pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
|
|
13071
13229
|
--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
13072
13230
|
--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
|
|
13231
|
+
--pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
|
|
13232
|
+
--pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
|
|
13233
|
+
--pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13073
13234
|
}
|
|
13074
13235
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
13075
13236
|
.pf-v6-c-page {
|
|
@@ -13112,6 +13273,16 @@ ul.pf-v6-c-list {
|
|
|
13112
13273
|
grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
|
|
13113
13274
|
}
|
|
13114
13275
|
}
|
|
13276
|
+
.pf-v6-c-page.pf-m-dock {
|
|
13277
|
+
--pf-v6-c-page--masthead--main-container--GridArea: main;
|
|
13278
|
+
--pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
|
|
13279
|
+
--pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
|
|
13280
|
+
--pf-v6-c-page__main-container--MarginInlineStart: 0;
|
|
13281
|
+
grid-template-areas: "dock main";
|
|
13282
|
+
grid-template-rows: auto;
|
|
13283
|
+
grid-template-columns: auto 1fr;
|
|
13284
|
+
column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
|
|
13285
|
+
}
|
|
13115
13286
|
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
13116
13287
|
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
13117
13288
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
@@ -13168,6 +13339,11 @@ ul.pf-v6-c-list {
|
|
|
13168
13339
|
}
|
|
13169
13340
|
}
|
|
13170
13341
|
|
|
13342
|
+
.pf-v6-c-page__dock {
|
|
13343
|
+
z-index: var(--pf-v6-c-page__dock--ZIndex);
|
|
13344
|
+
grid-area: dock;
|
|
13345
|
+
}
|
|
13346
|
+
|
|
13171
13347
|
.pf-v6-c-page__sidebar {
|
|
13172
13348
|
z-index: var(--pf-v6-c-page__sidebar--ZIndex);
|
|
13173
13349
|
display: flex;
|
|
@@ -13471,6 +13647,7 @@ ul.pf-v6-c-list {
|
|
|
13471
13647
|
flex-direction: column;
|
|
13472
13648
|
align-self: var(--pf-v6-c-page__main-container--AlignSelf);
|
|
13473
13649
|
max-height: var(--pf-v6-c-page__main-container--MaxHeight);
|
|
13650
|
+
margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
|
|
13474
13651
|
margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
|
|
13475
13652
|
margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
|
|
13476
13653
|
background: var(--pf-v6-c-page__main-container--BackgroundColor);
|
|
@@ -21504,6 +21681,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21504
21681
|
--pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
21505
21682
|
--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
21506
21683
|
--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
|
|
21684
|
+
--pf-v6-c-toolbar--m-vertical--Width: fit-content;
|
|
21507
21685
|
--pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
|
|
21508
21686
|
--pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
21509
21687
|
--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
@@ -21707,6 +21885,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21707
21885
|
.pf-v6-c-toolbar.pf-m-no-background {
|
|
21708
21886
|
--pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
|
|
21709
21887
|
}
|
|
21888
|
+
.pf-v6-c-toolbar.pf-m-vertical {
|
|
21889
|
+
--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
|
|
21890
|
+
--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
|
|
21891
|
+
--pf-v6-c-toolbar--PaddingBlockEnd: 0;
|
|
21892
|
+
--pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
|
|
21893
|
+
}
|
|
21894
|
+
.pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
|
|
21895
|
+
flex-direction: column;
|
|
21896
|
+
align-items: center;
|
|
21897
|
+
}
|
|
21710
21898
|
|
|
21711
21899
|
.pf-v6-c-toolbar__item {
|
|
21712
21900
|
--pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
|
|
@@ -21786,6 +21974,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21786
21974
|
row-gap: var(--pf-v6-c-toolbar__group--RowGap);
|
|
21787
21975
|
column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
|
|
21788
21976
|
}
|
|
21977
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
|
|
21978
|
+
row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
|
|
21979
|
+
}
|
|
21789
21980
|
.pf-v6-c-toolbar__group.pf-m-filter-group {
|
|
21790
21981
|
column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
|
|
21791
21982
|
}
|
|
@@ -21797,9 +21988,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21797
21988
|
.pf-v6-c-toolbar__group.pf-m-action-group {
|
|
21798
21989
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
|
|
21799
21990
|
}
|
|
21991
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
|
|
21992
|
+
row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
|
|
21993
|
+
}
|
|
21800
21994
|
.pf-v6-c-toolbar__group.pf-m-action-group-plain {
|
|
21801
21995
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
|
|
21802
21996
|
}
|
|
21997
|
+
.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
|
|
21998
|
+
row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
|
|
21999
|
+
}
|
|
21803
22000
|
.pf-v6-c-toolbar__group.pf-m-action-group-inline {
|
|
21804
22001
|
flex-wrap: wrap;
|
|
21805
22002
|
column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
|
|
@@ -21876,7 +22073,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21876
22073
|
}
|
|
21877
22074
|
.pf-v6-c-toolbar__group.pf-m-align-end,
|
|
21878
22075
|
.pf-v6-c-toolbar__item.pf-m-align-end {
|
|
21879
|
-
margin-
|
|
22076
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
22077
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
21880
22078
|
}
|
|
21881
22079
|
.pf-v6-c-toolbar__group.pf-m-flex-grow,
|
|
21882
22080
|
.pf-v6-c-toolbar__item.pf-m-flex-grow {
|
|
@@ -22131,7 +22329,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
22131
22329
|
}
|
|
22132
22330
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
|
|
22133
22331
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
|
|
22134
|
-
margin-
|
|
22332
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
22333
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
22135
22334
|
}
|
|
22136
22335
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
|
|
22137
22336
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
|
|
@@ -22383,7 +22582,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
22383
22582
|
}
|
|
22384
22583
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-md,
|
|
22385
22584
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-md {
|
|
22386
|
-
margin-
|
|
22585
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
22586
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
22387
22587
|
}
|
|
22388
22588
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
|
|
22389
22589
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
|
|
@@ -22635,7 +22835,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
22635
22835
|
}
|
|
22636
22836
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
|
|
22637
22837
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
|
|
22638
|
-
margin-
|
|
22838
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
22839
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
22639
22840
|
}
|
|
22640
22841
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
|
|
22641
22842
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
|
|
@@ -22887,7 +23088,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
22887
23088
|
}
|
|
22888
23089
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
|
|
22889
23090
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
|
|
22890
|
-
margin-
|
|
23091
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
23092
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
22891
23093
|
}
|
|
22892
23094
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
|
|
22893
23095
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
|
|
@@ -23139,7 +23341,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
23139
23341
|
}
|
|
23140
23342
|
.pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
|
|
23141
23343
|
.pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
|
|
23142
|
-
margin-
|
|
23344
|
+
margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
|
|
23345
|
+
margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
|
|
23143
23346
|
}
|
|
23144
23347
|
.pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
|
|
23145
23348
|
.pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {
|