spaCy/website/assets/css/_components/_cards.sass

45 lines
1.1 KiB
Sass

// Cards - Variables
// ============================================================================
$card-border-radius : $border-radius
$card-border : 1px solid color(grey)
$card-figure-background : color(grey, light)
$card-figure-ratio : $image-ratio
$card-padding : 8%
$card-shadow-light : 0 0 5px color(grey, light)
$card-shadow : 0 0 5px color(grey)
$card-transition : $transition
// Cards - Style
// ============================================================================
// .card - card element, ideally used within grids
// .card-strong - highlighted style
// .card-figure - graphic element within card
.card
border: $card-border
border-radius: $border-radius
flex: 1
overflow: auto
padding: $card-padding
width: 100%
.card-strong
@extend .card
box-shadow: $card-shadow
transition: $card-transition
&:hover
box-shadow: $card-shadow-light
.card-figure
background: $card-figure-background
border-radius: $card-border-radius
display: block
height: 0
margin-bottom: $card-padding
overflow: hidden
padding-bottom: 50%