@patternfly/react-core 4.247.0 → 4.247.1

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.
@@ -3252,6 +3252,77 @@ button.pf-c-breadcrumb__link {
3252
3252
  --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
3253
3253
  }
3254
3254
 
3255
+ .pf-c-check {
3256
+ --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
3257
+ --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
3258
+ --pf-c-check__label--Color: var(--pf-global--Color--100);
3259
+ --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
3260
+ --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
3261
+ --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
3262
+ --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
3263
+ --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
3264
+ --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
3265
+ --pf-c-check__description--Color: var(--pf-global--Color--200);
3266
+ --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
3267
+ --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
3268
+ --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
3269
+ --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
3270
+ display: grid;
3271
+ grid-template-columns: auto 1fr;
3272
+ grid-gap: var(--pf-c-check--GridGap);
3273
+ align-items: start;
3274
+ justify-items: start;
3275
+ }
3276
+
3277
+ .pf-c-check.pf-m-standalone {
3278
+ --pf-c-check--GridGap: 0;
3279
+ --pf-c-check__input--Height: auto;
3280
+ --pf-c-check__input--MarginTop: 0;
3281
+ display: inline-grid;
3282
+ line-height: 1;
3283
+ }
3284
+
3285
+ .pf-c-check__label {
3286
+ font-size: var(--pf-c-check__label--FontSize);
3287
+ font-weight: var(--pf-c-check__label--FontWeight);
3288
+ line-height: var(--pf-c-check__label--LineHeight);
3289
+ color: var(--pf-c-check__label--Color);
3290
+ }
3291
+
3292
+ .pf-c-check__input {
3293
+ height: var(--pf-c-check__input--Height);
3294
+ margin-top: var(--pf-c-check__input--MarginTop);
3295
+ }
3296
+
3297
+ .pf-c-check__description {
3298
+ grid-column: 2;
3299
+ font-size: var(--pf-c-check__description--FontSize);
3300
+ color: var(--pf-c-check__description--Color);
3301
+ }
3302
+
3303
+ .pf-c-check__body {
3304
+ grid-column: 2;
3305
+ margin-top: var(--pf-c-check__body--MarginTop);
3306
+ }
3307
+
3308
+ label.pf-c-check, .pf-c-check__label,
3309
+ .pf-c-check__input {
3310
+ cursor: pointer;
3311
+ }
3312
+
3313
+ .pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
3314
+ .pf-c-check__input:disabled,
3315
+ .pf-c-check__input.pf-m-disabled {
3316
+ --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
3317
+ cursor: not-allowed;
3318
+ }
3319
+
3320
+ .pf-c-check__label-required {
3321
+ margin-left: var(--pf-c-check__label-required--MarginLeft);
3322
+ font-size: var(--pf-c-check__label-required--FontSize);
3323
+ color: var(--pf-c-check__label-required--Color);
3324
+ }
3325
+
3255
3326
  .pf-c-chip {
3256
3327
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3257
3328
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -5820,77 +5891,6 @@ button.pf-c-breadcrumb__link {
5820
5891
  --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5821
5892
  }
5822
5893
  }
