@patternfly/react-core 4.256.0 → 4.257.0

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.
@@ -3666,7 +3666,7 @@ label.pf-c-check, .pf-c-check__label,
3666
3666
  font-family: var(--pf-c-code-block__code--FontFamily, inherit);
3667
3667
  }
3668
3668
 
3669
- .pf-c-context-selector__menu {
3669
+ .pf-c-data-list {
3670
3670
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3671
3671
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
3672
3672
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -3676,429 +3676,95 @@ label.pf-c-check, .pf-c-check__label,
3676
3676
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3677
3677
  }
3678
3678
 
3679
- .pf-c-context-selector {
3680
- --pf-c-context-selector--Width: 15.625rem;
3681
- --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--form-element);
3682
- --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
3683
- --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
3684
- --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
3685
- --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
3686
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
3687
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
3688
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
3689
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
3690
- --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
3691
- --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
3692
- --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
3693
- --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
3694
- --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
3695
- --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
3696
- --pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
3697
- --pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
3698
- --pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
3699
- --pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
3700
- --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
3701
- --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
3702
- --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--sm);
3703
- --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--sm);
3704
- --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--md);
3705
- --pf-c-context-selector__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
3706
- --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
3707
- --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
3708
- --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
3709
- --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
3710
- --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
3711
- --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
3712
- --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--sm);
3713
- --pf-c-context-selector__menu--PaddingTop: var(--pf-global--spacer--sm);
3714
- --pf-c-context-selector__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
3715
- --pf-c-context-selector__menu--BoxShadow: var(--pf-global--BoxShadow--md);
3716
- --pf-c-context-selector__menu-search--PaddingTop: var(--pf-global--spacer--md);
3717
- --pf-c-context-selector__menu-search--PaddingRight: var(--pf-global--spacer--md);
3718
- --pf-c-context-selector__menu-search--PaddingBottom: var(--pf-global--spacer--md);
3719
- --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-global--spacer--md);
3720
- --pf-c-context-selector__menu-search--BorderBottomColor: var(--pf-global--BorderColor--100);
3721
- --pf-c-context-selector__menu-search--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3722
- --pf-c-context-selector__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
3723
- --pf-c-context-selector__menu-footer--PaddingTop: var(--pf-global--spacer--md);
3724
- --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-global--spacer--md);
3725
- --pf-c-context-selector__menu-footer--PaddingBottom: var(--pf-global--spacer--md);
3726
- --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
3727
- --pf-c-context-selector__menu-list--MaxHeight: 12.5rem;
3728
- --pf-c-context-selector__menu-list--PaddingTop: var(--pf-c-context-selector__menu--PaddingTop);
3729
- --pf-c-context-selector__menu-list--PaddingBottom: var(--pf-global--spacer--sm);
3730
- --pf-c-context-selector__menu-list-item--Color: var(--pf-global--Color--dark-100);
3731
- --pf-c-context-selector__menu-list-item--PaddingTop: var(--pf-global--spacer--sm);
3732
- --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
3733
- --pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
3734
- --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
3735
- --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
3736
- --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
3737
- --pf-c-context-selector__menu-item-icon--Color: var(--pf-global--active-color--100);
3738
- --pf-c-context-selector__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
3739
- --pf-c-context-selector__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
3740
- --pf-c-context-selector--m-full-height__toggle--PaddingRight: var(--pf-global--spacer--lg);
3741
- --pf-c-context-selector--m-full-height__toggle--PaddingLeft: var(--pf-global--spacer--lg);
3742
- --pf-c-context-selector--m-full-height__toggle--before--BorderTopWidth: 0;
3743
- --pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
3744
- --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
3745
- --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
3746
- --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
3747
- --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
3748
- --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
3749
- --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
3750
- --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
3751
- --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
3752
- --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
3753
- --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
3754
- --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
3755
- --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
3756
- --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
3757
- --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
3758
- --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
3759
- --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
3760
- --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
3761
- --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
3762
- --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
3763
- --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
3764
- --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
3765
- --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
3766
- --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
3767
- --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
3768
- --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
3769
- --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
3770
- --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
3771
- --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
3772
- --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
3773
- --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
3774
- --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);
3775
- position: relative;
3776
- display: inline-block;
3777
- width: var(--pf-c-context-selector--Width);
3778
- max-width: 100%;
3779
- }
3780
-
3781
- @media screen and (min-width: 1200px) {
3782
- .pf-c-context-selector {
3783
- --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
3784
- --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
3785
- --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
3786
- --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
3787
- --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
3788
- --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
3789
- --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
3790
- --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
3791
- --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
3792
- --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
3793
- --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight);
3794
- --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft);
3795
- }
3796
- }
3797
- .pf-c-context-selector.pf-m-full-height {
3798
- --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth);
3799
- --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth);
3800
- --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-full-height__toggle--PaddingRight);
3801
- --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-full-height__toggle--PaddingLeft);
3802
- display: inline-flex;
3803
- align-items: center;
3804
- height: 100%;
3679
+ .pf-c-data-list__item-action {
3680
+ --pf-hidden-visible--visible--Visibility: visible;
3681
+ --pf-hidden-visible--hidden--Display: none;
3682
+ --pf-hidden-visible--hidden--Visibility: hidden;
3683
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3684
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3685
+ display: var(--pf-hidden-visible--Display);
3686
+ visibility: var(--pf-hidden-visible--Visibility);
3805
3687
  }
3806
3688
 
3807
- .pf-c-context-selector.pf-m-full-height .pf-c-context-selector__toggle {
3808
- align-self: stretch;
3689
+ .pf-m-hidden.pf-c-data-list__item-action {
3690
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3691
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3809
3692
  }
3810
3693
 
3811
- .pf-c-context-selector.pf-m-full-height .pf-c-context-selector__toggle::before {
3812
- border-top-width: var(--pf-c-context-selector--m-full-height__toggle--before--BorderTopWidth);
3813
- }
3694
+ @media screen and (min-width: 576px) {
3695
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
3696
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3697
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3698
+ }
3814
3699
 
3815
- .pf-c-context-selector.pf-m-full-height:hover .pf-c-context-selector__toggle::before {
3816
- border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
3700
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
3701
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3702
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3703
+ }
3817
3704
  }
3705
+ @media screen and (min-width: 768px) {
3706
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
3707
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3708
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3709
+ }
3818
3710
 
3819
- .pf-c-context-selector.pf-m-large {
3820
- --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
3821
- --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
3822
- --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
3823
- --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
3824
- --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
3711
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
3712
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3713
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3714
+ }
3825
3715
  }
3716
+ @media screen and (min-width: 992px) {
3717
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
3718
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3719
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3720
+ }
3826
3721
 
3827
- .pf-c-context-selector.pf-m-page-insets {
3828
- --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
3829
- --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
3830
- --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
3831
- --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
3832
- --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
3833
- --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
3834
- --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
3835
- --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
3836
- --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
3837
- --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
3838
- --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
3839
- --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
3722
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
3723
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3724
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3725
+ }
3840
3726
  }
3727
+ @media screen and (min-width: 1200px) {
3728
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
3729
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3730
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3731
+ }
3841
3732
 
3842
- .pf-c-context-selector__toggle {
3843
- position: relative;
3844
- display: flex;
3845
- align-items: center;
3846
- justify-content: space-between;
3847
- width: 100%;
3848
- padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft);
3849
- color: var(--pf-c-context-selector__toggle--Color);
3850
- white-space: nowrap;
3851
- cursor: pointer;
3852
- border: none;
3733
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
3734
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3735
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3736
+ }
3853
3737
  }
3738
+ @media screen and (min-width: 1450px) {
3739
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
3740
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3741
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3742
+ }
3854
3743
 
3855
- .pf-c-context-selector__toggle::before {
3856
- position: absolute;
3857
- top: 0;
3858
- right: 0;
3859
- bottom: 0;
3860
- left: 0;
3861
- content: "";
3862
- border: var(--pf-c-context-selector__toggle--BorderWidth) solid;
3863
- border-color: var(--pf-c-context-selector__toggle--BorderTopColor) var(--pf-c-context-selector__toggle--BorderRightColor) var(--pf-c-context-selector__toggle--BorderBottomColor) var(--pf-c-context-selector__toggle--BorderLeftColor);
3744
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
3745
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3746
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3747
+ }
3864
3748
  }
3865
-
3866
- .pf-c-context-selector__toggle:hover::before {
3867
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);
3868
- border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
3749
+ @media screen and (min-width: 768px) {
3750
+ .pf-c-data-list:not([class*=pf-m-grid]) {
3751
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
3752
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
3753
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
3754
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
3755
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
3756
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
3757
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
3758
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
3759
+ }
3869
3760
  }
