89 lines
1.2 KiB
Stylus
Raw Normal View History

.grid
display flex
flex-flow row wrap
justify-content center
float none !important
.grid-cell
2016-11-19 19:31:28 +00:00
position relative
2016-11-19 19:07:10 +00:00
flex-grow 0
flex-shrink 0
width 16vw
height 9vw
min-width 90px
min-height 127px
max-width 200px
max-height 282px
border-radius 3px
background-size cover
background-position 50% 50%
margin 0.5rem
2016-11-21 03:45:52 +00:00
&:hover
.backside-card
transform rotateY(180deg)
.front
opacity 0
.back
opacity 1
// .grid-icon
// transform scale(1.3)
.ui
uiElement()
2016-11-19 19:31:28 +00:00
.scale-out
&:hover
transform scale(1.02)
.backside-card
2016-11-21 03:45:52 +00:00
width 100%
height 100%
2016-11-19 19:31:28 +00:00
transition all transitionSpeed ease-in-out
.front
position absolute
left 0
top 0
opacity 1
transition opacity transitionSpeed ease
.back
position absolute
left 0
top 0
opacity 0
transition opacity transitionSpeed ease
transform rotateY(180deg)
.grid-anime
border none
&:hover
border none
.grid-text
width 100%
height 100%
display flex
flex-flow column
align-items center
justify-content center
font-size 1rem
color rgb(160, 160, 160)
.grid-icon
font-size 2.5rem
margin-top 2rem
margin-bottom 0.7rem
color linkColor
.grid-image
width 100%
height 100%
margin 0
2016-11-19 19:31:28 +00:00
border-radius 3px
object-fit cover