vuetify/src/stylus/components/_cards.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'
@import '../theme'

/* Themes */
card($material)
  background-color: $material.cards
  color: $material.text.primary

theme(card, "card")

.card
  display: block
  border-radius: $card-border-radius
  min-width: 0
  position: relative
  text-decoration: none
  elevation(1)

  > *:first-child:not(.btn)
    border-top-left-radius: inherit
    border-top-right-radius: inherit

  > *:last-child:not(.btn)
    border-bottom-left-radius: inherit
    border-bottom-right-radius: inherit

  &--raised
    elevation(3)

  &--tile
    border-radius: 0

  &--flat
    elevation(0)

  &--hover
    cursor: pointer
    transition: all .4s cubic-bezier(.25, .8, .25, 1)
    transition-property: box-shadow

    &:hover
      elevation(8)

  &__title
    align-items: center
    display: flex
    flex-wrap: wrap
    padding: 16px

    &--primary
      padding-top: 24px

  &__text
    padding: 16px
    width: 100%

  &__media
    display: flex
    overflow: hidden
    position: relative

    img
      width: 100%

    &__background
      border-radius: inherit
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%

    &__content
      display: flex
      flex: 1 1 auto
      position: relative

  &__actions
    align-items: center
    display: flex
    padding: 8px 4px

    > *,
    .btn
      margin: 0 4px