From 06ce202265c7ebb2a180898e95510f5891cb5f45 Mon Sep 17 00:00:00 2001
From: Phreshhh <thatismyspecial@gmail.com>
Date: Thu, 31 Jan 2019 20:17:45 +0100
Subject: [PATCH] Switch components - stylelint fix 2 :)

---
 src/components/_forms.scss | 74 +++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 41 deletions(-)

diff --git a/src/components/_forms.scss b/src/components/_forms.scss
index 39eb6d4..6d5652f 100644
--- a/src/components/_forms.scss
+++ b/src/components/_forms.scss
@@ -136,22 +136,21 @@ select {
 
   .paper-switch,
   .paper-switch-2 {
-    float: left;
     display: block;
-    position: relative;
+    float: left;
     margin: 0 10px 0 0;
+    position: relative;
     
     input {
-      opacity: 0;
       height: 0;
       width: 0;
+      opacity: 0;
 
       &:checked + .paper-switch-slider {
         background-color: #d0dbc2;
       }
 
       &:checked + .paper-switch-slider::before {
-        -webkit-transform: translateX(26px);
         transform: translateX(26px);
       }
 
@@ -163,46 +162,46 @@ select {
 
     .paper-switch-slider {
       cursor: pointer;
-      position: absolute;
       left: 0;
-      top: 0;
       bottom: 0;
+      top: 0;
       right: 0;
-      transition: .4s;
+      position: absolute;
       border: 2px solid $primary;
       border-bottom-left-radius: 15px 255px;
       border-bottom-right-radius: 225px 15px;
       border-top-left-radius: 255px 15px;
       border-top-right-radius: 15px 225px;
+      transition: 0.4s;
 
       &::before {
         content: '';
-        position: absolute;
-        left: 4px;
         background: $secondary;
+        left: 4px;
+        position: absolute;
         border-bottom-left-radius: 15px 255px;
         border-bottom-right-radius: 225px 15px;
         border-top-left-radius: 255px 15px;
         border-top-right-radius: 15px 225px;
-        transition: .4s;
+        transition: 0.4s;
       }
 
     }
 
     .paper-switch-slider.round {
       border: 2px solid $primary;
-      border-bottom-left-radius: .7rem 1rem;
-      border-bottom-right-radius: 1rem .9rem;
+      border-bottom-left-radius: 0.7rem 1rem;
+      border-bottom-right-radius: 1rem 0.9rem;
       border-top-left-radius: 1rem 1rem;
-      border-top-right-radius: 1rem .6rem;
+      border-top-right-radius: 1rem 0.6rem;
 
       &::before {
         background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
-        left: 4px;
-        border-bottom-left-radius: .7rem 1rem;
-        border-bottom-right-radius: 1rem .9rem;
+        border-bottom-left-radius: 0.7rem 1rem;
+        border-bottom-right-radius: 1rem 0.9rem;
         border-top-left-radius: 1rem 1rem;
-        border-top-right-radius: 1rem .6rem;
+        border-top-right-radius: 1rem 0.6rem;
+        left: 4px;
       }
 
     }
@@ -215,9 +214,9 @@ select {
 
     .paper-switch-slider {
       &::before {
+        bottom: -6px;
         height: 20px;
         width: 20px;
-        bottom: -6px;
       }
 
     }
@@ -259,30 +258,27 @@ select {
 
   .paper-switch-tile {
     float: left;
-    perspective: 1000px;
     display: block;
-    transform-style: preserve-3d;
+    margin: 40px 0 0 40px;
     height: 80px;
     width: 80px;
-    margin: 40px 0 0 40px;
-    position: relative;
+    perspective: 1000px;
+    transform-style: preserve-3d;
     cursor: pointer;
-    -webkit-transform: translate(-50%, -50%);
+    position: relative;
     transform: translate(-50%, -50%);
 
     &:hover {
       .paper-switch-tile-card {
-        box-shadow: 2px 8px 4px -5px rgba(0,0,0,.2);
+        box-shadow: 2px 8px 4px -5px rgba(0, 0, 0, 0.2);
         -webkit-transform: rotateX(30deg);
         transform: rotateX(30deg);
       }
 
-      /* & :checked + .paper-switch-tile-card */
-      &:checked + .paper-switch-tile-card  {
-        -webkit-transform: rotateX(150deg);
-        transform: rotateX(150deg);
+      &:checked + .paper-switch-tile-card {
         background-color: transparent;
-        box-shadow: 0px 10px 15px -15px rgba(0,0,0,.9);
+        transform: rotateX(150deg);
+        box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.9);
       }
 
     }
@@ -291,7 +287,6 @@ select {
       display: none;
       
       &:checked + .paper-switch-tile-card {
-        -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
       }
 
@@ -300,25 +295,22 @@ select {
   }
 
   .paper-switch-tile-card {
-    position: relative;
+    background-color: transparent;
+    border-color: transparent;
     height: 100%;
     width: 100%;
-    background-color: transparent;
-    -webkit-transform-style: preserve-3d;
+    position: relative;
     transform-style: preserve-3d;
     transition: all 600ms;
-    border-color: transparent;
     
-
     div {
-      position: absolute;
+      backface-visibility: hidden;
+      line-height: 70px;
+      text-align: center;
       height: 100%;
       width: 100%;
-      text-align: center;
-      line-height: 70px;
-      -webkit-backface-visibility: hidden;
-      backface-visibility: hidden;
-      box-shadow: 2px 8px 8px -5px rgba(0,0,0,.3);
+      position: absolute;
+      box-shadow: 2px 8px 8px -5px rgba(0, 0 ,0, 0.3);
     }
 
     .paper-switch-tile-card-back {