quasar/src/components/list/QSlideItem.styl

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

.q-slide-item
  position relative

  &__left, &__right, &__top, &__bottom
    visibility hidden
    font-size 14px
    color white

    .q-icon
      font-size 1.714em

  &__left
    background $green
    padding 8px 16px
    > div
      transform-origin left center

  &__right
    background $orange
    padding 8px 16px
    > div
      transform-origin right center

  &__top
    background $blue
    padding 16px 8px
    > div
      transform-origin top center

  &__bottom
    background $purple
    padding 16px 8px
    > div
      transform-origin bottom center

  &__content
    background white
    transition transform .2s ease-in
    user-select none
    cursor pointer