components/carousel/cards.module.scss
@use 'sass:map';
@use 'styles/typography';
@use 'styles/loader';
$height: 200px;
$margin: 20px;
.card {
height: $height;
position: relative;
border: 1px solid var(--accents-2);
border-top: none;
cursor: pointer;
text-align: initial;
text-decoration: none;
display: block;
&.loading {
cursor: wait;
}
&:first-child {
border-top: 1px solid var(--accents-2);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
&:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.img {
display: inline-block;
position: absolute;
left: $margin;
top: $margin;
width: $height - 2 * $margin;
height: $height - 2 * $margin;
}
.name {
@include typography.typography('body1');
overflow: hidden;
text-overflow: ellipsis;
color: var(--on-background);
display: inline-block;
position: absolute;
left: $height;
top: $margin;
width: calc(100% - #{$height + $margin});
height: 24px;
&.loading {
@include loader.loading();
border-radius: 4px;
}
}
.bio {
@include typography.typography('body2');
overflow: hidden;
text-overflow: ellipsis;
color: var(--accents-5);
display: inline-block;
position: absolute;
left: $height;
top: $margin + 24px;
width: calc(100% - #{$height + $margin});
height: $height - (2 * $margin + 24px);
&.loading {
@include loader.loading();
height: $height - (3 * $margin + 24px);
top: 2 * $margin + 24px;
border-radius: 4px;
}
}