@patternfly/react-core 4.236.7 → 4.236.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (181) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts +2 -0
  3. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
  4. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js +4 -3
  5. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
  6. package/dist/esm/components/BackToTop/BackToTop.d.ts +1 -1
  7. package/dist/esm/components/ContextSelector/ContextSelector.d.ts +2 -0
  8. package/dist/esm/components/ContextSelector/ContextSelector.d.ts.map +1 -1
  9. package/dist/esm/components/ContextSelector/ContextSelector.js +4 -3
  10. package/dist/esm/components/ContextSelector/ContextSelector.js.map +1 -1
  11. package/dist/esm/components/Dropdown/Dropdown.d.ts +2 -0
  12. package/dist/esm/components/Dropdown/Dropdown.d.ts.map +1 -1
  13. package/dist/esm/components/Dropdown/Dropdown.js +2 -2
  14. package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
  15. package/dist/esm/components/Dropdown/DropdownWithContext.d.ts.map +1 -1
  16. package/dist/esm/components/Dropdown/DropdownWithContext.js +2 -2
  17. package/dist/esm/components/Dropdown/DropdownWithContext.js.map +1 -1
  18. package/dist/esm/components/DualListSelector/DualListSelectorControl.d.ts +1 -1
  19. package/dist/esm/components/DualListSelector/DualListSelectorControlsWrapper.d.ts +1 -1
  20. package/dist/esm/components/DualListSelector/DualListSelectorListItem.d.ts +1 -1
  21. package/dist/esm/components/DualListSelector/DualListSelectorListWrapper.d.ts +1 -1
  22. package/dist/esm/components/Menu/MenuContent.d.ts +1 -1
  23. package/dist/esm/components/Menu/MenuGroup.d.ts +1 -1
  24. package/dist/esm/components/Menu/MenuInput.d.ts +1 -1
  25. package/dist/esm/components/Menu/MenuItem.d.ts +1 -1
  26. package/dist/esm/components/Nav/NavItem.d.ts +2 -0
  27. package/dist/esm/components/Nav/NavItem.d.ts.map +1 -1
  28. package/dist/esm/components/Nav/NavItem.js +2 -2
  29. package/dist/esm/components/Nav/NavItem.js.map +1 -1
  30. package/dist/esm/components/NotificationDrawer/NotificationDrawer.d.ts +1 -1
  31. package/dist/esm/components/OptionsMenu/OptionsMenu.d.ts +2 -0
  32. package/dist/esm/components/OptionsMenu/OptionsMenu.d.ts.map +1 -1
  33. package/dist/esm/components/OptionsMenu/OptionsMenu.js +2 -2
  34. package/dist/esm/components/OptionsMenu/OptionsMenu.js.map +1 -1
  35. package/dist/esm/components/Panel/Panel.d.ts +1 -1
  36. package/dist/esm/components/Popover/Popover.d.ts +2 -0
  37. package/dist/esm/components/Popover/Popover.d.ts.map +1 -1
  38. package/dist/esm/components/Popover/Popover.js +2 -2
  39. package/dist/esm/components/Popover/Popover.js.map +1 -1
  40. package/dist/esm/components/Popover/PopoverCloseButton.d.ts.map +1 -1
  41. package/dist/esm/components/Popover/PopoverCloseButton.js +2 -11
  42. package/dist/esm/components/Popover/PopoverCloseButton.js.map +1 -1
  43. package/dist/esm/components/SearchInput/SearchInput.d.ts +2 -0
  44. package/dist/esm/components/SearchInput/SearchInput.d.ts.map +1 -1
  45. package/dist/esm/components/SearchInput/SearchInput.js +2 -2
  46. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  47. package/dist/esm/components/Select/Select.d.ts +2 -0
  48. package/dist/esm/components/Select/Select.d.ts.map +1 -1
  49. package/dist/esm/components/Select/Select.js +4 -3
  50. package/dist/esm/components/Select/Select.js.map +1 -1
  51. package/dist/esm/components/Tabs/OverflowTab.d.ts +2 -0
  52. package/dist/esm/components/Tabs/OverflowTab.d.ts.map +1 -1
  53. package/dist/esm/components/Tabs/OverflowTab.js +2 -2
  54. package/dist/esm/components/Tabs/OverflowTab.js.map +1 -1
  55. package/dist/esm/components/Tabs/Tab.d.ts +1 -1
  56. package/dist/esm/components/TimePicker/TimePicker.d.ts +3 -0
  57. package/dist/esm/components/TimePicker/TimePicker.d.ts.map +1 -1
  58. package/dist/esm/components/TimePicker/TimePicker.js +5 -4
  59. package/dist/esm/components/TimePicker/TimePicker.js.map +1 -1
  60. package/dist/esm/components/Tooltip/Tooltip.d.ts +2 -0
  61. package/dist/esm/components/Tooltip/Tooltip.d.ts.map +1 -1
  62. package/dist/esm/components/Tooltip/Tooltip.js +2 -2
  63. package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
  64. package/dist/esm/helpers/FocusTrap/FocusTrap.d.ts +5 -19
  65. package/dist/esm/helpers/FocusTrap/FocusTrap.d.ts.map +1 -1
  66. package/dist/esm/helpers/FocusTrap/FocusTrap.js +10 -6
  67. package/dist/esm/helpers/FocusTrap/FocusTrap.js.map +1 -1
  68. package/dist/esm/helpers/Popper/Popper.d.ts +5 -0
  69. package/dist/esm/helpers/Popper/Popper.d.ts.map +1 -1
  70. package/dist/esm/helpers/Popper/Popper.js +42 -7
  71. package/dist/esm/helpers/Popper/Popper.js.map +1 -1
  72. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts +2 -0
  73. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
  74. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js +4 -3
  75. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
  76. package/dist/js/components/BackToTop/BackToTop.d.ts +1 -1
  77. package/dist/js/components/ContextSelector/ContextSelector.d.ts +2 -0
  78. package/dist/js/components/ContextSelector/ContextSelector.d.ts.map +1 -1
  79. package/dist/js/components/ContextSelector/ContextSelector.js +4 -3
  80. package/dist/js/components/ContextSelector/ContextSelector.js.map +1 -1
  81. package/dist/js/components/Dropdown/Dropdown.d.ts +2 -0
  82. package/dist/js/components/Dropdown/Dropdown.d.ts.map +1 -1
  83. package/dist/js/components/Dropdown/Dropdown.js +2 -2
  84. package/dist/js/components/Dropdown/Dropdown.js.map +1 -1
  85. package/dist/js/components/Dropdown/DropdownWithContext.d.ts.map +1 -1
  86. package/dist/js/components/Dropdown/DropdownWithContext.js +2 -2
  87. package/dist/js/components/Dropdown/DropdownWithContext.js.map +1 -1
  88. package/dist/js/components/DualListSelector/DualListSelectorControl.d.ts +1 -1
  89. package/dist/js/components/DualListSelector/DualListSelectorControlsWrapper.d.ts +1 -1
  90. package/dist/js/components/DualListSelector/DualListSelectorListItem.d.ts +1 -1
  91. package/dist/js/components/DualListSelector/DualListSelectorListWrapper.d.ts +1 -1
  92. package/dist/js/components/Menu/MenuContent.d.ts +1 -1
  93. package/dist/js/components/Menu/MenuGroup.d.ts +1 -1
  94. package/dist/js/components/Menu/MenuInput.d.ts +1 -1
  95. package/dist/js/components/Menu/MenuItem.d.ts +1 -1
  96. package/dist/js/components/Nav/NavItem.d.ts +2 -0
  97. package/dist/js/components/Nav/NavItem.d.ts.map +1 -1
  98. package/dist/js/components/Nav/NavItem.js +2 -2
  99. package/dist/js/components/Nav/NavItem.js.map +1 -1
  100. package/dist/js/components/NotificationDrawer/NotificationDrawer.d.ts +1 -1
  101. package/dist/js/components/OptionsMenu/OptionsMenu.d.ts +2 -0
  102. package/dist/js/components/OptionsMenu/OptionsMenu.d.ts.map +1 -1
  103. package/dist/js/components/OptionsMenu/OptionsMenu.js +2 -2
  104. package/dist/js/components/OptionsMenu/OptionsMenu.js.map +1 -1
  105. package/dist/js/components/Panel/Panel.d.ts +1 -1
  106. package/dist/js/components/Popover/Popover.d.ts +2 -0
  107. package/dist/js/components/Popover/Popover.d.ts.map +1 -1
  108. package/dist/js/components/Popover/Popover.js +2 -2
  109. package/dist/js/components/Popover/Popover.js.map +1 -1
  110. package/dist/js/components/Popover/PopoverCloseButton.d.ts.map +1 -1
  111. package/dist/js/components/Popover/PopoverCloseButton.js +2 -11
  112. package/dist/js/components/Popover/PopoverCloseButton.js.map +1 -1
  113. package/dist/js/components/SearchInput/SearchInput.d.ts +2 -0
  114. package/dist/js/components/SearchInput/SearchInput.d.ts.map +1 -1
  115. package/dist/js/components/SearchInput/SearchInput.js +2 -2
  116. package/dist/js/components/SearchInput/SearchInput.js.map +1 -1
  117. package/dist/js/components/Select/Select.d.ts +2 -0
  118. package/dist/js/components/Select/Select.d.ts.map +1 -1
  119. package/dist/js/components/Select/Select.js +4 -3
  120. package/dist/js/components/Select/Select.js.map +1 -1
  121. package/dist/js/components/Tabs/OverflowTab.d.ts +2 -0
  122. package/dist/js/components/Tabs/OverflowTab.d.ts.map +1 -1
  123. package/dist/js/components/Tabs/OverflowTab.js +2 -2
  124. package/dist/js/components/Tabs/OverflowTab.js.map +1 -1
  125. package/dist/js/components/Tabs/Tab.d.ts +1 -1
  126. package/dist/js/components/TimePicker/TimePicker.d.ts +3 -0
  127. package/dist/js/components/TimePicker/TimePicker.d.ts.map +1 -1
  128. package/dist/js/components/TimePicker/TimePicker.js +5 -4
  129. package/dist/js/components/TimePicker/TimePicker.js.map +1 -1
  130. package/dist/js/components/Tooltip/Tooltip.d.ts +2 -0
  131. package/dist/js/components/Tooltip/Tooltip.d.ts.map +1 -1
  132. package/dist/js/components/Tooltip/Tooltip.js +2 -2
  133. package/dist/js/components/Tooltip/Tooltip.js.map +1 -1
  134. package/dist/js/helpers/FocusTrap/FocusTrap.d.ts +5 -19
  135. package/dist/js/helpers/FocusTrap/FocusTrap.d.ts.map +1 -1
  136. package/dist/js/helpers/FocusTrap/FocusTrap.js +10 -7
  137. package/dist/js/helpers/FocusTrap/FocusTrap.js.map +1 -1
  138. package/dist/js/helpers/Popper/Popper.d.ts +5 -0
  139. package/dist/js/helpers/Popper/Popper.d.ts.map +1 -1
  140. package/dist/js/helpers/Popper/Popper.js +42 -7
  141. package/dist/js/helpers/Popper/Popper.js.map +1 -1
  142. package/dist/umd/react-core.min.css +1072 -1072
  143. package/dist/umd/react-core.min.js +5 -5
  144. package/package.json +5 -5
  145. package/src/components/AlertGroup/examples/AlertGroup.md +52 -15
  146. package/src/components/ApplicationLauncher/ApplicationLauncher.tsx +6 -1
  147. package/src/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx +10 -1
  148. package/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap +153 -7
  149. package/src/components/ContextSelector/ContextSelector.tsx +6 -1
  150. package/src/components/ContextSelector/__tests__/ContextSelector.test.tsx +18 -1
  151. package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap +144 -0
  152. package/src/components/Dropdown/Dropdown.tsx +9 -1
  153. package/src/components/Dropdown/DropdownWithContext.tsx +2 -0
  154. package/src/components/Dropdown/__tests__/Dropdown.test.tsx +16 -0
  155. package/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +131 -7
  156. package/src/components/Nav/NavItem.tsx +4 -0
  157. package/src/components/Nav/__tests__/Nav.test.tsx +19 -0
  158. package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap +111 -42
  159. package/src/components/OptionsMenu/OptionsMenu.tsx +4 -0
  160. package/src/components/OptionsMenu/__tests__/OptionsMenu.test.tsx +17 -0
  161. package/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap +216 -20
  162. package/src/components/Popover/Popover.tsx +4 -0
  163. package/src/components/Popover/PopoverCloseButton.tsx +6 -17
  164. package/src/components/Popover/__tests__/Popover.test.tsx +25 -0
  165. package/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap +10 -0
  166. package/src/components/SearchInput/SearchInput.tsx +4 -0
  167. package/src/components/SearchInput/__tests__/SearchInput.test.tsx +27 -1
  168. package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +130 -6
  169. package/src/components/Select/Select.tsx +6 -1
  170. package/src/components/Select/__tests__/Select.test.tsx +23 -7
  171. package/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +152 -46
  172. package/src/components/Tabs/OverflowTab.tsx +4 -0
  173. package/src/components/Tabs/__tests__/OverflowTab.test.tsx +31 -7
  174. package/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap +89 -0
  175. package/src/components/TimePicker/TimePicker.tsx +6 -1
  176. package/src/components/TimePicker/__tests__/TimePicker.test.tsx +16 -1
  177. package/src/components/Tooltip/Tooltip.tsx +4 -0
  178. package/src/components/Tooltip/__tests__/Tooltip.test.tsx +21 -0
  179. package/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +10 -0
  180. package/src/helpers/FocusTrap/FocusTrap.tsx +21 -5
  181. package/src/helpers/Popper/Popper.tsx +54 -12
