@patternfly/patternfly 5.0.0-alpha.37 → 5.0.0-alpha.39

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 (15) hide show
  1. package/components/Card/card.css +95 -29
  2. package/components/Card/card.scss +142 -37
  3. package/components/DataList/data-list.css +34 -29
  4. package/components/DataList/data-list.scss +32 -24
  5. package/components/Table/table.css +60 -63
  6. package/components/Table/table.scss +56 -60
  7. package/docs/components/Card/examples/Card.md +544 -59
  8. package/docs/components/DataList/examples/DataList.md +52 -54
  9. package/docs/components/Table/examples/Table.md +136 -2125
  10. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +10 -20
  11. package/package.json +5 -5
  12. package/patternfly-no-globals.css +189 -121
  13. package/patternfly.css +189 -121
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -7914,13 +7914,23 @@ button.pf-c-breadcrumb__link {
7914
7914
  --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
7915
7915
  --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
7916
7916
  --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
7917
- --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7917
+ --pf-c-card--m-selectable--BorderWidth: var(--pf-global--BorderWidth--sm);
7918
+ --pf-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--200);
7919
+ --pf-c-card--m-selectable--m-selected--BorderColor: var(--pf-global--active-color--100);
7920
+ --pf-c-card--m-selectable--hover--BackgroundColor: var(--pf-global--palette--black-150);
7918
7921
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7919
- --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
7920
- --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
7921
- --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
7922
- --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
7923
- --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
7922
+ --pf-c-card--m-selectable--focus--BackgroundColor: var(--pf-global--palette--blue-100);
7923
+ --pf-c-card--m-selectable--focus--BorderColor: var(--pf-global--active-color--100);
7924
+ --pf-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-global--active-color--100);
7925
+ --pf-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-global--palette--black-100);
7926
+ --pf-c-card--m-selectable--m-disabled--BorderColor: var(--pf-global--BorderColor--100);
7927
+ --pf-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-global--BoxShadow--sm);
7928
+ --pf-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
7929
+ --pf-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm);
7930
+ --pf-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-global--BorderColor--100);
7931
+ --pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
7932
+ --pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-global--palette--black-150);
7933
+ --pf-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-global--active-color--100);
7924
7934
  --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
7925
7935
  --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
7926
7936
  --pf-c-card--m-selectable-raised--before--Right: 0;
@@ -7980,41 +7990,49 @@ button.pf-c-breadcrumb__link {
7980
7990
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
7981
7991
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
7982
7992
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
7993
+ position: relative;
7983
7994
  display: flex;
7984
7995
  flex-direction: column;
7985
7996
  background-color: var(--pf-c-card--BackgroundColor);
7986
7997
  box-shadow: var(--pf-c-card--BoxShadow);
7987
7998
  }