5823
- .pf-c-check {
5824
- --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
5825
- --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
5826
- --pf-c-check__label--Color: var(--pf-global--Color--100);
5827
- --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
5828
- --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
5829
- --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
5830
- --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
5831
- --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
5832
- --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
5833
- --pf-c-check__description--Color: var(--pf-global--Color--200);
5834
- --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
5835
- --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
5836
- --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
5837
- --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
5838
- display: grid;
5839
- grid-template-columns: auto 1fr;
5840
- grid-gap: var(--pf-c-check--GridGap);
5841
- align-items: start;
5842
- justify-items: start;
5843
- }
5844
-
5845
- .pf-c-check.pf-m-standalone {
5846
- --pf-c-check--GridGap: 0;
5847
- --pf-c-check__input--Height: auto;
5848
- --pf-c-check__input--MarginTop: 0;
5849
- display: inline-grid;
5850
- line-height: 1;
5851
- }
5852
-
5853
- .pf-c-check__label {
5854
- font-size: var(--pf-c-check__label--FontSize);
5855
- font-weight: var(--pf-c-check__label--FontWeight);
5856
- line-height: var(--pf-c-check__label--LineHeight);
5857
- color: var(--pf-c-check__label--Color);
5858
- }
5859
-
5860
- .pf-c-check__input {
5861
- height: var(--pf-c-check__input--Height);
5862
- margin-top: var(--pf-c-check__input--MarginTop);
5863
- }
5864
-
5865
- .pf-c-check__description {
5866
- grid-column: 2;
5867
- font-size: var(--pf-c-check__description--FontSize);
5868
- color: var(--pf-c-check__description--Color);
5869
- }
5870
-
5871
- .pf-c-check__body {
5872
- grid-column: 2;
5873
- margin-top: var(--pf-c-check__body--MarginTop);
5874
- }
5875
-
5876
- label.pf-c-check, .pf-c-check__label,
5877
- .pf-c-check__input {
5878
- cursor: pointer;
5879
- }
5880
-
5881
- .pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
5882
- .pf-c-check__input:disabled,
5883
- .pf-c-check__input.pf-m-disabled {
5884
- --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
5885
- cursor: not-allowed;
5886
- }
5887
-
5888
- .pf-c-check__label-required {
5889
- margin-left: var(--pf-c-check__label-required--MarginLeft);
5890
- font-size: var(--pf-c-check__label-required--FontSize);
5891
- color: var(--pf-c-check__label-required--Color);
5892
- }
5893
-
5894
5894
  .pf-c-divider {
5895
5895
  --pf-hidden-visible--visible--Visibility: visible;
5896
5896
  --pf-hidden-visible--hidden--Display: none;
@@ -9531,178 +9531,499 @@ label.pf-c-input-group__text {
9531
9531
  --pf-c-input-group__text--BackgroundColor: transparent;
9532
9532
  }
9533
9533
 
9534
- .pf-c-sidebar {
9535
- --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9536
- --pf-c-sidebar__main--FlexDirection: column;
9537
- --pf-c-sidebar__main--md--FlexDirection: row;
9538
- --pf-c-sidebar__main--AlignItems: stretch;
9539
- --pf-c-sidebar__main--md--AlignItems: start;
9540
- --pf-c-sidebar__main--child--MarginTop: 0;
9541
- --pf-c-sidebar__main--child--MarginLeft: 0;
9542
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9543
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9544
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
9545
- --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9546
- --pf-c-sidebar--m-stack__main--FlexDirection: column;
9547
- --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9548
- --pf-c-sidebar--m-stack__panel--Position: sticky;
9549
- --pf-c-sidebar--m-stack__panel--Top: 0;
9550
- --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9551
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9552
- --pf-c-sidebar--m-split__main--AlignItems: start;
9553
- --pf-c-sidebar--m-split__main--FlexDirection: row;
9554
- --pf-c-sidebar--m-split__panel--Position: static;
9555
- --pf-c-sidebar--m-split__panel--Top: auto;
9556
- --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9557
- --pf-c-sidebar__panel--FlexBasis--base: auto;
9558
- --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9559
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9560
- --pf-c-sidebar__panel--Top: 0;
9561
- --pf-c-sidebar__panel--md--Top: auto;
9562
- --pf-c-sidebar__panel--Position: sticky;
9563
- --pf-c-sidebar__panel--md--Position: static;
9564
- --pf-c-sidebar__panel--FlexBasis-base: auto;
9565
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9566
- --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9567
- --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9568
- --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9569
- --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9570
- --pf-c-sidebar__panel--Order: 0;
9571
- --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9572
- --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9573
- --pf-c-sidebar__panel--m-sticky--Top: 0;
9574
- --pf-c-sidebar__panel--m-sticky--Position: sticky;
9575
- height: 100%;
9534
+ .pf-c-jump-links {
9535
+ --pf-c-jump-links__list--Display: flex;
9536
+ --pf-c-jump-links__list--Visibility: visible;
9537
+ --pf-c-jump-links__list--PaddingTop: 0;
9538
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9539
+ --pf-c-jump-links__list--PaddingBottom: 0;
9540
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9541
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9542
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9543
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9544
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9545
+ --pf-c-jump-links__list--FlexDirection: row;
9546
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9547
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9548
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9549
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9550
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9551
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9552
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9553
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9554
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9555
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9556
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9557
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9558
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9559
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9560
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9561
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9562
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9563
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9564
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9565
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9566
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9567
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9568
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9569
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9570
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9571
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9572
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9573
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9574
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9575
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9576
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9577
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9578
+ --pf-c-jump-links__label--Display: block;
9579
+ --pf-c-jump-links__label--Visibility: visible;
9580
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9581
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9582
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9583
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9584
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9585
+ --pf-c-jump-links__toggle--Display: none;
9586
+ --pf-c-jump-links__toggle--Visibility: hidden;
9587
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
9588
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9589
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9590
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9591
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9592
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9593
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9594
+ display: flex;
9576
9595
  }
9577
9596
 
9578
- @media (min-width: 768px) {
9579
- .pf-c-sidebar {
9580
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9581
- --pf-c-sidebar__panel--BoxShadow: none;
9582
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9583
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9584
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9585
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9586
- }
9597
+ .pf-c-jump-links.pf-m-center {
9598
+ justify-content: center;
9587
9599
  }
9588
- @media (min-width: 1200px) {
9589
- .pf-c-sidebar {
9590
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9591
- }
9592
- }
9593
- .pf-c-sidebar.pf-m-gutter {
9594
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9595
- --pf-c-sidebar__main--child--MarginLeft: 0;
9600
+
9601
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9602
+ align-items: center;
9596
9603
  }
9597
9604
 
9598
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9599
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9600
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9605
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9606
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9607
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9608
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9609
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9610
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9611
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9612
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9613
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9614
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9615
+ flex-direction: column;
9601
9616
  }
9602
9617
 
9603
- @media (min-width: 768px) {
9604
- .pf-c-sidebar.pf-m-gutter {
9605
- --pf-c-sidebar__main--child--MarginTop: 0;
9606
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9607
- }
9618
+ .pf-c-jump-links.pf-m-expandable {
9619
+ --pf-c-jump-links__list--Display: none;
9620
+ --pf-c-jump-links__list--Visibility: hidden;
9621
+ --pf-c-jump-links__toggle--Display: block;
9622
+ --pf-c-jump-links__toggle--Visibility: visible;
9623
+ --pf-c-jump-links__label--Display: none;
9624
+ --pf-c-jump-links__label--Visibility: hidden;
9608
9625
  }
9609
- .pf-c-sidebar.pf-m-panel-right {
9610
- --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9626
+
9627
+ .pf-c-jump-links.pf-m-non-expandable {
9628
+ --pf-c-jump-links__list--Display: flex;
9629
+ --pf-c-jump-links__list--Visibility: visible;
9630
+ --pf-c-jump-links__toggle--Display: none;
9631
+ --pf-c-jump-links__toggle--Visibility: hidden;
9632
+ --pf-c-jump-links__label--Display: block;
9633
+ --pf-c-jump-links__label--Visibility: visible;
9611
9634
  }
9612
9635
 
9613
- @media (min-width: 768px) {
9614
- .pf-c-sidebar.pf-m-panel-right {
9615
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9636
+ @media (min-width: 576px) {
9637
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9638
+ --pf-c-jump-links__list--Display: none;
9639
+ --pf-c-jump-links__list--Visibility: hidden;
9640
+ --pf-c-jump-links__toggle--Display: block;
9641
+ --pf-c-jump-links__toggle--Visibility: visible;
9642
+ --pf-c-jump-links__label--Display: none;
9643
+ --pf-c-jump-links__label--Visibility: hidden;
9616
9644
  }
9617
- }
9618
- .pf-c-sidebar.pf-m-stack {
9619
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9620
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9621
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9622
- --pf-c-sidebar__main--child--MarginLeft: 0;
9623
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9624
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9625
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9626
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9627
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9628
- }
9629
9645
 
9630
- .pf-c-sidebar.pf-m-split {
9631
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9632
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9633
- --pf-c-sidebar__main--child--MarginTop: 0;
9634
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9635
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9636
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9637
- --pf-c-sidebar__panel--BoxShadow: none;
9638
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9639
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9646
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9647
+ --pf-c-jump-links__list--Display: flex;
9648
+ --pf-c-jump-links__list--Visibility: visible;
9649
+ --pf-c-jump-links__toggle--Display: none;
9650
+ --pf-c-jump-links__toggle--Visibility: hidden;
9651
+ --pf-c-jump-links__label--Display: block;
9652
+ --pf-c-jump-links__label--Visibility: visible;
9653
+ }
9640
9654
  }
9655
+ @media (min-width: 768px) {
9656
+ .pf-c-jump-links.pf-m-expandable-on-md {
9657
+ --pf-c-jump-links__list--Display: none;
9658
+ --pf-c-jump-links__list--Visibility: hidden;
9659
+ --pf-c-jump-links__toggle--Display: block;
9660
+ --pf-c-jump-links__toggle--Visibility: visible;
9661
+ --pf-c-jump-links__label--Display: none;
9662
+ --pf-c-jump-links__label--Visibility: hidden;
9663
+ }
9641
9664
 
9642
- .pf-c-sidebar__main {
9643
- display: flex;
9644
- flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9645
- align-items: var(--pf-c-sidebar__main--AlignItems);
9665
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9666
+ --pf-c-jump-links__list--Display: flex;
9667
+ --pf-c-jump-links__list--Visibility: visible;
9668
+ --pf-c-jump-links__toggle--Display: none;
9669
+ --pf-c-jump-links__toggle--Visibility: hidden;
9670
+ --pf-c-jump-links__label--Display: block;
9671
+ --pf-c-jump-links__label--Visibility: visible;
9672
+ }
9646
9673
  }
9674
+ @media (min-width: 992px) {
9675
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9676
+ --pf-c-jump-links__list--Display: none;
9677
+ --pf-c-jump-links__list--Visibility: hidden;
9678
+ --pf-c-jump-links__toggle--Display: block;
9679
+ --pf-c-jump-links__toggle--Visibility: visible;
9680
+ --pf-c-jump-links__label--Display: none;
9681
+ --pf-c-jump-links__label--Visibility: hidden;
9682
+ }
9647
9683
 
9648
- .pf-c-sidebar__panel {
9649
- position: var(--pf-c-sidebar__panel--Position);
9650
- top: var(--pf-c-sidebar__panel--Top);
9651
- z-index: var(--pf-c-sidebar__panel--ZIndex);
9652
- flex-shrink: 0;
9653
- flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9654
- order: var(--pf-c-sidebar__panel--Order);
9655
- background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9656
- box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
9684
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9685
+ --pf-c-jump-links__list--Display: flex;
9686
+ --pf-c-jump-links__list--Visibility: visible;
9687
+ --pf-c-jump-links__toggle--Display: none;
9688
+ --pf-c-jump-links__toggle--Visibility: hidden;
9689
+ --pf-c-jump-links__label--Display: block;
9690
+ --pf-c-jump-links__label--Visibility: visible;
9691
+ }
9657
9692
  }
9693
+ @media (min-width: 1200px) {
9694
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9695
+ --pf-c-jump-links__list--Display: none;
9696
+ --pf-c-jump-links__list--Visibility: hidden;
9697
+ --pf-c-jump-links__toggle--Display: block;
9698
+ --pf-c-jump-links__toggle--Visibility: visible;
9699
+ --pf-c-jump-links__label--Display: none;
9700
+ --pf-c-jump-links__label--Visibility: hidden;
9701
+ }
9658
9702
 
9659
- .pf-c-sidebar__panel.pf-m-sticky {
9660
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9661
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
9703
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9704
+ --pf-c-jump-links__list--Display: flex;
9705
+ --pf-c-jump-links__list--Visibility: visible;
9706
+ --pf-c-jump-links__toggle--Display: none;
9707
+ --pf-c-jump-links__toggle--Visibility: hidden;
9708
+ --pf-c-jump-links__label--Display: block;
9709
+ --pf-c-jump-links__label--Visibility: visible;
9710
+ }
9662
9711
  }
9712
+ @media (min-width: 1450px) {
9713
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9714
+ --pf-c-jump-links__list--Display: none;
9715
+ --pf-c-jump-links__list--Visibility: hidden;
9716
+ --pf-c-jump-links__toggle--Display: block;
9717
+ --pf-c-jump-links__toggle--Visibility: visible;
9718
+ --pf-c-jump-links__label--Display: none;
9719
+ --pf-c-jump-links__label--Visibility: hidden;
9720
+ }
9663
9721
 
9664
- .pf-c-sidebar__panel.pf-m-static {
9665
- --pf-c-sidebar__panel--Position: static;
9666
- --pf-c-sidebar__panel--Top: auto;
9722
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9723
+ --pf-c-jump-links__list--Display: flex;
9724
+ --pf-c-jump-links__list--Visibility: visible;
9725
+ --pf-c-jump-links__toggle--Display: none;
9726
+ --pf-c-jump-links__toggle--Visibility: hidden;
9727
+ --pf-c-jump-links__label--Display: block;
9728
+ --pf-c-jump-links__label--Visibility: visible;
9729
+ }
9667
9730
  }
9668
-
9669
- .pf-c-sidebar__content {
9670
- flex-grow: 1;
9671
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
9731
+ .pf-c-jump-links.pf-m-expanded {
9732
+ --pf-c-jump-links__list--Display: flex;
9733
+ --pf-c-jump-links__list--Visibility: visible;
9734
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9735
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9736
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9672
9737
  }
9673
9738
 
9674
- .pf-c-sidebar__content.pf-m-no-background {
9675
- --pf-c-sidebar__content--BackgroundColor: transparent;
9739
+ .pf-c-jump-links__list {
9740
+ position: relative;
9741
+ display: var(--pf-c-jump-links__list--Display);
9742
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9743
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9744
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9745
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9746
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9747
+ visibility: var(--pf-c-jump-links__list--Visibility);
9676
9748
  }
9677
9749
 
9678
- .pf-c-sidebar.pf-m-no-background,
9679
- .pf-c-sidebar__panel.pf-m-no-background,
9680
- .pf-c-sidebar__content.pf-m-no-background {
9681
- background-color: transparent;
9750
+ .pf-c-jump-links__list::before {
9751
+ position: absolute;
9752
+ top: 0;
9753
+ right: 0;
9754
+ bottom: 0;
9755
+ left: 0;
9756
+ pointer-events: none;
9757
+ content: "";
9758
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9759
+ border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9682
9760
  }
9683
9761
 
9684
- .pf-c-sidebar__panel.pf-m-width-default {
9685
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9762
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9763
+ --pf-c-jump-links__list--PaddingTop: 0;
9764
+ --pf-c-jump-links__list--PaddingBottom: 0;
9765
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9766
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9767
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9768
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9686
9769
  }
9687
9770
 
9688
- .pf-c-sidebar__panel.pf-m-width-25 {
9689
- --pf-c-sidebar__panel--FlexBasis: 25%;
9771
+ .pf-c-jump-links__link {
9772
+ position: relative;
9773
+ display: flex;
9774
+ flex: 1;
9775
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9776
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9777
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9778
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9779
+ text-decoration: none;
9780
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9690
9781
  }
9691
9782
 
9692
- .pf-c-sidebar__panel.pf-m-width-33 {
9693
- --pf-c-sidebar__panel--FlexBasis: 33%;
9783
+ .pf-c-jump-links__link:hover {
9784
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9694
9785
  }
9695
9786
 
9696
- .pf-c-sidebar__panel.pf-m-width-50 {
9697
- --pf-c-sidebar__panel--FlexBasis: 50%;
9787
+ .pf-c-jump-links__link:focus {
9788
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9698
9789
  }
9699
9790
 
9700
- .pf-c-sidebar__panel.pf-m-width-66 {
9701
- --pf-c-sidebar__panel--FlexBasis: 66%;
9791
+ .pf-c-jump-links__link::before {
9792
+ position: absolute;
9793
+ top: 0;
9794
+ right: 0;
9795
+ bottom: 0;
9796
+ left: 0;
9797
+ pointer-events: none;
9798
+ content: "";
9799
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9800
+ border-style: solid;
9801
+ border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9702
9802
  }
9703
9803
 
9704
- .pf-c-sidebar__panel.pf-m-width-75 {
9705
- --pf-c-sidebar__panel--FlexBasis: 75%;
9804
+ .pf-c-jump-links__item {
9805
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9806
+ }
9807
+
9808
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9809
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9810
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9811
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9812
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9813
+ }
9814
+
9815
+ .pf-c-jump-links__link-text {
9816
+ color: var(--pf-c-jump-links__link-text--Color);
9817
+ }
9818
+
9819
+ .pf-c-jump-links__label {
9820
+ display: var(--pf-c-jump-links__label--Display);
9821
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9822
+ visibility: var(--pf-c-jump-links__label--Visibility);
9823
+ }
9824
+
9825
+ .pf-c-jump-links__main {
9826
+ display: flex;
9827
+ flex-direction: column;
9828
+ }
9829
+
9830
+ .pf-c-jump-links__toggle {
9831
+ display: var(--pf-c-jump-links__toggle--Display);
9832
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9833
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9834
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9835
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
9836
+ }
9837
+
9838
+ .pf-c-jump-links__toggle .pf-c-button {
9839
+ display: flex;
9840
+ align-items: center;
9841
+ }
9842
+
9843
+ .pf-c-jump-links__toggle-icon {
9844
+ display: inline-block;
9845
+ color: var(--pf-c-jump-links__toggle-icon--Color);
9846
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
9847
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9848
+ }
9849
+
9850
+ .pf-c-jump-links__toggle-text {
9851
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9852
+ color: var(--pf-c-jump-links__toggle-text--Color);
9853
+ }
9854
+
9855
+ .pf-c-sidebar {
9856
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9857
+ --pf-c-sidebar__main--FlexDirection: column;
9858
+ --pf-c-sidebar__main--md--FlexDirection: row;
9859
+ --pf-c-sidebar__main--AlignItems: stretch;
9860
+ --pf-c-sidebar__main--md--AlignItems: start;
9861
+ --pf-c-sidebar__main--child--MarginTop: 0;
9862
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9863
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9864
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9865
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
9866
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9867
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
9868
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9869
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
9870
+ --pf-c-sidebar--m-stack__panel--Top: 0;
9871
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9872
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9873
+ --pf-c-sidebar--m-split__main--AlignItems: start;
9874
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
9875
+ --pf-c-sidebar--m-split__panel--Position: static;
9876
+ --pf-c-sidebar--m-split__panel--Top: auto;
9877
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9878
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
9879
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9880
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9881
+ --pf-c-sidebar__panel--Top: 0;
9882
+ --pf-c-sidebar__panel--md--Top: auto;
9883
+ --pf-c-sidebar__panel--Position: sticky;
9884
+ --pf-c-sidebar__panel--md--Position: static;
9885
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
9886
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9887
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9888
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9889
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9890
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9891
+ --pf-c-sidebar__panel--Order: 0;
9892
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9893
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9894
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
9895
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
9896
+ height: 100%;
9897
+ }
9898
+
9899
+ @media (min-width: 768px) {
9900
+ .pf-c-sidebar {
9901
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9902
+ --pf-c-sidebar__panel--BoxShadow: none;
9903
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9904
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9905
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9906
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9907
+ }
9908
+ }
9909
+ @media (min-width: 1200px) {
9910
+ .pf-c-sidebar {
9911
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9912
+ }
9913
+ }
9914
+ .pf-c-sidebar.pf-m-gutter {
9915
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9916
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9917
+ }
9918
+
9919
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9920
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9921
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9922
+ }
9923
+
9924
+ @media (min-width: 768px) {
9925
+ .pf-c-sidebar.pf-m-gutter {
9926
+ --pf-c-sidebar__main--child--MarginTop: 0;
9927
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9928
+ }
9929
+ }
9930
+ .pf-c-sidebar.pf-m-panel-right {
9931
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9932
+ }
9933
+
9934
+ @media (min-width: 768px) {
9935
+ .pf-c-sidebar.pf-m-panel-right {
9936
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9937
+ }
9938
+ }
9939
+ .pf-c-sidebar.pf-m-stack {
9940
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9941
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9942
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9943
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9944
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9945
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9946
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9947
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9948
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9949
+ }
9950
+
9951
+ .pf-c-sidebar.pf-m-split {
9952
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9953
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9954
+ --pf-c-sidebar__main--child--MarginTop: 0;
9955
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9956
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9957
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9958
+ --pf-c-sidebar__panel--BoxShadow: none;
9959
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9960
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9961
+ }
9962
+
9963
+ .pf-c-sidebar__main {
9964
+ display: flex;
9965
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9966
+ align-items: var(--pf-c-sidebar__main--AlignItems);
9967
+ }
9968
+
9969
+ .pf-c-sidebar__panel {
9970
+ position: var(--pf-c-sidebar__panel--Position);
9971
+ top: var(--pf-c-sidebar__panel--Top);
9972
+ z-index: var(--pf-c-sidebar__panel--ZIndex);
9973
+ flex-shrink: 0;
9974
+ flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9975
+ order: var(--pf-c-sidebar__panel--Order);
9976
+ background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9977
+ box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
9978
+ }
9979
+
9980
+ .pf-c-sidebar__panel.pf-m-sticky {
9981
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9982
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
9983
+ }
9984
+
9985
+ .pf-c-sidebar__panel.pf-m-static {
9986
+ --pf-c-sidebar__panel--Position: static;
9987
+ --pf-c-sidebar__panel--Top: auto;
9988
+ }
9989
+
9990
+ .pf-c-sidebar__content {
9991
+ flex-grow: 1;
9992
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
9993
+ }
9994
+
9995
+ .pf-c-sidebar__content.pf-m-no-background {
9996
+ --pf-c-sidebar__content--BackgroundColor: transparent;
9997
+ }
9998
+
9999
+ .pf-c-sidebar.pf-m-no-background,
10000
+ .pf-c-sidebar__panel.pf-m-no-background,
10001
+ .pf-c-sidebar__content.pf-m-no-background {
10002
+ background-color: transparent;
10003
+ }
10004
+
10005
+ .pf-c-sidebar__panel.pf-m-width-default {
10006
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10007
+ }
10008
+
10009
+ .pf-c-sidebar__panel.pf-m-width-25 {
10010
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10011
+ }
10012
+
10013
+ .pf-c-sidebar__panel.pf-m-width-33 {
10014
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10015
+ }
10016
+
10017
+ .pf-c-sidebar__panel.pf-m-width-50 {
10018
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10019
+ }
10020
+
10021
+ .pf-c-sidebar__panel.pf-m-width-66 {
10022
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10023
+ }
10024
+
10025
+ .pf-c-sidebar__panel.pf-m-width-75 {
10026
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9706
10027
  }
9707
10028
 
9708
10029
  .pf-c-sidebar__panel.pf-m-width-100 {
@@ -9854,744 +10175,423 @@ label.pf-c-input-group__text {
9854
10175
  --pf-c-sidebar__panel--FlexBasis: 100%;
9855
10176
  }
9856
10177
  }
9857
- .pf-c-jump-links {
9858
- --pf-c-jump-links__list--Display: flex;
9859
- --pf-c-jump-links__list--Visibility: visible;
9860
- --pf-c-jump-links__list--PaddingTop: 0;
9861
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9862
- --pf-c-jump-links__list--PaddingBottom: 0;
9863
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9864
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9865
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9866
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9867
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9868
- --pf-c-jump-links__list--FlexDirection: row;
9869
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9870
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9871
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9872
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9873
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9874
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9875
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9876
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9877
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9878
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9879
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9880
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9881
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9882
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9883
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9884
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9885
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9886
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9887
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9888
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9889
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9890
- --pf-c-jump-links__link--before--BorderColor: transparent;
9891
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9892
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9893
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9894
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9895
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9896
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9897
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9898
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9899
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9900
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9901
- --pf-c-jump-links__label--Display: block;
9902
- --pf-c-jump-links__label--Visibility: visible;
9903
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9904
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9905
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9906
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9907
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9908
- --pf-c-jump-links__toggle--Display: none;
9909
- --pf-c-jump-links__toggle--Visibility: hidden;
9910
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
9911
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9912
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9913
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9914
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9915
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9916
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9917
- display: flex;
9918
- }
9919
-
9920
- .pf-c-jump-links.pf-m-center {
9921
- justify-content: center;
10178
+ .pf-c-label {
10179
+ --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10180
+ --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
10181
+ --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
10182
+ --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
10183
+ --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
10184
+ --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
10185
+ --pf-c-label--Color: var(--pf-global--Color--100);
10186
+ --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
10187
+ --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10188
+ --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
10189
+ --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
10190
+ --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10191
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
10192
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10193
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10194
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
10195
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
10196
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10197
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10198
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10199
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10200
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
10201
+ --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
10202
+ --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
10203
+ --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
10204
+ --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
10205
+ --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
10206
+ --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
10207
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
10208
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10209
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10210
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
10211
+ --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
10212
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
10213
+ --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10214
+ --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
10215
+ --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
10216
+ --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
10217
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
10218
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10219
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10220
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
10221
+ --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
10222
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
10223
+ --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
10224
+ --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
10225
+ --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
10226
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
10227
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
10228
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10229
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10230
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
10231
+ --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
10232
+ --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
10233
+ --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
10234
+ --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10235
+ --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10236
+ --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
10237
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
10238
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10239
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10240
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
10241
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
10242
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
10243
+ --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10244
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
10245
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
10246
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
10247
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
10248
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10249
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10250
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
10251
+ --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
10252
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
10253
+ --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10254
+ --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
10255
+ --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
10256
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
10257
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
10258
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10259
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10260
+ --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
10261
+ --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
10262
+ --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
10263
+ --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
10264
+ --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
10265
+ --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
10266
+ --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
10267
+ --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
10268
+ --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10269
+ --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10270
+ --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
10271
+ --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10272
+ --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10273
+ --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
10274
+ --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10275
+ --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
10276
+ --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10277
+ --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
10278
+ --pf-c-label--m-compact--PaddingTop: 0;
10279
+ --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
10280
+ --pf-c-label--m-compact--PaddingBottom: 0;
10281
+ --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
10282
+ --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
10283
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
10284
+ --pf-c-label__content--Color: var(--pf-global--Color--100);
10285
+ --pf-c-label__content--MaxWidth: 100%;
10286
+ --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
10287
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
10288
+ --pf-c-label__text--MaxWidth: 16ch;
10289
+ --pf-c-label__icon--Color: var(--pf-global--Color--100);
10290
+ --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
10291
+ --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
10292
+ --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10293
+ --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10294
+ --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10295
+ --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
10296
+ --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
10297
+ --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
10298
+ --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
10299
+ --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
10300
+ --pf-c-label--m-editable--Cursor: pointer;
10301
+ --pf-c-label--m-editable--TextDecoration: underline;
10302
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
10303
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
10304
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
10305
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
10306
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
10307
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
10308
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10309
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
10310
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10311
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10312
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10313
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10314
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
10315
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
10316
+ --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
10317
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
10318
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
10319
+ position: relative;
10320
+ padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
10321
+ font-size: var(--pf-c-label--FontSize);
10322
+ color: var(--pf-c-label--Color);
10323
+ white-space: nowrap;
10324
+ background-color: var(--pf-c-label--BackgroundColor);
10325
+ border: 0;
10326
+ border-radius: var(--pf-c-label--BorderRadius);
9922
10327
  }
9923
10328
 
9924
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9925
- align-items: center;
10329
+ .pf-c-label.pf-m-compact {
10330
+ --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
10331
+ --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
10332
+ --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
10333
+ --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
10334
+ --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
10335
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
9926
10336
  }
9927
10337
 
9928
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9929
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9930
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9931
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9932
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9933
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9934
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9935
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9936
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9937
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9938
- flex-direction: column;
10338
+ .pf-c-label.pf-m-blue {
10339
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
10340
+ --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
10341
+ --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
10342
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10343
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
10344
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
10345
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
10346
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
10347
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
10348
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
10349
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10350
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10351
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9939
10352
  }
9940
10353
 
9941
- .pf-c-jump-links.pf-m-expandable {
9942
- --pf-c-jump-links__list--Display: none;
9943
- --pf-c-jump-links__list--Visibility: hidden;
9944
- --pf-c-jump-links__toggle--Display: block;
9945
- --pf-c-jump-links__toggle--Visibility: visible;
9946
- --pf-c-jump-links__label--Display: none;
9947
- --pf-c-jump-links__label--Visibility: hidden;
10354
+ .pf-c-label.pf-m-green {
10355
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
10356
+ --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
10357
+ --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
10358
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10359
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
10360
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
10361
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
10362
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
10363
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
10364
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
10365
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10366
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10367
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9948
10368
  }
9949
10369
 
9950
- .pf-c-jump-links.pf-m-non-expandable {
9951
- --pf-c-jump-links__list--Display: flex;
9952
- --pf-c-jump-links__list--Visibility: visible;
9953
- --pf-c-jump-links__toggle--Display: none;
9954
- --pf-c-jump-links__toggle--Visibility: hidden;
9955
- --pf-c-jump-links__label--Display: block;
9956
- --pf-c-jump-links__label--Visibility: visible;
10370
+ .pf-c-label.pf-m-orange {
10371
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
10372
+ --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
10373
+ --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
10374
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10375
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
10376
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
10377
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
10378
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
10379
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
10380
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
10381
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10382
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10383
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9957
10384
  }
9958
10385
 
9959
- @media (min-width: 576px) {
9960
- .pf-c-jump-links.pf-m-expandable-on-sm {
9961
- --pf-c-jump-links__list--Display: none;
9962
- --pf-c-jump-links__list--Visibility: hidden;
9963
- --pf-c-jump-links__toggle--Display: block;
9964
- --pf-c-jump-links__toggle--Visibility: visible;
9965
- --pf-c-jump-links__label--Display: none;
9966
- --pf-c-jump-links__label--Visibility: hidden;
9967
- }
9968
-
9969
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9970
- --pf-c-jump-links__list--Display: flex;
9971
- --pf-c-jump-links__list--Visibility: visible;
9972
- --pf-c-jump-links__toggle--Display: none;
9973
- --pf-c-jump-links__toggle--Visibility: hidden;
9974
- --pf-c-jump-links__label--Display: block;
9975
- --pf-c-jump-links__label--Visibility: visible;
9976
- }
10386
+ .pf-c-label.pf-m-red {
10387
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10388
+ --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10389
+ --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10390
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10391
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10392
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10393
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10394
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10395
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10396
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10397
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10398
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10399
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9977
10400
  }
9978
- @media (min-width: 768px) {
9979
- .pf-c-jump-links.pf-m-expandable-on-md {
9980
- --pf-c-jump-links__list--Display: none;
9981
- --pf-c-jump-links__list--Visibility: hidden;
9982
- --pf-c-jump-links__toggle--Display: block;
9983
- --pf-c-jump-links__toggle--Visibility: visible;
9984
- --pf-c-jump-links__label--Display: none;
9985
- --pf-c-jump-links__label--Visibility: hidden;
9986
- }
9987
10401
 
9988
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9989
- --pf-c-jump-links__list--Display: flex;
9990
- --pf-c-jump-links__list--Visibility: visible;
9991
- --pf-c-jump-links__toggle--Display: none;
9992
- --pf-c-jump-links__toggle--Visibility: hidden;
9993
- --pf-c-jump-links__label--Display: block;
9994
- --pf-c-jump-links__label--Visibility: visible;
9995
- }
10402
+ .pf-c-label.pf-m-purple {
10403
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
10404
+ --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
10405
+ --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
10406
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10407
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
10408
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
10409
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
10410
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
10411
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
10412
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
10413
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10414
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10415
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9996
10416
  }
9997
- @media (min-width: 992px) {
9998
- .pf-c-jump-links.pf-m-expandable-on-lg {
9999
- --pf-c-jump-links__list--Display: none;
10000
- --pf-c-jump-links__list--Visibility: hidden;
10001
- --pf-c-jump-links__toggle--Display: block;
10002
- --pf-c-jump-links__toggle--Visibility: visible;
10003
- --pf-c-jump-links__label--Display: none;
10004
- --pf-c-jump-links__label--Visibility: hidden;
10005
- }
10006
10417
 
10007
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
10008
- --pf-c-jump-links__list--Display: flex;
10009
- --pf-c-jump-links__list--Visibility: visible;
10010
- --pf-c-jump-links__toggle--Display: none;
10011
- --pf-c-jump-links__toggle--Visibility: hidden;
10012
- --pf-c-jump-links__label--Display: block;
10013
- --pf-c-jump-links__label--Visibility: visible;
10014
- }
10418
+ .pf-c-label.pf-m-cyan {
10419
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
10420
+ --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
10421
+ --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
10422
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10423
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
10424
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
10425
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
10426
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
10427
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
10428
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
10429
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10430
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10431
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10015
10432
  }
10016
- @media (min-width: 1200px) {
10017
- .pf-c-jump-links.pf-m-expandable-on-xl {
10018
- --pf-c-jump-links__list--Display: none;
10019
- --pf-c-jump-links__list--Visibility: hidden;
10020
- --pf-c-jump-links__toggle--Display: block;
10021
- --pf-c-jump-links__toggle--Visibility: visible;
10022
- --pf-c-jump-links__label--Display: none;
10023
- --pf-c-jump-links__label--Visibility: hidden;
10024
- }
10025
10433
 
10026
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
10027
- --pf-c-jump-links__list--Display: flex;
10028
- --pf-c-jump-links__list--Visibility: visible;
10029
- --pf-c-jump-links__toggle--Display: none;
10030
- --pf-c-jump-links__toggle--Visibility: hidden;
10031
- --pf-c-jump-links__label--Display: block;
10032
- --pf-c-jump-links__label--Visibility: visible;
10033
- }
10434
+ .pf-c-label.pf-m-gold {
10435
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
10436
+ --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
10437
+ --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
10438
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10439
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
10440
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
10441
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
10442
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
10443
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
10444
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
10445
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10446
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10447
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10034
10448
  }
10035
- @media (min-width: 1450px) {
10036
- .pf-c-jump-links.pf-m-expandable-on-2xl {
10037
- --pf-c-jump-links__list--Display: none;
10038
- --pf-c-jump-links__list--Visibility: hidden;
10039
- --pf-c-jump-links__toggle--Display: block;
10040
- --pf-c-jump-links__toggle--Visibility: visible;
10041
- --pf-c-jump-links__label--Display: none;
10042
- --pf-c-jump-links__label--Visibility: hidden;
10043
- }
10044
10449
 
10045
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10046
- --pf-c-jump-links__list--Display: flex;
10047
- --pf-c-jump-links__list--Visibility: visible;
10048
- --pf-c-jump-links__toggle--Display: none;
10049
- --pf-c-jump-links__toggle--Visibility: hidden;
10050
- --pf-c-jump-links__label--Display: block;
10051
- --pf-c-jump-links__label--Visibility: visible;
10052
- }
10053
- }
10054
- .pf-c-jump-links.pf-m-expanded {
10055
- --pf-c-jump-links__list--Display: flex;
10056
- --pf-c-jump-links__list--Visibility: visible;
10057
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10058
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10059
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10450
+ .pf-c-label.pf-m-outline {
10451
+ --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
10452
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
10453
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10454
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
10455
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10456
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10457
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10060
10458
  }
10061
10459
 
10062
- .pf-c-jump-links__list {
10063
- position: relative;
10064
- display: var(--pf-c-jump-links__list--Display);
10065
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10066
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
10067
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
10068
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10069
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10070
- visibility: var(--pf-c-jump-links__list--Visibility);
10460
+ .pf-c-label.pf-m-overflow:hover,
10461
+ .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
10462
+ .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
10463
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
10464
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
10071
10465
  }
10072
10466
 
10073
- .pf-c-jump-links__list::before {
10074
- position: absolute;
10075
- top: 0;
10076
- right: 0;
10077
- bottom: 0;
10078
- left: 0;
10079
- pointer-events: none;
10080
- content: "";
10081
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
10082
- border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
10467
+ .pf-c-label.pf-m-overflow:focus,
10468
+ .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
10469
+ .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
10470
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
10471
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
10083
10472
  }
10084
10473
 
10085
- .pf-c-jump-links__list .pf-c-jump-links__list {
10086
- --pf-c-jump-links__list--PaddingTop: 0;
10087
- --pf-c-jump-links__list--PaddingBottom: 0;
10088
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10089
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10090
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10091
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10474
+ .pf-c-label.pf-m-editable {
10475
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10476
+ cursor: var(--pf-c-label--m-editable--Cursor);
10477
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10478
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10479
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10480
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10481
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10482
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10483
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10484
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10485
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10486
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10487
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10488
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10489
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10092
10490
  }
10093
10491
 
10094
- .pf-c-jump-links__link {
10095
- position: relative;
10096
- display: flex;
10097
- flex: 1;
10098
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
10099
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
10100
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10101
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10102
- text-decoration: none;
10103
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10492
+ .pf-c-label.pf-m-editable:hover {
10493
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10104
10494
  }
10105
10495
 
10106
- .pf-c-jump-links__link:hover {
10107
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10496
+ .pf-c-label.pf-m-editable:focus {
10497
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10108
10498
  }
10109
10499
 
10110
- .pf-c-jump-links__link:focus {
10111
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10500
+ .pf-c-label.pf-m-editable-active {
10501
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10502
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10503
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
10112
10504
  }
10113
10505
 
10114
- .pf-c-jump-links__link::before {
10115
- position: absolute;
10116
- top: 0;
10117
- right: 0;
10118
- bottom: 0;
10119
- left: 0;
10120
- pointer-events: none;
10121
- content: "";
10122
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
10123
- border-style: solid;
10124
- border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
10506
+ .pf-c-label.pf-m-editable-active .pf-c-button {
10507
+ visibility: hidden;
10125
10508
  }
10126
10509
 
10127
- .pf-c-jump-links__item {
10128
- --pf-c-jump-links__list--before--BorderColor: transparent;
10510
+ .pf-c-label .pf-c-button {
10511
+ --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
10512
+ --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
10513
+ --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
10514
+ --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
10515
+ --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
10516
+ margin-top: var(--pf-c-label__c-button--MarginTop);
10517
+ margin-right: var(--pf-c-label__c-button--MarginRight);
10518
+ margin-bottom: var(--pf-c-label__c-button--MarginBottom);
10519
+ margin-left: var(--pf-c-label__c-button--MarginLeft);
10129
10520
  }
10130
10521
 
10131
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10132
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10133
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10134
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10135
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10522
+ .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
10523
+ --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
10524
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
10525
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
10526
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
10527
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
10528
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
10529
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
10530
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
10136
10531
  }
10137
10532
 
10138
- .pf-c-jump-links__link-text {
10139
- color: var(--pf-c-jump-links__link-text--Color);
10533
+ .pf-c-label,
10534
+ .pf-c-label__content {
10535
+ display: inline-flex;
10536
+ align-items: center;
10140
10537
  }
10141
10538
 
10142
- .pf-c-jump-links__label {
10143
- display: var(--pf-c-jump-links__label--Display);
10144
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10145
- visibility: var(--pf-c-jump-links__label--Visibility);
10539
+ .pf-c-label__text {
10540
+ overflow: hidden;
10541
+ text-overflow: ellipsis;
10542
+ white-space: nowrap;
10543
+ max-width: var(--pf-c-label__text--MaxWidth);
10146
10544
  }
10147
10545
 
10148
- .pf-c-jump-links__main {
10149
- display: flex;
10150
- flex-direction: column;
10546
+ .pf-c-label__content {
10547
+ overflow: hidden;
10548
+ text-overflow: ellipsis;
10549
+ white-space: nowrap;
10550
+ max-width: var(--pf-c-label__content--MaxWidth);
10551
+ color: var(--pf-c-label__content--Color);
10552
+ border-width: 0;
10151
10553
  }
10152
10554
 
10153
- .pf-c-jump-links__toggle {
10154
- display: var(--pf-c-jump-links__toggle--Display);
10155
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10156
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10157
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10158
- visibility: var(--pf-c-jump-links__toggle--Visibility);
10555
+ .pf-c-label__content::before {
10556
+ position: absolute;
10557
+ top: 0;
10558
+ right: 0;
10559
+ bottom: 0;
10560
+ left: 0;
10561
+ pointer-events: none;
10562
+ content: "";
10563
+ border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10564
+ border-radius: var(--pf-c-label--BorderRadius);
10159
10565
  }
10160
10566
 
10161
- .pf-c-jump-links__toggle .pf-c-button {
10162
- display: flex;
10163
- align-items: center;
10567
+ a.pf-c-label__content,
10568
+ button.pf-c-label__content {
10569
+ cursor: pointer;
10570
+ border: none;
10164
10571
  }
10165
10572
 
10166
- .pf-c-jump-links__toggle-icon {
10167
- display: inline-block;
10168
- color: var(--pf-c-jump-links__toggle-icon--Color);
10169
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
10170
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10573
+ a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10574
+ button.pf-c-label__content,
10575
+ button.pf-c-label__content:hover,
10576
+ button.pf-c-label__content:focus {
10577
+ text-decoration: none;
10171
10578
  }
10172
10579
 
10173
- .pf-c-jump-links__toggle-text {
10174
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10175
- color: var(--pf-c-jump-links__toggle-text--Color);
10580
+ a.pf-c-label__content:hover,
10581
+ button.pf-c-label__content:hover {
10582
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10583
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10176
10584
  }
10177
10585
 
10178
- .pf-c-label {
10179
- --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10180
- --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
10181
- --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
10182
- --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
10183
- --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
10184
- --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
10185
- --pf-c-label--Color: var(--pf-global--Color--100);
10186
- --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
10187
- --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10188
- --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
10189
- --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
10190
- --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10191
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
10192
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10193
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10194
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
10195
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
10196
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10197
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10198
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10199
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10200
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
10201
- --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
10202
- --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
10203
- --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
10204
- --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
10205
- --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
10206
- --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
10207
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
10208
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10209
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10210
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
10211
- --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
10212
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
10213
- --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10214
- --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
10215
- --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
10216
- --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
10217
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
10218
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10219
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10220
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
10221
- --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
10222
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
10223
- --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
10224
- --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
10225
- --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
10226
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
10227
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
10228
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10229
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10230
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
10231
- --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
10232
- --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
10233
- --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
10234
- --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10235
- --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10236
- --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
10237
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
10238
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10239
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10240
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
10241
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
10242
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
10243
- --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10244
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
10245
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
10246
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
10247
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
10248
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10249
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10250
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
10251
- --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
10252
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
10253
- --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10254
- --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
10255
- --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
10256
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
10257
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
10258
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10259
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10260
- --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
10261
- --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
10262
- --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
10263
- --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
10264
- --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
10265
- --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
10266
- --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
10267
- --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
10268
- --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10269
- --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10270
- --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
10271
- --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
10272
- --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10273
- --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
10274
- --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
10275
- --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
10276
- --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
10277
- --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
10278
- --pf-c-label--m-compact--PaddingTop: 0;
10279
- --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
10280
- --pf-c-label--m-compact--PaddingBottom: 0;
10281
- --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
10282
- --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
10283
- --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
10284
- --pf-c-label__content--Color: var(--pf-global--Color--100);
10285
- --pf-c-label__content--MaxWidth: 100%;
10286
- --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
10287
- --pf-c-label--m-editable__content--MaxWidth: 16ch;
10288
- --pf-c-label__text--MaxWidth: 16ch;
10289
- --pf-c-label__icon--Color: var(--pf-global--Color--100);
10290
- --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
10291
- --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
10292
- --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10293
- --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10294
- --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10295
- --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
10296
- --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
10297
- --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
10298
- --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
10299
- --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
10300
- --pf-c-label--m-editable--Cursor: pointer;
10301
- --pf-c-label--m-editable--TextDecoration: underline;
10302
- --pf-c-label--m-editable--TextDecorationStyle: dashed;
10303
- --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
10304
- --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
10305
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
10306
- --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
10307
- --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
10308
- --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10309
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
10310
- --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10311
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
10312
- --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10313
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
10314
- --pf-c-label--m-editable--m-editable-active--Cursor: auto;
10315
- --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
10316
- --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
10317
- --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
10318
- --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
10319
- position: relative;
10320
- padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
10321
- font-size: var(--pf-c-label--FontSize);
10322
- color: var(--pf-c-label--Color);
10323
- white-space: nowrap;
10324
- background-color: var(--pf-c-label--BackgroundColor);
10325
- border: 0;
10326
- border-radius: var(--pf-c-label--BorderRadius);
10586
+ a.pf-c-label__content:focus,
10587
+ button.pf-c-label__content:focus {
10588
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10589
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10327
10590
  }
10328
10591
 
10329
- .pf-c-label.pf-m-compact {
10330
- --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
10331
- --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
10332
- --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
10333
- --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
10334
- --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
10335
- --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
10336
- }
10337
-
10338
- .pf-c-label.pf-m-blue {
10339
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
10340
- --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
10341
- --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
10342
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10343
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
10344
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
10345
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
10346
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
10347
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
10348
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
10349
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10350
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10351
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
10352
- }
10353
-
10354
- .pf-c-label.pf-m-green {
10355
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
10356
- --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
10357
- --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
10358
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10359
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
10360
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
10361
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
10362
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
10363
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
10364
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
10365
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10366
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10367
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
10368
- }
10369
-
10370
- .pf-c-label.pf-m-orange {
10371
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
10372
- --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
10373
- --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
10374
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10375
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
10376
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
10377
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
10378
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
10379
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
10380
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
10381
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10382
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10383
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
10384
- }
10385
-
10386
- .pf-c-label.pf-m-red {
10387
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
10388
- --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
10389
- --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
10390
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10391
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
10392
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
10393
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
10394
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
10395
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
10396
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
10397
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10398
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10399
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
10400
- }
10401
-
10402
- .pf-c-label.pf-m-purple {
10403
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
10404
- --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
10405
- --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
10406
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10407
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
10408
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
10409
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
10410
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
10411
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
10412
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
10413
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10414
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10415
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
10416
- }
10417
-
10418
- .pf-c-label.pf-m-cyan {
10419
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
10420
- --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
10421
- --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
10422
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10423
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
10424
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
10425
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
10426
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
10427
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
10428
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
10429
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10430
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10431
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
10432
- }
10433
-
10434
- .pf-c-label.pf-m-gold {
10435
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
10436
- --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
10437
- --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
10438
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10439
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
10440
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
10441
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
10442
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
10443
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
10444
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
10445
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10446
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10447
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
10448
- }
10449
-
10450
- .pf-c-label.pf-m-outline {
10451
- --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
10452
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
10453
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10454
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
10455
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10456
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10457
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
10458
- }
10459
-
10460
- .pf-c-label.pf-m-overflow:hover,
10461
- .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
10462
- .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
10463
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
10464
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
10465
- }
10466
-
10467
- .pf-c-label.pf-m-overflow:focus,
10468
- .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
10469
- .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
10470
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
10471
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
10472
- }
10473
-
10474
- .pf-c-label.pf-m-editable {
10475
- text-decoration: var(--pf-c-label--m-editable--TextDecoration);
10476
- cursor: var(--pf-c-label--m-editable--Cursor);
10477
- text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
10478
- text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
10479
- text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
10480
- text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
10481
- --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
10482
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10483
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
10484
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
10485
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
10486
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
10487
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
10488
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10489
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
10490
- }
10491
-
10492
- .pf-c-label.pf-m-editable:hover {
10493
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10494
- }
10495
-
10496
- .pf-c-label.pf-m-editable:focus {
10497
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10498
- }
10499
-
10500
- .pf-c-label.pf-m-editable-active {
10501
- --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
10502
- --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
10503
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
10504
- }
10505
-
10506
- .pf-c-label.pf-m-editable-active .pf-c-button {
10507
- visibility: hidden;
10508
- }
10509
-
10510
- .pf-c-label .pf-c-button {
10511
- --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
10512
- --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
10513
- --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
10514
- --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
10515
- --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
10516
- margin-top: var(--pf-c-label__c-button--MarginTop);
10517
- margin-right: var(--pf-c-label__c-button--MarginRight);
10518
- margin-bottom: var(--pf-c-label__c-button--MarginBottom);
10519
- margin-left: var(--pf-c-label__c-button--MarginLeft);
10520
- }
10521
-
10522
- .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
10523
- --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
10524
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
10525
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
10526
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
10527
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
10528
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
10529
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
10530
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
10531
- }
10532
-
10533
- .pf-c-label,
10534
- .pf-c-label__content {
10535
- display: inline-flex;
10536
- align-items: center;
10537
- }
10538
-
10539
- .pf-c-label__text {
10540
- overflow: hidden;
10541
- text-overflow: ellipsis;
10542
- white-space: nowrap;
10543
- max-width: var(--pf-c-label__text--MaxWidth);
10544
- }
10545
-
10546
- .pf-c-label__content {
10547
- overflow: hidden;
10548
- text-overflow: ellipsis;
10549
- white-space: nowrap;
10550
- max-width: var(--pf-c-label__content--MaxWidth);
10551
- color: var(--pf-c-label__content--Color);
10552
- border-width: 0;
10553
- }
10554
-
10555
- .pf-c-label__content::before {
10556
- position: absolute;
10557
- top: 0;
10558
- right: 0;
10559
- bottom: 0;
10560
- left: 0;
10561
- pointer-events: none;
10562
- content: "";
10563
- border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10564
- border-radius: var(--pf-c-label--BorderRadius);
10565
- }
10566
-
10567
- a.pf-c-label__content,
10568
- button.pf-c-label__content {
10569
- cursor: pointer;
10570
- border: none;
10571
- }
10572
-
10573
- a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10574
- button.pf-c-label__content,
10575
- button.pf-c-label__content:hover,
10576
- button.pf-c-label__content:focus {
10577
- text-decoration: none;
10578
- }
10579
-
10580
- a.pf-c-label__content:hover,
10581
- button.pf-c-label__content:hover {
10582
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10583
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10584
- }
10585
-
10586
- a.pf-c-label__content:focus,
10587
- button.pf-c-label__content:focus {
10588
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10589
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10590
- }
10591
-
10592
- .pf-c-label__icon {
10593
- margin-right: var(--pf-c-label__icon--MarginRight);
10594
- color: var(--pf-c-label__icon--Color);
10592
+ .pf-c-label__icon {
10593
+ margin-right: var(--pf-c-label__icon--MarginRight);
10594
+ color: var(--pf-c-label__icon--Color);
10595
10595
  }
10596
10596
 
10597
10597
  :where(.pf-theme-dark) .pf-c-label {
@@ -13539,692 +13539,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13539
13539
  margin: 0;
13540
13540
  }
13541
13541
 
13542
- .pf-c-notification-badge {
13543
- --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
13544
- --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
13545
- --pf-c-notification-badge--PaddingBottom: var(--pf-global--spacer--form-element);
13546
- --pf-c-notification-badge--PaddingLeft: var(--pf-global--spacer--md);
13547
- --pf-c-notification-badge--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
13548
- --pf-c-notification-badge--MarginRight: calc(-1 * var(--pf-global--spacer--md));
13549
- --pf-c-notification-badge--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
13550
- --pf-c-notification-badge--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
13551
- --pf-c-notification-badge--after--BorderColor: transparent;
13552
- --pf-c-notification-badge--after--BorderRadius: var(--pf-global--BorderRadius--sm);
13553
- --pf-c-notification-badge--after--BorderWidth: 0;
13554
- --pf-c-notification-badge--after--Top: 0;
13555
- --pf-c-notification-badge--after--Right: 0;
13556
- --pf-c-notification-badge--after--Width: auto;
13557
- --pf-c-notification-badge--after--Height: auto;
13558
- --pf-c-notification-badge--after--BackgroundColor: transparent;
13559
- --pf-c-notification-badge--after--TranslateX: 0;
13560
- --pf-c-notification-badge--after--TranslateY: 0;
13561
- --pf-c-notification-badge__i--Width: auto;
13562
- --pf-c-notification-badge__i--Height: auto;
13563
- --pf-c-notification-badge--m-read--after--BorderColor: transparent;
13564
- --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
13565
- --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
13566
- --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
13567
- --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
13568
- --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
13569
- --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
13570
- --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
13571
- --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
13572
- --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
13573
- --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
13574
- --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
13575
- --pf-c-notification-badge--pf-icon-attention-bell--LineHeight: var(--pf-global--LineHeight--sm);
13576
- position: relative;
13577
- display: inline-block;
13578
- padding: var(--pf-c-notification-badge--PaddingTop) var(--pf-c-notification-badge--PaddingRight) var(--pf-c-notification-badge--PaddingBottom) var(--pf-c-notification-badge--PaddingLeft);
13579
- margin: var(--pf-c-notification-badge--MarginTop) var(--pf-c-notification-badge--MarginRight) var(--pf-c-notification-badge--MarginBottom) var(--pf-c-notification-badge--MarginLeft);
13580
- background-color: var(--pf-c-notification-badge--after--BackgroundColor);
13581
- border-radius: var(--pf-c-notification-badge--after--BorderRadius);
13582
- }
13583
-
13584
- .pf-c-notification-badge::before {
13585
- position: absolute;
13586
- top: var(--pf-c-notification-badge--after--Top);
13587
- right: var(--pf-c-notification-badge--after--Right);
13588
- bottom: 0;
13589
- left: 0;
13590
- width: var(--pf-c-notification-badge--after--Width);
13591
- height: var(--pf-c-notification-badge--after--Height);
13592
- content: "";
13593
- border: var(--pf-c-notification-badge--after--BorderWidth) solid var(--pf-c-notification-badge--after--BorderColor);
13594
- border-radius: var(--pf-c-notification-badge--after--BorderRadius);
13595
- transform: translate(var(--pf-c-notification-badge--after--TranslateX), var(--pf-c-notification-badge--after--TranslateY));
13596
- }
13597
-
13598
- .pf-c-notification-badge > i {
13599
- width: var(--pf-c-notification-badge__i--Width);
13600
- height: var(--pf-c-notification-badge__i--Height);
13601
- }
13602
-
13603
- .pf-c-notification-badge > * {
13604
- position: relative;
13605
- }
13606
-
13607
- .pf-c-notification-badge .pf-icon-attention-bell,
13608
- .pf-c-notification-badge .pf-icon-bell {
13609
- display: inline-block;
13610
- line-height: var(--pf-c-notification-badge--pf-icon-attention-bell--LineHeight);
13611
- }
13612
-
13613
- .pf-c-notification-badge .pf-icon-attention-bell::before,
13614
- .pf-c-notification-badge .pf-icon-bell::before {
13615
- vertical-align: bottom;
13616
- }
13617
-
13618
- .pf-c-notification-badge.pf-m-read {
13619
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
13620
- --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
13621
- color: var(--pf-c-notification-badge--m-read--Color, inherit);
13622
- }
13623
-
13624
- .pf-c-notification-badge.pf-m-unread {
13625
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--after--BackgroundColor);
13626
- color: var(--pf-c-notification-badge--m-unread--Color);
13627
- }
13628
-
13629
- .pf-c-notification-badge.pf-m-unread:hover {
13630
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--hover--after--BackgroundColor);
13631
- }
13632
-
13633
- .pf-c-notification-badge.pf-m-attention {
13634
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--after--BackgroundColor);
13635
- color: var(--pf-c-notification-badge--m-attention--Color);
13636
- }
13637
-
13638
- .pf-c-notification-badge.pf-m-attention:hover {
13639
- --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
13640
- }
13641
-
13642
- .pf-c-notification-badge.pf-m-expanded {
13643
- --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
13644
- --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
13645
- --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
13646
- --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
13647
- }
13648
-
13649
- .pf-c-notification-badge__count {
13650
- margin-left: var(--pf-c-notification-badge__count--MarginLeft);
13651
- }
13652
-
13653
- :where(.pf-theme-dark) .pf-c-notification-badge {
13654
- --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
13655
- --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
13656
- --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
13657
- }
13658
-
13659
- .pf-c-notification-drawer {
13660
- --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--200);
13661
- --pf-c-notification-drawer__header--PaddingTop: var(--pf-global--spacer--md);
13662
- --pf-c-notification-drawer__header--PaddingRight: var(--pf-global--spacer--md);
13663
- --pf-c-notification-drawer__header--PaddingBottom: var(--pf-global--spacer--md);
13664
- --pf-c-notification-drawer__header--PaddingLeft: var(--pf-global--spacer--md);
13665
- --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--100);
13666
- --pf-c-notification-drawer__header--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
13667
- --pf-c-notification-drawer__header--ZIndex: var(--pf-global--ZIndex--sm);
13668
- --pf-c-notification-drawer__header-title--FontSize: var(--pf-global--FontSize--xl);
13669
- --pf-c-notification-drawer__header-status--MarginLeft: var(--pf-global--spacer--md);
13670
- --pf-c-notification-drawer__body--ZIndex: var(--pf-global--ZIndex--xs);
13671
- --pf-c-notification-drawer__list-item--PaddingTop: var(--pf-global--spacer--md);
13672
- --pf-c-notification-drawer__list-item--PaddingRight: var(--pf-global--spacer--md);
13673
- --pf-c-notification-drawer__list-item--PaddingBottom: var(--pf-global--spacer--md);
13674
- --pf-c-notification-drawer__list-item--PaddingLeft: var(--pf-global--spacer--md);
13675
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--100);
13676
- --pf-c-notification-drawer__list-item--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
13677
- --pf-c-notification-drawer__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
13678
- --pf-c-notification-drawer__list-item--BorderBottomColor: transparent;
13679
- --pf-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
13680
- --pf-c-notification-drawer__list-item--before--Width: var(--pf-global--BorderWidth--lg);
13681
- --pf-c-notification-drawer__list-item--before--Top: 0;
13682
- --pf-c-notification-drawer__list-item--before--Bottom: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
13683
- --pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-global--info-color--100);
13684
- --pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor: var(--pf-global--info-color--100);
13685
- --pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-global--warning-color--100);
13686
- --pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor: var(--pf-global--warning-color--100);
13687
- --pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-global--danger-color--100);
13688
- --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
13689
- --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
13690
- --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
13691
- --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
13692
- --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
13693
- --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
13694
- --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
13695
- --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
13696
- --pf-c-notification-drawer__list-item--m-read--before--Bottom: 0;
13697
- --pf-c-notification-drawer__list-item--m-read--before--BackgroundColor: transparent;
13698
- --pf-c-notification-drawer__list-item--list-item--m-read--before--Top: 0;
13699
- --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
13700
- --pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex: var(--pf-global--ZIndex--xs);
13701
- --pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--md-top), var(--pf-global--BoxShadow--md-bottom);
13702
- --pf-c-notification-drawer__list-item-header--MarginBottom: var(--pf-global--spacer--xs);
13703
- --pf-c-notification-drawer__list-item-header-icon--Color: inherit;
13704
- --pf-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-global--spacer--sm);
13705
- --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-global--FontWeight--bold);
13706
- --pf-c-notification-drawer__list-item-header-title--max-lines: 1;
13707
- --pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight: var(--pf-global--FontWeight--normal);
13708
- --pf-c-notification-drawer__list-item-description--MarginBottom: var(--pf-global--spacer--sm);
13709
- --pf-c-notification-drawer__list-item-timestamp--Color: var(--pf-global--Color--200);
13710
- --pf-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-global--FontSize--sm);
13711
- --pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth: var(--pf-global--BorderWidth--sm);
13712
- --pf-c-notification-drawer__group--m-expanded--group--BorderTopColor: var(--pf-global--BorderColor--100);
13713
- --pf-c-notification-drawer__group--m-expanded--MinHeight: 0;
13714
- --pf-c-notification-drawer__group-toggle--PaddingTop: var(--pf-global--spacer--md);
13715
- --pf-c-notification-drawer__group-toggle--PaddingRight: var(--pf-global--spacer--md);
13716
- --pf-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-global--spacer--md);
13717
- --pf-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-global--spacer--md);
13718
- --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
13719
- --pf-c-notification-drawer__group-toggle--BorderColor: var(--pf-global--BorderColor--100);
13720
- --pf-c-notification-drawer__group-toggle--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
13721
- --pf-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
13722
- --pf-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-global--spacer--md);
13723
- --pf-c-notification-drawer__group-toggle-title--max-lines: 1;
13724
- --pf-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-global--spacer--md);
13725
- --pf-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-global--spacer--md);
13726
- --pf-c-notification-drawer__group-toggle-icon--Color: var(--pf-global--Color--200);
13727
- --pf-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
13728
- --pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
13729
- display: flex;
13730
- flex-direction: column;
13731
- height: 100%;
13732
- background-color: var(--pf-c-notification-drawer--BackgroundColor);
13733
- }
13734
-
13735
- .pf-c-notification-drawer__header {
13736
- position: relative;
13737
- z-index: var(--pf-c-notification-drawer__header--ZIndex);
13738
- display: flex;
13739
- flex-shrink: 0;
13740
- align-items: baseline;
13741
- padding: var(--pf-c-notification-drawer__header--PaddingTop) var(--pf-c-notification-drawer__header--PaddingRight) var(--pf-c-notification-drawer__header--PaddingBottom) var(--pf-c-notification-drawer__header--PaddingLeft);
13742
- background-color: var(--pf-c-notification-drawer__header--BackgroundColor);
13743
- box-shadow: var(--pf-c-notification-drawer__header--BoxShadow);
13744
- }
13745
-
13746
- .pf-c-notification-drawer__header-title {
13747
- font-size: var(--pf-c-notification-drawer__header-title--FontSize);
13748
- }
13749
-
13750
- .pf-c-notification-drawer__header-status {
13751
- margin-left: var(--pf-c-notification-drawer__header-status--MarginLeft);
13752
- }
13753
-
13754
- .pf-c-notification-drawer__header-action {
13755
- display: flex;
13756
- align-items: center;
13757
- margin-left: auto;
13758
- }
13759
-
13760
- .pf-c-notification-drawer__body {
13761
- overflow-y: auto;
13762
- box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
13763
- }
13764
-
13765
- .pf-c-notification-drawer__list-item {
13766
- position: relative;
13767
- display: grid;
13768
- grid-template-columns: 1fr auto;
13769
- padding: var(--pf-c-notification-drawer__list-item--PaddingTop) var(--pf-c-notification-drawer__list-item--PaddingRight) var(--pf-c-notification-drawer__list-item--PaddingBottom) var(--pf-c-notification-drawer__list-item--PaddingLeft);
13770
- background-color: var(--pf-c-notification-drawer__list-item--BackgroundColor);
13771
- border-bottom: var(--pf-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-c-notification-drawer__list-item--BorderBottomColor);
13772
- outline-offset: var(--pf-c-notification-drawer__list-item--OutlineOffset);
13773
- box-shadow: var(--pf-c-notification-drawer__list-item--BoxShadow);
13774
- }
13775
-
13776
- .pf-c-notification-drawer__list-item.pf-m-read, .pf-c-notification-drawer__list-item:first-child {
13777
- --pf-c-notification-drawer__list-item--BoxShadow: none;
13778
- }
13779
-
13780
- .pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read {
13781
- --pf-c-notification-drawer__list-item--BoxShadow: var(--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow);
13782
- --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--list-item--m-read--before--Top);
13783
- }
13784
-
13785
- .pf-c-notification-drawer__list-item::before {
13786
- position: absolute;
13787
- top: var(--pf-c-notification-drawer__list-item--before--Top);
13788
- bottom: var(--pf-c-notification-drawer__list-item--before--Bottom);
13789
- width: var(--pf-c-notification-drawer__list-item--before--Width);
13790
- content: "";
13791
- background-color: var(--pf-c-notification-drawer__list-item--before--BackgroundColor);
13792
- }
13793
-
13794
- .pf-c-notification-drawer__list-item.pf-m-info {
13795
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor);
13796
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
13797
- }
13798
-
13799
- .pf-c-notification-drawer__list-item.pf-m-warning {
13800
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor);
13801
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
13802
- }
13803
-
13804
- .pf-c-notification-drawer__list-item.pf-m-danger {
13805
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor);
13806
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
13807
- }
13808
-
13809
- .pf-c-notification-drawer__list-item.pf-m-success {
13810
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
13811
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
13812
- }
13813
-
13814
- .pf-c-notification-drawer__list-item.pf-m-default {
13815
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
13816
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
13817
- }
13818
-
13819
- .pf-c-notification-drawer__list-item.pf-m-read {
13820
- --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-c-notification-drawer__list-item--m-read--BorderBottomColor);
13821
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--BackgroundColor);
13822
- --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--m-read--before--Top);
13823
- --pf-c-notification-drawer__list-item--before--Bottom: var(--pf-c-notification-drawer__list-item--m-read--before--Bottom);
13824
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--before--BackgroundColor);
13825
- --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight);
13826
- position: relative;
13827
- }
13828
-
13829
- .pf-c-notification-drawer__list-item.pf-m-hoverable {
13830
- cursor: pointer;
13831
- }
13832
-
13833
- .pf-c-notification-drawer__list-item.pf-m-hoverable:hover {
13834
- z-index: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex);
13835
- box-shadow: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow);
13836
- }
13837
-
13838
- .pf-c-notification-drawer__list-item-header {
13839
- display: flex;
13840
- align-items: baseline;
13841
- grid-column: 1/2;
13842
- grid-row: 1/2;
13843
- margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
13844
- }
13845
-
13846
- .pf-c-notification-drawer__list-item-header-icon {
13847
- margin-right: var(--pf-c-notification-drawer__list-item-header-icon--MarginRight);
13848
- color: var(--pf-c-notification-drawer__list-item-header-icon--Color);
13849
- }
13850
-
13851
- .pf-c-notification-drawer__list-item-header-title {
13852
- font-weight: var(--pf-c-notification-drawer__list-item-header-title--FontWeight);
13853
- word-break: break-word;
13854
- }
13855
-
13856
- .pf-c-notification-drawer__list-item-header-title.pf-m-truncate {
13857
- display: -webkit-box;
13858
- -webkit-box-orient: vertical;
13859
- -webkit-line-clamp: var(--pf-c-notification-drawer__list-item-header-title--max-lines);
13860
- overflow: hidden;
13861
- }
13862
-
13863
- .pf-c-notification-drawer__list-item-action {
13864
- grid-column: 2/3;
13865
- grid-row: 1/3;
13866
- }
13867
-
13868
- .pf-c-notification-drawer__list-item-description {
13869
- grid-row: 2/3;
13870
- grid-column: 1/2;
13871
- margin-bottom: var(--pf-c-notification-drawer__list-item-description--MarginBottom);
13872
- word-break: break-word;
13873
- }
13874
-
13875
- .pf-c-notification-drawer__list-item-timestamp {
13876
- grid-row: 3/4;
13877
- grid-column: 1/2;
13878
- font-size: var(--pf-c-notification-drawer__list-item-timestamp--FontSize);
13879
- color: var(--pf-c-notification-drawer__list-item-timestamp--Color);
13880
- }
13881
-
13882
- .pf-c-notification-drawer__group-list {
13883
- display: flex;
13884
- flex-direction: column;
13885
- }
13886
-
13887
- .pf-c-notification-drawer__group.pf-m-expanded {
13888
- min-height: var(--pf-c-notification-drawer__group--m-expanded--MinHeight);
13889
- }
13890
-
13891
- .pf-c-notification-drawer__group.pf-m-expanded + .pf-c-notification-drawer__group {
13892
- border-top: var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor);
13893
- }
13894
-
13895
- .pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child {
13896
- --pf-c-notification-drawer__list-item--BorderBottomWidth: 0;
13897
- --pf-c-notification-drawer__list-item--before--Bottom: 0;
13898
- }
13899
-
13900
- .pf-c-notification-drawer__group-toggle {
13901
- display: flex;
13902
- align-items: baseline;
13903
- width: 100%;
13904
- padding: var(--pf-c-notification-drawer__group-toggle--PaddingTop) var(--pf-c-notification-drawer__group-toggle--PaddingRight) var(--pf-c-notification-drawer__group-toggle--PaddingBottom) var(--pf-c-notification-drawer__group-toggle--PaddingLeft);
13905
- background-color: var(--pf-c-notification-drawer__group-toggle--BackgroundColor);
13906
- border: solid var(--pf-c-notification-drawer__group-toggle--BorderColor);
13907
- border-width: 0 0 var(--pf-c-notification-drawer__group-toggle--BorderBottomWidth) 0;
13908
- outline-offset: var(--pf-c-notification-drawer__group-toggle--OutlineOffset);
13909
- }
13910
-
13911
- .pf-c-notification-drawer__group-toggle-title {
13912
- display: -webkit-box;
13913
- -webkit-box-orient: vertical;
13914
- -webkit-line-clamp: var(--pf-c-notification-drawer__group-toggle-title--max-lines);
13915
- overflow: hidden;
13916
- flex: 1;
13917
- margin-right: var(--pf-c-notification-drawer__group-toggle-title--MarginRight);
13918
- text-align: left;
13919
- word-break: break-word;
13920
- }
13921
-
13922
- .pf-c-notification-drawer__group-toggle-count {
13923
- margin-right: var(--pf-c-notification-drawer__group-toggle-count--MarginRight);
13924
- margin-left: auto;
13925
- }
13926
-
13927
- .pf-c-notification-drawer__group-toggle-icon {
13928
- margin-right: var(--pf-c-notification-drawer__group-toggle-icon--MarginRight);
13929
- color: var(--pf-c-notification-drawer__group-toggle-icon--Color);
13930
- transition: var(--pf-c-notification-drawer__group-toggle-icon--Transition);
13931
- }
13932
-
13933
- .pf-c-notification-drawer__group.pf-m-expanded .pf-c-notification-drawer__group-toggle-icon {
13934
- transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
13935
- }
13936
-
13937
- :where(.pf-theme-dark) .pf-c-notification-drawer {
13938
- --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
13939
- --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
13940
- --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
13941
- --pf-c-notification-drawer__list-item--BoxShadow: none;
13942
- --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
13943
- --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
13944
- --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
13945
- --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
13946
- }
13947
-
13948
- .pf-c-options-menu {
13949
- --pf-c-options-menu__toggle--BackgroundColor: transparent;
13950
- --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
13951
- --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
13952
- --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
13953
- --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
13954
- --pf-c-options-menu__toggle--MinWidth: 0;
13955
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
13956
- --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
13957
- --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
13958
- --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
13959
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
13960
- --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
13961
- --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
13962
- --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
13963
- --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
13964
- --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
13965
- --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
13966
- --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
13967
- --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
13968
- --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
13969
- --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
13970
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
13971
- --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
13972
- --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
13973
- --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
13974
- --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
13975
- --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
13976
- --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
13977
- --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
13978
- --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
13979
- --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
13980
- --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
13981
- --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
13982
- --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
13983
- --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
13984
- --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
13985
- --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
13986
- --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
13987
- --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
13988
- --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
13989
- --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
13990
- --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
13991
- --pf-c-options-menu--m-top__menu--Top: 0;
13992
- --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
13993
- --pf-c-options-menu__menu-item--BackgroundColor: transparent;
13994
- --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
13995
- --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
13996
- --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
13997
- --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
13998
- --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
13999
- --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
14000
- --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
14001
- --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
14002
- --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
14003
- --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
14004
- --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
14005
- --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
14006
- --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
14007
- --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
14008
- --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
14009
- --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
14010
- --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
14011
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
14012
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
14013
- --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
14014
- --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
14015
- --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
14016
- position: relative;
14017
- display: inline-block;
14018
- max-width: 100%;
14019
- }
14020
-
14021
- .pf-c-options-menu .pf-c-divider {
14022
- margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
14023
- margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom);
14024
- }
14025
-
14026
- .pf-c-options-menu .pf-c-divider:last-child {
14027
- --pf-c-options-menu--c-divider--MarginBottom: 0;
14028
- }
14029
-
14030
- .pf-c-options-menu__toggle:not(.pf-m-plain)::before,
14031
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
14032
- position: absolute;
14033
- top: 0;
14034
- right: 0;
14035
- bottom: 0;
14036
- left: 0;
14037
- content: "";
14038
- border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
14039
- border-color: var(--pf-c-options-menu__toggle--BorderTopColor) var(--pf-c-options-menu__toggle--BorderRightColor) var(--pf-c-options-menu__toggle--BorderBottomColor) var(--pf-c-options-menu__toggle--BorderLeftColor);
14040
- }
14041
-
14042
- .pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
14043
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
14044
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor);
14045
- }
14046
-
14047
- .pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
14048
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
14049
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
14050
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
14051
- border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth);
14052
- }
14053
-
14054
- .pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
14055
- .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
14056
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
14057
- border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth);
14058
- }
14059
-
14060
- .pf-c-options-menu__toggle {
14061
- position: relative;
14062
- display: flex;
14063
- align-items: center;
14064
- justify-content: space-between;
14065
- min-width: var(--pf-c-options-menu__toggle--MinWidth);
14066
- max-width: 100%;
14067
- padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
14068
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
14069
- color: var(--pf-c-options-menu__toggle--Color);
14070
- background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
14071
- border: none;
14072
- }
14073
-
14074
- .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
14075
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
14076
- border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
14077
- }
14078
-
14079
- .pf-c-options-menu__toggle.pf-m-plain {
14080
- --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
14081
- }
14082
-
14083
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
14084
- --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
14085
- --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
14086
- display: inline-block;
14087
- color: var(--pf-c-options-menu__toggle--m-plain--Color);
14088
- }
14089
-
14090
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
14091
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
14092
- }
14093
-
14094
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
14095
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
14096
- --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
14097
- }
14098
-
14099
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
14100
- --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
14101
- }
14102
-
14103
- .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
14104
- pointer-events: none;
14105
- }
14106
-
14107
- .pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-options-menu__toggle.pf-m-disabled.pf-m-text, .pf-c-options-menu__toggle:disabled:not(.pf-m-plain), .pf-c-options-menu__toggle:disabled.pf-m-text {
14108
- --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor);
14109
- }
14110
-
14111
- .pf-c-options-menu__toggle.pf-m-disabled::before, .pf-c-options-menu__toggle:disabled::before {
14112
- border: 0;
14113
- }
14114
-
14115
- .pf-c-options-menu__toggle-button-icon {
14116
- position: relative;
14117
- }
14118
-
14119
- .pf-c-options-menu__toggle-button {
14120
- padding: var(--pf-c-options-menu__toggle-button--PaddingTop) var(--pf-c-options-menu__toggle-button--PaddingRight) var(--pf-c-options-menu__toggle-button--PaddingBottom) var(--pf-c-options-menu__toggle-button--PaddingLeft);
14121
- background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
14122
- border: 0;
14123
- }
14124
-
14125
- .pf-c-options-menu__toggle-text {
14126
- overflow: hidden;
14127
- text-overflow: ellipsis;
14128
- white-space: nowrap;
14129
- }
14130
-
14131
- .pf-c-options-menu__toggle-icon,
14132
- .pf-c-options-menu__toggle-button-icon {
14133
- color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
14134
- }
14135
-
14136
- .pf-c-options-menu__toggle-icon {
14137
- margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
14138
- margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
14139
- }
14140
-
14141
- .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
14142
- transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
14143
- }
14144
-
14145
- .pf-c-options-menu__menu {
14146
- position: absolute;
14147
- top: var(--pf-c-options-menu__menu--Top);
14148
- z-index: var(--pf-c-options-menu__menu--ZIndex);
14149
- min-width: 100%;
14150
- padding-top: var(--pf-c-options-menu__menu--PaddingTop);
14151
- padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
14152
- background-color: var(--pf-c-options-menu__menu--BackgroundColor);
14153
- background-clip: padding-box;
14154
- box-shadow: var(--pf-c-options-menu__menu--BoxShadow);
14155
- }
14156
-
14157
- .pf-c-options-menu__menu.pf-m-align-right {
14158
- right: 0;
14159
- }
14160
-
14161
- .pf-c-options-menu.pf-m-top .pf-c-options-menu__menu {
14162
- --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
14163
- transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
14164
- }
14165
-
14166
- .pf-c-options-menu__menu-item {
14167
- display: flex;
14168
- align-items: baseline;
14169
- width: 100%;
14170
- padding: var(--pf-c-options-menu__menu-item--PaddingTop) var(--pf-c-options-menu__menu-item--PaddingRight) var(--pf-c-options-menu__menu-item--PaddingBottom) var(--pf-c-options-menu__menu-item--PaddingLeft);
14171
- font-size: var(--pf-c-options-menu__menu-item--FontSize);
14172
- color: var(--pf-c-options-menu__menu-item--Color);
14173
- white-space: nowrap;
14174
- background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
14175
- border: none;
14176
- }
14177
-
14178
- .pf-c-options-menu__menu-item:hover, .pf-c-options-menu__menu-item:focus {
14179
- text-decoration: none;
14180
- background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor);
14181
- }
14182
-
14183
- .pf-c-options-menu__menu-item:disabled, .pf-c-options-menu__menu-item.pf-m-disabled {
14184
- color: var(--pf-c-options-menu__menu-item--disabled--Color);
14185
- pointer-events: none;
14186
- background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor);
14187
- }
14188
-
14189
- .pf-c-options-menu__menu-item-icon {
14190
- align-self: center;
14191
- width: auto;
14192
- padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
14193
- margin-left: auto;
14194
- font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
14195
- color: var(--pf-c-options-menu__menu-item-icon--Color);
14196
- }
14197
-
14198
- .pf-c-options-menu__group + .pf-c-options-menu__group {
14199
- padding-top: var(--pf-c-options-menu__group--group--PaddingTop);
14200
- }
14201
-
14202
- .pf-c-options-menu__group-title {
14203
- padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
14204
- padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
14205
- padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
14206
- padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
14207
- font-size: var(--pf-c-options-menu__group-title--FontSize);
14208
- font-weight: var(--pf-c-options-menu__group-title--FontWeight);
14209
- color: var(--pf-c-options-menu__group-title--Color);
14210
- }
14211
-
14212
- :where(.pf-theme-dark) .pf-c-options-menu {
14213
- --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
14214
- --pf-c-options-menu__toggle--BorderTopColor: transparent;
14215
- --pf-c-options-menu__toggle--BorderRightColor: transparent;
14216
- --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
14217
- --pf-c-options-menu__toggle--BorderLeftColor: transparent;
14218
- --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
14219
- --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
14220
- --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
14221
- --pf-c-options-menu__menu--Top: 100%;
14222
- }
14223
-
14224
- :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
14225
- background: transparent;
14226
- }
14227
-
14228
13542
  .pf-c-nav {
14229
13543
  --pf-c-nav--Transition: var(--pf-global--Transition);
14230
13544
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -14536,746 +13850,1432 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
14536
13850
  position: relative;
14537
13851
  }
