@patternfly/react-core 4.231.3 → 4.231.6

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/dist/esm/components/MenuToggle/MenuToggle.d.ts +1 -1
  3. package/dist/esm/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  4. package/dist/esm/components/MenuToggle/MenuToggle.js.map +1 -1
  5. package/dist/js/components/MenuToggle/MenuToggle.d.ts +1 -1
  6. package/dist/js/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  7. package/dist/js/components/MenuToggle/MenuToggle.js.map +1 -1
  8. package/dist/umd/react-core.css +1456 -1456
  9. package/package.json +5 -5
  10. package/src/components/MenuToggle/MenuToggle.tsx +7 -1
package/dist/umd/react-core.css CHANGED
@@ -2836,779 +2836,779 @@ button.pf-c-breadcrumb__link {
2836
2836
  --pf-c-calendar-month__date--BackgroundColor: var(--pf-global--primary-color--300);
2837
2837
  }
2838
2838
 
2839
- .pf-c-card {
2840
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
2841
- --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
2842
- --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
2843
- --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
2844
- --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
2845
- --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
2846
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
2847
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
2848
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
2849
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
2850
- --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
2851
- --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
2852
- --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
2853
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
2854
- --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
2855
- --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
2856
- --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
2857
- --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
2858
- --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
2859
- --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2860
- --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
2861
- --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
2862
- --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
2863
- --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
2864
- --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
2865
- --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
2866
- --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
2867
- --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
2868
- --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
2869
- --pf-c-card--m-selectable-raised--before--Right: 0;
2870
- --pf-c-card--m-selectable-raised--before--Bottom: 0;
2871
- --pf-c-card--m-selectable-raised--before--Left: 0;
2872
- --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2873
- --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2874
- --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2875
- --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
2876
- --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
2877
- --pf-c-card--m-selectable-raised--before--Transition: none;
2878
- --pf-c-card--m-selectable-raised--before--ScaleY: 1;
2879
- --pf-c-card--m-selectable-raised--before--TranslateY: 0;
2880
- --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
2881
- --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
2882
- --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
2883
- --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
2884
- --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
2885
- --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
2886
- --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
2887
- --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
2888
- --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
2889
- --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
2890
- --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
2891
- --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
2892
- --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
2893
- --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
2894
- --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
2895
- --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
2896
- --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
2897
- --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
2898
- --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
2899
- --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
2900
- --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
2901
- --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
2902
- --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
2903
- --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
2904
- --pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md);
2905
- --pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md);
2906
- --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
2907
- --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
2908
- --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
2909
- --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
2910
- --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
2911
- --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
2912
- --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
2913
- --pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl);
2914
- --pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl);
2915
- --pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg);
2916
- --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
2917
- --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
2918
- --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
2919
- --pf-c-card--m-full-height--Height: 100%;
2920
- --pf-c-card--m-plain--BoxShadow: none;
2921
- --pf-c-card--m-plain--BackgroundColor: transparent;
2922
- --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
2923
- --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
2924
- --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
2925
- --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
2926
- --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
2927
- display: flex;
2928
- flex-direction: column;
2929
- background-color: var(--pf-c-card--BackgroundColor);
2930
- box-shadow: var(--pf-c-card--BoxShadow);
2839
+ .pf-c-check {
2840
+ --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
2841
+ --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
2842
+ --pf-c-check__label--Color: var(--pf-global--Color--100);
2843
+ --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
2844
+ --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
2845
+ --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
2846
+ --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
2847
+ --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
2848
+ --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
2849
+ --pf-c-check__description--Color: var(--pf-global--Color--200);
2850
+ --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
2851
+ display: grid;
2852
+ grid-template-columns: auto 1fr;
2853
+ grid-gap: var(--pf-c-check--GridGap);
2854
+ align-items: start;
2855
+ justify-items: start;
2931
2856
  }
2932
2857
 
2933
- .pf-c-card.pf-m-hoverable:hover {
2934
- box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
2858
+ .pf-c-check.pf-m-standalone {
2859
+ --pf-c-check--GridGap: 0;
2860
+ --pf-c-check__input--Height: auto;
2861
+ --pf-c-check__input--MarginTop: 0;
2862
+ display: inline-grid;
2863
+ line-height: 1;
2935
2864
  }
2936
2865
 
2937
- .pf-c-card.pf-m-selectable {
2938
- position: relative;
2939
- cursor: pointer;
2866
+ .pf-c-check__label {
2867
+ font-size: var(--pf-c-check__label--FontSize);
2868
+ font-weight: var(--pf-c-check__label--FontWeight);
2869
+ line-height: var(--pf-c-check__label--LineHeight);
2870
+ color: var(--pf-c-check__label--Color);
2940
2871
  }
2941
2872
 
2942
- .pf-c-card.pf-m-selectable:hover {
2943
- box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
2873
+ .pf-c-check__input {
2874
+ height: var(--pf-c-check__input--Height);
2875
+ margin-top: var(--pf-c-check__input--MarginTop);
2944
2876
  }
2945
2877
 
2946
- .pf-c-card.pf-m-selectable:focus {
2947
- box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
2878
+ .pf-c-check__description {
2879
+ grid-column: 2;
2880
+ font-size: var(--pf-c-check__description--FontSize);
2881
+ color: var(--pf-c-check__description--Color);
2948
2882
  }
2949
2883
 
2950
- .pf-c-card.pf-m-selectable:active {
2951
- box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
2884
+ .pf-c-check__body {
2885
+ grid-column: 2;
2886
+ margin-top: var(--pf-c-check__body--MarginTop);
2952
2887
  }
2953
2888
 
2954
- .pf-c-card.pf-m-selectable.pf-m-selected {
2955
- box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
2889
+ label.pf-c-check, .pf-c-check__label,
2890
+ .pf-c-check__input {
2891
+ cursor: pointer;
2956
2892
  }
2957
2893
 
2958
- .pf-c-card.pf-m-selectable.pf-m-selected::before {
2959
- position: absolute;
2960
- top: 0;
2961
- right: 0;
2962
- left: 0;
2963
- height: var(--pf-c-card--m-selectable--m-selected--before--Height);
2964
- content: "";
2965
- background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
2894
+ .pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
2895
+ .pf-c-check__input:disabled,
2896
+ .pf-c-check__input.pf-m-disabled {
2897
+ --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
2898
+ cursor: not-allowed;
2966
2899
  }
2967
2900
 
2968
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
2901
+ .pf-c-chip {
2902
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
2903
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
2904
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2905
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2906
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
2907
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2908
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2909
+ }
2910
+
2911
+ .pf-c-chip {
2912
+ --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
2913
+ --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
2914
+ --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
2915
+ --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
2916
+ --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
2917
+ --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
2918
+ --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
2919
+ --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
2920
+ --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
2921
+ --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
2922
+ --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
2923
+ --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
2924
+ --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
2925
+ --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
2926
+ --pf-c-chip__text--Color: var(--pf-global--Color--100);
2927
+ --pf-c-chip__text--MaxWidth: 16ch;
2928
+ --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
2929
+ --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
2930
+ --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
2931
+ --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
2932
+ --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
2933
+ --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
2934
+ --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
2935
+ --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
2936
+ --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
2937
+ --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
2938
+ color: var(--pf-global--Color--100);
2969
2939
  position: relative;
2940
+ display: inline-flex;
2941
+ align-items: center;
2942
+ min-width: 0;
2943
+ padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
2944
+ list-style: none;
2945
+ background-color: var(--pf-c-chip--BackgroundColor);
2946
+ border-radius: var(--pf-c-chip--BorderRadius);
2970
2947
  }
2971
2948
 
2972
- .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
2949
+ .pf-c-chip::before {
2973
2950
  position: absolute;
2974
- right: var(--pf-c-card--m-selectable-raised--before--Right);
2975
- bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
2976
- left: var(--pf-c-card--m-selectable-raised--before--Left);
2977
- height: var(--pf-c-card--m-selectable-raised--before--Height);
2951
+ top: 0;
2952
+ right: 0;
2953
+ bottom: 0;
2954
+ left: 0;
2978
2955
  content: "";
2979
- background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
2980
- transition: var(--pf-c-card--m-selectable-raised--before--Transition);
2981
- transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
2982
- transform-origin: center bottom;
2956
+ border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
2957
+ border-radius: var(--pf-c-chip--before--BorderRadius);
2983
2958
  }
2984
2959
 
2985
- .pf-c-card.pf-m-hoverable-raised:hover {
2986
- --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
2987
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
2960
+ .pf-c-chip.pf-m-overflow {
2961
+ border: 0;
2988
2962
  }
2989
2963
 
2990
- .pf-c-card.pf-m-selectable-raised {
2991
- cursor: pointer;
2964
+ .pf-c-chip.pf-m-overflow .pf-c-chip__text {
2965
+ color: var(--pf-c-chip--m-overflow__text--Color);
2992
2966
  }
2993
2967
 
2994
- .pf-c-card.pf-m-selectable-raised:hover {
2995
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
2996
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
2968
+ .pf-c-chip.pf-m-draggable {
2969
+ --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
2970
+ box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
2997
2971
  }
2998
2972
 
2999
- .pf-c-card.pf-m-selectable-raised:focus {
3000
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
3001
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
2973
+ .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
2974
+ font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
3002
2975
  }
3003
2976
 
3004
- .pf-c-card.pf-m-selectable-raised:active {
3005
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
3006
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
2977
+ .pf-c-chip .pf-c-button {
2978
+ --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
2979
+ --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
2980
+ --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
2981
+ --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
2982
+ --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
2983
+ margin-top: var(--pf-c-chip__c-button--MarginTop);
2984
+ margin-right: var(--pf-c-chip__c-button--MarginRight);
2985
+ margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
3007
2986
  }
3008
2987
 
3009
- .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
3010
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
3011
- --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
3012
- --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
3013
- --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
3014
- z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
3015
- box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
3016
- transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
3017
- transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
3018
- }
3019
-
3020
- .pf-c-card.pf-m-non-selectable-raised {
3021
- --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
3022
- --pf-c-card--BoxShadow: none;
3023
- --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
3024
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
3025
- --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
2988
+ .pf-c-chip .pf-c-badge {
2989
+ margin-left: var(--pf-c-chip__c-badge--MarginLeft);
3026
2990
  }
3027
2991
 
3028
- .pf-c-card.pf-m-compact {
3029
- --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
3030
- --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
3031
- --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);
3032
- --pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);
3033
- --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);
3034
- --pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);
3035
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);
3036
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
2992
+ .pf-c-chip__text {
2993
+ overflow: hidden;
2994
+ text-overflow: ellipsis;
2995
+ white-space: nowrap;
2996
+ position: relative;
2997
+ max-width: var(--pf-c-chip__text--MaxWidth);
2998
+ font-size: var(--pf-c-chip__text--FontSize);
2999
+ color: var(--pf-c-chip__text--Color);
3037
3000
  }
3038
3001
 
3039
- .pf-c-card.pf-m-display-lg {
3040
- --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
3041
- --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
3042
- --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
3043
- --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
3044
- --pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);
3045
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);
3046
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);
3002
+ .pf-c-chip__icon + .pf-c-chip__text,
3003
+ .pf-c-chip__text + .pf-c-chip__icon {
3004
+ margin-left: var(--pf-c-chip__icon--MarginLeft);
3047
3005
  }
3048
3006
 
3049
- .pf-c-card.pf-m-flat {
3050
- --pf-c-card--BoxShadow: none;
3051
- --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
3052
- --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
3053
- --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
3054
- --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
3055
- border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
3007
+ :where(.pf-theme-dark) .pf-c-chip {
3008
+ --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
3009
+ --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
3010
+ --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
3056
3011
  }
3057
3012
 
3058
- .pf-c-card.pf-m-plain {
3059
- --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);
3060
- --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
3013
+ .pf-c-chip-group {
3014
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3015
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
3016
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3017
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3018
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
3019
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3020
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3061
3021
  }
3062
3022
 
3063
- .pf-c-card.pf-m-rounded {
3064
- --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
3065
- border-radius: var(--pf-c-card--m-rounded--BorderRadius);
3023
+ .pf-c-chip-group {
3024
+ color: var(--pf-global--Color--100);
3025
+ --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3026
+ --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
3027
+ --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
3028
+ --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
3029
+ --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
3030
+ --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
3031
+ --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
3032
+ --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
3033
+ --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
3034
+ --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
3035
+ --pf-c-chip-group__label--MaxWidth: 18ch;
3036
+ --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
3037
+ --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3038
+ --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
3039
+ --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
3040
+ max-width: 100%;
3066
3041
  }
3067
3042
 
3068
- .pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {
3069
- transform: rotate(var(--pf-c-card--m-expanded__header-toggle-icon--Rotate));
3043
+ .pf-c-chip-group.pf-m-category {
3044
+ padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
3045
+ padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
3046
+ padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
3047
+ padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
3048
+ background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
3049
+ border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
3070
3050
  }
3071
3051
 
3072
- .pf-c-card.pf-m-full-height {
3073
- height: var(--pf-c-card--m-full-height--Height);
3052
+ .pf-c-chip-group__main {
3053
+ display: flex;
3054
+ flex: 1;
3055
+ flex-wrap: wrap;
3056
+ align-items: baseline;
3057
+ min-width: 0;
3074
3058
  }
3075
3059
 
3076
- .pf-c-card > .pf-c-divider + .pf-c-card__header, .pf-c-card > .pf-c-divider + .pf-c-card__title, .pf-c-card > .pf-c-divider + .pf-c-card__body, .pf-c-card > .pf-c-divider + .pf-c-card__footer {
3077
- padding-top: var(--pf-c-card--c-divider--child--PaddingTop);
3060
+ .pf-c-chip-group__list {
3061
+ margin-right: var(--pf-c-chip-group__list--MarginRight);
3062
+ margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
3078
3063
  }
3079
3064
 
3080
- .pf-c-card__header {
3081
- display: flex;
3082
- flex-direction: row;
3065
+ .pf-c-chip-group,
3066
+ .pf-c-chip-group__list {
3067
+ display: inline-flex;
3068
+ flex-wrap: wrap;
3083
3069
  align-items: center;
3070
+ min-width: 0;
3084
3071
  }
3085
3072
 
3086
- .pf-c-card__header .pf-c-card__title {
3087
- --pf-c-card--first-child--PaddingTop: 0;
3088
- --pf-c-card__title--not--last-child--PaddingBottom: 0;
3089
- padding: 0;
3090
- }
3091
-
3092
- .pf-c-card__header.pf-m-toggle-right {
3093
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
3094
- --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
3073
+ .pf-c-chip-group__list-item {
3074
+ display: inline-flex;
3075
+ min-width: 0;
3076
+ margin-right: var(--pf-c-chip-group__list-item--MarginRight);
3077
+ margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
3095
3078
  }
3096
3079
 
3097
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
3098
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
3080
+ .pf-c-chip-group__label {
3081
+ overflow: hidden;
3082
+ text-overflow: ellipsis;
3083
+ white-space: nowrap;
3084
+ max-width: var(--pf-c-chip-group__label--MaxWidth);
3085
+ margin-right: var(--pf-c-chip-group__label--MarginRight);
3086
+ font-size: var(--pf-c-chip-group__label--FontSize);
3099
3087
  }
3100
3088
 
3101
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
3102
- order: 2;
3089
+ .pf-c-chip-group__close {
3090
+ display: flex;
3091
+ align-self: flex-start;
3092
+ margin-top: var(--pf-c-chip-group__close--MarginTop);
3093
+ margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3103
3094
  }
3104
3095
 
3105
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
3106
- flex: 1;
3096
+ .pf-c-clipboard-copy {
3097
+ --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3098
+ --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
3099
+ --pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md);
3100
+ --pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md);
3101
+ --pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
3102
+ --pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md);
3103
+ --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
3104
+ --pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
3105
+ --pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm);
3106
+ --pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3107
+ --pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
3108
+ --pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100);
3109
+ --pf-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
3110
+ --pf-c-clipboard-copy--m-inline--PaddingTop: 0;
3111
+ --pf-c-clipboard-copy--m-inline--PaddingBottom: 0;
3112
+ --pf-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-global--spacer--xs);
3113
+ --pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--200);
3114
+ --pf-c-clipboard-copy__text--m-code--FontFamily: var(--pf-global--FontFamily--monospace);
3115
+ --pf-c-clipboard-copy__text--m-code--FontSize: var(--pf-global--FontSize--sm);
3116
+ --pf-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
3117
+ --pf-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
3118
+ --pf-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-global--spacer--xs);
3119
+ --pf-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-global--spacer--sm);
3120
+ --pf-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-global--spacer--xs);
3121
+ --pf-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-global--spacer--sm);
3107
3122
  }
3108
3123
 
3109
- .pf-c-card__header-toggle {
3110
- align-self: flex-start;
3111
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) var(--pf-c-card__header-toggle--MarginLeft);
3124
+ .pf-c-clipboard-copy.pf-m-expanded .pf-c-clipboard-copy__toggle-icon {
3125
+ transform: rotate(var(--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate));
3112
3126
  }
3113
3127
 
3114
- .pf-c-card__header-toggle-icon {
3115
- display: inline-block;
3116
- transition: var(--pf-c-card__header-toggle-icon--Transition);
3128
+ .pf-c-clipboard-copy.pf-m-inline {
3129
+ display: inline;
3130
+ padding-top: var(--pf-c-clipboard-copy--m-inline--PaddingTop);
3131
+ padding-bottom: var(--pf-c-clipboard-copy--m-inline--PaddingBottom);
3132
+ padding-left: var(--pf-c-clipboard-copy--m-inline--PaddingLeft);
3133
+ white-space: nowrap;
3134
+ background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor);
3117
3135
  }
3118
3136
 
3119
- .pf-c-card__title {
3120
- font-family: var(--pf-c-card__title--FontFamily);
3121
- font-size: var(--pf-c-card__title--FontSize);
3122
- font-weight: var(--pf-c-card__title--FontWeight);
3137
+ .pf-c-clipboard-copy.pf-m-inline.pf-m-block {
3138
+ display: block;
3123
3139
  }
3124
3140
 
3125
- .pf-c-card__actions {
3141
+ .pf-c-clipboard-copy__group {
3126
3142
  display: flex;
3127
- align-items: center;
3128
- align-self: flex-start;
3129
- order: 1;
3130
- padding-left: var(--pf-c-card__actions--PaddingLeft);
3131
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
3132
3143
  }
3133
3144
 
3134
- .pf-c-card__actions > * + * {
3135
- margin-left: var(--pf-c-card__actions--child--MarginLeft);
3145
+ .pf-c-clipboard-copy__group > * + * {
3146
+ margin-left: -1px;
3136
3147
  }
3137
3148
 
3138
- .pf-c-card__actions + .pf-c-card__title,
3139
- .pf-c-card__actions + .pf-c-card__body,
3140
- .pf-c-card__actions + .pf-c-card__footer {
3141
- padding: 0;
3149
+ .pf-c-clipboard-copy__toggle-icon {
3150
+ transition: var(--pf-c-clipboard-copy__toggle-icon--Transition);
3142
3151
  }
3143
3152
 
3144
- .pf-c-card__actions.pf-m-no-offset {
3145
- --pf-c-card__header-toggle--MarginTop: 0;
3146
- --pf-c-card__header-toggle--MarginBottom: 0;
3153
+ .pf-c-clipboard-copy__expandable-content {
3154
+ padding: var(--pf-c-clipboard-copy__expandable-content--PaddingTop) var(--pf-c-clipboard-copy__expandable-content--PaddingRight) var(--pf-c-clipboard-copy__expandable-content--PaddingBottom) var(--pf-c-clipboard-copy__expandable-content--PaddingLeft);
3155
+ word-wrap: break-word;
3156
+ background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor);
3157
+ background-clip: padding-box;
3158
+ border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor);
3159
+ border-width: var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth) var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth) var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth) var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth);
3160
+ box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);
3147
3161
  }
3148
3162
 
3149
- .pf-c-card__header,
3150
- .pf-c-card__title,
3151
- .pf-c-card__body,
3152
- .pf-c-card__footer {
3153
- padding-right: var(--pf-c-card--child--PaddingRight);
3154
- padding-bottom: var(--pf-c-card--child--PaddingBottom);
3155
- padding-left: var(--pf-c-card--child--PaddingLeft);
3163
+ .pf-c-clipboard-copy__expandable-content pre {
3164
+ white-space: pre-wrap;
3156
3165
  }
3157
3166
 
3158
- .pf-c-card__header:first-child,
3159
- .pf-c-card__title:first-child,
3160
- .pf-c-card__body:first-child,
3161
- .pf-c-card__footer:first-child {
3162
- padding-top: var(--pf-c-card--first-child--PaddingTop);
3167
+ .pf-c-clipboard-copy__text {
3168
+ word-break: break-word;
3169
+ white-space: normal;
3163
3170
  }
3164
3171
 
3165
- .pf-c-card__header:not(:last-child),
3166
- .pf-c-card__title:not(:last-child) {
3167
- padding-bottom: var(--pf-c-card__title--not--last-child--PaddingBottom);
3172
+ .pf-c-clipboard-copy__text.pf-m-code {
3173
+ font-family: var(--pf-c-clipboard-copy__text--m-code--FontFamily);
3174
+ font-size: var(--pf-c-clipboard-copy__text--m-code--FontSize);
3168
3175
  }
3169
3176
 
3170
- .pf-c-card__expandable-content {
3171
- --pf-c-card--first-child--PaddingTop: 0;
3177
+ .pf-c-clipboard-copy__actions {
3178
+ display: inline-flex;
3172
3179
  }
3173
3180
 
3174
- .pf-c-card__body:not(.pf-m-no-fill) {
3175
- flex: 1 1 auto;
3181
+ .pf-c-clipboard-copy__actions-item {
3182
+ margin-top: calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingTop));
3183
+ margin-bottom: calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom));
3176
3184
  }
3177
3185
 
3178
- .pf-c-card__body {
3179
- font-size: var(--pf-c-card__body--FontSize);
3186
+ .pf-c-clipboard-copy__actions-item .pf-c-button {
3187
+ --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop);
3188
+ --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight);
3189
+ --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom);
3190
+ --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft);
3180
3191
  }
3181
3192
 
3182
- .pf-c-card__footer {
3183
- font-size: var(--pf-c-card__footer--FontSize);
3193
+ :where(.pf-theme-dark) .pf-c-clipboard-copy {
3194
+ --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--400);
3184
3195
  }
3185
3196
 
