diff --git a/src/_variables.scss b/src/_variables.scss index 7401fc86..02194205 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -225,8 +225,10 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default; /* ========== Card ========== */ $card-background-color: unquote("rgb(#{$color-white})") !default; +$card-text-color: unquote("rgb(#{$color-black})") !default; $card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default; $card-supporting-text-text-color: $text-color-primary !default; +$card-border-color: rgba(0,0,0,0.1) !default; /* ========== Sliders ========== */ @@ -441,7 +443,7 @@ $card-width: 330px !default; $card-height: 200px !default; $card-font-size: 16px !default; $card-title-font-size: 24px !default; -$card-horizontal-padding: 8px !default; +$card-horizontal-padding: 16px !default; $card-vertical-padding: 16px !default; $card-title-perspective-origin-x: 165px !default; diff --git a/src/card/README.md b/src/card/README.md index f80b4429..9a730ca6 100755 --- a/src/card/README.md +++ b/src/card/README.md @@ -118,6 +118,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements | MDL class | Effect | Remarks | |-----------|--------|---------| | `mdl-card` | Defines div element as an MDL card container | Required on "outer" div | +| `mdl-card--border` | Adds a border to the card section that it's applied to | Used on the "inner" divs | | `mdl-shadow--2dp through mdl-shadow--8dp` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present | | `mdl-card__title` | Defines div as a card title container | Required on "inner" title div | | `mdl-card__title-text` | Assigns appropriate text characteristics to card title | Required on head tag (H1 - H6) inside title div | diff --git a/src/card/_card.scss b/src/card/_card.scss index 4bd04e68..75f91c18 100644 --- a/src/card/_card.scss +++ b/src/card/_card.scss @@ -25,22 +25,22 @@ position: relative; background: $card-background-color; border-radius: 2px; + box-sizing: border-box; } .mdl-card__media { background-color: $card-image-placeholder-color; - @if str_length($card-background-image-url) > 0 { - background-image: url($card-background-image-url); - } background-repeat: repeat; background-position: 50% 50%; background-size: cover; background-origin: padding-box; background-attachment: scroll; + box-sizing: border-box; } .mdl-card__title { align-items: center; + color: $card-text-color; display: block; display: flex; justify-content: stretch; @@ -48,11 +48,16 @@ padding: $card-vertical-padding $card-horizontal-padding; perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y; transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y; + box-sizing: border-box; + + &.mdl-card--border { + border-bottom: 1px solid $card-border-color; + } } .mdl-card__title-text { - align-self: center; - color: black; + align-self: flex-end; + color: inherit; display: block; display: flex; font-size: $card-title-font-size; @@ -84,6 +89,11 @@ width: 100%; background-color: rgba(0,0,0,0); padding: 8px; + box-sizing: border-box; + + &.mdl-card--border { + border-top: 1px solid $card-border-color; + } }