@patternfly/patternfly 6.0.0-alpha.49 → 6.0.0-alpha.50
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 +12 -2
- package/components/Button/button.scss +16 -6
- package/components/Nav/nav.css +240 -918
- package/components/Nav/nav.scss +300 -1082
- package/components/Page/page.scss +1 -1
- package/docs/components/Nav/examples/Navigation.css +1 -39
- package/docs/components/Nav/examples/Navigation.md +68 -242
- package/docs/demos/CardView/examples/CardView.md +4 -8
- package/docs/demos/Masthead/examples/Masthead.md +24 -15
- package/docs/demos/Nav/examples/Nav.md +79 -874
- package/docs/demos/Page/examples/Page.md +24 -12
- package/docs/demos/Page/examples/Penta.md +1 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +247 -919
- package/patternfly-theme-dark-unversioned.css +247 -919
- package/patternfly.css +247 -919
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -7801,6 +7801,10 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
7801
7801
|
--pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
|
|
7802
7802
|
--pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
7803
7803
|
--pf-v5-c-button--TextDecoration: none;
|
|
7804
|
+
--pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-button--BorderRadius);
|
|
7805
|
+
--pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-button--BorderRadius);
|
|
7806
|
+
--pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-button--BorderRadius);
|
|
7807
|
+
--pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-button--BorderRadius);
|
|
7804
7808
|
--pf-v5-c-button--hover--BackgroundColor: transparent;
|
|
7805
7809
|
--pf-v5-c-button--hover--BorderColor: transparent;
|
|
7806
7810
|
--pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
|
|
@@ -8000,7 +8004,10 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
8000
8004
|
|
|
8001
8005
|
.pf-v5-c-button {
|
|
8002
8006
|
position: relative;
|
|
8003
|
-
display:
|
|
8007
|
+
display: var(--pf-v5-c-button--Display, initial);
|
|
8008
|
+
flex: var(--pf-v5-c-button--Flex, initial);
|
|
8009
|
+
align-items: var(--pf-v5-c-button--AlignItems, initial);
|
|
8010
|
+
justify-content: var(--pf-v5-c-button--JustifyContent, initial);
|
|
8004
8011
|
padding-block-start: var(--pf-v5-c-button--PaddingTop);
|
|
8005
8012
|
padding-block-end: var(--pf-v5-c-button--PaddingBottom);
|
|
8006
8013
|
padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
|
|
@@ -8016,7 +8023,10 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
8016
8023
|
user-select: none;
|
|
8017
8024
|
background-color: var(--pf-v5-c-button--BackgroundColor);
|
|
8018
8025
|
border: 0;
|
|
8019
|
-
border-radius: var(--pf-v5-c-button--
|
|
8026
|
+
border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius);
|
|
8027
|
+
border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius);
|
|
8028
|
+
border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius);
|
|
8029
|
+
border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius);
|
|
8020
8030
|
}
|
|
8021
8031
|
.pf-v5-c-button::after {
|
|
8022
8032
|
position: absolute;
|
|
@@ -19473,1017 +19483,335 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
19473
19483
|
color: var(--pf-v5-c-multiple-file-upload__status-item-progress-size--Color);
|
|
19474
19484
|
}
|
|
19475
19485
|
|
|
19476
|
-
|
|
19477
|
-
|
|
19478
|
-
--pf-v5-c-
|
|
19479
|
-
--pf-v5-c-
|
|
19480
|
-
--pf-v5-c-
|
|
19481
|
-
--pf-v5-c-
|
|
19482
|
-
--pf-v5-c-
|
|
19483
|
-
--pf-v5-c-
|
|
19484
|
-
--pf-v5-c-nav--
|
|
19485
|
-
--pf-v5-c-nav--
|
|
19486
|
-
--pf-v5-c-nav--
|
|
19487
|
-
--pf-v5-c-nav--
|
|
19488
|
-
--pf-v5-c-nav--
|
|
19489
|
-
--pf-v5-c-nav--
|
|
19490
|
-
--pf-v5-c-nav--
|
|
19491
|
-
--pf-v5-c-nav--
|
|
19492
|
-
--pf-v5-c-nav--
|
|
19493
|
-
--pf-v5-c-nav--
|
|
19494
|
-
--pf-v5-c-nav--
|
|
19495
|
-
--pf-v5-c-nav--
|
|
19496
|
-
--pf-v5-c-
|
|
19497
|
-
--pf-v5-c-
|
|
19498
|
-
--pf-v5-c-
|
|
19499
|
-
--pf-v5-c-
|
|
19500
|
-
--pf-v5-c-
|
|
19501
|
-
--pf-v5-c-
|
|
19502
|
-
--pf-v5-c-nav__item--
|
|
19503
|
-
--pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
|
|
19504
|
-
--pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-t--global--spacer--xl);
|
|
19505
|
-
--pf-v5-c-nav__item__item__toggle--FontSize: var(--pf-v5-global--FontSize--sm);
|
|
19486
|
+
:root,
|
|
19487
|
+
:where(.pf-v5-c-nav) {
|
|
19488
|
+
--pf-v5-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
19489
|
+
--pf-v5-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
19490
|
+
--pf-v5-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
19491
|
+
--pf-v5-c-nav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
19492
|
+
--pf-v5-c-nav__list--RowGap: var(--pf-t--global--spacer--sm);
|
|
19493
|
+
--pf-v5-c-nav__list--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
19494
|
+
--pf-v5-c-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
19495
|
+
--pf-v5-c-nav--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
19496
|
+
--pf-v5-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
19497
|
+
--pf-v5-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
19498
|
+
--pf-v5-c-nav--RowGap: var(--pf-t--global--spacer--lg);
|
|
19499
|
+
--pf-v5-c-nav--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
19500
|
+
--pf-v5-c-nav--AlignItems: baseline;
|
|
19501
|
+
--pf-v5-c-nav--FontSize: var(--pf-t--global--font--size--body--default);
|
|
19502
|
+
--pf-v5-c-nav--FontWeight: var(--pf-t--global--font--weight--body);
|
|
19503
|
+
--pf-v5-c-nav--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
19504
|
+
--pf-v5-c-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
19505
|
+
--pf-v5-c-nav--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
|
|
19506
|
+
--pf-v5-c-nav__list--ScrollSnapTypeAxis: x;
|
|
19507
|
+
--pf-v5-c-nav__list--ScrollSnapTypeStrictness: proximity;
|
|
19508
|
+
--pf-v5-c-nav__list--ScrollSnapType: var(--pf-v5-c-nav__list--ScrollSnapTypeAxis) var(--pf-v5-c-nav__list--ScrollSnapTypeStrictness);
|
|
19509
|
+
--pf-v5-c-nav__item--ScrollSnapAlign: end;
|
|
19510
|
+
--pf-v5-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
19511
|
+
--pf-v5-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
|
|
19512
|
+
--pf-v5-c-nav__item--RowGap: var(--pf-v5-c-nav__list--RowGap);
|
|
19506
19513
|
--pf-v5-c-nav__item__toggle-icon--Rotate: 0;
|
|
19507
19514
|
--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
|
|
19508
|
-
--pf-v5-c-nav__item--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
19509
|
-
--pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19510
|
-
--pf-v5-c-nav__item--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19511
|
-
--pf-v5-c-nav__link--FontSize: var(--pf-t--global--font--size--body--default);
|
|
19512
|
-
--pf-v5-c-nav__link--FontWeight: var(--pf-t--global--font--weight--body);
|
|
19513
|
-
--pf-v5-c-nav__link--PaddingTop: var(--pf-t--global--spacer--md);
|
|
19514
|
-
--pf-v5-c-nav__link--PaddingRight: var(--pf-t--global--spacer--md);
|
|
19515
|
-
--pf-v5-c-nav__link--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
19516
|
-
--pf-v5-c-nav__link--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
19517
19515
|
--pf-v5-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
19518
|
-
--pf-v5-c-nav__link--
|
|
19519
|
-
--pf-v5-c-nav__link--
|
|
19516
|
+
--pf-v5-c-nav__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
19517
|
+
--pf-v5-c-nav__link--WhiteSpace: normal;
|
|
19520
19518
|
--pf-v5-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
|
|
19521
|
-
--pf-v5-c-nav__link--hover--Color: var(--pf-t--global--text--color--
|
|
19522
|
-
--pf-v5-c-nav__link--focus--Color: var(--pf-t--global--text--color--
|
|
19523
|
-
--pf-v5-c-nav__link--active--Color: var(--pf-t--global--text--color--
|
|
19519
|
+
--pf-v5-c-nav__link--hover--Color: var(--pf-t--global--text--color--regular);
|
|
19520
|
+
--pf-v5-c-nav__link--focus--Color: var(--pf-t--global--text--color--regular);
|
|
19521
|
+
--pf-v5-c-nav__link--active--Color: var(--pf-t--global--text--color--regular);
|
|
19522
|
+
--pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
|
|
19523
|
+
--pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
|
|
19524
|
+
--pf-v5-c-nav__link--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
|
|
19525
|
+
--pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
|
|
19524
19526
|
--pf-v5-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
|
|
19525
|
-
--pf-v5-c-
|
|
19526
|
-
--pf-v5-c-
|
|
19527
|
-
--pf-v5-c-
|
|
19528
|
-
--pf-v5-c-
|
|
19529
|
-
--pf-v5-c-
|
|
19530
|
-
--pf-v5-c-
|
|
19531
|
-
--pf-v5-c-
|
|
19532
|
-
--pf-v5-c-
|
|
19533
|
-
--pf-v5-c-
|
|
19534
|
-
--pf-v5-c-
|
|
19535
|
-
--pf-v5-c-
|
|
19536
|
-
--pf-v5-c-nav__link--
|
|
19537
|
-
--pf-v5-c-nav__link--
|
|
19538
|
-
--pf-v5-c-nav__link--
|
|
19539
|
-
--pf-v5-c-
|
|
19540
|
-
--pf-v5-c-
|
|
19541
|
-
--pf-v5-c-
|
|
19542
|
-
--pf-v5-c-
|
|
19543
|
-
--pf-v5-c-
|
|
19544
|
-
--pf-v5-c-
|
|
19545
|
-
--pf-v5-c-
|
|
19546
|
-
--pf-v5-c-
|
|
19547
|
-
--pf-v5-c-nav--m-
|
|
19548
|
-
--pf-v5-c-nav--m-
|
|
19549
|
-
--pf-v5-c-nav--m-
|
|
19550
|
-
--pf-v5-c-nav--m-
|
|
19551
|
-
--pf-v5-c-nav--m-
|
|
19552
|
-
--pf-v5-c-nav--m-
|
|
19553
|
-
--pf-v5-c-nav--m-
|
|
19554
|
-
--pf-v5-c-nav--
|
|
19555
|
-
|
|
19556
|
-
|
|
19557
|
-
|
|
19558
|
-
|
|
19559
|
-
|
|
19560
|
-
|
|
19561
|
-
|
|
19562
|
-
|
|
19563
|
-
--pf-v5-c-nav--m-horizontal__link--active--BackgroundColor: transparent;
|
|
19564
|
-
--pf-v5-c-nav--m-horizontal__link--m-current--BackgroundColor: transparent;
|
|
19565
|
-
--pf-v5-c-nav--m-horizontal__link--before--BorderColor: var(--pf-v5-global--active-color--400);
|
|
19566
|
-
--pf-v5-c-nav--m-horizontal__link--before--BorderWidth: 0;
|
|
19567
|
-
--pf-v5-c-nav--m-horizontal__link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19568
|
-
--pf-v5-c-nav--m-horizontal__link--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19569
|
-
--pf-v5-c-nav--m-horizontal__link--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19570
|
-
--pf-v5-c-nav--m-horizontal__link--m-current--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19571
|
-
--pf-v5-c-nav--m-tertiary__link--PaddingTop: var(--pf-v5-global--spacer--sm);
|
|
19572
|
-
--pf-v5-c-nav--m-tertiary__link--PaddingRight: var(--pf-v5-global--spacer--md);
|
|
19573
|
-
--pf-v5-c-nav--m-tertiary__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
19574
|
-
--pf-v5-c-nav--m-tertiary__link--PaddingLeft: var(--pf-v5-global--spacer--md);
|
|
19575
|
-
--pf-v5-c-nav--m-tertiary__link--Right: var(--pf-v5-global--spacer--md);
|
|
19576
|
-
--pf-v5-c-nav--m-tertiary__link--Left: var(--pf-v5-global--spacer--md);
|
|
19577
|
-
--pf-v5-c-nav--m-tertiary__link--Color: var(--pf-v5-global--Color--dark-100);
|
|
19578
|
-
--pf-v5-c-nav--m-tertiary__link--hover--Color: var(--pf-v5-global--active-color--100);
|
|
19579
|
-
--pf-v5-c-nav--m-tertiary__link--focus--Color: var(--pf-v5-global--active-color--100);
|
|
19580
|
-
--pf-v5-c-nav--m-tertiary__link--active--Color: var(--pf-v5-global--active-color--100);
|
|
19581
|
-
--pf-v5-c-nav--m-tertiary__link--m-current--Color: var(--pf-v5-global--active-color--100);
|
|
19582
|
-
--pf-v5-c-nav--m-tertiary__link--BackgroundColor: transparent;
|
|
19583
|
-
--pf-v5-c-nav--m-tertiary__link--hover--BackgroundColor: transparent;
|
|
19584
|
-
--pf-v5-c-nav--m-tertiary__link--focus--BackgroundColor: transparent;
|
|
19585
|
-
--pf-v5-c-nav--m-tertiary__link--active--BackgroundColor: transparent;
|
|
19586
|
-
--pf-v5-c-nav--m-tertiary__link--m-current--BackgroundColor: transparent;
|
|
19587
|
-
--pf-v5-c-nav--m-tertiary__link--before--BorderColor: var(--pf-v5-global--active-color--100);
|
|
19588
|
-
--pf-v5-c-nav--m-tertiary__link--before--BorderWidth: 0;
|
|
19589
|
-
--pf-v5-c-nav--m-tertiary__link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19590
|
-
--pf-v5-c-nav--m-tertiary__link--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19591
|
-
--pf-v5-c-nav--m-tertiary__link--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19592
|
-
--pf-v5-c-nav--m-tertiary__link--m-current--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19593
|
-
--pf-v5-c-nav--m-tertiary__scroll-button--Color: var(--pf-v5-global--Color--dark-100);
|
|
19594
|
-
--pf-v5-c-nav--m-tertiary__scroll-button--hover--Color: var(--pf-v5-global--active-color--100);
|
|
19595
|
-
--pf-v5-c-nav--m-tertiary__scroll-button--focus--Color: var(--pf-v5-global--active-color--100);
|
|
19596
|
-
--pf-v5-c-nav--m-tertiary__scroll-button--active--Color: var(--pf-v5-global--active-color--100);
|
|
19597
|
-
--pf-v5-c-nav--m-tertiary__scroll-button--disabled--Color: var(--pf-v5-global--disabled-color--200);
|
|
19598
|
-
--pf-v5-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-v5-global--BorderColor--300);
|
|
19599
|
-
--pf-v5-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor: var(--pf-v5-global--disabled-color--300);
|
|
19600
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm);
|
|
19601
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-v5-global--spacer--md);
|
|
19602
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
19603
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-v5-global--spacer--md);
|
|
19604
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingTop: var(--pf-v5-global--spacer--md);
|
|
19605
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
19606
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingBottom: var(--pf-v5-global--spacer--md);
|
|
19607
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
19608
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--FontSize: var(--pf-v5-global--FontSize--sm);
|
|
19609
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--Color: var(--pf-v5-global--Color--light-200);
|
|
19610
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--hover--Color: var(--pf-v5-global--Color--light-100);
|
|
19611
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--focus--Color: var(--pf-v5-global--Color--light-100);
|
|
19612
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--active--Color: var(--pf-v5-global--Color--light-100);
|
|
19613
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--m-current--Color: var(--pf-v5-global--Color--light-100);
|
|
19614
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--BackgroundColor: transparent;
|
|
19615
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19616
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19617
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19618
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
|
|
19619
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--before--BorderColor: transparent;
|
|
19620
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--after--BorderColor: var(--pf-v5-global--palette--black-800);
|
|
19621
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderColor: var(--pf-v5-global--palette--black-800);
|
|
19622
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderColor: var(--pf-v5-global--palette--black-800);
|
|
19623
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor: var(--pf-v5-global--palette--black-800);
|
|
19624
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19625
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19626
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19627
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19628
|
-
--pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
19629
|
-
--pf-v5-c-nav__subnav--xl--PaddingLeft: var(--pf-v5-c-nav__link--PaddingLeft);
|
|
19630
|
-
--pf-v5-c-nav__subnav__link--MarginTop: 0;
|
|
19631
|
-
--pf-v5-c-nav__subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm);
|
|
19632
|
-
--pf-v5-c-nav__subnav__link--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
19633
|
-
--pf-v5-c-nav__subnav__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
19634
|
-
--pf-v5-c-nav__subnav__link--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
19635
|
-
--pf-v5-c-nav__subnav__link--FontSize: var(--pf-v5-global--FontSize--sm);
|
|
19636
|
-
--pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--pf-v5-global--BorderColor--200);
|
|
19637
|
-
--pf-v5-c-nav__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--200);
|
|
19638
|
-
--pf-v5-c-nav__subnav__link--active--after--BorderColor: var(--pf-v5-global--BorderColor--200);
|
|
19639
|
-
--pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--400);
|
|
19640
|
-
--pf-v5-c-nav__subnav__link--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19641
|
-
--pf-v5-c-nav__subnav__link--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19642
|
-
--pf-v5-c-nav__subnav__link--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19643
|
-
--pf-v5-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
|
|
19644
|
-
--pf-v5-c-nav__subnav--MaxHeight: 0;
|
|
19645
|
-
--pf-v5-c-nav__subnav__subnav--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
19646
|
-
--pf-v5-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-v5-global--spacer--md);
|
|
19647
|
-
--pf-v5-c-nav__subnav__subnav__link--FontSize: var(--pf-v5-global--FontSize--xs);
|
|
19648
|
-
--pf-v5-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
|
|
19649
|
-
--pf-v5-c-nav__subnav--c-divider--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
19650
|
-
--pf-v5-c-nav__subnav--c-divider--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
19651
|
-
--pf-v5-c-nav__section--first-child--PaddingTop: var(--pf-v5-global--spacer--sm);
|
|
19652
|
-
--pf-v5-c-nav__section--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
19653
|
-
--pf-v5-c-nav__section__item--MarginTop: var(--pf-v5-global--spacer--sm);
|
|
19654
|
-
--pf-v5-c-nav__section__link--PaddingTop: var(--pf-v5-global--spacer--sm);
|
|
19655
|
-
--pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-global--spacer--md);
|
|
19656
|
-
--pf-v5-c-nav__section__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
19657
|
-
--pf-v5-c-nav__section__link--PaddingLeft: var(--pf-v5-global--spacer--md);
|
|
19658
|
-
--pf-v5-c-nav__section__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
19659
|
-
--pf-v5-c-nav__section__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
19660
|
-
--pf-v5-c-nav__section__link--FontSize: var(--pf-v5-global--FontSize--md);
|
|
19661
|
-
--pf-v5-c-nav__section__link--before--BorderBottomWidth: 0;
|
|
19662
|
-
--pf-v5-c-nav__section__link--hover--after--BorderColor: transparent;
|
|
19663
|
-
--pf-v5-c-nav__section__link--focus--after--BorderColor: transparent;
|
|
19664
|
-
--pf-v5-c-nav__section__link--active--after--BorderColor: transparent;
|
|
19665
|
-
--pf-v5-c-nav__section__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--400);
|
|
19666
|
-
--pf-v5-c-nav__section__link--hover--after--BorderWidth: 0;
|
|
19667
|
-
--pf-v5-c-nav__section__link--focus--after--BorderWidth: 0;
|
|
19668
|
-
--pf-v5-c-nav__section__link--active--after--BorderWidth: 0;
|
|
19669
|
-
--pf-v5-c-nav__section__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
|
|
19670
|
-
--pf-v5-c-nav__section--section--MarginTop: var(--pf-v5-global--spacer--xl);
|
|
19671
|
-
--pf-v5-c-nav__section-title--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
19672
|
-
--pf-v5-c-nav__section-title--PaddingRight: var(--pf-t--global--spacer--md);
|
|
19673
|
-
--pf-v5-c-nav__section-title--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
19674
|
-
--pf-v5-c-nav__section-title--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
19675
|
-
--pf-v5-c-nav__section-title--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
19676
|
-
--pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-t--global--spacer--xl);
|
|
19677
|
-
--pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
|
|
19678
|
-
--pf-v5-c-nav__section-title--FontSize: var(--pf-t--global--font--size--body--default);
|
|
19679
|
-
--pf-v5-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
|
|
19680
|
-
--pf-v5-c-nav__section-title--BorderBottomColor: transparent;
|
|
19681
|
-
--pf-v5-c-nav__section-title--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19682
|
-
--pf-v5-c-nav__scroll-button--Color: var(--pf-v5-global--Color--light-100);
|
|
19683
|
-
--pf-v5-c-nav__scroll-button--hover--Color: var(--pf-v5-global--active-color--400);
|
|
19684
|
-
--pf-v5-c-nav__scroll-button--focus--Color: var(--pf-v5-global--active-color--400);
|
|
19685
|
-
--pf-v5-c-nav__scroll-button--active--Color: var(--pf-v5-global--active-color--400);
|
|
19686
|
-
--pf-v5-c-nav__scroll-button--disabled--Color: var(--pf-v5-global--disabled-color--100);
|
|
19687
|
-
--pf-v5-c-nav__scroll-button--BackgroundColor: transparent;
|
|
19688
|
-
--pf-v5-c-nav__scroll-button--Width: var(--pf-v5-global--target-size--MinWidth);
|
|
19689
|
-
--pf-v5-c-nav__scroll-button--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
|
|
19690
|
-
--pf-v5-c-nav__scroll-button--Transition: margin .125s, transform .125s, opacity .125s;
|
|
19691
|
-
--pf-v5-c-nav__scroll-button--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19692
|
-
--pf-v5-c-nav__scroll-button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19693
|
-
--pf-v5-c-nav__scroll-button--before--BorderRightWidth: 0;
|
|
19694
|
-
--pf-v5-c-nav__scroll-button--before--BorderLeftWidth: 0;
|
|
19695
|
-
--pf-v5-c-nav__scroll-button--disabled--before--BorderColor: transparent;
|
|
19696
|
-
--pf-v5-c-nav__toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
|
|
19697
|
-
--pf-v5-c-nav__toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
|
|
19698
|
-
--pf-v5-c-nav__toggle--FontSize: var(--pf-v5-global--icon--FontSize--md);
|
|
19699
|
-
--pf-v5-c-nav__toggle-icon--Transition: var(--pf-v5-global--TransitionDuration);
|
|
19700
|
-
--pf-v5-c-nav--c-divider--MarginTop: var(--pf-v5-global--spacer--sm);
|
|
19701
|
-
--pf-v5-c-nav--c-divider--MarginBottom: var(--pf-v5-global--spacer--sm);
|
|
19702
|
-
--pf-v5-c-nav--c-divider--PaddingRight: 0;
|
|
19703
|
-
--pf-v5-c-nav--c-divider--PaddingLeft: 0;
|
|
19704
|
-
--pf-v5-c-nav--c-divider--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19705
|
-
--pf-v5-c-nav__list--ScrollSnapTypeAxis: x;
|
|
19706
|
-
--pf-v5-c-nav__list--ScrollSnapTypeStrictness: proximity;
|
|
19707
|
-
--pf-v5-c-nav__list--ScrollSnapType: var(--pf-v5-c-nav__list--ScrollSnapTypeAxis) var(--pf-v5-c-nav__list--ScrollSnapTypeStrictness);
|
|
19708
|
-
--pf-v5-c-nav__item--ScrollSnapAlign: end;
|
|
19709
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--top-offset: 0px;
|
|
19710
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
|
|
19711
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
|
|
19712
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
|
|
19713
|
-
--pf-v5-c-nav__item--m-flyout--MarginTop: 0;
|
|
19714
|
-
--pf-v5-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19715
|
-
--pf-v5-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19716
|
-
--pf-v5-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19717
|
-
--pf-v5-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
|
|
19718
|
-
--pf-v5-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
|
|
19719
|
-
--pf-v5-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
|
|
19720
|
-
--pf-v5-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
|
|
19721
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-v5-c-nav__item--m-flyout--c-menu--top-offset));
|
|
19722
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-v5-c-nav__item--m-flyout--c-menu--Top) - var(--pf-v5-c-nav__item--before--BorderWidth));
|
|
19723
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
|
|
19724
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-v5-c-nav__item--m-flyout--c-menu--left-offset));
|
|
19725
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-v5-c-nav__item--m-flyout--c-menu--m-left--right-offset));
|
|
19726
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-v5-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
|
|
19727
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
|
|
19728
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-v5-c-nav__link--Color);
|
|
19729
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-v5-global--spacer--sm);
|
|
19730
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
19731
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
19732
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
19733
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-v5-global--Color--light-200);
|
|
19734
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-v5-global--FontSize--sm);
|
|
19735
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-v5-c-nav__link--OutlineOffset);
|
|
19736
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth: var(--pf-v5-c-nav__item--before--BorderWidth);
|
|
19737
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-v5-c-nav__item--before--BorderColor);
|
|
19738
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19739
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-v5-global--BorderColor--200);
|
|
19740
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
|
|
19741
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-nav__link--hover--BackgroundColor);
|
|
19742
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-nav__link--focus--BackgroundColor);
|
|
19743
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-v5-c-nav__link--active--BackgroundColor);
|
|
19744
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
|
|
19745
|
-
--pf-v5-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
|
|
19746
|
-
--pf-v5-c-nav--c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
|
|
19747
|
-
--pf-v5-c-nav--c-menu__list--PaddingTop: 0;
|
|
19748
|
-
--pf-v5-c-nav--c-menu__list--PaddingBottom: 0;
|
|
19749
|
-
--pf-v5-c-nav--c-menu__list-item--Color: var(--pf-v5-global--Color--light-100);
|
|
19750
|
-
--pf-v5-c-nav--c-menu__list-item--hover--Color: var(--pf-v5-global--Color--light-100);
|
|
19751
|
-
--pf-v5-c-nav--c-menu__list-item--active--Color: var(--pf-v5-global--Color--light-100);
|
|
19752
|
-
--pf-v5-c-nav--c-menu__list-item--focus-within--Color: var(--pf-v5-global--Color--light-100);
|
|
19753
|
-
--pf-v5-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19754
|
-
--pf-v5-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19755
|
-
--pf-v5-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--lg);
|
|
19756
|
-
--pf-v5-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-v5-global--FontWeight--bold);
|
|
19757
|
-
--pf-v5-c-nav--c-menu__item--PaddingTop: var(--pf-v5-global--spacer--md);
|
|
19758
|
-
--pf-v5-c-nav--c-menu__item--PaddingRight: var(--pf-v5-global--spacer--md);
|
|
19759
|
-
--pf-v5-c-nav--c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--md);
|
|
19760
|
-
--pf-v5-c-nav--c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--md);
|
|
19761
|
-
--pf-v5-c-nav--c-menu__item--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
19762
|
-
--pf-v5-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
19763
|
-
--pf-v5-c-nav--c-menu__item--FontSize: var(--pf-v5-global--FontSize--sm);
|
|
19764
|
-
--pf-v5-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
|
|
19765
|
-
--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19766
|
-
--pf-v5-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
|
19767
|
-
--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: 0;
|
|
19768
|
-
--pf-v5-c-nav--c-menu__item--after--BorderLeftColor: transparent;
|
|
19769
|
-
--pf-v5-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
|
|
19770
|
-
--pf-v5-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--xl);
|
|
19771
|
-
--pf-v5-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-v5-global--active-color--400);
|
|
19772
|
-
--pf-v5-c-nav--c-menu__item-description--Color: var(--pf-v5-global--Color--400);
|
|
19773
|
-
--pf-v5-c-nav--c-menu--m-flyout--left-offset: 0.25rem;
|
|
19774
|
-
--pf-v5-c-nav--c-menu--m-flyout--m-left--right-offset: 0.25rem;
|
|
19775
|
-
--pf-v5-c-nav--c-menu--m-flyout--Top: 0;
|
|
19776
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-v5-c-nav--c-menu--m-flyout--Top) * -1);
|
|
19777
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right: auto;
|
|
19778
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom: auto;
|
|
19779
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-v5-c-nav--c-menu--m-flyout--left-offset));
|
|
19780
|
-
--pf-v5-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-v5-c-nav--c-menu--m-flyout--m-left--right-offset));
|
|
19781
|
-
--pf-v5-c-nav--c-menu--m-flyout--m-top--Bottom: 0;
|
|
19782
|
-
--pf-v5-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
|
|
19783
|
-
--pf-v5-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-v5-global--spacer--sm);
|
|
19784
|
-
--pf-v5-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
19785
|
-
--pf-v5-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
|
19786
|
-
--pf-v5-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
19787
|
-
--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
|
|
19788
|
-
--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-v5-global--BorderColor--200);
|
|
19789
|
-
--pf-v5-c-nav__toggle--m-start--MarginRight: var(--pf-v5-global--spacer--sm);
|
|
19790
|
-
position: relative;
|
|
19527
|
+
--pf-v5-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
|
|
19528
|
+
--pf-v5-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
19529
|
+
--pf-v5-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
|
|
19530
|
+
--pf-v5-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
|
|
19531
|
+
--pf-v5-c-nav__scroll-button--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
19532
|
+
--pf-v5-c-nav__scroll-button--button--InlinePadding: var(--pf-t--global--spacer--sm);
|
|
19533
|
+
--pf-v5-c-nav__scroll-button--button--icon--InlinePadding: var(--pf-t--global--spacer--sm);
|
|
19534
|
+
--pf-v5-c-nav__scroll-button--button--icon--IconSize: var(--pf-t--global--icon--size--md);
|
|
19535
|
+
--pf-v5-c-nav__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
19536
|
+
--pf-v5-c-nav__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
19537
|
+
--pf-v5-c-nav__toggle--TranslateY: calc((var(--pf-v5-c-nav--LineHeight) * var(--pf-v5-c-nav--FontSize) / 2) - 50%);
|
|
19538
|
+
--pf-v5-c-nav__link--clickable-inset--InlineStart: 0;
|
|
19539
|
+
--pf-v5-c-nav__link--clickable-inset--InlineEnd: 0;
|
|
19540
|
+
--pf-v5-c-nav__link--clickable-inset--Inline: var(--pf-v5-c-nav__link--clickable-inset--InlineStart) var(--pf-v5-c-nav__link--clickable-inset--InlineEnd);
|
|
19541
|
+
--pf-v5-c-nav--m-horizontal--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
19542
|
+
--pf-v5-c-nav--m-horizontal__list--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
19543
|
+
--pf-v5-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
19544
|
+
--pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
19545
|
+
--pf-v5-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
19546
|
+
--pf-v5-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
19547
|
+
--pf-v5-c-nav--m-horizontal__list--PaddingBlock: var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd);
|
|
19548
|
+
--pf-v5-c-nav--m-horizontal__list--PaddingInline: var(--pf-v5-c-nav--m-horizontal__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal__list--PaddingInlineEnd);
|
|
19549
|
+
--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
19550
|
+
--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
19551
|
+
--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
19552
|
+
--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
19553
|
+
--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
|
|
19554
|
+
--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInline: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
|
|
19555
|
+
--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
|
|
19556
|
+
--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart: var(--pf-t--global--border--width--extra-strong);
|
|
19557
|
+
}
|
|
19558
|
+
|
|
19559
|
+
.pf-v5-c-nav,
|
|
19560
|
+
.pf-v5-c-nav__section,
|
|
19561
|
+
.pf-v5-c-nav__subnav,
|
|
19562
|
+
.pf-v5-c-nav__list,
|
|
19563
|
+
.pf-v5-c-nav__item {
|
|
19564
|
+
display: grid;
|
|
19791
19565
|
}
|
|
19792
|
-
|
|
19793
|
-
|
|
19794
|
-
--pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__link--xl--PaddingRight);
|
|
19795
|
-
--pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__link--xl--PaddingLeft);
|
|
19796
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingTop);
|
|
19797
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingRight);
|
|
19798
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingBottom);
|
|
19799
|
-
--pf-v5-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingLeft);
|
|
19800
|
-
--pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-c-nav__section__link--xl--PaddingRight);
|
|
19801
|
-
--pf-v5-c-nav__section__link--PaddingLeft: var(--pf-v5-c-nav__section__link--xl--PaddingLeft);
|
|
19802
|
-
--pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-c-nav__section-title--xl--PaddingRight);
|
|
19803
|
-
--pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-c-nav__section-title--xl--PaddingLeft);
|
|
19804
|
-
--pf-v5-c-nav__subnav--PaddingLeft: var(--pf-v5-c-nav__subnav--xl--PaddingLeft);
|
|
19805
|
-
--pf-v5-c-nav--c-menu__item--PaddingRight: var(--pf-v5-c-nav--c-menu__item--xl--PaddingRight);
|
|
19806
|
-
--pf-v5-c-nav--c-menu__item--PaddingLeft: var(--pf-v5-c-nav--c-menu__item--xl--PaddingLeft);
|
|
19807
|
-
}
|
|
19808
|
-
}
|
|
19809
|
-
.pf-v5-c-nav .pf-v5-c-menu {
|
|
19566
|
+
|
|
19567
|
+
.pf-v5-c-nav {
|
|
19810
19568
|
--pf-v5-c-menu--MinWidth: 100%;
|
|
19811
|
-
--pf-v5-c-menu--BackgroundColor: var(--pf-v5-c-nav--c-menu--BackgroundColor);
|
|
19812
|
-
--pf-v5-c-menu__list--PaddingTop: var(--pf-v5-c-nav--c-menu__list--PaddingTop);
|
|
19813
|
-
--pf-v5-c-menu__list--PaddingBottom: var(--pf-v5-c-nav--c-menu__list--PaddingBottom);
|
|
19814
|
-
--pf-v5-c-menu__item--PaddingTop: var(--pf-v5-c-nav--c-menu__item--PaddingTop);
|
|
19815
|
-
--pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-nav--c-menu__item--PaddingRight);
|
|
19816
|
-
--pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-nav--c-menu__item--PaddingBottom);
|
|
19817
|
-
--pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-nav--c-menu__item--PaddingLeft);
|
|
19818
|
-
--pf-v5-c-menu__list-item--Color: var(--pf-v5-c-nav--c-menu__list-item--Color);
|
|
19819
|
-
--pf-v5-c-menu__list-item--hover--Color: var(--pf-v5-c-nav--c-menu__list-item--hover--Color);
|
|
19820
|
-
--pf-v5-c-menu__list-item--active--Color: var(--pf-v5-c-nav--c-menu__list-item--active--Color);
|
|
19821
|
-
--pf-v5-c-menu__list-item--focus-within--Color: var(--pf-v5-c-nav--c-menu__list-item--focus-within--Color);
|
|
19822
|
-
--pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-nav--c-menu__list-item--hover--BackgroundColor);
|
|
19823
|
-
--pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-nav--c-menu__list-item--focus-within--BackgroundColor);
|
|
19824
|
-
--pf-v5-c-menu__item-description--Color: var(--pf-v5-c-nav--c-menu__item-description--Color);
|
|
19825
|
-
}
|
|
19826
|
-
.pf-v5-c-nav .pf-v5-c-menu:first-child > .pf-v5-c-menu__content {
|
|
19827
|
-
border-block-end: var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav--c-menu__item--before--BorderBottomColor);
|
|
19828
|
-
}
|
|
19829
|
-
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu {
|
|
19830
|
-
--pf-v5-c-menu--BoxShadow: var(--pf-v5-c-nav--c-menu--m-flyout--BoxShadow);
|
|
19831
|
-
--pf-v5-c-menu__list--PaddingTop: 0;
|
|
19832
|
-
--pf-v5-c-menu__list--PaddingBottom: 0;
|
|
19833
|
-
--pf-v5-c-menu__item--FontSize: var(--pf-v5-c-nav--c-menu__item--FontSize);
|
|
19834
|
-
--pf-v5-c-menu__item--Color: var(--pf-v5-c-nav--c-menu__item--Color, inherit);
|
|
19835
|
-
--pf-v5-c-menu__item--PaddingTop: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingTop);
|
|
19836
|
-
--pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingRight);
|
|
19837
|
-
--pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingBottom);
|
|
19838
|
-
--pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingLeft);
|
|
19839
|
-
inset-block-start: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Top);
|
|
19840
|
-
inset-block-end: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom);
|
|
19841
|
-
inset-inline-start: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Left);
|
|
19842
|
-
inset-inline-end: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right);
|
|
19843
|
-
}
|
|
19844
|
-
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__item:hover {
|
|
19845
|
-
--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
|
|
19846
|
-
--pf-v5-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
|
|
19847
|
-
}
|
|
19848
|
-
.pf-v5-c-nav .pf-v5-c-menu.pf-m-top {
|
|
19849
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Top: auto;
|
|
19850
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-v5-c-nav--c-menu--m-flyout--m-top--Bottom);
|
|
19851
|
-
}
|
|
19852
|
-
.pf-v5-c-nav .pf-v5-c-menu.pf-m-left {
|
|
19853
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-v5-c-nav--c-menu--m-flyout--m-left--Right);
|
|
19854
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Left: auto;
|
|
19855
|
-
}
|
|
19856
|
-
.pf-v5-c-nav .pf-v5-c-menu .pf-v5-c-divider {
|
|
19857
|
-
margin-block-start: 0;
|
|
19858
|
-
margin-block-end: 0;
|
|
19859
|
-
}
|
|
19860
|
-
.pf-v5-c-nav .pf-v5-c-menu__item {
|
|
19861
19569
|
position: relative;
|
|
19862
|
-
|
|
19863
|
-
|
|
19864
|
-
|
|
19865
|
-
|
|
19866
|
-
|
|
19867
|
-
|
|
19868
|
-
|
|
19869
|
-
|
|
19870
|
-
|
|
19871
|
-
|
|
19872
|
-
|
|
19873
|
-
|
|
19874
|
-
|
|
19875
|
-
.pf-v5-c-nav .pf-v5-c-menu__item::after {
|
|
19876
|
-
inset-block-end: 0;
|
|
19877
|
-
inset-inline-start: 0;
|
|
19878
|
-
border-inline-start: var(--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-v5-c-nav--c-menu__item--after--BorderLeftColor);
|
|
19879
|
-
}
|
|
19880
|
-
.pf-v5-c-nav .pf-v5-c-menu__item.pf-m-current {
|
|
19881
|
-
--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-v5-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
|
|
19882
|
-
--pf-v5-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-v5-c-nav--c-menu__item--m-current--after--BorderColor);
|
|
19883
|
-
background-color: var(--pf-v5-c-nav--c-menu__item--m-current--BackgroundColor);
|
|
19884
|
-
}
|
|
19885
|
-
.pf-v5-c-nav .pf-v5-c-menu__list-item:where(.pf-m-drill-up) {
|
|
19886
|
-
--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-v5-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
|
|
19887
|
-
}
|
|
19888
|
-
.pf-v5-c-nav .pf-v5-c-menu__list-item:where(.pf-m-drill-up) > .pf-v5-c-menu__item {
|
|
19889
|
-
--pf-v5-c-menu__item--FontWeight: var(--pf-v5-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
|
|
19890
|
-
}
|
|
19891
|
-
.pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
|
|
19892
|
-
margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
|
|
19893
|
-
}
|
|
19894
|
-
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
|
|
19895
|
-
scale: -1 1;
|
|
19896
|
-
}
|
|
19897
|
-
|
|
19898
|
-
.pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
|
|
19899
|
-
content: none;
|
|
19570
|
+
row-gap: var(--pf-v5-c-nav--RowGap);
|
|
19571
|
+
max-width: 100%;
|
|
19572
|
+
padding-block-start: var(--pf-v5-c-nav--PaddingBlockStart);
|
|
19573
|
+
padding-block-end: var(--pf-v5-c-nav--PaddingBlockEnd);
|
|
19574
|
+
padding-inline-start: var(--pf-v5-c-nav--PaddingInlineStart);
|
|
19575
|
+
padding-inline-end: var(--pf-v5-c-nav--PaddingInlineEnd);
|
|
19576
|
+
font-size: var(--pf-v5-c-nav--FontSize);
|
|
19577
|
+
font-weight: var(--pf-v5-c-nav--FontWeight);
|
|
19578
|
+
line-height: var(--pf-v5-c-nav--LineHeight);
|
|
19579
|
+
background-color: var(--pf-v5-c-nav--BackgroundColor);
|
|
19580
|
+
}
|
|
19581
|
+
.pf-v5-c-nav:where(.pf-m-scrollable) {
|
|
19582
|
+
padding-inline: var(--pf-v5-c-nav--m-scrollable__list--PaddingInline);
|
|
19900
19583
|
}
|
|
19901
|
-
.pf-v5-c-nav.pf-m-
|
|
19584
|
+
.pf-v5-c-nav.pf-m-overflow-hidden {
|
|
19902
19585
|
overflow: hidden;
|
|
19903
19586
|
}
|
|
19904
|
-
.pf-v5-c-nav.pf-m-
|
|
19905
|
-
|
|
19906
|
-
.pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__list, .pf-v5-c-nav.pf-m-horizontal-subnav,
|
|
19907
|
-
.pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__list {
|
|
19908
|
-
position: relative;
|
|
19909
|
-
display: flex;
|
|
19587
|
+
.pf-v5-c-nav.pf-m-full-width {
|
|
19588
|
+
width: 100%;
|
|
19910
19589
|
}
|
|
19911
|
-
.pf-v5-c-nav.pf-m-
|
|
19912
|
-
|
|
19913
|
-
--pf-v5-c-nav__list--PaddingBottom: 0;
|
|
19914
|
-
flex: 1;
|
|
19915
|
-
max-width: 100%;
|
|
19916
|
-
overflow-x: auto;
|
|
19917
|
-
white-space: nowrap;
|
|
19918
|
-
scroll-snap-type: var(--pf-v5-c-nav__list--ScrollSnapType);
|
|
19919
|
-
-webkit-overflow-scrolling: touch;
|
|
19920
|
-
scrollbar-width: none;
|
|
19921
|
-
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
19590
|
+
.pf-v5-c-nav.pf-m-fill {
|
|
19591
|
+
flex-grow: 1;
|
|
19922
19592
|
}
|
|
19923
|
-
|
|
19593
|
+
|
|
19594
|
+
[class^=pf-v5-c-nav][hidden] {
|
|
19924
19595
|
display: none;
|
|
19925
19596
|
}
|
|
19926
|
-
|
|
19927
|
-
|
|
19928
|
-
|
|
19929
|
-
|
|
19930
|
-
|
|
19931
|
-
|
|
19932
|
-
|
|
19933
|
-
white-space: nowrap;
|
|
19934
|
-
}
|
|
19935
|
-
.pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::before, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::before, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__link::before {
|
|
19936
|
-
inset-block-start: auto;
|
|
19937
|
-
inset-block-end: 0;
|
|
19938
|
-
}
|
|
19939
|
-
.pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::before {
|
|
19940
|
-
inset-inline-start: var(--pf-v5-c-nav--m-horizontal__link--Left);
|
|
19941
|
-
inset-inline-end: var(--pf-v5-c-nav--m-horizontal__link--Right);
|
|
19942
|
-
}
|
|
19943
|
-
.pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::before {
|
|
19944
|
-
inset-inline-start: var(--pf-v5-c-nav--m-tertiary__link--Left);
|
|
19945
|
-
inset-inline-end: var(--pf-v5-c-nav--m-tertiary__link--Right);
|
|
19946
|
-
}
|
|
19947
|
-
.pf-v5-c-nav.pf-m-light {
|
|
19948
|
-
--pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-c-nav--m-light__item--before--BorderColor);
|
|
19949
|
-
--pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);
|
|
19950
|
-
--pf-v5-c-nav__link--Color: var(--pf-v5-c-nav--m-light__link--Color);
|
|
19951
|
-
--pf-v5-c-nav__link--hover--Color: var(--pf-v5-c-nav--m-light__link--hover--Color);
|
|
19952
|
-
--pf-v5-c-nav__link--focus--Color: var(--pf-v5-c-nav--m-light__link--focus--Color);
|
|
19953
|
-
--pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav--m-light__link--active--Color);
|
|
19954
|
-
--pf-v5-c-nav__link--m-current--Color: var(--pf-v5-c-nav--m-light__link--m-current--Color);
|
|
19955
|
-
--pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-c-nav--m-light__link--hover--BackgroundColor);
|
|
19956
|
-
--pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-c-nav--m-light__link--focus--BackgroundColor);
|
|
19957
|
-
--pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav--m-light__link--active--BackgroundColor);
|
|
19958
|
-
--pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-c-nav--m-light__link--m-current--BackgroundColor);
|
|
19959
|
-
--pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-c-nav--m-light__link--before--BorderColor);
|
|
19960
|
-
--pf-v5-c-nav__link--after--BorderColor: var(--pf-v5-c-nav--m-light__link--after--BorderColor);
|
|
19961
|
-
--pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav--m-light__link--m-current--after--BorderColor);
|
|
19962
|
-
--pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor);
|
|
19963
|
-
--pf-v5-c-nav__subnav__link--focus--after--BorderColor: var(--pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor);
|
|
19964
|
-
--pf-v5-c-nav__subnav__link--active--after--BorderColor: var(--pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor);
|
|
19965
|
-
--pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor);
|
|
19966
|
-
--pf-v5-c-nav__section-title--Color: var(--pf-v5-c-nav--m-light__section-title--Color);
|
|
19967
|
-
--pf-v5-c-nav__section-title--BorderBottomColor: var(--pf-v5-c-nav--m-light__section-title--BorderBottomColor);
|
|
19968
|
-
}
|
|
19969
|
-
.pf-v5-c-nav.pf-m-light .pf-v5-c-divider {
|
|
19970
|
-
--pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-nav--m-light--c-divider--BackgroundColor);
|
|
19971
|
-
}
|
|
19972
|
-
.pf-v5-c-nav.pf-m-horizontal {
|
|
19973
|
-
--pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav--m-horizontal__link--PaddingTop);
|
|
19974
|
-
--pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav--m-horizontal__link--PaddingRight);
|
|
19975
|
-
--pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav--m-horizontal__link--PaddingBottom);
|
|
19976
|
-
--pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav--m-horizontal__link--PaddingLeft);
|
|
19977
|
-
--pf-v5-c-nav__link--Right: var(--pf-v5-c-nav--m-horizontal__link--Right);
|
|
19978
|
-
--pf-v5-c-nav__link--Left: var(--pf-v5-c-nav--m-horizontal__link--Left);
|
|
19979
|
-
--pf-v5-c-nav__link--Color: var(--pf-v5-c-nav--m-horizontal__link--Color);
|
|
19980
|
-
--pf-v5-c-nav__link--hover--Color: var(--pf-v5-c-nav--m-horizontal__link--hover--Color);
|
|
19981
|
-
--pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav--m-horizontal__link--active--Color);
|
|
19982
|
-
--pf-v5-c-nav__link--focus--Color: var(--pf-v5-c-nav--m-horizontal__link--focus--Color);
|
|
19983
|
-
--pf-v5-c-nav__link--m-current--Color: var(--pf-v5-c-nav--m-horizontal__link--m-current--Color);
|
|
19984
|
-
--pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--BackgroundColor);
|
|
19985
|
-
--pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--hover--BackgroundColor);
|
|
19986
|
-
--pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--focus--BackgroundColor);
|
|
19987
|
-
--pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--active--BackgroundColor);
|
|
19988
|
-
--pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-c-nav--m-horizontal__link--m-current--BackgroundColor);
|
|
19989
|
-
--pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-c-nav--m-horizontal__link--before--BorderColor);
|
|
19990
|
-
--pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--before--BorderWidth);
|
|
19991
|
-
--pf-v5-c-nav__link--hover--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--hover--before--BorderWidth);
|
|
19992
|
-
--pf-v5-c-nav__link--focus--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--focus--before--BorderWidth);
|
|
19993
|
-
--pf-v5-c-nav__link--active--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--active--before--BorderWidth);
|
|
19994
|
-
--pf-v5-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-v5-c-nav--m-horizontal__link--m-current--before--BorderWidth);
|
|
19995
|
-
}
|
|
19996
|
-
.pf-v5-c-nav.pf-m-tertiary {
|
|
19997
|
-
--pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav--m-tertiary__link--PaddingTop);
|
|
19998
|
-
--pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav--m-tertiary__link--PaddingRight);
|
|
19999
|
-
--pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav--m-tertiary__link--PaddingBottom);
|
|
20000
|
-
--pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav--m-tertiary__link--PaddingLeft);
|
|
20001
|
-
--pf-v5-c-nav__link--Right: var(--pf-v5-c-nav--m-tertiary__link--Right);
|
|
20002
|
-
--pf-v5-c-nav__link--Left: var(--pf-v5-c-nav--m-tertiary__link--Left);
|
|
20003
|
-
--pf-v5-c-nav__link--Color: var(--pf-v5-c-nav--m-tertiary__link--Color);
|
|
20004
|
-
--pf-v5-c-nav__link--hover--Color: var(--pf-v5-c-nav--m-tertiary__link--hover--Color);
|
|
20005
|
-
--pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav--m-tertiary__link--active--Color);
|
|
20006
|
-
--pf-v5-c-nav__link--focus--Color: var(--pf-v5-c-nav--m-tertiary__link--focus--Color);
|
|
20007
|
-
--pf-v5-c-nav__link--m-current--Color: var(--pf-v5-c-nav--m-tertiary__link--m-current--Color);
|
|
20008
|
-
--pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--BackgroundColor);
|
|
20009
|
-
--pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--hover--BackgroundColor);
|
|
20010
|
-
--pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--focus--BackgroundColor);
|
|
20011
|
-
--pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--active--BackgroundColor);
|
|
20012
|
-
--pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-c-nav--m-tertiary__link--m-current--BackgroundColor);
|
|
20013
|
-
--pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-c-nav--m-tertiary__link--before--BorderColor);
|
|
20014
|
-
--pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--before--BorderWidth);
|
|
20015
|
-
--pf-v5-c-nav__link--hover--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--hover--before--BorderWidth);
|
|
20016
|
-
--pf-v5-c-nav__link--focus--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--focus--before--BorderWidth);
|
|
20017
|
-
--pf-v5-c-nav__link--active--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--active--before--BorderWidth);
|
|
20018
|
-
--pf-v5-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-v5-c-nav--m-tertiary__link--m-current--before--BorderWidth);
|
|
20019
|
-
--pf-v5-c-nav__scroll-button--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--Color);
|
|
20020
|
-
--pf-v5-c-nav__scroll-button--hover--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--hover--Color);
|
|
20021
|
-
--pf-v5-c-nav__scroll-button--focus--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--focus--Color);
|
|
20022
|
-
--pf-v5-c-nav__scroll-button--active--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--active--Color);
|
|
20023
|
-
--pf-v5-c-nav__scroll-button--disabled--Color: var(--pf-v5-c-nav--m-tertiary__scroll-button--disabled--Color);
|
|
20024
|
-
--pf-v5-c-nav__scroll-button--before--BorderColor: var(--pf-v5-c-nav--m-tertiary__scroll-button--before--BorderColor);
|
|
20025
|
-
--pf-v5-c-nav__scroll-button--disabled--before--BorderColor: var(--pf-v5-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor);
|
|
20026
|
-
}
|
|
20027
|
-
.pf-v5-c-nav.pf-m-horizontal-subnav {
|
|
20028
|
-
--pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav--m-horizontal-subnav__link--FontSize);
|
|
20029
|
-
--pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav--m-horizontal-subnav__link--PaddingTop);
|
|
20030
|
-
--pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav--m-horizontal-subnav__link--PaddingRight);
|
|
20031
|
-
--pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav--m-horizontal-subnav__link--PaddingBottom);
|
|
20032
|
-
--pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav--m-horizontal-subnav__link--PaddingLeft);
|
|
20033
|
-
--pf-v5-c-nav__link--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--Color);
|
|
20034
|
-
--pf-v5-c-nav__link--Right: var(--pf-v5-c-nav--m-horizontal-subnav__link--Right);
|
|
20035
|
-
--pf-v5-c-nav__link--Left: var(--pf-v5-c-nav--m-horizontal-subnav__link--Left);
|
|
20036
|
-
--pf-v5-c-nav__link--hover--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--hover--Color);
|
|
20037
|
-
--pf-v5-c-nav__link--active--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--active--Color);
|
|
20038
|
-
--pf-v5-c-nav__link--focus--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--focus--Color);
|
|
20039
|
-
--pf-v5-c-nav__link--m-current--Color: var(--pf-v5-c-nav--m-horizontal-subnav__link--m-current--Color);
|
|
20040
|
-
--pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--BackgroundColor);
|
|
20041
|
-
--pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--hover--BackgroundColor);
|
|
20042
|
-
--pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--focus--BackgroundColor);
|
|
20043
|
-
--pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--active--BackgroundColor);
|
|
20044
|
-
--pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor);
|
|
20045
|
-
--pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--before--BorderColor);
|
|
20046
|
-
--pf-v5-c-nav__link--after--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--after--BorderColor);
|
|
20047
|
-
--pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderColor);
|
|
20048
|
-
--pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderColor);
|
|
20049
|
-
--pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor);
|
|
20050
|
-
--pf-v5-c-nav__link--after--BorderLeftWidth: var(--pf-v5-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth);
|
|
20051
|
-
--pf-v5-c-nav__link--hover--after--BorderLeftWidth: var(--pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth);
|
|
20052
|
-
--pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth);
|
|
20053
|
-
--pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth);
|
|
20054
|
-
}
|
|
20055
|
-
.pf-v5-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-v5-c-nav__item:first-child {
|
|
20056
|
-
--pf-v5-c-nav__link--after--BorderLeftWidth: 0;
|
|
20057
|
-
--pf-v5-c-nav__link--hover--after--BorderLeftWidth: 0;
|
|
20058
|
-
--pf-v5-c-nav__link--active--after--BorderLeftWidth: 0;
|
|
20059
|
-
--pf-v5-c-nav__link--m-current--after--BorderLeftWidth: 0;
|
|
20060
|
-
}
|
|
20061
|
-
.pf-v5-c-nav .pf-v5-c-divider {
|
|
20062
|
-
--pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-nav--c-divider--BackgroundColor);
|
|
20063
|
-
padding-inline-start: var(--pf-v5-c-nav--c-divider--PaddingLeft);
|
|
20064
|
-
padding-inline-end: var(--pf-v5-c-nav--c-divider--PaddingRight);
|
|
20065
|
-
margin-block-start: var(--pf-v5-c-nav--c-divider--MarginTop);
|
|
20066
|
-
margin-block-end: var(--pf-v5-c-nav--c-divider--MarginBottom);
|
|
20067
|
-
}
|
|
20068
|
-
.pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button {
|
|
20069
|
-
opacity: 1;
|
|
20070
|
-
}
|
|
20071
|
-
.pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button:nth-of-type(1) {
|
|
20072
|
-
margin-inline-end: 0;
|
|
20073
|
-
transform: translateX(0);
|
|
20074
|
-
}
|
|
20075
|
-
.pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button:nth-of-type(2) {
|
|
20076
|
-
margin-inline-start: 0;
|
|
20077
|
-
transform: translateX(0);
|
|
20078
|
-
}
|
|
20079
|
-
.pf-v5-c-nav.pf-m-overflow-hidden {
|
|
20080
|
-
overflow: hidden;
|
|
19597
|
+
|
|
19598
|
+
.pf-v5-c-nav__nav,
|
|
19599
|
+
.pf-v5-c-nav__list,
|
|
19600
|
+
.pf-v5-c-nav__subnav {
|
|
19601
|
+
--pf-v5-c-nav__item--RowGap--row-offset: calc(var(--pf-v5-c-nav__list--RowGap) / 2 * -1);
|
|
19602
|
+
--pf-v5-c-nav__link--clickable-inset--Block: var(--pf-v5-c-nav__item--RowGap--row-offset);
|
|
19603
|
+
--pf-v5-c-nav__button--RowGap--row-offset: calc(var(--pf-v5-c-nav__item--RowGap) * -1);
|
|
20081
19604
|
}
|
|
20082
19605
|
|
|
20083
19606
|
.pf-v5-c-nav__list {
|
|
20084
|
-
|
|
20085
|
-
|
|
20086
|
-
padding-block-start: var(--pf-v5-c-nav__list--PaddingTop);
|
|
20087
|
-
padding-block-end: var(--pf-v5-c-nav__list--PaddingBottom);
|
|
19607
|
+
row-gap: var(--pf-v5-c-nav__list--RowGap);
|
|
19608
|
+
column-gap: var(--pf-v5-c-nav__list--ColumnGap);
|
|
20088
19609
|
}
|
|
20089
19610
|
|
|
20090
|
-
.pf-v5-c-
|
|
20091
|
-
|
|
20092
|
-
|
|
20093
|
-
.pf-v5-c-nav__item.pf-m-expandable {
|
|
20094
|
-
--pf-v5-c-nav__link--before--BorderBottomWidth: 0;
|
|
20095
|
-
}
|
|
20096
|
-
.pf-v5-c-nav__item.pf-m-expandable::before {
|
|
20097
|
-
position: absolute;
|
|
20098
|
-
inset-block-end: calc(var(--pf-v5-c-nav__item--before--BorderWidth) * -1);
|
|
20099
|
-
inset-inline-start: 0;
|
|
20100
|
-
inset-inline-end: 0;
|
|
20101
|
-
content: "";
|
|
20102
|
-
border-block-end: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
|
|
20103
|
-
}
|
|
20104
|
-
.pf-v5-c-nav__item:not(:first-child) {
|
|
20105
|
-
margin-block-start: var(--pf-v5-c-nav__item--MarginTop);
|
|
20106
|
-
}
|
|
20107
|
-
.pf-v5-c-nav__item .pf-v5-c-nav__item:not(.pf-m-expanded) .pf-v5-c-nav__toggle-icon {
|
|
20108
|
-
transform: rotate(0);
|
|
20109
|
-
}
|
|
20110
|
-
.pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable {
|
|
20111
|
-
--pf-v5-c-nav__toggle--FontSize: var(--pf-v5-c-nav__item__item__toggle--FontSize);
|
|
20112
|
-
--pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__item__item__link--PaddingRight);
|
|
20113
|
-
}
|
|
20114
|
-
@media screen and (min-width: 1200px) {
|
|
20115
|
-
.pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable::before {
|
|
20116
|
-
border-block-end: none;
|
|
20117
|
-
}
|
|
20118
|
-
}
|
|
20119
|
-
.pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable .pf-v5-c-nav__list::before {
|
|
20120
|
-
position: absolute;
|
|
20121
|
-
inset-block-start: 0;
|
|
20122
|
-
inset-block-end: 0;
|
|
20123
|
-
inset-inline-start: 0;
|
|
20124
|
-
inset-inline-end: 0;
|
|
20125
|
-
pointer-events: none;
|
|
20126
|
-
content: "";
|
|
20127
|
-
border-inline-start: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
|
|
20128
|
-
}
|
|
20129
|
-
.pf-v5-c-nav__item .pf-v5-c-nav__toggle-icon {
|
|
20130
|
-
transform: rotate(var(--pf-v5-c-nav__item__toggle-icon--Rotate));
|
|
20131
|
-
}
|
|
20132
|
-
.pf-v5-c-nav__item.pf-m-flyout:hover {
|
|
20133
|
-
--pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--hover__link--BackgroundColor);
|
|
20134
|
-
--pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav__item--m-flyout--hover__link--before--BorderWidth);
|
|
20135
|
-
}
|
|
20136
|
-
.pf-v5-c-nav__item.pf-m-flyout:focus {
|
|
20137
|
-
--pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--focus__link--BackgroundColor);
|
|
20138
|
-
--pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav__item--m-flyout--focus__link--before--BorderWidth);
|
|
20139
|
-
}
|
|
20140
|
-
.pf-v5-c-nav__item.pf-m-flyout:active {
|
|
20141
|
-
--pf-v5-c-nav__link--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--active__link--BackgroundColor);
|
|
20142
|
-
--pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav__item--m-flyout--active__link--before--BorderWidth);
|
|
19611
|
+
.pf-v5-c-nav__subnav {
|
|
19612
|
+
--pf-v5-c-nav__list--RowGap: var(--pf-v5-c-nav__subnav--RowGap);
|
|
19613
|
+
padding-inline-start: var(--pf-v5-c-nav__subnav--PaddingInlineStart);
|
|
20143
19614
|
}
|
|
20144
|
-
|
|
20145
|
-
|
|
20146
|
-
|
|
20147
|
-
|
|
20148
|
-
--pf-v5-c-menu__list--PaddingTop: 0;
|
|
20149
|
-
--pf-v5-c-menu__list--PaddingBottom: 0;
|
|
20150
|
-
--pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor);
|
|
20151
|
-
--pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor);
|
|
20152
|
-
--pf-v5-c-menu__list-item--active--BackgroundColor: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
|
|
20153
|
-
--pf-v5-c-menu__item--FontSize: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--FontSize);
|
|
20154
|
-
--pf-v5-c-menu__item--Color: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--Color);
|
|
20155
|
-
--pf-v5-c-menu__item--PaddingTop: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingTop);
|
|
20156
|
-
--pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingRight);
|
|
20157
|
-
--pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
|
|
20158
|
-
--pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
|
|
20159
|
-
--pf-v5-c-menu__item-description--Color: var(--pf-v5-c-nav__item--m-flyout--c-menu__item-description--Color);
|
|
20160
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-v5-c-nav__item--m-flyout--c-menu--m-top--Bottom);
|
|
20161
|
-
--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-v5-c-nav__item--m-flyout--c-menu--m-left--Right);
|
|
20162
|
-
position: absolute;
|
|
20163
|
-
inset-block-start: var(--pf-v5-c-nav__item--m-flyout--c-menu--Top);
|
|
20164
|
-
inset-inline-start: var(--pf-v5-c-nav__item--m-flyout--c-menu--Left);
|
|
19615
|
+
|
|
19616
|
+
.pf-v5-c-nav__item {
|
|
19617
|
+
row-gap: var(--pf-v5-c-nav__item--RowGap);
|
|
19618
|
+
scroll-snap-align: var(--pf-v5-c-nav__item--ScrollSnapAlign);
|
|
20165
19619
|
}
|
|
20166
|
-
.pf-v5-c-nav__item
|
|
20167
|
-
|
|
19620
|
+
.pf-v5-c-nav__item > .pf-v5-c-nav__link[button] {
|
|
19621
|
+
margin-block-end: var(--pf-v5-c-nav__button--RowGap--row-offset);
|
|
20168
19622
|
}
|
|
20169
|
-
.pf-v5-c-nav__item.pf-m-
|
|
20170
|
-
--pf-v5-c-nav__item--m-
|
|
20171
|
-
--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
|
|
19623
|
+
.pf-v5-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
|
|
19624
|
+
margin-block-end: var(--pf-v5-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v5-c-nav__item--RowGap));
|
|
20172
19625
|
}
|
|
20173
|
-
.pf-v5-c-nav__item.pf-m-
|
|
20174
|
-
|
|
20175
|
-
outline-offset: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
|
|
19626
|
+
.pf-v5-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) + .pf-v5-c-nav__item > .pf-v5-c-nav__link::before {
|
|
19627
|
+
inset-block-start: calc(var(--pf-v5-c-nav__item--RowGap) * -1 - var(--pf-v5-c-nav__list--RowGap));
|
|
20176
19628
|
}
|
|
20177
|
-
|
|
20178
|
-
|
|
20179
|
-
|
|
20180
|
-
inset-inline-start: 0;
|
|
20181
|
-
inset-inline-end: 0;
|
|
20182
|
-
content: "";
|
|
20183
|
-
border-block-end: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
|
|
20184
|
-
}
|
|
20185
|
-
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__item:hover::after {
|
|
20186
|
-
position: absolute;
|
|
20187
|
-
inset-block-start: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
|
|
20188
|
-
inset-block-end: 0;
|
|
20189
|
-
inset-inline-start: 0;
|
|
20190
|
-
content: "";
|
|
20191
|
-
border-inline-start: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
|
|
19629
|
+
|
|
19630
|
+
.pf-v5-c-nav__section {
|
|
19631
|
+
row-gap: var(--pf-v5-c-nav__section--RowGap, var(--pf-v5-c-nav__list--RowGap));
|
|
20192
19632
|
}
|
|
20193
|
-
|
|
20194
|
-
|
|
20195
|
-
|
|
19633
|
+
|
|
19634
|
+
.pf-v5-c-nav__section-title {
|
|
19635
|
+
padding-block-start: var(--pf-v5-c-nav__section-title--PaddingBlock, var(--pf-v5-c-nav__link--PaddingBlockStart));
|
|
19636
|
+
padding-block-end: var(--pf-v5-c-nav__section-title--PaddingBlock, var(--pf-v5-c-nav__link--PaddingBlockEnd));
|
|
19637
|
+
padding-inline-start: var(--pf-v5-c-nav__section-title--PaddingInline, var(--pf-v5-c-nav__link--PaddingInlineStart));
|
|
19638
|
+
padding-inline-end: var(--pf-v5-c-nav__section-title--PaddingInline, var(--pf-v5-c-nav__link--PaddingInlineEnd));
|
|
19639
|
+
font-size: var(--pf-v5-c-nav__section-title--FontSize, inherit);
|
|
19640
|
+
font-weight: var(--pf-v5-c-nav__section-title--FontWeight);
|
|
19641
|
+
color: var(--pf-v5-c-nav__section-title--Color);
|
|
20196
19642
|
}
|
|
20197
19643
|
|
|
20198
19644
|
.pf-v5-c-nav__link {
|
|
20199
19645
|
position: relative;
|
|
20200
19646
|
display: flex;
|
|
20201
|
-
|
|
20202
|
-
|
|
20203
|
-
padding-block-
|
|
20204
|
-
padding-
|
|
20205
|
-
padding-inline-
|
|
20206
|
-
|
|
20207
|
-
font-
|
|
19647
|
+
column-gap: var(--pf-v5-c-nav__link--ColumnGap, var(--pf-v5-c-nav--ColumnGap));
|
|
19648
|
+
align-items: var(--pf-v5-c-nav__link--AlignItems, var(--pf-v5-c-nav--AlignItems));
|
|
19649
|
+
padding-block-start: var(--pf-v5-c-nav__link--PaddingBlockStart);
|
|
19650
|
+
padding-block-end: var(--pf-v5-c-nav__link--PaddingBlockEnd);
|
|
19651
|
+
padding-inline-start: var(--pf-v5-c-nav__link--PaddingInlineStart);
|
|
19652
|
+
padding-inline-end: var(--pf-v5-c-nav__link--PaddingInlineEnd);
|
|
19653
|
+
font-size: var(--pf-v5-c-nav__link--FontSize, inherit);
|
|
19654
|
+
font-weight: var(--pf-v5-c-nav__link--FontWeight, inherit);
|
|
19655
|
+
line-height: var(--pf-v5-c-nav__link--LineHeight, inherit);
|
|
20208
19656
|
color: var(--pf-v5-c-nav__link--Color);
|
|
19657
|
+
text-align: start;
|
|
20209
19658
|
background-color: var(--pf-v5-c-nav__link--BackgroundColor);
|
|
20210
|
-
|
|
19659
|
+
border: none;
|
|
19660
|
+
border-radius: var(--pf-v5-c-nav__link--BorderRadius);
|
|
20211
19661
|
}
|
|
20212
|
-
.pf-v5-c-nav__link::
|
|
19662
|
+
.pf-v5-c-nav__link::before {
|
|
20213
19663
|
position: absolute;
|
|
19664
|
+
inset-block: var(--pf-v5-c-nav__link--clickable-inset--Block);
|
|
19665
|
+
inset-inline: var(--pf-v5-c-nav__link--clickable-inset--Inline);
|
|
20214
19666
|
content: "";
|
|
20215
|
-
border: 0 solid;
|
|
20216
|
-
}
|
|
20217
|
-
.pf-v5-c-nav__link::before {
|
|
20218
|
-
inset-block-end: calc(var(--pf-v5-c-nav__link--before--BorderBottomWidth) * -1);
|
|
20219
|
-
inset-inline-start: 0;
|
|
20220
|
-
inset-inline-end: 0;
|
|
20221
|
-
border-color: var(--pf-v5-c-nav__link--before--BorderColor);
|
|
20222
|
-
border-block-end-width: var(--pf-v5-c-nav__link--before--BorderBottomWidth);
|
|
20223
19667
|
}
|
|
20224
|
-
.pf-v5-c-nav__link::
|
|
20225
|
-
inset-block-
|
|
20226
|
-
inset-block-end: 0;
|
|
20227
|
-
inset-inline-start: 0;
|
|
20228
|
-
border: 0 solid;
|
|
20229
|
-
border-color: var(--pf-v5-c-nav__link--after--BorderColor);
|
|
20230
|
-
border-inline-start-width: var(--pf-v5-c-nav__link--after--BorderLeftWidth);
|
|
19668
|
+
.pf-v5-c-nav__link[aria-expanded=true]::before {
|
|
19669
|
+
inset-block-end: calc(var(--pf-v5-c-nav__item--RowGap) * -1);
|
|
20231
19670
|
}
|
|
20232
19671
|
.pf-v5-c-nav__link:hover, .pf-v5-c-nav__link.pf-m-hover {
|
|
20233
19672
|
color: var(--pf-v5-c-nav__link--hover--Color);
|
|
20234
19673
|
background-color: var(--pf-v5-c-nav__link--hover--BackgroundColor);
|
|
20235
19674
|
}
|
|
20236
|
-
.pf-v5-c-nav__link:hover::before, .pf-v5-c-nav__link.pf-m-hover::before {
|
|
20237
|
-
border-block-end-width: var(--pf-v5-c-nav__link--hover--before--BorderBottomWidth);
|
|
20238
|
-
}
|
|
20239
|
-
.pf-v5-c-nav__link:hover::after, .pf-v5-c-nav__link.pf-m-hover::after {
|
|
20240
|
-
border-color: var(--pf-v5-c-nav__link--hover--after--BorderColor);
|
|
20241
|
-
border-inline-start-width: var(--pf-v5-c-nav__link--hover--after--BorderLeftWidth);
|
|
20242
|
-
}
|
|
20243
19675
|
.pf-v5-c-nav__link:focus {
|
|
20244
19676
|
color: var(--pf-v5-c-nav__link--focus--Color);
|
|
20245
19677
|
background-color: var(--pf-v5-c-nav__link--focus--BackgroundColor);
|
|
20246
19678
|
}
|
|
20247
|
-
.pf-v5-c-nav__link:focus::before {
|
|
20248
|
-
border-block-end-width: var(--pf-v5-c-nav__link--focus--before--BorderBottomWidth);
|
|
20249
|
-
}
|
|
20250
|
-
.pf-v5-c-nav__link:focus::after {
|
|
20251
|
-
border-color: var(--pf-v5-c-nav__link--focus--after--BorderColor);
|
|
20252
|
-
border-inline-start-width: var(--pf-v5-c-nav__link--focus--after--BorderLeftWidth);
|
|
20253
|
-
}
|
|
20254
19679
|
.pf-v5-c-nav__link:active {
|
|
20255
19680
|
color: var(--pf-v5-c-nav__link--active--Color);
|
|
20256
19681
|
background-color: var(--pf-v5-c-nav__link--active--BackgroundColor);
|
|
20257
19682
|
}
|
|
20258
|
-
.pf-v5-c-nav__link:
|
|
20259
|
-
border-block-end-width: var(--pf-v5-c-nav__link--active--before--BorderBottomWidth);
|
|
20260
|
-
}
|
|
20261
|
-
.pf-v5-c-nav__link:active::after {
|
|
20262
|
-
border-color: var(--pf-v5-c-nav__link--active--after--BorderColor);
|
|
20263
|
-
border-inline-start-width: var(--pf-v5-c-nav__link--active--after--BorderLeftWidth);
|
|
20264
|
-
}
|
|
20265
|
-
.pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link.pf-m-current:hover, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link {
|
|
19683
|
+
.pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link.pf-m-current:hover {
|
|
20266
19684
|
color: var(--pf-v5-c-nav__link--m-current--Color);
|
|
20267
19685
|
background-color: var(--pf-v5-c-nav__link--m-current--BackgroundColor);
|
|
20268
19686
|
}
|
|
20269
|
-
.pf-v5-c-nav__link.pf-m-current::before, .pf-v5-c-nav__link.pf-m-current:hover::before, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::before {
|
|
20270
|
-
border-block-end-width: var(--pf-v5-c-nav__link--m-current--before--BorderBottomWidth);
|
|
20271
|
-
}
|
|
20272
|
-
.pf-v5-c-nav__link.pf-m-current::after, .pf-v5-c-nav__link.pf-m-current:hover::after, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::after {
|
|
20273
|
-
border-color: var(--pf-v5-c-nav__link--m-current--after--BorderColor);
|
|
20274
|
-
border-inline-start-width: var(--pf-v5-c-nav__link--m-current--after--BorderLeftWidth);
|
|
20275
|
-
}
|
|
20276
|
-
.pf-v5-c-nav__link, .pf-v5-c-nav__link:hover, .pf-v5-c-nav__link:focus, .pf-v5-c-nav__link:active {
|
|
20277
|
-
width: 100%;
|
|
20278
|
-
text-decoration: none;
|
|
20279
|
-
border: none;
|
|
20280
|
-
}
|
|
20281
|
-
|
|
20282
|
-
.pf-v5-c-nav__subnav {
|
|
20283
|
-
--pf-v5-c-nav__list--PaddingTop: 0;
|
|
20284
|
-
--pf-v5-c-nav__list--PaddingBottom: 0;
|
|
20285
|
-
--pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav__subnav__link--PaddingTop);
|
|
20286
|
-
--pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__subnav__link--PaddingRight);
|
|
20287
|
-
--pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav__subnav__link--PaddingBottom);
|
|
20288
|
-
--pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__subnav__link--PaddingLeft);
|
|
20289
|
-
--pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav__subnav__link--FontSize);
|
|
20290
|
-
--pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-c-nav__subnav__link--hover--after--BorderColor);
|
|
20291
|
-
--pf-v5-c-nav__link--focus--after--BorderColor: var(--pf-v5-c-nav__subnav__link--focus--after--BorderColor);
|
|
20292
|
-
--pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-c-nav__subnav__link--active--after--BorderColor);
|
|
20293
|
-
--pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav__subnav__link--m-current--after--BorderColor);
|
|
20294
|
-
--pf-v5-c-nav__link--hover--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--hover--after--BorderWidth);
|
|
20295
|
-
--pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--focus--after--BorderWidth);
|
|
20296
|
-
--pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--active--after--BorderWidth);
|
|
20297
|
-
--pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--m-current--after--BorderWidth);
|
|
20298
|
-
--pf-v5-c-nav--c-divider--PaddingRight: var(--pf-v5-c-nav__subnav--c-divider--PaddingRight);
|
|
20299
|
-
--pf-v5-c-nav--c-divider--PaddingLeft: var(--pf-v5-c-nav__subnav--c-divider--PaddingLeft);
|
|
20300
|
-
max-height: var(--pf-v5-c-nav__subnav--MaxHeight);
|
|
20301
|
-
padding-block-end: var(--pf-v5-c-nav__subnav--PaddingBottom);
|
|
20302
|
-
padding-inline-start: var(--pf-v5-c-nav__subnav--PaddingLeft);
|
|
20303
|
-
transition: var(--pf-v5-c-nav--Transition);
|
|
20304
|
-
scrollbar-width: none;
|
|
20305
|
-
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
20306
|
-
}
|
|
20307
|
-
.pf-v5-c-nav__subnav .pf-v5-c-nav__subnav {
|
|
20308
|
-
--pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav__subnav__subnav__link--FontSize);
|
|
20309
|
-
--pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__subnav__subnav__link--PaddingLeft);
|
|
20310
|
-
--pf-v5-c-nav__subnav--PaddingLeft: var(--pf-v5-c-nav__subnav__subnav--PaddingLeft);
|
|
20311
|
-
}
|
|
20312
|
-
.pf-v5-c-nav__subnav.pf-m-flyout {
|
|
20313
|
-
width: 100%;
|
|
20314
|
-
}
|
|
20315
|
-
.pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__subnav {
|
|
20316
|
-
--pf-v5-c-nav__subnav--MaxHeight: var(--pf-v5-c-nav__item--m-expanded__subnav--MaxHeight);
|
|
20317
|
-
overflow-y: auto;
|
|
20318
|
-
opacity: 1;
|
|
20319
|
-
}
|
|
20320
|
-
.pf-v5-c-nav__subnav::-webkit-scrollbar {
|
|
20321
|
-
display: none;
|
|
20322
|
-
}
|
|
20323
19687
|
|
|
20324
19688
|
.pf-v5-c-nav__toggle {
|
|
20325
19689
|
flex: none;
|
|
20326
|
-
|
|
20327
|
-
padding-inline-end: var(--pf-v5-c-nav__toggle--PaddingRight);
|
|
19690
|
+
align-self: start;
|
|
20328
19691
|
margin-inline-start: auto;
|
|
20329
|
-
|
|
20330
|
-
line-height: 1;
|
|
20331
|
-
}
|
|
20332
|
-
.pf-v5-c-nav__toggle.pf-m-start {
|
|
20333
|
-
margin-inline-start: calc(var(--pf-v5-c-nav__toggle--PaddingRight) * -1);
|
|
20334
|
-
margin-inline-end: var(--pf-v5-c-nav__toggle--m-start--MarginRight);
|
|
19692
|
+
transform: translateY(var(--pf-v5-c-nav__toggle--TranslateY));
|
|
20335
19693
|
}
|
|
20336
19694
|
|
|
20337
19695
|
.pf-v5-c-nav__toggle-icon {
|
|
20338
19696
|
display: inline-block;
|
|
20339
|
-
|
|
19697
|
+
transform: rotate(var(--pf-v5-c-nav__item__toggle-icon--Rotate));
|
|
20340
19698
|
}
|
|
20341
19699
|
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
|
|
20342
19700
|
scale: -1 1;
|
|
20343
19701
|
}
|
|
20344
19702
|
|
|
20345
|
-
.pf-v5-c-nav__item.pf-m-
|
|
20346
|
-
|
|
19703
|
+
.pf-v5-c-nav__item:where(.pf-m-flyout) .pf-v5-c-nav__toggle-icon {
|
|
19704
|
+
--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 0;
|
|
20347
19705
|
}
|
|
20348
|
-
|
|
20349
|
-
|
|
20350
|
-
--pf-v5-c-nav__item--MarginTop: var(--pf-v5-c-nav__section__item--MarginTop);
|
|
20351
|
-
--pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav__section__link--PaddingTop);
|
|
20352
|
-
--pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__section__link--PaddingRight);
|
|
20353
|
-
--pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav__section__link--PaddingBottom);
|
|
20354
|
-
--pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__section__link--PaddingLeft);
|
|
20355
|
-
--pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav__section__link--FontSize);
|
|
20356
|
-
--pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-c-nav__section__link--before--BorderBottomWidth);
|
|
20357
|
-
--pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-c-nav__section__link--hover--after--BorderColor);
|
|
20358
|
-
--pf-v5-c-nav__link--focus--after--BorderColor: var(--pf-v5-c-nav__section__link--focus--after--BorderColor);
|
|
20359
|
-
--pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-c-nav__section__link--active--after--BorderColor);
|
|
20360
|
-
--pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav__section__link--m-current--after--BorderColor);
|
|
20361
|
-
--pf-v5-c-nav__link--hover--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--hover--after--BorderWidth);
|
|
20362
|
-
--pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--focus--after--BorderWidth);
|
|
20363
|
-
--pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--active--after--BorderWidth);
|
|
20364
|
-
--pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--m-current--after--BorderWidth);
|
|
20365
|
-
--pf-v5-c-nav__list--PaddingTop: 0;
|
|
20366
|
-
--pf-v5-c-nav__list--PaddingBottom: 0;
|
|
20367
|
-
--pf-v5-c-nav--c-divider--MarginBottom: 0;
|
|
20368
|
-
}
|
|
20369
|
-
.pf-v5-c-nav__section:first-child {
|
|
20370
|
-
padding-block-start: var(--pf-v5-c-nav__section--first-child--PaddingTop);
|
|
20371
|
-
}
|
|
20372
|
-
.pf-v5-c-nav__section + .pf-v5-c-nav__section {
|
|
20373
|
-
margin-block-start: var(--pf-v5-c-nav__section--section--MarginTop);
|
|
20374
|
-
}
|
|
20375
|
-
.pf-v5-c-nav__section:last-child {
|
|
20376
|
-
padding-block-end: var(--pf-v5-c-nav__section--last-child--PaddingBottom);
|
|
20377
|
-
}
|
|
20378
|
-
|
|
20379
|
-
.pf-v5-c-nav__section-title {
|
|
20380
|
-
padding-block-start: var(--pf-v5-c-nav__section-title--PaddingTop);
|
|
20381
|
-
padding-block-end: var(--pf-v5-c-nav__section-title--PaddingBottom);
|
|
20382
|
-
padding-inline-start: var(--pf-v5-c-nav__section-title--PaddingLeft);
|
|
20383
|
-
padding-inline-end: var(--pf-v5-c-nav__section-title--PaddingRight);
|
|
20384
|
-
margin-block-end: var(--pf-v5-c-nav__section-title--MarginBottom);
|
|
20385
|
-
font-size: var(--pf-v5-c-nav__section-title--FontSize);
|
|
20386
|
-
color: var(--pf-v5-c-nav__section-title--Color);
|
|
20387
|
-
border-block-end: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
|
|
19706
|
+
.pf-v5-c-nav__link:where([aria-expanded=true]) .pf-v5-c-nav__toggle-icon {
|
|
19707
|
+
transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
|
|
20388
19708
|
}
|
|
20389
19709
|
|
|
20390
19710
|
.pf-v5-c-nav__scroll-button {
|
|
19711
|
+
position: relative;
|
|
19712
|
+
display: flex;
|
|
20391
19713
|
flex: none;
|
|
20392
|
-
|
|
20393
|
-
|
|
20394
|
-
|
|
20395
|
-
|
|
20396
|
-
|
|
20397
|
-
|
|
20398
|
-
|
|
19714
|
+
align-items: stretch;
|
|
19715
|
+
justify-items: stretch;
|
|
19716
|
+
min-width: var(--pf-v5-c-nav__scroll-button--MinWidth);
|
|
19717
|
+
}
|
|
19718
|
+
.pf-v5-c-nav__scroll-button :is(button) {
|
|
19719
|
+
--pf-v5-c-button--Display: flex;
|
|
19720
|
+
--pf-v5-c-button--Flex: 1;
|
|
19721
|
+
--pf-v5-c-button--AlignItems: center;
|
|
19722
|
+
--pf-v5-c-button--JustifyContent: center;
|
|
19723
|
+
padding-inline: var(--pf-v5-c-nav__scroll-button--button--InlinePadding);
|
|
20399
19724
|
}
|
|
20400
|
-
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button
|
|
19725
|
+
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button :is(button) .pf-v5-c-button__icon {
|
|
20401
19726
|
scale: -1 1;
|
|
20402
19727
|
}
|
|
20403
19728
|
|
|
19729
|
+
.pf-v5-c-nav__scroll-button :is(button) > * {
|
|
19730
|
+
display: inline-block;
|
|
19731
|
+
padding-inline: var(--pf-v5-c-nav__scroll-button--button--icon--InlinePadding);
|
|
19732
|
+
}
|
|
19733
|
+
.pf-v5-c-nav__scroll-button :is(button) > * > * {
|
|
19734
|
+
min-width: var(--pf-v5-c-nav__scroll-button--button--icon--IconSize);
|
|
19735
|
+
}
|
|
20404
19736
|
.pf-v5-c-nav__scroll-button::before {
|
|
20405
19737
|
position: absolute;
|
|
20406
|
-
inset-block
|
|
20407
|
-
inset-
|
|
19738
|
+
inset-block: 0;
|
|
19739
|
+
inset-inline: 0;
|
|
20408
19740
|
content: "";
|
|
20409
|
-
|
|
20410
|
-
border-inline-start-width: var(--pf-v5-c-nav__scroll-button--before--BorderLeftWidth);
|
|
20411
|
-
border-inline-end-width: var(--pf-v5-c-nav__scroll-button--before--BorderRightWidth);
|
|
19741
|
+
outline-offset: var(--pf-v5-c-nav--OutlineOffset);
|
|
20412
19742
|
}
|
|
20413
|
-
.pf-v5-c-nav__scroll-button:
|
|
20414
|
-
|
|
19743
|
+
.pf-v5-c-nav__scroll-button:first-of-type {
|
|
19744
|
+
border-start-start-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
|
|
19745
|
+
border-end-start-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
|
|
20415
19746
|
}
|
|
20416
|
-
.pf-v5-c-nav__scroll-button:
|
|
20417
|
-
|
|
19747
|
+
.pf-v5-c-nav__scroll-button:first-of-type button {
|
|
19748
|
+
--pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
|
|
19749
|
+
--pf-v5-c-button--BorderStartEndRadius: 0;
|
|
19750
|
+
--pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
|
|
19751
|
+
--pf-v5-c-button--BorderEndEndRadius: 0;
|
|
20418
19752
|
}
|
|
20419
|
-
.pf-v5-c-nav__scroll-button:
|
|
20420
|
-
|
|
19753
|
+
.pf-v5-c-nav__scroll-button:first-of-type::before {
|
|
19754
|
+
border-inline-end: var(--pf-v5-c-nav__scroll-button--BorderWidth) solid var(--pf-v5-c-nav__scroll-button--BorderColor);
|
|
20421
19755
|
}
|
|
20422
|
-
.pf-v5-c-nav__scroll-button:
|
|
20423
|
-
|
|
20424
|
-
border-
|
|
19756
|
+
.pf-v5-c-nav__scroll-button:last-of-type {
|
|
19757
|
+
border-start-end-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
|
|
19758
|
+
border-end-end-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
|
|
20425
19759
|
}
|
|
20426
|
-
.pf-v5-c-nav__scroll-button:
|
|
20427
|
-
--pf-v5-c-
|
|
20428
|
-
|
|
20429
|
-
|
|
19760
|
+
.pf-v5-c-nav__scroll-button:last-of-type button {
|
|
19761
|
+
--pf-v5-c-button--BorderStartStartRadius: 0;
|
|
19762
|
+
--pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
|
|
19763
|
+
--pf-v5-c-button--BorderEndStartRadius: 0;
|
|
19764
|
+
--pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
|
|
20430
19765
|
}
|
|
20431
|
-
|
|
20432
|
-
|
|
19766
|
+
.pf-v5-c-nav__scroll-button:last-of-type::before {
|
|
19767
|
+
border-inline-start: var(--pf-v5-c-nav__scroll-button--BorderWidth) solid var(--pf-v5-c-nav__scroll-button--BorderColor);
|
|
20433
19768
|
}
|
|
20434
19769
|
|
|
20435
|
-
.pf-v5-c-
|
|
20436
|
-
|
|
20437
|
-
|
|
20438
|
-
|
|
20439
|
-
--pf-v5-c-nav__scroll-button--before--BorderLeftWidth: var(--pf-v5-c-nav__scroll-button--before--BorderWidth);
|
|
20440
|
-
margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
|
|
20441
|
-
transform: translateX(100%);
|
|
19770
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) {
|
|
19771
|
+
padding: 0;
|
|
19772
|
+
overflow: hidden;
|
|
19773
|
+
border-radius: var(--pf-v5-c-nav--m-horizontal--BorderRadius);
|
|
20442
19774
|
}
|
|
20443
|
-
|
|
20444
|
-
|
|
19775
|
+
.pf-v5-c-nav:where(.pf-m-horizontal),
|
|
19776
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__section,
|
|
19777
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__subnav,
|
|
19778
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list,
|
|
19779
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__item {
|
|
19780
|
+
display: flex;
|
|
20445
19781
|
}
|
|
20446
|
-
|
|
20447
|
-
|
|
20448
|
-
|
|
19782
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list {
|
|
19783
|
+
padding-block: var(--pf-v5-c-nav--m-horizontal__list--PaddingBlock);
|
|
19784
|
+
padding-inline: var(--pf-v5-c-nav--m-horizontal__list--PaddingInline);
|
|
19785
|
+
overflow-x: auto;
|
|
19786
|
+
white-space: nowrap;
|
|
19787
|
+
scroll-snap-type: var(--pf-v5-c-nav__list--ScrollSnapType);
|
|
19788
|
+
-webkit-overflow-scrolling: touch;
|
|
19789
|
+
scrollbar-width: none;
|
|
19790
|
+
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
20449
19791
|
}
|
|
20450
|
-
|
|
20451
|
-
:
|
|
20452
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
19792
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list::-webkit-scrollbar {
|
|
19793
|
+
display: none;
|
|
20453
19794
|
}
|
|
20454
|
-
|
|
20455
|
-
:
|
|
20456
|
-
--pf-v5-c-nav__item--item__link--after--Top: -1px;
|
|
20457
|
-
--pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BorderColor--100);
|
|
20458
|
-
--pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
20459
|
-
--pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
20460
|
-
--pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
20461
|
-
--pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
20462
|
-
--pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-global--BorderColor--100);
|
|
20463
|
-
--pf-v5-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
|
|
20464
|
-
--pf-v5-c-nav__section-title--Color: var(--pf-v5-global--Color--200);
|
|
20465
|
-
--pf-v5-c-nav__section-title--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
|
|
20466
|
-
--pf-v5-c-nav__scroll-button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
|
|
20467
|
-
--pf-v5-c-nav--c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--100);
|
|
20468
|
-
--pf-v5-c-nav__link--hover--before--BorderBottomWidth: 0;
|
|
20469
|
-
--pf-v5-c-nav__link--focus--before--BorderBottomWidth: 0;
|
|
20470
|
-
--pf-v5-c-nav__link--active--before--BorderBottomWidth: 0;
|
|
20471
|
-
--pf-v5-c-nav__link--m-current--before--BorderBottomWidth: 0;
|
|
20472
|
-
}
|
|
20473
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-nav__link::before {
|
|
20474
|
-
inset-block-end: 0;
|
|
19795
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__link {
|
|
19796
|
+
outline-offset: var(--pf-v5-c-nav--OutlineOffset);
|
|
20475
19797
|
}
|
|
20476
|
-
:where(.pf-
|
|
20477
|
-
inset-block-start: var(--pf-v5-c-
|
|
19798
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__link::before {
|
|
19799
|
+
inset-block-start: calc(var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockStart) * -1);
|
|
19800
|
+
inset-block-end: calc(var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd) * -1);
|
|
19801
|
+
inset-inline-start: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
|
|
19802
|
+
inset-inline-end: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
|
|
20478
19803
|
}
|
|
20479
|
-
|
|
20480
|
-
--pf-v5-c-nav__link--
|
|
19804
|
+
.pf-v5-c-nav:where(.pf-m-horizontal).pf-m-subnav {
|
|
19805
|
+
--pf-v5-c-nav__link--PaddingBlockStart: var(--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
|
|
19806
|
+
--pf-v5-c-nav__link--PaddingBlockEnd: var(--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
|
|
19807
|
+
--pf-v5-c-nav__list--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
|
|
19808
|
+
--pf-v5-c-nav__list--PaddingInline: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
|
|
20481
19809
|
}
|
|
20482
|
-
:where(.pf-v5-
|
|
20483
|
-
--pf-v5-c-
|
|
19810
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__scroll-button + .pf-v5-c-nav__list {
|
|
19811
|
+
padding-inline-start: var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart);
|
|
20484
19812
|
}
|
|
20485
|
-
:where(.pf-v5-
|
|
20486
|
-
--pf-v5-c-
|
|
19813
|
+
.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__scroll-button + .pf-v5-c-nav__list > :first-child .pf-v5-c-nav__link::before {
|
|
19814
|
+
inset-inline-start: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1 - var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart));
|
|
20487
19815
|
}
|
|
20488
19816
|
|
|
20489
19817
|
:root {
|