quasar/src/components/dialog-bottom-sheet/BottomSheet.styl

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

.q-bottom-sheet
  padding-bottom 8px

  &__avatar
    border-radius 50%

  &--list
    width 400px

    .q-icon, img
      font-size 24px
      width 24px
      height 24px

  &--grid
    width 700px

    .q-bottom-sheet__item
      padding 8px
      text-align center
      min-width 100px

    .q-icon, img, .q-bottom-sheet__empty-icon
      font-size 48px
      width 48px
      height 48px
      margin-bottom 8px

    .q-separator
      margin 12px 0

  &__item
    flex 0 0 (round(1 / 3 * 100, 4))%

@media (min-width $breakpoint-sm-min)
  .q-bottom-sheet__item
    flex 0 0 (round(1 / 4 * 100, 4))%