@@ -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
- .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;
5002
- }
5003
-
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);
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
+ }
5008
4993
  }
5009
-
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);
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
+ }
5012
5001
  }
5013
-
5014
- .pf-c-date-picker__input .pf-c-form-control {
5015
- width: var(--pf-c-date-picker__input--c-form-control--Width);
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
+ }
5016
5009
  }
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
+ }
5017
5014
 
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
- }
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
+ }
5027
5019
 
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
- }
5020
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
5021
+ margin-left: auto;
5022
+ }
5032
5023
 
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));
5036
- }
5024
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
5025
+ flex: none;
5026
+ }
5037
5027
 
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%;
5041
- }
5028
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
5029
+ flex-grow: 2;
5030
+ }
5042
5031
 
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);
5088
- }
5032
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
5033
+ flex-grow: 3;
5034
+ }
5089
5035
 
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);
5036
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
5037
+ flex-grow: 4;
5093
5038
  }
5094
- }
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);
5097
- }
5098
5039
 
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));
5040
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
5041
+ flex-grow: 5;
5102
5042
  }
5103
5043
  }
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)));
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;
5107
5048
  }
5108
5049
  }
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))));
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);
5112
5060
  }
5113
5061
  }
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)))));
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);
5117
5068
  }
5118
5069
  }
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))))));
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);
5122
5076
  }