7988
- .pf-c-card.pf-m-hoverable:hover {
7989
- box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
7999
+ .pf-c-card.pf-m-selectable, .pf-c-card.pf-m-clickable {
8000
+ isolation: isolate;
8001
+ box-shadow: none;
7990
8002
  }
7991
- .pf-c-card.pf-m-selectable {
7992
- position: relative;
8003
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label,
8004
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label {
8005
+ position: unset;
8006
+ }
8007
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label::before,
8008
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label::before {
8009
+ position: absolute;
8010
+ inset: 0;
7993
8011
  cursor: pointer;
7994
8012
  }
7995
- .pf-c-card.pf-m-selectable:hover {
7996
- box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
8013
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
8014
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
8015
+ --pf-c-card--BackgroundColor: unset;
8016
+ --pf-c-card--BorderColor: unset;
7997
8017
  }
7998
- .pf-c-card.pf-m-selectable:focus {
7999
- box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
8018
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
8019
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
8020
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
8021
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor);
8000
8022
  }
8001
- .pf-c-card.pf-m-selectable:active {
8002
- box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
8023
+ .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current {
8024
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
8025
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
8003
8026
  }
8004
- .pf-c-card.pf-m-selectable.pf-m-selected {
8005
- box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
8027
+ .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current.pf-m-selected, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label {
8028
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
8029
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
8006
8030
  }
8007
- .pf-c-card.pf-m-selectable.pf-m-selected::before {
8008
- position: absolute;
8009
- top: 0;
8010
- right: 0;
8011
- left: 0;
8012
- height: var(--pf-c-card--m-selectable--m-selected--before--Height);
8013
- content: "";
8014
- background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
8015
- }
8016
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
8017
- position: relative;
8031
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
8032
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
8033
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
8034
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
8035
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
8018
8036
  }
8019
8037
  .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
8020
8038
  position: absolute;
@@ -8167,6 +8185,54 @@ button.pf-c-breadcrumb__link {
8167
8185
  --pf-c-card__actions--MarginBottom: 0;
8168
8186
  }
8169
8187
 
8188
+ .pf-c-card__selectable-actions .pf-c-check__label,
8189
+ .pf-c-card__selectable-actions .pf-c-radio__label {
8190
+ position: absolute;
8191
+ inset: 0;
8192
+ cursor: pointer;
8193
+ }
8194
+ .pf-c-card__selectable-actions .pf-c-check__label::before,
8195
+ .pf-c-card__selectable-actions .pf-c-radio__label::before {
8196
+ position: absolute;
8197
+ inset: 0;
8198
+ z-index: -1;
8199
+ content: "";
8200
+ background-color: var(--pf-c-card--BackgroundColor, transparent);
8201
+ border: var(--pf-c-card--m-selectable--BorderWidth) solid var(--pf-c-card--BorderColor, transparent);
8202
+ box-shadow: var(--pf-c-card--BoxShadow, none);
8203
+ }
8204
+ .pf-c-card__selectable-actions .pf-c-check__label:hover,
8205
+ .pf-c-card__selectable-actions .pf-c-radio__label:hover {
8206
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--hover--BackgroundColor);
8207
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
8208
+ }
8209
+
8210
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
8211
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
8212
+ .pf-c-card.pf-m-selected {
8213
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--BorderColor);
8214
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-selected--BackgroundColor);
8215
+ }
8216
+
8217
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
8218
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
8219
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--focus--BorderColor);
8220
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--focus--BackgroundColor);
8221
+ }
8222
+
8223
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible):where(:checked) ~ .pf-c-check__label,
8224
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-c-radio__label {
8225
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--focus--BorderColor);
8226
+ }
8227
+
8228
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
8229
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
8230
+ .pf-c-card.pf-m-disabled {
8231
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
8232
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
8233
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
8234
+ }
8235
+
8170
8236
  .pf-c-card__header,
8171
8237
  .pf-c-card__title,
8172
8238
  .pf-c-card__body,
@@ -9830,25 +9896,25 @@ label.pf-c-check, .pf-c-check__label,
9830
9896
  --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
9831
9897
  --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9832
9898
  --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
9899
+ --pf-c-data-list--MarginLeft: var(--pf-global--spacer--md);
9833
9900
  --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
9834
9901
  --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
9835
9902
  --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
9836
9903
  --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
9837
9904
  --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9838
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
9839
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
9840
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9841
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9842
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9843
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
9905
+ --pf-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
9906
+ --pf-c-data-list__item--m-clickable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
9907
+ --pf-c-data-list__item--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9908
+ --pf-c-data-list__item--m-clickable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9909
+ --pf-c-data-list__item--m-clickable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9844
9910
  --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
9845
9911
  --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
9846
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
9847
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
9912
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
9913
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
9848
9914
  --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
9849
9915
  --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
9850
9916
  --pf-c-data-list__item--before--BackgroundColor: transparent;
9851
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
9917
+ --pf-c-data-list__item--before--Width: calc(2 * var(--pf-global--BorderWidth--lg));
9852
9918
  --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
9853
9919
  --pf-c-data-list__item--before--Top: 0;
9854
9920
  --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
@@ -9908,8 +9974,6 @@ label.pf-c-check, .pf-c-check__label,
9908
9974
  --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9909
9975
  --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
9910
9976
  --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
9911
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9912
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
9913
9977
  --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
9914
9978
  --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
9915
9979
  --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
@@ -10041,28 +10105,28 @@ label.pf-c-check, .pf-c-check__label,
10041
10105
  background-color: var(--pf-c-data-list__item--before--BackgroundColor);
10042
10106
  transition: var(--pf-c-data-list__item--before--Transition);