14538
13852
 
14539
- @media screen and (min-width: 1200px) {
14540
- .pf-c-nav {
14541
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__link--xl--PaddingRight);
14542
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__link--xl--PaddingLeft);
14543
- --pf-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingTop);
14544
- --pf-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingRight);
14545
- --pf-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingBottom);
14546
- --pf-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingLeft);
14547
- --pf-c-nav__section__link--PaddingRight: var(--pf-c-nav__section__link--xl--PaddingRight);
14548
- --pf-c-nav__section__link--PaddingLeft: var(--pf-c-nav__section__link--xl--PaddingLeft);
14549
- --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
14550
- --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
14551
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
14552
- --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
14553
- --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
14554
- }
13853
+ @media screen and (min-width: 1200px) {
13854
+ .pf-c-nav {
13855
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__link--xl--PaddingRight);
13856
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__link--xl--PaddingLeft);
13857
+ --pf-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingTop);
13858
+ --pf-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingRight);
13859
+ --pf-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingBottom);
13860
+ --pf-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--xl--PaddingLeft);
13861
+ --pf-c-nav__section__link--PaddingRight: var(--pf-c-nav__section__link--xl--PaddingRight);
13862
+ --pf-c-nav__section__link--PaddingLeft: var(--pf-c-nav__section__link--xl--PaddingLeft);
13863
+ --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
13864
+ --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
13865
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
13866
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
13867
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
13868
+ }
13869
+ }
13870
+ .pf-c-nav .pf-c-menu {
13871
+ --pf-c-menu--MinWidth: 100%;
13872
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
13873
+ --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
13874
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
13875
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
13876
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
13877
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
13878
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
13879
+ --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
13880
+ --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
13881
+ --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
13882
+ --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
13883
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
13884
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
13885
+ --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
13886
+ }
13887
+
13888
+ .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
13889
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
13890
+ }
13891
+
13892
+ .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
13893
+ --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
13894
+ --pf-c-menu__list--PaddingTop: 0;
13895
+ --pf-c-menu__list--PaddingBottom: 0;
13896
+ --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
13897
+ --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color, inherit);
13898
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
13899
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
13900
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
13901
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
13902
+ top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
13903
+ right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
13904
+ bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
13905
+ left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
13906
+ }
13907
+
13908
+ .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
13909
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
13910
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
13911
+ }
13912
+
13913
+ .pf-c-nav .pf-c-menu.pf-m-top {
13914
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
13915
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
13916
+ }
13917
+
13918
+ .pf-c-nav .pf-c-menu.pf-m-left {
13919
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
13920
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
13921
+ }
13922
+
13923
+ .pf-c-nav .pf-c-menu .pf-c-divider {
13924
+ margin-top: 0;
13925
+ margin-bottom: 0;
13926
+ }
13927
+
13928
+ .pf-c-nav .pf-c-menu__item {
13929
+ position: relative;
13930
+ outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
13931
+ }
13932
+
13933
+ .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
13934
+ position: absolute;
13935
+ top: 0;
13936
+ content: "";
13937
+ }
13938
+
13939
+ .pf-c-nav .pf-c-menu__item::before {
13940
+ right: 0;
13941
+ bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
13942
+ left: 0;
13943
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
13944
+ }
13945
+
13946
+ .pf-c-nav .pf-c-menu__item::after {
13947
+ bottom: 0;
13948
+ left: 0;
13949
+ border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
13950
+ }
13951
+
13952
+ .pf-c-nav .pf-c-menu__item.pf-m-current {
13953
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
13954
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
13955
+ background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
13956
+ }
13957
+
13958
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) {
13959
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
13960
+ }
13961
+
13962
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item {
13963
+ --pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
13964
+ }
13965
+
13966
+ .pf-c-nav .pf-c-menu__item-toggle-icon {
13967
+ margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
13968
+ }
13969
+
13970
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
13971
+ content: none;
13972
+ }
13973
+
13974
+ .pf-c-nav.pf-m-horizontal, .pf-c-nav.pf-m-tertiary, .pf-c-nav.pf-m-horizontal-subnav {
13975
+ overflow: hidden;
13976
+ }
13977
+
13978
+ .pf-c-nav.pf-m-horizontal,
13979
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__list, .pf-c-nav.pf-m-tertiary,
13980
+ .pf-c-nav.pf-m-tertiary .pf-c-nav__list, .pf-c-nav.pf-m-horizontal-subnav,
13981
+ .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list {
13982
+ position: relative;
13983
+ display: flex;
13984
+ }
13985
+
13986
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__list, .pf-c-nav.pf-m-tertiary .pf-c-nav__list, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list {
13987
+ flex: 1;
13988
+ max-width: 100%;
13989
+ overflow-x: auto;
13990
+ white-space: nowrap;
13991
+ scroll-snap-type: var(--pf-c-nav__list--ScrollSnapType);
13992
+ -webkit-overflow-scrolling: touch;
13993
+ scrollbar-width: none;
13994
+ -ms-overflow-style: -ms-autohiding-scrollbar;
13995
+ }
13996
+
13997
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__list::-webkit-scrollbar, .pf-c-nav.pf-m-tertiary .pf-c-nav__list::-webkit-scrollbar, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list::-webkit-scrollbar {
13998
+ display: none;
13999
+ }
14000
+
14001
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__item, .pf-c-nav.pf-m-tertiary .pf-c-nav__item, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__item {
14002
+ display: flex;
14003
+ scroll-snap-align: var(--pf-c-nav__item--ScrollSnapAlign);
14004
+ }
14005
+
14006
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__link, .pf-c-nav.pf-m-tertiary .pf-c-nav__link, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__link {
14007
+ align-items: center;
14008
+ align-self: stretch;
14009
+ white-space: nowrap;
14010
+ }
14011
+
14012
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::before, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__link::before {
14013
+ top: auto;
14014
+ bottom: 0;
14015
+ }
14016
+
14017
+ .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before {
14018
+ right: var(--pf-c-nav--m-horizontal__link--Right);
14019
+ left: var(--pf-c-nav--m-horizontal__link--Left);
14020
+ }
14021
+
14022
+ .pf-c-nav.pf-m-tertiary .pf-c-nav__link::before {
14023
+ right: var(--pf-c-nav--m-tertiary__link--Right);
14024
+ left: var(--pf-c-nav--m-tertiary__link--Left);
14025
+ }
14026
+
14027
+ .pf-c-nav.pf-m-light {
14028
+ --pf-c-nav__item--before--BorderColor: var(--pf-c-nav--m-light__item--before--BorderColor);
14029
+ --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);
14030
+ --pf-c-nav__link--Color: var(--pf-c-nav--m-light__link--Color);
14031
+ --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-light__link--hover--Color);
14032
+ --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-light__link--focus--Color);
14033
+ --pf-c-nav__link--active--Color: var(--pf-c-nav--m-light__link--active--Color);
14034
+ --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-light__link--m-current--Color);
14035
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-light__link--hover--BackgroundColor);
14036
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-light__link--focus--BackgroundColor);
14037
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-light__link--active--BackgroundColor);
14038
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-light__link--m-current--BackgroundColor);
14039
+ --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
14040
+ --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
14041
+ --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__link--m-current--after--BorderColor);
14042
+ --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--hover--after--BorderColor);
14043
+ --pf-c-nav__subnav__link--focus--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--focus--after--BorderColor);
14044
+ --pf-c-nav__subnav__link--active--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--active--after--BorderColor);
14045
+ --pf-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor);
14046
+ --pf-c-nav__section-title--Color: var(--pf-c-nav--m-light__section-title--Color);
14047
+ --pf-c-nav__section-title--BorderBottomColor: var(--pf-c-nav--m-light__section-title--BorderBottomColor);
14048
+ }
14049
+
14050
+ .pf-c-nav.pf-m-light .pf-c-divider {
14051
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-light--c-divider--BackgroundColor);
14052
+ }
14053
+
14054
+ .pf-c-nav.pf-m-horizontal {
14055
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-horizontal__link--PaddingTop);
14056
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal__link--PaddingRight);
14057
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal__link--PaddingBottom);
14058
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal__link--PaddingLeft);
14059
+ --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal__link--Right);
14060
+ --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal__link--Left);
14061
+ --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal__link--Color);
14062
+ --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal__link--hover--Color);
14063
+ --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal__link--active--Color);
14064
+ --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal__link--focus--Color);
14065
+ --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-horizontal__link--m-current--Color);
14066
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-horizontal__link--BackgroundColor);
14067
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-horizontal__link--hover--BackgroundColor);
14068
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-horizontal__link--focus--BackgroundColor);
14069
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-horizontal__link--active--BackgroundColor);
14070
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-horizontal__link--m-current--BackgroundColor);
14071
+ --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-horizontal__link--before--BorderColor);
14072
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--before--BorderWidth);
14073
+ --pf-c-nav__link--hover--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--hover--before--BorderWidth);
14074
+ --pf-c-nav__link--focus--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--focus--before--BorderWidth);
14075
+ --pf-c-nav__link--active--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--active--before--BorderWidth);
14076
+ --pf-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--m-current--before--BorderWidth);
14077
+ }
14078
+
14079
+ .pf-c-nav.pf-m-tertiary {
14080
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-tertiary__link--PaddingTop);
14081
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-tertiary__link--PaddingRight);
14082
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-tertiary__link--PaddingBottom);
14083
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-tertiary__link--PaddingLeft);
14084
+ --pf-c-nav__link--Right: var(--pf-c-nav--m-tertiary__link--Right);
14085
+ --pf-c-nav__link--Left: var(--pf-c-nav--m-tertiary__link--Left);
14086
+ --pf-c-nav__link--Color: var(--pf-c-nav--m-tertiary__link--Color);
14087
+ --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-tertiary__link--hover--Color);
14088
+ --pf-c-nav__link--active--Color: var(--pf-c-nav--m-tertiary__link--active--Color);
14089
+ --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-tertiary__link--focus--Color);
14090
+ --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-tertiary__link--m-current--Color);
14091
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-tertiary__link--BackgroundColor);
14092
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-tertiary__link--hover--BackgroundColor);
14093
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-tertiary__link--focus--BackgroundColor);
14094
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-tertiary__link--active--BackgroundColor);
14095
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-tertiary__link--m-current--BackgroundColor);
14096
+ --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-tertiary__link--before--BorderColor);
14097
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--before--BorderWidth);
14098
+ --pf-c-nav__link--hover--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--hover--before--BorderWidth);
14099
+ --pf-c-nav__link--focus--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--focus--before--BorderWidth);
14100
+ --pf-c-nav__link--active--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--active--before--BorderWidth);
14101
+ --pf-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--m-current--before--BorderWidth);
14102
+ --pf-c-nav__scroll-button--Color: var(--pf-c-nav--m-tertiary__scroll-button--Color);
14103
+ --pf-c-nav__scroll-button--hover--Color: var(--pf-c-nav--m-tertiary__scroll-button--hover--Color);
14104
+ --pf-c-nav__scroll-button--focus--Color: var(--pf-c-nav--m-tertiary__scroll-button--focus--Color);
14105
+ --pf-c-nav__scroll-button--active--Color: var(--pf-c-nav--m-tertiary__scroll-button--active--Color);
14106
+ --pf-c-nav__scroll-button--disabled--Color: var(--pf-c-nav--m-tertiary__scroll-button--disabled--Color);
14107
+ --pf-c-nav__scroll-button--before--BorderColor: var(--pf-c-nav--m-tertiary__scroll-button--before--BorderColor);
14108
+ --pf-c-nav__scroll-button--disabled--before--BorderColor: var(--pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor);
14109
+ }
14110
+
14111
+ .pf-c-nav.pf-m-horizontal-subnav {
14112
+ --pf-c-nav__link--FontSize: var(--pf-c-nav--m-horizontal-subnav__link--FontSize);
14113
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--PaddingTop);
14114
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--PaddingRight);
14115
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--PaddingBottom);
14116
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--PaddingLeft);
14117
+ --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal-subnav__link--Color);
14118
+ --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal-subnav__link--Right);
14119
+ --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal-subnav__link--Left);
14120
+ --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal-subnav__link--hover--Color);
14121
+ --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal-subnav__link--active--Color);
14122
+ --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal-subnav__link--focus--Color);
14123
+ --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-horizontal-subnav__link--m-current--Color);
14124
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--BackgroundColor);
14125
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--hover--BackgroundColor);
14126
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--focus--BackgroundColor);
14127
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--active--BackgroundColor);
14128
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor);
14129
+ --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--before--BorderColor);
14130
+ --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--after--BorderColor);
14131
+ --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderColor);
14132
+ --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--active--after--BorderColor);
14133
+ --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor);
14134
+ --pf-c-nav__link--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth);
14135
+ --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth);
14136
+ --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth);
14137
+ --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth);
14138
+ }
14139
+
14140
+ .pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child {
14141
+ --pf-c-nav__link--after--BorderLeftWidth: 0;
14142
+ --pf-c-nav__link--hover--after--BorderLeftWidth: 0;
14143
+ --pf-c-nav__link--active--after--BorderLeftWidth: 0;
14144
+ --pf-c-nav__link--m-current--after--BorderLeftWidth: 0;
14145
+ }
14146
+
14147
+ .pf-c-nav .pf-c-divider {
14148
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--c-divider--BackgroundColor);
14149
+ padding-right: var(--pf-c-nav--c-divider--PaddingRight);
14150
+ padding-left: var(--pf-c-nav--c-divider--PaddingLeft);
14151
+ margin-top: var(--pf-c-nav--c-divider--MarginTop);
14152
+ margin-bottom: var(--pf-c-nav--c-divider--MarginBottom);
14153
+ }
14154
+
14155
+ .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button {
14156
+ opacity: 1;
14157
+ }
14158
+
14159
+ .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button:nth-of-type(1) {
14160
+ margin-right: 0;
14161
+ transform: translateX(0);
14162
+ }
14163
+
14164
+ .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button:nth-of-type(2) {
14165
+ margin-left: 0;
14166
+ transform: translateX(0);
14167
+ }
14168
+
14169
+ .pf-c-nav.pf-m-overflow-hidden {
14170
+ overflow: hidden;
14171
+ }
14172
+
14173
+ .pf-c-nav__list {
14174
+ position: relative;
14175
+ display: block;
14176
+ }
14177
+
14178
+ .pf-c-nav__item {
14179
+ position: relative;
14180
+ margin-top: var(--pf-c-nav__item--MarginTop);
14181
+ }
14182
+
14183
+ .pf-c-nav__item.pf-m-expandable {
14184
+ --pf-c-nav__link--before--BorderBottomWidth: 0;
14185
+ }
14186
+
14187
+ .pf-c-nav__item.pf-m-expandable::before {
14188
+ position: absolute;
14189
+ right: 0;
14190
+ bottom: calc(var(--pf-c-nav__item--before--BorderWidth) * -1);
14191
+ left: 0;
14192
+ content: "";
14193
+ border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
14194
+ }
14195
+
14196
+ .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
14197
+ transform: rotate(0);
14198
+ }
14199
+
14200
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
14201
+ --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
14202
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
14203
+ }
14204
+
14205
+ @media screen and (min-width: 1200px) {
14206
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
14207
+ border-bottom: none;
14208
+ }
14209
+ }
14210
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
14211
+ position: absolute;
14212
+ top: 0;
14213
+ right: 0;
14214
+ bottom: 0;
14215
+ left: 0;
14216
+ pointer-events: none;
14217
+ content: "";
14218
+ border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
14219
+ }
14220
+
14221
+ .pf-c-nav__item .pf-c-nav__toggle-icon {
14222
+ transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
14223
+ }
14224
+
14225
+ .pf-c-nav__item.pf-m-flyout:hover {
14226
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
14227
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
14228
+ }
14229
+
14230
+ .pf-c-nav__item.pf-m-flyout:focus {
14231
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
14232
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
14233
+ }
14234
+
14235
+ .pf-c-nav__item.pf-m-flyout:active {
14236
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
14237
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
14238
+ }
14239
+
14240
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu {
14241
+ --pf-c-menu--MinWidth: 100%;
14242
+ --pf-c-menu--BoxShadow: var(--pf-c-nav__item--m-flyout--c-menu--BoxShadow);
14243
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu--BackgroundColor);
14244
+ --pf-c-menu__list--PaddingTop: 0;
14245
+ --pf-c-menu__list--PaddingBottom: 0;
14246
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor);
14247
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor);
14248
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
14249
+ --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
14250
+ --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
14251
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
14252
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
14253
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
14254
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
14255
+ --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
14256
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
14257
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
14258
+ position: absolute;
14259
+ top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
14260
+ left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
14261
+ }
14262
+
14263
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
14264
+ top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
14265
+ }
14266
+
14267
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
14268
+ --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
14269
+ --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
14270
+ }
14271
+
14272
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
14273
+ position: relative;
14274
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
14275
+ }
14276
+
14277
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item::before {
14278
+ position: absolute;
14279
+ right: 0;
14280
+ bottom: 0;
14281
+ left: 0;
14282
+ content: "";
14283
+ border-bottom: var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
14284
+ }
14285
+
14286
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
14287
+ position: absolute;
14288
+ top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
14289
+ bottom: 0;
14290
+ left: 0;
14291
+ content: "";
14292
+ border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
14293
+ }
14294
+
14295
+ .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
14296
+ left: 0;
14297
+ z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
14298
+ }
14299
+
14300
+ .pf-c-nav__link {
14301
+ position: relative;
14302
+ display: flex;
14303
+ align-items: baseline;
14304
+ padding: var(--pf-c-nav__link--PaddingTop) var(--pf-c-nav__link--PaddingRight) var(--pf-c-nav__link--PaddingBottom) var(--pf-c-nav__link--PaddingLeft);
14305
+ font-size: var(--pf-c-nav__link--FontSize);
14306
+ font-weight: var(--pf-c-nav__link--FontWeight);
14307
+ color: var(--pf-c-nav__link--Color);
14308
+ background-color: var(--pf-c-nav__link--BackgroundColor);
14309
+ outline-offset: var(--pf-c-nav__link--OutlineOffset);
14310
+ }
14311
+
14312
+ .pf-c-nav__link::after, .pf-c-nav__link::before {
14313
+ position: absolute;
14314
+ content: "";
14315
+ border: 0 solid;
14316
+ }
14317
+
14318
+ .pf-c-nav__link::before {
14319
+ right: 0;
14320
+ bottom: calc(var(--pf-c-nav__link--before--BorderBottomWidth) * -1);
14321
+ left: 0;
14322
+ border-color: var(--pf-c-nav__link--before--BorderColor);
14323
+ border-bottom-width: var(--pf-c-nav__link--before--BorderBottomWidth);
14324
+ }
14325
+
14326
+ .pf-c-nav__link::after {
14327
+ top: 0;
14328
+ bottom: 0;
14329
+ left: 0;
14330
+ border: 0 solid;
14331
+ border-color: var(--pf-c-nav__link--after--BorderColor);
14332
+ border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
14333
+ }
14334
+
14335
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
14336
+ color: var(--pf-c-nav__link--hover--Color);
14337
+ background-color: var(--pf-c-nav__link--hover--BackgroundColor);
14338
+ }
14339
+
14340
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
14341
+ border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
14342
+ }
14343
+
14344
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
14345
+ border-color: var(--pf-c-nav__link--hover--after--BorderColor);
14346
+ border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
14347
+ }
14348
+
14349
+ .pf-c-nav__link:focus {
14350
+ color: var(--pf-c-nav__link--focus--Color);
14351
+ background-color: var(--pf-c-nav__link--focus--BackgroundColor);
14352
+ }
14353
+
14354
+ .pf-c-nav__link:focus::before {
14355
+ border-bottom-width: var(--pf-c-nav__link--focus--before--BorderBottomWidth);
14356
+ }
14357
+
14358
+ .pf-c-nav__link:focus::after {
14359
+ border-color: var(--pf-c-nav__link--focus--after--BorderColor);
14360
+ border-left-width: var(--pf-c-nav__link--focus--after--BorderLeftWidth);
14361
+ }
14362
+
14363
+ .pf-c-nav__link:active {
14364
+ color: var(--pf-c-nav__link--active--Color);
14365
+ background-color: var(--pf-c-nav__link--active--BackgroundColor);
14366
+ }
14367
+
14368
+ .pf-c-nav__link:active::before {
14369
+ border-bottom-width: var(--pf-c-nav__link--active--before--BorderBottomWidth);
14370
+ }
14371
+
14372
+ .pf-c-nav__link:active::after {
14373
+ border-color: var(--pf-c-nav__link--active--after--BorderColor);
14374
+ border-left-width: var(--pf-c-nav__link--active--after--BorderLeftWidth);
14375
+ }
14376
+
14377
+ .pf-c-nav__link.pf-m-current, .pf-c-nav__link.pf-m-current:hover, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link {
14378
+ color: var(--pf-c-nav__link--m-current--Color);
14379
+ background-color: var(--pf-c-nav__link--m-current--BackgroundColor);
14380
+ }
14381
+
14382
+ .pf-c-nav__link.pf-m-current::before, .pf-c-nav__link.pf-m-current:hover::before, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::before {
14383
+ border-bottom-width: var(--pf-c-nav__link--m-current--before--BorderBottomWidth);
14384
+ }
14385
+
14386
+ .pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current:hover::after, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
14387
+ border-color: var(--pf-c-nav__link--m-current--after--BorderColor);
14388
+ border-left-width: var(--pf-c-nav__link--m-current--after--BorderLeftWidth);
14389
+ }
14390
+
14391
+ .pf-c-nav__link, .pf-c-nav__link:hover, .pf-c-nav__link:focus, .pf-c-nav__link:active {
14392
+ width: 100%;
14393
+ text-decoration: none;
14394
+ border: none;
14395
+ }
14396
+
14397
+ .pf-c-nav__subnav {
14398
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav__subnav__link--PaddingTop);
14399
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__subnav__link--PaddingRight);
14400
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__subnav__link--PaddingBottom);
14401
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__link--PaddingLeft);
14402
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__link--FontSize);
14403
+ --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav__subnav__link--hover--after--BorderColor);
14404
+ --pf-c-nav__link--focus--after--BorderColor: var(--pf-c-nav__subnav__link--focus--after--BorderColor);
14405
+ --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav__subnav__link--active--after--BorderColor);
14406
+ --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav__subnav__link--m-current--after--BorderColor);
14407
+ --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--hover--after--BorderWidth);
14408
+ --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--focus--after--BorderWidth);
14409
+ --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--active--after--BorderWidth);
14410
+ --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--m-current--after--BorderWidth);
14411
+ --pf-c-nav--c-divider--PaddingRight: var(--pf-c-nav__subnav--c-divider--PaddingRight);
14412
+ --pf-c-nav--c-divider--PaddingLeft: var(--pf-c-nav__subnav--c-divider--PaddingLeft);
14413
+ max-height: var(--pf-c-nav__subnav--MaxHeight);
14414
+ padding-bottom: var(--pf-c-nav__subnav--PaddingBottom);
14415
+ padding-left: var(--pf-c-nav__subnav--PaddingLeft);
14416
+ transition: var(--pf-c-nav--Transition);
14417
+ scrollbar-width: none;
14418
+ -ms-overflow-style: -ms-autohiding-scrollbar;
14419
+ }
14420
+
14421
+ .pf-c-nav__subnav .pf-c-nav__subnav {
14422
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
14423
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
14424
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
14425
+ }
14426
+
14427
+ .pf-c-nav__subnav.pf-m-flyout {
14428
+ width: 100%;
14429
+ }
14430
+
14431
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__subnav {
14432
+ --pf-c-nav__subnav--MaxHeight: var(--pf-c-nav__item--m-expanded__subnav--MaxHeight);
14433
+ overflow-y: auto;
14434
+ opacity: 1;
14435
+ }
14436
+
14437
+ .pf-c-nav__subnav::-webkit-scrollbar {
14438
+ display: none;
14439
+ }
14440
+
14441
+ .pf-c-nav__toggle {
14442
+ flex: none;
14443
+ padding-right: var(--pf-c-nav__toggle--PaddingRight);
14444
+ padding-left: var(--pf-c-nav__toggle--PaddingLeft);
14445
+ margin-left: auto;
14446
+ font-size: var(--pf-c-nav__toggle--FontSize);
14447
+ line-height: 1;
14448
+ }
14449
+
14450
+ .pf-c-nav__toggle.pf-m-start {
14451
+ margin-right: var(--pf-c-nav__toggle--m-start--MarginRight);
14452
+ margin-left: calc(var(--pf-c-nav__toggle--PaddingRight) * -1);
14453
+ }
14454
+
14455
+ .pf-c-nav__toggle-icon {
14456
+ display: inline-block;
14457
+ transition: var(--pf-c-nav__toggle-icon--Transition);
14458
+ }
14459
+
14460
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
14461
+ transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
14462
+ }
14463
+
14464
+ .pf-c-nav__section {
14465
+ --pf-c-nav__item--MarginTop: var(--pf-c-nav__section__item--MarginTop);
14466
+ --pf-c-nav__link--PaddingTop: var(--pf-c-nav__section__link--PaddingTop);
14467
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__section__link--PaddingRight);
14468
+ --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__section__link--PaddingBottom);
14469
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__section__link--PaddingLeft);
14470
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__section__link--FontSize);
14471
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__section__link--before--BorderBottomWidth);
14472
+ --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav__section__link--hover--after--BorderColor);
14473
+ --pf-c-nav__link--focus--after--BorderColor: var(--pf-c-nav__section__link--focus--after--BorderColor);
14474
+ --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav__section__link--active--after--BorderColor);
14475
+ --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav__section__link--m-current--after--BorderColor);
14476
+ --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav__section__link--hover--after--BorderWidth);
14477
+ --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__section__link--focus--after--BorderWidth);
14478
+ --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
14479
+ --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
14480
+ margin-top: var(--pf-c-nav__section--MarginTop);
14481
+ --pf-c-nav--c-divider--MarginBottom: 0;
14482
+ }
14483
+
14484
+ .pf-c-nav__section + .pf-c-nav__section {
14485
+ --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
14486
+ }
14487
+
14488
+ .pf-c-nav__section.pf-m-no-title {
14489
+ --pf-c-nav__section--MarginTop: 0;
14490
+ }
14491
+
14492
+ .pf-c-nav__section-title {
14493
+ padding: var(--pf-c-nav__section-title--PaddingTop) var(--pf-c-nav__section-title--PaddingRight) var(--pf-c-nav__section-title--PaddingBottom) var(--pf-c-nav__section-title--PaddingLeft);
14494
+ font-size: var(--pf-c-nav__section-title--FontSize);
14495
+ color: var(--pf-c-nav__section-title--Color);
14496
+ border-bottom: var(--pf-c-nav__section-title--BorderBottomWidth) solid var(--pf-c-nav__section-title--BorderBottomColor);
14497
+ }
14498
+
14499
+ .pf-c-nav__scroll-button {
14500
+ flex: none;
14501
+ width: var(--pf-c-nav__scroll-button--Width);
14502
+ color: var(--pf-c-nav__scroll-button--Color);
14503
+ background-color: var(--pf-c-nav__scroll-button--BackgroundColor);
14504
+ border: 0;
14505
+ outline-offset: var(--pf-c-nav__scroll-button--OutlineOffset);
14506
+ opacity: 0;
14507
+ transition: var(--pf-c-nav__scroll-button--Transition);
14508
+ }
14509
+
14510
+ .pf-c-nav__scroll-button::before {
14511
+ position: absolute;
14512
+ top: 0;
14513
+ bottom: 0;
14514
+ content: "";
14515
+ border: solid var(--pf-c-nav__scroll-button--before--BorderColor);
14516
+ border-width: 0 var(--pf-c-nav__scroll-button--before--BorderRightWidth) 0 var(--pf-c-nav__scroll-button--before--BorderLeftWidth);
14555
14517
  }
