@patternfly/react-core 4.236.4 → 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
5098
 
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
-
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
- }
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
+ }
5223
5166
 
5224
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5225
- margin-left: auto;
5226
- }
5167
+ .pf-c-description-list.pf-m-fluid {
5168
+ --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
5169
+ }
5227
5170
 
5228
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5229
- flex: none;
5230
- }
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
+ }
5231
5176
 
5232
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5233
- flex-grow: 2;
5234
- }
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
+ }
5235
5187
 
5236
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5237
- flex-grow: 3;
5238
- }
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
+ }
5239
5191
 
5240
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5241
- flex-grow: 4;
5242
- }
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);
5194
+ }
5243
5195
 
5244
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5245
- flex-grow: 5;
5246
- }
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);
5247
5199
  }
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
- }
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;
5253
5210
  }
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
- }
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;
5265
5217
  }
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
- }
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);
5273
5224
  }
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
- }
5225
+
5226
+ .pf-c-description-list__term .pf-c-description-list__text {
5227
+ display: inline;
5281
5228
  }
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
5229
 
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
- }
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
+ }
5291
5236
 
5292
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5293
- margin-left: auto;
5294
- }
5237
+ .pf-c-description-list__description {
5238
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
5239
+ }
5295
5240
 
5296
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5297
- flex: none;
5298
- }
5241
+ .pf-c-description-list__text {
5242
+ min-width: 0;
5243
+ }
5299
5244
 
5300
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5301
- flex-grow: 2;
5302
- }
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
+ }
5303
5253
 
5304
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5305
- flex-grow: 3;
5306
- }
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
+ }
5307
5257
 
5308
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5309
- flex-grow: 4;
5310
- }
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);
5260
+ }
5311
5261
 
5312
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5313
- flex-grow: 5;
5314
- }
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);
5315
5264
  }
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
- }
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);
5321
5268
  }
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
- }
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);
5333
5272
  }
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
- }
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);
5341
5277
  }
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
- }
5278
+
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);
5349
5282
  }
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
5283
 
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;
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);
5358
5287
  }
5359
5288
 
5360
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5361
- margin-left: auto;
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);
5362
5291
  }
5363
5292
 
5364
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5365
- flex: none;
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);
5366
5295
  }
5367
5296
 
5368
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5369
- flex-grow: 2;
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);
5370
5300
  }
5371
5301
 
5372
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5373
- flex-grow: 3;
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);
5374
5310
  }
5375
5311
 
5376
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5377
- flex-grow: 4;
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);
5378
5314
  }
5379
5315
 
5380
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5381
- flex-grow: 5;
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);
5382
5318
  }
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;
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);
5388
5323
  }
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);
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);
5400
5328
  }
5401
5329
  }
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);
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);
5408
5333
  }
5409
- }
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);
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);
5337
+ }
5338
+
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);
5341
+ }
5342
+
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);
5346
+ }
5347
+
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);
5416
5351
  }
5417
5352
  }
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);
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);
5421
5356
  }
5422
5357
 
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;
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);
5426
5360
  }
5427
5361
 
5428
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5429
- margin-left: auto;
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);
5430
5364
  }
5431
5365
 
5432
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5433
- flex: none;
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);
5434
5369
  }
5435
5370
 
5436
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5437
- flex-grow: 2;
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);
5374
+ }
5375
+ }
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);
5438
5379
  }
5439
5380
 
5440
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5441
- flex-grow: 3;
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);
5442
5383
  }
5443
5384
 
5444
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5445
- flex-grow: 4;
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);
5446
5387
  }
5447
5388
 
5448
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5449
- flex-grow: 5;
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);
5450
5392
  }
5451
- }
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;
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);
5855
5896
  }
5856
5897
 
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);
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;
5859
5901
  }
5860
5902
 
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);
5903
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
5904
+ margin-left: auto;
5863
5905
  }
5864
5906
 
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);
5907
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
5908
+ flex: none;
5868
5909
  }
5869
5910
 
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);
5911
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
5912
+ flex-grow: 2;
5873
5913
  }
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
5914
 
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
- }
5915
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
5916
+ flex-grow: 3;
5917
+ }
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;
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;
6227
6203
  }
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);
6204
+ }
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);
6231
6215
  }
6232
6216
  }
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;
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);
6241
6223
  }
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));
6224
+ }
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);
6245
6231
  }
6246
6232
  }