5123
5077
  }
5124
- .pf-c-description-list.pf-m-inline-grid {
5125
- display: inline-grid;
5126
- }
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
+ }
5127
5082
 
5128
- .pf-c-description-list.pf-m-auto-column-widths {
5129
- --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
5130
- }
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
+ }
5131
5087
 
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
- }
5088
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
5089
+ margin-left: auto;
5090
+ }
5136
5091
 
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));
5092
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
5093
+ flex: none;
5140
5094
  }
5141
- }
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)));
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;
5145
5110
  }
5146
5111
  }
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))));
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;
5150
5116
  }
5151
5117
  }
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)))));
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);
5155
5128
  }
5156
5129
  }
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))))));
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);
5160
5136
  }
5161
5137
  }
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);
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);
5144
+ }
5165
5145
  }
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
+ }
5166
5150
 
5167
- .pf-c-description-list.pf-m-fluid {
5168
- --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
5169
- }
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
+ }
5170
5155
 
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
- }
5156
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
5157
+ margin-left: auto;
5158
+ }
5176
5159
 
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
- }
5160
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
5161
+ flex: none;
5162
+ }
5187
5163
 
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
- }
5164
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
5165
+ flex-grow: 2;
5166
+ }
5191
5167
 
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
- }
5168
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
5169
+ flex-grow: 3;
5170
+ }
5195
5171
 
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);
5172
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
5173
+ flex-grow: 4;
5174
+ }
5175
+
5176
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
5177
+ flex-grow: 5;
5178
+ }
5179
+ }
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;
5184
+ }
5185
+ }
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);
5196
+ }
5199
5197
  }
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;
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);
5204
+ }
5210
5205
  }
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;
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);
5212
+ }
5217
5213
  }
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
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);
5224
- }
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
+ }
5225
5223
 
