atomatic/app/style/cards.styl

An easy to use build and development tool for Atomic Design Systems, that works with rollup.js, Browserify, webpack and many more...

.card
  overflow hidden
  box-shadow $shadowBoxDefault
  border-radius $borderRadiusDefault
  background-color $colorBackgroundDefault
  display flex
  flex-flow column
  width 100%
  & &
    border-radius none
    box-shadow none
  & + &
    margin-top ($paddingSmall * 2)

  &__head
    background $colorBackgroundInvert
    font-size 16px
    font-weight 400
    color rgba($colorText, .65)
    svg
      *:not([fill="none"])
        fill @color

  &__head
  &__body
  &__footer
    padding $paddingNormal $paddingLarge

  &__body
    flex-grow 2

  &__footer
    font-size 12.8px

  &__figure
  &__body
    overflow hidden
    &&--transparent
      background-image url($transparentBackground)
      background-size 20px
      background-position 0 0
      background-color $hexPorcelain