mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-01-20 20:01:25 +00:00
111 lines
2.1 KiB
SCSS
111 lines
2.1 KiB
SCSS
$border-radius: $border-radius-large;
|
|
|
|
.ds-card {
|
|
@include reset;
|
|
@include border-radius($border-radius);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: $background-color-base;
|
|
color: $text-color-base;
|
|
box-shadow: $box-shadow-large;
|
|
height: 100%;
|
|
}
|
|
|
|
.ds-card-centered {
|
|
text-align: center;
|
|
}
|
|
|
|
.ds-card-hover {
|
|
transform: translateY(0);
|
|
transition:
|
|
transform $duration-base $ease-out,
|
|
background $duration-base $ease-out,
|
|
box-shadow $duration-base $ease-out;
|
|
|
|
&:hover {
|
|
// transform: translateY(-$space-x-small);
|
|
box-shadow: $box-shadow-x-large;
|
|
}
|
|
}
|
|
|
|
.ds-card-image {
|
|
@include border-radius($border-radius, 'top');
|
|
overflow: hidden;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.ds-card-icon {
|
|
padding: $space-base $space-base 0 $space-base;
|
|
font-size: $font-size-xxxx-large;
|
|
opacity: $opacity-soft;
|
|
}
|
|
|
|
.ds-card-header {
|
|
@include reset;
|
|
@include border-radius($border-radius, 'top');
|
|
padding: $space-base $space-base $space-xxx-small $space-base;
|
|
|
|
.ds-card-has-image & {
|
|
@include border-radius(0, 'top');
|
|
}
|
|
}
|
|
|
|
.ds-card-content {
|
|
@include reset;
|
|
padding: $space-x-small $space-base;
|
|
flex: 1 1 0;
|
|
|
|
&:last-child:not(:only-child) {
|
|
padding-bottom: $space-large;
|
|
}
|
|
}
|
|
|
|
.ds-card-footer {
|
|
@include reset;
|
|
padding: $space-base;
|
|
|
|
border-radius: 0 0 $border-radius $border-radius;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Color variants
|
|
.ds-card-primary {
|
|
background-color: $background-color-primary;
|
|
color: $text-color-primary-inverse;
|
|
|
|
&.ds-card-hover:hover {
|
|
background-color: $background-color-primary-active;
|
|
}
|
|
}
|
|
|
|
.ds-card-secondary {
|
|
background-color: $background-color-secondary;
|
|
color: $text-color-secondary-inverse;
|
|
|
|
&.ds-card-hover:hover {
|
|
background-color: $background-color-secondary-active;
|
|
}
|
|
}
|
|
|
|
.ds-card-space-small {
|
|
padding-top: $space-small;
|
|
padding-bottom: $space-small;
|
|
}
|
|
.ds-card-space-large {
|
|
padding-top: $space-large;
|
|
padding-bottom: $space-large;
|
|
}
|
|
.ds-card-space-x-large {
|
|
padding-top: $space-x-large;
|
|
padding-bottom: $space-x-large;
|
|
}
|
|
.ds-card-space-xx-large {
|
|
padding-top: $space-xx-large;
|
|
padding-bottom: $space-xx-large;
|
|
}
|