10043
10107
  }
10044
- .pf-c-data-list__item.pf-m-selectable {
10108
+ .pf-c-data-list__item.pf-m-clickable {
10045
10109
  cursor: pointer;
10046
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
10110
+ outline-offset: var(--pf-c-data-list__item--m-clickable--OutlineOffset);
10047
10111
  }
10048
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
10112
+ .pf-c-data-list__item.pf-m-clickable:hover, .pf-c-data-list__item.pf-m-clickable:focus {
10049
10113
  position: relative;
10050
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
10114
+ z-index: var(--pf-c-data-list__item--m-clickable--hover--ZIndex);
10051
10115
  }
10052
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
10116
+ .pf-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) {
10053
10117
  --pf-c-data-list__item--BorderBottomWidth: 0;
10054
10118
  }
10055
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
10056
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
10119
+ .pf-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
10120
+ border-top: var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopColor);
10057
10121
  }
10058
- .pf-c-data-list__item.pf-m-selectable:hover {
10059
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10122
+ .pf-c-data-list__item.pf-m-clickable:hover {
10123
+ box-shadow: var(--pf-c-data-list__item--m-clickable--hover--BoxShadow);
10060
10124
  }
10061
- .pf-c-data-list__item.pf-m-selectable:focus {
10062
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10125
+ .pf-c-data-list__item.pf-m-clickable:focus {
10126
+ box-shadow: var(--pf-c-data-list__item--m-clickable--focus--BoxShadow);
10063
10127
  }
10064
- .pf-c-data-list__item.pf-m-selectable:active {
10065
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10128
+ .pf-c-data-list__item.pf-m-clickable:active {
10129
+ box-shadow: var(--pf-c-data-list__item--m-clickable--active--BoxShadow);
10066
10130
  }
10067
10131
  .pf-c-data-list__item.pf-m-selected {
10068
10132
  --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
@@ -10082,10 +10146,6 @@ label.pf-c-check, .pf-c-check__label,
10082
10146
  }
10083
10147
  .pf-c-data-list__item.pf-m-expanded {
10084
10148
  --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
10085
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
10086
- }
10087
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
10088
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
10089
10149
  }
10090
10150
 
10091
10151
  .pf-c-data-list__item-row {
@@ -10217,11 +10277,22 @@ label.pf-c-check, .pf-c-check__label,
10217
10277
  .pf-c-data-list__expandable-content {
10218
10278
  max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
10219
10279
  overflow-y: auto;
10220
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
10221
10280
  }
10222
10281
  .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
10223
10282
  padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
10224
10283
  }
10284
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body > .pf-c-data-list {
10285
+ margin-left: var(--pf-c-data-list--MarginLeft);
10286
+ }
10287
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__item:last-child {
10288
+ border-bottom: 0;
10289
+ }
10290
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__item-row {
10291
+ --pf-c-data-list__item-row--PaddingLeft: 0;
10292
+ }
10293
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__expandable-content-body {
10294
+ --pf-c-data-list__expandable-content-body--PaddingLeft: 0;
10295
+ }
10225
10296
  .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10226
10297
  padding: 0;
10227
10298
  }
@@ -27097,43 +27168,43 @@ svg.pf-c-spinner.pf-m-xl {
27097
27168
  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
27098
27169
  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
27099
27170
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
27100
- --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
27101
- --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
27102
- --pf-c-table--tr--m-hoverable--BoxShadow: none;
27103
- --pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
27104
- --pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27105
- --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
27106
- --pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27107
- --pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
27108
- --pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27109
- --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
27110
- --pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
27171
+ --pf-c-table--tr--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
27172
+ --pf-c-table--tr--m-clickable--BackgroundColor: transparent;
27173
+ --pf-c-table--tr--m-clickable--BoxShadow: none;
27174
+ --pf-c-table--tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
27175
+ --pf-c-table--tr--m-clickable--hover--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27176
+ --pf-c-table--tr--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
27177
+ --pf-c-table--tr--m-clickable--focus--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27178
+ --pf-c-table--tr--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
27179
+ --pf-c-table--tr--m-clickable--active--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27180
+ --pf-c-table--tr--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
27181
+ --pf-c-table--tr--m-clickable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
27111
27182
  --pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
27112
27183
  --pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
27113
27184
  --pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27114
27185
  --pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
27115
- --pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
27186
+ --pf-c-table--tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
27116
27187
  --pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
27117
27188
  --pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
27118
27189
  --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
27119
27190
  --pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27120
- --pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
27121
- --pf-c-table--tbody--m-hoverable--BoxShadow: none;
27122
- --pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;
27123
- --pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
27124
- --pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27125
- --pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
27126
- --pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27127
- --pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
27128
- --pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27129
- --pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
27130
- --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400);
27131
- --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
27191
+ --pf-c-table--tbody--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
27192
+ --pf-c-table--tbody--m-clickable--BoxShadow: none;
27193
+ --pf-c-table--tbody--m-clickable--BackgroundColor: transparent;
27194
+ --pf-c-table--tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
27195
+ --pf-c-table--tbody--m-clickable--hover--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27196
+ --pf-c-table--tbody--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
27197
+ --pf-c-table--tbody--m-clickable--focus--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27198
+ --pf-c-table--tbody--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
27199
+ --pf-c-table--tbody--m-clickable--active--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27200
+ --pf-c-table--tbody--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
27201
+ --pf-c-table--tbody--m-clickable--m-expanded--BorderColor: var(--pf-global--active-color--400);
27202
+ --pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
27132
27203
  --pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
27133
27204
  --pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
27134
27205
  --pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
27135
27206
  --pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
27136
- --pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
27207
+ --pf-c-table--tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
27137
27208
  --pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
27138
27209
  --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
27139
27210
  --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
@@ -27330,6 +27401,9 @@ svg.pf-c-spinner.pf-m-xl {
27330
27401
  margin-top: var(--pf-c-table__check--input--MarginTop);
27331
27402
  vertical-align: top;
27332
27403
  }
27404
+ .pf-c-table tbody.pf-m-expanded > :first-child:not(.pf-c-table__control-row) {
27405
+ border-bottom-width: 0;
27406
+ }
27333
27407
  .pf-c-table .pf-c-table__compound-expansion-toggle, .pf-c-table .pf-c-table__compound-expansion-toggle:first-child, .pf-c-table .pf-c-table__compound-expansion-toggle:last-child {
27334
27408
  padding: 0;
27335
27409
  }
@@ -27389,26 +27463,26 @@ svg.pf-c-spinner.pf-m-xl {
27389
27463
  .pf-c-table.pf-m-no-border-rows > tbody .pf-c-table__control-row > .pf-c-table__compound-expansion-toggle:first-child > ::before {
27390
27464
  border-left-width: 0;
27391
27465
  }
27392
- .pf-c-table tr.pf-m-hoverable {
27466
+ .pf-c-table tr.pf-m-clickable {
27393
27467
  cursor: pointer;
27394
- background-color: var(--pf-c-table--tr--m-hoverable--BackgroundColor);
27395
- outline-offset: var(--pf-c-table--tr--m-hoverable--OutlineOffset);
27396
- box-shadow: var(--pf-c-table--tr--m-hoverable--BoxShadow);
27468
+ background-color: var(--pf-c-table--tr--m-clickable--BackgroundColor);
27469
+ outline-offset: var(--pf-c-table--tr--m-clickable--OutlineOffset);
27470
+ box-shadow: var(--pf-c-table--tr--m-clickable--BoxShadow);
27397
27471
  }
27398
- .pf-c-table tr.pf-m-hoverable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-hoverable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-hoverable:active:not(.pf-m-selected) + tr.pf-m-selected {
27399
- box-shadow: var(--pf-c-table--tr--m-hoverable--m-selected--BoxShadow);
27472
+ .pf-c-table tr.pf-m-clickable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-clickable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-clickable:active:not(.pf-m-selected) + tr.pf-m-selected {
27473
+ box-shadow: var(--pf-c-table--tr--m-clickable--m-selected--BoxShadow);
27400
27474
  }
27401
- .pf-c-table tr.pf-m-hoverable:hover {
27402
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--hover--BoxShadow);
27403
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--hover--BackgroundColor);
27475
+ .pf-c-table tr.pf-m-clickable:hover {
27476
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--hover--BoxShadow);
27477
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--hover--BackgroundColor);
27404
27478
  }
27405
- .pf-c-table tr.pf-m-hoverable:focus {
27406
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--focus--BoxShadow);
27407
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--focus--BackgroundColor);
27479
+ .pf-c-table tr.pf-m-clickable:focus {
27480
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--focus--BoxShadow);
27481
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--focus--BackgroundColor);
27408
27482
  }