6247
- @media (min-width: 1200px) {
6248
- .pf-c-divider.pf-m-inset-none-on-xl {
6249
- --pf-c-divider--after--Inset: 0%;
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 {
@@ -10584,124 +10584,38 @@ button.pf-c-label__content:focus {
10584
10584
  --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
10585
10585
  --pf-c-label__content--before--BorderWidth: 0;
10586
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-list {
10622
- --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10623
- --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
10624
- --pf-c-list--nested--MarginLeft: var(--pf-global--spacer--sm);
10625
- --pf-c-list--ul--ListStyle: var(--pf-global--ListStyle);
10626
- --pf-c-list--li--MarginTop: var(--pf-global--spacer--sm);
10627
- --pf-c-list--m-inline--li--MarginRight: var(--pf-global--spacer--lg);
10628
- --pf-c-list--m-bordered--li--PaddingBottom: var(--pf-global--spacer--sm);
10629
- --pf-c-list--m-bordered--li--BorderBottomColor: var(--pf-global--BorderColor--100);
10630
- --pf-c-list--m-bordered--li--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10631
- --pf-c-list__item-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
10632
- --pf-c-list__item-icon--MarginTop: 0.375rem;
10633
- --pf-c-list__item-icon--MarginRight: var(--pf-global--spacer--sm);
10634
- --pf-c-list__item-icon--Color: var(--pf-global--icon--Color--light);
10635
- --pf-c-list__item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
10636
- --pf-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-global--icon--FontSize--lg);
10637
- --pf-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-global--spacer--md);
10638
- --pf-c-list--m-icon-lg__item-icon--FontSize: var(--pf-global--icon--FontSize--lg);
10639
- padding-left: var(--pf-c-list--PaddingLeft);
10640
- }
10641
-
10642
- .pf-c-list ol,
10643
- .pf-c-list ul {
10644
- margin-top: var(--pf-c-list--nested--MarginTop);
10645
- margin-left: var(--pf-c-list--nested--MarginLeft);
10646
- }
10647
-
10648
- .pf-c-list li + li {
10649
- margin-top: var(--pf-c-list--li--MarginTop);
10650
- }
10651
-
10652
- ul.pf-c-list {
10653
- list-style: var(--pf-c-list--ul--ListStyle);
10654
- }
10655
-
10656
- .pf-c-list .pf-c-list__item {
10657
- display: flex;
10658
- }
10659
-
10660
- .pf-c-list .pf-c-list__item-icon {
10661
- flex-shrink: 0;
10662
- min-width: var(--pf-c-list__item-icon--MinWidth);
10663
- margin-top: var(--pf-c-list__item-icon--MarginTop);
10664
- margin-right: var(--pf-c-list__item-icon--MarginRight);
10665
- font-size: var(--pf-c-list__item-icon--FontSize);
10666
- line-height: 1;
10667
- color: var(--pf-c-list__item-icon--Color);
10668
- }
10669
-
10670
- .pf-c-list.pf-m-icon-lg {
10671
- --pf-c-list__item-icon--MinWidth: var(--pf-c-list--m-icon-lg__item-icon--MinWidth);
10672
- --pf-c-list__item-icon--MarginTop: 0;
10673
- --pf-c-list__item-icon--MarginRight: var(--pf-c-list--m-icon-lg__item-icon--MarginRight);
10674
- --pf-c-list__item-icon--FontSize: var(--pf-c-list--m-icon-lg__item-icon--FontSize);
10675
- }
10676
-
10677
- .pf-c-list.pf-m-plain {
10678
- --pf-c-list--PaddingLeft: 0;
10679
- list-style: none;
10680
- }
10681
-
10682
- .pf-c-list.pf-m-inline {
10683
- --pf-c-list--PaddingLeft: 0;
10684
- display: flex;
10685
- flex-wrap: wrap;
10686
- list-style: none;
10687
- }
10688
-
10689
- .pf-c-list.pf-m-inline li {
10690
- --pf-c-list--li--MarginTop: 0;
10691
- }
10692
-
10693
- .pf-c-list.pf-m-inline li:not(:last-child) {
10694
- margin-right: var(--pf-c-list--m-inline--li--MarginRight);
10695
- }
10696
-
10697
- .pf-c-list.pf-m-bordered > * {
10698
- padding-bottom: var(--pf-c-list--m-bordered--li--PaddingBottom);
10699
- border-bottom: var(--pf-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-c-list--m-bordered--li--BorderBottomColor);
10700
- }
10701
-
10702
- .pf-c-list.pf-m-bordered > :last-child {
10703
- --pf-c-list--m-bordered--li--PaddingBottom: 0;
10704
- --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
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);
10705
10619
  }
10706
10620
 
10707
10621
  .pf-c-label-group {
@@ -10848,6 +10762,92 @@ ul.pf-c-list {
10848
10762
  display: none;
10849
10763
  }
10850
10764
 
10765
+ .pf-c-list {
10766
+ --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10767
+ --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
10768
+ --pf-c-list--nested--MarginLeft: var(--pf-global--spacer--sm);
10769
+ --pf-c-list--ul--ListStyle: var(--pf-global--ListStyle);
10770
+ --pf-c-list--li--MarginTop: var(--pf-global--spacer--sm);
10771
+ --pf-c-list--m-inline--li--MarginRight: var(--pf-global--spacer--lg);
10772
+ --pf-c-list--m-bordered--li--PaddingBottom: var(--pf-global--spacer--sm);
10773
+ --pf-c-list--m-bordered--li--BorderBottomColor: var(--pf-global--BorderColor--100);
10774
+ --pf-c-list--m-bordered--li--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10775
+ --pf-c-list__item-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
10776
+ --pf-c-list__item-icon--MarginTop: 0.375rem;
10777
+ --pf-c-list__item-icon--MarginRight: var(--pf-global--spacer--sm);
10778
+ --pf-c-list__item-icon--Color: var(--pf-global--icon--Color--light);
10779
+ --pf-c-list__item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
10780
+ --pf-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-global--icon--FontSize--lg);
10781
+ --pf-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-global--spacer--md);
10782
+ --pf-c-list--m-icon-lg__item-icon--FontSize: var(--pf-global--icon--FontSize--lg);
10783
+ padding-left: var(--pf-c-list--PaddingLeft);
10784
+ }
10785
+
10786
+ .pf-c-list ol,
10787
+ .pf-c-list ul {
10788
+ margin-top: var(--pf-c-list--nested--MarginTop);
10789
+ margin-left: var(--pf-c-list--nested--MarginLeft);
10790
+ }
10791
+
10792
+ .pf-c-list li + li {
10793
+ margin-top: var(--pf-c-list--li--MarginTop);
10794
+ }
10795
+
10796
+ ul.pf-c-list {
10797
+ list-style: var(--pf-c-list--ul--ListStyle);
10798
+ }
10799
+
10800
+ .pf-c-list .pf-c-list__item {
10801
+ display: flex;
10802
+ }
10803
+
10804
+ .pf-c-list .pf-c-list__item-icon {
10805
+ flex-shrink: 0;
10806
+ min-width: var(--pf-c-list__item-icon--MinWidth);
10807
+ margin-top: var(--pf-c-list__item-icon--MarginTop);
10808
+ margin-right: var(--pf-c-list__item-icon--MarginRight);
10809
+ font-size: var(--pf-c-list__item-icon--FontSize);
10810
+ line-height: 1;
10811
+ color: var(--pf-c-list__item-icon--Color);
10812
+ }
10813
+
10814
+ .pf-c-list.pf-m-icon-lg {
10815
+ --pf-c-list__item-icon--MinWidth: var(--pf-c-list--m-icon-lg__item-icon--MinWidth);
10816
+ --pf-c-list__item-icon--MarginTop: 0;
10817
+ --pf-c-list__item-icon--MarginRight: var(--pf-c-list--m-icon-lg__item-icon--MarginRight);
10818
+ --pf-c-list__item-icon--FontSize: var(--pf-c-list--m-icon-lg__item-icon--FontSize);
10819
+ }
10820
+
10821
+ .pf-c-list.pf-m-plain {
10822
+ --pf-c-list--PaddingLeft: 0;
10823
+ list-style: none;
10824
+ }
10825
+
10826
+ .pf-c-list.pf-m-inline {
10827
+ --pf-c-list--PaddingLeft: 0;
10828
+ display: flex;
10829
+ flex-wrap: wrap;
10830
+ list-style: none;
10831
+ }
10832
+
10833
+ .pf-c-list.pf-m-inline li {
10834
+ --pf-c-list--li--MarginTop: 0;
10835
+ }
10836
+
10837
+ .pf-c-list.pf-m-inline li:not(:last-child) {
10838
+ margin-right: var(--pf-c-list--m-inline--li--MarginRight);
10839
+ }
10840
+
10841
+ .pf-c-list.pf-m-bordered > * {
10842
+ padding-bottom: var(--pf-c-list--m-bordered--li--PaddingBottom);
10843
+ border-bottom: var(--pf-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-c-list--m-bordered--li--BorderBottomColor);
10844
+ }
10845
+
10846
+ .pf-c-list.pf-m-bordered > :last-child {
10847
+ --pf-c-list--m-bordered--li--PaddingBottom: 0;
10848
+ --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
10849
+ }
10850
+
10851
10851
  .pf-c-login__footer, .pf-c-login__header {
10852
10852
  --pf-global--Color--100: var(--pf-global--Color--light-100);
10853
10853
  --pf-global--Color--200: var(--pf-global--Color--light-200);
@@ -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;