14556
- .pf-c-nav .pf-c-menu {
14557
- --pf-c-menu--MinWidth: 100%;
14558
- --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
14559
- --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
14560
- --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
14561
- --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
14562
- --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
14563
- --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
14564
- --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
14565
- --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
14566
- --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
14567
- --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
14568
- --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
14569
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
14570
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
14571
- --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
14518
+
14519
+ .pf-c-nav__scroll-button:hover {
14520
+ color: var(--pf-c-nav__scroll-button--hover--Color);
14572
14521
  }
14573
14522
 
14574
- .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
14575
- border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
14523
+ .pf-c-nav__scroll-button:focus {
14524
+ color: var(--pf-c-nav__scroll-button--focus--Color);
14576
14525
  }
14577
14526
 
14578
- .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
14579
- --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
14580
- --pf-c-menu__list--PaddingTop: 0;
14581
- --pf-c-menu__list--PaddingBottom: 0;
14582
- --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
14583
- --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color, inherit);
14584
- --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
14585
- --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
14586
- --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
14587
- --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
14588
- top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
14589
- right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
14590
- bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
14591
- left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
14527
+ .pf-c-nav__scroll-button:active {
14528
+ color: var(--pf-c-nav__scroll-button--active--Color);
14592
14529
  }
14593
14530
 
