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.
36 lines
1.0 KiB
SCSS
36 lines
1.0 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: 1px solid $color-bg-secondary;
|
|
border-radius: $border-radius;
|
|
box-shadow: $box-shadow $color-shadow;
|
|
padding: 1.25rem;
|
|
/* flex: 0 0 $width-card; */
|
|
background: $color-card;
|
|
|
|
display: block !important; /* Unset row/col default */
|
|
|
|
@include color-scheme(dark) {
|
|
border-color: $color-bg-secondary--dark;
|
|
box-shadow: $box-shadow $color-shadow--dark;
|
|
background: $color-card--dark;
|
|
}
|
|
}
|
|
.card:hover {
|
|
box-shadow: $box-shadow $color-bg-secondary;
|
|
|
|
@include color-scheme(dark) {
|
|
box-shadow: $box-shadow $color-bg-secondary--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 */
|
|
}
|