3186
- .pf-c-card__sr-input:focus + .pf-c-card::after {
3187
- position: absolute;
3188
- top: 0;
3189
- right: 0;
3190
- bottom: 0;
3191
- left: 0;
3192
- content: "";
3193
- border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
3197
+ :where(.pf-theme-dark) .pf-c-clipboard-copy__group > * + * {
3198
+ margin-left: 0;
3199
+ border-left: 1px solid var(--pf-global--palette--black-700) !important;
3194
3200
  }
3195
3201
 
3196
- .pf-m-overpass-font .pf-c-card .pf-c-card__title {
3197
- font-weight: var(--pf-global--FontWeight--normal);
3202
+ :where(.pf-theme-dark) .pf-c-clipboard-copy__expandable-content {
3203
+ border: 0;
3198
3204
  }
3199
3205
 
3200
- :where(.pf-theme-dark) .pf-c-card,
3201
- :where(.pf-theme-dark) .pf-c-card.pf-m-non-selectable-raised {
3202
- --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
3203
- --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
3204
- --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
3205
- --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
3206
- --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
3206
+ .pf-c-code-block {
3207
+ --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
3208
+ --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3209
+ --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
3210
+ --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
3211
+ --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
3212
+ --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
3213
+ --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
3214
+ --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
3215
+ --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
3216
+ background-color: var(--pf-c-code-block--BackgroundColor);
3207
3217
  }
3208
3218
 
3209
- .pf-c-check {
3210
- --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
3211
- --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
3212
- --pf-c-check__label--Color: var(--pf-global--Color--100);
3213
- --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
3214
- --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
3215
- --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
3216
- --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
3217
- --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
3218
- --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
3219
- --pf-c-check__description--Color: var(--pf-global--Color--200);
3220
- --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
3221
- display: grid;
3222
- grid-template-columns: auto 1fr;
3223
- grid-gap: var(--pf-c-check--GridGap);
3224
- align-items: start;
3225
- justify-items: start;
3219
+ .pf-c-code-block__header {
3220
+ display: flex;
3221
+ border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
3226
3222
  }
3227
3223
 
3228
- .pf-c-check.pf-m-standalone {
3229
- --pf-c-check--GridGap: 0;
3230
- --pf-c-check__input--Height: auto;
3231
- --pf-c-check__input--MarginTop: 0;
3232
- display: inline-grid;
3233
- line-height: 1;
3224
+ .pf-c-code-block__actions {
3225
+ display: flex;
3226
+ margin-left: auto;
3234
3227
  }
3235
3228
 
3236
- .pf-c-check__label {
3237
- font-size: var(--pf-c-check__label--FontSize);
3238
- font-weight: var(--pf-c-check__label--FontWeight);
3239
- line-height: var(--pf-c-check__label--LineHeight);
3240
- color: var(--pf-c-check__label--Color);
3229
+ .pf-c-code-block__content {
3230
+ padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
3241
3231
  }
3242
3232
 
3243
- .pf-c-check__input {
3244
- height: var(--pf-c-check__input--Height);
3245
- margin-top: var(--pf-c-check__input--MarginTop);
3233
+ .pf-c-code-block__pre {
3234
+ font-family: var(--pf-c-code-block__pre--FontFamily);
3235
+ font-size: var(--pf-c-code-block__pre--FontSize);
3236
+ overflow-wrap: break-word;
3237
+ white-space: pre-wrap;
3246
3238
  }
3247
3239
 
3248
- .pf-c-check__description {
3249
- grid-column: 2;
3250
- font-size: var(--pf-c-check__description--FontSize);
3251
- color: var(--pf-c-check__description--Color);
3240
+ .pf-c-code-block__code {
3241
+ font-family: var(--pf-c-code-block__code--FontFamily, inherit);
3252
3242
  }
3253
3243
 
3254
- .pf-c-check__body {
3255
- grid-column: 2;
3256
- margin-top: var(--pf-c-check__body--MarginTop);
3244
+ .pf-c-card {
3245
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
3246
+ --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
3247
+ --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
3248
+ --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
3249
+ --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
3250
+ --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
3251
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
3252
+ --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
3253
+ --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
3254
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
3255
+ --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
3256
+ --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
3257
+ --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
3258
+ --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
3259
+ --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
3260
+ --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
3261
+ --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
3262
+ --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
3263
+ --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
3264
+ --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
3265
+ --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
3266
+ --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
3267
+ --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
3268
+ --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
3269
+ --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
3270
+ --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
3271
+ --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
3272
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
3273
+ --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
3274
+ --pf-c-card--m-selectable-raised--before--Right: 0;
3275
+ --pf-c-card--m-selectable-raised--before--Bottom: 0;
3276
+ --pf-c-card--m-selectable-raised--before--Left: 0;
3277
+ --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
3278
+ --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
3279
+ --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
3280
+ --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
3281
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
3282
+ --pf-c-card--m-selectable-raised--before--Transition: none;
3283
+ --pf-c-card--m-selectable-raised--before--ScaleY: 1;
3284
+ --pf-c-card--m-selectable-raised--before--TranslateY: 0;
3285
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
3286
+ --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
3287
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
3288
+ --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
3289
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
3290
+ --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
3291
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
3292
+ --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
3293
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
3294
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
3295
+ --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
3296
+ --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
3297
+ --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
3298
+ --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
3299
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
3300
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
3301
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
3302
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
3303
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
3304
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
3305
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
3306
+ --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
3307
+ --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
3308
+ --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
3309
+ --pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md);
3310
+ --pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md);
3311
+ --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
3312
+ --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
3313
+ --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
3314
+ --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
3315
+ --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
3316
+ --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
3317
+ --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
3318
+ --pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl);
3319
+ --pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl);
3320
+ --pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg);
3321
+ --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
3322
+ --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
3323
+ --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
3324
+ --pf-c-card--m-full-height--Height: 100%;
3325
+ --pf-c-card--m-plain--BoxShadow: none;
3326
+ --pf-c-card--m-plain--BackgroundColor: transparent;
3327
+ --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
3328
+ --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
3329
+ --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
3330
+ --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
3331
+ --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
3332
+ display: flex;
3333
+ flex-direction: column;
3334
+ background-color: var(--pf-c-card--BackgroundColor);
3335
+ box-shadow: var(--pf-c-card--BoxShadow);
3257
3336
  }
3258
3337
 
3259
- label.pf-c-check, .pf-c-check__label,
3260
- .pf-c-check__input {
3338
+ .pf-c-card.pf-m-hoverable:hover {
3339
+ box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
3340
+ }
3341
+
3342
+ .pf-c-card.pf-m-selectable {
3343
+ position: relative;
3261
3344
  cursor: pointer;
3262
3345
  }
3263
3346
 
3264
- .pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
3265
- .pf-c-check__input:disabled,
3266
- .pf-c-check__input.pf-m-disabled {
3267
- --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
3268
- cursor: not-allowed;
3347
+ .pf-c-card.pf-m-selectable:hover {
3348
+ box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
3269
3349
  }
3270
3350
 
3271
- .pf-c-chip {
3272
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3273
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3274
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3275
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3276
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3277
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3278
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3351
+ .pf-c-card.pf-m-selectable:focus {
3352
+ box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
3279
3353
  }
3280
3354
 
3281
- .pf-c-chip {
3282
- --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
3283
- --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
3284
- --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
3285
- --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
3286
- --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
3287
- --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
3288
- --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
3289
- --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
3290
- --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
3291
- --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
3292
- --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
3293
- --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
3294
- --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
3295
- --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
3296
- --pf-c-chip__text--Color: var(--pf-global--Color--100);
3297
- --pf-c-chip__text--MaxWidth: 16ch;
3298
- --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
3299
- --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
3300
- --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
3301
- --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
3302
- --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
3303
- --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
3304
- --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
3305
- --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
3306
- --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
3307
- --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
3308
- color: var(--pf-global--Color--100);
3309
- position: relative;
3310
- display: inline-flex;
3311
- align-items: center;
3312
- min-width: 0;
3313
- padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
3314
- list-style: none;
3315
- background-color: var(--pf-c-chip--BackgroundColor);
3316
- border-radius: var(--pf-c-chip--BorderRadius);
3355
+ .pf-c-card.pf-m-selectable:active {
3356
+ box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
3317
3357
  }
3318
3358
 
3319
- .pf-c-chip::before {
3320
- position: absolute;
3321
- top: 0;
3322
- right: 0;
3323
- bottom: 0;
3359
+ .pf-c-card.pf-m-selectable.pf-m-selected {
3360
+ box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
3361
+ }
3362
+
3363
+ .pf-c-card.pf-m-selectable.pf-m-selected::before {
3364
+ position: absolute;
3365
+ top: 0;
3366
+ right: 0;
3324
3367
  left: 0;
3368
+ height: var(--pf-c-card--m-selectable--m-selected--before--Height);
3325
3369
  content: "";
3326
- border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
3327
- border-radius: var(--pf-c-chip--before--BorderRadius);
3370
+ background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
3328
3371
  }
3329
3372
 
3330
- .pf-c-chip.pf-m-overflow {
3331
- border: 0;
3373
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
3374
+ position: relative;
3332
3375
  }
3333
3376
 
3334
- .pf-c-chip.pf-m-overflow .pf-c-chip__text {
3335
- color: var(--pf-c-chip--m-overflow__text--Color);
3377
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
3378
+ position: absolute;
3379
+ right: var(--pf-c-card--m-selectable-raised--before--Right);
3380
+ bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
3381
+ left: var(--pf-c-card--m-selectable-raised--before--Left);
3382
+ height: var(--pf-c-card--m-selectable-raised--before--Height);
3383
+ content: "";
3384
+ background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
3385
+ transition: var(--pf-c-card--m-selectable-raised--before--Transition);
3386
+ transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
3387
+ transform-origin: center bottom;
3336
3388
  }
3337
3389
 
3338
- .pf-c-chip.pf-m-draggable {
3339
- --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
3340
- box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
3390
+ .pf-c-card.pf-m-hoverable-raised:hover {
3391
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
3392
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
3341
3393
  }
3342
3394
 
3343
- .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
3344
- font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
3395
+ .pf-c-card.pf-m-selectable-raised {
3396
+ cursor: pointer;
3345
3397
  }
3346
3398
 
3347
- .pf-c-chip .pf-c-button {
3348
- --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
3349
- --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
3350
- --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
3351
- --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
3352
- --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
3353
- margin-top: var(--pf-c-chip__c-button--MarginTop);
3354
- margin-right: var(--pf-c-chip__c-button--MarginRight);
3355
- margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
3399
+ .pf-c-card.pf-m-selectable-raised:hover {
3400
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
3401
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
3356
3402
  }
3357
3403
 
3358
- .pf-c-chip .pf-c-badge {
3359
- margin-left: var(--pf-c-chip__c-badge--MarginLeft);
3404
+ .pf-c-card.pf-m-selectable-raised:focus {
3405
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
3406
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
3360
3407
  }
3361
3408
 
3362
- .pf-c-chip__text {
3363
- overflow: hidden;
3364
- text-overflow: ellipsis;
3365
- white-space: nowrap;
3366
- position: relative;
3367
- max-width: var(--pf-c-chip__text--MaxWidth);
3368
- font-size: var(--pf-c-chip__text--FontSize);
3369
- color: var(--pf-c-chip__text--Color);
3409
+ .pf-c-card.pf-m-selectable-raised:active {
3410
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
3411
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
3370
3412
  }
3371
3413
 
3372
- .pf-c-chip__icon + .pf-c-chip__text,
3373
- .pf-c-chip__text + .pf-c-chip__icon {
3374
- margin-left: var(--pf-c-chip__icon--MarginLeft);
3414
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
3415
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
3416
+ --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
3417
+ --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
3418
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
3419
+ z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
3420
+ box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
3421
+ transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
3422
+ transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
3375
3423
  }
3376
3424
 
3377
- :where(.pf-theme-dark) .pf-c-chip {
3378
- --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
3379
- --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
3380
- --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
3425
+ .pf-c-card.pf-m-non-selectable-raised {
3426
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
3427
+ --pf-c-card--BoxShadow: none;
3428
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
3429
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
3430
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
3381
3431
  }
3382
3432
 
3383
- .pf-c-chip-group {
3384
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3385
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3386
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3387
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3388
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3389
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3390
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3433
+ .pf-c-card.pf-m-compact {
3434
+ --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
3435
+ --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
3436
+ --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);
3437
+ --pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);
3438
+ --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);
3439
+ --pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);
3440
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);
3441
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
3391
3442
  }
3392
3443
 
3393
- .pf-c-chip-group {
3394
- color: var(--pf-global--Color--100);
3395
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3396
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
3397
- --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
3398
- --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
3399
- --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
3400
- --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
3401
- --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
3402
- --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
3403
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
3404
- --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
3405
- --pf-c-chip-group__label--MaxWidth: 18ch;
3406
- --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
3407
- --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3408
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
3409
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
3410
- max-width: 100%;
3444
+ .pf-c-card.pf-m-display-lg {
3445
+ --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
3446
+ --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
3447
+ --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
3448
+ --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
3449
+ --pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);
3450
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);
3451
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);
3411
3452
  }
3412
3453
 
3413
- .pf-c-chip-group.pf-m-category {
3414
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
3415
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
3416
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
3417
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
3418
- background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
3419
- border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
3454
+ .pf-c-card.pf-m-flat {
3455
+ --pf-c-card--BoxShadow: none;
3456
+ --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
3457
+ --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
3458
+ --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
3459
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
3460
+ border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
3420
3461
  }
3421
3462
 
3422
- .pf-c-chip-group__main {
3423
- display: flex;
3424
- flex: 1;
3425
- flex-wrap: wrap;
3426
- align-items: baseline;
3427
- min-width: 0;
3463
+ .pf-c-card.pf-m-plain {
3464
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);
3465
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
3428
3466
  }
3429
3467
 
3430
- .pf-c-chip-group__list {
3431
- margin-right: var(--pf-c-chip-group__list--MarginRight);
3432
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
3468
+ .pf-c-card.pf-m-rounded {
3469
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
3470
+ border-radius: var(--pf-c-card--m-rounded--BorderRadius);
3433
3471
  }
3434
3472
 
3435
- .pf-c-chip-group,
3436
- .pf-c-chip-group__list {
3437
- display: inline-flex;
3438
- flex-wrap: wrap;
3439
- align-items: center;
3440
- min-width: 0;
3473
+ .pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {
3474
+ transform: rotate(var(--pf-c-card--m-expanded__header-toggle-icon--Rotate));
3441
3475
  }
3442
3476
 
3443
- .pf-c-chip-group__list-item {
3444
- display: inline-flex;
3445
- min-width: 0;
3446
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
3447
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
3477
+ .pf-c-card.pf-m-full-height {
3478
+ height: var(--pf-c-card--m-full-height--Height);
3448
3479
  }
3449
3480
 
3450
- .pf-c-chip-group__label {
3451
- overflow: hidden;
3452
- text-overflow: ellipsis;
3453
- white-space: nowrap;
3454
- max-width: var(--pf-c-chip-group__label--MaxWidth);
3455
- margin-right: var(--pf-c-chip-group__label--MarginRight);
3456
- font-size: var(--pf-c-chip-group__label--FontSize);
3481
+ .pf-c-card > .pf-c-divider + .pf-c-card__header, .pf-c-card > .pf-c-divider + .pf-c-card__title, .pf-c-card > .pf-c-divider + .pf-c-card__body, .pf-c-card > .pf-c-divider + .pf-c-card__footer {
3482
+ padding-top: var(--pf-c-card--c-divider--child--PaddingTop);
3457
3483
  }
3458
3484
 
3459
- .pf-c-chip-group__close {
3485
+ .pf-c-card__header {
3460
3486
  display: flex;
3461
- align-self: flex-start;
3462
- margin-top: var(--pf-c-chip-group__close--MarginTop);
3463
- margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3487
+ flex-direction: row;
3488
+ align-items: center;
3464
3489
  }
3465
3490
 
3466
- .pf-c-clipboard-copy {
3467
- --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3468
- --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
3469
- --pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md);
3470
- --pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md);
3471
- --pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
3472
- --pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md);
3473
- --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
3474
- --pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
3475
- --pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm);
3476
- --pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3477
- --pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
3478
- --pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100);
3479
- --pf-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
3480
- --pf-c-clipboard-copy--m-inline--PaddingTop: 0;
3481
- --pf-c-clipboard-copy--m-inline--PaddingBottom: 0;
3482
- --pf-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-global--spacer--xs);
3483
- --pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--200);
3484
- --pf-c-clipboard-copy__text--m-code--FontFamily: var(--pf-global--FontFamily--monospace);
3485
- --pf-c-clipboard-copy__text--m-code--FontSize: var(--pf-global--FontSize--sm);
3486
- --pf-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
3487
- --pf-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
3488
- --pf-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-global--spacer--xs);
3489
- --pf-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-global--spacer--sm);
3490
- --pf-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-global--spacer--xs);
3491
- --pf-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-global--spacer--sm);
3491
+ .pf-c-card__header .pf-c-card__title {
3492
+ --pf-c-card--first-child--PaddingTop: 0;
3493
+ --pf-c-card__title--not--last-child--PaddingBottom: 0;
3494
+ padding: 0;
3492
3495
  }
3493
3496
 
3494
- .pf-c-clipboard-copy.pf-m-expanded .pf-c-clipboard-copy__toggle-icon {
3495
- transform: rotate(var(--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate));
3497
+ .pf-c-card__header.pf-m-toggle-right {
3498
+ --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
3499
+ --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
3496
3500
  }
3497
3501
 
3498
- .pf-c-clipboard-copy.pf-m-inline {
3499
- display: inline;
3500
- padding-top: var(--pf-c-clipboard-copy--m-inline--PaddingTop);
3501
- padding-bottom: var(--pf-c-clipboard-copy--m-inline--PaddingBottom);
3502
- padding-left: var(--pf-c-clipboard-copy--m-inline--PaddingLeft);
3503
- white-space: nowrap;
3504
- background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor);
3502
+ .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
3503
+ --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
3505
3504
  }
3506
3505
 
3507
- .pf-c-clipboard-copy.pf-m-inline.pf-m-block {
3508
- display: block;
3506
+ .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
3507
+ order: 2;
3509
3508
  }
3510
3509
 
3511
- .pf-c-clipboard-copy__group {
3512
- display: flex;
3510
+ .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
3511
+ flex: 1;
3513
3512
  }
3514
3513
 
3515
- .pf-c-clipboard-copy__group > * + * {
3516
- margin-left: -1px;
3514
+ .pf-c-card__header-toggle {
3515
+ align-self: flex-start;
3516
+ margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) var(--pf-c-card__header-toggle--MarginLeft);
3517
3517
  }
3518
3518
 
3519
- .pf-c-clipboard-copy__toggle-icon {
3520
- transition: var(--pf-c-clipboard-copy__toggle-icon--Transition);
3519
+ .pf-c-card__header-toggle-icon {
3520
+ display: inline-block;
3521
+ transition: var(--pf-c-card__header-toggle-icon--Transition);
3521
3522
  }
3522
3523
 
3523
- .pf-c-clipboard-copy__expandable-content {
3524
- padding: var(--pf-c-clipboard-copy__expandable-content--PaddingTop) var(--pf-c-clipboard-copy__expandable-content--PaddingRight) var(--pf-c-clipboard-copy__expandable-content--PaddingBottom) var(--pf-c-clipboard-copy__expandable-content--PaddingLeft);
3525
- word-wrap: break-word;
3526
- background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor);
3527
- background-clip: padding-box;
3528
- border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor);
3529
- border-width: var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth) var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth) var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth) var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth);
3530
- box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);
3531
- }
3532
-
3533
- .pf-c-clipboard-copy__expandable-content pre {
3534
- white-space: pre-wrap;
3524
+ .pf-c-card__title {
3525
+ font-family: var(--pf-c-card__title--FontFamily);
3526
+ font-size: var(--pf-c-card__title--FontSize);
3527
+ font-weight: var(--pf-c-card__title--FontWeight);
3535
3528
  }
3536
3529
 
3537
- .pf-c-clipboard-copy__text {
3538
- word-break: break-word;
3539
- white-space: normal;
3530
+ .pf-c-card__actions {
3531
+ display: flex;
3532
+ align-items: center;
3533
+ align-self: flex-start;
3534
+ order: 1;
3535
+ padding-left: var(--pf-c-card__actions--PaddingLeft);
3536
+ margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
3540
3537
  }
3541
3538
 
3542
- .pf-c-clipboard-copy__text.pf-m-code {
3543
- font-family: var(--pf-c-clipboard-copy__text--m-code--FontFamily);
3544
- font-size: var(--pf-c-clipboard-copy__text--m-code--FontSize);
3539
+ .pf-c-card__actions > * + * {
3540
+ margin-left: var(--pf-c-card__actions--child--MarginLeft);
3545
3541
  }
3546
3542
 
3547
- .pf-c-clipboard-copy__actions {
3548
- display: inline-flex;
3543
+ .pf-c-card__actions + .pf-c-card__title,
3544
+ .pf-c-card__actions + .pf-c-card__body,
3545
+ .pf-c-card__actions + .pf-c-card__footer {
3546
+ padding: 0;
3549
3547
  }
3550
3548
 
3551
- .pf-c-clipboard-copy__actions-item {
3552
- margin-top: calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingTop));
3553
- margin-bottom: calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom));
3549
+ .pf-c-card__actions.pf-m-no-offset {
3550
+ --pf-c-card__header-toggle--MarginTop: 0;
3551
+ --pf-c-card__header-toggle--MarginBottom: 0;
3554
3552
  }
3555
3553
 
3556
- .pf-c-clipboard-copy__actions-item .pf-c-button {
3557
- --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop);
3558
- --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight);
3559
- --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom);
3560
- --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft);
3554
+ .pf-c-card__header,
3555
+ .pf-c-card__title,
3556
+ .pf-c-card__body,
3557
+ .pf-c-card__footer {
3558
+ padding-right: var(--pf-c-card--child--PaddingRight);
3559
+ padding-bottom: var(--pf-c-card--child--PaddingBottom);
3560
+ padding-left: var(--pf-c-card--child--PaddingLeft);
3561
3561
  }
