quasar-framework
Version:
Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS
71 lines (60 loc) • 1.15 kB
text/stylus
.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