3870
-
3871
- .pf-c-context-selector__toggle:active::before, .pf-c-context-selector__toggle.pf-m-active::before, .pf-c-context-selector__toggle:focus-within::before {
3872
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--active--BorderBottomColor);
3873
- border-bottom-width: var(--pf-c-context-selector__toggle--active--BorderBottomWidth);
3874
- }
3875
-
3876
- .pf-m-expanded > .pf-c-context-selector__toggle::before {
3877
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--expanded--BorderBottomColor);
3878
- border-bottom-width: var(--pf-c-context-selector__toggle--expanded--BorderBottomWidth);
3879
- }
3880
-
3881
- .pf-c-context-selector__toggle.pf-m-plain {
3882
- --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--PaddingRight);
3883
- --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector__toggle--m-plain--PaddingLeft);
3884
- --pf-c-context-selector__toggle-icon--Color: var(--pf-c-context-selector--m-plain__toggle-icon--Color);
3885
- }
3886
-
3887
- .pf-c-context-selector__toggle.pf-m-plain.pf-m-text {
3888
- --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--m-text--PaddingRight);
3889
- --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft);
3890
- }
3891
-
3892
- .pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text) {
3893
- display: inline-block;
3894
- width: auto;
3895
- color: var(--pf-c-context-selector__toggle--m-plain--Color);
3896
- }
3897
-
3898
- .pf-c-context-selector__toggle.pf-m-plain.pf-m-disabled, .pf-c-context-selector__toggle.pf-m-plain:disabled {
3899
- --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--disabled--Color);
3900
- }
3901
-
3902
- .pf-c-context-selector__toggle.pf-m-plain:hover, .pf-c-context-selector__toggle.pf-m-plain:active, .pf-c-context-selector__toggle.pf-m-plain.pf-m-active, .pf-c-context-selector__toggle.pf-m-plain:focus, .pf-c-context-selector.pf-m-expanded > .pf-c-context-selector__toggle.pf-m-plain {
3903
- --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--hover--Color);
3904
- --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-c-context-selector--m-plain--hover__toggle-icon--Color);
3905
- }
3906
-
3907
- .pf-c-context-selector__toggle.pf-m-plain::before {
3908
- border: 0;
3909
- }
3910
-
3911
- .pf-c-context-selector__toggle .pf-c-context-selector__toggle-text {
3912
- overflow: hidden;
3913
- text-overflow: ellipsis;
3914
- white-space: nowrap;
3915
- font-size: var(--pf-c-context-selector__toggle-text--FontSize);
3916
- font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
3917
- line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
3918
- }
3919
-
3920
- .pf-c-context-selector__toggle-icon {
3921
- margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
3922
- margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
3923
- color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
3924
- }
3925
-
3926
- .pf-c-context-selector__menu {
3927
- color: var(--pf-global--Color--100);
3928
- position: absolute;
3929
- top: var(--pf-c-context-selector__menu--Top);
3930
- z-index: var(--pf-c-context-selector__menu--ZIndex);
3931
- min-width: 100%;
3932
- background-color: var(--pf-c-context-selector__menu--BackgroundColor);
3933
- background-clip: padding-box;
3934
- box-shadow: var(--pf-c-context-selector__menu--BoxShadow);
3935
- }
3936
-
3937
- .pf-c-context-selector__menu.pf-m-static {
3938
- position: static;
3939
- top: auto;
3940
- z-index: auto;
3941
- min-width: min-content;
3942
- }
3943
-
3944
- .pf-c-context-selector__menu-search {
3945
- position: relative;
3946
- padding: var(--pf-c-context-selector__menu-search--PaddingTop) var(--pf-c-context-selector__menu-search--PaddingRight) var(--pf-c-context-selector__menu-search--PaddingBottom) var(--pf-c-context-selector__menu-search--PaddingLeft);
3947
- border-bottom: var(--pf-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-c-context-selector__menu-search--BorderBottomColor);
3948
- }
3949
-
3950
- .pf-c-context-selector__menu-footer {
3951
- padding: var(--pf-c-context-selector__menu-footer--PaddingTop) var(--pf-c-context-selector__menu-footer--PaddingRight) var(--pf-c-context-selector__menu-footer--PaddingBottom) var(--pf-c-context-selector__menu-footer--PaddingLeft);
3952
- box-shadow: var(--pf-c-context-selector__menu-footer--BoxShadow);
3953
- }
3954
-
3955
- .pf-c-context-selector__menu-list {
3956
- max-height: var(--pf-c-context-selector__menu-list--MaxHeight);
3957
- padding-top: var(--pf-c-context-selector__menu-list--PaddingTop);
3958
- padding-bottom: var(--pf-c-context-selector__menu-list--PaddingBottom);
3959
- overflow-y: auto;
3960
- }
3961
-
3962
- .pf-c-context-selector__menu-list-item {
3963
- display: flex;
3964
- align-items: center;
3965
- width: 100%;
3966
- padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
3967
- color: var(--pf-c-context-selector__menu-list-item--Color);
3968
- white-space: nowrap;
3969
- border: none;
3970
- }
3971
-
3972
- .pf-c-context-selector__menu-list-item:hover, .pf-c-context-selector__menu-list-item:focus {
3973
- text-decoration: none;
3974
- background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
3975
- }
3976
-
3977
- .pf-c-context-selector__menu-list-item.pf-m-disabled, .pf-c-context-selector__menu-list-item:disabled {
3978
- --pf-c-context-selector__menu-list-item--Color: var(--pf-c-context-selector__menu-list-item--disabled--Color);
3979
- pointer-events: none;
3980
- }
3981
-
3982
- :where(.pf-theme-dark) .pf-c-context-selector {
3983
- --pf-c-context-selector__menu--Top: 100%;
3984
- --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
3985
- }
3986
-
3987
- :where(.pf-theme-dark) .pf-c-context-selector__toggle {
3988
- background: var(--pf-global--BackgroundColor--400);
3989
- }
3990
-
3991
- :where(.pf-theme-dark) .pf-c-context-selector__toggle.pf-m-plain {
3992
- background: transparent;
3993
- }
3994
-
3995
- :where(.pf-theme-dark) .pf-c-context-selector__menu {
3996
- background: var(--pf-global--BackgroundColor--300);
3997
- }
3998
-
3999
- :where(.pf-theme-dark) .pf-c-context-selector__menu-footer {
4000
- border-top: 1px solid var(--pf-global--BorderColor--300);
4001
- }
4002
-
4003
- .pf-c-data-list {
4004
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
4005
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4006
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4007
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4008
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
4009
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4010
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4011
- }
4012
-
4013
- .pf-c-data-list__item-action {
4014
- --pf-hidden-visible--visible--Visibility: visible;
4015
- --pf-hidden-visible--hidden--Display: none;
4016
- --pf-hidden-visible--hidden--Visibility: hidden;
4017
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4018
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4019
- display: var(--pf-hidden-visible--Display);
4020
- visibility: var(--pf-hidden-visible--Visibility);
4021
- }
4022
-
4023
- .pf-m-hidden.pf-c-data-list__item-action {
4024
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4025
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4026
- }
4027
-
4028
- @media screen and (min-width: 576px) {
4029
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4030
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4031
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4032
- }
4033
-
4034
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
4035
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4036
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4037
- }
4038
- }
4039
- @media screen and (min-width: 768px) {
4040
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
4041
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4042
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4043
- }
4044
-
4045
- .pf-m-visible-on-md.pf-c-data-list__item-action {
4046
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4047
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4048
- }
4049
- }
4050
- @media screen and (min-width: 992px) {
4051
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4052
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4053
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4054
- }
4055
-
4056
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
4057
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4058
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4059
- }
4060
- }
4061
- @media screen and (min-width: 1200px) {
4062
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4063
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4064
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4065
- }
4066
-
4067
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4068
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4069
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4070
- }
4071
- }
4072
- @media screen and (min-width: 1450px) {
4073
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4074
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4075
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4076
- }
4077
-
4078
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4079
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4080
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4081
- }
4082
- }
4083
- @media screen and (min-width: 768px) {
4084
- .pf-c-data-list:not([class*=pf-m-grid]) {
4085
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4086
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4087
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4088
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4089
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4090
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4091
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4092
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4093
- }
4094
- }
4095
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4096
- .pf-c-data-list:not([class*=pf-m-grid]) {
4097
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4098
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4099
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4100
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4101
- }
3761
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
3762
+ .pf-c-data-list:not([class*=pf-m-grid]) {
3763
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
3764
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
3765
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
3766
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
3767
+ }
4102
3768
  }