3562
3562
 
3563
- :where(.pf-theme-dark) .pf-c-clipboard-copy {
3564
- --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--400);
3563
+ .pf-c-card__header:first-child,
3564
+ .pf-c-card__title:first-child,
3565
+ .pf-c-card__body:first-child,
3566
+ .pf-c-card__footer:first-child {
3567
+ padding-top: var(--pf-c-card--first-child--PaddingTop);
3565
3568
  }
3566
3569
 
3567
- :where(.pf-theme-dark) .pf-c-clipboard-copy__group > * + * {
3568
- margin-left: 0;
3569
- border-left: 1px solid var(--pf-global--palette--black-700) !important;
3570
+ .pf-c-card__header:not(:last-child),
3571
+ .pf-c-card__title:not(:last-child) {
3572
+ padding-bottom: var(--pf-c-card__title--not--last-child--PaddingBottom);
3570
3573
  }
3571
3574
 
3572
- :where(.pf-theme-dark) .pf-c-clipboard-copy__expandable-content {
3573
- border: 0;
3575
+ .pf-c-card__expandable-content {
3576
+ --pf-c-card--first-child--PaddingTop: 0;
3574
3577
  }
3575
3578
 
3576
- .pf-c-code-block {
3577
- --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
3578
- --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3579
- --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
3580
- --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
3581
- --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
3582
- --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
3583
- --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
3584
- --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
3585
- --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
3586
- background-color: var(--pf-c-code-block--BackgroundColor);
3579
+ .pf-c-card__body:not(.pf-m-no-fill) {
3580
+ flex: 1 1 auto;
3587
3581
  }
3588
3582
 
3589
- .pf-c-code-block__header {
3590
- display: flex;
3591
- border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
3583
+ .pf-c-card__body {
3584
+ font-size: var(--pf-c-card__body--FontSize);
3592
3585
  }
3593
3586
 
3594
- .pf-c-code-block__actions {
3595
- display: flex;
3596
- margin-left: auto;
3587
+ .pf-c-card__footer {
3588
+ font-size: var(--pf-c-card__footer--FontSize);
3597
3589
  }
3598
3590
 
3599
- .pf-c-code-block__content {
3600
- padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
3591
+ .pf-c-card__sr-input:focus + .pf-c-card::after {
3592
+ position: absolute;
3593
+ top: 0;
3594
+ right: 0;
3595
+ bottom: 0;
3596
+ left: 0;
3597
+ content: "";
3598
+ border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
3601
3599
  }
3602
3600
 
3603
- .pf-c-code-block__pre {
3604
- font-family: var(--pf-c-code-block__pre--FontFamily);
3605
- font-size: var(--pf-c-code-block__pre--FontSize);
3606
- overflow-wrap: break-word;
3607
- white-space: pre-wrap;
3601
+ .pf-m-overpass-font .pf-c-card .pf-c-card__title {
3602
+ font-weight: var(--pf-global--FontWeight--normal);
3608
3603
  }
3609
3604
 
3610
- .pf-c-code-block__code {
3611
- font-family: var(--pf-c-code-block__code--FontFamily, inherit);
3605
+ :where(.pf-theme-dark) .pf-c-card,
3606
+ :where(.pf-theme-dark) .pf-c-card.pf-m-non-selectable-raised {
3607
+ --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
3608
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
3609
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
3610
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
3611
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
3612
3612
  }
3613
3613
 
3614
3614
  .pf-c-context-selector__menu {
@@ -3938,86 +3938,6 @@ label.pf-c-check, .pf-c-check__label,
3938
3938
  border-top: 1px solid var(--pf-global--BorderColor--300);
3939
3939
  }
3940
3940
 
3941
- .pf-c-data-list {
3942
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3943
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3944
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3945
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3946
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3947
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3948
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3949
- }
3950
-
3951
- .pf-c-data-list__item-action {
3952
- --pf-hidden-visible--visible--Visibility: visible;
3953
- --pf-hidden-visible--hidden--Display: none;
3954
- --pf-hidden-visible--hidden--Visibility: hidden;
3955
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3956
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3957
- display: var(--pf-hidden-visible--Display);
3958
- visibility: var(--pf-hidden-visible--Visibility);
3959
- }
3960
-
3961
- .pf-m-hidden.pf-c-data-list__item-action {
3962
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3963
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3964
- }
3965
-
3966
- @media screen and (min-width: 576px) {
3967
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
3968
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3969
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3970
- }
3971
-
3972
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
3973
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3974
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3975
- }
3976
- }
3977
- @media screen and (min-width: 768px) {
3978
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
3979
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3980
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3981
- }
3982
-
3983
- .pf-m-visible-on-md.pf-c-data-list__item-action {
3984
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3985
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3986
- }
3987
- }
3988
- @media screen and (min-width: 992px) {
3989
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
3990
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3991
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3992
- }
3993
-
3994
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
3995
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3996
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3997
- }
3998
- }
3999
- @media screen and (min-width: 1200px) {
4000
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4001
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4002
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4003
- }
4004
-
4005
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
4006
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4007
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4008
- }
4009
- }
4010
- @media screen and (min-width: 1450px) {
4011
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4012
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4013
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4014
- }
4015
-
4016
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4017
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4018
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4019
- }
4020
- }
4021
3941
  @media screen and (min-width: 768px) {
4022
3942
  .pf-c-data-list:not([class*=pf-m-grid]) {
4023
3943
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4495,449 +4415,359 @@ label.pf-c-check, .pf-c-check__label,
4495
4415
  }
4496
4416
  }
