2018-04-07 14:32:37 +00:00
|
|
|
mixin corner-buttons
|
2017-11-18 23:42:22 +00:00
|
|
|
display flex
|
|
|
|
|
justify-content center
|
2018-03-12 00:27:33 +00:00
|
|
|
margin-bottom content-padding
|
2018-04-07 14:32:37 +00:00
|
|
|
z-index 1
|
2018-03-12 00:27:33 +00:00
|
|
|
position absolute
|
|
|
|
|
top content-padding
|
2018-04-07 14:32:37 +00:00
|
|
|
|
|
|
|
|
.corner-buttons
|
|
|
|
|
corner-buttons
|
2018-03-12 00:27:33 +00:00
|
|
|
right content-padding
|
2017-11-18 23:42:22 +00:00
|
|
|
|
2018-04-07 14:32:37 +00:00
|
|
|
.corner-buttons-left
|
|
|
|
|
corner-buttons
|
|
|
|
|
left content-padding
|
|
|
|
|
|
2018-07-07 09:08:10 +00:00
|
|
|
.corner-buttons,
|
2017-11-30 16:57:31 +00:00
|
|
|
.corner-buttons-hide-on-mobile
|
2018-03-12 00:27:33 +00:00
|
|
|
display flex
|
2018-07-07 09:08:10 +00:00
|
|
|
flex-flow row-reverse
|
2018-03-12 00:27:33 +00:00
|
|
|
position absolute
|
|
|
|
|
top content-padding
|
|
|
|
|
right content-padding
|
2017-11-30 16:57:31 +00:00
|
|
|
|
2018-07-07 09:08:10 +00:00
|
|
|
button,
|
2018-04-24 13:20:29 +00:00
|
|
|
.button
|
2018-07-07 09:08:10 +00:00
|
|
|
margin-left 0.5rem
|
|
|
|
|
position static
|
|
|
|
|
opacity 1
|
2018-04-24 13:20:29 +00:00
|
|
|
|
2018-07-07 09:08:10 +00:00
|
|
|
< 1200px
|
|
|
|
|
.corner-buttons-hide-on-mobile
|
|
|
|
|
flex-flow row
|
2018-04-24 13:20:29 +00:00
|
|
|
|
|
|
|
|
.button
|
2018-07-07 09:08:10 +00:00
|
|
|
position absolute
|
|
|
|
|
opacity 0
|
|
|
|
|
will-change opacity
|
2018-04-24 13:20:29 +00:00
|
|
|
|
2018-07-07 09:08:10 +00:00
|
|
|
:first-child
|
|
|
|
|
opacity 1
|
2018-04-24 13:20:29 +00:00
|
|
|
|
2018-07-07 09:08:10 +00:00
|
|
|
:hover
|
|
|
|
|
.button
|
|
|
|
|
opacity 1
|
2018-04-24 13:20:29 +00:00
|
|
|
|
2018-07-07 09:08:10 +00:00
|
|
|
:nth-child(2)
|
|
|
|
|
transform translateX(-100%)
|
2018-04-24 13:20:29 +00:00
|
|
|
|
2018-07-07 09:08:10 +00:00
|
|
|
:nth-child(3)
|
|
|
|
|
transform translateX(-200%)
|
2018-04-24 13:20:29 +00:00
|
|
|
|
2018-07-07 09:08:10 +00:00
|
|
|
:nth-child(4)
|
|
|
|
|
transform translateX(-300%)
|
|
|
|
|
|
|
|
|
|
:nth-child(5)
|
|
|
|
|
transform translateX(-400%)
|
2017-12-02 20:06:15 +00:00
|
|
|
|
2018-03-12 00:27:33 +00:00
|
|
|
< 600px
|
2017-11-30 16:57:31 +00:00
|
|
|
.corner-buttons-hide-on-mobile
|
2018-03-12 00:27:33 +00:00
|
|
|
display none
|
|
|
|
|
|
|
|
|
|
.corner-buttons
|
|
|
|
|
.icon
|
|
|
|
|
margin-right 0
|
|
|
|
|
|
|
|
|
|
span
|
|
|
|
|
display none
|
