quasar/src/components/virtual-scroll/QVirtualScroll.styl

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

.q-virtual-scroll
  &:focus
    outline: 0

  &__padding
    background: linear-gradient(transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent)
    background-size: 100% 50px

    .q-table &
      tr
        height: 0 !important
      td
        padding: 0 !important

  &--horizontal
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    align-items: stretch

    .q-virtual-scroll
      &__content
        display: flex
        flex-direction: row
        flex-wrap: nowrap

      &__padding,
      &__content,
      &__content > *
        flex: 0 0 auto

      &__padding
        background: linear-gradient(to left, transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent)
        background-size: 50px 100%