4497
4417
  .pf-c-data-list {
4498
- --pf-c-data-list--FontSize: 1em;
4499
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4500
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4501
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4502
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4503
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4504
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4505
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4506
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4507
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4508
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4509
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4510
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4511
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4512
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4513
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4514
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4515
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4516
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4517
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4518
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4519
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4520
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4521
- --pf-c-data-list__item--before--BackgroundColor: transparent;
4522
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4523
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4524
- --pf-c-data-list__item--before--Top: 0;
4525
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4526
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4527
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4528
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4529
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4530
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4531
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4532
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4533
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4534
- --pf-c-data-list__cell--md--PaddingBottom: 0;
4535
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4536
- --pf-c-data-list__cell--cell--PaddingTop: 0;
4537
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4538
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4539
- --pf-c-data-list--cell--MinWidth: initial;
4540
- --pf-c-data-list--cell--Overflow: visible;
4541
- --pf-c-data-list--cell--TextOverflow: clip;
4542
- --pf-c-data-list--cell--WhiteSpace: normal;
4543
- --pf-c-data-list--cell--WordBreak: normal;
4544
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4545
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4546
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4547
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4548
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4549
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4550
- --pf-c-data-list__toggle-icon--Rotate: 0;
4551
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4552
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4553
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4554
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4555
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4556
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4557
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4558
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4559
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4560
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4561
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4562
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4563
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4564
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4565
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4566
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4567
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4568
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4569
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4570
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4571
- --pf-c-data-list__check--MarginTop: -0.0625rem;
4572
- --pf-c-data-list__item-action--Display: flex;
4573
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4574
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4575
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4576
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4577
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4578
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4579
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4580
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4581
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4582
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4583
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4584
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4585
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4586
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4587
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4588
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4589
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4590
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4591
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4592
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4593
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4594
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4595
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4596
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4597
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4598
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4599
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4600
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4601
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4602
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4603
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4604
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4605
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4606
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4607
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4608
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4609
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4610
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4611
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4612
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4613
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4614
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4615
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4616
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4617
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4618
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4619
- color: var(--pf-global--Color--100);
4620
- font-size: var(--pf-c-data-list--FontSize);
4621
- line-height: var(--pf-c-data-list--LineHeight);
4622
- overflow-wrap: break-word;
4623
- list-style-type: disc;
4624
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4418
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
4419
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
4420
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4421
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4422
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
4423
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4424
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4625
4425
  }
4626
4426
 
4627
- @media screen and (min-width: 576px) {
4628
- .pf-c-data-list {
4629
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4630
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4631
- }
4632
- }
4633
- @media screen and (min-width: 576px) {
4634
- .pf-c-data-list {
4635
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4636
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4637
- }
4638
- }
4639
- @media (min-width: 576px) {
4640
- .pf-c-data-list {
4641
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4642
- }
4643
- }
4644
- .pf-c-data-list.pf-m-compact {
4645
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4646
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4647
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4648
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4649
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4650
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4651
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4652
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4653
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4654
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4655
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4656
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4657
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4658
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4659
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4660
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4661
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4662
- font-size: var(--pf-c-data-list--m-compact--FontSize);
4427
+ .pf-c-data-list__item-action {
4428
+ --pf-hidden-visible--visible--Visibility: visible;
4429
+ --pf-hidden-visible--hidden--Display: none;
4430
+ --pf-hidden-visible--hidden--Visibility: hidden;
4431
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4432
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4433
+ display: var(--pf-hidden-visible--Display);
4434
+ visibility: var(--pf-hidden-visible--Visibility);
4663
4435
  }
4664
4436
 
4665
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4666
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4667
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4668
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4669
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4437
+ .pf-m-hidden.pf-c-data-list__item-action {
4438
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4439
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4670
4440
  }
4671
4441
 
4672
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4673
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4674
- }
4442
+ @media screen and (min-width: 576px) {
4443
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4444
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4445
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4446
+ }
4675
4447
 
4676
- .pf-c-data-list.pf-m-drag-over {
4677
- overflow-anchor: none;
4448
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
4449
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4450
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4451
+ }
4678
4452
  }
4453
+ @media screen and (min-width: 768px) {
4454
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
4455
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4456
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4457
+ }
4679
4458
 
4680
- .pf-c-data-list.pf-m-truncate,
4681
- .pf-c-data-list__item-row.pf-m-truncate,
4682
- .pf-c-data-list__cell.pf-m-truncate,
4683
- .pf-c-data-list__text.pf-m-truncate {
4684
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4685
- --pf-c-data-list--cell--Overflow: hidden;
4686
- --pf-c-data-list--cell--TextOverflow: ellipsis;
4687
- --pf-c-data-list--cell--WhiteSpace: nowrap;
4459
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
4460
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4461
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4462
+ }
4688
4463
  }
4464
+ @media screen and (min-width: 992px) {
4465
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4466
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4467
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4468
+ }
4689
4469
 
4690
- .pf-c-data-list.pf-m-break-word,
4691
- .pf-c-data-list__item-row.pf-m-break-word,
4692
- .pf-c-data-list__cell.pf-m-break-word,
4693
- .pf-c-data-list__text.pf-m-break-word {
4694
- --pf-c-data-list--cell--WordBreak: break-word;
4470
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
4471
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4472
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4473
+ }
4695
4474
  }
4475
+ @media screen and (min-width: 1200px) {
4476
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4477
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4478
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4479
+ }
4696
4480
 
4697
- .pf-c-data-list.pf-m-nowrap,
4698
- .pf-c-data-list__item-row.pf-m-nowrap,
4699
- .pf-c-data-list__cell.pf-m-nowrap,
4700
- .pf-c-data-list__text.pf-m-nowrap {
4701
- --pf-c-data-list--cell--WhiteSpace: nowrap;
4481
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
4482
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4483
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4484
+ }
4702
4485
  }
4486
+ @media screen and (min-width: 1450px) {
4487
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4488
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4489
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4490
+ }
4703
4491
 
4704
- .pf-c-data-list__item {
4705
- position: relative;
4706
- display: flex;
4707
- flex-direction: column;
4708
- background-color: var(--pf-c-data-list__item--BackgroundColor);
4709
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4492
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4493
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4494
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4495
+ }
4710
4496
  }
4711
-
4712
- .pf-c-data-list__item::before {
4713
- position: absolute;
4714
- top: var(--pf-c-data-list__item--before--Top);
4715
- bottom: 0;
4716
- left: 0;
4717
- width: var(--pf-c-data-list__item--before--Width);
4718
- content: "";
4719
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4720
- transition: var(--pf-c-data-list__item--before--Transition);
4497
+ @media screen and (min-width: 768px) {
4498
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4499
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4500
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4501
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4502
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4503
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4504
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4505
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4506
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4507
+ }
4721
4508
  }
4722
-
4723
- .pf-c-data-list__item.pf-m-selectable {
4724
- cursor: pointer;
4725
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4509
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
4510
+ .pf-c-data-list:not([class*=pf-m-grid]) {
4511
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4512
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4513
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4514
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4515
+ }
4726
4516
  }
4727
-
4728
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4729
- position: relative;
4730
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4517
+ @media screen and (min-width: 768px) {
4518
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4519
+ display: flex;
4520
+ flex-wrap: wrap;
4521
+ flex-grow: 1;
4522
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4523
+ }
4731
4524
  }
4525
+ @media screen and (min-width: 768px) {
4526
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4527
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4528
+ }
4732
4529
 
4733
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
4734
- --pf-c-data-list__item--BorderBottomWidth: 0;
4735
- }
4530
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4531
+ flex: 1;
4532
+ order: initial;
4533
+ }
4736
4534
 
4737
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
4738
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
4739
- }
4535
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4536
+ margin-left: auto;
4537
+ }
4740
4538
 
4741
- .pf-c-data-list__item.pf-m-selectable:hover {
4742
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4743
- }
4539
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4540
+ flex: none;
4541
+ }
4744
4542
 
4745
- .pf-c-data-list__item.pf-m-selectable:focus {
4746
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4747
- }
4543
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4544
+ flex-grow: 2;
4545
+ }
4748
4546
 
4749
- .pf-c-data-list__item.pf-m-selectable:active {
4750
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4751
- }
4547
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4548
+ flex-grow: 3;
4549
+ }
4752
4550
 
4753
- .pf-c-data-list__item.pf-m-selected {
4754
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4755
- position: relative;
4756
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4757
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4758
- }
4551
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4552
+ flex-grow: 4;
4553
+ }
4759
4554
 
4760
- .pf-c-data-list__item.pf-m-ghost-row::after {
4761
- position: absolute;
4762
- top: 0;
4763
- right: 0;
4764
- bottom: 0;
4765
- left: 0;
4766
- content: "";
4767
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4768
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4555
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4556
+ flex-grow: 5;
4557
+ }
4769
4558
  }
4770
-
4771
- .pf-c-data-list__item.pf-m-expanded {
4772
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4773
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4559
+ @media screen and (min-width: 768px) {
4560
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4561
+ max-height: initial;
4562
+ overflow-y: visible;
4563
+ }
4774
4564
  }
4775
-
4776
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4777
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4565
+ @media screen and (min-width: 0) {
4566
+ .pf-c-data-list.pf-m-grid-none {
4567
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4568
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4569
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4570
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4571
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4572
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4573
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4574
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4575
+ }
4778
4576
  }
4779
-
4780
- .pf-c-data-list__item-row {
4781
- display: flex;
4782
- flex-wrap: nowrap;
4783
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4784
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4577
+ @media screen and (min-width: 0) and (min-width: 1200px) {
4578
+ .pf-c-data-list.pf-m-grid-none {
4579
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4580
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4581
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4582
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4583
+ }
4785
4584
  }
4786
-
4787
- .pf-c-data-list__item-control {
4788
- display: flex;
4789
- flex-wrap: nowrap;
4790
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4791
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4792
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
4585
+ @media screen and (min-width: 0) {
4586
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4587
+ display: flex;
4588
+ flex-wrap: wrap;
4589
+ flex-grow: 1;
4590
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4591
+ }
4793
4592
  }
4593
+ @media screen and (min-width: 0) {
4594
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4595
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4596
+ }
4794
4597
 
4795
- .pf-c-data-list__item-control > *:not(:last-child) {
4796
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4797
- }
4598
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4599
+ flex: 1;
4600
+ order: initial;
4601
+ }
4798
4602
 
4799
- .pf-c-data-list__check {
4800
- display: flex;
4801
- align-items: center;
4802
- align-self: flex-start;
4803
- height: var(--pf-c-data-list__check--Height);
4804
- margin-top: var(--pf-c-data-list__check--MarginTop);
4805
- }
4603
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4604
+ margin-left: auto;
4605
+ }
4806
4606
 
4807
- .pf-c-data-list__check > input {
4808
- cursor: pointer;
4809
- }
4607
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4608
+ flex: none;
4609
+ }
4810
4610
 
4811
- .pf-c-data-list__item-draggable-button {
4812
- display: flex;
4813
- flex-direction: column;
4814
- padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
4815
- margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
4816
- border: 0;
4817
- }
4611
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4612
+ flex-grow: 2;
4613
+ }
4818
4614
 
4819
- .pf-c-data-list__item-draggable-button:hover {
4820
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4821
- cursor: grab;
4822
- }
4615
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4616
+ flex-grow: 3;
4617
+ }
4823
4618
 
4824
- .pf-c-data-list__item-draggable-button:focus {
4825
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4826
- }
4619
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4620
+ flex-grow: 4;
4621
+ }
4827
4622
 
4828
- .pf-c-data-list__item-draggable-button:active {
4829
- cursor: grabbing;
4623
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4624
+ flex-grow: 5;
4625
+ }
4830
4626
  }
4831
-
4832
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
4833
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4834
- pointer-events: none;
4627
+ @media screen and (min-width: 0) {
4628
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4629
+ max-height: initial;
4630
+ overflow-y: visible;
4631
+ }
4835
4632
  }
