Card fixes

master
Sérgio Gomes 2015-06-24 18:00:52 +01:00
parent 8c772ebfad
commit 0afb22363d
3 changed files with 19 additions and 6 deletions

View File

@ -225,8 +225,10 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
/* ========== Card ========== */ /* ========== Card ========== */
$card-background-color: unquote("rgb(#{$color-white})") !default; $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-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
$card-supporting-text-text-color: $text-color-primary !default; $card-supporting-text-text-color: $text-color-primary !default;
$card-border-color: rgba(0,0,0,0.1) !default;
/* ========== Sliders ========== */ /* ========== Sliders ========== */
@ -441,7 +443,7 @@ $card-width: 330px !default;
$card-height: 200px !default; $card-height: 200px !default;
$card-font-size: 16px !default; $card-font-size: 16px !default;
$card-title-font-size: 24px !default; $card-title-font-size: 24px !default;
$card-horizontal-padding: 8px !default; $card-horizontal-padding: 16px !default;
$card-vertical-padding: 16px !default; $card-vertical-padding: 16px !default;
$card-title-perspective-origin-x: 165px !default; $card-title-perspective-origin-x: 165px !default;

View File

@ -118,6 +118,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| MDL class | Effect | Remarks | | MDL class | Effect | Remarks |
|-----------|--------|---------| |-----------|--------|---------|
| `mdl-card` | Defines div element as an MDL card container | Required on "outer" div | | `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-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` | 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 | | `mdl-card__title-text` | Assigns appropriate text characteristics to card title | Required on head tag (H1 - H6) inside title div |

View File

@ -25,22 +25,22 @@
position: relative; position: relative;
background: $card-background-color; background: $card-background-color;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box;
} }
.mdl-card__media { .mdl-card__media {
background-color: $card-image-placeholder-color; 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-repeat: repeat;
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
background-origin: padding-box; background-origin: padding-box;
background-attachment: scroll; background-attachment: scroll;
box-sizing: border-box;
} }
.mdl-card__title { .mdl-card__title {
align-items: center; align-items: center;
color: $card-text-color;
display: block; display: block;
display: flex; display: flex;
justify-content: stretch; justify-content: stretch;
@ -48,11 +48,16 @@
padding: $card-vertical-padding $card-horizontal-padding; padding: $card-vertical-padding $card-horizontal-padding;
perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y; perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
transform-origin: $card-title-transform-origin-x $card-title-transform-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 { .mdl-card__title-text {
align-self: center; align-self: flex-end;
color: black; color: inherit;
display: block; display: block;
display: flex; display: flex;
font-size: $card-title-font-size; font-size: $card-title-font-size;
@ -84,6 +89,11 @@
width: 100%; width: 100%;
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
padding: 8px; padding: 8px;
box-sizing: border-box;
&.mdl-card--border {
border-top: 1px solid $card-border-color;
}
} }