@patternfly/react-core 4.236.6 → 4.236.7

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.
@@ -4979,1363 +4979,1363 @@ label.pf-c-check, .pf-c-check__label,
4979
4979
  --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4980
4980
  }
4981
4981
 
4982
- @media screen and (min-width: 768px) {
4983
- .pf-c-data-list:not([class*=pf-m-grid]) {
4984
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4985
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4986
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4987
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4988
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4989
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4990
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4991
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4992
- }
4993
- }
4994
- @media screen and (min-width: 768px) and (min-width: 1200px) {
4995
- .pf-c-data-list:not([class*=pf-m-grid]) {
4996
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4997
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4998
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4999
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5000
- }
5001
- }
5002
- @media screen and (min-width: 768px) {
5003
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
5004
- display: flex;
5005
- flex-wrap: wrap;
5006
- flex-grow: 1;
5007
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5008
- }
4982
+ .pf-c-date-picker {
4983
+ --pf-c-date-picker--m-top__calendar--Top: 0;
4984
+ --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
4985
+ --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
4986
+ --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
4987
+ --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
4988
+ --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
4989
+ --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
4990
+ --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
4991
+ --pf-c-date-picker__input--c-form-control--width-chars: 10;
4992
+ --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
4993
+ --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
4994
+ --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
4995
+ --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
4996
+ --pf-c-date-picker__calendar--Right: auto;
4997
+ --pf-c-date-picker__calendar--Left: 0;
4998
+ --pf-c-date-picker__calendar--m-align-right--Right: 0;
4999
+ --pf-c-date-picker__calendar--m-align-right--Left: auto;
5000
+ position: relative;
5001
+ display: inline-block;
5009
5002
  }
5010
- @media screen and (min-width: 768px) {
5011
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5012
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5013
- }
5014
-
5015
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
5016
- flex: 1;
5017
- order: initial;
5018
- }
5019
5003
 
5020
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
5021
- margin-left: auto;
5022
- }
5004
+ .pf-c-date-picker__helper-text {
5005
+ margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
5006
+ font-size: var(--pf-c-date-picker__helper-text--FontSize);
5007
+ color: var(--pf-c-date-picker__helper-text--Color);
5008
+ }
5023
5009
 
5024
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
5025
- flex: none;
5026
- }
5010
+ .pf-c-date-picker__helper-text.pf-m-error {
5011
+ --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
5012
+ }
5027
5013
 
5028
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
5029
- flex-grow: 2;
5030
- }
5014
+ .pf-c-date-picker__input .pf-c-form-control {
5015
+ width: var(--pf-c-date-picker__input--c-form-control--Width);
5016
+ }
5031
5017
 
5032
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
5033
- flex-grow: 3;
5034
- }
5018
+ .pf-c-date-picker__calendar {
5019
+ position: absolute;
5020
+ top: var(--pf-c-date-picker__calendar--Top);
5021
+ right: var(--pf-c-date-picker__calendar--Right);
5022
+ left: var(--pf-c-date-picker__calendar--Left);
5023
+ z-index: var(--pf-c-date-picker__calendar--ZIndex);
5024
+ background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
5025
+ box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
5026
+ }
5035
5027
 
5036
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
5037
- flex-grow: 4;
5038
- }
5028
+ .pf-c-date-picker__calendar.pf-m-align-right {
5029
+ --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
5030
+ --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
5031
+ }
5039
5032
 
5040
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
5041
- flex-grow: 5;
5042
- }
5033
+ .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
5034
+ --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
5035
+ transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
5043
5036
  }
5044
- @media screen and (min-width: 768px) {
5045
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
5046
- max-height: initial;
5047
- overflow-y: visible;
5048
- }
5037
+
5038
+ :where(.pf-theme-dark) .pf-c-date-picker {
5039
+ --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
5040
+ --pf-c-date-picker__calendar--Top: 100%;
5049
5041
  }
5050
- @media screen and (min-width: 0) {
5051
- .pf-c-data-list.pf-m-grid-none {
5052
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5053
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5054
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5055
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5056
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5057
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5058
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5059
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5060
- }
5042
+
5043
+ .pf-c-description-list {
5044
+ --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
5045
+ --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
5046
+ --pf-c-description-list--GridTemplateColumns--count: 1;
5047
+ --pf-c-description-list--GridTemplateColumns--width: 1fr;
5048
+ --pf-c-description-list--GridTemplateColumns--min: 0;
5049
+ --pf-c-description-list--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count), var(--pf-c-description-list--GridTemplateColumns--width));
5050
+ --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
5051
+ --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
5052
+ --pf-c-description-list__group--GridTemplateColumns: auto;
5053
+ --pf-c-description-list__group--GridTemplateRows: auto 1fr;
5054
+ --pf-c-description-list__group--GridColumn: auto;
5055
+ --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
5056
+ --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
5057
+ --pf-c-description-list__term--Display: inline;
5058
+ --pf-c-description-list__term--sm--Display: flex;
5059
+ --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
5060
+ --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
5061
+ --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
5062
+ --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
5063
+ --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
5064
+ --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
5065
+ --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
5066
+ --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
5067
+ --pf-c-description-list--m-horizontal__term--width: 12ch;
5068
+ --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
5069
+ --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
5070
+ --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
5071
+ --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
5072
+ --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
5073
+ --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
5074
+ --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
5075
+ --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
5076
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
5077
+ --pf-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
5078
+ --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
5079
+ --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
5080
+ --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
5081
+ --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
5082
+ --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
5083
+ display: grid;
5084
+ align-items: baseline;
5085
+ row-gap: var(--pf-c-description-list--RowGap);
5086
+ column-gap: var(--pf-c-description-list--ColumnGap);
5087
+ grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
5061
5088
  }
5062
- @media screen and (min-width: 0) and (min-width: 1200px) {
5063
- .pf-c-data-list.pf-m-grid-none {
5064
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5065
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5066
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5067
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5089
+
5090
+ @media screen and (min-width: 576px) {
5091
+ .pf-c-description-list {
5092
+ --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
5068
5093
  }
5069
5094
  }
5070
- @media screen and (min-width: 0) {
5071
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
5072
- display: flex;
5073
- flex-wrap: wrap;
5074
- flex-grow: 1;
5075
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5076
- }
5095
+ .pf-c-description-list[class*=pf-m-horizontal] {
5096
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
5077
5097
  }
5078
- @media screen and (min-width: 0) {
5079
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5080
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5081
- }
5082
-
5083
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
5084
- flex: 1;
5085
- order: initial;
5086
- }
5087
-
5088
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
5089
- margin-left: auto;
5090
- }
5091
-
5092
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
5093
- flex: none;
5094
- }
5095
-
5096
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
5097
- flex-grow: 2;
5098
- }
5099
5098
 
5100
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
5101
- flex-grow: 3;
5102
- }
5103
-
5104
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
5105
- flex-grow: 4;
5106
- }
5107
-
5108
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
5109
- flex-grow: 5;
5099
+ @media (min-width: 576px) {
5100
+ .pf-c-description-list[class*=pf-m-horizontal] {
5101
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width));
5110
5102
  }
5111
5103
  }
5112
- @media screen and (min-width: 0) {
5113
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
5114
- max-height: initial;
5115
- overflow-y: visible;
5104
+ @media (min-width: 768px) {
5105
+ .pf-c-description-list[class*=pf-m-horizontal] {
5106
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)));
5116
5107
  }
5117
5108
  }
5118
- @media screen and (min-width: 576px) {
5119
- .pf-c-data-list.pf-m-grid-sm {
5120
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5121
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5122
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5123
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5124
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5125
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5126
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5127
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5109
+ @media (min-width: 992px) {
5110
+ .pf-c-description-list[class*=pf-m-horizontal] {
5111
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))));
5128
5112
  }
5129
5113
  }
5130
- @media screen and (min-width: 576px) and (min-width: 1200px) {
5131
- .pf-c-data-list.pf-m-grid-sm {
5132
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5133
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5134
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5135
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5114
+ @media (min-width: 1200px) {
5115
+ .pf-c-description-list[class*=pf-m-horizontal] {
5116
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)))));
5136
5117
  }
5137
5118
  }
5138
- @media screen and (min-width: 576px) {
5139
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
5140
- display: flex;
5141
- flex-wrap: wrap;
5142
- flex-grow: 1;
5143
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5119
+ @media (min-width: 1450px) {
5120
+ .pf-c-description-list[class*=pf-m-horizontal] {
5121
+ --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))))));
5144
5122
  }
5145
5123
  }
5146
- @media screen and (min-width: 576px) {
5147
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5148
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5149
- }
5150
-
5151
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
5152
- flex: 1;
5153
- order: initial;
5154
- }
5155
-
5156
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
5157
- margin-left: auto;
5158
- }
5159
-
5160
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
5161
- flex: none;
5162
- }
5163
-
5164
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
5165
- flex-grow: 2;
5166
- }
5124
+ .pf-c-description-list.pf-m-inline-grid {
5125
+ display: inline-grid;
5126
+ }
5167
5127
 
5168
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
5169
- flex-grow: 3;
5170
- }
5128
+ .pf-c-description-list.pf-m-auto-column-widths {
5129
+ --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
5130
+ }
5171
5131
 
5172
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
5173
- flex-grow: 4;
5174
- }
5132
+ .pf-c-description-list.pf-m-auto-fit {
5133
+ grid-template-columns: repeat(auto-fit, minmax(var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min), 1fr));
5134
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min);
5135
+ }
5175
5136
 
5176
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
5177
- flex-grow: 5;
5137
+ @media (min-width: 576px) {
5138
+ .pf-c-description-list.pf-m-auto-fit {
5139
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min));
5178
5140
  }
5179
5141
  }
5180
- @media screen and (min-width: 576px) {
5181
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
5182
- max-height: initial;
5183
- overflow-y: visible;
5142
+ @media (min-width: 768px) {
5143
+ .pf-c-description-list.pf-m-auto-fit {
5144
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)));
5184
5145
  }
5185
5146
  }
5186
- @media screen and (min-width: 768px) {
5187
- .pf-c-data-list.pf-m-grid-md {
5188
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5189
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5190
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5191
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5192
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5193
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5194
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5195
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5147
+ @media (min-width: 992px) {
5148
+ .pf-c-description-list.pf-m-auto-fit {
5149
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))));
5196
5150
  }
5197
5151
  }
5198
- @media screen and (min-width: 768px) and (min-width: 1200px) {
5199
- .pf-c-data-list.pf-m-grid-md {
5200
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5201
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5202
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5203
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5152
+ @media (min-width: 1200px) {
5153
+ .pf-c-description-list.pf-m-auto-fit {
5154
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)))));
5204
5155
  }
5205
5156
  }
5206
- @media screen and (min-width: 768px) {
5207
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
5208
- display: flex;
5209
- flex-wrap: wrap;
5210
- flex-grow: 1;
5211
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5157
+ @media (min-width: 1450px) {
5158
+ .pf-c-description-list.pf-m-auto-fit {
5159
+ --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-2xl, var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))))));
5212
5160
  }
5213
5161
  }
5214
- @media screen and (min-width: 768px) {
5215
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5216
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5217
- }
5218
-
5219
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
5220
- flex: 1;
5221
- order: initial;
5222
- }
5223
-
5224
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5225
- margin-left: auto;
5226
- }
5162
+ .pf-c-description-list.pf-m-compact {
5163
+ --pf-c-description-list--RowGap: var(--pf-c-description-list--m-compact--RowGap);
5164
+ --pf-c-description-list--ColumnGap: var(--pf-c-description-list--m-compact--ColumnGap);
5165
+ }
5227
5166
 
5228
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5229
- flex: none;
5230
- }
5167
+ .pf-c-description-list.pf-m-fluid {
5168
+ --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
5169
+ }
5231
5170
 
5232
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5233
- flex-grow: 2;
5234
- }
5171
+ .pf-c-description-list.pf-m-fill-columns {
5172
+ display: block;
5173
+ column-count: var(--pf-c-description-list--GridTemplateColumns--count);
5174
+ margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
5175
+ }
5235
5176
 
5236
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5237
- flex-grow: 3;
5238
- }
5177
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
5178
+ .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
5179
+ display: inline-grid;
5180
+ width: 100%;
5181
+ margin-bottom: var(--pf-c-description-list--RowGap);
5182
+ break-inside: avoid;
5183
+ page-break-inside: avoid;
5184
+ -webkit-column-break-inside: avoid;
5185
+ -moz-column-break-inside: avoid;
5186
+ }
5239
5187
 
5240
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5241
- flex-grow: 4;
5242
- }
5188
+ .pf-c-description-list.pf-m-display-lg {
5189
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
5190
+ }
5243
5191
 
5244
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5245
- flex-grow: 5;
5246
- }
5192
+ .pf-c-description-list.pf-m-display-2xl {
5193
+ --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
5247
5194
  }
5248
- @media screen and (min-width: 768px) {
5249
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
5250
- max-height: initial;
5251
- overflow-y: visible;
5252
- }
5195
+
5196
+ .pf-c-description-list > .pf-c-card {
5197
+ align-self: stretch;
5198
+ padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
5253
5199
  }
