google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/_variables.scss
View File

@ -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;

1
src/card/README.md
View File

@ -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 |

20
src/card/_card.scss
View File

@ -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;
}
}