diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss index 2e2d4a79e..9cfcced81 100644 --- a/src/components/Card/Card.module.scss +++ b/src/components/Card/Card.module.scss @@ -35,6 +35,7 @@ } .isRootDisabled { + border: theme.$disabled-border-width solid var(--rui-local-border-color, theme.$disabled-border-color); background-color: theme.$disabled-background-color; opacity: theme.$disabled-opacity; } diff --git a/src/components/Card/README.md b/src/components/Card/README.md index 80f94b25d..4b50205c2 100644 --- a/src/components/Card/README.md +++ b/src/components/Card/README.md @@ -300,6 +300,8 @@ Separate your card actions with CardFooter. See | `--rui-Card--raised__box-shadow` | Box shadow of raised card | | `--rui-Card--disabled__background-color` | Card background color in disabled state | | `--rui-Card--disabled__opacity` | Card opacity in disabled state | +| `--rui-Card--disabled__border-width` | Card border width in disabled state | +| `--rui-Card--disabled__border-color` | Card border color in disabled state | ### Theming Variants diff --git a/src/components/Card/_theme.scss b/src/components/Card/_theme.scss index 16f0b70c0..62057774f 100644 --- a/src/components/Card/_theme.scss +++ b/src/components/Card/_theme.scss @@ -9,3 +9,5 @@ $raised-box-shadow: var(--rui-Card--raised__box-shadow); $disabled-background-color: var(--rui-Card--disabled__background-color); $disabled-opacity: var(--rui-Card--disabled__opacity); +$disabled-border-width: var(--rui-Card--disabled__border-width); +$disabled-border-color: var(--rui-Card--disabled__border-color); diff --git a/src/theme.scss b/src/theme.scss index 30c5ba9d4..700b04954 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -832,6 +832,8 @@ --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1); --rui-Card--disabled__background-color: var(--rui-color-background-disabled); --rui-Card--disabled__opacity: var(--rui-ratio-disabled-opacity); + --rui-Card--disabled__border-width: var(--rui-dimension-border-width-1); + --rui-Card--disabled__border-color: var(--rui-color-border-primary); // Card: variant: success --rui-Card--success__color: var(--rui-color-text-primary);