// Card
// this should emulate external packages consumption
@import "./card-api";
$root: $eps-prefix + card;
.#{$root} {
background-color: var(--card-background-color);
box-shadow: $card-box-shadow;
border-radius: $card-border-radius;
transition: $card-transition;
font-size: $card-font-size;
&__header {
padding: $card-header-padding;
border-bottom: var(--card-header-footer-border);
min-height: $card-header-height;
display: flex;
align-items: center;
&--padding {
padding: var(--eps-card-header-padding);
}
}
/*
todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
*/
&__headline {
color: var(--card-headline-color);
margin-bottom: 0;
font-weight: $card-headline-font-weight;
flex-grow: 1;
@include text-truncate();
}
&__body {
padding: $card-body-padding-y $card-body-padding-x;
&--padding {
padding: var(--eps-card-body-padding);
}
}
// figure is here to assist with aspect ratio, and dealing with different image sizes and bg-color for shorter images e.g. header, footer.
&__figure {
background-color: var(--card-figure-background-color);
position: relative;
padding-bottom: $card-image-aspect-ratio;
overflow: hidden;
height: 0;
}
&__image {
width: 100%;
object-fit: contain;
object-position: top;
position: absolute;
top: 0;
left: 0;
}
&__image-overlay {
position: absolute;
top: 0;
background-color: var(--card-image-overlay-background-color);
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
transition: $card-image-overlay-transition;
&:hover {
opacity: 1;
}
}
&__footer {
padding: $card-padding;
border-top: var(--card-header-footer-border);
font-size: $card-footer-font-size;
&--padding {
padding: var(--eps-card-footer-padding);
}
}
&:hover {
background-color: var(--card-background-color-hover);
}
}