Improved corner buttons layout

This commit is contained in:
Eduard Urbach 2018-07-07 18:08:10 +09:00
parent b8c9f9e9eb
commit daabaa3bd3

View File

@ -14,41 +14,47 @@ mixin corner-buttons
corner-buttons
left content-padding
.corner-buttons,
.corner-buttons-hide-on-mobile
display flex
flex-flow row-reverse
position absolute
top content-padding
right content-padding
.button
position absolute
opacity 0
will-change opacity
:first-child
opacity 1
:hover
.button
opacity 1
:nth-child(2)
transform translateX(-100%)
:nth-child(3)
transform translateX(-200%)
:nth-child(4)
transform translateX(-300%)
:nth-child(5)
transform translateX(-400%)
.corner-buttons,
.corner-buttons-hide-on-mobile
button,
.button
margin-left 0.5rem
position static
opacity 1
< 1200px
.corner-buttons-hide-on-mobile
flex-flow row
.button
position absolute
opacity 0
will-change opacity
:first-child
opacity 1
:hover
.button
opacity 1
:nth-child(2)
transform translateX(-100%)
:nth-child(3)
transform translateX(-200%)
:nth-child(4)
transform translateX(-300%)
:nth-child(5)
transform translateX(-400%)
< 600px
.corner-buttons-hide-on-mobile