quasar-framework/src/vue-components/gallery/gallery.mat.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.quasar-gallery
  width 100%
  display flex
  flex-flow row wrap

  div
    flex auto
    width 150px
    margin 0 12px 12px 0
    &.quasar-gallery-main
      flex-basis 200%

  img
    height auto
    width 100%

.quasar-gallery-slider img
  height auto
  width 100%

.quasar-gallery-slider-overlay
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  width 100%
  height 100%
  display none
  &.active
    display block

.quasar-gallery-slider-quickview
  position absolute
  bottom 0
  left 0
  right 0
  will-change transform
  transition all .3s
  transform translateY(101%)
  width 100%
  height auto
  max-height 60%
  overflow auto
  background black
  padding-top .5rem
  padding-bottom 2.2rem
  box-shadow 0 -3px 6px rgba(0, 0, 0, .16), 0 -5px 6px rgba(0, 0, 0, .23)
  text-align center

  &.active
    transform translateY(0)

  img
    opacity .5
    will-change opacity
    transition opacity .3s
    cursor pointer

  div
    margin 1px 2px
    width 100px
    display inline-block

    &.active img, img.active
      opacity 1
      border 1px solid white

body.desktop .quasar-gallery-slider-quickview img:hover
  opacity 1