14594
- .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
14595
- --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
14596
- --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
14531
+ .pf-c-nav__scroll-button:disabled {
14532
+ color: var(--pf-c-nav__scroll-button--disabled--Color);
14533
+ border-color: var(--pf-c-nav__scroll-button--disabled--before--BorderColor);
14597
14534
  }
14598
14535
 
14599
- .pf-c-nav .pf-c-menu.pf-m-top {
14600
- --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
14601
- --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
14536
+ .pf-c-nav__scroll-button:nth-of-type(1) {
14537
+ --pf-c-nav__scroll-button--before--BorderRightWidth: var(--pf-c-nav__scroll-button--before--BorderWidth);
14538
+ margin-right: calc(var(--pf-c-nav__scroll-button--Width) * -1);
14539
+ transform: translateX(-100%);
14602
14540
  }
14603
14541
 
14604
- .pf-c-nav .pf-c-menu.pf-m-left {
14605
- --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
14606
- --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
14542
+ .pf-c-nav__scroll-button:nth-of-type(1)::before {
14543
+ right: 0;
14607
14544
  }
14608
14545
 
14609
- .pf-c-nav .pf-c-menu .pf-c-divider {
14610
- margin-top: 0;
14611
- margin-bottom: 0;
14546
+ .pf-c-nav__scroll-button:nth-of-type(2) {
14547
+ --pf-c-nav__scroll-button--before--BorderLeftWidth: var(--pf-c-nav__scroll-button--before--BorderWidth);
14548
+ margin-left: calc(var(--pf-c-nav__scroll-button--Width) * -1);
14549
+ transform: translateX(100%);
14612
14550
  }
14613
14551
 
14614
- .pf-c-nav .pf-c-menu__item {
14552
+ .pf-c-nav__scroll-button:nth-of-type(2)::before {
14553
+ left: 0;
14554
+ }
14555
+
14556
+ :where(.pf-theme-dark) .pf-c-nav {
14557
+ --pf-c-nav__item--item__link--after--Top: -1px;
14558
+ --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);
14559
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
14560
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
14561
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
14562
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--300);
14563
+ --pf-c-nav__link--before--BorderColor: var(--pf-global--BorderColor--100);
14564
+ --pf-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
14565
+ --pf-c-nav__section-title--Color: var(--pf-global--Color--200);
14566
+ --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BorderColor--100);
14567
+ --pf-c-nav__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
14568
+ --pf-c-nav--c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
14569
+ --pf-c-nav__link--hover--before--BorderBottomWidth: 0;
14570
+ --pf-c-nav__link--focus--before--BorderBottomWidth: 0;
14571
+ --pf-c-nav__link--active--before--BorderBottomWidth: 0;
14572
+ --pf-c-nav__link--m-current--before--BorderBottomWidth: 0;
14573
+ }
14574
+
14575
+ :where(.pf-theme-dark) .pf-c-nav__link::before {
14576
+ bottom: 0;
14577
+ }
14578
+
14579
+ :where(.pf-theme-dark) .pf-c-nav__link::after {
14580
+ top: var(--pf-c-nav__item--item__link--after--Top);
14581
+ }
14582
+
14583
+ :where(.pf-theme-dark) .pf-c-nav__item + .pf-c-nav__item {
14584
+ --pf-c-nav__link--after--Top: var(--pf-c-nav__item--item__link--after--Top);
14585
+ }
14586
+
14587
+ :where(.pf-theme-dark) .pf-c-nav__subnav {
14588
+ --pf-c-nav__item--item__link--after--Top: 0;
14589
+ }
14590
+
14591
+ :where(.pf-theme-dark) .pf-c-nav__section {
14592
+ --pf-c-nav__item--item__link--after--Top: 0;
14593
+ }
14594
+
14595
+ .pf-c-notification-badge {
14596
+ --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
14597
+ --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
14598
+ --pf-c-notification-badge--PaddingBottom: var(--pf-global--spacer--form-element);
14599
+ --pf-c-notification-badge--PaddingLeft: var(--pf-global--spacer--md);
14600
+ --pf-c-notification-badge--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
14601
+ --pf-c-notification-badge--MarginRight: calc(-1 * var(--pf-global--spacer--md));
14602
+ --pf-c-notification-badge--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
14603
+ --pf-c-notification-badge--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
14604
+ --pf-c-notification-badge--after--BorderColor: transparent;
14605
+ --pf-c-notification-badge--after--BorderRadius: var(--pf-global--BorderRadius--sm);
14606
+ --pf-c-notification-badge--after--BorderWidth: 0;
14607
+ --pf-c-notification-badge--after--Top: 0;
14608
+ --pf-c-notification-badge--after--Right: 0;
14609
+ --pf-c-notification-badge--after--Width: auto;
14610
+ --pf-c-notification-badge--after--Height: auto;
14611
+ --pf-c-notification-badge--after--BackgroundColor: transparent;
14612
+ --pf-c-notification-badge--after--TranslateX: 0;
14613
+ --pf-c-notification-badge--after--TranslateY: 0;
14614
+ --pf-c-notification-badge__i--Width: auto;
14615
+ --pf-c-notification-badge__i--Height: auto;
14616
+ --pf-c-notification-badge--m-read--after--BorderColor: transparent;
14617
+ --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
14618
+ --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
14619
+ --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
14620
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
14621
+ --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
14622
+ --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
14623
+ --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
14624
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
14625
+ --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
14626
+ --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
14627
+ --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
14628
+ --pf-c-notification-badge--pf-icon-attention-bell--LineHeight: var(--pf-global--LineHeight--sm);
14615
14629
  position: relative;
14616
- outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
14630
+ display: inline-block;
14631
+ padding: var(--pf-c-notification-badge--PaddingTop) var(--pf-c-notification-badge--PaddingRight) var(--pf-c-notification-badge--PaddingBottom) var(--pf-c-notification-badge--PaddingLeft);
14632
+ margin: var(--pf-c-notification-badge--MarginTop) var(--pf-c-notification-badge--MarginRight) var(--pf-c-notification-badge--MarginBottom) var(--pf-c-notification-badge--MarginLeft);
14633
+ background-color: var(--pf-c-notification-badge--after--BackgroundColor);
14634
+ border-radius: var(--pf-c-notification-badge--after--BorderRadius);
14617
14635
  }
14618
14636
 
14619
- .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
14637
+ .pf-c-notification-badge::before {
14620
14638
  position: absolute;
14621
- top: 0;
14639
+ top: var(--pf-c-notification-badge--after--Top);
14640
+ right: var(--pf-c-notification-badge--after--Right);
14641
+ bottom: 0;
14642
+ left: 0;
14643
+ width: var(--pf-c-notification-badge--after--Width);
14644
+ height: var(--pf-c-notification-badge--after--Height);
14622
14645
  content: "";
14646
+ border: var(--pf-c-notification-badge--after--BorderWidth) solid var(--pf-c-notification-badge--after--BorderColor);
14647
+ border-radius: var(--pf-c-notification-badge--after--BorderRadius);
14648
+ transform: translate(var(--pf-c-notification-badge--after--TranslateX), var(--pf-c-notification-badge--after--TranslateY));
14623
14649
  }
14624
14650
 
14625
- .pf-c-nav .pf-c-menu__item::before {
14626
- right: 0;
14627
- bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
14628
- left: 0;
14629
- border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
14651
+ .pf-c-notification-badge > i {
14652
+ width: var(--pf-c-notification-badge__i--Width);
14653
+ height: var(--pf-c-notification-badge__i--Height);
14630
14654
  }
14631
14655
 
14632
- .pf-c-nav .pf-c-menu__item::after {
14633
- bottom: 0;
14634
- left: 0;
14635
- border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
14656
+ .pf-c-notification-badge > * {
14657
+ position: relative;
14636
14658
  }
14637
14659
 
14638
- .pf-c-nav .pf-c-menu__item.pf-m-current {
14639
- --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
14640
- --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
14641
- background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
14660
+ .pf-c-notification-badge .pf-icon-attention-bell,
14661
+ .pf-c-notification-badge .pf-icon-bell {
14662
+ display: inline-block;
14663
+ line-height: var(--pf-c-notification-badge--pf-icon-attention-bell--LineHeight);
14642
14664
  }
14643
14665
 
14644
- .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) {
14645
- --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
14666
+ .pf-c-notification-badge .pf-icon-attention-bell::before,
14667
+ .pf-c-notification-badge .pf-icon-bell::before {
14668
+ vertical-align: bottom;
14646
14669
  }
14647
14670
 
14648
- .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item {
14649
- --pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
14671
+ .pf-c-notification-badge.pf-m-read {
14672
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
14673
+ --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
14674
+ color: var(--pf-c-notification-badge--m-read--Color, inherit);
14650
14675
  }
14651
14676
 
14652
- .pf-c-nav .pf-c-menu__item-toggle-icon {
14653
- margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
14677
+ .pf-c-notification-badge.pf-m-unread {
14678
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--after--BackgroundColor);
14679
+ color: var(--pf-c-notification-badge--m-unread--Color);
14654
14680
  }
14655
14681
 
14656
- .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
14657
- content: none;
14682
+ .pf-c-notification-badge.pf-m-unread:hover {
14683
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--hover--after--BackgroundColor);
14658
14684
  }
14659
14685
 
14660
- .pf-c-nav.pf-m-horizontal, .pf-c-nav.pf-m-tertiary, .pf-c-nav.pf-m-horizontal-subnav {
14661
- overflow: hidden;
14686
+ .pf-c-notification-badge.pf-m-attention {
14687
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--after--BackgroundColor);
14688
+ color: var(--pf-c-notification-badge--m-attention--Color);
14662
14689
  }
14663
14690
 
14664
- .pf-c-nav.pf-m-horizontal,
14665
- .pf-c-nav.pf-m-horizontal .pf-c-nav__list, .pf-c-nav.pf-m-tertiary,
14666
- .pf-c-nav.pf-m-tertiary .pf-c-nav__list, .pf-c-nav.pf-m-horizontal-subnav,
14667
- .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list {
14668
- position: relative;
14669
- display: flex;
14691
+ .pf-c-notification-badge.pf-m-attention:hover {
14692
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
14670
14693
  }
14671
14694
 
14672
- .pf-c-nav.pf-m-horizontal .pf-c-nav__list, .pf-c-nav.pf-m-tertiary .pf-c-nav__list, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list {
14673
- flex: 1;
14674
- max-width: 100%;
14675
- overflow-x: auto;
14676
- white-space: nowrap;
14677
- scroll-snap-type: var(--pf-c-nav__list--ScrollSnapType);
14678
- -webkit-overflow-scrolling: touch;
14679
- scrollbar-width: none;
14680
- -ms-overflow-style: -ms-autohiding-scrollbar;
14695
+ .pf-c-notification-badge.pf-m-expanded {
14696
+ --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
14697
+ --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
14698
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
14699
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
14681
14700
  }
14682
14701
 
14683
- .pf-c-nav.pf-m-horizontal .pf-c-nav__list::-webkit-scrollbar, .pf-c-nav.pf-m-tertiary .pf-c-nav__list::-webkit-scrollbar, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__list::-webkit-scrollbar {
14684
- display: none;
14702
+ .pf-c-notification-badge__count {
14703
+ margin-left: var(--pf-c-notification-badge__count--MarginLeft);
14685
14704
  }
14686
14705
 
14687
- .pf-c-nav.pf-m-horizontal .pf-c-nav__item, .pf-c-nav.pf-m-tertiary .pf-c-nav__item, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__item {
14688
- display: flex;
14689
- scroll-snap-align: var(--pf-c-nav__item--ScrollSnapAlign);
14706
+ :where(.pf-theme-dark) .pf-c-notification-badge {
14707
+ --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
14708
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
14709
+ --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
14690
14710
  }
14691
14711
 
14692
- .pf-c-nav.pf-m-horizontal .pf-c-nav__link, .pf-c-nav.pf-m-tertiary .pf-c-nav__link, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__link {
14693
- align-items: center;
14694
- align-self: stretch;
14695
- white-space: nowrap;
14712
+ .pf-c-notification-drawer {
14713
+ --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--200);
14714
+ --pf-c-notification-drawer__header--PaddingTop: var(--pf-global--spacer--md);
14715
+ --pf-c-notification-drawer__header--PaddingRight: var(--pf-global--spacer--md);
14716
+ --pf-c-notification-drawer__header--PaddingBottom: var(--pf-global--spacer--md);
14717
+ --pf-c-notification-drawer__header--PaddingLeft: var(--pf-global--spacer--md);
14718
+ --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--100);
14719
+ --pf-c-notification-drawer__header--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
14720
+ --pf-c-notification-drawer__header--ZIndex: var(--pf-global--ZIndex--sm);
14721
+ --pf-c-notification-drawer__header-title--FontSize: var(--pf-global--FontSize--xl);
14722
+ --pf-c-notification-drawer__header-status--MarginLeft: var(--pf-global--spacer--md);
14723
+ --pf-c-notification-drawer__body--ZIndex: var(--pf-global--ZIndex--xs);
14724
+ --pf-c-notification-drawer__list-item--PaddingTop: var(--pf-global--spacer--md);
14725
+ --pf-c-notification-drawer__list-item--PaddingRight: var(--pf-global--spacer--md);
14726
+ --pf-c-notification-drawer__list-item--PaddingBottom: var(--pf-global--spacer--md);
14727
+ --pf-c-notification-drawer__list-item--PaddingLeft: var(--pf-global--spacer--md);
14728
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--100);
14729
+ --pf-c-notification-drawer__list-item--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
14730
+ --pf-c-notification-drawer__list-item--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14731
+ --pf-c-notification-drawer__list-item--BorderBottomColor: transparent;
14732
+ --pf-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
14733
+ --pf-c-notification-drawer__list-item--before--Width: var(--pf-global--BorderWidth--lg);
14734
+ --pf-c-notification-drawer__list-item--before--Top: 0;
14735
+ --pf-c-notification-drawer__list-item--before--Bottom: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
14736
+ --pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-global--info-color--100);
14737
+ --pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor: var(--pf-global--info-color--100);
14738
+ --pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-global--warning-color--100);
14739
+ --pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor: var(--pf-global--warning-color--100);
14740
+ --pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-global--danger-color--100);
14741
+ --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
14742
+ --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
14743
+ --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
14744
+ --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
14745
+ --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
14746
+ --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
14747
+ --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
14748
+ --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
14749
+ --pf-c-notification-drawer__list-item--m-read--before--Bottom: 0;
14750
+ --pf-c-notification-drawer__list-item--m-read--before--BackgroundColor: transparent;
14751
+ --pf-c-notification-drawer__list-item--list-item--m-read--before--Top: 0;
14752
+ --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: inset var(--pf-global--BoxShadow--sm-bottom);
14753
+ --pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex: var(--pf-global--ZIndex--xs);
14754
+ --pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--md-top), var(--pf-global--BoxShadow--md-bottom);
14755
+ --pf-c-notification-drawer__list-item-header--MarginBottom: var(--pf-global--spacer--xs);
14756
+ --pf-c-notification-drawer__list-item-header-icon--Color: inherit;
14757
+ --pf-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-global--spacer--sm);
14758
+ --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-global--FontWeight--bold);
14759
+ --pf-c-notification-drawer__list-item-header-title--max-lines: 1;
14760
+ --pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight: var(--pf-global--FontWeight--normal);
14761
+ --pf-c-notification-drawer__list-item-description--MarginBottom: var(--pf-global--spacer--sm);
14762
+ --pf-c-notification-drawer__list-item-timestamp--Color: var(--pf-global--Color--200);
14763
+ --pf-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-global--FontSize--sm);
14764
+ --pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth: var(--pf-global--BorderWidth--sm);
14765
+ --pf-c-notification-drawer__group--m-expanded--group--BorderTopColor: var(--pf-global--BorderColor--100);
14766
+ --pf-c-notification-drawer__group--m-expanded--MinHeight: 0;
14767
+ --pf-c-notification-drawer__group-toggle--PaddingTop: var(--pf-global--spacer--md);
14768
+ --pf-c-notification-drawer__group-toggle--PaddingRight: var(--pf-global--spacer--md);
14769
+ --pf-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-global--spacer--md);
14770
+ --pf-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-global--spacer--md);
14771
+ --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
14772
+ --pf-c-notification-drawer__group-toggle--BorderColor: var(--pf-global--BorderColor--100);
14773
+ --pf-c-notification-drawer__group-toggle--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14774
+ --pf-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
14775
+ --pf-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-global--spacer--md);
14776
+ --pf-c-notification-drawer__group-toggle-title--max-lines: 1;
14777
+ --pf-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-global--spacer--md);
14778
+ --pf-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-global--spacer--md);
14779
+ --pf-c-notification-drawer__group-toggle-icon--Color: var(--pf-global--Color--200);
14780
+ --pf-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
14781
+ --pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
14782
+ display: flex;
14783
+ flex-direction: column;
14784
+ height: 100%;
14785
+ background-color: var(--pf-c-notification-drawer--BackgroundColor);
14696
14786
  }
