@patternfly/patternfly 5.0.0-alpha.38 → 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 (8) hide show
  1. package/components/Card/card.css +95 -29
  2. package/components/Card/card.scss +142 -37
  3. package/docs/components/Card/examples/Card.md +544 -59
  4. package/package.json +3 -3
  5. package/patternfly-no-globals.css +95 -29
  6. package/patternfly.css +95 -29
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.38",
4
+ "version": "5.0.0-alpha.39",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -44,9 +44,9 @@
44
44
  "@octokit/rest": "^19.0.7",
45
45
  "@patternfly/documentation-framework": "1.10.4",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
- "@patternfly/react-code-editor": "4.82.113",
47
+ "@patternfly/react-code-editor": "4.82.115",
48
48
  "@patternfly/react-core": "4.276.8",
49
- "@patternfly/react-table": "4.112.39",
49
+ "@patternfly/react-table": "4.113.0",
50
50
  "@starptech/prettyhtml": "^0.10.0",
51
51
  "cheerio": "^1.0.0-rc.12",
52
52
  "commander": "^10.0.0",
package/patternfly-no-globals.css CHANGED
@@ -7797,13 +7797,23 @@ button.pf-c-breadcrumb__link {
7797
7797
  --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
7798
7798
  --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
7799
7799
  --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
7800
- --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7800
+ --pf-c-card--m-selectable--BorderWidth: var(--pf-global--BorderWidth--sm);
7801
+ --pf-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--200);
7802
+ --pf-c-card--m-selectable--m-selected--BorderColor: var(--pf-global--active-color--100);
7803
+ --pf-c-card--m-selectable--hover--BackgroundColor: var(--pf-global--palette--black-150);
7801
7804
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7802
- --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
7803
- --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
7804
- --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
7805
- --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
7806
- --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
7805
+ --pf-c-card--m-selectable--focus--BackgroundColor: var(--pf-global--palette--blue-100);
7806
+ --pf-c-card--m-selectable--focus--BorderColor: var(--pf-global--active-color--100);
7807
+ --pf-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-global--active-color--100);
7808
+ --pf-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-global--palette--black-100);
7809
+ --pf-c-card--m-selectable--m-disabled--BorderColor: var(--pf-global--BorderColor--100);
7810
+ --pf-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-global--BoxShadow--sm);
7811
+ --pf-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
7812
+ --pf-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm);
7813
+ --pf-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-global--BorderColor--100);
7814
+ --pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
7815
+ --pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-global--palette--black-150);
7816
+ --pf-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-global--active-color--100);
7807
7817
  --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
7808
7818
  --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
7809
7819
  --pf-c-card--m-selectable-raised--before--Right: 0;
@@ -7863,41 +7873,49 @@ button.pf-c-breadcrumb__link {
7863
7873
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
7864
7874
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
7865
7875
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
7876
+ position: relative;
7866
7877
  display: flex;
7867
7878
  flex-direction: column;
7868
7879
  background-color: var(--pf-c-card--BackgroundColor);
7869
7880
  box-shadow: var(--pf-c-card--BoxShadow);
7870
7881
  }
7871
- .pf-c-card.pf-m-hoverable:hover {
7872
- box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
7882
+ .pf-c-card.pf-m-selectable, .pf-c-card.pf-m-clickable {
7883
+ isolation: isolate;
7884
+ box-shadow: none;
7885
+ }
7886
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label,
7887
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label {
7888
+ position: unset;
7873
7889
  }
7874
- .pf-c-card.pf-m-selectable {
7875
- position: relative;
7890
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label::before,
7891
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label::before {
7892
+ position: absolute;
7893
+ inset: 0;
7876
7894
  cursor: pointer;
7877
7895
  }
7878
- .pf-c-card.pf-m-selectable:hover {
7879
- box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
7896
+ .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,
7897
+ .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 {
7898
+ --pf-c-card--BackgroundColor: unset;
7899
+ --pf-c-card--BorderColor: unset;
7880
7900
  }
7881
- .pf-c-card.pf-m-selectable:focus {
7882
- box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
7901
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
7902
+ .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 {
7903
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
7904
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor);
7883
7905
  }
7884
- .pf-c-card.pf-m-selectable:active {
7885
- box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
7906
+ .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current {
7907
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
7908
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
7886
7909
  }
7887
- .pf-c-card.pf-m-selectable.pf-m-selected {
7888
- box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
7910
+ .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 {
7911
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
7912
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
7889
7913
  }
7890
- .pf-c-card.pf-m-selectable.pf-m-selected::before {
7891
- position: absolute;
7892
- top: 0;
7893
- right: 0;
7894
- left: 0;
7895
- height: var(--pf-c-card--m-selectable--m-selected--before--Height);
7896
- content: "";
7897
- background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
7898
- }
7899
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
7900
- position: relative;
7914
+ .pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
7915
+ .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 {
7916
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
7917
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
7918
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
7901
7919
  }
7902
7920
  .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 {
7903
7921
  position: absolute;
@@ -8050,6 +8068,54 @@ button.pf-c-breadcrumb__link {
8050
8068
  --pf-c-card__actions--MarginBottom: 0;
8051
8069
  }
8052
8070
 
8071
+ .pf-c-card__selectable-actions .pf-c-check__label,
8072
+ .pf-c-card__selectable-actions .pf-c-radio__label {
8073
+ position: absolute;
8074
+ inset: 0;
8075
+ cursor: pointer;
8076
+ }
8077
+ .pf-c-card__selectable-actions .pf-c-check__label::before,
8078
+ .pf-c-card__selectable-actions .pf-c-radio__label::before {
8079
+ position: absolute;
8080
+ inset: 0;
8081
+ z-index: -1;
8082
+ content: "";
8083
+ background-color: var(--pf-c-card--BackgroundColor, transparent);
8084
+ border: var(--pf-c-card--m-selectable--BorderWidth) solid var(--pf-c-card--BorderColor, transparent);
8085
+ box-shadow: var(--pf-c-card--BoxShadow, none);
8086
+ }
8087
+ .pf-c-card__selectable-actions .pf-c-check__label:hover,
8088
+ .pf-c-card__selectable-actions .pf-c-radio__label:hover {
8089
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--hover--BackgroundColor);
8090
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
8091
+ }
8092
+
8093
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
8094
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
8095
+ .pf-c-card.pf-m-selected {
8096
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--BorderColor);
8097
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-selected--BackgroundColor);
8098
+ }
8099
+
8100
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
8101
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
8102
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--focus--BorderColor);
8103
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--focus--BackgroundColor);
8104
+ }
8105
+
8106
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible):where(:checked) ~ .pf-c-check__label,
8107
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-c-radio__label {
8108
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--focus--BorderColor);
8109
+ }
8110
+
8111
+ .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
8112
+ .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
8113
+ .pf-c-card.pf-m-disabled {
8114
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
8115
+ --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
8116
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
8117
+ }
8118
+
8053
8119
  .pf-c-card__header,
8054
8120
  .pf-c-card__title,
8055
8121
  .pf-c-card__body,
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;
8002
+ }
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;
7990
8006
  }
7991
- .pf-c-card.pf-m-selectable {
7992
- position: relative;
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,