Sha256: fa3576b2dfb0270a31180527d0acd715d56cc4756bfdc657ab6ca22b04298683

Contents?: true

Size: 1.9 KB

Versions: 1

Compression:

Stored size: 1.9 KB

Contents

.cards
  +display(flex)
  +flex-wrap(wrap)
  +justify-content(space-between)

.card
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default
  $base-background-color: white !default
  $base-spacing: 1.5em !default
  $base-accent-color: #477DCA !default
  $base-link-color: $base-accent-color !default
  $dark-gray: #333 !default
  $base-font-color: $dark-gray !default
  //////////////////////////////////////////////////////////////////////////////////
  $card-border-color: $base-border-color
  $card-border: 1px solid $card-border-color
  $card-background: lighten($card-border-color, 10%)
  $card-header-background: $card-background
  $card-hover-background: lighten($card-background, 5%)
  $card-image-background: #DBD199
  $card-image-hover-background: lighten($card-image-background, 5%)
  $card-margin: 1em
  +flex-basis(15em)
  +flex-grow(1)
  +transition(all 0.2s ease-in-out)
  background-color: $card-background
  border: $card-border
  cursor: pointer
  margin: 0 $card-margin $base-spacing $card-margin
  position: relative
  position: relative
  .card-image
    overflow: hidden
    max-height: 150px
    img
      +transition(all 0.2s ease-in-out)
      background: $card-image-background
      width: 100%
  .card-header
    +transition(all 0.2s ease-in-out)
    background-color: $card-header-background
    font-weight: bold
    line-height: 1.5em
    padding: ($base-spacing / 3) ($base-spacing / 2)
  .card-copy
    font-size: 0.9em
    line-height: 1.5em
    padding: ($base-spacing / 2) ($base-spacing / 2)
    p
      margin: 0 0 ($base-spacing / 2)
  &:focus,
  &:hover
    background-color: $card-hover-background
    .card-image img
      background: $card-image-hover-background
    .card-header
      background-color: $card-hover-background
  &:active
    background-color: $card-background
    .card-header
      background-color: $card-background

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
breezeblocks-0.0.2 source/stylesheets/breezeblocks/_cards.sass