4103
3769
  @media screen and (min-width: 768px) {
4104
3770
  .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
@@ -5434,105 +5100,439 @@ label.pf-c-check, .pf-c-check__label,
5434
5100
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5435
5101
  }
5436
5102
  }
5437
- @media screen and (min-width: 1450px) {
5438
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5439
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5440
- }
5103
+ @media screen and (min-width: 1450px) {
5104
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5105
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5106
+ }
5107
+
5108
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5109
+ flex: 1;
5110
+ order: initial;
5111
+ }
5112
+
5113
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5114
+ margin-left: auto;
5115
+ }
5116
+
5117
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5118
+ flex: none;
5119
+ }
5120
+
5121
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5122
+ flex-grow: 2;
5123
+ }
5124
+
5125
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5126
+ flex-grow: 3;
5127
+ }
5128
+
5129
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5130
+ flex-grow: 4;
5131
+ }
5132
+
5133
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5134
+ flex-grow: 5;
5135
+ }
5136
+ }
5137
+ @media screen and (min-width: 1450px) {
5138
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5139
+ max-height: initial;
5140
+ overflow-y: visible;
5141
+ }
5142
+ }
5143
+ .pf-c-date-picker {
5144
+ --pf-c-date-picker--m-top__calendar--Top: 0;
5145
+ --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
5146
+ --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
5147
+ --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
5148
+ --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
5149
+ --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
5150
+ --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
5151
+ --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
5152
+ --pf-c-date-picker__input--c-form-control--width-chars: 10;
5153
+ --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
5154
+ --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
5155
+ --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
5156
+ --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
5157
+ --pf-c-date-picker__calendar--Right: auto;
5158
+ --pf-c-date-picker__calendar--Left: 0;
5159
+ --pf-c-date-picker__calendar--m-align-right--Right: 0;
5160
+ --pf-c-date-picker__calendar--m-align-right--Left: auto;
5161
+ position: relative;
5162
+ display: inline-block;
5163
+ }
5164
+
5165
+ .pf-c-date-picker__helper-text {
5166
+ margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
5167
+ font-size: var(--pf-c-date-picker__helper-text--FontSize);
5168
+ color: var(--pf-c-date-picker__helper-text--Color);
5169
+ }
5170
+
5171
+ .pf-c-date-picker__helper-text.pf-m-error {
5172
+ --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
5173
+ }
5174
+
5175
+ .pf-c-date-picker__input .pf-c-form-control {
5176
+ width: var(--pf-c-date-picker__input--c-form-control--Width);
5177
+ }
5178
+
5179
+ .pf-c-date-picker__calendar {
5180
+ position: absolute;
5181
+ top: var(--pf-c-date-picker__calendar--Top);
5182
+ right: var(--pf-c-date-picker__calendar--Right);
5183
+ left: var(--pf-c-date-picker__calendar--Left);
5184
+ z-index: var(--pf-c-date-picker__calendar--ZIndex);
5185
+ background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
5186
+ box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
5187
+ }
5188
+
5189
+ .pf-c-date-picker__calendar.pf-m-align-right {
5190
+ --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
5191
+ --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
5192
+ }
5193
+
5194
+ .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
5195
+ --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
5196
+ transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
5197
+ }
5198
+
5199
+ :where(.pf-theme-dark) .pf-c-date-picker {
5200
+ --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
5201
+ --pf-c-date-picker__calendar--Top: 100%;
5202
+ }
5203
+
5204
+ .pf-c-context-selector__menu {
5205
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
5206
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
5207
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
5208
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
5209
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
5210
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
5211
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
5212
+ }
5213
+
5214
+ .pf-c-context-selector {
5215
+ --pf-c-context-selector--Width: 15.625rem;
5216
+ --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--form-element);
5217
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
5218
+ --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
5219
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
5220
+ --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
5221
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
5222
+ --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
5223
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
5224
+ --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
5225
+ --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
5226
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
5227
+ --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
5228
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5229
+ --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
5230
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
5231
+ --pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
5232
+ --pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
5233
+ --pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
5234
+ --pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
5235
+ --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
5236
+ --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
5237
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--sm);
5238
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--sm);
5239
+ --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--md);
5240
+ --pf-c-context-selector__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
5241
+ --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
5242
+ --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
5243
+ --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
5244
+ --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
5245
+ --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
5246
+ --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
5247
+ --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--sm);
5248
+ --pf-c-context-selector__menu--PaddingTop: var(--pf-global--spacer--sm);
5249
+ --pf-c-context-selector__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
5250
+ --pf-c-context-selector__menu--BoxShadow: var(--pf-global--BoxShadow--md);
5251
+ --pf-c-context-selector__menu-search--PaddingTop: var(--pf-global--spacer--md);
5252
+ --pf-c-context-selector__menu-search--PaddingRight: var(--pf-global--spacer--md);
5253
+ --pf-c-context-selector__menu-search--PaddingBottom: var(--pf-global--spacer--md);
5254
+ --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-global--spacer--md);
5255
+ --pf-c-context-selector__menu-search--BorderBottomColor: var(--pf-global--BorderColor--100);
5256
+ --pf-c-context-selector__menu-search--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
5257
+ --pf-c-context-selector__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
5258
+ --pf-c-context-selector__menu-footer--PaddingTop: var(--pf-global--spacer--md);
5259
+ --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-global--spacer--md);
5260
+ --pf-c-context-selector__menu-footer--PaddingBottom: var(--pf-global--spacer--md);
5261
+ --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
5262
+ --pf-c-context-selector__menu-list--MaxHeight: 12.5rem;
5263
+ --pf-c-context-selector__menu-list--PaddingTop: var(--pf-c-context-selector__menu--PaddingTop);
5264
+ --pf-c-context-selector__menu-list--PaddingBottom: var(--pf-global--spacer--sm);
5265
+ --pf-c-context-selector__menu-list-item--Color: var(--pf-global--Color--dark-100);
5266
+ --pf-c-context-selector__menu-list-item--PaddingTop: var(--pf-global--spacer--sm);
5267
+ --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
5268
+ --pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
5269
+ --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
5270
+ --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
5271
+ --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
5272
+ --pf-c-context-selector__menu-item-icon--Color: var(--pf-global--active-color--100);
5273
+ --pf-c-context-selector__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
5274
+ --pf-c-context-selector__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
5275
+ --pf-c-context-selector--m-full-height__toggle--PaddingRight: var(--pf-global--spacer--lg);
5276
+ --pf-c-context-selector--m-full-height__toggle--PaddingLeft: var(--pf-global--spacer--lg);
5277
+ --pf-c-context-selector--m-full-height__toggle--before--BorderTopWidth: 0;
5278
+ --pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
5279
+ --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
5280
+ --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
5281
+ --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
5282
+ --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
5283
+ --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
5284
+ --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
5285
+ --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
5286
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
5287
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
5288
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
5289
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
5290
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
5291
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
5292
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
5293
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
5294
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
5295
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
5296
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
5297
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
5298
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
5299
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
5300
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
5301
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
5302
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
5303
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
5304
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
5305
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
5306
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
5307
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
5308
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
5309
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);
5310
+ position: relative;
5311
+ display: inline-block;
5312
+ width: var(--pf-c-context-selector--Width);
5313
+ max-width: 100%;
5314
+ }
5315
+
5316
+ @media screen and (min-width: 1200px) {
5317
+ .pf-c-context-selector {
5318
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
5319
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
5320
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
5321
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
5322
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
5323
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
5324
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
5325
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
5326
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
5327
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
5328
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight);
5329
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft);
5330
+ }
5331
+ }
5332
+ .pf-c-context-selector.pf-m-full-height {
5333
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth);
5334
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth);
5335
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-full-height__toggle--PaddingRight);
5336
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-full-height__toggle--PaddingLeft);
5337
+ display: inline-flex;
5338
+ align-items: center;
5339
+ height: 100%;
5340
+ }
5341
+
5342
+ .pf-c-context-selector.pf-m-full-height .pf-c-context-selector__toggle {
5343
+ align-self: stretch;
5344
+ }
5345
+
5346
+ .pf-c-context-selector.pf-m-full-height .pf-c-context-selector__toggle::before {
5347
+ border-top-width: var(--pf-c-context-selector--m-full-height__toggle--before--BorderTopWidth);
5348
+ }
5349
+
5350
+ .pf-c-context-selector.pf-m-full-height:hover .pf-c-context-selector__toggle::before {
5351
+ border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
5352
+ }
5353
+
5354
+ .pf-c-context-selector.pf-m-large {
5355
+ --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
5356
+ --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
5357
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
5358
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
5359
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
5360
+ }
5361
+
5362
+ .pf-c-context-selector.pf-m-page-insets {
5363
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
5364
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
5365
+ --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
5366
+ --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
5367
+ --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
5368
+ --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
5369
+ --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
5370
+ --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
5371
+ --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
5372
+ --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
5373
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
5374
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
5375
+ }
5376
+
5377
+ .pf-c-context-selector__toggle {
5378
+ position: relative;
5379
+ display: flex;
5380
+ align-items: center;
5381
+ justify-content: space-between;
5382
+ width: 100%;
5383
+ padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft);
5384
+ color: var(--pf-c-context-selector__toggle--Color);
5385
+ white-space: nowrap;
5386
+ cursor: pointer;
5387
+ border: none;
5388
+ }
5389
+
5390
+ .pf-c-context-selector__toggle::before {
5391
+ position: absolute;
5392
+ top: 0;
5393
+ right: 0;
5394
+ bottom: 0;
5395
+ left: 0;
5396
+ content: "";
5397
+ border: var(--pf-c-context-selector__toggle--BorderWidth) solid;
5398
+ border-color: var(--pf-c-context-selector__toggle--BorderTopColor) var(--pf-c-context-selector__toggle--BorderRightColor) var(--pf-c-context-selector__toggle--BorderBottomColor) var(--pf-c-context-selector__toggle--BorderLeftColor);
5399
+ }
5400
+
5401
+ .pf-c-context-selector__toggle:hover::before {
5402
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);
5403
+ border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
5404
+ }
5405
+
5406
+ .pf-c-context-selector__toggle:active::before, .pf-c-context-selector__toggle.pf-m-active::before, .pf-c-context-selector__toggle:focus-within::before {
5407
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--active--BorderBottomColor);
5408
+ border-bottom-width: var(--pf-c-context-selector__toggle--active--BorderBottomWidth);
5409
+ }
5410
+
5411
+ .pf-m-expanded > .pf-c-context-selector__toggle::before {
5412
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--expanded--BorderBottomColor);
5413
+ border-bottom-width: var(--pf-c-context-selector__toggle--expanded--BorderBottomWidth);
5414
+ }
5415
+
5416
+ .pf-c-context-selector__toggle.pf-m-plain {
5417
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--PaddingRight);
5418
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector__toggle--m-plain--PaddingLeft);
5419
+ --pf-c-context-selector__toggle-icon--Color: var(--pf-c-context-selector--m-plain__toggle-icon--Color);
5420
+ }
5421
+
5422
+ .pf-c-context-selector__toggle.pf-m-plain.pf-m-text {
5423
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--m-text--PaddingRight);
5424
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft);
5425
+ }
5426
+
5427
+ .pf-c-context-selector__toggle.pf-m-plain:not(.pf-m-text) {
5428
+ display: inline-block;
5429
+ width: auto;
5430
+ color: var(--pf-c-context-selector__toggle--m-plain--Color);
5431
+ }
5432
+
5433
+ .pf-c-context-selector__toggle.pf-m-plain.pf-m-disabled, .pf-c-context-selector__toggle.pf-m-plain:disabled {
5434
+ --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--disabled--Color);
5435
+ }
5436
+
5437
+ .pf-c-context-selector__toggle.pf-m-plain:hover, .pf-c-context-selector__toggle.pf-m-plain:active, .pf-c-context-selector__toggle.pf-m-plain.pf-m-active, .pf-c-context-selector__toggle.pf-m-plain:focus, .pf-c-context-selector.pf-m-expanded > .pf-c-context-selector__toggle.pf-m-plain {
5438
+ --pf-c-context-selector__toggle--m-plain--Color: var(--pf-c-context-selector__toggle--m-plain--hover--Color);
5439
+ --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-c-context-selector--m-plain--hover__toggle-icon--Color);
5440
+ }
5441
5441
 
