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.
aSkelly/scss/component/_card.scss

26 lines
772 B
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: #FFF;
display: block !important; /* Unset row/col default */
}
.card:hover {
box-shadow: $box-shadow $color-bg-secondary;
}
.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 */
}