4836
-
4837
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4838
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4633
+ @media screen and (min-width: 576px) {
4634
+ .pf-c-data-list.pf-m-grid-sm {
4635
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4636
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4637
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4638
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4639
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4640
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4641
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4642
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4643
+ }
4839
4644
  }
4840
-
4841
- .pf-c-data-list__item-action {
4842
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4843
- align-items: flex-start;
4844
- align-content: flex-start;
4845
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4846
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4847
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4645
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
4646
+ .pf-c-data-list.pf-m-grid-sm {
4647
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4648
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4649
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4650
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4651
+ }
4848
4652
  }
4849
-
4850
- .pf-c-data-list__item-action > *:not(:last-child) {
4851
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4653
+ @media screen and (min-width: 576px) {
4654
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
4655
+ display: flex;
4656
+ flex-wrap: wrap;
4657
+ flex-grow: 1;
4658
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4659
+ }
4852
4660
  }
4661
+ @media screen and (min-width: 576px) {
4662
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4663
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4664
+ }
4853
4665
 
4854
- .pf-c-data-list__item-action .pf-c-data-list__action {
4855
- margin-top: var(--pf-c-data-list__action--MarginTop);
4856
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4857
- }
4666
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
4667
+ flex: 1;
4668
+ order: initial;
4669
+ }
4858
4670
 
4859
- .pf-c-data-list__toggle {
4860
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4861
- }
4671
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
4672
+ margin-left: auto;
4673
+ }
4862
4674
 
4863
- .pf-c-data-list__toggle-icon {
4864
- height: var(--pf-c-data-list__toggle-icon--Height);
4865
- pointer-events: none;
4866
- transition: var(--pf-c-data-list__toggle-icon--Transition);
4867
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4868
- }
4675
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
4676
+ flex: none;
4677
+ }
4869
4678
 
4870
- .pf-c-data-list__item-content {
4871
- display: grid;
4872
- width: 100%;
4873
- grid-template-columns: auto 1fr;
4874
- }
4679
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
4680
+ flex-grow: 2;
4681
+ }
4875
4682
 
4876
- .pf-c-data-list__cell {
4877
- flex: 1;
4878
- grid-column: 1/-1;
4879
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
4880
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4881
- }
4683
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
4684
+ flex-grow: 3;
4685
+ }
4882
4686
 
4883
- .pf-c-data-list__cell + .pf-c-data-list__cell {
4884
- flex: 1 0 100%;
4885
- order: 1;
4886
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4887
- }
4687
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
4688
+ flex-grow: 4;
4689
+ }
4888
4690
 
4889
- .pf-c-data-list__cell.pf-m-icon {
4890
- flex-grow: 0;
4891
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4892
- grid-column: 1/2;
4691
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
4692
+ flex-grow: 5;
4693
+ }
4893
4694
  }
4894
-
4895
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4896
- grid-column: 2/3;
4897
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4695
+ @media screen and (min-width: 576px) {
4696
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
4697
+ max-height: initial;
4698
+ overflow-y: visible;
4699
+ }
4898
4700
  }
4899
-
4900
- .pf-c-data-list__cell.pf-m-align-right {
4901
- margin-left: 0;
4701
+ @media screen and (min-width: 768px) {
4702
+ .pf-c-data-list.pf-m-grid-md {
4703
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4704
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4705
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4706
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4707
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4708
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4709
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4710
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4711
+ }
4902
4712
  }
4903
-
4904
- .pf-c-data-list__text {
4905
- display: inline-block;
4713
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
4714
+ .pf-c-data-list.pf-m-grid-md {
4715
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4716
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4717
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4718
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4719
+ }
4906
4720
  }
4907
-
4908
- .pf-c-data-list__text,
4909
- .pf-c-data-list__cell {
4910
- min-width: var(--pf-c-data-list--cell--MinWidth);
4911
- max-width: 100%;
4912
- overflow: var(--pf-c-data-list--cell--Overflow);
4913
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4914
- word-break: var(--pf-c-data-list--cell--WordBreak);
4915
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
4721
+ @media screen and (min-width: 768px) {
4722
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
4723
+ display: flex;
4724
+ flex-wrap: wrap;
4725
+ flex-grow: 1;
4726
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4727
+ }
4916
4728
  }
4729
+ @media screen and (min-width: 768px) {
4730
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4731
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4732
+ }
4917
4733
 
4918
- .pf-c-data-list__expandable-content {
4919
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4920
- overflow-y: auto;
4921
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4922
- }
4734
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
4735
+ flex: 1;
4736
+ order: initial;
4737
+ }
4923
4738
 
4924
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4925
- padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
4926
- }
4739
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4740
+ margin-left: auto;
4741
+ }
4927
4742
 
4928
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4929
- padding: 0;
4930
- }
4743
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4744
+ flex: none;
4745
+ }
4931
4746
 
4932
- :where(.pf-theme-dark) .pf-c-data-list {
4933
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
4934
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4935
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
4936
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4747
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4748
+ flex-grow: 2;
4749
+ }
4750
+
4751
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4752
+ flex-grow: 3;
4753
+ }
4754
+
4755
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4756
+ flex-grow: 4;
4757
+ }
4758
+
4759
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4760
+ flex-grow: 5;
4761
+ }
4937
4762
  }
4938
-
4939
4763
  @media screen and (min-width: 768px) {
4940
- .pf-c-data-list:not([class*=pf-m-grid]) {
4764
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4765
+ max-height: initial;
4766
+ overflow-y: visible;
4767
+ }
4768
+ }
4769
+ @media screen and (min-width: 992px) {
4770
+ .pf-c-data-list.pf-m-grid-lg {
4941
4771
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4942
4772
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4943
4773
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -4948,64 +4778,64 @@ label.pf-c-check, .pf-c-check__label,
4948
4778
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4949
4779
  }
4950
4780
  }
4951
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4952
- .pf-c-data-list:not([class*=pf-m-grid]) {
4781
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
4782
+ .pf-c-data-list.pf-m-grid-lg {
4953
4783
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4954
4784
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4955
4785
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4956
4786
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4957
4787
  }
4958
4788
  }
4959
- @media screen and (min-width: 768px) {
4960
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
4789
+ @media screen and (min-width: 992px) {
4790
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
4961
4791
  display: flex;
4962
4792
  flex-wrap: wrap;
4963
4793
  flex-grow: 1;
4964
4794
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4965
4795
  }
4966
4796
  }
4967
- @media screen and (min-width: 768px) {
4968
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4797
+ @media screen and (min-width: 992px) {
4798
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4969
4799
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4970
4800
  }
4971
4801
 
4972
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
4802
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
4973
4803
  flex: 1;
4974
4804
  order: initial;
4975
4805
  }
4976
4806
 
4977
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
4807
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
4978
4808
  margin-left: auto;
4979
4809
  }
4980
4810
 
4981
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
4811
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
4982
4812
  flex: none;
4983
4813
  }
4984
4814
 
4985
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
4815
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
4986
4816
  flex-grow: 2;
4987
4817
  }
4988
4818
 
4989
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
4819
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
4990
4820
  flex-grow: 3;
4991
4821
  }
4992
4822
 
4993
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
4823
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
4994
4824
  flex-grow: 4;
4995
4825
  }
4996
4826
 
4997
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
4827
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
4998
4828
  flex-grow: 5;
4999
4829
  }
5000
4830
  }
5001
- @media screen and (min-width: 768px) {
5002
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
4831
+ @media screen and (min-width: 992px) {
4832
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5003
4833
  max-height: initial;
5004
4834
  overflow-y: visible;
5005
4835
  }
5006
4836
  }
5007
- @media screen and (min-width: 0) {
5008
- .pf-c-data-list.pf-m-grid-none {
4837
+ @media screen and (min-width: 1200px) {
4838
+ .pf-c-data-list.pf-m-grid-xl {
5009
4839
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5010
4840
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5011
4841
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5016,64 +4846,64 @@ label.pf-c-check, .pf-c-check__label,
5016
4846
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5017
4847
  }
5018
4848
  }
5019
- @media screen and (min-width: 0) and (min-width: 1200px) {
5020
- .pf-c-data-list.pf-m-grid-none {
4849
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
4850
+ .pf-c-data-list.pf-m-grid-xl {
5021
4851
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5022
4852
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5023
4853
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5024
4854
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5025
4855
  }
5026
4856
  }
5027
- @media screen and (min-width: 0) {
5028
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
4857
+ @media screen and (min-width: 1200px) {
4858
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5029
4859
  display: flex;
5030
4860
  flex-wrap: wrap;
5031
4861
  flex-grow: 1;
5032
4862
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5033
4863
  }
5034
4864
  }
5035
- @media screen and (min-width: 0) {
5036
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4865
+ @media screen and (min-width: 1200px) {
4866
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5037
4867
  margin-right: var(--pf-c-data-list__cell--MarginRight);
5038
4868
  }
5039
4869
 
5040
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
4870
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5041
4871
  flex: 1;
5042
4872
  order: initial;
5043
4873
  }
5044
4874
 
5045
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
4875
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5046
4876
  margin-left: auto;
5047
4877
  }
5048
4878
 
5049
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
4879
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5050
4880
  flex: none;
5051
4881
  }
5052
4882
 
5053
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
4883
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5054
4884
  flex-grow: 2;
5055
4885
  }
5056
4886
 
5057
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
4887
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5058
4888
  flex-grow: 3;
5059
4889
  }
5060
4890
 
5061
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
4891
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5062
4892
  flex-grow: 4;
5063
4893
  }
5064
4894
 
5065
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
4895
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5066
4896
  flex-grow: 5;
5067
4897
  }
5068
4898
  }
5069
- @media screen and (min-width: 0) {
5070
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
4899
+ @media screen and (min-width: 1200px) {
4900
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5071
4901
  max-height: initial;
5072
4902
  overflow-y: visible;
5073
4903
  }
5074
4904
  }
5075
- @media screen and (min-width: 576px) {
5076
- .pf-c-data-list.pf-m-grid-sm {
4905
+ @media screen and (min-width: 1450px) {
4906
+ .pf-c-data-list.pf-m-grid-2xl {
5077
4907
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5078
4908
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5079
4909
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -5084,334 +4914,504 @@ label.pf-c-check, .pf-c-check__label,
5084
4914
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5085
4915
  }
5086
4916
  }
5087
- @media screen and (min-width: 576px) and (min-width: 1200px) {
5088
- .pf-c-data-list.pf-m-grid-sm {
4917
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
4918
+ .pf-c-data-list.pf-m-grid-2xl {
5089
4919
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5090
4920
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5091
4921
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5092
4922
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5093
4923
  }
5094
4924
  }
4925
+ @media screen and (min-width: 1450px) {
4926
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
4927
+ display: flex;
4928
+ flex-wrap: wrap;
4929
+ flex-grow: 1;
4930
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4931
+ }
4932
+ }
4933
+ @media screen and (min-width: 1450px) {
4934
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4935
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4936
+ }
4937
+
4938
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
4939
+ flex: 1;
4940
+ order: initial;
4941
+ }
4942
+
4943
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
4944
+ margin-left: auto;
4945
+ }
4946
+
4947
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
4948
+ flex: none;
4949
+ }
4950
+
4951
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
4952
+ flex-grow: 2;
4953
+ }
4954
+
4955
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
4956
+ flex-grow: 3;
4957
+ }
4958
+
4959
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
4960
+ flex-grow: 4;
4961
+ }
4962
+
4963
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
4964
+ flex-grow: 5;
4965
+ }
4966
+ }
4967
+ @media screen and (min-width: 1450px) {
4968
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
4969
+ max-height: initial;
4970
+ overflow-y: visible;
4971
+ }
4972
+ }
4973
+ .pf-c-data-list {
4974
+ --pf-c-data-list--FontSize: 1em;
4975
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4976
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4977
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4978
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4979
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4980
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4981
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4982
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4983
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4984
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4985
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4986
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4987
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4988
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4989
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4990
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4991
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4992
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4993
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4994
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4995
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4996
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4997
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
4998
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4999
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
5000
+ --pf-c-data-list__item--before--Top: 0;
5001
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5002
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
5003
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
5004
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
5005
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
5006
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
5007
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
5008
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
5009
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
5010
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
5011
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
5012
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
5013
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
5014
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
5015
+ --pf-c-data-list--cell--MinWidth: initial;
5016
+ --pf-c-data-list--cell--Overflow: visible;
5017
+ --pf-c-data-list--cell--TextOverflow: clip;
5018
+ --pf-c-data-list--cell--WhiteSpace: normal;
5019
+ --pf-c-data-list--cell--WordBreak: normal;
5020
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
5021
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
5022
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5023
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5024
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5025
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
5026
+ --pf-c-data-list__toggle-icon--Rotate: 0;
5027
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
5028
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
5029
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
5030
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
5031
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
5032
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
5033
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
5034
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
5035
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
5036
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
5037
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5038
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
5039
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
5040
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
5041
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
5042
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
5043
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
5044
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
5045
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
5046
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
5047
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
5048
+ --pf-c-data-list__item-action--Display: flex;
5049
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
5050
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
5051
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
5052
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
5053
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
5054
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5055
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
5056
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
5057
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5058
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
5059
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
5060
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
5061
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
5062
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
5063
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
5064
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
5065
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
5066
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
5067
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
5068
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
5069
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
5070
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
5071
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
5072
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
5073
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
5074
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
5075
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
5076
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
5077
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
5078
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
5079
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
5080
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
5081
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
5082
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
5083
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
5084
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
5085
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
5086
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
5087
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
5088
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5089
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
5090
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
5091
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
5092
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
5093
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
5094
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
5095
+ color: var(--pf-global--Color--100);
5096
+ font-size: var(--pf-c-data-list--FontSize);
5097
+ line-height: var(--pf-c-data-list--LineHeight);
5098
+ overflow-wrap: break-word;
5099
+ list-style-type: disc;
5100
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
5101
+ }
5102
+
5095
5103
  @media screen and (min-width: 576px) {
5096
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
5097
- display: flex;
5098
- flex-wrap: wrap;
5099
- flex-grow: 1;
5100
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5104
+ .pf-c-data-list {
5105
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
5106
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
5101
5107
  }
5102
5108
  }