5442
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5443
- flex: 1;
5444
- order: initial;
5445
- }
5442
+ .pf-c-context-selector__toggle.pf-m-plain::before {
5443
+ border: 0;
5444
+ }
5446
5445
 
5447
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5448
- margin-left: auto;
5449
- }
5446
+ .pf-c-context-selector__toggle .pf-c-context-selector__toggle-text {
5447
+ overflow: hidden;
5448
+ text-overflow: ellipsis;
5449
+ white-space: nowrap;
5450
+ font-size: var(--pf-c-context-selector__toggle-text--FontSize);
5451
+ font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
5452
+ line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
5453
+ }
5450
5454
 
5451
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5452
- flex: none;
5453
- }
5455
+ .pf-c-context-selector__toggle-icon {
5456
+ margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
5457
+ margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
5458
+ color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
5459
+ }
5454
5460
 
5455
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5456
- flex-grow: 2;
5457
- }
5461
+ .pf-c-context-selector__menu {
5462
+ color: var(--pf-global--Color--100);
5463
+ position: absolute;
5464
+ top: var(--pf-c-context-selector__menu--Top);
5465
+ z-index: var(--pf-c-context-selector__menu--ZIndex);
5466
+ min-width: 100%;
5467
+ background-color: var(--pf-c-context-selector__menu--BackgroundColor);
5468
+ background-clip: padding-box;
5469
+ box-shadow: var(--pf-c-context-selector__menu--BoxShadow);
5470
+ }
5458
5471
 
5459
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5460
- flex-grow: 3;
5461
- }
5472
+ .pf-c-context-selector__menu.pf-m-static {
5473
+ position: static;
5474
+ top: auto;
5475
+ z-index: auto;
5476
+ min-width: min-content;
5477
+ }
5462
5478
 
5463
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5464
- flex-grow: 4;
5465
- }
5479
+ .pf-c-context-selector__menu-search {
5480
+ position: relative;
5481
+ padding: var(--pf-c-context-selector__menu-search--PaddingTop) var(--pf-c-context-selector__menu-search--PaddingRight) var(--pf-c-context-selector__menu-search--PaddingBottom) var(--pf-c-context-selector__menu-search--PaddingLeft);
5482
+ border-bottom: var(--pf-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-c-context-selector__menu-search--BorderBottomColor);
5483
+ }
5466
5484
 
5467
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5468
- flex-grow: 5;
5469
- }
5485
+ .pf-c-context-selector__menu-footer {
5486
+ padding: var(--pf-c-context-selector__menu-footer--PaddingTop) var(--pf-c-context-selector__menu-footer--PaddingRight) var(--pf-c-context-selector__menu-footer--PaddingBottom) var(--pf-c-context-selector__menu-footer--PaddingLeft);
5487
+ box-shadow: var(--pf-c-context-selector__menu-footer--BoxShadow);
5470
5488
  }
5471
- @media screen and (min-width: 1450px) {
5472
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5473
- max-height: initial;
5474
- overflow-y: visible;
5475
- }
5489
+
5490
+ .pf-c-context-selector__menu-list {
5491
+ max-height: var(--pf-c-context-selector__menu-list--MaxHeight);
5492
+ padding-top: var(--pf-c-context-selector__menu-list--PaddingTop);
5493
+ padding-bottom: var(--pf-c-context-selector__menu-list--PaddingBottom);
5494
+ overflow-y: auto;
5476
5495
  }
