You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.6 KiB
SCSS
62 lines
1.6 KiB
SCSS
@use '../utilities/main_utilities' as *;
|
|
|
|
/* Cards is a row */
|
|
/* Best to do this with grid, but there's less browser support... */
|
|
.card{
|
|
/* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
|
|
border: rems(1px) solid $color-tertiary;
|
|
border-radius: $border-radius;
|
|
// box-shadow: $box-shadow $color-tertiary;
|
|
// padding: rems(24px);
|
|
background: $color-background;
|
|
|
|
// display: block !important; /* Unset row/col default */
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
|
|
@include color-scheme(dark) {
|
|
border-color: $color-tertiary--dark;
|
|
// box-shadow: $box-shadow $color-tertiary--dark;
|
|
background: $color-background--dark;
|
|
}
|
|
}
|
|
.card:hover {
|
|
box-shadow: $box-shadow $color-primary;
|
|
border-color: $color-primary;
|
|
|
|
@include color-scheme(dark) {
|
|
border-color: $color-primary--dark;
|
|
box-shadow: $box-shadow $color-primary--dark;
|
|
}
|
|
}
|
|
|
|
.row--cards{
|
|
align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
|
|
}
|
|
.row--cards .card{
|
|
height: 100%; /* To make multiple cards next to each other 'same' height */
|
|
}
|
|
|
|
.card__header, .card__body, .card__footer{
|
|
padding: rems(24px);
|
|
}
|
|
.card__header{
|
|
background-color: $color-secondary;
|
|
}
|
|
.card__image{}
|
|
.card__image--top{}
|
|
.card__title{
|
|
font-size: rems(26px);
|
|
}
|
|
.card__body{
|
|
height: 100%; // Fill up the space of a card that's stretched
|
|
}
|
|
.card__text{}
|
|
* + .card__text{
|
|
margin-top: rems(10px);
|
|
}
|
|
.card__footer{
|
|
margin-top: auto; // Be at bottom of flexed card
|
|
background-color: $color-primary;
|
|
}
|