129 lines
2.2 KiB
SCSS
129 lines
2.2 KiB
SCSS
.card {
|
|
box-shadow: none;
|
|
@include transition();
|
|
overflow: hidden;
|
|
background: get-light-color('bg-card');
|
|
|
|
&:hover,
|
|
&:focus {
|
|
box-shadow: $box-shadow;
|
|
border: 1px solid get-light-color('bg-primary');
|
|
@include transition();
|
|
.card-img-top {
|
|
transform: scale(1.2);
|
|
object-fit: cover;
|
|
@include transition();
|
|
}
|
|
}
|
|
|
|
.card-head {
|
|
height: 172px;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: large;
|
|
}
|
|
|
|
.card-body {
|
|
text-align: left;
|
|
}
|
|
|
|
.card-img-top {
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
@include transition();
|
|
}
|
|
|
|
.card-img-sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.card-img-xs {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.card-footer {
|
|
background: get-light-color('bg-card') !important;
|
|
a.btn {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-card {
|
|
width: 24rem;
|
|
display: inline-flex;
|
|
|
|
.post-card-link {
|
|
text-decoration: none !important;
|
|
color: get-light-color('text-color');
|
|
}
|
|
|
|
.card {
|
|
margin: 5px;
|
|
position: relative;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
.card-img-top {
|
|
transform: scale(1.2);
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
@include transition();
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.25rem !important;
|
|
padding-bottom: 0 !important;
|
|
|
|
.post-summary {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
max-height: 144px;
|
|
/* fallback */
|
|
-webkit-line-clamp: 5;
|
|
/* number of lines to show */
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
.card-footer {
|
|
margin-top: auto;
|
|
|
|
span {
|
|
font-size: 10pt;
|
|
color: get-light-color('muted-text-color') !important;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
.card {
|
|
background: get-dark-color('bg-card');
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border: 1px solid rgba(get-dark-color('accent-color'), 0.2);
|
|
}
|
|
.card-footer {
|
|
background: get-dark-color('bg-card') !important;
|
|
}
|
|
}
|
|
|
|
.post-card {
|
|
.card {
|
|
.card-footer {
|
|
span {
|
|
color: get-dark-color('muted-text-color') !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|