5477
- .pf-c-date-picker {
5478
- --pf-c-date-picker--m-top__calendar--Top: 0;
5479
- --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
5480
- --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
5481
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
5482
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
5483
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
5484
- --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
5485
- --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
5486
- --pf-c-date-picker__input--c-form-control--width-chars: 10;
5487
- --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
5488
- --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
5489
- --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
5490
- --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
5491
- --pf-c-date-picker__calendar--Right: auto;
5492
- --pf-c-date-picker__calendar--Left: 0;
5493
- --pf-c-date-picker__calendar--m-align-right--Right: 0;
5494
- --pf-c-date-picker__calendar--m-align-right--Left: auto;
5495
- position: relative;
5496
- display: inline-block;
5496
+
5497
+ .pf-c-context-selector__menu-list-item {
5498
+ display: flex;
5499
+ align-items: center;
5500
+ width: 100%;
5501
+ padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
5502
+ color: var(--pf-c-context-selector__menu-list-item--Color);
5503
+ white-space: nowrap;
5504
+ border: none;
5497
5505
  }
5498
5506
 
5499
- .pf-c-date-picker__helper-text {
5500
- margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
5501
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
5502
- color: var(--pf-c-date-picker__helper-text--Color);
5507
+ .pf-c-context-selector__menu-list-item:hover, .pf-c-context-selector__menu-list-item:focus {
5508
+ text-decoration: none;
5509
+ background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
5503
5510
  }
5504
5511
 
5505
- .pf-c-date-picker__helper-text.pf-m-error {
5506
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
5512
+ .pf-c-context-selector__menu-list-item.pf-m-disabled, .pf-c-context-selector__menu-list-item:disabled {
5513
+ --pf-c-context-selector__menu-list-item--Color: var(--pf-c-context-selector__menu-list-item--disabled--Color);
5514
+ pointer-events: none;
5507
5515
  }
5508
5516
 
5509
- .pf-c-date-picker__input .pf-c-form-control {
5510
- width: var(--pf-c-date-picker__input--c-form-control--Width);
5517
+ :where(.pf-theme-dark) .pf-c-context-selector {
5518
+ --pf-c-context-selector__menu--Top: 100%;
5519
+ --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
5511
5520
  }
5512
5521
 
5513
- .pf-c-date-picker__calendar {
5514
- position: absolute;
5515
- top: var(--pf-c-date-picker__calendar--Top);
5516
- right: var(--pf-c-date-picker__calendar--Right);
5517
- left: var(--pf-c-date-picker__calendar--Left);
5518
- z-index: var(--pf-c-date-picker__calendar--ZIndex);
5519
- background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
5520
- box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
5522
+ :where(.pf-theme-dark) .pf-c-context-selector__toggle {
5523
+ background: var(--pf-global--BackgroundColor--400);
5521
5524
  }
5522
5525
 
5523
- .pf-c-date-picker__calendar.pf-m-align-right {
5524
- --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
5525
- --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
5526
+ :where(.pf-theme-dark) .pf-c-context-selector__toggle.pf-m-plain {
5527
+ background: transparent;
5526
5528
  }
5527
5529
 
5528
- .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
5529
- --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
5530
- transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
5530
+ :where(.pf-theme-dark) .pf-c-context-selector__menu {
5531
+ background: var(--pf-global--BackgroundColor--300);
5531
5532
  }
5532
5533
 
5533
- :where(.pf-theme-dark) .pf-c-date-picker {
5534
- --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
5535
- --pf-c-date-picker__calendar--Top: 100%;
5534
+ :where(.pf-theme-dark) .pf-c-context-selector__menu-footer {
5535
+ border-top: 1px solid var(--pf-global--BorderColor--300);
5536
5536
  }
5537
5537
 
5538
5538
  .pf-c-description-list {
@@ -9425,431 +9425,247 @@ label.pf-c-check, .pf-c-check__label,
9425
9425
  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9426
9426
  }
9427
9427
 
9428
- .pf-c-input-group {
9429
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9430
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9431
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9432
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9433
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9434
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9435
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9436
- }
9437
-
9438
- .pf-c-input-group {
9439
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9440
- --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9441
- --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9442
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9443
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9444
- --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9445
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9446
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9447
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9448
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9449
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9450
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9451
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9452
- --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9453
- --pf-c-input-group--c-form-control--MarginRight: 0;
9454
- color: var(--pf-global--Color--100);
9455
- display: flex;
9456
- width: 100%;
9457
- background-color: var(--pf-c-input-group--BackgroundColor);
9458
- }
9459
-
9460
- .pf-c-input-group.pf-m-plain {
9461
- --pf-c-input-group--BackgroundColor: transparent;
9462
- }
9463
-
9464
- .pf-c-input-group > * + * {
9465
- margin-left: -1px;
9466
- }
9467
-
9468
- .pf-c-input-group > :focus,
9469
- .pf-c-input-group > :focus-within {
9470
- z-index: var(--pf-c-input-group--child--ZIndex);
9471
- }
9472
-
9473
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9474
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9475
- }
9476
-
9477
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9478
- .pf-c-input-group textarea {
9479
- flex: 2;
9480
- min-width: 0;
9481
- }
9482
-
9483
- .pf-c-input-group textarea {
9484
- min-height: var(--pf-c-input-group__textarea--MinHeight);
9485
- }
9486
-
9487
- .pf-c-input-group__text {
9488
- display: flex;
9428
+ .pf-c-icon {
9429
+ --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
9430
+ --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
9431
+ --pf-c-icon--m-inline--Width: 1em;
9432
+ --pf-c-icon--m-inline--Height: 1em;
9433
+ --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
9434
+ --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
9435
+ --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
9436
+ --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
9437
+ --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
9438
+ --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
9439
+ --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
9440
+ --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
9441
+ --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
9442
+ --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
9443
+ --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
9444
+ --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
9445
+ --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
9446
+ --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
9447
+ --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
9448
+ --pf-c-icon--m-inline__content--FontSize: 1em;
9449
+ --pf-c-icon__content--svg--VerticalAlign: -.125em;
9450
+ --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
9451
+ --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
9452
+ --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
9453
+ --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
9454
+ position: relative;
9455
+ display: inline-flex;
9489
9456
  align-items: center;
9490
- padding-right: var(--pf-c-input-group__text--PaddingRight);
9491
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
9492
- font-size: var(--pf-c-input-group__text--FontSize);
9493
- color: var(--pf-c-input-group__text--Color);
9494
- text-align: center;
9495
- background-color: var(--pf-c-input-group__text--BackgroundColor);
9496
- border: var(--pf-c-input-group__text--BorderWidth) solid;
9497
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9498
- }
9499
-
9500
- label.pf-c-input-group__text {
9501
- cursor: pointer;
9457
+ justify-content: center;
9458
+ width: var(--pf-c-icon--Width);
9459
+ height: var(--pf-c-icon--Height);
9502
9460
  }
9503
9461
 
9504
- .pf-c-input-group__text.pf-m-plain {
9505
- --pf-c-input-group__text--BorderWidth: 0;
9506
- margin-left: 0;
9462
+ .pf-c-icon.pf-m-inline {
9463
+ --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
9464
+ --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
9465
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
9466
+ --pf-c-icon__content--Color: currentcolor;
9467
+ line-height: 1;
9507
9468
  }
9508
9469
 
9509
- :where(.pf-theme-dark) .pf-c-input-group {
9510
- --pf-c-input-group--BackgroundColor: transparent;
9511
- --pf-c-input-group__text--BorderTopColor: transparent;
9512
- --pf-c-input-group__text--BorderRightColor: transparent;
9513
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9514
- --pf-c-input-group__text--BorderLeftColor: transparent;
9515
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9470
+ .pf-c-icon.pf-m-inline .pf-c-spinner {
9471
+ --pf-c-spinner--diameter: 1em;
9516
9472
  }
9517
9473
 
9518
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
9519
- margin-left: 0;
9520
- border-left: 1px solid var(--pf-global--palette--black-700);
9474
+ .pf-c-icon.pf-m-sm {
9475
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
9476
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
9477
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9521
9478
  }
9522
9479
 
9523
- :where(.pf-theme-dark) .pf-c-input-group__text {
9524
- --pf-c-input-group__text--BorderTopColor: transparent;
9525
- --pf-c-input-group__text--BorderRightColor: transparent;
9526
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9527
- --pf-c-input-group__text--BorderLeftColor: transparent;
9480
+ .pf-c-icon.pf-m-md {
9481
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
9482
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
9483
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9528
9484
  }
9529
9485
 
9530
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9531
- --pf-c-input-group__text--BackgroundColor: transparent;
9486
+ .pf-c-icon.pf-m-lg {
9487
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
9488
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
9489
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9532
9490
  }
9533
9491
 
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;
9492
+ .pf-c-icon.pf-m-xl {
9493
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
9494
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
9495
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9595
9496
  }
9596
9497
 
9597
- .pf-c-jump-links.pf-m-center {
9598
- justify-content: center;
9498
+ .pf-c-icon.pf-m-in-progress {
9499
+ --pf-c-icon__content--Opacity: 0;
9500
+ --pf-c-icon__progress--Opacity: 1;
9599
9501
  }
9600
9502
 
9601
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9602
- align-items: center;
9503
+ .pf-c-icon__content,
9504
+ .pf-c-icon__progress {
9505
+ font-size: var(--pf-c-icon__content--FontSize);
9603
9506
  }
9604
9507
 
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;
9508
+ .pf-c-icon__content svg,
9509
+ .pf-c-icon__progress svg {
9510
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
9616
9511
  }
9617
9512
 
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;
9513
+ .pf-c-icon__content.pf-m-sm,
9514
+ .pf-c-icon__progress.pf-m-sm {
9515
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9625
9516
  }
9626
9517
 
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;
9518
+ .pf-c-icon__content.pf-m-md,
9519
+ .pf-c-icon__progress.pf-m-md {
9520
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9634
9521
  }
9635
9522
 
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;
9644
- }
9645
-
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
- }
9523
+ .pf-c-icon__content.pf-m-lg,
9524
+ .pf-c-icon__progress.pf-m-lg {
9525
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9654
9526
  }
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
- }
9664
9527
 
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
- }
9528
+ .pf-c-icon__content.pf-m-xl,
9529
+ .pf-c-icon__progress.pf-m-xl {
9530
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9673
9531
  }
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
- }
9683
9532
 
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
- }
9533
+ .pf-c-icon__content {
9534
+ color: var(--pf-c-icon__content--Color);
9535
+ opacity: var(--pf-c-icon__content--Opacity, 1);
9692
9536
  }
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
- }
9702
9537
 
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
- }
9538
+ .pf-c-icon__content.pf-m-danger {
9539
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
9711
9540
  }
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
- }
9721
9541
 
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
- }
9542
+ .pf-c-icon__content.pf-m-warning {
9543
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
9730
9544
  }
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);
9545
+
9546
+ .pf-c-icon__content.pf-m-success {
9547
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
9737
9548
  }
