diff options
| author | Mitchell Cash <me@mitchellcash.com> | 2022-10-31 03:06:02 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-31 03:06:02 +0300 |
| commit | cda47731c666e6f5e1250b674fbb0bf554c7f99a (patch) | |
| tree | f21e9af5d16416e4c3ac7d5ad2516711f1335cb2 | |
| parent | eed6b4a1751af60720c72dab9e89adb9b8ab2338 (diff) | |
Add support for customising a card title color (#36979)
* Add support for customising a card title color
* Group `*card-title-*` variables together
* Add support for customising a card subtitle color
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
| -rw-r--r-- | scss/_card.scss | 4 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 |
2 files changed, 6 insertions, 0 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index ce8c02f1f2..70279df9e9 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -7,6 +7,8 @@ --#{$prefix}card-spacer-y: #{$card-spacer-y}; --#{$prefix}card-spacer-x: #{$card-spacer-x}; --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y}; + --#{$prefix}card-title-color: #{$card-title-color}; + --#{$prefix}card-subtitle-color: #{$card-subtitle-color}; --#{$prefix}card-border-width: #{$card-border-width}; --#{$prefix}card-border-color: #{$card-border-color}; --#{$prefix}card-border-radius: #{$card-border-radius}; @@ -73,11 +75,13 @@ .card-title { margin-bottom: var(--#{$prefix}card-title-spacer-y); + color: var(--#{$prefix}card-title-color); } .card-subtitle { margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list margin-bottom: 0; + color: var(--#{$prefix}card-subtitle-color); } .card-text:last-child { diff --git a/scss/_variables.scss b/scss/_variables.scss index fa25b8e72a..af72ef2043 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1247,6 +1247,8 @@ $placeholder-opacity-min: .2 !default; $card-spacer-y: $spacer !default; $card-spacer-x: $spacer !default; $card-title-spacer-y: $spacer * .5 !default; +$card-title-color: null !default; +$card-subtitle-color: null !default; $card-border-width: var(--#{$prefix}border-width) !default; $card-border-color: var(--#{$prefix}border-color-translucent) !default; $card-border-radius: $border-radius !default; |