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 none

  &__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%