library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add 3 variables to allow customization of card-header, card-content and card-footer background (#1619)

Browse Source
This commit is contained in:
doc75 2018-04-08 17:52:06 +02:00 committed by Jeremy Thomas
parent 3ff5ec1cbd
commit 79a46c0802
3 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -8,6 +8,7 @@
### Improvements ### 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` * #1669 Add `.is-expanded` modifier to `.buttons.has-addons`
* #1628 Add `.has-background` helpers for block background colors, like `.has-text` * #1628 Add `.has-background` helpers for block background colors, like `.has-text`
* #1767 Added minified bundle with cleancss * #1767 Added minified bundle with cleancss

15
docs/_data/variables/components/card.json
View File

@ -36,10 +36,25 @@
"name": "$card-header-weight", "name": "$card-header-weight",
"value": "$weight-bold" "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": { "card-footer-border-top": {
"id": "card-footer-border-top", "id": "card-footer-border-top",
"name": "$card-footer-border-top", "name": "$card-footer-border-top",
"value": "1px solid $border" "value": "1px solid $border"
},
"card-footer-background-color": {
"id": "card-footer-background-color",
"name": "$card-footer-background-color",
"value": "none"
} }
} }
} }

7
sass/components/card.sass
View File

@ -2,10 +2,14 @@ $card-color: $text !default
$card-background-color: $white !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-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-color: $text-strong !default
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
$card-header-weight: $weight-bold !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-footer-border-top: 1px solid $border !default
.card .card
@ -16,6 +20,7 @@ $card-footer-border-top: 1px solid $border !default
position: relative position: relative
.card-header .card-header
background-color: $card-header-background-color
align-items: stretch align-items: stretch
box-shadow: $card-header-shadow box-shadow: $card-header-shadow
display: flex display: flex
@ -42,9 +47,11 @@ $card-footer-border-top: 1px solid $border !default
position: relative position: relative
.card-content .card-content
background-color: $card-content-background-color
padding: 1.5rem padding: 1.5rem
.card-footer .card-footer
background-color: $card-footer-background-color
border-top: $card-footer-border-top border-top: $card-footer-border-top
align-items: stretch align-items: stretch
display: flex display: flex