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

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

.quasar-toast-container
  pointer-events none
  position fixed
  left 0
  right 0
  bottom 0
  z-index $z-toast
  will-change transform
  transform translateY(101%)
  transition all .3s ease-in
  margin 10px
  border-radius $generic-border-radius

  &.active
    transform translateY(0)

.quasar-toast
  pointer-events all
  padding 0 24px
  font-size .9rem

  > img, > i
    font-size 1.4rem
    vertical-align middle
    margin-right 24px
    max-height 30px
    max-width 30px
    border-radius 50%

  a
    padding 10px 0 10px 10px
    text-align center
    text-transform uppercase
    &:active
      color white
      text-shadow 0 0 5px white
    i
      font-size 1.3rem

.quasar-toast-message
  padding 20px 0

@media (min-width $layout-medium-min)
  .quasar-toast
    font-size 1.1rem
    border-radius $generic-border-radius
    max-width $layout-medium-min
    min-width ($layout-medium-min / 2.5)
    margin 24px auto
    box-shadow $shadow-3

    a
      i
        font-size 1.6rem
      &:first-of-type
        margin-left 30px

    > img, > i
      font-size 2rem
      margin-right 48px