5226
- .pf-c-description-list__term .pf-c-description-list__text {
5227
- display: inline;
5228
- }
5224
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
5225
+ margin-left: auto;
5226
+ }
5229
5227
 
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
- }
5228
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
5229
+ flex: none;
5230
+ }
5236
5231
 
5237
- .pf-c-description-list__description {
5238
- font-size: var(--pf-c-description-list__description--FontSize, inherit);
5239
- }
5232
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
5233
+ flex-grow: 2;
5234
+ }
5240
5235
 
5241
- .pf-c-description-list__text {
5242
- min-width: 0;
5243
- }
5236
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
5237
+ flex-grow: 3;
5238
+ }
5244
5239
 
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
- }
5240
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
5241
+ flex-grow: 4;
5242
+ }
5253
5243
 
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);
5244
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
5245
+ flex-grow: 5;
5246
+ }
5256
5247
  }
5257
-
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);
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
+ }
5260
5253
  }
5261
-
5262
- .pf-c-description-list.pf-m-1-col {
5263
- --pf-c-description-list--GridTemplateColumns--count: var(--pf-c-description-list--m-1-col--GridTemplateColumns--count);
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
+ }
5264
5265
  }
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);
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
+ }
5268
5273
  }
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);
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
+ }
5272
5281
  }
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
+ }
5273
5286
 
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);
5277
- }
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
+ }
5278
5291
 
5279
- .pf-c-description-list.pf-m-vertical {
5280
- --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
5281
- --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5282
- }
5292
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
5293
+ margin-left: auto;
5294
+ }
5283
5295
 
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);
5296
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
5297
+ flex: none;
5287
5298
  }
5288
5299
 
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);
5300
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
5301
+ flex-grow: 2;
5291
5302
  }
5292
5303
 
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);
5304
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
5305
+ flex-grow: 3;
5295
5306
  }
5296
5307
 
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);
5308
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
5309
+ flex-grow: 4;
5300
5310
  }
5301
5311
 
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);
5312
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
5313
+ flex-grow: 5;
5305
5314
  }
5306
5315
  }
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);
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
+ }
5321
+ }
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
+ }
5333
+ }
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
+ }
5341
+ }
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
+ }
5349
+ }
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);
5310
5353
  }
5311
5354
 
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);
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;
5314
5358
  }
5315
5359
 
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);
5360
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5361
+ margin-left: auto;
5318
5362
  }
5319
5363
 
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);
5364
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5365
+ flex: none;
5323
5366
  }
5324
5367
 
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);
5368
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5369
+ flex-grow: 2;
5328
5370
  }
5329
- }
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);
5371
+
5372
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5373
+ flex-grow: 3;
5333
5374
  }
5334
5375
 
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);
5376
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5377
+ flex-grow: 4;
5337
5378
  }
5338
5379
 
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);
5380
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5381
+ flex-grow: 5;
5382
+ }
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;
5388
+ }
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);
5341
5400
  }
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);
5401
+ }
5402
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
5403
+ .pf-c-data-list.pf-m-grid-2xl {
5404
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5405
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5406
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5407
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5346
5408
  }
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);
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);
5351
5416
  }
5352
5417
  }
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);
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);
5356
5421
  }
5357
5422
 
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);
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;
5360
5426
  }
5361
5427
 
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);
5428
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5429
+ margin-left: auto;
5364
5430
  }
5365
5431
 
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);
5432
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5433
+ flex: none;
5369
5434
  }
5370
5435
 
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);
5436
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5437
+ flex-grow: 2;
5379
5438
  }
5380
5439
 
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);
5440
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5441
+ flex-grow: 3;
5383
5442
  }
5384
5443
 
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);
5444
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5445
+ flex-grow: 4;
5387
5446
  }