9738
9549
 
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);
9550
+ .pf-c-icon__content.pf-m-info {
9551
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
9748
9552
  }
9749
9553
 
9750
- .pf-c-jump-links__list::before {
9554
+ .pf-c-icon__content.pf-m-default {
9555
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
9556
+ }
9557
+
9558
+ .pf-c-icon__progress {
9751
9559
  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);
9560
+ top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
9561
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
9562
+ transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
9760
9563
  }
9761
9564
 
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);
9565
+ .pf-c-input-group {
9566
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9567
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9568
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9569
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9570
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9571
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9572
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9769
9573
  }
9770
9574
 
9771
- .pf-c-jump-links__link {
9772
- position: relative;
9575
+ .pf-c-input-group {
9576
+ --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9577
+ --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9578
+ --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9579
+ --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9580
+ --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9581
+ --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9582
+ --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9583
+ --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9584
+ --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9585
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9586
+ --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9587
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9588
+ --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9589
+ --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9590
+ --pf-c-input-group--c-form-control--MarginRight: 0;
9591
+ color: var(--pf-global--Color--100);
9773
9592
  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);
9593
+ width: 100%;
9594
+ background-color: var(--pf-c-input-group--BackgroundColor);
9781
9595
  }
9782
9596
 
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);
9597
+ .pf-c-input-group.pf-m-plain {
9598
+ --pf-c-input-group--BackgroundColor: transparent;
9785
9599
  }
9786
9600
 
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);
9601
+ .pf-c-input-group > * + * {
9602
+ margin-left: -1px;
9789
9603
  }
9790
9604
 
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);
9605
+ .pf-c-input-group > :focus,
9606
+ .pf-c-input-group > :focus-within {
9607
+ z-index: var(--pf-c-input-group--child--ZIndex);
9802
9608
  }
9803
9609
 
9804
- .pf-c-jump-links__item {
9805
- --pf-c-jump-links__list--before--BorderColor: transparent;
9610
+ .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9611
+ margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9806
9612
  }
9807
9613
 
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);
9614
+ .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9615
+ .pf-c-input-group textarea {
9616
+ flex: 2;
9617
+ min-width: 0;
9813
9618
  }
9814
9619
 
9815
- .pf-c-jump-links__link-text {
9816
- color: var(--pf-c-jump-links__link-text--Color);
9620
+ .pf-c-input-group textarea {
9621
+ min-height: var(--pf-c-input-group__textarea--MinHeight);
9817
9622
  }
9818
9623
 
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);
9624
+ .pf-c-input-group__text {
9625
+ display: flex;
9626
+ align-items: center;
9627
+ padding-right: var(--pf-c-input-group__text--PaddingRight);
9628
+ padding-left: var(--pf-c-input-group__text--PaddingLeft);
9629
+ font-size: var(--pf-c-input-group__text--FontSize);
9630
+ color: var(--pf-c-input-group__text--Color);
9631
+ text-align: center;
9632
+ background-color: var(--pf-c-input-group__text--BackgroundColor);
9633
+ border: var(--pf-c-input-group__text--BorderWidth) solid;
9634
+ border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9823
9635
  }
9824
9636
 
9825
- .pf-c-jump-links__main {
9826
- display: flex;
9827
- flex-direction: column;
9637
+ label.pf-c-input-group__text {
9638
+ cursor: pointer;
9828
9639
  }
9829
9640
 
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);
9641
+ .pf-c-input-group__text.pf-m-plain {
9642
+ --pf-c-input-group__text--BorderWidth: 0;
9643
+ margin-left: 0;
9836
9644
  }
9837
9645
 
9838
- .pf-c-jump-links__toggle .pf-c-button {
9839
- display: flex;
9840
- align-items: center;
9646
+ :where(.pf-theme-dark) .pf-c-input-group {
9647
+ --pf-c-input-group--BackgroundColor: transparent;
9648
+ --pf-c-input-group__text--BorderTopColor: transparent;
9649
+ --pf-c-input-group__text--BorderRightColor: transparent;
9650
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9651
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9652
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9841
9653
  }
9842
9654
 
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));
9655
+ :where(.pf-theme-dark) .pf-c-input-group > * + * {
9656
+ margin-left: 0;
9657
+ border-left: 1px solid var(--pf-global--palette--black-700);
9848
9658
  }
9849
9659
 
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);
9660
+ :where(.pf-theme-dark) .pf-c-input-group__text {
9661
+ --pf-c-input-group__text--BorderTopColor: transparent;
9662
+ --pf-c-input-group__text--BorderRightColor: transparent;
9663
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9664
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9665
+ }
9666
+
9667
+ :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9668
+ --pf-c-input-group__text--BackgroundColor: transparent;
9853
9669
  }
9854
9670
 
9855
9671
  .pf-c-sidebar {
@@ -10051,130 +9867,451 @@ label.pf-c-input-group__text {
10051
9867
  --pf-c-sidebar__panel--FlexBasis: 66%;
10052
9868
  }
10053
9869
 
10054
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9870
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9871
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9872
+ }
9873
+
9874
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9875
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9876
+ }
9877
+ }
9878
+ @media (min-width: 768px) {
9879
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9880
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9881
+ }
9882
+
9883
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
9884
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9885
+ }
9886
+
9887
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
9888
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9889
+ }
9890
+
9891
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
9892
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9893
+ }
9894
+
9895
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9896
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9897
+ }
9898
+
9899
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
9900
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9901
+ }
9902
+
9903
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
9904
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9905
+ }
9906
+ }
9907
+ @media (min-width: 992px) {
9908
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9909
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9910
+ }
9911
+
9912
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9913
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9914
+ }
9915
+
9916
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9917
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9918
+ }
9919
+
9920
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9921
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9922
+ }
9923
+
9924
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9925
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9926
+ }
9927
+
9928
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9929
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9930
+ }
9931
+
9932
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9933
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9934
+ }
9935
+ }
9936
+ @media (min-width: 1200px) {
9937
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9938
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9939
+ }
9940
+
9941
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9942
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9943
+ }
9944
+
9945
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9946
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9947
+ }
9948
+
9949
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9950
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9951
+ }
9952
+
9953
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9954
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9955
+ }
9956
+
9957
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10055
9958
  --pf-c-sidebar__panel--FlexBasis: 75%;
10056
9959
  }
10057
9960
 
10058
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9961
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10059
9962
  --pf-c-sidebar__panel--FlexBasis: 100%;
10060
9963
  }
10061
9964
  }
10062
- @media (min-width: 768px) {
10063
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
9965
+ @media (min-width: 1450px) {
9966
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10064
9967
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10065
9968
  }
10066
9969
 
10067
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
9970
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10068
9971
  --pf-c-sidebar__panel--FlexBasis: 25%;
10069
9972
  }
10070
9973
 
10071
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9974
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10072
9975
  --pf-c-sidebar__panel--FlexBasis: 33%;
10073
9976
  }
10074
9977
 
10075
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9978
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10076
9979
  --pf-c-sidebar__panel--FlexBasis: 50%;
10077
9980
  }
10078
9981
 
10079
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9982
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10080
9983
  --pf-c-sidebar__panel--FlexBasis: 66%;
10081
9984
  }
10082
9985
 
10083
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9986
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10084
9987
  --pf-c-sidebar__panel--FlexBasis: 75%;
10085
9988
  }
10086
9989
 
10087
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9990
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10088
9991
  --pf-c-sidebar__panel--FlexBasis: 100%;
10089
9992
  }
10090
9993
  }
