Your cart is empty
@mixin transition() {
transition: all .4s cubic-bezier(.215,.61,.355,1);
}
div <
a {
width: 100px;
height: 100px;
position: absolute;
right: 50%;
top: 50%;
margin-top: -50px;
margin-right: -50px;
background-color: #ffffff;
border-radius: 50px;
opacity: 1;
@include transition();
-webkit-box-shadow: 0px 0px 30px 0px rgba(247,149,29,0.5);
-moz-box-shadow: 0px 0px 30px 0px rgba(247,149,29,0.5);
box-shadow: 0px 0px 30px 0px rgba(247,149,29,0.5);
}
& > span {
background-color: #f5a700;
display: block;
height: 12px;
border-radius: 6px;
position: relative;
@include transition();
position: absolute;
top: 50%;
margin-top: -6px;
left: 18px;
width: 64px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
}
span {
display: block;
background-color: #ed7f00;
width: 12px;
height: 12px;
border-radius: 6px;
@include transition();
position: absolute;
left: 0;
top: 0;
}
&.left {
transform: rotate(45deg);
transform-origin: center;
.circle-left {
@include transition();
margin-left: 0;
}
.circle-right {
@include transition();
margin-left: 52px;
}
&.right {
transform: rotate(-45deg);
transform-origin: center;
}
.circle-left {
@include transition();
margin-left: 0;
}
.circle-right {
@include transition();
margin-left: 52px;
}
&:hover {
& > span {
background-color: #2faee0;
@include transition();
}
span {
@include transition();
background-color: #008ac9;
}
&.left {
.circle-left {
@include transition();
margin-left: 52px;
}
}
.circle-right {
@include transition();
margin-left: 0;
}
&.right {
.circle-left {
@include transition();
margin-left: 52px;
}
}
.circle-right {
@include transition();
margin-left: 0;
}
Continue shopping
Have an account?
Log in to check out faster.