Improved corner buttons layout
This commit is contained in:
parent
b8c9f9e9eb
commit
daabaa3bd3
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user