10091
- @media (min-width: 992px) {
10092
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10093
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9994
+ .pf-c-jump-links {
9995
+ --pf-c-jump-links__list--Display: flex;
9996
+ --pf-c-jump-links__list--Visibility: visible;
9997
+ --pf-c-jump-links__list--PaddingTop: 0;
9998
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9999
+ --pf-c-jump-links__list--PaddingBottom: 0;
10000
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
10001
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
10002
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
10003
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
10004
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
10005
+ --pf-c-jump-links__list--FlexDirection: row;
10006
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
10007
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
10008
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10009
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
10010
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
10011
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
10012
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
10013
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
10014
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10015
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
10016
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
10017
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
10018
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
10019
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
10020
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
10021
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
10022
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
10023
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
10024
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
10025
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
10026
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
10027
+ --pf-c-jump-links__link--before--BorderColor: transparent;
10028
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
10029
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
10030
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
10031
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
10032
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
10033
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
10034
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
10035
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
10036
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
10037
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
10038
+ --pf-c-jump-links__label--Display: block;
10039
+ --pf-c-jump-links__label--Visibility: visible;
10040
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
10041
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
10042
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
10043
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
10044
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
10045
+ --pf-c-jump-links__toggle--Display: none;
10046
+ --pf-c-jump-links__toggle--Visibility: hidden;
10047
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
10048
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
10049
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
10050
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
10051
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
10052
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
10053
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
10054
+ display: flex;
10055
+ }
10056
+
10057
+ .pf-c-jump-links.pf-m-center {
10058
+ justify-content: center;
10059
+ }
10060
+
10061
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
10062
+ align-items: center;
10063
+ }
10064
+
10065
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
10066
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
10067
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
10068
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
10069
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
10070
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
10071
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
10072
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
10073
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
10074
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
10075
+ flex-direction: column;
10076
+ }
10077
+
10078
+ .pf-c-jump-links.pf-m-expandable {
10079
+ --pf-c-jump-links__list--Display: none;
10080
+ --pf-c-jump-links__list--Visibility: hidden;
10081
+ --pf-c-jump-links__toggle--Display: block;
10082
+ --pf-c-jump-links__toggle--Visibility: visible;
10083
+ --pf-c-jump-links__label--Display: none;
10084
+ --pf-c-jump-links__label--Visibility: hidden;
10085
+ }
10086
+
10087
+ .pf-c-jump-links.pf-m-non-expandable {
10088
+ --pf-c-jump-links__list--Display: flex;
10089
+ --pf-c-jump-links__list--Visibility: visible;
10090
+ --pf-c-jump-links__toggle--Display: none;
10091
+ --pf-c-jump-links__toggle--Visibility: hidden;
10092
+ --pf-c-jump-links__label--Display: block;
10093
+ --pf-c-jump-links__label--Visibility: visible;
10094
+ }
10095
+
10096
+ @media (min-width: 576px) {
10097
+ .pf-c-jump-links.pf-m-expandable-on-sm {
10098
+ --pf-c-jump-links__list--Display: none;
10099
+ --pf-c-jump-links__list--Visibility: hidden;
10100
+ --pf-c-jump-links__toggle--Display: block;
10101
+ --pf-c-jump-links__toggle--Visibility: visible;
10102
+ --pf-c-jump-links__label--Display: none;
10103
+ --pf-c-jump-links__label--Visibility: hidden;
10094
10104
  }
10095
10105
 
10096
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10097
- --pf-c-sidebar__panel--FlexBasis: 25%;
10106
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
10107
+ --pf-c-jump-links__list--Display: flex;
10108
+ --pf-c-jump-links__list--Visibility: visible;
10109
+ --pf-c-jump-links__toggle--Display: none;
10110
+ --pf-c-jump-links__toggle--Visibility: hidden;
10111
+ --pf-c-jump-links__label--Display: block;
10112
+ --pf-c-jump-links__label--Visibility: visible;
10113
+ }
10114
+ }
10115
+ @media (min-width: 768px) {
10116
+ .pf-c-jump-links.pf-m-expandable-on-md {
10117
+ --pf-c-jump-links__list--Display: none;
10118
+ --pf-c-jump-links__list--Visibility: hidden;
10119
+ --pf-c-jump-links__toggle--Display: block;
10120
+ --pf-c-jump-links__toggle--Visibility: visible;
10121
+ --pf-c-jump-links__label--Display: none;
10122
+ --pf-c-jump-links__label--Visibility: hidden;
10098
10123
  }
10099
10124
 
10100
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10101
- --pf-c-sidebar__panel--FlexBasis: 33%;
10125
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
10126
+ --pf-c-jump-links__list--Display: flex;
10127
+ --pf-c-jump-links__list--Visibility: visible;
10128
+ --pf-c-jump-links__toggle--Display: none;
10129
+ --pf-c-jump-links__toggle--Visibility: hidden;
10130
+ --pf-c-jump-links__label--Display: block;
10131
+ --pf-c-jump-links__label--Visibility: visible;
10132
+ }
10133
+ }
10134
+ @media (min-width: 992px) {
10135
+ .pf-c-jump-links.pf-m-expandable-on-lg {
10136
+ --pf-c-jump-links__list--Display: none;
10137
+ --pf-c-jump-links__list--Visibility: hidden;
10138
+ --pf-c-jump-links__toggle--Display: block;
10139
+ --pf-c-jump-links__toggle--Visibility: visible;
10140
+ --pf-c-jump-links__label--Display: none;
10141
+ --pf-c-jump-links__label--Visibility: hidden;
10102
10142
  }
10103
10143
 
10104
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10105
- --pf-c-sidebar__panel--FlexBasis: 50%;
10144
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
10145
+ --pf-c-jump-links__list--Display: flex;
10146
+ --pf-c-jump-links__list--Visibility: visible;
10147
+ --pf-c-jump-links__toggle--Display: none;
10148
+ --pf-c-jump-links__toggle--Visibility: hidden;
10149
+ --pf-c-jump-links__label--Display: block;
10150
+ --pf-c-jump-links__label--Visibility: visible;
10151
+ }
10152
+ }
10153
+ @media (min-width: 1200px) {
10154
+ .pf-c-jump-links.pf-m-expandable-on-xl {
10155
+ --pf-c-jump-links__list--Display: none;
10156
+ --pf-c-jump-links__list--Visibility: hidden;
10157
+ --pf-c-jump-links__toggle--Display: block;
10158
+ --pf-c-jump-links__toggle--Visibility: visible;
10159
+ --pf-c-jump-links__label--Display: none;
10160
+ --pf-c-jump-links__label--Visibility: hidden;
10106
10161
  }
10107
10162
 
10108
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10109
- --pf-c-sidebar__panel--FlexBasis: 66%;
10163
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
10164
+ --pf-c-jump-links__list--Display: flex;
10165
+ --pf-c-jump-links__list--Visibility: visible;
10166
+ --pf-c-jump-links__toggle--Display: none;
10167
+ --pf-c-jump-links__toggle--Visibility: hidden;
10168
+ --pf-c-jump-links__label--Display: block;
10169
+ --pf-c-jump-links__label--Visibility: visible;
10170
+ }
10171
+ }
10172
+ @media (min-width: 1450px) {
10173
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
10174
+ --pf-c-jump-links__list--Display: none;
10175
+ --pf-c-jump-links__list--Visibility: hidden;
10176
+ --pf-c-jump-links__toggle--Display: block;
10177
+ --pf-c-jump-links__toggle--Visibility: visible;
10178
+ --pf-c-jump-links__label--Display: none;
10179
+ --pf-c-jump-links__label--Visibility: hidden;
10110
10180
  }
10111
10181
 
10112
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10113
- --pf-c-sidebar__panel--FlexBasis: 75%;
10182
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10183
+ --pf-c-jump-links__list--Display: flex;
10184
+ --pf-c-jump-links__list--Visibility: visible;
10185
+ --pf-c-jump-links__toggle--Display: none;
10186
+ --pf-c-jump-links__toggle--Visibility: hidden;
10187
+ --pf-c-jump-links__label--Display: block;
10188
+ --pf-c-jump-links__label--Visibility: visible;
10114
10189
  }
10190
+ }
10191
+ .pf-c-jump-links.pf-m-expanded {
10192
+ --pf-c-jump-links__list--Display: flex;
10193
+ --pf-c-jump-links__list--Visibility: visible;
10194
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10195
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10196
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10197
+ }
10198
+
10199
+ .pf-c-jump-links__list {
10200
+ position: relative;
10201
+ display: var(--pf-c-jump-links__list--Display);
10202
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10203
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
10204
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
10205
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10206
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10207
+ visibility: var(--pf-c-jump-links__list--Visibility);
10208
+ }
10209
+
10210
+ .pf-c-jump-links__list::before {
10211
+ position: absolute;
10212
+ top: 0;
10213
+ right: 0;
10214
+ bottom: 0;
10215
+ left: 0;
10216
+ pointer-events: none;
10217
+ content: "";
10218
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
10219
+ 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);
10220
+ }
10221
+
10222
+ .pf-c-jump-links__list .pf-c-jump-links__list {
10223
+ --pf-c-jump-links__list--PaddingTop: 0;
10224
+ --pf-c-jump-links__list--PaddingBottom: 0;
10225
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10226
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10227
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10228
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10229
+ }
10115
10230
 