5254
- @media screen and (min-width: 992px) {
5255
- .pf-c-data-list.pf-m-grid-lg {
5256
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5257
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5258
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5259
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5260
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5261
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5262
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5263
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5264
- }
5200
+
5201
+ .pf-c-description-list__group,
5202
+ .pf-c-description-list > .pf-c-card {
5203
+ display: grid;
5204
+ grid-column: var(--pf-c-description-list__group--GridColumn);
5205
+ row-gap: var(--pf-c-description-list__group--RowGap);
5206
+ column-gap: var(--pf-c-description-list__group--ColumnGap);
5207
+ grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
5208
+ grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
5209
+ align-items: baseline;
5265
5210
  }
5266
- @media screen and (min-width: 992px) and (min-width: 1200px) {
5267
- .pf-c-data-list.pf-m-grid-lg {
5268
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5269
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5270
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5271
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5272
- }
5211
+
5212
+ .pf-c-description-list__term,
5213
+ .pf-c-description-list__description {
5214
+ min-width: 0;
5215
+ text-align: left;
5216
+ overflow-wrap: break-word;
5273
5217
  }
5274
- @media screen and (min-width: 992px) {
5275
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
5276
- display: flex;
5277
- flex-wrap: wrap;
5278
- flex-grow: 1;
5279
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5280
- }
5218
+
5219
+ .pf-c-description-list__term {
5220
+ display: var(--pf-c-description-list__term--Display);
5221
+ font-size: var(--pf-c-description-list__term--FontSize);
5222
+ font-weight: var(--pf-c-description-list__term--FontWeight);
5223
+ line-height: var(--pf-c-description-list__term--LineHeight);
5281
5224
  }
5282
- @media screen and (min-width: 992px) {
5283
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5284
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5285
- }
5286
5225
 
5287
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
5288
- flex: 1;
5289
- order: initial;
5290
- }
5226
+ .pf-c-description-list__term .pf-c-description-list__text {
5227
+ display: inline;
5228
+ }
5291
5229
 
5292
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5293
- margin-left: auto;
5294
- }
5230
+ .pf-c-description-list__term-icon {
5231
+ flex-shrink: 0;
5232
+ min-width: var(--pf-c-description-list__term-icon--MinWidth);
5233
+ margin-right: var(--pf-c-description-list__term-icon--MarginRight);
5234
+ color: var(--pf-c-description-list__term-icon--Color);
5235
+ }
5295
5236
 
5296
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5297
- flex: none;
5298
- }
5237
+ .pf-c-description-list__description {
5238
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
5239
+ }
5299
5240
 
5300
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5301
- flex-grow: 2;
5302
- }
5241
+ .pf-c-description-list__text {
5242
+ min-width: 0;
5243
+ }
5303
5244
 
5304
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5305
- flex-grow: 3;
5306
- }
5245
+ .pf-c-description-list__text.pf-m-help-text {
5246
+ text-decoration: underline;
5247
+ cursor: pointer;
5248
+ text-decoration-style: dashed;
5249
+ text-decoration-thickness: var(--pf-c-description-list__text--m-help-text--TextDecorationThickness);
5250
+ text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
5251
+ text-decoration-color: var(--pf-c-description-list__text--m-help-text--TextDecorationColor);
5252
+ }
5307
5253
 
5308
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5309
- flex-grow: 4;
5310
- }
5254
+ .pf-c-description-list__text.pf-m-help-text:hover {
5255
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--hover--TextDecorationColor);
5256
+ }
5311
5257
 
5312
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5313
- flex-grow: 5;
5314
- }
5258
+ .pf-c-description-list__text.pf-m-help-text:focus {
5259
+ --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--focus--TextDecorationColor);
5315
5260
  }
5316
- @media screen and (min-width: 992px) {
5317
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
5318
- max-height: initial;
5319
- overflow-y: visible;
5320
- }
5261
+
5262
+ .pf-c-description-list.pf-m-1-col {
5263
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5321
5264
  }
5322
- @media screen and (min-width: 1200px) {
5323
- .pf-c-data-list.pf-m-grid-xl {
5324
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5325
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5326
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5327
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5328
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5329
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5330
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5331
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5332
- }
5265
+
5266
+ .pf-c-description-list.pf-m-2-col {
5267
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5333
5268
  }
5334
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
5335
- .pf-c-data-list.pf-m-grid-xl {
5336
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5337
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5338
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5339
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5340
- }
5269
+
5270
+ .pf-c-description-list.pf-m-3-col {
5271
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5341
5272
  }
5342
- @media screen and (min-width: 1200px) {
5343
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
5344
- display: flex;
5345
- flex-wrap: wrap;
5346
- flex-grow: 1;
5347
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5348
- }
5273
+
5274
+ .pf-c-description-list.pf-m-horizontal {
5275
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5276
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5349
5277
  }
5350
- @media screen and (min-width: 1200px) {
5351
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5352
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5353
- }
5354
5278
 
5355
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5356
- flex: 1;
5357
- order: initial;
5358
- }
5279
+ .pf-c-description-list.pf-m-vertical {
5280
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5281
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5282
+ }
5359
5283
 
5360
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5361
- margin-left: auto;
5284
+ @media (min-width: 576px) {
5285
+ .pf-c-description-list.pf-m-1-col-on-sm {
5286
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5362
5287
  }
5363
5288
 
5364
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5365
- flex: none;
5289
+ .pf-c-description-list.pf-m-2-col-on-sm {
5290
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5366
5291
  }
5367
5292
 
5368
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5369
- flex-grow: 2;
5293
+ .pf-c-description-list.pf-m-3-col-on-sm {
5294
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5370
5295
  }
5371
5296
 
5372
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5373
- flex-grow: 3;
5297
+ .pf-c-description-list.pf-m-horizontal-on-sm {
5298
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5299
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5374
5300
  }
5375
5301
 
5376
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5377
- flex-grow: 4;
5302
+ .pf-c-description-list.pf-m-vertical-on-sm {
5303
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5304
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5305
+ }
5306
+ }
5307
+ @media (min-width: 768px) {
5308
+ .pf-c-description-list.pf-m-1-col-on-md {
5309
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5378
5310
  }
5379
5311
 
5380
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5381
- flex-grow: 5;
5312
+ .pf-c-description-list.pf-m-2-col-on-md {
5313
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5382
5314
  }
5383
- }
5384
- @media screen and (min-width: 1200px) {
5385
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5386
- max-height: initial;
5387
- overflow-y: visible;
5315
+
5316
+ .pf-c-description-list.pf-m-3-col-on-md {
5317
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5388
5318
  }
5389
- }
5390
- @media screen and (min-width: 1450px) {
5391
- .pf-c-data-list.pf-m-grid-2xl {
5392
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5393
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5394
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5395
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5396
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5397
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5398
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5399
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5319
+
5320
+ .pf-c-description-list.pf-m-horizontal-on-md {
5321
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5322
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5400
5323
  }
5401
- }
5402
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
5403
- .pf-c-data-list.pf-m-grid-2xl {
5404
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5405
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5406
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5407
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5324
+
5325
+ .pf-c-description-list.pf-m-vertical-on-md {
5326
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5327
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5408
5328
  }
5409
5329
  }
5410
- @media screen and (min-width: 1450px) {
5411
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5412
- display: flex;
5413
- flex-wrap: wrap;
5414
- flex-grow: 1;
5415
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5330
+ @media (min-width: 992px) {
5331
+ .pf-c-description-list.pf-m-1-col-on-lg {
5332
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5416
5333
  }
5417
- }
5418
- @media screen and (min-width: 1450px) {
5419
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5420
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5334
+
5335
+ .pf-c-description-list.pf-m-2-col-on-lg {
5336
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5421
5337
  }
5422
5338
 
5423
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5424
- flex: 1;
5425
- order: initial;
5339
+ .pf-c-description-list.pf-m-3-col-on-lg {
5340
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5426
5341
  }
5427
5342
 
5428
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5429
- margin-left: auto;
5343
+ .pf-c-description-list.pf-m-horizontal-on-lg {
5344
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5345
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5430
5346
  }
5431
5347
 
5432
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5433
- flex: none;
5348
+ .pf-c-description-list.pf-m-vertical-on-lg {
5349
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5350
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5351
+ }
5352
+ }
5353
+ @media (min-width: 1200px) {
5354
+ .pf-c-description-list.pf-m-1-col-on-xl {
5355
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5434
5356
  }
5435
5357
 
5436
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5437
- flex-grow: 2;
5358
+ .pf-c-description-list.pf-m-2-col-on-xl {
5359
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5438
5360
  }
5439
5361
 
5440
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5441
- flex-grow: 3;
5362
+ .pf-c-description-list.pf-m-3-col-on-xl {
5363
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5442
5364
  }
5443
5365
 
5444
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5445
- flex-grow: 4;
5366
+ .pf-c-description-list.pf-m-horizontal-on-xl {
5367
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5368
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5446
5369
  }
5447
5370
 
5448
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5449
- flex-grow: 5;
5371
+ .pf-c-description-list.pf-m-vertical-on-xl {
5372
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5373
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5450
5374
  }
5451
5375
  }
5452
- @media screen and (min-width: 1450px) {
5453
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5454
- max-height: initial;
5455
- overflow-y: visible;
5376
+ @media (min-width: 1450px) {
5377
+ .pf-c-description-list.pf-m-1-col-on-2xl {
5378
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5379
+ }
5380
+
5381
+ .pf-c-description-list.pf-m-2-col-on-2xl {
5382
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5383
+ }
5384
+
5385
+ .pf-c-description-list.pf-m-3-col-on-2xl {
5386
+ --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5387
+ }
5388
+
5389
+ .pf-c-description-list.pf-m-horizontal-on-2xl {
5390
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5391
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5392
+ }
5393
+
5394
+ .pf-c-description-list.pf-m-vertical-on-2xl {
5395
+ --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5396
+ --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5456
5397
  }
5457
5398
  }
5458
- .pf-c-date-picker {
5459
- --pf-c-date-picker--m-top__calendar--Top: 0;
5460
- --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
5461
- --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
5462
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
5463
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
5464
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
5465
- --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
5466
- --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
5467
- --pf-c-date-picker__input--c-form-control--width-chars: 10;
5468
- --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
5469
- --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
5470
- --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
5471
- --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
5472
- --pf-c-date-picker__calendar--Right: auto;
5473
- --pf-c-date-picker__calendar--Left: 0;
5474
- --pf-c-date-picker__calendar--m-align-right--Right: 0;
5475
- --pf-c-date-picker__calendar--m-align-right--Left: auto;
5476
- position: relative;
5477
- display: inline-block;
5399
+ .pf-c-divider {
5400
+ --pf-hidden-visible--visible--Visibility: visible;
5401
+ --pf-hidden-visible--hidden--Display: none;
5402
+ --pf-hidden-visible--hidden--Visibility: hidden;
5403
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5404
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5405
+ display: var(--pf-hidden-visible--Display);
5406
+ visibility: var(--pf-hidden-visible--Visibility);
5478
5407
  }
5479
5408
 
5480
- .pf-c-date-picker__helper-text {
5481
- margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
5482
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
5483
- color: var(--pf-c-date-picker__helper-text--Color);
5409
+ .pf-m-hidden.pf-c-divider {
5410
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5411
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5484
5412
  }
5485
5413
 
5486
- .pf-c-date-picker__helper-text.pf-m-error {
5487
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
5488
- }
5414
+ @media screen and (min-width: 576px) {
5415
+ .pf-m-hidden-on-sm.pf-c-divider {
5416
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5417
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5418
+ }
5489
5419
 
5490
- .pf-c-date-picker__input .pf-c-form-control {
5491
- width: var(--pf-c-date-picker__input--c-form-control--Width);
5420
+ .pf-m-visible-on-sm.pf-c-divider {
5421
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5422
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5423
+ }
5492
5424
  }
5425
+ @media screen and (min-width: 768px) {
5426
+ .pf-m-hidden-on-md.pf-c-divider {
5427
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5428
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5429
+ }
5493
5430
 
5494
- .pf-c-date-picker__calendar {
5495
- position: absolute;
5496
- top: var(--pf-c-date-picker__calendar--Top);
5497
- right: var(--pf-c-date-picker__calendar--Right);
5498
- left: var(--pf-c-date-picker__calendar--Left);
5499
- z-index: var(--pf-c-date-picker__calendar--ZIndex);
5500
- background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
5501
- box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
5431
+ .pf-m-visible-on-md.pf-c-divider {
5432
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5433
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5434
+ }
5502
5435
  }
5436
+ @media screen and (min-width: 992px) {
5437
+ .pf-m-hidden-on-lg.pf-c-divider {
5438
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5439
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5440
+ }
5503
5441
 
5504
- .pf-c-date-picker__calendar.pf-m-align-right {
5505
- --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
5506
- --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
5442
+ .pf-m-visible-on-lg.pf-c-divider {
5443
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5444
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5445
+ }
5507
5446
  }
5447
+ @media screen and (min-width: 1200px) {
5448
+ .pf-m-hidden-on-xl.pf-c-divider {
5449
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5450
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5451
+ }
5508
5452
 
5509
- .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
5510
- --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
5511
- transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
5453
+ .pf-m-visible-on-xl.pf-c-divider {
5454
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5455
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5456
+ }
5512
5457
  }
5458
+ @media screen and (min-width: 1450px) {
5459
+ .pf-m-hidden-on-2xl.pf-c-divider {
5460
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5461
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5462
+ }
5513
5463
 
5514
- :where(.pf-theme-dark) .pf-c-date-picker {
5515
- --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
5516
- --pf-c-date-picker__calendar--Top: 100%;
5464
+ .pf-m-visible-on-2xl.pf-c-divider {
5465
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5466
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5467
+ }
5517
5468
  }
5518
-
5519
- .pf-c-description-list {
5520
- --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
5521
- --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
5522
- --pf-c-description-list--GridTemplateColumns--count: 1;
5523
- --pf-c-description-list--GridTemplateColumns--width: 1fr;
5524
- --pf-c-description-list--GridTemplateColumns--min: 0;
5525
- --pf-c-description-list--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count), var(--pf-c-description-list--GridTemplateColumns--width));
5526
- --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
5527
- --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
5528
- --pf-c-description-list__group--GridTemplateColumns: auto;
5529
- --pf-c-description-list__group--GridTemplateRows: auto 1fr;
5530
- --pf-c-description-list__group--GridColumn: auto;
5531
- --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
5532
- --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
5533
- --pf-c-description-list__term--Display: inline;
5534
- --pf-c-description-list__term--sm--Display: flex;
5535
- --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
5536
- --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
5537
- --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
5538
- --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
5539
- --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
5540
- --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
5541
- --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
5542
- --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
5543
- --pf-c-description-list--m-horizontal__term--width: 12ch;
5544
- --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
5545
- --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
5546
- --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
5547
- --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
5548
- --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
5549
- --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
5550
- --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
5551
- --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
5552
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
5553
- --pf-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
5554
- --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
5555
- --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
5556
- --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
5557
- --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
5558
- --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
5559
- display: grid;
5560
- align-items: baseline;
5561
- row-gap: var(--pf-c-description-list--RowGap);
5562
- column-gap: var(--pf-c-description-list--ColumnGap);
5563
- grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
5469
+ .pf-c-divider {
5470
+ --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
5471
+ --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
5472
+ --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
5473
+ --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
5474
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
5475
+ --pf-c-divider--after--FlexBasis: 100%;
5476
+ --pf-c-divider--after--Inset: 0%;
5477
+ --pf-c-divider--m-vertical--after--FlexBasis: 100%;
5478
+ --pf-c-divider--m-horizontal--Display: flex;
5479
+ --pf-c-divider--m-horizontal--FlexDirection: row;
5480
+ --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
5481
+ --pf-c-divider--m-horizontal--after--Width: auto;
5482
+ --pf-c-divider--m-vertical--Display: inline-flex;
5483
+ --pf-c-divider--m-vertical--FlexDirection: column;
5484
+ --pf-c-divider--m-vertical--after--Height: auto;
5485
+ --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
5486
+ --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
5487
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5488
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5489
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5490
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5491
+ width: 100%;
5492
+ height: auto;
5493
+ display: var(--pf-c-divider--Display);
5494
+ flex-direction: var(--pf-c-divider--FlexDirection);
5495
+ align-items: center;
5496
+ align-self: stretch;
5497
+ flex-shrink: 0;
5498
+ justify-content: center;
5499
+ border: 0;
5564
5500
  }
5565
5501
 
5566
- @media screen and (min-width: 576px) {
5567
- .pf-c-description-list {
5568
- --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
5569
- }
5502
+ .pf-c-divider::after {
5503
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5570
5504
  }
5571
- .pf-c-description-list[class*=pf-m-horizontal] {
5572
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
5505
+
5506
+ .pf-c-divider::after {
5507
+ align-self: stretch;
5508
+ width: var(--pf-c-divider--after--Width);
5509
+ height: var(--pf-c-divider--after--Height);
5510
+ content: "";
5511
+ background-color: var(--pf-c-divider--after--BackgroundColor);
5512
+ justify-self: center;
5573
5513
  }
5574
5514
 
5575
- @media (min-width: 576px) {
5576
- .pf-c-description-list[class*=pf-m-horizontal] {
5577
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width));
5578
- }
5515
+ .pf-c-divider.pf-m-vertical {
5516
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5517
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5518
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5519
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5520
+ width: auto;
5521
+ height: inherit;
5579
5522
  }
5580
- @media (min-width: 768px) {
5581
- .pf-c-description-list[class*=pf-m-horizontal] {
5582
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)));
5583
- }
5523
+
5524
+ .pf-c-divider.pf-m-vertical::after {
5525
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5584
5526
  }
5585
- @media (min-width: 992px) {
5586
- .pf-c-description-list[class*=pf-m-horizontal] {
5587
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))));
5588
- }
5527
+
5528
+ .pf-c-divider.pf-m-inset-none {
5529
+ --pf-c-divider--after--Inset: 0%;
5589
5530
  }
5590
- @media (min-width: 1200px) {
5591
- .pf-c-description-list[class*=pf-m-horizontal] {
5592
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width)))));
5593
- }
5531
+
5532
+ .pf-c-divider.pf-m-inset-xs {
5533
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5594
5534
  }
