quasar/src/components/fab/QFab.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.z-fab
  z-index $z-fab

.q-fab
  position relative
  vertical-align middle

  &--opened
    .q-fab__actions
      opacity 1
      transform scale(1) translate(0, 0)
      pointer-events all
    .q-fab__icon
      transform rotate(180deg)
      opacity 0
    .q-fab__active-icon
      transform rotate(0deg)
      opacity 1

  &__icon, &__active-icon
    transition opacity .4s, transform .4s
  &__icon
    opacity 1
    transform rotate(0deg)
  &__active-icon
    opacity 0
    transform rotate(-180deg)

  &__actions
    position absolute
    opacity 0
    transition all .2s ease-in
    pointer-events none
    .q-btn
      margin $fab-margin

    &--right
      transform scale(.4) translate(-100%, 0)
      top 0
      bottom 0
      left 120%

    &--left
      transform scale(.4) translate(100%, 0)
      top 0
      bottom 0
      right 120%
      flex-direction row-reverse

    &--up
      transform scale(.4) translate(0, 100%)
      flex-direction column-reverse
      justify-content center
      bottom 120%
      left 0
      right 0

    &--down
      transform scale(.4) translate(0, -100%)
      flex-direction column
      justify-content center
      top 120%
      left 0
      right 0