10116
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10117
- --pf-c-sidebar__panel--FlexBasis: 100%;
10118
- }
10231
+ .pf-c-jump-links__link {
10232
+ position: relative;
10233
+ display: flex;
10234
+ flex: 1;
10235
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
10236
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
10237
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10238
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10239
+ text-decoration: none;
10240
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10119
10241
  }
10120
- @media (min-width: 1200px) {
10121
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10122
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10123
- }
10124
10242
 
10125
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10126
- --pf-c-sidebar__panel--FlexBasis: 25%;
10127
- }
10243
+ .pf-c-jump-links__link:hover {
10244
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10245
+ }
10128
10246
 
10129
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10130
- --pf-c-sidebar__panel--FlexBasis: 33%;
10131
- }
10247
+ .pf-c-jump-links__link:focus {
10248
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10249
+ }
10132
10250
 
10133
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10134
- --pf-c-sidebar__panel--FlexBasis: 50%;
10135
- }
10251
+ .pf-c-jump-links__link::before {
10252
+ position: absolute;
10253
+ top: 0;
10254
+ right: 0;
10255
+ bottom: 0;
10256
+ left: 0;
10257
+ pointer-events: none;
10258
+ content: "";
10259
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
10260
+ border-style: solid;
10261
+ 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);
10262
+ }
10136
10263
 
10137
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10138
- --pf-c-sidebar__panel--FlexBasis: 66%;
10139
- }
10264
+ .pf-c-jump-links__item {
10265
+ --pf-c-jump-links__list--before--BorderColor: transparent;
10266
+ }
10140
10267
 
10141
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10142
- --pf-c-sidebar__panel--FlexBasis: 75%;
10143
- }
10268
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10269
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10270
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10271
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10272
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10273
+ }
10144
10274
 
10145
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10146
- --pf-c-sidebar__panel--FlexBasis: 100%;
10147
- }
10275
+ .pf-c-jump-links__link-text {
10276
+ color: var(--pf-c-jump-links__link-text--Color);
10148
10277
  }
10149
- @media (min-width: 1450px) {
10150
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10151
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10152
- }
10153
10278
 
10154
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10155
- --pf-c-sidebar__panel--FlexBasis: 25%;
10156
- }
10279
+ .pf-c-jump-links__label {
10280
+ display: var(--pf-c-jump-links__label--Display);
10281
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10282
+ visibility: var(--pf-c-jump-links__label--Visibility);
10283
+ }
10157
10284
 
10158
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10159
- --pf-c-sidebar__panel--FlexBasis: 33%;
10160
- }
10285
+ .pf-c-jump-links__main {
10286
+ display: flex;
10287
+ flex-direction: column;
10288
+ }
10161
10289
 
10162
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10163
- --pf-c-sidebar__panel--FlexBasis: 50%;
10164
- }
10290
+ .pf-c-jump-links__toggle {
10291
+ display: var(--pf-c-jump-links__toggle--Display);
10292
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10293
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10294
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10295
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
10296
+ }
10165
10297
 
10166
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10167
- --pf-c-sidebar__panel--FlexBasis: 66%;
10168
- }
10298
+ .pf-c-jump-links__toggle .pf-c-button {
10299
+ display: flex;
10300
+ align-items: center;
10301
+ }
10169
10302
 
10170
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10171
- --pf-c-sidebar__panel--FlexBasis: 75%;
10172
- }
10303
+ .pf-c-jump-links__toggle-icon {
10304
+ display: inline-block;
10305
+ color: var(--pf-c-jump-links__toggle-icon--Color);
10306
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
10307
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10308
+ }
10173
10309
 
10174
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10175
- --pf-c-sidebar__panel--FlexBasis: 100%;
10176
- }
10310
+ .pf-c-jump-links__toggle-text {
10311
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10312
+ color: var(--pf-c-jump-links__toggle-text--Color);
10177
10313
  }
10314
+
10178
10315
  .pf-c-label {
10179
10316
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10180
10317
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -10782,143 +10919,6 @@ button.pf-c-label__content:focus {
10782
10919
  display: none;
10783
10920
  }
10784
10921
 
10785
- .pf-c-icon {
10786
- --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
10787
- --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
10788
- --pf-c-icon--m-inline--Width: 1em;
10789
- --pf-c-icon--m-inline--Height: 1em;
10790
- --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
10791
- --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
10792
- --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
10793
- --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
10794
- --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
10795
- --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
10796
- --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
10797
- --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
10798
- --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
10799
- --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
10800
- --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
10801
- --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
10802
- --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
10803
- --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
10804
- --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
10805
- --pf-c-icon--m-inline__content--FontSize: 1em;
10806
- --pf-c-icon__content--svg--VerticalAlign: -.125em;
10807
- --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
10808
- --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
10809
- --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
10810
- --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
10811
- position: relative;
10812
- display: inline-flex;
10813
- align-items: center;
10814
- justify-content: center;
10815
- width: var(--pf-c-icon--Width);
10816
- height: var(--pf-c-icon--Height);
10817
- }
10818
-
10819
- .pf-c-icon.pf-m-inline {
10820
- --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
10821
- --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
10822
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
10823
- --pf-c-icon__content--Color: currentcolor;
10824
- line-height: 1;
10825
- }
10826
-
10827
- .pf-c-icon.pf-m-inline .pf-c-spinner {
10828
- --pf-c-spinner--diameter: 1em;
10829
- }
10830
-
10831
- .pf-c-icon.pf-m-sm {
10832
- --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
10833
- --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
10834
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
10835
- }
10836
-
10837
- .pf-c-icon.pf-m-md {
10838
- --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
10839
- --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
10840
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
10841
- }
10842
-
10843
- .pf-c-icon.pf-m-lg {
10844
- --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
10845
- --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
10846
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
10847
- }
10848
-
10849
- .pf-c-icon.pf-m-xl {
10850
- --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
10851
- --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
10852
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
10853
- }
10854
-
10855
- .pf-c-icon.pf-m-in-progress {
10856
- --pf-c-icon__content--Opacity: 0;
10857
- --pf-c-icon__progress--Opacity: 1;
10858
- }
10859
-
10860
- .pf-c-icon__content,
10861
- .pf-c-icon__progress {
10862
- font-size: var(--pf-c-icon__content--FontSize);
10863
- }
10864
-
10865
- .pf-c-icon__content svg,
10866
- .pf-c-icon__progress svg {
10867
- vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
10868
- }
10869
-
10870
- .pf-c-icon__content.pf-m-sm,
10871
- .pf-c-icon__progress.pf-m-sm {
10872
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
10873
- }
10874
-
10875
- .pf-c-icon__content.pf-m-md,
10876
- .pf-c-icon__progress.pf-m-md {
10877
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
10878
- }
10879
-
10880
- .pf-c-icon__content.pf-m-lg,
10881
- .pf-c-icon__progress.pf-m-lg {
10882
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
10883
- }
10884
-
10885
- .pf-c-icon__content.pf-m-xl,
10886
- .pf-c-icon__progress.pf-m-xl {
10887
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
10888
- }
10889
-
10890
- .pf-c-icon__content {
10891
- color: var(--pf-c-icon__content--Color);
10892
- opacity: var(--pf-c-icon__content--Opacity, 1);
10893
- }
10894
-
10895
- .pf-c-icon__content.pf-m-danger {
10896
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
10897
- }
10898
-
10899
- .pf-c-icon__content.pf-m-warning {
10900
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
10901
- }
10902
-
10903
- .pf-c-icon__content.pf-m-success {
10904
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
10905
- }
10906
-
10907
- .pf-c-icon__content.pf-m-info {
10908
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
10909
- }
10910
-
10911
- .pf-c-icon__content.pf-m-default {
10912
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
10913
- }
10914
-
10915
- .pf-c-icon__progress {
10916
- position: absolute;
10917
- top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
10918
- opacity: var(--pf-c-icon__progress--Opacity, 0);
10919
- transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
10920
- }
10921
-
10922
10922
  .pf-c-list {
10923
10923
  --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10924
10924
  --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);