From: doc75 Date: Sun, 8 Apr 2018 15:52:06 +0000 (+0200) Subject: add 3 variables to allow customization of card-header, card-content and card-footer... X-Git-Tag: 0.7.0~20 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=79a46c0802edb1d08041ca9c4024496eafb7e54f;p=thirdparty%2Fbulma.git add 3 variables to allow customization of card-header, card-content and card-footer background (#1619) --- diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f4b6ec2e..55de203c3 100644 --- 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 f22d53b97..df738dc8f 100644 --- 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 76a07be7e..14d2dad1e 100644 --- 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