5388
5447
 
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);
5448
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5449
+ flex-grow: 5;
5392
5450
  }
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);
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;
5397
5456
  }
5398
5457
  }
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);
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;
5407
5478
  }
5408
5479
 
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);
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);
5412
5484
  }
5413
5485
 
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
- }
5419
-
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
- }
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);
5424
5488
  }
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
- }
5430
5489
 
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
- }
5490
+ .pf-c-date-picker__input .pf-c-form-control {
5491
+ width: var(--pf-c-date-picker__input--c-form-control--Width);
5435
5492
  }
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
- }
5441
5493
 
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
- }
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);
5446
5502
  }
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
- }
5452
5503
 
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
- }
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);
5457
5507
  }
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
- }
5463
5508
 
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
- }
5468
- }
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;
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));
5500
5512
  }
5501
5513
 
5502
- .pf-c-divider::after {
5503
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
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%;
5504
5517
  }
5505
5518
 
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;
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);
5513
5564
  }
5514
5565
 
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;
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
+ }
5522
5570
  }
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));
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);
5526
5573
  }
5527
5574
 
5528
- .pf-c-divider.pf-m-inset-none {
5529
- --pf-c-divider--after--Inset: 0%;
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
+ }
5530
5579
  }
5531
-
5532
- .pf-c-divider.pf-m-inset-xs {
5533
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
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
+ }
5534
5584
  }
5535
-
5536
- .pf-c-divider.pf-m-inset-sm {
5537
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
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
+ }
5538
5589
  }
5539
-
5540
- .pf-c-divider.pf-m-inset-md {
5541
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
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
+ }
5542
5594
  }
5543
-
5544
- .pf-c-divider.pf-m-inset-lg {
5545
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
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
+ }
5546
5599
  }
5547
-
5548
- .pf-c-divider.pf-m-inset-xl {
5549
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5600
+ .pf-c-description-list.pf-m-inline-grid {
5601
+ display: inline-grid;
5550
5602
  }
5551
5603
 
5552
- .pf-c-divider.pf-m-inset-2xl {
5553
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5604
+ .pf-c-description-list.pf-m-auto-column-widths {
5605
+ --pf-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content);
5554
5606
  }
5555
5607
 
5556
- .pf-c-divider.pf-m-inset-3xl {
5557
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
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);
5558
5611
  }
5559
5612
 
5560
5613
  @media (min-width: 576px) {
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;
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));
5568
5616
  }
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);
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)));
5572
5621
  }
5573
5622
  }
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;
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))));
5582
5626
  }
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));
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)))));
5586
5631
  }
5587
5632
  }
5588
- @media (min-width: 576px) {
5589
- .pf-c-divider.pf-m-inset-none-on-sm {
5590
- --pf-c-divider--after--Inset: 0%;
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))))));
5591
5636
  }
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
+ }
5592
5642
 
5593
- .pf-c-divider.pf-m-inset-xs-on-sm {
5594
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5595
- }
5643
+ .pf-c-description-list.pf-m-fluid {
5644
+ --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
5645
+ }
5596
5646
 
5597
- .pf-c-divider.pf-m-inset-sm-on-sm {
5598
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5599
- }
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
+ }
5600
5652
 
5601
- .pf-c-divider.pf-m-inset-md-on-sm {
5602
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5603
- }
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
+ }
5604
5663
 
5605
- .pf-c-divider.pf-m-inset-lg-on-sm {
5606
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5607
- }
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
+ }
5608
5667
 
5609
- .pf-c-divider.pf-m-inset-xl-on-sm {
5610
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5611
- }
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
+ }
5612
5671
 
5613
- .pf-c-divider.pf-m-inset-2xl-on-sm {
5614
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5615
- }
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
+ }
5616
5676
 
5617
- .pf-c-divider.pf-m-inset-3xl-on-sm {
5618
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5619
- }
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;
5620
5686
  }
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
- }
5630
5687
 
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
- }
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;
5634
5693
  }
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
- }
5644
5694
 
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
- }
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);
5648
5700
  }
5649
- @media (min-width: 768px) {
5650
- .pf-c-divider.pf-m-inset-none-on-md {
5651
- --pf-c-divider--after--Inset: 0%;
5652
- }
5653
5701
 
5654
- .pf-c-divider.pf-m-inset-xs-on-md {
5655
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5656
- }
5702
+ .pf-c-description-list__term .pf-c-description-list__text {
5703
+ display: inline;
5704
+ }
5657
5705
 
5658
- .pf-c-divider.pf-m-inset-sm-on-md {
5659
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5660
- }
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);
5711
+ }
5661
5712
 
5662
- .pf-c-divider.pf-m-inset-md-on-md {
5663
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5664
- }
5713
+ .pf-c-description-list__description {
5714
+ font-size: var(--pf-c-description-list__description--FontSize, inherit);
5715
+ }
5665
5716
 
5666
- .pf-c-divider.pf-m-inset-lg-on-md {
5667
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5668
- }
5717
+ .pf-c-description-list__text {
5718
+ min-width: 0;
5719
+ }
5669
5720
 
5670
- .pf-c-divider.pf-m-inset-xl-on-md {
5671
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5672
- }
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
+ }
5673
5729
 
