@import "../colors"; @import "../globals"; @import "../mixins"; @import "./config"; .card { @include shadow-2dp(); display: flex; width: 100%; flex-direction: column; overflow: hidden; font-size: $card-font-size; background: $card-background-color; border-radius: .2 * $unit; &.raised { @include shadow-8dp(); } [data-react-toolbox="avatar"] { display: block; } } .cardMedia { position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; &.wide, &.square { width: 100%; height: 0; .content { position: absolute; height: 100%; } .content > iframe, .content > video, .content > img { max-width: 100%; } } &.wide { padding-top: 56.25%; } &.square { padding-top: 100%; } .content { position: relative; top: 0; left: 0; display: flex; width: 100%; flex-direction: column; justify-content: flex-end; overflow: hidden; } .contentOverlay { .cardTitle, .cardActions, .cardText { background-color: $card-text-overlay; } } } .cardTitle { display: flex; align-items: center; [data-react-toolbox="avatar"] { margin-right: 1.3 * $unit; } .subtitle { color: $color-text-secondary; } &.large { padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit); .title { @include typo-headline(); line-height: 1.25; } } &.small { padding: $card-padding; .title { @include typo-body-2(false, true); line-height: 1.4; } .subtitle { font-weight: 500; line-height: 1.4; } } .cardMedia & { .title, .subtitle { color: $card-color-white; } } } .cardTitle, .cardText { padding: ($card-padding - .2 * $unit) $card-padding; &:last-child { padding-bottom: $card-padding-lg; } + .cardText { padding-top: 0; } } .cardActions { display: flex; align-items: center; justify-content: flex-start; padding: $card-padding-sm; [data-react-toolbox="button"] { min-width: 0; padding: 0 $card-padding-sm; margin: 0 $card-padding-sm / 2; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } } }