+ /** Switch Design **/
+ .switch {
+ @include position_value(relative, null, null, null, null);
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include wh-value(50px, 15px);
+ @include margin-value(0, 0, 0, 0);
+ input {
+ opacity: 0;
+ @include wh-value(0px, 0px);
+ &:checked + .slider {
+ @include background(null, $gray-400, null, null, null);
+ &:before {
+ @include background(null, $pure-red, null, null, null);
+ left: 5px;
+ animation: pulse 2s infinite;
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+ .on {
+ @include flexbox(block, null, null, null, null, null);
+ }
+ .off {
+ @include flexbox(none, null, null, null, null, null);
+ }
+ }
+ }
+ .slider {
+ @include position_value(absolute, 0, 0, 0, 0);
+ cursor: pointer;
+ @include background(null, $gray-400, null, null, null);
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 0 1px $gray-400;
+ &.round {
+ @include roundedCorners(30);
+ &:before {
+ @include roundedCornersPercentage(50%);
+ }
+ }
+ &:before {
+ @include position_value(absolute, null, null, -2px, 0px);
+ @include wh-value(20px, 20px);
+ @include background(null, $white, null, null, null);
+ content: "";
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+ }
+ .on {
+ @include flexbox(none, null, null, null, null, null);
+ @include position_value(absolute, 50%, null, null, 35% !important);
+ }
+ .on,
+ .off {
+ @include position_value(absolute, 50%, null, null, 65%);
+ color: $primary;
+ transform: translate(-50%, -50%);
+ @include font(null, 11px, bold);
+ }
+ }
+ @-webkit-keyframes pulse {
+ 0% {
+ -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ }
+ 70% {
+ -webkit-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ }
+ }
+ @keyframes pulse {
+ 0% {
+ -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ }
+ 70% {
+ -moz-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ }
+ }
+ }