Last Piece Hacktivist Crew

Editing: card.scss

// 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);
	}
}

Cancel