5595
- @media (min-width: 1450px) {
5596
- .pf-c-description-list[class*=pf-m-horizontal] {
5597
- --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-c-description-list--m-horizontal__term--width-on-xl, var(--pf-c-description-list--m-horizontal__term--width-on-lg, var(--pf-c-description-list--m-horizontal__term--width-on-md, var(--pf-c-description-list--m-horizontal__term--width-on-sm, var(--pf-c-description-list--m-horizontal__term--width))))));
5598
- }
5535
+
5536
+ .pf-c-divider.pf-m-inset-sm {
5537
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5599
5538
  }
5600
- .pf-c-description-list.pf-m-inline-grid {
5601
- display: inline-grid;
5539
+
5540
+ .pf-c-divider.pf-m-inset-md {
5541
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5602
5542
  }
5603
5543
 
5604
- .pf-c-description-list.pf-m-auto-column-widths {
5605
- --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
5544
+ .pf-c-divider.pf-m-inset-lg {
5545
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5606
5546
  }
5607
5547
 
5608
- .pf-c-description-list.pf-m-auto-fit {
5609
- grid-template-columns: repeat(auto-fit, minmax(var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min), 1fr));
5610
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min);
5548
+ .pf-c-divider.pf-m-inset-xl {
5549
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5550
+ }
5551
+
5552
+ .pf-c-divider.pf-m-inset-2xl {
5553
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5554
+ }
5555
+
5556
+ .pf-c-divider.pf-m-inset-3xl {
5557
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5611
5558
  }
5612
5559
 
5613
5560
  @media (min-width: 576px) {
5614
- .pf-c-description-list.pf-m-auto-fit {
5615
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min));
5561
+ .pf-c-divider.pf-m-horizontal-on-sm {
5562
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5563
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5564
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5565
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5566
+ width: 100%;
5567
+ height: auto;
5616
5568
  }
5617
- }
5618
- @media (min-width: 768px) {
5619
- .pf-c-description-list.pf-m-auto-fit {
5620
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)));
5569
+
5570
+ .pf-c-divider.pf-m-horizontal-on-sm::after {
5571
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5621
5572
  }
5622
5573
  }
5623
- @media (min-width: 992px) {
5624
- .pf-c-description-list.pf-m-auto-fit {
5625
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))));
5574
+ @media (min-width: 576px) {
5575
+ .pf-c-divider.pf-m-vertical-on-sm {
5576
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5577
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5578
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5579
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5580
+ width: auto;
5581
+ height: inherit;
5626
5582
  }
5627
- }
5628
- @media (min-width: 1200px) {
5629
- .pf-c-description-list.pf-m-auto-fit {
5630
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min)))));
5583
+
5584
+ .pf-c-divider.pf-m-vertical-on-sm::after {
5585
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5631
5586
  }
5632
5587
  }
5633
- @media (min-width: 1450px) {
5634
- .pf-c-description-list.pf-m-auto-fit {
5635
- --pf-c-description-list--GridTemplateColumns--minmax--min: var(--pf-c-description-list--GridTemplateColumns--min-on-2xl, var(--pf-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-c-description-list--GridTemplateColumns--min-on-md, var(--pf-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-c-description-list--GridTemplateColumns--min))))));
5588
+ @media (min-width: 576px) {
5589
+ .pf-c-divider.pf-m-inset-none-on-sm {
5590
+ --pf-c-divider--after--Inset: 0%;
5636
5591
  }
5637
- }
5638
- .pf-c-description-list.pf-m-compact {
5639
- --pf-c-description-list--RowGap: var(--pf-c-description-list--m-compact--RowGap);
5640
- --pf-c-description-list--ColumnGap: var(--pf-c-description-list--m-compact--ColumnGap);
5641
- }
5642
5592
 
5643
- .pf-c-description-list.pf-m-fluid {
5644
- --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
5645
- }
5593
+ .pf-c-divider.pf-m-inset-xs-on-sm {
5594
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5595
+ }
5646
5596
 
5647
- .pf-c-description-list.pf-m-fill-columns {
5648
- display: block;
5649
- column-count: var(--pf-c-description-list--GridTemplateColumns--count);
5650
- margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
5651
- }
5597
+ .pf-c-divider.pf-m-inset-sm-on-sm {
5598
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5599
+ }
5652
5600
 
5653
- .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
5654
- .pf-c-description-list.pf-m-fill-columns > .pf-c-card {
5655
- display: inline-grid;
5656
- width: 100%;
5657
- margin-bottom: var(--pf-c-description-list--RowGap);
5658
- break-inside: avoid;
5659
- page-break-inside: avoid;
5660
- -webkit-column-break-inside: avoid;
5661
- -moz-column-break-inside: avoid;
5662
- }
5601
+ .pf-c-divider.pf-m-inset-md-on-sm {
5602
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5603
+ }
5663
5604
 
5664
- .pf-c-description-list.pf-m-display-lg {
5665
- --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
5666
- }
5605
+ .pf-c-divider.pf-m-inset-lg-on-sm {
5606
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5607
+ }
5667
5608
 
5668
- .pf-c-description-list.pf-m-display-2xl {
5669
- --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
5670
- }
5609
+ .pf-c-divider.pf-m-inset-xl-on-sm {
5610
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5611
+ }
5671
5612
 
5672
- .pf-c-description-list > .pf-c-card {
5673
- align-self: stretch;
5674
- padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
5675
- }
5613
+ .pf-c-divider.pf-m-inset-2xl-on-sm {
5614
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5615
+ }
5676
5616
 
5677
- .pf-c-description-list__group,
5678
- .pf-c-description-list > .pf-c-card {
5679
- display: grid;
5680
- grid-column: var(--pf-c-description-list__group--GridColumn);
5681
- row-gap: var(--pf-c-description-list__group--RowGap);
5682
- column-gap: var(--pf-c-description-list__group--ColumnGap);
5683
- grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
5684
- grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
5685
- align-items: baseline;
5617
+ .pf-c-divider.pf-m-inset-3xl-on-sm {
5618
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5619
+ }
5686
5620
  }
5621
+ @media (min-width: 768px) {
5622
+ .pf-c-divider.pf-m-horizontal-on-md {
5623
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5624
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5625
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5626
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5627
+ width: 100%;
5628
+ height: auto;
5629
+ }
5687
5630
 
5688
- .pf-c-description-list__term,
5689
- .pf-c-description-list__description {
5690
- min-width: 0;
5691
- text-align: left;
5692
- overflow-wrap: break-word;
5631
+ .pf-c-divider.pf-m-horizontal-on-md::after {
5632
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5633
+ }
5693
5634
  }
5635
+ @media (min-width: 768px) {
5636
+ .pf-c-divider.pf-m-vertical-on-md {
5637
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5638
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5639
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5640
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5641
+ width: auto;
5642
+ height: inherit;
5643
+ }
5694
5644
 
5695
- .pf-c-description-list__term {
5696
- display: var(--pf-c-description-list__term--Display);
5697
- font-size: var(--pf-c-description-list__term--FontSize);
5698
- font-weight: var(--pf-c-description-list__term--FontWeight);
5699
- line-height: var(--pf-c-description-list__term--LineHeight);
5645
+ .pf-c-divider.pf-m-vertical-on-md::after {
5646
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5647
+ }
5700
5648
  }
5649
+ @media (min-width: 768px) {
5650
+ .pf-c-divider.pf-m-inset-none-on-md {
5651
+ --pf-c-divider--after--Inset: 0%;
5652
+ }
5701
5653
 
5702
- .pf-c-description-list__term .pf-c-description-list__text {
5703
- display: inline;
5654
+ .pf-c-divider.pf-m-inset-xs-on-md {
5655
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5656
+ }
5657
+
5658
+ .pf-c-divider.pf-m-inset-sm-on-md {
5659
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5660
+ }
5661
+
5662
+ .pf-c-divider.pf-m-inset-md-on-md {
5663
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5664
+ }
5665
+
5666
+ .pf-c-divider.pf-m-inset-lg-on-md {
5667
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5668
+ }
5669
+
5670
+ .pf-c-divider.pf-m-inset-xl-on-md {
5671
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5672
+ }
5673
+
5674
+ .pf-c-divider.pf-m-inset-2xl-on-md {
5675
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5676
+ }
5677
+
5678
+ .pf-c-divider.pf-m-inset-3xl-on-md {
5679
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5680
+ }
5704
5681
  }
5682
+ @media (min-width: 992px) {
5683
+ .pf-c-divider.pf-m-horizontal-on-lg {
5684
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5685
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5686
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5687
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5688
+ width: 100%;
5689
+ height: auto;
5690
+ }
5705
5691
 
5706
- .pf-c-description-list__term-icon {
5707
- flex-shrink: 0;
5708
- min-width: var(--pf-c-description-list__term-icon--MinWidth);
5709
- margin-right: var(--pf-c-description-list__term-icon--MarginRight);
5710
- color: var(--pf-c-description-list__term-icon--Color);
5692
+ .pf-c-divider.pf-m-horizontal-on-lg::after {
5693
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5694
+ }
5711
5695
  }
5696
+ @media (min-width: 992px) {
5697
+ .pf-c-divider.pf-m-vertical-on-lg {
5698
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5699
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5700
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5701
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5702
+ width: auto;
5703
+ height: inherit;
5704
+ }
5712
5705
 
5713
- .pf-c-description-list__description {
5714
- font-size: var(--pf-c-description-list__description--FontSize, inherit);
5706
+ .pf-c-divider.pf-m-vertical-on-lg::after {
5707
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5708
+ }
5715
5709
  }
5710
+ @media (min-width: 992px) {
5711
+ .pf-c-divider.pf-m-inset-none-on-lg {
5712
+ --pf-c-divider--after--Inset: 0%;
5713
+ }
5716
5714
 
5717
- .pf-c-description-list__text {
5718
- min-width: 0;
5719
- }
5715
+ .pf-c-divider.pf-m-inset-xs-on-lg {
5716
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5717
+ }
5720
5718
 
5721
- .pf-c-description-list__text.pf-m-help-text {
5722
- text-decoration: underline;
5723
- cursor: pointer;
5724
- text-decoration-style: dashed;
5725
- text-decoration-thickness: var(--pf-c-description-list__text--m-help-text--TextDecorationThickness);
5726
- text-underline-offset: var(--pf-c-description-list__text--m-help-text--TextDecorationOffset);
5727
- text-decoration-color: var(--pf-c-description-list__text--m-help-text--TextDecorationColor);
5728
- }
5719
+ .pf-c-divider.pf-m-inset-sm-on-lg {
5720
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5721
+ }
5729
5722
 
5730
- .pf-c-description-list__text.pf-m-help-text:hover {
5731
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--hover--TextDecorationColor);
5732
- }
5723
+ .pf-c-divider.pf-m-inset-md-on-lg {
5724
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5725
+ }
5733
5726
 
5734
- .pf-c-description-list__text.pf-m-help-text:focus {
5735
- --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-c-description-list__text--m-help-text--focus--TextDecorationColor);
5736
- }
5727
+ .pf-c-divider.pf-m-inset-lg-on-lg {
5728
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5729
+ }
5737
5730
 
5738
- .pf-c-description-list.pf-m-1-col {
5739
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5740
- }
5731
+ .pf-c-divider.pf-m-inset-xl-on-lg {
5732
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5733
+ }
5741
5734
 
5742
- .pf-c-description-list.pf-m-2-col {
5743
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5744
- }
5735
+ .pf-c-divider.pf-m-inset-2xl-on-lg {
5736
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5737
+ }
5745
5738
 
5746
- .pf-c-description-list.pf-m-3-col {
5747
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5739
+ .pf-c-divider.pf-m-inset-3xl-on-lg {
5740
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5741
+ }
5748
5742
  }
5743
+ @media (min-width: 1200px) {
5744
+ .pf-c-divider.pf-m-horizontal-on-xl {
5745
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5746
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5747
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5748
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5749
+ width: 100%;
5750
+ height: auto;
5751
+ }
5749
5752
 
5750
- .pf-c-description-list.pf-m-horizontal {
5751
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5752
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5753
+ .pf-c-divider.pf-m-horizontal-on-xl::after {
5754
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5755
+ }
5753
5756
  }
5757
+ @media (min-width: 1200px) {
5758
+ .pf-c-divider.pf-m-vertical-on-xl {
5759
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5760
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5761
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5762
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5763
+ width: auto;
5764
+ height: inherit;
5765
+ }
5754
5766
 
5755
- .pf-c-description-list.pf-m-vertical {
5756
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5757
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5767
+ .pf-c-divider.pf-m-vertical-on-xl::after {
5768
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5769
+ }
5758
5770
  }
5759
-
5760
- @media (min-width: 576px) {
5761
- .pf-c-description-list.pf-m-1-col-on-sm {
5762
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5771
+ @media (min-width: 1200px) {
5772
+ .pf-c-divider.pf-m-inset-none-on-xl {
5773
+ --pf-c-divider--after--Inset: 0%;
5763
5774
  }
5764
5775
 
5765
- .pf-c-description-list.pf-m-2-col-on-sm {
5766
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5776
+ .pf-c-divider.pf-m-inset-xs-on-xl {
5777
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5767
5778
  }
5768
5779
 
5769
- .pf-c-description-list.pf-m-3-col-on-sm {
5770
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5780
+ .pf-c-divider.pf-m-inset-sm-on-xl {
5781
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5771
5782
  }
5772
5783
 
5773
- .pf-c-description-list.pf-m-horizontal-on-sm {
5774
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5775
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5784
+ .pf-c-divider.pf-m-inset-md-on-xl {
5785
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5776
5786
  }
5777
5787
 
5778
- .pf-c-description-list.pf-m-vertical-on-sm {
5779
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5780
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5781
- }
5782
- }
5783
- @media (min-width: 768px) {
5784
- .pf-c-description-list.pf-m-1-col-on-md {
5785
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5788
+ .pf-c-divider.pf-m-inset-lg-on-xl {
5789
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5786
5790
  }
5787
5791
 
5788
- .pf-c-description-list.pf-m-2-col-on-md {
5789
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5792
+ .pf-c-divider.pf-m-inset-xl-on-xl {
5793
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5790
5794
  }
5791
5795
 
5792
- .pf-c-description-list.pf-m-3-col-on-md {
5793
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5796
+ .pf-c-divider.pf-m-inset-2xl-on-xl {
5797
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5794
5798
  }
5795
5799
 
5796
- .pf-c-description-list.pf-m-horizontal-on-md {
5797
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5798
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5800
+ .pf-c-divider.pf-m-inset-3xl-on-xl {
5801
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5802
+ }
5803
+ }
5804
+ @media (min-width: 1450px) {
5805
+ .pf-c-divider.pf-m-horizontal-on-2xl {
5806
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5807
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5808
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5809
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5810
+ width: 100%;
5811
+ height: auto;
5799
5812
  }
5800
5813
 
5801
- .pf-c-description-list.pf-m-vertical-on-md {
5802
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5803
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5814
+ .pf-c-divider.pf-m-horizontal-on-2xl::after {
5815
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5804
5816
  }
5805
5817
  }
5806
- @media (min-width: 992px) {
5807
- .pf-c-description-list.pf-m-1-col-on-lg {
5808
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5818
+ @media (min-width: 1450px) {
5819
+ .pf-c-divider.pf-m-vertical-on-2xl {
5820
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5821
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5822
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5823
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5824
+ width: auto;
5825
+ height: inherit;
5809
5826
  }
5810
5827
 
5811
- .pf-c-description-list.pf-m-2-col-on-lg {
5812
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5828
+ .pf-c-divider.pf-m-vertical-on-2xl::after {
5829
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
5813
5830
  }
5814
-
5815
- .pf-c-description-list.pf-m-3-col-on-lg {
5816
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5831
+ }
5832
+ @media (min-width: 1450px) {
5833
+ .pf-c-divider.pf-m-inset-none-on-2xl {
5834
+ --pf-c-divider--after--Inset: 0%;
5817
5835
  }
5818
5836
 
5819
- .pf-c-description-list.pf-m-horizontal-on-lg {
5820
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5821
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5837
+ .pf-c-divider.pf-m-inset-xs-on-2xl {
5838
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5822
5839
  }
5823
5840
 
5824
- .pf-c-description-list.pf-m-vertical-on-lg {
5825
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5826
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5841
+ .pf-c-divider.pf-m-inset-sm-on-2xl {
5842
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5827
5843
  }
5828
- }
5829
- @media (min-width: 1200px) {
5830
- .pf-c-description-list.pf-m-1-col-on-xl {
5831
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5844
+
5845
+ .pf-c-divider.pf-m-inset-md-on-2xl {
5846
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5832
5847
  }
5833
5848
 
5834
- .pf-c-description-list.pf-m-2-col-on-xl {
5835
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5849
+ .pf-c-divider.pf-m-inset-lg-on-2xl {
5850
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5836
5851
  }
5837
5852
 
5838
- .pf-c-description-list.pf-m-3-col-on-xl {
5839
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5853
+ .pf-c-divider.pf-m-inset-xl-on-2xl {
5854
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5840
5855
  }
5841
5856
 
5842
- .pf-c-description-list.pf-m-horizontal-on-xl {
5843
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5844
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5857
+ .pf-c-divider.pf-m-inset-2xl-on-2xl {
5858
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5845
5859
  }
5846
5860
 
5847
- .pf-c-description-list.pf-m-vertical-on-xl {
5848
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5849
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5861
+ .pf-c-divider.pf-m-inset-3xl-on-2xl {
5862
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5850
5863
  }
5851
5864
  }
5852
- @media (min-width: 1450px) {
5853
- .pf-c-description-list.pf-m-1-col-on-2xl {
5854
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
5865
+ @media screen and (min-width: 768px) {
5866
+ .pf-c-data-list:not([class*=pf-m-grid]) {
5867
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5868
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5869
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5870
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5871
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5872
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5873
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5874
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5875
+ }
5876
+ }
5877
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
5878
+ .pf-c-data-list:not([class*=pf-m-grid]) {
5879
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5880
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5881
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5882
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5883
+ }
5884
+ }
5885
+ @media screen and (min-width: 768px) {
5886
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
5887
+ display: flex;
5888
+ flex-wrap: wrap;
5889
+ flex-grow: 1;
5890
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5891
+ }
5892
+ }
5893
+ @media screen and (min-width: 768px) {
5894
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5895
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5896
+ }
5897
+
5898
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
5899
+ flex: 1;
5900
+ order: initial;
5855
5901
  }
5856
5902
 
5857
- .pf-c-description-list.pf-m-2-col-on-2xl {
5858
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-2-col--GridTemplateColumns--count);
5903
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
5904
+ margin-left: auto;
5859
5905
  }
5860
5906
 
5861
- .pf-c-description-list.pf-m-3-col-on-2xl {
5862
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-3-col--GridTemplateColumns--count);
5907
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
5908
+ flex: none;
5863
5909
  }
5864
5910
 
5865
- .pf-c-description-list.pf-m-horizontal-on-2xl {
5866
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
5867
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
5911
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
5912
+ flex-grow: 2;
5868
5913
  }
5869
5914
 
5870
- .pf-c-description-list.pf-m-vertical-on-2xl {
5871
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5872
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5915
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
5916
+ flex-grow: 3;
5873
5917
  }
5874
- }
5875
- .pf-c-divider {
5876
- --pf-hidden-visible--visible--Visibility: visible;
5877
- --pf-hidden-visible--hidden--Display: none;
5878
- --pf-hidden-visible--hidden--Visibility: hidden;
5879
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5880
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5881
- display: var(--pf-hidden-visible--Display);
5882
- visibility: var(--pf-hidden-visible--Visibility);
5883
- }
5884
-
5885
- .pf-m-hidden.pf-c-divider {
5886
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5887
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5888
- }
5889
5918
 
5890
- @media screen and (min-width: 576px) {
5891
- .pf-m-hidden-on-sm.pf-c-divider {
5892
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5893
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5919
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
5920
+ flex-grow: 4;
5894
5921
  }
5895
5922
 
5896
- .pf-m-visible-on-sm.pf-c-divider {
5897
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5898
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5923
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
5924
+ flex-grow: 5;
5899
5925
  }
5900
5926
  }
5901
5927
  @media screen and (min-width: 768px) {
5902
- .pf-m-hidden-on-md.pf-c-divider {
5903
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5904
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5905
- }
5906
-
5907
- .pf-m-visible-on-md.pf-c-divider {
5908
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5909
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5928
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
5929
+ max-height: initial;
5930
+ overflow-y: visible;
5910
5931
  }
5911
5932
  }
5912
- @media screen and (min-width: 992px) {
5913
- .pf-m-hidden-on-lg.pf-c-divider {
5914
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5915
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5916
- }
5917
-
5918
- .pf-m-visible-on-lg.pf-c-divider {
5919
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5920
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5933
+ @media screen and (min-width: 0) {
5934
+ .pf-c-data-list.pf-m-grid-none {
5935
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5936
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5937
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5938
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5939
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5940
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5941
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5942
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5921
5943
  }
5922
5944
  }
5923
- @media screen and (min-width: 1200px) {
5924
- .pf-m-hidden-on-xl.pf-c-divider {
5925
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5926
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5945
+ @media screen and (min-width: 0) and (min-width: 1200px) {
5946
+ .pf-c-data-list.pf-m-grid-none {
5947
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5948
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5949
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5950
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5927
5951
  }
5928
-
5929
- .pf-m-visible-on-xl.pf-c-divider {
5930
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5931
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5952
+ }
5953
+ @media screen and (min-width: 0) {
5954
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
5955
+ display: flex;
5956
+ flex-wrap: wrap;
5957
+ flex-grow: 1;
5958
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5932
5959
  }
5933
5960
  }
5934
- @media screen and (min-width: 1450px) {
5935
- .pf-m-hidden-on-2xl.pf-c-divider {
5936
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5937
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5961
+ @media screen and (min-width: 0) {
5962
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5963
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
5938
5964
  }
5939
5965
 
5940
- .pf-m-visible-on-2xl.pf-c-divider {
5941
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5942
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5966
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
5967
+ flex: 1;
5968
+ order: initial;
5943
5969
  }
5944
- }
5945
- .pf-c-divider {
5946
- --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
5947
- --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
5948
- --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
5949
- --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
5950
- --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
5951
- --pf-c-divider--after--FlexBasis: 100%;
5952
- --pf-c-divider--after--Inset: 0%;
5953
- --pf-c-divider--m-vertical--after--FlexBasis: 100%;
5954
- --pf-c-divider--m-horizontal--Display: flex;
5955
- --pf-c-divider--m-horizontal--FlexDirection: row;
5956
- --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
5957
- --pf-c-divider--m-horizontal--after--Width: auto;
5958
- --pf-c-divider--m-vertical--Display: inline-flex;
5959
- --pf-c-divider--m-vertical--FlexDirection: column;
5960
- --pf-c-divider--m-vertical--after--Height: auto;
5961
- --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
5962
- --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
5963
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5964
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5965
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5966
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5967
- width: 100%;
5968
- height: auto;
5969
- display: var(--pf-c-divider--Display);
5970
- flex-direction: var(--pf-c-divider--FlexDirection);
5971
- align-items: center;
5972
- align-self: stretch;
5973
- flex-shrink: 0;
5974
- justify-content: center;
5975
- border: 0;
5976
- }
5977
-
5978
- .pf-c-divider::after {
5979
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5980
- }
5981
-
5982
- .pf-c-divider::after {
5983
- align-self: stretch;
5984
- width: var(--pf-c-divider--after--Width);
5985
- height: var(--pf-c-divider--after--Height);
5986
- content: "";
5987
- background-color: var(--pf-c-divider--after--BackgroundColor);
5988
- justify-self: center;
5989
- }
5990
-
5991
- .pf-c-divider.pf-m-vertical {
5992
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5993
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5994
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5995
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5996
- width: auto;
5997
- height: inherit;
5998
- }
5999
-
6000
- .pf-c-divider.pf-m-vertical::after {
6001
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6002
- }
6003
-
6004
- .pf-c-divider.pf-m-inset-none {
6005
- --pf-c-divider--after--Inset: 0%;
6006
- }
6007
-
6008
- .pf-c-divider.pf-m-inset-xs {
6009
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6010
- }
6011
5970
 
6012
- .pf-c-divider.pf-m-inset-sm {
6013
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6014
- }
5971
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
5972
+ margin-left: auto;
5973
+ }
6015
5974
 
6016
- .pf-c-divider.pf-m-inset-md {
6017
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6018
- }
5975
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
5976
+ flex: none;
5977
+ }
6019
5978
 
6020
- .pf-c-divider.pf-m-inset-lg {
6021
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6022
- }
5979
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
5980
+ flex-grow: 2;
5981
+ }
6023
5982
 
6024
- .pf-c-divider.pf-m-inset-xl {
6025
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6026
- }
5983
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
5984
+ flex-grow: 3;
5985
+ }
6027
5986
 
6028
- .pf-c-divider.pf-m-inset-2xl {
6029
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6030
- }
5987
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
5988
+ flex-grow: 4;
5989
+ }
6031
5990
 
6032
- .pf-c-divider.pf-m-inset-3xl {
6033
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5991
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
5992
+ flex-grow: 5;
5993
+ }
6034
5994
  }
6035
-
6036
- @media (min-width: 576px) {
6037
- .pf-c-divider.pf-m-horizontal-on-sm {
6038
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6039
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6040
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6041
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6042
- width: 100%;
6043
- height: auto;
5995
+ @media screen and (min-width: 0) {
5996
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
5997
+ max-height: initial;
5998
+ overflow-y: visible;
6044
5999
  }
6045
-
6046
- .pf-c-divider.pf-m-horizontal-on-sm::after {
6047
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6000
+ }
6001
+ @media screen and (min-width: 576px) {
6002
+ .pf-c-data-list.pf-m-grid-sm {
6003
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
6004
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
6005
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
6006
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
6007
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
6008
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
6009
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
6010
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
6048
6011
  }
6049
6012
  }
6050
- @media (min-width: 576px) {
6051
- .pf-c-divider.pf-m-vertical-on-sm {
6052
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6053
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6054
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6055
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6056
- width: auto;
6057
- height: inherit;
6013
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
6014
+ .pf-c-data-list.pf-m-grid-sm {
6015
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
6016
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
6017
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
6018
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
6058
6019
  }
6059
-
6060
- .pf-c-divider.pf-m-vertical-on-sm::after {
6061
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6020
+ }
6021
+ @media screen and (min-width: 576px) {
6022
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
6023
+ display: flex;
6024
+ flex-wrap: wrap;
6025
+ flex-grow: 1;
6026
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
6062
6027
  }
6063
6028
  }
6064
- @media (min-width: 576px) {
6065
- .pf-c-divider.pf-m-inset-none-on-sm {
6066
- --pf-c-divider--after--Inset: 0%;
6029
+ @media screen and (min-width: 576px) {
6030
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
6031
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
6067
6032
  }
6068
6033
 
6069
- .pf-c-divider.pf-m-inset-xs-on-sm {
6070
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6034
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
6035
+ flex: 1;
6036
+ order: initial;
6071
6037
  }
6072
6038
 
6073
- .pf-c-divider.pf-m-inset-sm-on-sm {
6074
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6039
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
6040
+ margin-left: auto;
6075
6041
  }
6076
6042
 
6077
- .pf-c-divider.pf-m-inset-md-on-sm {
6078
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6043
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
6044
+ flex: none;
6079
6045
  }
6080
6046
 
6081
- .pf-c-divider.pf-m-inset-lg-on-sm {
6082
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6047
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
6048
+ flex-grow: 2;
6083
6049
  }
6084
6050
 
6085
- .pf-c-divider.pf-m-inset-xl-on-sm {
6086
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6051
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
6052
+ flex-grow: 3;
6087
6053
  }
6088
6054
 
6089
- .pf-c-divider.pf-m-inset-2xl-on-sm {
6090
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6055
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
6056
+ flex-grow: 4;
6091
6057
  }
6092
6058
 
6093
- .pf-c-divider.pf-m-inset-3xl-on-sm {
6094
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6059
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
6060
+ flex-grow: 5;
6095
6061
  }
6096
6062
  }
6097
- @media (min-width: 768px) {
6098
- .pf-c-divider.pf-m-horizontal-on-md {
6099
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6100
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6101
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6102
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6103
- width: 100%;
6104
- height: auto;
6063
+ @media screen and (min-width: 576px) {
6064
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
6065
+ max-height: initial;
6066
+ overflow-y: visible;
6105
6067
  }
6106
-
6107
- .pf-c-divider.pf-m-horizontal-on-md::after {
6108
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6068
+ }
6069
+ @media screen and (min-width: 768px) {
6070
+ .pf-c-data-list.pf-m-grid-md {
6071
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
6072
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
6073
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
6074
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
6075
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
6076
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
6077
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
6078
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
6109
6079
  }
6110
6080
  }
6111
- @media (min-width: 768px) {
6112
- .pf-c-divider.pf-m-vertical-on-md {
6113
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6114
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6115
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6116
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6117
- width: auto;
6118
- height: inherit;
6081
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
6082
+ .pf-c-data-list.pf-m-grid-md {
6083
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
6084
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
6085
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
6086
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
6119
6087
  }
6120
-
6121
- .pf-c-divider.pf-m-vertical-on-md::after {
6122
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6088
+ }
6089
+ @media screen and (min-width: 768px) {
6090
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
6091
+ display: flex;
6092
+ flex-wrap: wrap;
6093
+ flex-grow: 1;
6094
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
6123
6095
  }
6124
6096
  }
6125
- @media (min-width: 768px) {
6126
- .pf-c-divider.pf-m-inset-none-on-md {
6127
- --pf-c-divider--after--Inset: 0%;
6097
+ @media screen and (min-width: 768px) {
6098
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
6099
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
6128
6100
  }
6129
6101
 
6130
- .pf-c-divider.pf-m-inset-xs-on-md {
6131
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6102
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
6103
+ flex: 1;
6104
+ order: initial;
6132
6105
  }
6133
6106
 
6134
- .pf-c-divider.pf-m-inset-sm-on-md {
6135
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6107
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
6108
+ margin-left: auto;
6136
6109
  }
6137
6110
 
6138
- .pf-c-divider.pf-m-inset-md-on-md {
6139
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6111
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
6112
+ flex: none;
6140
6113
  }
6141
6114
 
6142
- .pf-c-divider.pf-m-inset-lg-on-md {
6143
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6115
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
6116
+ flex-grow: 2;
6144
6117
  }
6145
6118
 
6146
- .pf-c-divider.pf-m-inset-xl-on-md {
6147
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6119
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
6120
+ flex-grow: 3;
6148
6121
  }
6149
6122
 
6150
- .pf-c-divider.pf-m-inset-2xl-on-md {
6151
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6123
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
6124
+ flex-grow: 4;
6152
6125
  }
6153
6126
 
6154
- .pf-c-divider.pf-m-inset-3xl-on-md {
6155
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6127
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
6128
+ flex-grow: 5;
6156
6129
  }
6157
6130
  }
6158
- @media (min-width: 992px) {
6159
- .pf-c-divider.pf-m-horizontal-on-lg {
6160
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6161
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6162
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6163
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6164
- width: 100%;
6165
- height: auto;
6131
+ @media screen and (min-width: 768px) {
6132
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
6133
+ max-height: initial;
6134
+ overflow-y: visible;
6166
6135
  }
6167
-
6168
- .pf-c-divider.pf-m-horizontal-on-lg::after {
6169
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6136
+ }
6137
+ @media screen and (min-width: 992px) {
6138
+ .pf-c-data-list.pf-m-grid-lg {
6139
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
6140
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
6141
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
6142
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
6143
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
6144
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
6145
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
6146
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
6170
6147
  }
6171
6148
  }
6172
- @media (min-width: 992px) {
6173
- .pf-c-divider.pf-m-vertical-on-lg {
6174
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6175
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6176
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6177
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6178
- width: auto;
6179
- height: inherit;
6149
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
6150
+ .pf-c-data-list.pf-m-grid-lg {
6151
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
6152
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
6153
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
6154
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
6180
6155
  }
6181
-
6182
- .pf-c-divider.pf-m-vertical-on-lg::after {
6183
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6156
+ }
6157
+ @media screen and (min-width: 992px) {
6158
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
6159
+ display: flex;
6160
+ flex-wrap: wrap;
6161
+ flex-grow: 1;
6162
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
6184
6163
  }
6185
6164
  }
6186
- @media (min-width: 992px) {
6187
- .pf-c-divider.pf-m-inset-none-on-lg {
6188
- --pf-c-divider--after--Inset: 0%;
6165
+ @media screen and (min-width: 992px) {
6166
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
6167
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
6189
6168
  }
6190
6169
 
6191
- .pf-c-divider.pf-m-inset-xs-on-lg {
6192
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6170
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
6171
+ flex: 1;
6172
+ order: initial;
6193
6173
  }
6194
6174
 
6195
- .pf-c-divider.pf-m-inset-sm-on-lg {
6196
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6175
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
6176
+ margin-left: auto;
6197
6177
  }
6198
6178
 
6199
- .pf-c-divider.pf-m-inset-md-on-lg {
6200
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6179
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
6180
+ flex: none;
6201
6181
  }
6202
6182
 
6203
- .pf-c-divider.pf-m-inset-lg-on-lg {
6204
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6183
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
6184
+ flex-grow: 2;
6205
6185
  }
6206
6186
 
6207
- .pf-c-divider.pf-m-inset-xl-on-lg {
6208
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6187
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
6188
+ flex-grow: 3;
6209
6189
  }
6210
6190
 
6211
- .pf-c-divider.pf-m-inset-2xl-on-lg {
6212
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6191
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
6192
+ flex-grow: 4;
6213
6193
  }
6214
6194
 
6215
- .pf-c-divider.pf-m-inset-3xl-on-lg {
6216
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6195
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
6196
+ flex-grow: 5;
6217
6197
  }
6218
6198
  }
6219
- @media (min-width: 1200px) {
6220
- .pf-c-divider.pf-m-horizontal-on-xl {
6221
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6222
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6223
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6224
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6225
- width: 100%;
6226
- height: auto;
6227
- }
6228
-
6229
- .pf-c-divider.pf-m-horizontal-on-xl::after {
6230
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6199
+ @media screen and (min-width: 992px) {
6200
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
6201
+ max-height: initial;
6202
+ overflow-y: visible;
6231
6203
  }
6232
6204
  }
6233
- @media (min-width: 1200px) {
6234
- .pf-c-divider.pf-m-vertical-on-xl {
6235
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6236
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6237
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6238
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6239
- width: auto;
6240
- height: inherit;
6205
+ @media screen and (min-width: 1200px) {
6206
+ .pf-c-data-list.pf-m-grid-xl {
6207
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
6208
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
6209
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
6210
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
6211
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
6212
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
6213
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
6214
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
6241
6215
  }
6242
-
6243
- .pf-c-divider.pf-m-vertical-on-xl::after {
6244
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6216
+ }
6217
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
6218
+ .pf-c-data-list.pf-m-grid-xl {
6219
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
6220
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
6221
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
6222
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
6245
6223
  }
6246
6224
  }
6247
- @media (min-width: 1200px) {
6248
- .pf-c-divider.pf-m-inset-none-on-xl {
6249
- --pf-c-divider--after--Inset: 0%;
6225
+ @media screen and (min-width: 1200px) {
6226
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
6227
+ display: flex;
6228
+ flex-wrap: wrap;
6229
+ flex-grow: 1;
6230
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
6231
+ }
6232
+ }
6233
+ @media screen and (min-width: 1200px) {
6234
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
6235
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
6250
6236
  }
6251
6237
 
6252
- .pf-c-divider.pf-m-inset-xs-on-xl {
6253
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6238
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
6239
+ flex: 1;
6240
+ order: initial;
6254
6241
  }
6255
6242
 
6256
- .pf-c-divider.pf-m-inset-sm-on-xl {
6257
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6243
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
6244
+ margin-left: auto;
6258
6245
  }
6259
6246
 
6260
- .pf-c-divider.pf-m-inset-md-on-xl {
6261
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6247
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
6248
+ flex: none;
6262
6249
  }
6263
6250
 
6264
- .pf-c-divider.pf-m-inset-lg-on-xl {
6265
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6251
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
6252
+ flex-grow: 2;
6266
6253
  }
6267
6254
 
6268
- .pf-c-divider.pf-m-inset-xl-on-xl {
6269
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6255
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
6256
+ flex-grow: 3;
6270
6257
  }
6271
6258
 
6272
- .pf-c-divider.pf-m-inset-2xl-on-xl {
6273
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6259
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
6260
+ flex-grow: 4;
6274
6261
  }
6275
6262
 
6276
- .pf-c-divider.pf-m-inset-3xl-on-xl {
6277
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6263
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
6264
+ flex-grow: 5;
6278
6265
  }
6279
6266
  }
6280
- @media (min-width: 1450px) {
6281
- .pf-c-divider.pf-m-horizontal-on-2xl {
6282
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6283
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6284
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6285
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6286
- width: 100%;
6287
- height: auto;
6267
+ @media screen and (min-width: 1200px) {
6268
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
6269
+ max-height: initial;
6270
+ overflow-y: visible;
6288
6271
  }
6289
-
6290
- .pf-c-divider.pf-m-horizontal-on-2xl::after {
6291
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6272
+ }
6273
+ @media screen and (min-width: 1450px) {
6274
+ .pf-c-data-list.pf-m-grid-2xl {
6275
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
6276
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
6277
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
6278
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
6279
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
6280
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
6281
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
6282
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
6292
6283
  }
6293
6284
  }
6294
- @media (min-width: 1450px) {
6295
- .pf-c-divider.pf-m-vertical-on-2xl {
6296
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6297
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6298
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6299
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6300
- width: auto;
6301
- height: inherit;
6285
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
6286
+ .pf-c-data-list.pf-m-grid-2xl {
6287
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
6288
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
6289
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
6290
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
6302
6291
  }
6303
-
6304
- .pf-c-divider.pf-m-vertical-on-2xl::after {
6305
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6292
+ }
6293
+ @media screen and (min-width: 1450px) {
6294
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
6295
+ display: flex;
6296
+ flex-wrap: wrap;
6297
+ flex-grow: 1;
6298
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
6306
6299
  }
6307
6300
  }
6308
- @media (min-width: 1450px) {
6309
- .pf-c-divider.pf-m-inset-none-on-2xl {
6310
- --pf-c-divider--after--Inset: 0%;
6301
+ @media screen and (min-width: 1450px) {
6302
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
6303
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
6311
6304
  }
6312
6305
 
6313
- .pf-c-divider.pf-m-inset-xs-on-2xl {
6314
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6306
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
6307
+ flex: 1;
6308
+ order: initial;
6315
6309
  }
6316
6310
 
6317
- .pf-c-divider.pf-m-inset-sm-on-2xl {
6318
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6311
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
6312
+ margin-left: auto;
6319
6313
  }
6320
6314
 
6321
- .pf-c-divider.pf-m-inset-md-on-2xl {
6322
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6315
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
6316
+ flex: none;
6323
6317
  }
6324
6318
 
6325
- .pf-c-divider.pf-m-inset-lg-on-2xl {
6326
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6319
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
6320
+ flex-grow: 2;
6327
6321
  }
6328
6322
 
6329
- .pf-c-divider.pf-m-inset-xl-on-2xl {
6330
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6323
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
6324
+ flex-grow: 3;
6331
6325
  }
6332
6326
 
6333
- .pf-c-divider.pf-m-inset-2xl-on-2xl {
6334
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6327
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
6328
+ flex-grow: 4;
6335
6329
  }
6336
6330
 
6337
- .pf-c-divider.pf-m-inset-3xl-on-2xl {
6338
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6331
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
6332
+ flex-grow: 5;
6333
+ }
6334
+ }
6335
+ @media screen and (min-width: 1450px) {
6336
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
6337
+ max-height: initial;
6338
+ overflow-y: visible;
6339
6339
  }
6340
6340
  }
6341
6341
  .pf-c-drawer {
@@ -8391,82 +8391,229 @@ label.pf-c-check, .pf-c-check__label,
8391
8391
  --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
8392
8392
  }
8393
8393
 
8394
- .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
8395
- font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
8394
+ .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
8395
+ font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
8396
+ }
8397
+
8398
+ .pf-c-empty-state.pf-m-xs .pf-c-button {
8399
+ --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
8400
+ }
8401
+
8402
+ .pf-c-empty-state.pf-m-sm {
8403
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8404
+ }
8405
+
8406
+ .pf-c-empty-state.pf-m-lg {
8407
+ --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8408
+ }
8409
+
8410
+ .pf-c-empty-state.pf-m-xl {
8411
+ --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
8412
+ --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
8413
+ --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
8414
+ --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
8415
+ }
8416
+
8417
+ .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
8418
+ font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
8419
+ }
8420
+
8421
+ .pf-c-empty-state.pf-m-full-height {
8422
+ height: 100%;
8423
+ }
8424
+
8425
+ .pf-c-empty-state__content {
8426
+ max-width: var(--pf-c-empty-state__content--MaxWidth);
8427
+ }
8428
+
8429
+ .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8430
+ font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
8431
+ }
8432
+
8433
+ .pf-c-empty-state__icon {
8434
+ margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
8435
+ font-size: var(--pf-c-empty-state__icon--FontSize);
8436
+ color: var(--pf-c-empty-state__icon--Color);
8437
+ }
8438
+
8439
+ .pf-c-empty-state__body {
8440
+ margin-top: var(--pf-c-empty-state__body--MarginTop);
8441
+ color: var(--pf-c-empty-state__body--Color);
8442
+ }
8443
+
8444
+ .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
8445
+ .pf-c-empty-state__primary {
8446
+ margin-top: var(--pf-c-empty-state__primary--MarginTop);
8447
+ }
8448
+
8449
+ .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
8450
+ .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
8451
+ margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
8452
+ }
8453
+
8454
+ .pf-c-empty-state__secondary {
8455
+ display: flex;
8456
+ flex-wrap: wrap;
8457
+ justify-content: center;
8458
+ margin-top: var(--pf-c-empty-state__secondary--MarginTop);
8459
+ margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
8460
+ }
8461
+
8462
+ .pf-c-empty-state__secondary > * {
8463
+ margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
8464
+ margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
8465
+ margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
8466
+ }
8467
+
8468
+ .pf-m-overpass-font .pf-c-empty-state .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8469
+ font-size: var(--pf-global--FontSize--lg);
8470
+ }
8471
+
8472
+ .pf-c-expandable-section {
8473
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
8474
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
8475
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
8476
+ --pf-c-expandable-section__toggle--PaddingLeft: 0;
8477
+ --pf-c-expandable-section__toggle--MarginTop: 0;
8478
+ --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
8479
+ --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
8480
+ --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
8481
+ --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
8482
+ --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
8483
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
8484
+ --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
8485
+ --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
8486
+ --pf-c-expandable-section__toggle-icon--Rotate: 0;
8487
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
8488
+ --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
8489
+ --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
8490
+ --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
8491
+ --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
8492
+ --pf-c-expandable-section__content--MaxWidth: auto;
8493
+ --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
8494
+ --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
8495
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
8496
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
8497
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
8498
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
8499
+ --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
8500
+ --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
8501
+ --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
8502
+ --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
8503
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
8504
+ --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
8505
+ --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
8506
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
8507
+ --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
8508
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
8509
+ }
8510
+
8511
+ .pf-c-expandable-section.pf-m-expanded {
8512
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
8513
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
8514
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
8515
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
8516
+ }
8517
+
8518
+ .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
8519
+ --pf-c-expandable-section__content--MarginTop: 0;
8396
8520
  }
8397
8521
 
8398
- .pf-c-empty-state.pf-m-xs .pf-c-button {
8399
- --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
8522
+ .pf-c-expandable-section.pf-m-limit-width {
8523
+ --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
8400
8524
  }
8401
8525
 
8402
- .pf-c-empty-state.pf-m-sm {
8403
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
8526
+ .pf-c-expandable-section.pf-m-display-lg {
8527
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
8528
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
8529
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
8530
+ --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
8531
+ --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
8532
+ --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
8533
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
8534
+ --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
8535
+ position: relative;
8536
+ box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
8404
8537
  }
8405
8538
 
8406
- .pf-c-empty-state.pf-m-lg {
8407
- --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-lg__content--MaxWidth);
8539
+ .pf-c-expandable-section.pf-m-display-lg::after {
8540
+ position: absolute;
8541
+ top: 0;
8542
+ bottom: 0;
8543
+ left: 0;
8544
+ width: var(--pf-c-expandable-section--m-display-lg--after--Width);
8545
+ content: "";
8546
+ background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
8408
8547
  }
8409
8548
 
8410
- .pf-c-empty-state.pf-m-xl {
8411
- --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
8412
- --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
8413
- --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
8414
- --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
8549
+ .pf-c-expandable-section.pf-m-indented {
8550
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
8415
8551
  }
8416
8552
 
8417
- .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
8418
- font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
8553
+ .pf-c-expandable-section.pf-m-truncate {
8554
+ --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
8555
+ --pf-c-expandable-section__toggle--PaddingTop: 0;
8556
+ --pf-c-expandable-section__toggle--PaddingRight: 0;
8557
+ --pf-c-expandable-section__toggle--PaddingBottom: 0;
8558
+ --pf-c-expandable-section__toggle-text--MarginLeft: 0;
8419
8559
  }
8420
8560
 
8421
- .pf-c-empty-state.pf-m-full-height {
8422
- height: 100%;
8561
+ .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
8562
+ display: -webkit-box;
8563
+ -webkit-box-orient: vertical;
8564
+ -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
8565
+ overflow: hidden;
8423
8566
  }
8424
8567
 
8425
- .pf-c-empty-state__content {
8426
- max-width: var(--pf-c-empty-state__content--MaxWidth);
8568
+ .pf-c-expandable-section.pf-m-detached {
8569
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
8427
8570
  }
8428
8571
 
8429
- .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8430
- font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
8572
+ .pf-c-expandable-section__toggle {
8573
+ display: flex;
8574
+ padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
8575
+ margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
8576
+ color: var(--pf-c-expandable-section__toggle--Color);
8577
+ border: none;
8431
8578
  }
8432
8579
 
8433
- .pf-c-empty-state__icon {
8434
- margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
8435
- font-size: var(--pf-c-empty-state__icon--FontSize);
8436
- color: var(--pf-c-empty-state__icon--Color);
8580
+ .pf-c-expandable-section__toggle:hover {
8581
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
8437
8582
  }
8438
8583
 
8439
- .pf-c-empty-state__body {
8440
- margin-top: var(--pf-c-empty-state__body--MarginTop);
8441
- color: var(--pf-c-empty-state__body--Color);
8584
+ .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
8585
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
8442
8586
  }
8443
8587
 
8444
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
8445
- .pf-c-empty-state__primary {
8446
- margin-top: var(--pf-c-empty-state__primary--MarginTop);
8588
+ .pf-c-expandable-section__toggle:focus {
8589
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
8447
8590
  }
8448
8591
 
8449
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
8450
- .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
8451
- margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
8592
+ .pf-c-expandable-section__toggle-icon {
8593
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
8594
+ color: var(--pf-c-expandable-section__toggle-icon--Color);
8595
+ transition: var(--pf-c-expandable-section__toggle-icon--Transition);
8596
+ transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
8452
8597
  }
8453
8598
 
8454
- .pf-c-empty-state__secondary {
8455
- display: flex;
8456
- flex-wrap: wrap;
8457
- justify-content: center;
8458
- margin-top: var(--pf-c-empty-state__secondary--MarginTop);
8459
- margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
8599
+ .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
8600
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
8460
8601
  }
8461
8602
 
8462
- .pf-c-empty-state__secondary > * {
8463
- margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
8464
- margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
8465
- margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
8603
+ .pf-c-expandable-section__toggle-text {
8604
+ margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
8466
8605
  }
8467
8606
 
8468
- .pf-m-overpass-font .pf-c-empty-state .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
8469
- font-size: var(--pf-global--FontSize--lg);
8607
+ .pf-c-expandable-section__content {
8608
+ max-width: var(--pf-c-expandable-section__content--MaxWidth);
8609
+ padding-right: var(--pf-c-expandable-section__content--PaddingRight);
8610
+ padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
8611
+ padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
8612
+ margin-top: var(--pf-c-expandable-section__content--MarginTop);
8613
+ }
8614
+
8615
+ .pf-m-overpass-font .pf-c-expandable-section__toggle {
8616
+ font-weight: var(--pf-global--FontWeight--semi-bold);
8470
8617
  }
8471
8618
 
8472
8619
  .pf-c-file-upload {
@@ -9009,251 +9156,104 @@ label.pf-c-check, .pf-c-check__label,
9009
9156
  --pf-c-form__field-group--BorderTopWidth: 0;
9010
9157
  }
9011
9158
 
9012
- .pf-c-form__field-group + .pf-c-form__field-group {
9013
- margin-top: var(--pf-c-form__field-group--field-group--MarginTop);
9014
- }
9015
-
9016
- .pf-c-form__field-group .pf-c-form__field-group {
9017
- --pf-c-form__field-group-body--GridColumn: var(--pf-c-form__field-group__field-group__field-group-body--GridColumn);
9018
- --pf-c-form__field-group-toggle--PaddingTop: var(--pf-c-form__field-group__field-group__field-group-toggle--PaddingTop);
9019
- --pf-c-form__field-group-header--PaddingTop: var(--pf-c-form__field-group__field-group__field-group-header--PaddingTop);
9020
- --pf-c-form__field-group-header--PaddingBottom: var(--pf-c-form__field-group__field-group__field-group-header--PaddingBottom);
9021
- --pf-c-form__field-group-body--PaddingTop: 0;
9022
- }
9023
-
9024
- .pf-c-form__field-group .pf-c-form__field-group .pf-c-form__field-group-toggle ~ .pf-c-form__field-group-body {
9025
- --pf-c-form__field-group-body--GridColumn: var(--pf-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn);
9026
- }
9027
-
9028
- .pf-c-form__field-group.pf-m-expanded > .pf-c-form__field-group-toggle {
9029
- --pf-c-form__field-group-toggle-icon--Rotate: var(--pf-c-form__field-group--m-expanded__toggle-icon--Rotate);
9030
- }
9031
-
9032
- .pf-c-form__field-group-toggle {
9033
- grid-column: 1/2;
9034
- grid-row: 1/2;
9035
- padding-top: var(--pf-c-form__field-group-toggle--PaddingTop);
9036
- padding-right: var(--pf-c-form__field-group-toggle--PaddingRight);
9037
- }
9038
-
9039
- .pf-c-form__field-group-toggle + .pf-c-form__field-group-header {
9040
- --pf-c-form__field-group-header--GridColumn: var(--pf-c-form__field-group-toggle--field-group-header--GridColumn);
9041
- }
9042
-
9043
- .pf-c-form__field-group-toggle-button {
9044
- margin-top: var(--pf-c-form__field-group-toggle-button--MarginTop);
9045
- margin-bottom: var(--pf-c-form__field-group-toggle-button--MarginBottom);
9046
- }
9047
-
9048
- .pf-c-form__field-group-toggle-icon {
9049
- display: inline-block;
9050
- min-width: var(--pf-c-form__field-group-toggle-icon--MinWidth);
9051
- text-align: center;
9052
- transition: var(--pf-c-form__field-group-toggle-icon--Transition);
9053
- transform: rotate(var(--pf-c-form__field-group-toggle-icon--Rotate));
9054
- }
9055
-
9056
- .pf-c-form__field-group-header {
9057
- grid-column: var(--pf-c-form__field-group-header--GridColumn);
9058
- grid-row: 1/2;
9059
- display: flex;
9060
- align-items: flex-start;
9061
- padding-top: var(--pf-c-form__field-group-header--PaddingTop);
9062
- padding-bottom: var(--pf-c-form__field-group-header--PaddingBottom);
9063
- }
9064
-
9065
- .pf-c-form__field-group-header-main {
9066
- display: flex;
9067
- flex-direction: column;
9068
- flex-grow: 1;
9069
- }
9070
-
9071
- .pf-c-form__field-group-header-title {
9072
- display: flex;
9073
- }
9074
-
9075
- .pf-c-form__field-group-header-title-text {
9076
- flex-grow: 1;
9077
- }
9078
-
9079
- .pf-c-form__field-group-header-description {
9080
- margin-top: var(--pf-c-form__field-group-header-description--MarginTop);
9081
- color: var(--pf-c-form__field-group-header-description--Color);
9082
- }
9083
-
9084
- .pf-c-form__field-group-header-actions {
9085
- margin-top: var(--pf-c-form__field-group-header-actions--MarginTop);
9086
- margin-bottom: var(--pf-c-form__field-group-header-actions--MarginBottom);
9087
- margin-left: var(--pf-c-form__field-group-header-actions--MarginLeft);
9088
- white-space: nowrap;
9089
- }
9090
-
9091
- .pf-c-form__field-group-body {
9092
- grid-column: var(--pf-c-form__field-group-body--GridColumn);
9093
- display: grid;
9094
- gap: var(--pf-c-form__field-group-body--Gap);
9095
- padding-top: var(--pf-c-form__field-group-body--PaddingTop);
9096
- padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
9097
- }
9098
-
9099
- .pf-c-form__field-group-body > .pf-c-form__field-group:first-child {
9100
- --pf-c-form__field-group-toggle--PaddingTop: 0;
9101
- --pf-c-form__field-group-header--PaddingTop: 0;
9102
- }
9103
-
9104
- .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
9105
- margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
9106
- }
9107
-
9108
- :where(.pf-theme-dark) .pf-c-form {
9109
- --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9110
- }
9111
-
9112
- .pf-c-expandable-section {
9113
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
9114
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
9115
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
9116
- --pf-c-expandable-section__toggle--PaddingLeft: 0;
9117
- --pf-c-expandable-section__toggle--MarginTop: 0;
9118
- --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
9119
- --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
9120
- --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
9121
- --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
9122
- --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
9123
- --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
9124
- --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
9125
- --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
9126
- --pf-c-expandable-section__toggle-icon--Rotate: 0;
9127
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
9128
- --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
9129
- --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
9130
- --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
9131
- --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
9132
- --pf-c-expandable-section__content--MaxWidth: auto;
9133
- --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
9134
- --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
9135
- --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
9136
- --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
9137
- --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
9138
- --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
9139
- --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
9140
- --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
9141
- --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
9142
- --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
9143
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
9144
- --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
9145
- --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
9146
- --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
9147
- --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
9148
- --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
9149
- }
9150
-
9151
- .pf-c-expandable-section.pf-m-expanded {
9152
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
9153
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
9154
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
9155
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
9159
+ .pf-c-form__field-group + .pf-c-form__field-group {
9160
+ margin-top: var(--pf-c-form__field-group--field-group--MarginTop);
9156
9161
  }
9157
9162
 
9158
- .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
9159
- --pf-c-expandable-section__content--MarginTop: 0;
9163
+ .pf-c-form__field-group .pf-c-form__field-group {
9164
+ --pf-c-form__field-group-body--GridColumn: var(--pf-c-form__field-group__field-group__field-group-body--GridColumn);
9165
+ --pf-c-form__field-group-toggle--PaddingTop: var(--pf-c-form__field-group__field-group__field-group-toggle--PaddingTop);
9166
+ --pf-c-form__field-group-header--PaddingTop: var(--pf-c-form__field-group__field-group__field-group-header--PaddingTop);
9167
+ --pf-c-form__field-group-header--PaddingBottom: var(--pf-c-form__field-group__field-group__field-group-header--PaddingBottom);
9168
+ --pf-c-form__field-group-body--PaddingTop: 0;
9160
9169
  }
9161
9170
 
9162
- .pf-c-expandable-section.pf-m-limit-width {
9163
- --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
9171
+ .pf-c-form__field-group .pf-c-form__field-group .pf-c-form__field-group-toggle ~ .pf-c-form__field-group-body {
9172
+ --pf-c-form__field-group-body--GridColumn: var(--pf-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn);
9164
9173
  }
9165
9174
 
9166
- .pf-c-expandable-section.pf-m-display-lg {
9167
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
9168
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
9169
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
9170
- --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
9171
- --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
9172
- --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
9173
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
9174
- --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
9175
- position: relative;
9176
- box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
9175
+ .pf-c-form__field-group.pf-m-expanded > .pf-c-form__field-group-toggle {
9176
+ --pf-c-form__field-group-toggle-icon--Rotate: var(--pf-c-form__field-group--m-expanded__toggle-icon--Rotate);
9177
9177
  }
9178
9178
 
9179
- .pf-c-expandable-section.pf-m-display-lg::after {
9180
- position: absolute;
9181
- top: 0;
9182
- bottom: 0;
9183
- left: 0;
9184
- width: var(--pf-c-expandable-section--m-display-lg--after--Width);
9185
- content: "";
9186
- background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
9179
+ .pf-c-form__field-group-toggle {
9180
+ grid-column: 1/2;
9181
+ grid-row: 1/2;
9182
+ padding-top: var(--pf-c-form__field-group-toggle--PaddingTop);
9183
+ padding-right: var(--pf-c-form__field-group-toggle--PaddingRight);
9187
9184
  }
9188
9185
 
9189
- .pf-c-expandable-section.pf-m-indented {
9190
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
9186
+ .pf-c-form__field-group-toggle + .pf-c-form__field-group-header {
9187
+ --pf-c-form__field-group-header--GridColumn: var(--pf-c-form__field-group-toggle--field-group-header--GridColumn);
9191
9188
  }
9192
9189
 
9193
- .pf-c-expandable-section.pf-m-truncate {
9194
- --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
9195
- --pf-c-expandable-section__toggle--PaddingTop: 0;
9196
- --pf-c-expandable-section__toggle--PaddingRight: 0;
9197
- --pf-c-expandable-section__toggle--PaddingBottom: 0;
9198
- --pf-c-expandable-section__toggle-text--MarginLeft: 0;
9190
+ .pf-c-form__field-group-toggle-button {
9191
+ margin-top: var(--pf-c-form__field-group-toggle-button--MarginTop);
9192
+ margin-bottom: var(--pf-c-form__field-group-toggle-button--MarginBottom);
9199
9193
  }
9200
9194
 
9201
- .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
9202
- display: -webkit-box;
9203
- -webkit-box-orient: vertical;
9204
- -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
9205
- overflow: hidden;
9195
+ .pf-c-form__field-group-toggle-icon {
9196
+ display: inline-block;
9197
+ min-width: var(--pf-c-form__field-group-toggle-icon--MinWidth);
9198
+ text-align: center;
9199
+ transition: var(--pf-c-form__field-group-toggle-icon--Transition);
9200
+ transform: rotate(var(--pf-c-form__field-group-toggle-icon--Rotate));
9206
9201
  }
9207
9202
 
9208
- .pf-c-expandable-section.pf-m-detached {
9209
- --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
9203
+ .pf-c-form__field-group-header {
9204
+ grid-column: var(--pf-c-form__field-group-header--GridColumn);
9205
+ grid-row: 1/2;
9206
+ display: flex;
9207
+ align-items: flex-start;
9208
+ padding-top: var(--pf-c-form__field-group-header--PaddingTop);
9209
+ padding-bottom: var(--pf-c-form__field-group-header--PaddingBottom);
9210
9210
  }
9211
9211
 
9212
- .pf-c-expandable-section__toggle {
9212
+ .pf-c-form__field-group-header-main {
9213
9213
  display: flex;
9214
- padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
9215
- margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
9216
- color: var(--pf-c-expandable-section__toggle--Color);
9217
- border: none;
9214
+ flex-direction: column;
9215
+ flex-grow: 1;
9218
9216
  }
9219
9217
 
9220
- .pf-c-expandable-section__toggle:hover {
9221
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
9218
+ .pf-c-form__field-group-header-title {
9219
+ display: flex;
9222
9220
  }
9223
9221
 
9224
- .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
9225
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
9222
+ .pf-c-form__field-group-header-title-text {
9223
+ flex-grow: 1;
9226
9224
  }
9227
9225
 
9228
- .pf-c-expandable-section__toggle:focus {
9229
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
9226
+ .pf-c-form__field-group-header-description {
9227
+ margin-top: var(--pf-c-form__field-group-header-description--MarginTop);
9228
+ color: var(--pf-c-form__field-group-header-description--Color);
9230
9229
  }
9231
9230
 
9232
- .pf-c-expandable-section__toggle-icon {
9233
- min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
9234
- color: var(--pf-c-expandable-section__toggle-icon--Color);
9235
- transition: var(--pf-c-expandable-section__toggle-icon--Transition);
9236
- transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
9231
+ .pf-c-form__field-group-header-actions {
9232
+ margin-top: var(--pf-c-form__field-group-header-actions--MarginTop);
9233
+ margin-bottom: var(--pf-c-form__field-group-header-actions--MarginBottom);
9234
+ margin-left: var(--pf-c-form__field-group-header-actions--MarginLeft);
9235
+ white-space: nowrap;
9237
9236
  }
9238
9237
 
9239
- .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
9240
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
9238
+ .pf-c-form__field-group-body {
9239
+ grid-column: var(--pf-c-form__field-group-body--GridColumn);
9240
+ display: grid;
9241
+ gap: var(--pf-c-form__field-group-body--Gap);
9242
+ padding-top: var(--pf-c-form__field-group-body--PaddingTop);
9243
+ padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);
9241
9244
  }
9242
9245
 
9243
- .pf-c-expandable-section__toggle-text {
9244
- margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
9246
+ .pf-c-form__field-group-body > .pf-c-form__field-group:first-child {
9247
+ --pf-c-form__field-group-toggle--PaddingTop: 0;
9248
+ --pf-c-form__field-group-header--PaddingTop: 0;
9245
9249
  }
9246
9250
 
9247
- .pf-c-expandable-section__content {
9248
- max-width: var(--pf-c-expandable-section__content--MaxWidth);
9249
- padding-right: var(--pf-c-expandable-section__content--PaddingRight);
9250
- padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
9251
- padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
9252
- margin-top: var(--pf-c-expandable-section__content--MarginTop);
9251
+ .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
9252
+ margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
9253
9253
  }
9254
9254
 
9255
- .pf-m-overpass-font .pf-c-expandable-section__toggle {
9256
- font-weight: var(--pf-global--FontWeight--semi-bold);
9255
+ :where(.pf-theme-dark) .pf-c-form {
9256
+ --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
9257
9257
  }
9258
9258
 
9259
9259
  .pf-c-helper-text {
@@ -10112,193 +10112,49 @@ label.pf-c-input-group__text {
10112
10112
 
10113
10113
  .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10114
10114
  --pf-c-sidebar__panel--FlexBasis: 50%;
10115
- }
10116
-
10117
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10118
- --pf-c-sidebar__panel--FlexBasis: 66%;
10119
- }
10120
-
10121
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10122
- --pf-c-sidebar__panel--FlexBasis: 75%;
10123
- }
10124
-
10125
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10126
- --pf-c-sidebar__panel--FlexBasis: 100%;
10127
- }
10128
- }
10129
- @media (min-width: 1450px) {
10130
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10131
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10132
- }
10133
-
10134
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10135
- --pf-c-sidebar__panel--FlexBasis: 25%;
10136
- }
10137
-
10138
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10139
- --pf-c-sidebar__panel--FlexBasis: 33%;
10140
- }
10141
-
10142
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10143
- --pf-c-sidebar__panel--FlexBasis: 50%;
10144
- }
10145
-
10146
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10147
- --pf-c-sidebar__panel--FlexBasis: 66%;
10148
- }
10149
-
10150
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10151
- --pf-c-sidebar__panel--FlexBasis: 75%;
10152
- }
10153
-
10154
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10155
- --pf-c-sidebar__panel--FlexBasis: 100%;
10156
- }
10157
- }
10158
- .pf-c-label-group {
10159
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10160
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10161
- --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10162
- --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10163
- --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10164
- --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10165
- --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10166
- --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10167
- --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10168
- --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10169
- --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10170
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10171
- --pf-c-label-group__label--MarginBottom: 0;
10172
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10173
- --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10174
- --pf-c-label-group__label--MaxWidth: 18ch;
10175
- --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10176
- --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10177
- --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10178
- --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10179
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10180
- --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10181
- --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10182
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10183
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10184
- --pf-c-label-group__textarea--MinWidth: 12.5rem;
10185
- --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10186
- --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10187
- --pf-c-label-group__textarea--PaddingBottom: 0;
10188
- --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10189
- display: inline-flex;
10190
- align-items: center;
10191
- }
10192
-
10193
- .pf-c-label-group.pf-m-category {
10194
- padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10195
- padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10196
- padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10197
- padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10198
- background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10199
- border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10200
- border-radius: var(--pf-c-label-group--m-category--BorderRadius);
10201
- }
10202
-
10203
- .pf-c-label-group.pf-m-vertical {
10204
- --pf-c-label-group__list--MarginRight: 0;
10205
- --pf-c-label-group__list--MarginBottom: 0;
10206
- --pf-c-label-group__list-item--MarginRight: 0;
10207
- --pf-c-label-group__label--MarginRight: 0;
10208
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10209
- --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10210
- --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10211
- --pf-c-label-group__close--MarginBottom: 0;
10212
- --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10213
- --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10214
- }
10215
-
10216
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10217
- align-items: flex-start;
10218
- }
10219
-
10220
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10221
- flex-direction: column;
10222
- align-items: flex-start;
10223
- }
10224
-
10225
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10226
- flex-direction: column;
10227
- }
10228
-
10229
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10230
- --pf-c-label-group__list-item--MarginBottom: 0;
10231
- }
10232
-
10233
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10234
- --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10235
- --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10236
- }
10115
+ }
10237
10116
 
10238
- .pf-c-label-group.pf-m-editable,
10239
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10240
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10241
- display: flex;
10242
- }
10117
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10118
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10119
+ }
10243
10120
 
10244
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10245
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10246
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10247
- .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10248
- flex: 1;
10249
- }
10121
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10122
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10123
+ }
10250
10124
 
10251
- .pf-c-label-group__main {
10252
- display: flex;
10253
- flex: 1;
10254
- flex-wrap: wrap;
10255
- align-items: baseline;
10125
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10126
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10127
+ }
10256
10128
  }
10129
+ @media (min-width: 1450px) {
10130
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10131
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10132
+ }
10257
10133
 
10258
- .pf-c-label-group__list {
10259
- display: inline-flex;
10260
- flex-wrap: wrap;
10261
- margin-right: var(--pf-c-label-group__list--MarginRight);
10262
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10263
- }
10134
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10135
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10136
+ }
10264
10137
 
10265
- .pf-c-label-group__list-item {
10266
- display: inline-flex;
10267
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
10268
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10269
- }
10138
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10139
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10140
+ }
10270
10141
 
10271
- .pf-c-label-group__label {
10272
- overflow: hidden;
10273
- text-overflow: ellipsis;
10274
- white-space: nowrap;
10275
- max-width: var(--pf-c-label-group__label--MaxWidth);
10276
- margin-right: var(--pf-c-label-group__label--MarginRight);
10277
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10278
- font-size: var(--pf-c-label-group__label--FontSize);
10279
- }
10142
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10143
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10144
+ }
10280
10145
 
10281
- .pf-c-label-group__close {
10282
- margin-top: var(--pf-c-label-group__close--MarginTop);
10283
- margin-right: var(--pf-c-label-group__close--MarginRight);
10284
- margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10285
- margin-left: var(--pf-c-label-group__close--MarginLeft);
10286
- }
10146
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10147
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10148
+ }
10287
10149
 
10288
- .pf-c-label-group__textarea {
10289
- min-width: var(--pf-c-label-group__textarea--MinWidth);
10290
- padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
10291
- white-space: nowrap;
10292
- resize: none;
10293
- border: 0;
10294
- -ms-overflow-style: none;
10295
- scrollbar-width: none;
10296
- }
10150
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10151
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10152
+ }
10297
10153
 
10298
- .pf-c-label-group__textarea::-webkit-scrollbar {
10299
- display: none;
10154
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10155
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10156
+ }
10300
10157
  }
10301
-
10302
10158
  .pf-c-label {
10303
10159
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10304
10160
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -10676,90 +10532,234 @@ label.pf-c-input-group__text {
10676
10532
  border-width: 0;
10677
10533
  }
10678
10534
 
10679
- .pf-c-label__content::before {
10680
- position: absolute;
10681
- top: 0;
10682
- right: 0;
10683
- bottom: 0;
10684
- left: 0;
10685
- pointer-events: none;
10686
- content: "";
10687
- border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10688
- border-radius: var(--pf-c-label--BorderRadius);
10535
+ .pf-c-label__content::before {
10536
+ position: absolute;
10537
+ top: 0;
10538
+ right: 0;
10539
+ bottom: 0;
10540
+ left: 0;
10541
+ pointer-events: none;
10542
+ content: "";
10543
+ border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10544
+ border-radius: var(--pf-c-label--BorderRadius);
10545
+ }
10546
+
10547
+ a.pf-c-label__content,
10548
+ button.pf-c-label__content {
10549
+ cursor: pointer;
10550
+ border: none;
10551
+ }
10552
+
10553
+ a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10554
+ button.pf-c-label__content,
10555
+ button.pf-c-label__content:hover,
10556
+ button.pf-c-label__content:focus {
10557
+ text-decoration: none;
10558
+ }
10559
+
10560
+ a.pf-c-label__content:hover,
10561
+ button.pf-c-label__content:hover {
10562
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10563
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10564
+ }
10565
+
10566
+ a.pf-c-label__content:focus,
10567
+ button.pf-c-label__content:focus {
10568
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10569
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10570
+ }
10571
+
10572
+ .pf-c-label__icon {
10573
+ margin-right: var(--pf-c-label__icon--MarginRight);
10574
+ color: var(--pf-c-label__icon--Color);
10575
+ }
10576
+
10577
+ :where(.pf-theme-dark) .pf-c-label {
10578
+ --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
10579
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
10580
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
10581
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
10582
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
10583
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
10584
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10585
+ --pf-c-label__content--before--BorderWidth: 0;
10586
+ --pf-c-label__content--before--BorderColor: transparent;
10587
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10588
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10589
+ --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
10590
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
10591
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
10592
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
10593
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
10594
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10595
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
10596
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
10597
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
10598
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
10599
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
10600
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
10601
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
10602
+ --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
10603
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
10604
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10605
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10606
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
10607
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
10608
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
10609
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
10610
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10611
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
10612
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
10613
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
10614
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
10615
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
10616
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10617
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
10618
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10619
+ }
10620
+
10621
+ .pf-c-label-group {
10622
+ --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10623
+ --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10624
+ --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10625
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10626
+ --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10627
+ --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10628
+ --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10629
+ --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10630
+ --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10631
+ --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10632
+ --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10633
+ --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10634
+ --pf-c-label-group__label--MarginBottom: 0;
10635
+ --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10636
+ --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10637
+ --pf-c-label-group__label--MaxWidth: 18ch;
10638
+ --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10639
+ --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10640
+ --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10641
+ --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10642
+ --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10643
+ --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10644
+ --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10645
+ --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10646
+ --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10647
+ --pf-c-label-group__textarea--MinWidth: 12.5rem;
10648
+ --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10649
+ --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10650
+ --pf-c-label-group__textarea--PaddingBottom: 0;
10651
+ --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10652
+ display: inline-flex;
10653
+ align-items: center;
10654
+ }
10655
+
10656
+ .pf-c-label-group.pf-m-category {
10657
+ padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10658
+ padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10659
+ padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10660
+ padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10661
+ background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10662
+ border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10663
+ border-radius: var(--pf-c-label-group--m-category--BorderRadius);
10664
+ }
10665
+
10666
+ .pf-c-label-group.pf-m-vertical {
10667
+ --pf-c-label-group__list--MarginRight: 0;
10668
+ --pf-c-label-group__list--MarginBottom: 0;
10669
+ --pf-c-label-group__list-item--MarginRight: 0;
10670
+ --pf-c-label-group__label--MarginRight: 0;
10671
+ --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10672
+ --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10673
+ --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10674
+ --pf-c-label-group__close--MarginBottom: 0;
10675
+ --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10676
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10677
+ }
10678
+
10679
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10680
+ align-items: flex-start;
10681
+ }
10682
+
10683
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10684
+ flex-direction: column;
10685
+ align-items: flex-start;
10686
+ }
10687
+
10688
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10689
+ flex-direction: column;
10690
+ }
10691
+
10692
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10693
+ --pf-c-label-group__list-item--MarginBottom: 0;
10694
+ }
10695
+
10696
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10697
+ --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10698
+ --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10699
+ }
10700
+
10701
+ .pf-c-label-group.pf-m-editable,
10702
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10703
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10704
+ display: flex;
10705
+ }
10706
+
10707
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10708
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10709
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10710
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10711
+ flex: 1;
10689
10712
  }
10690
10713
 
10691
- a.pf-c-label__content,
10692
- button.pf-c-label__content {
10693
- cursor: pointer;
10694
- border: none;
10714
+ .pf-c-label-group__main {
10715
+ display: flex;
10716
+ flex: 1;
10717
+ flex-wrap: wrap;
10718
+ align-items: baseline;
10695
10719
  }
10696
10720
 
10697
- a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10698
- button.pf-c-label__content,
10699
- button.pf-c-label__content:hover,
10700
- button.pf-c-label__content:focus {
10701
- text-decoration: none;
10721
+ .pf-c-label-group__list {
10722
+ display: inline-flex;
10723
+ flex-wrap: wrap;
10724
+ margin-right: var(--pf-c-label-group__list--MarginRight);
10725
+ margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10702
10726
  }
10703
10727
 
10704
- a.pf-c-label__content:hover,
10705
- button.pf-c-label__content:hover {
10706
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10707
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
10728
+ .pf-c-label-group__list-item {
10729
+ display: inline-flex;
10730
+ margin-right: var(--pf-c-label-group__list-item--MarginRight);
10731
+ margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10708
10732
  }
10709
10733
 
10710
- a.pf-c-label__content:focus,
10711
- button.pf-c-label__content:focus {
10712
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10713
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
10734
+ .pf-c-label-group__label {
10735
+ overflow: hidden;
10736
+ text-overflow: ellipsis;
10737
+ white-space: nowrap;
10738
+ max-width: var(--pf-c-label-group__label--MaxWidth);
10739
+ margin-right: var(--pf-c-label-group__label--MarginRight);
10740
+ margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10741
+ font-size: var(--pf-c-label-group__label--FontSize);
10714
10742
  }
10715
10743
 
10716
- .pf-c-label__icon {
10717
- margin-right: var(--pf-c-label__icon--MarginRight);
10718
- color: var(--pf-c-label__icon--Color);
10744
+ .pf-c-label-group__close {
10745
+ margin-top: var(--pf-c-label-group__close--MarginTop);
10746
+ margin-right: var(--pf-c-label-group__close--MarginRight);
10747
+ margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10748
+ margin-left: var(--pf-c-label-group__close--MarginLeft);
10719
10749
  }
10720
10750
 
10721
- :where(.pf-theme-dark) .pf-c-label {
10722
- --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
10723
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
10724
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
10725
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
10726
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
10727
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
10728
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10729
- --pf-c-label__content--before--BorderWidth: 0;
10730
- --pf-c-label__content--before--BorderColor: transparent;
10731
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10732
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
10733
- --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
10734
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
10735
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
10736
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
10737
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
10738
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
10739
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
10740
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
10741
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
10742
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
10743
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
10744
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
10745
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
10746
- --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
10747
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
10748
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
10749
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
10750
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
10751
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
10752
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
10753
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
10754
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
10755
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
10756
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
10757
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
10758
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
10759
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
10760
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
10761
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
10762
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10751
+ .pf-c-label-group__textarea {
10752
+ min-width: var(--pf-c-label-group__textarea--MinWidth);
10753
+ padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
10754
+ white-space: nowrap;
10755
+ resize: none;
10756
+ border: 0;
10757
+ -ms-overflow-style: none;
10758
+ scrollbar-width: none;
10759
+ }
10760
+
10761
+ .pf-c-label-group__textarea::-webkit-scrollbar {
10762
+ display: none;
10763
10763
  }
10764
10764
 
10765
10765
  .pf-c-list {
@@ -24102,6 +24102,75 @@ label.pf-c-tree-view__node-text {
24102
24102
  direction: ltr;
24103
24103
  }
24104
24104
  }
24105
+ .pf-l-gallery {
24106
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
24107
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
24108
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
24109
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
24110
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
24111
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
24112
+ --pf-l-gallery--GridTemplateRows: auto;
24113
+ display: grid;
24114
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
24115
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
24116
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
24117
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
24118
+ }
24119
+
24120
+ .pf-l-gallery.pf-m-gutter {
24121
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
24122
+ }
24123
+
24124
+ @media (min-width: 576px) {
24125
+ .pf-l-gallery {
24126
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
24127
+ }
24128
+ }
24129
+ @media (min-width: 768px) {
24130
+ .pf-l-gallery {
24131
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
24132
+ }
24133
+ }
24134
+ @media (min-width: 992px) {
24135
+ .pf-l-gallery {
24136
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
24137
+ }
24138
+ }
24139
+ @media (min-width: 1200px) {
24140
+ .pf-l-gallery {
24141
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
24142
+ }
24143
+ }
24144
+ @media (min-width: 1450px) {
24145
+ .pf-l-gallery {
24146
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
24147
+ }
24148
+ }
24149
+ @media (min-width: 576px) {
24150
+ .pf-l-gallery {
24151
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
24152
+ }
24153
+ }
24154
+ @media (min-width: 768px) {
24155
+ .pf-l-gallery {
24156
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
24157
+ }
24158
+ }
24159
+ @media (min-width: 992px) {
24160
+ .pf-l-gallery {
24161
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
24162
+ }
24163
+ }
24164
+ @media (min-width: 1200px) {
24165
+ .pf-l-gallery {
24166
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
24167
+ }
24168
+ }
24169
+ @media (min-width: 1450px) {
24170
+ .pf-l-gallery {
24171
+ --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))))));
24172
+ }
24173
+ }
24105
24174
  .pf-l-flex {
24106
24175
  --pf-l-flex--Display: flex;
24107
24176
  --pf-l-flex--FlexWrap: wrap;
@@ -26178,75 +26247,6 @@ label.pf-c-tree-view__node-text {
26178
26247
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26179
26248
  }
26180
26249
  }
26181
- .pf-l-gallery {
26182
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26183
- --pf-l-gallery--GridTemplateColumns--min: 250px;
26184
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26185
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
26186
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26187
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26188
- --pf-l-gallery--GridTemplateRows: auto;
26189
- display: grid;
26190
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26191
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26192
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26193
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26194
- }
26195
-
26196
- .pf-l-gallery.pf-m-gutter {
26197
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26198
- }
26199
-
26200
- @media (min-width: 576px) {
26201
- .pf-l-gallery {
26202
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26203
- }
26204
- }
26205
- @media (min-width: 768px) {
26206
- .pf-l-gallery {
26207
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26208
- }
26209
- }
26210
- @media (min-width: 992px) {
26211
- .pf-l-gallery {
26212
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26213
- }
26214
- }
26215
- @media (min-width: 1200px) {
26216
- .pf-l-gallery {
26217
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26218
- }
26219
- }
26220
- @media (min-width: 1450px) {
26221
- .pf-l-gallery {
26222
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26223
- }
26224
- }
26225
- @media (min-width: 576px) {
26226
- .pf-l-gallery {
26227
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26228
- }
26229
- }
26230
- @media (min-width: 768px) {
26231
- .pf-l-gallery {
26232
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26233
- }
26234
- }
26235
- @media (min-width: 992px) {
26236
- .pf-l-gallery {
26237
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26238
- }
26239
- }
26240
- @media (min-width: 1200px) {
26241
- .pf-l-gallery {
26242
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26243
- }
26244
- }
26245
- @media (min-width: 1450px) {
26246
- .pf-l-gallery {
26247
- --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))))));
26248
- }
26249
- }
26250
26250
  .pf-l-grid {
26251
26251
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26252
26252
  --pf-l-grid__item--GridColumnStart: auto;