14697
14787
 
14698
- .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::before, .pf-c-nav.pf-m-horizontal-subnav .pf-c-nav__link::before {
14699
- top: auto;
14700
- bottom: 0;
14788
+ .pf-c-notification-drawer__header {
14789
+ position: relative;
14790
+ z-index: var(--pf-c-notification-drawer__header--ZIndex);
14791
+ display: flex;
14792
+ flex-shrink: 0;
14793
+ align-items: baseline;
14794
+ padding: var(--pf-c-notification-drawer__header--PaddingTop) var(--pf-c-notification-drawer__header--PaddingRight) var(--pf-c-notification-drawer__header--PaddingBottom) var(--pf-c-notification-drawer__header--PaddingLeft);
14795
+ background-color: var(--pf-c-notification-drawer__header--BackgroundColor);
14796
+ box-shadow: var(--pf-c-notification-drawer__header--BoxShadow);
14701
14797
  }
14702
14798
 
14703
- .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before {
14704
- right: var(--pf-c-nav--m-horizontal__link--Right);
14705
- left: var(--pf-c-nav--m-horizontal__link--Left);
14799
+ .pf-c-notification-drawer__header-title {
14800
+ font-size: var(--pf-c-notification-drawer__header-title--FontSize);
14706
14801
  }
14707
14802
 
14708
- .pf-c-nav.pf-m-tertiary .pf-c-nav__link::before {
14709
- right: var(--pf-c-nav--m-tertiary__link--Right);
14710
- left: var(--pf-c-nav--m-tertiary__link--Left);
14803
+ .pf-c-notification-drawer__header-status {
14804
+ margin-left: var(--pf-c-notification-drawer__header-status--MarginLeft);
14711
14805
  }
14712
14806
 
14713
- .pf-c-nav.pf-m-light {
14714
- --pf-c-nav__item--before--BorderColor: var(--pf-c-nav--m-light__item--before--BorderColor);
14715
- --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);
14716
- --pf-c-nav__link--Color: var(--pf-c-nav--m-light__link--Color);
14717
- --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-light__link--hover--Color);
14718
- --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-light__link--focus--Color);
14719
- --pf-c-nav__link--active--Color: var(--pf-c-nav--m-light__link--active--Color);
14720
- --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-light__link--m-current--Color);
14721
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-light__link--hover--BackgroundColor);
14722
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-light__link--focus--BackgroundColor);
14723
- --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-light__link--active--BackgroundColor);
14724
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-light__link--m-current--BackgroundColor);
14725
- --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
14726
- --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
14727
- --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__link--m-current--after--BorderColor);
14728
- --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--hover--after--BorderColor);
14729
- --pf-c-nav__subnav__link--focus--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--focus--after--BorderColor);
14730
- --pf-c-nav__subnav__link--active--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--active--after--BorderColor);
14731
- --pf-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor);
14732
- --pf-c-nav__section-title--Color: var(--pf-c-nav--m-light__section-title--Color);
14733
- --pf-c-nav__section-title--BorderBottomColor: var(--pf-c-nav--m-light__section-title--BorderBottomColor);
14807
+ .pf-c-notification-drawer__header-action {
14808
+ display: flex;
14809
+ align-items: center;
14810
+ margin-left: auto;
14734
14811
  }
14735
14812
 
14736
- .pf-c-nav.pf-m-light .pf-c-divider {
14737
- --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-light--c-divider--BackgroundColor);
14813
+ .pf-c-notification-drawer__body {
14814
+ overflow-y: auto;
14815
+ box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
14738
14816
  }
14739
14817
 
