88 lines
1.6 KiB
SCSS
88 lines
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;
|
||
|
|
}
|
||
|
|
}
|