website/assets/scss/helpers/card.scss
2023-01-23 10:07:18 +01:00

88 lines
No EOL
1.6 KiB
SCSS

$card-border-radius: 5px;
.card {
margin-bottom: 1em;
.card-title {
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
padding: 10px 10px 10px 15px;
font-weight: bold;
font-size: 1.2em;
.fa {
margin-right: 0.2em;
}
}
.card-text {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
padding: 10px 15px 20px 15px;
}
.card-actions {
border-bottom-left-radius: $card-border-radius;
border-bottom-right-radius: $card-border-radius;
display: flex;
justify-content: flex-end;
padding: 10px 15px 10px 15px;
font-weight: bold;
.card-action {
opacity: 0.8;
text-decoration: none;
color: inherit;
}
.card-action:hover {
cursor: pointer;
opacity: 1;
}
}
}
.card.no-actions {
.card-text {
border-bottom-left-radius: $card-border-radius;
border-bottom-right-radius: $card-border-radius;
}
}
.card.card-green {
color: #2f3640;
.card-title {
background-color: #27ae60;
}
.card-text {
background-color: #2ecc71;
}
.card-actions {
background-color: #27ae60;
}
}
.card.card-purple {
color: #f5f6fa;
a {
color: #f5f6fa;
}
.card-title {
background-color: #8e44ad;
}
.card-text {
background-color: #9b59b6;
}
.card-actions {
background-color: #8e44ad;
}
}
.card.card-blue {
color: #f5f6fa;
a {
color: #f5f6fa;
}
.card-title {
background-color: #2980b9;
}
.card-text {
background-color: #3498db;
}
.card-actions {
background-color: #2980b9;
}
}