5674
- .pf-c-divider.pf-m-inset-2xl-on-md {
5675
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
5676
- }
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
+ }
5677
5733
 
5678
- .pf-c-divider.pf-m-inset-3xl-on-md {
5679
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5680
- }
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);
5681
5736
  }
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
- }
5691
5737
 
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
- }
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);
5695
5740
  }
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
- }
5705
5741
 
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
- }
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);
5709
5744
  }
5710
- @media (min-width: 992px) {
5711
- .pf-c-divider.pf-m-inset-none-on-lg {
5712
- --pf-c-divider--after--Inset: 0%;
5713
- }
5714
5745
 
5715
- .pf-c-divider.pf-m-inset-xs-on-lg {
5716
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
5717
- }
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);
5748
+ }
5718
5749
 
5719
- .pf-c-divider.pf-m-inset-sm-on-lg {
5720
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
5721
- }
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
+ }
5722
5754
 
5723
- .pf-c-divider.pf-m-inset-md-on-lg {
5724
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
5725
- }
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);
5758
+ }
5726
5759
 
5727
- .pf-c-divider.pf-m-inset-lg-on-lg {
5728
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
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);
5729
5763
  }
5730
5764
 
5731
- .pf-c-divider.pf-m-inset-xl-on-lg {
5732
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
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);
5733
5767
  }
5734
5768
 
5735
- .pf-c-divider.pf-m-inset-2xl-on-lg {
5736
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
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);
5737
5771
  }
5738
5772
 
5739
- .pf-c-divider.pf-m-inset-3xl-on-lg {
5740
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
5741
- }
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;
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);
5751
5776
  }
5752
5777
 
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);
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);
5755
5781
  }
5756
5782
  }
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;
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);
5765
5786
  }
5766
5787
 
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
- }
5770
- }
5771
- @media (min-width: 1200px) {
5772
- .pf-c-divider.pf-m-inset-none-on-xl {
5773
- --pf-c-divider--after--Inset: 0%;
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);
5774
5790
  }
5775
5791
 
5776
- .pf-c-divider.pf-m-inset-xs-on-xl {
5777
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
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);
5778
5794
  }
5779
5795
 
5780
- .pf-c-divider.pf-m-inset-sm-on-xl {
5781
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
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);
5782
5799
  }
5783
5800
 
5784
- .pf-c-divider.pf-m-inset-md-on-xl {
5785
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
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);
5786
5804
  }
5787
-
5788
- .pf-c-divider.pf-m-inset-lg-on-xl {
5789
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
5805
+ }
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);
5790
5809
  }
5791
5810
 
5792
- .pf-c-divider.pf-m-inset-xl-on-xl {
5793
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
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);
5794
5813
  }
5795
5814
 
5796
- .pf-c-divider.pf-m-inset-2xl-on-xl {
5797
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
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);
5798
5817
  }
5799
5818
 
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;
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);
5812
5822
  }
5813
5823
 
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);
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);
5816
5827
  }
5817
5828
  }
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;
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);
5826
5832
  }
5827
5833
 
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));
5830
- }
5831
- }
5832
- @media (min-width: 1450px) {
5833
- .pf-c-divider.pf-m-inset-none-on-2xl {
5834
- --pf-c-divider--after--Inset: 0%;
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);
5835
5836
  }
5836
5837
 
5837
- .pf-c-divider.pf-m-inset-xs-on-2xl {
5838
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
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);
5839
5840
  }
5840
5841
 
5841
- .pf-c-divider.pf-m-inset-sm-on-2xl {
5842
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
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);
5843
5845
  }
5844
5846
 
5845
- .pf-c-divider.pf-m-inset-md-on-2xl {
5846
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
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);
5850
+ }
5851
+ }
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);
5847
5855
  }
5848
5856
 
5849
- .pf-c-divider.pf-m-inset-lg-on-2xl {
5850
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
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);
5851
5859
  }
5852
5860
 
5853
- .pf-c-divider.pf-m-inset-xl-on-2xl {
5854
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
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);
5855
5863
  }
5856
5864
 
5857
- .pf-c-divider.pf-m-inset-2xl-on-2xl {
5858
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
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);
5859
5868
  }
5860
5869
 
5861
- .pf-c-divider.pf-m-inset-3xl-on-2xl {
5862
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
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);
5863
5873
  }
5864
5874
  }
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
- }
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);
5876
5883
  }
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);
5884
+
5885
+ .pf-m-hidden.pf-c-divider {
5886
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5887
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5888
+ }
5889
+
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);
5883
5894
  }
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);
5895
+
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);
5891
5899
  }
5892
5900
  }
5893
5901
  @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);
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);
5896
5905
  }
5897
5906
 
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;
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);
5901
5910
  }
5902
-
5903
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
5904
- margin-left: auto;
5911
+ }
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);
5905
5916
  }
5906
5917
 
5907
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
5908
- flex: none;
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);
5909
5921
  }
5910
-
5911
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
5912
- flex-grow: 2;
5922
+ }
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);
5913
5927
  }
5914
5928
 
5915
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
5916
- flex-grow: 3;
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);
5917
5932
  }
5918
-
5919
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
5920
- flex-grow: 4;
5933
+ }
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);
5921
5938
  }
5922
5939
 