5103
5109
  @media screen and (min-width: 576px) {
5104
- .pf-c-data-list.pf-m-grid-sm .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-sm .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-sm .pf-c-data-list__cell.pf-m-align-right {
5114
- margin-left: auto;
5115
- }
5116
-
5117
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
5118
- flex: none;
5119
- }
5120
-
5121
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
5122
- flex-grow: 2;
5123
- }
5124
-
5125
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
5126
- flex-grow: 3;
5110
+ .pf-c-data-list {
5111
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
5112
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
5127
5113
  }
5128
-
5129
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
5130
- flex-grow: 4;
5114
+ }
5115
+ @media (min-width: 576px) {
5116
+ .pf-c-data-list {
5117
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
5131
5118
  }
5119
+ }
5120
+ .pf-c-data-list.pf-m-compact {
5121
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
5122
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
5123
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
5124
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
5125
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
5126
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
5127
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
5128
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
5129
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
5130
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
5131
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
5132
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
5133
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
5134
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
5135
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
5136
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
5137
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
5138
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
5139
+ }
5132
5140
 
5133
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
5134
- flex-grow: 5;
5135
- }
5141
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
5142
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
5143
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
5144
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
5145
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
5136
5146
  }
5137
- @media screen and (min-width: 576px) {
5138
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
5139
- max-height: initial;
5140
- overflow-y: visible;
5141
- }
5147
+
5148
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
5149
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
5142
5150
  }
5143
- @media screen and (min-width: 768px) {
5144
- .pf-c-data-list.pf-m-grid-md {
5145
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5146
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5147
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5148
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5149
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5150
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5151
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5152
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5153
- }
5151
+
5152
+ .pf-c-data-list.pf-m-drag-over {
5153
+ overflow-anchor: none;
5154
5154
  }
5155
- @media screen and (min-width: 768px) and (min-width: 1200px) {
5156
- .pf-c-data-list.pf-m-grid-md {
5157
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5158
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5159
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5160
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5161
- }
5155
+
5156
+ .pf-c-data-list.pf-m-truncate,
5157
+ .pf-c-data-list__item-row.pf-m-truncate,
5158
+ .pf-c-data-list__cell.pf-m-truncate,
5159
+ .pf-c-data-list__text.pf-m-truncate {
5160
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
5161
+ --pf-c-data-list--cell--Overflow: hidden;
5162
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
5163
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
5162
5164
  }
5163
- @media screen and (min-width: 768px) {
5164
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
5165
- display: flex;
5166
- flex-wrap: wrap;
5167
- flex-grow: 1;
5168
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5169
- }
5165
+
5166
+ .pf-c-data-list.pf-m-break-word,
5167
+ .pf-c-data-list__item-row.pf-m-break-word,
5168
+ .pf-c-data-list__cell.pf-m-break-word,
5169
+ .pf-c-data-list__text.pf-m-break-word {
5170
+ --pf-c-data-list--cell--WordBreak: break-word;
5170
5171
  }
5171
- @media screen and (min-width: 768px) {
5172
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5173
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5174
- }
5175
5172
 
5176
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
5177
- flex: 1;
5178
- order: initial;
5179
- }
5173
+ .pf-c-data-list.pf-m-nowrap,
5174
+ .pf-c-data-list__item-row.pf-m-nowrap,
5175
+ .pf-c-data-list__cell.pf-m-nowrap,
5176
+ .pf-c-data-list__text.pf-m-nowrap {
5177
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
5178
+ }
5180
5179
 
5181
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5182
- margin-left: auto;
5183
- }
5180
+ .pf-c-data-list__item {
5181
+ position: relative;
5182
+ display: flex;
5183
+ flex-direction: column;
5184
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
5185
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
5186
+ }
5184
5187
 
5185
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5186
- flex: none;
5187
- }
5188
+ .pf-c-data-list__item::before {
5189
+ position: absolute;
5190
+ top: var(--pf-c-data-list__item--before--Top);
5191
+ bottom: 0;
5192
+ left: 0;
5193
+ width: var(--pf-c-data-list__item--before--Width);
5194
+ content: "";
5195
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
5196
+ transition: var(--pf-c-data-list__item--before--Transition);
5197
+ }
5188
5198
 
5189
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5190
- flex-grow: 2;
5191
- }
5199
+ .pf-c-data-list__item.pf-m-selectable {
5200
+ cursor: pointer;
5201
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
5202
+ }
5192
5203
 
5193
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5194
- flex-grow: 3;
5195
- }
5204
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
5205
+ position: relative;
5206
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
5207
+ }
5196
5208
 
5197
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5198
- flex-grow: 4;
5199
- }
5209
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
5210
+ --pf-c-data-list__item--BorderBottomWidth: 0;
5211
+ }
5200
5212
 
5201
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5202
- flex-grow: 5;
5203
- }
5213
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
5214
+ border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
5204
5215
  }
5205
- @media screen and (min-width: 768px) {
5206
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
5207
- max-height: initial;
5208
- overflow-y: visible;
5209
- }
5216
+
5217
+ .pf-c-data-list__item.pf-m-selectable:hover {
5218
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
5210
5219
  }
5211
- @media screen and (min-width: 992px) {
5212
- .pf-c-data-list.pf-m-grid-lg {
5213
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5214
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5215
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5216
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5217
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5218
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5219
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5220
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5221
- }
5220
+
5221
+ .pf-c-data-list__item.pf-m-selectable:focus {
5222
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
5222
5223
  }
5223
- @media screen and (min-width: 992px) and (min-width: 1200px) {
5224
- .pf-c-data-list.pf-m-grid-lg {
5225
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5226
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5227
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5228
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5229
- }
5224
+
5225
+ .pf-c-data-list__item.pf-m-selectable:active {
5226
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
5230
5227
  }
5231
- @media screen and (min-width: 992px) {
5232
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5233
- display: flex;
5234
- flex-wrap: wrap;
5235
- flex-grow: 1;
5236
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5237
- }
5228
+
5229
+ .pf-c-data-list__item.pf-m-selected {
5230
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
5231
+ position: relative;
5232
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
5233
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
5238
5234
  }
5239
- @media screen and (min-width: 992px) {
5240
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5241
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5242
- }
5243
5235
 
5244
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5245
- flex: 1;
5246
- order: initial;
5247
- }
5236
+ .pf-c-data-list__item.pf-m-ghost-row::after {
5237
+ position: absolute;
5238
+ top: 0;
5239
+ right: 0;
5240
+ bottom: 0;
5241
+ left: 0;
5242
+ content: "";
5243
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
5244
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
5245
+ }
5248
5246
 
5249
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5250
- margin-left: auto;
5251
- }
5247
+ .pf-c-data-list__item.pf-m-expanded {
5248
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
5249
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
5250
+ }
5252
5251
 
5253
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5254
- flex: none;
5255
- }
5252
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
5253
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
5254
+ }
5256
5255
 
5257
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5258
- flex-grow: 2;
5259
- }
5256
+ .pf-c-data-list__item-row {
5257
+ display: flex;
5258
+ flex-wrap: nowrap;
5259
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
5260
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
5261
+ }
5260
5262
 
5261
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5262
- flex-grow: 3;
5263
- }
5263
+ .pf-c-data-list__item-control {
5264
+ display: flex;
5265
+ flex-wrap: nowrap;
5266
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
5267
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
5268
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
5269
+ }
5264
5270
 
5265
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5266
- flex-grow: 4;
5267
- }
5271
+ .pf-c-data-list__item-control > *:not(:last-child) {
5272
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
5273
+ }
5268
5274
 
5269
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5270
- flex-grow: 5;
5271
- }
5275
+ .pf-c-data-list__check {
5276
+ display: flex;
5277
+ align-items: center;
5278
+ align-self: flex-start;
5279
+ height: var(--pf-c-data-list__check--Height);
5280
+ margin-top: var(--pf-c-data-list__check--MarginTop);
5272
5281
  }
5273
- @media screen and (min-width: 992px) {
5274
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5275
- max-height: initial;
5276
- overflow-y: visible;
5277
- }
5282
+
5283
+ .pf-c-data-list__check > input {
5284
+ cursor: pointer;
5278
5285
  }
5279
- @media screen and (min-width: 1200px) {
5280
- .pf-c-data-list.pf-m-grid-xl {
5281
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5282
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5283
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5284
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5285
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5286
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5287
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5288
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5289
- }
5286
+
5287
+ .pf-c-data-list__item-draggable-button {
5288
+ display: flex;
5289
+ flex-direction: column;
5290
+ padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
5291
+ margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
5292
+ border: 0;
5290
5293
  }
5291
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
5292
- .pf-c-data-list.pf-m-grid-xl {
5293
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5294
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5295
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5296
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5297
- }
5294
+
5295
+ .pf-c-data-list__item-draggable-button:hover {
5296
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
5297
+ cursor: grab;
5298
5298
  }
5299
- @media screen and (min-width: 1200px) {
5300
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5301
- display: flex;
5302
- flex-wrap: wrap;
5303
- flex-grow: 1;
5304
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5305
- }
5299
+
5300
+ .pf-c-data-list__item-draggable-button:focus {
5301
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
5306
5302
  }
5307
- @media screen and (min-width: 1200px) {
5308
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5309
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5310
- }
5311
5303
 
5312
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5313
- flex: 1;
5314
- order: initial;
5315
- }
5304
+ .pf-c-data-list__item-draggable-button:active {
5305
+ cursor: grabbing;
5306
+ }
5316
5307
 
5317
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5318
- margin-left: auto;
5319
- }
5308
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
5309
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5310
+ pointer-events: none;
5311
+ }
5320
5312
 
5321
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5322
- flex: none;
5323
- }
5313
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5314
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5315
+ }
5324
5316
 
5325
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5326
- flex-grow: 2;
5327
- }
5317
+ .pf-c-data-list__item-action {
5318
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5319
+ align-items: flex-start;
5320
+ align-content: flex-start;
5321
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5322
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5323
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5324
+ }
5328
5325
 
5329
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5330
- flex-grow: 3;
5331
- }
5326
+ .pf-c-data-list__item-action > *:not(:last-child) {
5327
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5328
+ }
5332
5329
 
5333
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5334
- flex-grow: 4;
5335
- }
5330
+ .pf-c-data-list__item-action .pf-c-data-list__action {
5331
+ margin-top: var(--pf-c-data-list__action--MarginTop);
5332
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5333
+ }
5336
5334
 
5337
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5338
- flex-grow: 5;
5339
- }
5335
+ .pf-c-data-list__toggle {
5336
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5340
5337
  }
5341
- @media screen and (min-width: 1200px) {
5342
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5343
- max-height: initial;
5344
- overflow-y: visible;
5345
- }
5338
+
5339
+ .pf-c-data-list__toggle-icon {
5340
+ height: var(--pf-c-data-list__toggle-icon--Height);
5341
+ pointer-events: none;
5342
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
5343
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5346
5344
  }
