SCSS
/*--------------------
Mixins
---------------------*/
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .1s ease-out;
}
/*--------------------
Body
---------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
}
body,
html {
height: 100%;
font-family: 'Titillium Web', sans-serif;
background: #eee;
}
/*--------------------
Switch
--------------------*/
.switch {
@include center;
width: 97px;
height: 97px;
z-index: 1;
border-radius: 50%;
background: linear-gradient(to top, #eeeeee, #e6e1df);
box-shadow: inset 0 2px 3px rgba(91, 85, 86, 0.37);
cursor: pointer;
&::before {
@include center;
content: '';
width: 88px;
height: 88px;
z-index: 2;
background: linear-gradient(to bottom, #f5f5f5, #e7e7e7);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(83, 73, 74, 0.44), 0 0 0 1px rgba(41, 41, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.77);
}
&::after {
@include center;
content: 'OFF';
z-index: 3;
font-size: 16px;
color: #73706b;
text-shadow: 0 2px 0 rgba(255, 255, 255, 1);
}
}
.switch:hover {
&::before {
background: linear-gradient(to bottom, #e7e7e7, #f5f5f5);
}
}
.switch.active {
width: 117px;
height: 117px;
background: linear-gradient(to left, #ef32d9 , #89fffd);
box-shadow: inset 0 0 7px rgba(87, 0, 10, 0.57);
transform-origin: center;
// animation: loop 1.5s linear infinite;
&::before {
background: linear-gradient(to bottom, #dbcfca, #fcf6f0);
box-shadow: 0 2px 8px rgba(183, 0, 15, 0.44), 0 0 0 1px rgba(41, 41, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.77);
}
&::after {
content: 'ON';
color: #ef32d9;
}
}
@keyframes loop {
0% {
transform: rotate(0) translate(-50%, -50%);
}
100% {
transform: rotate(360deg) translate(-50%, -50%);
}
}