27409
- .pf-c-table tr.pf-m-hoverable:active {
27410
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--active--BoxShadow);
27411
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--active--BackgroundColor);
27483
+ .pf-c-table tr.pf-m-clickable:active {
27484
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--active--BoxShadow);
27485
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--active--BackgroundColor);
27412
27486
  }
27413
27487
  .pf-c-table tr.pf-m-selected {
27414
27488
  --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
@@ -27430,29 +27504,29 @@ svg.pf-c-spinner.pf-m-xl {
27430
27504
  .pf-c-table tr.pf-m-first-cell-offset-reset {
27431
27505
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
27432
27506
  }
27433
- .pf-c-table tbody.pf-m-hoverable {
27507
+ .pf-c-table tbody.pf-m-clickable {
27434
27508
  cursor: pointer;
27435
- background-color: var(--pf-c-table--tbody--m-hoverable--BackgroundColor);
27436
- outline-offset: var(--pf-c-table--tbody--m-hoverable--OutlineOffset);
27437
- box-shadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow);
27509
+ background-color: var(--pf-c-table--tbody--m-clickable--BackgroundColor);
27510
+ outline-offset: var(--pf-c-table--tbody--m-clickable--OutlineOffset);
27511
+ box-shadow: var(--pf-c-table--tbody--m-clickable--BoxShadow);
27438
27512
  }
27439
- .pf-c-table tbody.pf-m-hoverable.pf-m-expanded:not(.pf-m-selected) {
27440
- --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor);
27513
+ .pf-c-table tbody.pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
27514
+ --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-clickable--m-expanded--BorderColor);
27441
27515
  }
