add 3 variables to allow customization of card-header, card-content and card-footer...

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f4b6ec2e96fa692982c98896560e3f8b257dfed..55de203c3701ac56809f9c640790217fe09c00b3 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Improvements
 
+* #1619 Add $card-header-background-color, $card-content-background-color and $card-footer-background-color to allow different background customization for card elements
 * #1669 Add `.is-expanded` modifier to `.buttons.has-addons`
 * #1628 Add `.has-background` helpers for block background colors, like `.has-text`
 * #1767 Added minified bundle with cleancss

diff --git a/docs/_data/variables/components/card.json b/docs/_data/variables/components/card.json
index f22d53b97465ede57c10cc9b472cbc410d968a82..df738dc8f79af1e45f63c87de6144d99964e546a 100644 (file)
--- a/docs/_data/variables/components/card.json
+++ b/docs/_data/variables/components/card.json
@@ -36,10 +36,25 @@
       "name": "$card-header-weight",
       "value": "$weight-bold"
     },
+    "card-header-background-color": {
+      "id": "card-header-background-color",
+      "name": "$card-header-background-color",
+      "value": "none"
+    },
+    "card-content-background-color": {
+      "id": "card-content-background-color",
+      "name": "$card-content-background-color",
+      "value": "none"
+    },
     "card-footer-border-top": {
       "id": "card-footer-border-top",
       "name": "$card-footer-border-top",
       "value": "1px solid $border"
+    },
+    "card-footer-background-color": {
+      "id": "card-footer-background-color",
+      "name": "$card-footer-background-color",
+      "value": "none"
     }
   }
 }
\ No newline at end of file

diff --git a/sass/components/card.sass b/sass/components/card.sass
index 76a07be7e7b5666deb707128e7c5983835d5c196..14d2dad1e23380e6ab9029e430ade695790600f0 100644 (file)
--- a/sass/components/card.sass
+++ b/sass/components/card.sass
@@ -2,10 +2,14 @@ $card-color: $text !default
 $card-background-color: $white !default
 $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 
+$card-header-background-color: none !default
 $card-header-color: $text-strong !default
 $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
 $card-header-weight: $weight-bold !default
 
+$card-content-background-color: none !default
+
+$card-footer-background-color: none !default
 $card-footer-border-top: 1px solid $border !default
 
 .card
@@ -16,6 +20,7 @@ $card-footer-border-top: 1px solid $border !default
   position: relative
 
 .card-header
+  background-color: $card-header-background-color
   align-items: stretch
   box-shadow: $card-header-shadow
   display: flex
@@ -42,9 +47,11 @@ $card-footer-border-top: 1px solid $border !default
   position: relative
 
 .card-content
+  background-color: $card-content-background-color
   padding: 1.5rem
 
 .card-footer
+  background-color: $card-footer-background-color
   border-top: $card-footer-border-top
   align-items: stretch
   display: flex