quasar-framework/src/components/card/card.ios.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-card
  border-radius $generic-border-radius
  box-shadow $card-shadow
  vertical-align top

  > div:first-child
    border-top-left-radius inherit
    border-top-right-radius inherit
  > div:last-child
    border-bottom-left-radius inherit
    border-bottom-right-radius inherit

  > .q-list
    border 0

.q-card-separator
  background $card-separator-color
  height 1px
  &.inset
    margin 0 16px

.q-card-container
  padding 16px

.q-card-title
  font-size 18px
  font-weight 400
  letter-spacing normal
  line-height 2rem
  &:empty
    display none
.q-card-subtitle, .q-card-title-extra
  font-size 14px
  color $card-faded-color
  .q-icon
    font-size 24px

.q-card-main
  font-size 14px
.q-card-primary + .q-card-main
  padding-top 0

.q-card-actions
  padding 8px
  .q-btn
    padding 0 8px
.q-card-actions-horiz
  .q-btn:not(:last-child)
    margin-right 8px
.q-card-actions-vert
  .q-btn + .q-btn
    margin-top 4px

.q-card-media
  overflow hidden
  > img
    display block
    width 100%
    max-width 100%
    border 0
.q-card-media-overlay
  color white
  background $card-overlay-color
  .q-card-subtitle
    color white

.q-card-dark
  .q-card-separator
    background $card-dark-separator-color
  .q-card-subtitle, .q-card-title-extra
    color $card-dark-faded-color