mdb-ui-kit/scss/_cards.scss
2016-01-26 12:12:48 -06:00

59 lines
1.3 KiB
SCSS

//https://www.google.com/design/spec/components/cards.html#cards-content-blocks
// Card resting elevation: 2dp
.card {
border: 0;
// Cards have a default elevation of 2dp.
@include box-shadow($mdb-shadow-2dp);
@extend %std-font;
// spec: see "Avatar, Title, and Subtitle area"
// Height: 72dp
// Padding: 16dp
// Top and bottom padding: 16dp
.card-header {
padding: 1rem;
}
.card-block {
padding: 1.5rem 1rem 1rem;
//@extend %std-font;
}
// Primary title/text
// - Title: 24sp or 14sp
// - Subtitle: 14sp
// non-h* card-titles will be 14sp
//&.card-title {
// @extend %std-font;
//}
// any h* will signal the larger size should render as 24sp
@include headings() {
&.card-title {
font-size: 1.5rem;
font-weight: 300;
}
}
.mdb-card-actions, // needed? if you have actions in the middle of the card (see spec), it may be necessary
.card-footer { // assume footer is the set of actions?
padding: .5rem;
}
&.mdb-card-raised {
// Card raised elevation: 8dp
@include box-shadow($mdb-shadow-8dp);
}
@include media-breakpoint-up(lg) {
// On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
&.mdb-card-flat {
box-shadow: none;
}
}
}