5347
- @media screen and (min-width: 1450px) {
5348
- .pf-c-data-list.pf-m-grid-2xl {
5349
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5350
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5351
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5352
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5353
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5354
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5355
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5356
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5357
- }
5345
+
5346
+ .pf-c-data-list__item-content {
5347
+ display: grid;
5348
+ width: 100%;
5349
+ grid-template-columns: auto 1fr;
5358
5350
  }
5359
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
5360
- .pf-c-data-list.pf-m-grid-2xl {
5361
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5362
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5363
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5364
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5365
- }
5351
+
5352
+ .pf-c-data-list__cell {
5353
+ flex: 1;
5354
+ grid-column: 1/-1;
5355
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
5356
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5366
5357
  }
5367
- @media screen and (min-width: 1450px) {
5368
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5369
- display: flex;
5370
- flex-wrap: wrap;
5371
- flex-grow: 1;
5372
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5373
- }
5358
+
5359
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
5360
+ flex: 1 0 100%;
5361
+ order: 1;
5362
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5374
5363
  }
5375
- @media screen and (min-width: 1450px) {
5376
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5377
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5378
- }
5379
5364
 
5380
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5381
- flex: 1;
5382
- order: initial;
5383
- }
5365
+ .pf-c-data-list__cell.pf-m-icon {
5366
+ flex-grow: 0;
5367
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5368
+ grid-column: 1/2;
5369
+ }
5384
5370
 
5385
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5386
- margin-left: auto;
5387
- }
5371
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5372
+ grid-column: 2/3;
5373
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5374
+ }
5388
5375
 
5389
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5390
- flex: none;
5391
- }
5376
+ .pf-c-data-list__cell.pf-m-align-right {
5377
+ margin-left: 0;
5378
+ }
5392
5379
 
5393
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5394
- flex-grow: 2;
5395
- }
5380
+ .pf-c-data-list__text {
5381
+ display: inline-block;
5382
+ }
5396
5383
 
5397
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5398
- flex-grow: 3;
5399
- }
5384
+ .pf-c-data-list__text,
5385
+ .pf-c-data-list__cell {
5386
+ min-width: var(--pf-c-data-list--cell--MinWidth);
5387
+ max-width: 100%;
5388
+ overflow: var(--pf-c-data-list--cell--Overflow);
5389
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5390
+ word-break: var(--pf-c-data-list--cell--WordBreak);
5391
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
5392
+ }
5400
5393
 
5401
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5402
- flex-grow: 4;
5403
- }
5394
+ .pf-c-data-list__expandable-content {
5395
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5396
+ overflow-y: auto;
5397
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5398
+ }
5404
5399
 
5405
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5406
- flex-grow: 5;
5407
- }
5400
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5401
+ padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
5408
5402
  }
5409
- @media screen and (min-width: 1450px) {
5410
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5411
- max-height: initial;
5412
- overflow-y: visible;
5413
- }
5403
+
5404
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5405
+ padding: 0;
5406
+ }
5407
+
5408
+ :where(.pf-theme-dark) .pf-c-data-list {
5409
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
5410
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
5411
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
5412
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
5414
5413
  }
5414
+
5415
5415
  .pf-c-date-picker {
5416
5416
  --pf-c-date-picker--m-top__calendar--Top: 0;
5417
5417
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -23609,6 +23609,69 @@ label.pf-c-tree-view__node-text {
23609
23609
  color: var(--pf-global--Color--100);
23610
23610
  }
23611
23611
 
23612
+ .pf-c-draggable {
23613
+ --pf-c-draggable--Cursor: auto;
23614
+ --pf-c-draggable--m-dragging--Cursor: grabbing;
23615
+ --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
23616
+ --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
23617
+ --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
23618
+ --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
23619
+ --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
23620
+ cursor: var(--pf-c-draggable--Cursor);
23621
+ }
23622
+
23623
+ .pf-c-draggable.pf-m-dragging {
23624
+ --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
23625
+ position: relative;
23626
+ background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
23627
+ box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
23628
+ }
23629
+
23630
+ .pf-c-draggable.pf-m-dragging::after {
23631
+ position: absolute;
23632
+ top: 0;
23633
+ right: 0;
23634
+ bottom: 0;
23635
+ left: 0;
23636
+ content: "";
23637
+ border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
23638
+ }
23639
+
23640
+ .pf-c-draggable.pf-m-drag-outside {
23641
+ --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
23642
+ --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
23643
+ }
23644
+
23645
+ .pf-c-droppable {
23646
+ --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
23647
+ --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
23648
+ --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
23649
+ --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
23650
+ }
23651
+
23652
+ .pf-c-droppable.pf-m-dragging {
23653
+ position: relative;
23654
+ }
23655
+
23656
+ .pf-c-droppable.pf-m-dragging::after {
23657
+ position: absolute;
23658
+ top: 0;
23659
+ right: 0;
23660
+ bottom: 0;
23661
+ left: 0;
23662
+ pointer-events: none;
23663
+ content: "";
23664
+ }
23665
+
23666
+ .pf-c-droppable::after {
23667
+ background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
23668
+ border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
23669
+ }
23670
+
23671
+ .pf-c-droppable.pf-m-drag-outside {
23672
+ --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
23673
+ }
23674
+
23612
23675
  .pf-c-text-input-group {
23613
23676
  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
23614
23677
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -23781,67 +23844,87 @@ label.pf-c-tree-view__node-text {
23781
23844
  display: flex;
23782
23845
  }
23783
23846
 
23784
- .pf-c-draggable {
23785
- --pf-c-draggable--Cursor: auto;
23786
- --pf-c-draggable--m-dragging--Cursor: grabbing;
23787
- --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
23788
- --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
23789
- --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
23790
- --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
23791
- --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
23792
- cursor: var(--pf-c-draggable--Cursor);
23793
- }
23794
-
23795
- .pf-c-draggable.pf-m-dragging {
23796
- --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
23847
+ .pf-c-panel {
23848
+ --pf-c-panel--Width: auto;
23849
+ --pf-c-panel--MinWidth: auto;
23850
+ --pf-c-panel--MaxWidth: none;
23851
+ --pf-c-panel--ZIndex: auto;
23852
+ --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
23853
+ --pf-c-panel--BoxShadow: none;
23854
+ --pf-c-panel--before--BorderWidth: 0;
23855
+ --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
23856
+ --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
23857
+ --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
23858
+ --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
23859
+ --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
23860
+ --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
23861
+ --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
23862
+ --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
23863
+ --pf-c-panel__main--MaxHeight: none;
23864
+ --pf-c-panel__main--Overflow: visible;
23865
+ --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
23866
+ --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
23867
+ --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
23868
+ --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
23869
+ --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
23870
+ --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
23871
+ --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
23872
+ --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
23873
+ --pf-c-panel__footer--BoxShadow: none;
23874
+ --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
23875
+ --pf-c-panel--m-scrollable__main--Overflow: auto;
23876
+ --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
23797
23877
  position: relative;
23798
- background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
23799
- box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
23878
+ z-index: var(--pf-c-panel--ZIndex);
23879
+ width: var(--pf-c-panel--Width);
23880
+ min-width: var(--pf-c-panel--MinWidth);
23881
+ max-width: var(--pf-c-panel--MaxWidth);
23882
+ background-color: var(--pf-c-panel--BackgroundColor);
23883
+ box-shadow: var(--pf-c-panel--BoxShadow);
23800
23884
  }
23801
23885
 
23802
- .pf-c-draggable.pf-m-dragging::after {
23886
+ .pf-c-panel::before {
23803
23887
  position: absolute;
23804
23888
  top: 0;
23805
23889
  right: 0;
23806
23890
  bottom: 0;
23807
23891
  left: 0;
23892
+ pointer-events: none;
23808
23893
  content: "";
23809
- border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
23894
+ border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
23810
23895
  }
23811
23896
 
23812
- .pf-c-draggable.pf-m-drag-outside {
23813
- --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
23814
- --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
23897
+ .pf-c-panel.pf-m-bordered {
23898
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
23815
23899
  }
23816
23900
 
23817
- .pf-c-droppable {
23818
- --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
23819
- --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
23820
- --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
23821
- --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
23901
+ .pf-c-panel.pf-m-raised {
23902
+ --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
23903
+ --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
23822
23904
  }
23823
23905
 
23824
- .pf-c-droppable.pf-m-dragging {
23825
- position: relative;
23906
+ .pf-c-panel.pf-m-scrollable {
23907
+ --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
23908
+ --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
23909
+ --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
23826
23910
  }
23827
23911
 
23828
- .pf-c-droppable.pf-m-dragging::after {
23829
- position: absolute;
23830
- top: 0;
23831
- right: 0;
23832
- bottom: 0;
23833
- left: 0;
23834
- pointer-events: none;
23835
- content: "";
23912
+ .pf-c-panel__header {
23913
+ padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
23836
23914
  }
23837
23915
 
23838
- .pf-c-droppable::after {
23839
- background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
23840
- border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
23916
+ .pf-c-panel__main {
23917
+ max-height: var(--pf-c-panel__main--MaxHeight);
23918
+ overflow: var(--pf-c-panel__main--Overflow);
23841
23919
  }
23842
23920
 
23843
- .pf-c-droppable.pf-m-drag-outside {
23844
- --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
23921
+ .pf-c-panel__main-body {
23922
+ padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
23923
+ }
23924
+
23925
+ .pf-c-panel__footer {
23926
+ padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
23927
+ box-shadow: var(--pf-c-panel__footer--BoxShadow);
23845
23928
  }
23846
23929
 
23847
23930
  .pf-c-truncate {
@@ -26023,89 +26106,6 @@ label.pf-c-tree-view__node-text {
26023
26106
  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26024
26107
  }
26025
26108
  }
26026
- .pf-c-panel {
26027
- --pf-c-panel--Width: auto;
26028
- --pf-c-panel--MinWidth: auto;
26029
- --pf-c-panel--MaxWidth: none;
26030
- --pf-c-panel--ZIndex: auto;
26031
- --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
26032
- --pf-c-panel--BoxShadow: none;
26033
- --pf-c-panel--before--BorderWidth: 0;
26034
- --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
26035
- --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
26036
- --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
26037
- --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
26038
- --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
26039
- --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
26040
- --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
26041
- --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
26042
- --pf-c-panel__main--MaxHeight: none;
26043
- --pf-c-panel__main--Overflow: visible;
26044
- --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
26045
- --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
26046
- --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
26047
- --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
26048
- --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
26049
- --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
26050
- --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
26051
- --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
26052
- --pf-c-panel__footer--BoxShadow: none;
26053
- --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
26054
- --pf-c-panel--m-scrollable__main--Overflow: auto;
26055
- --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
26056
- position: relative;
26057
- z-index: var(--pf-c-panel--ZIndex);
26058
- width: var(--pf-c-panel--Width);
26059
- min-width: var(--pf-c-panel--MinWidth);
26060
- max-width: var(--pf-c-panel--MaxWidth);
26061
- background-color: var(--pf-c-panel--BackgroundColor);
26062
- box-shadow: var(--pf-c-panel--BoxShadow);
26063
- }
26064
-
26065
- .pf-c-panel::before {
26066
- position: absolute;
26067
- top: 0;
26068
- right: 0;
26069
- bottom: 0;
26070
- left: 0;
26071
- pointer-events: none;
26072
- content: "";
26073
- border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
26074
- }
26075
-
26076
- .pf-c-panel.pf-m-bordered {
26077
- --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
26078
- }
26079
-
26080
- .pf-c-panel.pf-m-raised {
26081
- --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
26082
- --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
26083
- }
26084
-
26085
- .pf-c-panel.pf-m-scrollable {
26086
- --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
26087
- --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
26088
- --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
26089
- }
26090
-
26091
- .pf-c-panel__header {
26092
- padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
26093
- }
26094
-
26095
- .pf-c-panel__main {
26096
- max-height: var(--pf-c-panel__main--MaxHeight);
26097
- overflow: var(--pf-c-panel__main--Overflow);
26098
- }
26099
-
26100
- .pf-c-panel__main-body {
26101
- padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
26102
- }
26103
-
26104
- .pf-c-panel__footer {
26105
- padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
26106
- box-shadow: var(--pf-c-panel__footer--BoxShadow);
26107
- }
26108
-
26109
26109
  .pf-l-grid {
26110
26110
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26111
26111
  --pf-l-grid__item--GridColumnStart: auto;