quasar-framework/src/components/action-sheet/action-sheet.ios.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

$action-sheet-background       ?= $light
$action-sheet-border-radius    ?= 13px
$action-sheet-max-width        ?= 95%
$action-sheet-margin-bottom    ?= .6rem
$action-sheet-font-size        ?= 1.3rem
$action-sheet-avatar-padding   ?= .6rem 1.1rem
$action-sheet-hover-background ?= #d0d0d0

.quasar-action-sheet-gallery
  > div
    padding $action-sheet-avatar-padding
    border-radius $generic-border-radius
    transition all .3s
    &:hover
      background $action-sheet-hover-background
  i, img
    font-size 2rem
    margin-bottom 5px
  .avatar
    width 50px
    height 50px

.quasar-action-sheet
  border-radius $action-sheet-border-radius
  background $action-sheet-background
  max-width $action-sheet-max-width
  margin-left auto
  margin-right auto
  margin-bottom $action-sheet-margin-bottom
  overflow hidden

  .modal-header
    border-bottom 2px solid $grey-4
    padding-bottom 15px !important

  .item-link
    font-size $action-sheet-font-size
    &:first-child
      margin-top 0
    &:last-child
      margin-bottom 0
    &:not(:last-child)
      border-bottom 1px solid $grey-4

.quasar-modal-actions-enter, .quasar-modal-actions-leave-active
  opacity 0
  .modal-content
    transform translateY(101%)