27442
- .pf-c-table tbody.pf-m-hoverable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-hoverable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-hoverable:active:not(.pf-m-selected) + tbody.pf-m-selected {
27443
- box-shadow: var(--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow);
27516
+ .pf-c-table tbody.pf-m-clickable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-clickable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-clickable:active:not(.pf-m-selected) + tbody.pf-m-selected {
27517
+ box-shadow: var(--pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow);
27444
27518
  }
27445
- .pf-c-table tbody.pf-m-hoverable:hover {
27446
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--hover--BoxShadow);
27447
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--hover--BackgroundColor);
27519
+ .pf-c-table tbody.pf-m-clickable:hover {
27520
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--hover--BoxShadow);
27521
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--hover--BackgroundColor);
27448
27522
  }
27449
- .pf-c-table tbody.pf-m-hoverable:focus {
27450
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--focus--BoxShadow);
27451
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--focus--BackgroundColor);
27523
+ .pf-c-table tbody.pf-m-clickable:focus {
27524
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--focus--BoxShadow);
27525
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--focus--BackgroundColor);
27452
27526
  }
27453
- .pf-c-table tbody.pf-m-hoverable:active {
27454
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--active--BoxShadow);
27455
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--active--BackgroundColor);
27527
+ .pf-c-table tbody.pf-m-clickable:active {
27528
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--active--BoxShadow);
27529
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--active--BackgroundColor);
27456
27530
  }
27457
27531
  .pf-c-table tbody.pf-m-selected {
27458
27532
  --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--BorderLeftWidth);
@@ -27820,12 +27894,6 @@ svg.pf-c-spinner.pf-m-xl {
27820
27894
  display: none;
27821
27895
  }
27822
27896
 
27823
- .pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child,
27824
- .pf-c-table__expandable-row.pf-m-expanded > :first-child,
27825
- .pf-c-table tbody.pf-m-expanded > tr > :not(.pf-c-table__compound-expansion-toggle) {
27826
- --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
27827
- }
27828
-
27829
27897
  .pf-c-table .pf-c-table tr > *:first-child {
27830
27898
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--nested--first-last-child--PaddingLeft);
27831
27899
  }