5923
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
5924
- flex-grow: 5;
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);
5925
5943
  }
5926
5944
  }
5927
- @media screen and (min-width: 768px) {
5928
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
5929
- max-height: initial;
5930
- overflow-y: visible;
5931
- }
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;
5932
5976
  }
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);
5943
- }
5977
+
5978
+ .pf-c-divider::after {
5979
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
5944
5980
  }
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);
5951
- }
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;
5952
5989
  }
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);
5959
- }
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;
5960
5998
  }
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);
5964
- }
5965
5999
 
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;
5969
- }
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
+ }
5970
6003
 
5971
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
5972
- margin-left: auto;
5973
- }
6004
+ .pf-c-divider.pf-m-inset-none {
6005
+ --pf-c-divider--after--Inset: 0%;
6006
+ }
5974
6007
 
5975
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
5976
- flex: none;
5977
- }
6008
+ .pf-c-divider.pf-m-inset-xs {
6009
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6010
+ }
5978
6011
 
5979
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
5980
- flex-grow: 2;
5981
- }
6012
+ .pf-c-divider.pf-m-inset-sm {
6013
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6014
+ }
5982
6015
 
5983
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
5984
- flex-grow: 3;
5985
- }
6016
+ .pf-c-divider.pf-m-inset-md {
6017
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6018
+ }
5986
6019
 
5987
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
5988
- flex-grow: 4;
5989
- }
6020
+ .pf-c-divider.pf-m-inset-lg {
6021
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6022
+ }
5990
6023
 
5991
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
5992
- flex-grow: 5;
5993
- }
6024
+ .pf-c-divider.pf-m-inset-xl {
6025
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
5994
6026
  }
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;
5999
- }
6027
+
6028
+ .pf-c-divider.pf-m-inset-2xl {
6029
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6000
6030
  }
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);
6011
- }
6031
+
6032
+ .pf-c-divider.pf-m-inset-3xl {
6033
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6012
6034
  }
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);
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;
6044
+ }
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);
6019
6048
  }
6020
6049
  }
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);
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;
6058
+ }
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));
6027
6062
  }
6028
6063
  }
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);
6064
+ @media (min-width: 576px) {
6065
+ .pf-c-divider.pf-m-inset-none-on-sm {
6066
+ --pf-c-divider--after--Inset: 0%;
6032
6067
  }
6033
6068
 
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;
6069
+ .pf-c-divider.pf-m-inset-xs-on-sm {
6070
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6037
6071
  }
6038
6072
 
6039
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
6040
- margin-left: auto;
6073
+ .pf-c-divider.pf-m-inset-sm-on-sm {
6074
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6041
6075
  }
6042
6076
 
6043
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
6044
- flex: none;
6077
+ .pf-c-divider.pf-m-inset-md-on-sm {
6078
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6045
6079
  }
6046
6080
 
6047
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
6048
- flex-grow: 2;
6081
+ .pf-c-divider.pf-m-inset-lg-on-sm {
6082
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6049
6083
  }
6050
6084
 
6051
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
6052
- flex-grow: 3;
6085
+ .pf-c-divider.pf-m-inset-xl-on-sm {
6086
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6053
6087
  }
6054
6088
 
6055
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
6056
- flex-grow: 4;
6089
+ .pf-c-divider.pf-m-inset-2xl-on-sm {
6090
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6057
6091
  }
6058
6092
 
6059
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
6060
- flex-grow: 5;
6093
+ .pf-c-divider.pf-m-inset-3xl-on-sm {
6094
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6061
6095
  }
6062
6096
  }
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;
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;
6067
6105
  }
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);
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);
6079
6109
  }
6080
6110
  }
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);
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;
6087
6119
  }
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);
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));
6095
6123
  }
6096
6124
  }
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);
6125
+ @media (min-width: 768px) {
6126
+ .pf-c-divider.pf-m-inset-none-on-md {
6127
+ --pf-c-divider--after--Inset: 0%;
6100
6128
  }
6101
6129
 
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;
6130
+ .pf-c-divider.pf-m-inset-xs-on-md {
6131
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6105
6132
  }
6106
6133
 
6107
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
6108
- margin-left: auto;
6134
+ .pf-c-divider.pf-m-inset-sm-on-md {
6135
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6109
6136
  }
6110
6137
 
6111
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
6112
- flex: none;
6138
+ .pf-c-divider.pf-m-inset-md-on-md {
6139
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6113
6140
  }
6114
6141
 
6115
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
6116
- flex-grow: 2;
6142
+ .pf-c-divider.pf-m-inset-lg-on-md {
6143
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6117
6144
  }
6118
6145
 
6119
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
6120
- flex-grow: 3;
6146
+ .pf-c-divider.pf-m-inset-xl-on-md {
6147
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6121
6148
  }
6122
6149
 
6123
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
6124
- flex-grow: 4;
6150
+ .pf-c-divider.pf-m-inset-2xl-on-md {
6151
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6125
6152
  }
6126
6153
 
6127
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
6128
- flex-grow: 5;
6154
+ .pf-c-divider.pf-m-inset-3xl-on-md {
6155
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6129
6156
  }
6130
6157
  }
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;
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;
6135
6166
  }
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);
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);
6147
6170
  }