14740
- .pf-c-nav.pf-m-horizontal {
14741
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-horizontal__link--PaddingTop);
14742
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal__link--PaddingRight);
14743
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal__link--PaddingBottom);
14744
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal__link--PaddingLeft);
14745
- --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal__link--Right);
14746
- --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal__link--Left);
14747
- --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal__link--Color);
14748
- --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal__link--hover--Color);
14749
- --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal__link--active--Color);
14750
- --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal__link--focus--Color);
14751
- --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-horizontal__link--m-current--Color);
14752
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-horizontal__link--BackgroundColor);
14753
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-horizontal__link--hover--BackgroundColor);
14754
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-horizontal__link--focus--BackgroundColor);
14755
- --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-horizontal__link--active--BackgroundColor);
14756
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-horizontal__link--m-current--BackgroundColor);
14757
- --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-horizontal__link--before--BorderColor);
14758
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--before--BorderWidth);
14759
- --pf-c-nav__link--hover--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--hover--before--BorderWidth);
14760
- --pf-c-nav__link--focus--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--focus--before--BorderWidth);
14761
- --pf-c-nav__link--active--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--active--before--BorderWidth);
14762
- --pf-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-c-nav--m-horizontal__link--m-current--before--BorderWidth);
14818
+ .pf-c-notification-drawer__list-item {
14819
+ position: relative;
14820
+ display: grid;
14821
+ grid-template-columns: 1fr auto;
14822
+ padding: var(--pf-c-notification-drawer__list-item--PaddingTop) var(--pf-c-notification-drawer__list-item--PaddingRight) var(--pf-c-notification-drawer__list-item--PaddingBottom) var(--pf-c-notification-drawer__list-item--PaddingLeft);
14823
+ background-color: var(--pf-c-notification-drawer__list-item--BackgroundColor);
14824
+ border-bottom: var(--pf-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-c-notification-drawer__list-item--BorderBottomColor);
14825
+ outline-offset: var(--pf-c-notification-drawer__list-item--OutlineOffset);
14826
+ box-shadow: var(--pf-c-notification-drawer__list-item--BoxShadow);
14763
14827
  }
14764
14828
 
14765
- .pf-c-nav.pf-m-tertiary {
14766
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-tertiary__link--PaddingTop);
14767
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-tertiary__link--PaddingRight);
14768
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-tertiary__link--PaddingBottom);
14769
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-tertiary__link--PaddingLeft);
14770
- --pf-c-nav__link--Right: var(--pf-c-nav--m-tertiary__link--Right);
14771
- --pf-c-nav__link--Left: var(--pf-c-nav--m-tertiary__link--Left);
14772
- --pf-c-nav__link--Color: var(--pf-c-nav--m-tertiary__link--Color);
14773
- --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-tertiary__link--hover--Color);
14774
- --pf-c-nav__link--active--Color: var(--pf-c-nav--m-tertiary__link--active--Color);
14775
- --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-tertiary__link--focus--Color);
14776
- --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-tertiary__link--m-current--Color);
14777
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-tertiary__link--BackgroundColor);
14778
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-tertiary__link--hover--BackgroundColor);
14779
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-tertiary__link--focus--BackgroundColor);
14780
- --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-tertiary__link--active--BackgroundColor);
14781
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-tertiary__link--m-current--BackgroundColor);
14782
- --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-tertiary__link--before--BorderColor);
14783
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--before--BorderWidth);
14784
- --pf-c-nav__link--hover--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--hover--before--BorderWidth);
14785
- --pf-c-nav__link--focus--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--focus--before--BorderWidth);
14786
- --pf-c-nav__link--active--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--active--before--BorderWidth);
14787
- --pf-c-nav__link--m-current--before--BorderBottomWidth: var(--pf-c-nav--m-tertiary__link--m-current--before--BorderWidth);
14788
- --pf-c-nav__scroll-button--Color: var(--pf-c-nav--m-tertiary__scroll-button--Color);
14789
- --pf-c-nav__scroll-button--hover--Color: var(--pf-c-nav--m-tertiary__scroll-button--hover--Color);
14790
- --pf-c-nav__scroll-button--focus--Color: var(--pf-c-nav--m-tertiary__scroll-button--focus--Color);
14791
- --pf-c-nav__scroll-button--active--Color: var(--pf-c-nav--m-tertiary__scroll-button--active--Color);
14792
- --pf-c-nav__scroll-button--disabled--Color: var(--pf-c-nav--m-tertiary__scroll-button--disabled--Color);
14793
- --pf-c-nav__scroll-button--before--BorderColor: var(--pf-c-nav--m-tertiary__scroll-button--before--BorderColor);
14794
- --pf-c-nav__scroll-button--disabled--before--BorderColor: var(--pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor);
14829
+ .pf-c-notification-drawer__list-item.pf-m-read, .pf-c-notification-drawer__list-item:first-child {
14830
+ --pf-c-notification-drawer__list-item--BoxShadow: none;
14795
14831
  }
14796
14832
 
14797
- .pf-c-nav.pf-m-horizontal-subnav {
14798
- --pf-c-nav__link--FontSize: var(--pf-c-nav--m-horizontal-subnav__link--FontSize);
14799
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav--m-horizontal-subnav__link--PaddingTop);
14800
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav--m-horizontal-subnav__link--PaddingRight);
14801
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav--m-horizontal-subnav__link--PaddingBottom);
14802
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav--m-horizontal-subnav__link--PaddingLeft);
14803
- --pf-c-nav__link--Color: var(--pf-c-nav--m-horizontal-subnav__link--Color);
14804
- --pf-c-nav__link--Right: var(--pf-c-nav--m-horizontal-subnav__link--Right);
14805
- --pf-c-nav__link--Left: var(--pf-c-nav--m-horizontal-subnav__link--Left);
14806
- --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-horizontal-subnav__link--hover--Color);
14807
- --pf-c-nav__link--active--Color: var(--pf-c-nav--m-horizontal-subnav__link--active--Color);
14808
- --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-horizontal-subnav__link--focus--Color);
14809
- --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-horizontal-subnav__link--m-current--Color);
14810
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--BackgroundColor);
14811
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--hover--BackgroundColor);
14812
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--focus--BackgroundColor);
14813
- --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--active--BackgroundColor);
14814
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor);
14815
- --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--before--BorderColor);
14816
- --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--after--BorderColor);
14817
- --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderColor);
14818
- --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--active--after--BorderColor);
14819
- --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor);
14820
- --pf-c-nav__link--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth);
14821
- --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth);
14822
- --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth);
14823
- --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth);
14833
+ .pf-c-notification-drawer__list-item:not(.pf-m-read) + .pf-c-notification-drawer__list-item.pf-m-read {
14834
+ --pf-c-notification-drawer__list-item--BoxShadow: var(--pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow);
14835
+ --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--list-item--m-read--before--Top);
14824
14836
  }
14825
14837
 
14826
- .pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child {
14827
- --pf-c-nav__link--after--BorderLeftWidth: 0;
14828
- --pf-c-nav__link--hover--after--BorderLeftWidth: 0;
14829
- --pf-c-nav__link--active--after--BorderLeftWidth: 0;
14830
- --pf-c-nav__link--m-current--after--BorderLeftWidth: 0;
14838
+ .pf-c-notification-drawer__list-item::before {
14839
+ position: absolute;
14840
+ top: var(--pf-c-notification-drawer__list-item--before--Top);
14841
+ bottom: var(--pf-c-notification-drawer__list-item--before--Bottom);
14842
+ width: var(--pf-c-notification-drawer__list-item--before--Width);
14843
+ content: "";
14844
+ background-color: var(--pf-c-notification-drawer__list-item--before--BackgroundColor);
14831
14845
  }
14832
14846
 
14833
- .pf-c-nav .pf-c-divider {
14834
- --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--c-divider--BackgroundColor);
14835
- padding-right: var(--pf-c-nav--c-divider--PaddingRight);
14836
- padding-left: var(--pf-c-nav--c-divider--PaddingLeft);
14837
- margin-top: var(--pf-c-nav--c-divider--MarginTop);
14838
- margin-bottom: var(--pf-c-nav--c-divider--MarginBottom);
14847
+ .pf-c-notification-drawer__list-item.pf-m-info {
14848
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor);
14849
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
14839
14850
  }
14840
14851
 
14841
- .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button {
14842
- opacity: 1;
14852
+ .pf-c-notification-drawer__list-item.pf-m-warning {
14853
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor);
14854
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
14843
14855
  }
14844
14856
 
14845
- .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button:nth-of-type(1) {
14846
- margin-right: 0;
14847
- transform: translateX(0);
14857
+ .pf-c-notification-drawer__list-item.pf-m-danger {
14858
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor);
14859
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
14848
14860
  }
14849
14861
 
14850
- .pf-c-nav.pf-m-scrollable .pf-c-nav__scroll-button:nth-of-type(2) {
14851
- margin-left: 0;
14852
- transform: translateX(0);
14862
+ .pf-c-notification-drawer__list-item.pf-m-success {
14863
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
14864
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
14853
14865
  }
14854
14866
 
14855
- .pf-c-nav.pf-m-overflow-hidden {
14856
- overflow: hidden;
14867
+ .pf-c-notification-drawer__list-item.pf-m-default {
14868
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
14869
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
14857
14870
  }
14858
14871
 
14859
- .pf-c-nav__list {
14872
+ .pf-c-notification-drawer__list-item.pf-m-read {
14873
+ --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-c-notification-drawer__list-item--m-read--BorderBottomColor);
14874
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--BackgroundColor);
14875
+ --pf-c-notification-drawer__list-item--before--Top: var(--pf-c-notification-drawer__list-item--m-read--before--Top);
14876
+ --pf-c-notification-drawer__list-item--before--Bottom: var(--pf-c-notification-drawer__list-item--m-read--before--Bottom);
14877
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-read--before--BackgroundColor);
14878
+ --pf-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight);
14860
14879
  position: relative;
14861
- display: block;
14862
14880
  }
14863
14881
 
14864
- .pf-c-nav__item {
14865
- position: relative;
14866
- margin-top: var(--pf-c-nav__item--MarginTop);
14882
+ .pf-c-notification-drawer__list-item.pf-m-hoverable {
14883
+ cursor: pointer;
14867
14884
  }
14868
14885
 
14869
- .pf-c-nav__item.pf-m-expandable {
14870
- --pf-c-nav__link--before--BorderBottomWidth: 0;
14886
+ .pf-c-notification-drawer__list-item.pf-m-hoverable:hover {
14887
+ z-index: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--ZIndex);
14888
+ box-shadow: var(--pf-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow);
14871
14889
  }
14872
14890
 
14873
- .pf-c-nav__item.pf-m-expandable::before {
14874
- position: absolute;
14875
- right: 0;
14876
- bottom: calc(var(--pf-c-nav__item--before--BorderWidth) * -1);
14877
- left: 0;
14878
- content: "";
14879
- border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
14891
+ .pf-c-notification-drawer__list-item-header {
14892
+ display: flex;
14893
+ align-items: baseline;
14894
+ grid-column: 1/2;
14895
+ grid-row: 1/2;
14896
+ margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
14880
14897
  }
14881
14898
 
14882
- .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
14883
- transform: rotate(0);
14899
+ .pf-c-notification-drawer__list-item-header-icon {
14900
+ margin-right: var(--pf-c-notification-drawer__list-item-header-icon--MarginRight);
14901
+ color: var(--pf-c-notification-drawer__list-item-header-icon--Color);
14884
14902
  }
14885
14903
 
14886
- .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
14887
- --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
14888
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
14904
+ .pf-c-notification-drawer__list-item-header-title {
14905
+ font-weight: var(--pf-c-notification-drawer__list-item-header-title--FontWeight);
14906
+ word-break: break-word;
14889
14907
  }
14890
14908
 
14891
- @media screen and (min-width: 1200px) {
14892
- .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
14893
- border-bottom: none;
14894
- }
14909
+ .pf-c-notification-drawer__list-item-header-title.pf-m-truncate {
14910
+ display: -webkit-box;
14911
+ -webkit-box-orient: vertical;
14912
+ -webkit-line-clamp: var(--pf-c-notification-drawer__list-item-header-title--max-lines);
14913
+ overflow: hidden;
14895
14914
  }
14896
- .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
14897
- position: absolute;
14898
- top: 0;
14899
- right: 0;
14900
- bottom: 0;
14901
- left: 0;
14902
- pointer-events: none;
14903
- content: "";
14904
- border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
14915
+
14916
+ .pf-c-notification-drawer__list-item-action {
14917
+ grid-column: 2/3;
14918
+ grid-row: 1/3;
14905
14919
  }
14906
14920
 
14907
- .pf-c-nav__item .pf-c-nav__toggle-icon {
14908
- transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
14921
+ .pf-c-notification-drawer__list-item-description {
14922
+ grid-row: 2/3;
14923
+ grid-column: 1/2;
14924
+ margin-bottom: var(--pf-c-notification-drawer__list-item-description--MarginBottom);
14925
+ word-break: break-word;
14909
14926
  }
14910
14927
 
14911
- .pf-c-nav__item.pf-m-flyout:hover {
14912
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
14913
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
14928
+ .pf-c-notification-drawer__list-item-timestamp {
14929
+ grid-row: 3/4;
14930
+ grid-column: 1/2;
14931
+ font-size: var(--pf-c-notification-drawer__list-item-timestamp--FontSize);
14932
+ color: var(--pf-c-notification-drawer__list-item-timestamp--Color);
14914
14933
  }
14915
14934
 
14916
- .pf-c-nav__item.pf-m-flyout:focus {
14917
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
14918
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
14935
+ .pf-c-notification-drawer__group-list {
14936
+ display: flex;
14937
+ flex-direction: column;
14919
14938
  }
14920
14939
 
14921
- .pf-c-nav__item.pf-m-flyout:active {
14922
- --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
14923
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
14940
+ .pf-c-notification-drawer__group.pf-m-expanded {
14941
+ min-height: var(--pf-c-notification-drawer__group--m-expanded--MinHeight);
14924
14942
  }
14925
14943
 
14926
- .pf-c-nav__item.pf-m-flyout .pf-c-menu {
14927
- --pf-c-menu--MinWidth: 100%;
14928
- --pf-c-menu--BoxShadow: var(--pf-c-nav__item--m-flyout--c-menu--BoxShadow);
14929
- --pf-c-menu--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu--BackgroundColor);
14930
- --pf-c-menu__list--PaddingTop: 0;
14931
- --pf-c-menu__list--PaddingBottom: 0;
14932
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor);
14933
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor);
14934
- --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
14935
- --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
14936
- --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
14937
- --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
14938
- --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
14939
- --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
14940
- --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
14941
- --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
14942
- --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
14943
- --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
14944
- position: absolute;
14945
- top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
14946
- left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
14944
+ .pf-c-notification-drawer__group.pf-m-expanded + .pf-c-notification-drawer__group {
14945
+ border-top: var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-c-notification-drawer__group--m-expanded--group--BorderTopColor);
14947
14946
  }
14948
14947
 
14949
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
14950
- top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
14948
+ .pf-c-notification-drawer__group .pf-c-notification-drawer__list-item:last-child {
14949
+ --pf-c-notification-drawer__list-item--BorderBottomWidth: 0;
14950
+ --pf-c-notification-drawer__list-item--before--Bottom: 0;
14951
14951
  }
14952
14952
 
14953
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
14954
- --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
14955
- --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
14953
+ .pf-c-notification-drawer__group-toggle {
14954
+ display: flex;
14955
+ align-items: baseline;
14956
+ width: 100%;
14957
+ padding: var(--pf-c-notification-drawer__group-toggle--PaddingTop) var(--pf-c-notification-drawer__group-toggle--PaddingRight) var(--pf-c-notification-drawer__group-toggle--PaddingBottom) var(--pf-c-notification-drawer__group-toggle--PaddingLeft);
14958
+ background-color: var(--pf-c-notification-drawer__group-toggle--BackgroundColor);
14959
+ border: solid var(--pf-c-notification-drawer__group-toggle--BorderColor);
14960
+ border-width: 0 0 var(--pf-c-notification-drawer__group-toggle--BorderBottomWidth) 0;
14961
+ outline-offset: var(--pf-c-notification-drawer__group-toggle--OutlineOffset);
14956
14962
  }
14957
14963
 
14958
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
14959
- position: relative;
14960
- outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
14964
+ .pf-c-notification-drawer__group-toggle-title {
14965
+ display: -webkit-box;
14966
+ -webkit-box-orient: vertical;
14967
+ -webkit-line-clamp: var(--pf-c-notification-drawer__group-toggle-title--max-lines);
14968
+ overflow: hidden;
14969
+ flex: 1;
14970
+ margin-right: var(--pf-c-notification-drawer__group-toggle-title--MarginRight);
14971
+ text-align: left;
14972
+ word-break: break-word;
14961
14973
  }
14962
14974
 
14963
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item::before {
14964
- position: absolute;
14965
- right: 0;
14966
- bottom: 0;
14967
- left: 0;
14968
- content: "";
14969
- border-bottom: var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
14975
+ .pf-c-notification-drawer__group-toggle-count {
14976
+ margin-right: var(--pf-c-notification-drawer__group-toggle-count--MarginRight);
14977
+ margin-left: auto;
14970
14978
  }
14971
14979
 
14972
- .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
14973
- position: absolute;
14974
- top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
14975
- bottom: 0;
14976
- left: 0;
14977
- content: "";
14978
- border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
14980
+ .pf-c-notification-drawer__group-toggle-icon {
14981
+ margin-right: var(--pf-c-notification-drawer__group-toggle-icon--MarginRight);
14982
+ color: var(--pf-c-notification-drawer__group-toggle-icon--Color);
14983
+ transition: var(--pf-c-notification-drawer__group-toggle-icon--Transition);
14979
14984
  }
14980
14985
 
14981
- .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
14982
- left: 0;
14983
- z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
14986
+ .pf-c-notification-drawer__group.pf-m-expanded .pf-c-notification-drawer__group-toggle-icon {
14987
+ transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
14984
14988
  }
14985
14989
 
14986
- .pf-c-nav__link {
14990
+ :where(.pf-theme-dark) .pf-c-notification-drawer {
14991
+ --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
14992
+ --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
14993
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
14994
+ --pf-c-notification-drawer__list-item--BoxShadow: none;
14995
+ --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
14996
+ --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
14997
+ --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
14998
+ --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
14999
+ }
15000
+
15001
+ .pf-c-options-menu {
15002
+ --pf-c-options-menu__toggle--BackgroundColor: transparent;
15003
+ --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
15004
+ --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
15005
+ --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
15006
+ --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
15007
+ --pf-c-options-menu__toggle--MinWidth: 0;
15008
+ --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
15009
+ --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
15010
+ --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
15011
+ --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
15012
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
15013
+ --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
15014
+ --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
15015
+ --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
15016
+ --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
15017
+ --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
15018
+ --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
15019
+ --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
15020
+ --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
15021
+ --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
15022
+ --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
15023
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
15024
+ --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
15025
+ --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
15026
+ --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
15027
+ --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
15028
+ --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
15029
+ --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
15030
+ --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
15031
+ --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
15032
+ --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
15033
+ --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
15034
+ --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
15035
+ --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
15036
+ --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
15037
+ --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
15038
+ --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
15039
+ --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
15040
+ --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
15041
+ --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
15042
+ --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
15043
+ --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
15044
+ --pf-c-options-menu--m-top__menu--Top: 0;
15045
+ --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
15046
+ --pf-c-options-menu__menu-item--BackgroundColor: transparent;
15047
+ --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
15048
+ --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
15049
+ --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
15050
+ --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
15051
+ --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
15052
+ --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
15053
+ --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
15054
+ --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
15055
+ --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
15056
+ --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
15057
+ --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
15058
+ --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
15059
+ --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
15060
+ --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
15061
+ --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
15062
+ --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
15063
+ --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
15064
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
15065
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
15066
+ --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
15067
+ --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
15068
+ --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
14987
15069
  position: relative;
14988
- display: flex;
14989
- align-items: baseline;
14990
- padding: var(--pf-c-nav__link--PaddingTop) var(--pf-c-nav__link--PaddingRight) var(--pf-c-nav__link--PaddingBottom) var(--pf-c-nav__link--PaddingLeft);
14991
- font-size: var(--pf-c-nav__link--FontSize);
14992
- font-weight: var(--pf-c-nav__link--FontWeight);
14993
- color: var(--pf-c-nav__link--Color);
14994
- background-color: var(--pf-c-nav__link--BackgroundColor);
14995
- outline-offset: var(--pf-c-nav__link--OutlineOffset);
15070
+ display: inline-block;
15071
+ max-width: 100%;
14996
15072
  }
14997
15073
 
14998
- .pf-c-nav__link::after, .pf-c-nav__link::before {
14999
- position: absolute;
15000
- content: "";
15001
- border: 0 solid;
15074
+ .pf-c-options-menu .pf-c-divider {
15075
+ margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
15076
+ margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom);
15002
15077
  }
15003
15078
 
15004
- .pf-c-nav__link::before {
15005
- right: 0;
15006
- bottom: calc(var(--pf-c-nav__link--before--BorderBottomWidth) * -1);
15007
- left: 0;
15008
- border-color: var(--pf-c-nav__link--before--BorderColor);
15009
- border-bottom-width: var(--pf-c-nav__link--before--BorderBottomWidth);
15079
+ .pf-c-options-menu .pf-c-divider:last-child {
15080
+ --pf-c-options-menu--c-divider--MarginBottom: 0;
15010
15081
  }
15011
15082
 
15012
- .pf-c-nav__link::after {
15083
+ .pf-c-options-menu__toggle:not(.pf-m-plain)::before,
15084
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
15085
+ position: absolute;
15013
15086
  top: 0;
15087
+ right: 0;
15014
15088
  bottom: 0;
15015
15089
  left: 0;
15016
- border: 0 solid;
15017
- border-color: var(--pf-c-nav__link--after--BorderColor);
15018
- border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
15019
- }
15020
-
15021
- .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
15022
- color: var(--pf-c-nav__link--hover--Color);
15023
- background-color: var(--pf-c-nav__link--hover--BackgroundColor);
15024
- }
15025
-
15026
- .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
15027
- border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
15028
- }
15029
-
15030
- .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
15031
- border-color: var(--pf-c-nav__link--hover--after--BorderColor);
15032
- border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
15033
- }
15034
-
15035
- .pf-c-nav__link:focus {
15036
- color: var(--pf-c-nav__link--focus--Color);
15037
- background-color: var(--pf-c-nav__link--focus--BackgroundColor);
15038
- }
15039
-
15040
- .pf-c-nav__link:focus::before {
15041
- border-bottom-width: var(--pf-c-nav__link--focus--before--BorderBottomWidth);
15042
- }
15043
-
15044
- .pf-c-nav__link:focus::after {
15045
- border-color: var(--pf-c-nav__link--focus--after--BorderColor);
15046
- border-left-width: var(--pf-c-nav__link--focus--after--BorderLeftWidth);
15047
- }
15048
-
15049
- .pf-c-nav__link:active {
15050
- color: var(--pf-c-nav__link--active--Color);
15051
- background-color: var(--pf-c-nav__link--active--BackgroundColor);
15052
- }
15053
-
15054
- .pf-c-nav__link:active::before {
15055
- border-bottom-width: var(--pf-c-nav__link--active--before--BorderBottomWidth);
15056
- }
15057
-
15058
- .pf-c-nav__link:active::after {
15059
- border-color: var(--pf-c-nav__link--active--after--BorderColor);
15060
- border-left-width: var(--pf-c-nav__link--active--after--BorderLeftWidth);
15090
+ content: "";
15091
+ border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
15092
+ border-color: var(--pf-c-options-menu__toggle--BorderTopColor) var(--pf-c-options-menu__toggle--BorderRightColor) var(--pf-c-options-menu__toggle--BorderBottomColor) var(--pf-c-options-menu__toggle--BorderLeftColor);
15061
15093
  }
15062
15094
 
15063
- .pf-c-nav__link.pf-m-current, .pf-c-nav__link.pf-m-current:hover, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link {
15064
- color: var(--pf-c-nav__link--m-current--Color);
15065
- background-color: var(--pf-c-nav__link--m-current--BackgroundColor);
15095
+ .pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
15096
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
15097
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor);
15066
15098
  }
15067
15099
 
15068
- .pf-c-nav__link.pf-m-current::before, .pf-c-nav__link.pf-m-current:hover::before, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::before {
15069
- border-bottom-width: var(--pf-c-nav__link--m-current--before--BorderBottomWidth);
15100
+ .pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
15101
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
15102
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
15103
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
15104
+ border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth);
15070
15105
  }
15071
15106
 
15072
- .pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current:hover::after, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
15073
- border-color: var(--pf-c-nav__link--m-current--after--BorderColor);
15074
- border-left-width: var(--pf-c-nav__link--m-current--after--BorderLeftWidth);
15107
+ .pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
15108
+ .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
15109
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
15110
+ border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth);
15075
15111
  }