6148
6171
  }
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);
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;
6155
6180
  }
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);
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));
6163
6184
  }
6164
6185
  }
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);
6186
+ @media (min-width: 992px) {
6187
+ .pf-c-divider.pf-m-inset-none-on-lg {
6188
+ --pf-c-divider--after--Inset: 0%;
6168
6189
  }
6169
6190
 
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;
6191
+ .pf-c-divider.pf-m-inset-xs-on-lg {
6192
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6173
6193
  }
6174
6194
 
6175
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
6176
- margin-left: auto;
6195
+ .pf-c-divider.pf-m-inset-sm-on-lg {
6196
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6177
6197
  }
6178
6198
 
6179
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
6180
- flex: none;
6199
+ .pf-c-divider.pf-m-inset-md-on-lg {
6200
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6181
6201
  }
6182
6202
 
6183
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
6184
- flex-grow: 2;
6203
+ .pf-c-divider.pf-m-inset-lg-on-lg {
6204
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6185
6205
  }
6186
6206
 
6187
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
6188
- flex-grow: 3;
6207
+ .pf-c-divider.pf-m-inset-xl-on-lg {
6208
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6189
6209
  }
6190
6210
 
6191
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
6192
- flex-grow: 4;
6211
+ .pf-c-divider.pf-m-inset-2xl-on-lg {
6212
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6193
6213
  }
6194
6214
 
6195
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
6196
- flex-grow: 5;
6215
+ .pf-c-divider.pf-m-inset-3xl-on-lg {
6216
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6197
6217
  }
6198
6218
  }
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;
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;
6203
6227
  }
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);
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);
6215
6231
  }
6216
6232
  }
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);
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;
6223
6241
  }
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);
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));
6231
6245
  }
6232
6246
  }
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);
6247
+ @media (min-width: 1200px) {
6248
+ .pf-c-divider.pf-m-inset-none-on-xl {
6249
+ --pf-c-divider--after--Inset: 0%;
6236
6250
  }
6237
-
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;
6251
+
6252
+ .pf-c-divider.pf-m-inset-xs-on-xl {
6253
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6241
6254
  }
6242
6255
 
6243
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
6244
- margin-left: auto;
6256
+ .pf-c-divider.pf-m-inset-sm-on-xl {
6257
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6245
6258
  }
6246
6259
 
6247
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
6248
- flex: none;
6260
+ .pf-c-divider.pf-m-inset-md-on-xl {
6261
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6249
6262
  }
6250
6263
 
6251
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
6252
- flex-grow: 2;
6264
+ .pf-c-divider.pf-m-inset-lg-on-xl {
6265
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6253
6266
  }
6254
6267
 
6255
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
6256
- flex-grow: 3;
6268
+ .pf-c-divider.pf-m-inset-xl-on-xl {
6269
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6257
6270
  }
6258
6271
 
6259
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
6260
- flex-grow: 4;
6272
+ .pf-c-divider.pf-m-inset-2xl-on-xl {
6273
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6261
6274
  }
6262
6275
 
6263
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
6264
- flex-grow: 5;
6276
+ .pf-c-divider.pf-m-inset-3xl-on-xl {
6277
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6265
6278
  }
6266
6279
  }
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;
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;
6271
6288
  }
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);
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);
6283
6292
  }
6284
6293
  }
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);
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;
6291
6302
  }
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);
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));
6299
6306
  }
6300
6307
  }
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);
6308
+ @media (min-width: 1450px) {
6309
+ .pf-c-divider.pf-m-inset-none-on-2xl {
6310
+ --pf-c-divider--after--Inset: 0%;
6304
6311
  }
6305
6312
 
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;
6313
+ .pf-c-divider.pf-m-inset-xs-on-2xl {
6314
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6309
6315
  }
6310
6316
 
6311
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
6312
- margin-left: auto;
6317
+ .pf-c-divider.pf-m-inset-sm-on-2xl {
6318
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6313
6319
  }
6314
6320
 
6315
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
6316
- flex: none;
6321
+ .pf-c-divider.pf-m-inset-md-on-2xl {
6322
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6317
6323
  }
6318
6324
 
6319
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
6320
- flex-grow: 2;
6325
+ .pf-c-divider.pf-m-inset-lg-on-2xl {
6326
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6321
6327
  }
6322
6328
 
6323
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
6324
- flex-grow: 3;
6329
+ .pf-c-divider.pf-m-inset-xl-on-2xl {
6330
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6325
6331
  }
6326
6332
 
6327
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
6328
- flex-grow: 4;
6333
+ .pf-c-divider.pf-m-inset-2xl-on-2xl {
6334
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6329
6335
  }
6330
6336
 
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;
6337
+ .pf-c-divider.pf-m-inset-3xl-on-2xl {
6338
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6339
6339
  }
6340
6340
  }
6341
6341
  .pf-c-drawer {
@@ -24102,75 +24102,6 @@ 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
- }
24174
24105
  .pf-l-flex {
24175
24106
  --pf-l-flex--Display: flex;
24176
24107
  --pf-l-flex--FlexWrap: wrap;
@@ -26247,6 +26178,75 @@ label.pf-c-tree-view__node-text {
26247
26178
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26248
26179
  }
26249
26180
  }
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;