15076
15112
 
15077
- .pf-c-nav__link, .pf-c-nav__link:hover, .pf-c-nav__link:focus, .pf-c-nav__link:active {
15078
- width: 100%;
15079
- text-decoration: none;
15113
+ .pf-c-options-menu__toggle {
15114
+ position: relative;
15115
+ display: flex;
15116
+ align-items: center;
15117
+ justify-content: space-between;
15118
+ min-width: var(--pf-c-options-menu__toggle--MinWidth);
15119
+ max-width: 100%;
15120
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
15121
+ line-height: var(--pf-c-options-menu__toggle--LineHeight);
15122
+ color: var(--pf-c-options-menu__toggle--Color);
15123
+ background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
15080
15124
  border: none;
15081
15125
  }
15082
15126
 
15083
- .pf-c-nav__subnav {
15084
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__subnav__link--PaddingTop);
15085
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__subnav__link--PaddingRight);
15086
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__subnav__link--PaddingBottom);
15087
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__link--PaddingLeft);
15088
- --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__link--FontSize);
15089
- --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav__subnav__link--hover--after--BorderColor);
15090
- --pf-c-nav__link--focus--after--BorderColor: var(--pf-c-nav__subnav__link--focus--after--BorderColor);
15091
- --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav__subnav__link--active--after--BorderColor);
15092
- --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav__subnav__link--m-current--after--BorderColor);
15093
- --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--hover--after--BorderWidth);
15094
- --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--focus--after--BorderWidth);
15095
- --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--active--after--BorderWidth);
15096
- --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__subnav__link--m-current--after--BorderWidth);
15097
- --pf-c-nav--c-divider--PaddingRight: var(--pf-c-nav__subnav--c-divider--PaddingRight);
15098
- --pf-c-nav--c-divider--PaddingLeft: var(--pf-c-nav__subnav--c-divider--PaddingLeft);
15099
- max-height: var(--pf-c-nav__subnav--MaxHeight);
15100
- padding-bottom: var(--pf-c-nav__subnav--PaddingBottom);
15101
- padding-left: var(--pf-c-nav__subnav--PaddingLeft);
15102
- transition: var(--pf-c-nav--Transition);
15103
- scrollbar-width: none;
15104
- -ms-overflow-style: -ms-autohiding-scrollbar;
15105
- }
15106
-
15107
- .pf-c-nav__subnav .pf-c-nav__subnav {
15108
- --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
15109
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
15110
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
15111
- }
15112
-
15113
- .pf-c-nav__subnav.pf-m-flyout {
15114
- width: 100%;
15115
- }
15116
-
15117
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__subnav {
15118
- --pf-c-nav__subnav--MaxHeight: var(--pf-c-nav__item--m-expanded__subnav--MaxHeight);
15119
- overflow-y: auto;
15120
- opacity: 1;
15127
+ .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
15128
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
15129
+ border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
15121
15130
  }
15122
15131
 
15123
- .pf-c-nav__subnav::-webkit-scrollbar {
15124
- display: none;
15132
+ .pf-c-options-menu__toggle.pf-m-plain {
15133
+ --pf-c-options-menu__toggle-icon--Color: var(--pf-c-options-menu--m-plain__toggle-icon--Color);
15125
15134
  }
15126
15135
 
15127
- .pf-c-nav__toggle {
15128
- flex: none;
15129
- padding-right: var(--pf-c-nav__toggle--PaddingRight);
15130
- padding-left: var(--pf-c-nav__toggle--PaddingLeft);
15131
- margin-left: auto;
15132
- font-size: var(--pf-c-nav__toggle--FontSize);
15133
- line-height: 1;
15136
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
15137
+ --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
15138
+ --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
15139
+ display: inline-block;
15140
+ color: var(--pf-c-options-menu__toggle--m-plain--Color);
15134
15141
  }
15135
15142
 
15136
- .pf-c-nav__toggle.pf-m-start {
15137
- margin-right: var(--pf-c-nav__toggle--m-start--MarginRight);
15138
- margin-left: calc(var(--pf-c-nav__toggle--PaddingRight) * -1);
15143
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
15144
+ line-height: var(--pf-c-options-menu__toggle--LineHeight);
15139
15145
  }
15140
15146
 
15141
- .pf-c-nav__toggle-icon {
15142
- display: inline-block;
15143
- transition: var(--pf-c-nav__toggle-icon--Transition);
15147
+ .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
15148
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
15149
+ --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
15144
15150
  }
15145
15151
 
15146
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
15147
- transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
15152
+ .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
15153
+ --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
15148
15154
  }
15149
15155
 
15150
- .pf-c-nav__section {
15151
- --pf-c-nav__item--MarginTop: var(--pf-c-nav__section__item--MarginTop);
15152
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__section__link--PaddingTop);
15153
- --pf-c-nav__link--PaddingRight: var(--pf-c-nav__section__link--PaddingRight);
15154
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__section__link--PaddingBottom);
15155
- --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__section__link--PaddingLeft);
15156
- --pf-c-nav__link--FontSize: var(--pf-c-nav__section__link--FontSize);
15157
- --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__section__link--before--BorderBottomWidth);
15158
- --pf-c-nav__link--hover--after--BorderColor: var(--pf-c-nav__section__link--hover--after--BorderColor);
15159
- --pf-c-nav__link--focus--after--BorderColor: var(--pf-c-nav__section__link--focus--after--BorderColor);
15160
- --pf-c-nav__link--active--after--BorderColor: var(--pf-c-nav__section__link--active--after--BorderColor);
15161
- --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav__section__link--m-current--after--BorderColor);
15162
- --pf-c-nav__link--hover--after--BorderLeftWidth: var(--pf-c-nav__section__link--hover--after--BorderWidth);
15163
- --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__section__link--focus--after--BorderWidth);
15164
- --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
15165
- --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
15166
- margin-top: var(--pf-c-nav__section--MarginTop);
15167
- --pf-c-nav--c-divider--MarginBottom: 0;
15156
+ .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
15157
+ pointer-events: none;
15168
15158
  }
15169
15159
 
15170
- .pf-c-nav__section + .pf-c-nav__section {
15171
- --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
15160
+ .pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-options-menu__toggle.pf-m-disabled.pf-m-text, .pf-c-options-menu__toggle:disabled:not(.pf-m-plain), .pf-c-options-menu__toggle:disabled.pf-m-text {
15161
+ --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor);
15172
15162
  }
15173
15163
 
15174
- .pf-c-nav__section.pf-m-no-title {
15175
- --pf-c-nav__section--MarginTop: 0;
15164
+ .pf-c-options-menu__toggle.pf-m-disabled::before, .pf-c-options-menu__toggle:disabled::before {
15165
+ border: 0;
15176
15166
  }
15177
15167
 
15178
- .pf-c-nav__section-title {
15179
- padding: var(--pf-c-nav__section-title--PaddingTop) var(--pf-c-nav__section-title--PaddingRight) var(--pf-c-nav__section-title--PaddingBottom) var(--pf-c-nav__section-title--PaddingLeft);
15180
- font-size: var(--pf-c-nav__section-title--FontSize);
15181
- color: var(--pf-c-nav__section-title--Color);
15182
- border-bottom: var(--pf-c-nav__section-title--BorderBottomWidth) solid var(--pf-c-nav__section-title--BorderBottomColor);
15168
+ .pf-c-options-menu__toggle-button-icon {
15169
+ position: relative;
15183
15170
  }
15184
15171
 
15185
- .pf-c-nav__scroll-button {
15186
- flex: none;
15187
- width: var(--pf-c-nav__scroll-button--Width);
15188
- color: var(--pf-c-nav__scroll-button--Color);
15189
- background-color: var(--pf-c-nav__scroll-button--BackgroundColor);
15172
+ .pf-c-options-menu__toggle-button {
15173
+ padding: var(--pf-c-options-menu__toggle-button--PaddingTop) var(--pf-c-options-menu__toggle-button--PaddingRight) var(--pf-c-options-menu__toggle-button--PaddingBottom) var(--pf-c-options-menu__toggle-button--PaddingLeft);
15174
+ background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
15190
15175
  border: 0;
15191
- outline-offset: var(--pf-c-nav__scroll-button--OutlineOffset);
15192
- opacity: 0;
15193
- transition: var(--pf-c-nav__scroll-button--Transition);
15194
15176
  }
15195
15177
 
15196
- .pf-c-nav__scroll-button::before {
15197
- position: absolute;
15198
- top: 0;
15199
- bottom: 0;
15200
- content: "";
15201
- border: solid var(--pf-c-nav__scroll-button--before--BorderColor);
15202
- border-width: 0 var(--pf-c-nav__scroll-button--before--BorderRightWidth) 0 var(--pf-c-nav__scroll-button--before--BorderLeftWidth);
15178
+ .pf-c-options-menu__toggle-text {
15179
+ overflow: hidden;
15180
+ text-overflow: ellipsis;
15181
+ white-space: nowrap;
15203
15182
  }
15204
15183
 
15205
- .pf-c-nav__scroll-button:hover {
15206
- color: var(--pf-c-nav__scroll-button--hover--Color);
15184
+ .pf-c-options-menu__toggle-icon,
15185
+ .pf-c-options-menu__toggle-button-icon {
15186
+ color: var(--pf-c-options-menu__toggle-icon--Color, inherit);
15207
15187
  }
15208
15188
 
15209
- .pf-c-nav__scroll-button:focus {
15210
- color: var(--pf-c-nav__scroll-button--focus--Color);
15189
+ .pf-c-options-menu__toggle-icon {
15190
+ margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
15191
+ margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
15211
15192
  }
15212
15193
 
15213
- .pf-c-nav__scroll-button:active {
15214
- color: var(--pf-c-nav__scroll-button--active--Color);
15194
+ .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
15195
+ transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
15215
15196
  }
15216
15197
 
15217
- .pf-c-nav__scroll-button:disabled {
15218
- color: var(--pf-c-nav__scroll-button--disabled--Color);
15219
- border-color: var(--pf-c-nav__scroll-button--disabled--before--BorderColor);
15198
+ .pf-c-options-menu__menu {
15199
+ position: absolute;
15200
+ top: var(--pf-c-options-menu__menu--Top);
15201
+ z-index: var(--pf-c-options-menu__menu--ZIndex);
15202
+ min-width: 100%;
15203
+ padding-top: var(--pf-c-options-menu__menu--PaddingTop);
15204
+ padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
15205
+ background-color: var(--pf-c-options-menu__menu--BackgroundColor);
15206
+ background-clip: padding-box;
15207
+ box-shadow: var(--pf-c-options-menu__menu--BoxShadow);
15220
15208
  }
15221
15209
 
15222
- .pf-c-nav__scroll-button:nth-of-type(1) {
15223
- --pf-c-nav__scroll-button--before--BorderRightWidth: var(--pf-c-nav__scroll-button--before--BorderWidth);
15224
- margin-right: calc(var(--pf-c-nav__scroll-button--Width) * -1);
15225
- transform: translateX(-100%);
15210
+ .pf-c-options-menu__menu.pf-m-align-right {
15211
+ right: 0;
15226
15212
  }
15227
15213
 
15228
- .pf-c-nav__scroll-button:nth-of-type(1)::before {
15229
- right: 0;
15214
+ .pf-c-options-menu.pf-m-top .pf-c-options-menu__menu {
15215
+ --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
15216
+ transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
15230
15217
  }
15231
15218
 
15232
- .pf-c-nav__scroll-button:nth-of-type(2) {
15233
- --pf-c-nav__scroll-button--before--BorderLeftWidth: var(--pf-c-nav__scroll-button--before--BorderWidth);
15234
- margin-left: calc(var(--pf-c-nav__scroll-button--Width) * -1);
15235
- transform: translateX(100%);
15219
+ .pf-c-options-menu__menu-item {
15220
+ display: flex;
15221
+ align-items: baseline;
15222
+ width: 100%;
15223
+ padding: var(--pf-c-options-menu__menu-item--PaddingTop) var(--pf-c-options-menu__menu-item--PaddingRight) var(--pf-c-options-menu__menu-item--PaddingBottom) var(--pf-c-options-menu__menu-item--PaddingLeft);
15224
+ font-size: var(--pf-c-options-menu__menu-item--FontSize);
15225
+ color: var(--pf-c-options-menu__menu-item--Color);
15226
+ white-space: nowrap;
15227
+ background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
15228
+ border: none;
15236
15229
  }
15237
15230
 
15238
- .pf-c-nav__scroll-button:nth-of-type(2)::before {
15239
- left: 0;
15231
+ .pf-c-options-menu__menu-item:hover, .pf-c-options-menu__menu-item:focus {
15232
+ text-decoration: none;
15233
+ background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor);
15240
15234
  }
15241
15235
 
15242
- :where(.pf-theme-dark) .pf-c-nav {
15243
- --pf-c-nav__item--item__link--after--Top: -1px;
15244
- --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);
15245
- --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
15246
- --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
15247
- --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
15248
- --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--300);
15249
- --pf-c-nav__link--before--BorderColor: var(--pf-global--BorderColor--100);
15250
- --pf-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
15251
- --pf-c-nav__section-title--Color: var(--pf-global--Color--200);
15252
- --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BorderColor--100);
15253
- --pf-c-nav__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
15254
- --pf-c-nav--c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
15255
- --pf-c-nav__link--hover--before--BorderBottomWidth: 0;
15256
- --pf-c-nav__link--focus--before--BorderBottomWidth: 0;
15257
- --pf-c-nav__link--active--before--BorderBottomWidth: 0;
15258
- --pf-c-nav__link--m-current--before--BorderBottomWidth: 0;
15236
+ .pf-c-options-menu__menu-item:disabled, .pf-c-options-menu__menu-item.pf-m-disabled {
15237
+ color: var(--pf-c-options-menu__menu-item--disabled--Color);
15238
+ pointer-events: none;
15239
+ background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor);
15259
15240
  }
15260
15241
 
15261
- :where(.pf-theme-dark) .pf-c-nav__link::before {
15262
- bottom: 0;
15242
+ .pf-c-options-menu__menu-item-icon {
15243
+ align-self: center;
15244
+ width: auto;
15245
+ padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
15246
+ margin-left: auto;
15247
+ font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
15248
+ color: var(--pf-c-options-menu__menu-item-icon--Color);
15263
15249
  }
15264
15250
 
15265
- :where(.pf-theme-dark) .pf-c-nav__link::after {
15266
- top: var(--pf-c-nav__item--item__link--after--Top);
15251
+ .pf-c-options-menu__group + .pf-c-options-menu__group {
15252
+ padding-top: var(--pf-c-options-menu__group--group--PaddingTop);
15267
15253
  }
15268
15254
 
15269
- :where(.pf-theme-dark) .pf-c-nav__item + .pf-c-nav__item {
15270
- --pf-c-nav__link--after--Top: var(--pf-c-nav__item--item__link--after--Top);
15255
+ .pf-c-options-menu__group-title {
15256
+ padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
15257
+ padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
15258
+ padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
15259
+ padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
15260
+ font-size: var(--pf-c-options-menu__group-title--FontSize);
15261
+ font-weight: var(--pf-c-options-menu__group-title--FontWeight);
15262
+ color: var(--pf-c-options-menu__group-title--Color);
15271
15263
  }
15272
15264
 
15273
- :where(.pf-theme-dark) .pf-c-nav__subnav {
15274
- --pf-c-nav__item--item__link--after--Top: 0;
15265
+ :where(.pf-theme-dark) .pf-c-options-menu {
15266
+ --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
15267
+ --pf-c-options-menu__toggle--BorderTopColor: transparent;
15268
+ --pf-c-options-menu__toggle--BorderRightColor: transparent;
15269
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
15270
+ --pf-c-options-menu__toggle--BorderLeftColor: transparent;
15271
+ --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
15272
+ --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
15273
+ --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
15274
+ --pf-c-options-menu__menu--Top: 100%;
15275
15275
  }
15276
15276
 
15277
- :where(.pf-theme-dark) .pf-c-nav__section {
15278
- --pf-c-nav__item--item__link--after--Top: 0;
15277
+ :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
15278
+ background: transparent;
15279
15279
  }
15280
15280
 
15281
15281
  .pf-c-overflow-menu {
@@ -26216,6 +26216,75 @@ label.pf-c-tree-view__node-text {
26216
26216
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26217
26217
  }
26218
26218
  }
26219
+ .pf-l-gallery {
26220
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26221
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
26222
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26223
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
26224
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26225
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26226
+ --pf-l-gallery--GridTemplateRows: auto;
26227
+ display: grid;
26228
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26229
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26230
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26231
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26232
+ }
26233
+
26234
+ .pf-l-gallery.pf-m-gutter {
26235
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26236
+ }
26237
+
26238
+ @media (min-width: 576px) {
26239
+ .pf-l-gallery {
26240
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26241
+ }
26242
+ }
26243
+ @media (min-width: 768px) {
26244
+ .pf-l-gallery {
26245
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26246
+ }
26247
+ }
26248
+ @media (min-width: 992px) {
26249
+ .pf-l-gallery {
26250
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26251
+ }
26252
+ }
26253
+ @media (min-width: 1200px) {
26254
+ .pf-l-gallery {
26255
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26256
+ }
26257
+ }
26258
+ @media (min-width: 1450px) {
26259
+ .pf-l-gallery {
26260
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26261
+ }
26262
+ }
26263
+ @media (min-width: 576px) {
26264
+ .pf-l-gallery {
26265
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26266
+ }
26267
+ }
26268
+ @media (min-width: 768px) {
26269
+ .pf-l-gallery {
26270
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26271
+ }
26272
+ }
26273
+ @media (min-width: 992px) {
26274
+ .pf-l-gallery {
26275
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26276
+ }
26277
+ }
26278
+ @media (min-width: 1200px) {
26279
+ .pf-l-gallery {
26280
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26281
+ }
26282
+ }
26283
+ @media (min-width: 1450px) {
26284
+ .pf-l-gallery {
26285
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26286
+ }
26287
+ }
26219
26288
  .pf-l-grid {
26220
26289
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26221
26290
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27430,75 +27499,6 @@ label.pf-c-tree-view__node-text {
27430
27499
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27431
27500
  }
27432
27501
 
27433
- .pf-l-gallery {
27434
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27435
- --pf-l-gallery--GridTemplateColumns--min: 250px;
27436
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27437
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
27438
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27439
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27440
- --pf-l-gallery--GridTemplateRows: auto;
27441
- display: grid;
27442
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27443
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27444
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27445
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27446
- }
27447
-
27448
- .pf-l-gallery.pf-m-gutter {
27449
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27450
- }
27451
-
27452
- @media (min-width: 576px) {
27453
- .pf-l-gallery {
27454
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27455
- }
27456
- }
27457
- @media (min-width: 768px) {
27458
- .pf-l-gallery {
27459
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27460
- }
27461
- }
27462
- @media (min-width: 992px) {
27463
- .pf-l-gallery {
27464
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27465
- }
27466
- }
27467
- @media (min-width: 1200px) {
27468
- .pf-l-gallery {
27469
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27470
- }
27471
- }
27472
- @media (min-width: 1450px) {
27473
- .pf-l-gallery {
27474
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27475
- }
27476
- }
27477
- @media (min-width: 576px) {
27478
- .pf-l-gallery {
27479
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27480
- }
27481
- }
27482
- @media (min-width: 768px) {
27483
- .pf-l-gallery {
27484
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27485
- }
27486
- }
27487
- @media (min-width: 992px) {
27488
- .pf-l-gallery {
27489
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27490
- }
27491
- }
27492
- @media (min-width: 1200px) {
27493
- .pf-l-gallery {
27494
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27495
- }
27496
- }
27497
- @media (min-width: 1450px) {
27498
- .pf-l-gallery {
27499
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27500
- }
27501
- }
27502
27502
  .pf-l-level {
27503
27503
  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27504
27504
  display: flex;