From cf2deae2ea8c7edd0f0dbee16279d1c9546f2b41 Mon Sep 17 00:00:00 2001
From: Phreshhh <thatismyspecial@gmail.com>
Date: Thu, 31 Jan 2019 19:07:06 +0100
Subject: [PATCH] Switch components

---
 docs/content/docs/components/forms.md | 198 +++++++++++++++++++++++
 src/components/_forms.scss            | 218 ++++++++++++++++++++++++++
 2 files changed, 416 insertions(+)

diff --git a/docs/content/docs/components/forms.md b/docs/content/docs/components/forms.md
index faa56f1..214fb79 100644
--- a/docs/content/docs/components/forms.md
+++ b/docs/content/docs/components/forms.md
@@ -64,6 +64,105 @@ description: PaperCSS Forms
     <span>This is the second check</span>
   </label>
 </fieldset>
+<fieldset class="form-group">
+  <legend>Some Switch</legend>
+  <p>Default - standard outline style (square & circle)</p>
+  <label class="paper-switch">
+    <input id="paperSwitch4" name="paperSwitch4" type="checkbox" />
+    <span class="paper-switch-slider"></span>
+  </label>
+  <label for="paperSwitch4" class="paper-switch-label">
+    Square switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch5" class="paper-switch-label">
+    Square switch
+  </label>
+  <label class="paper-switch">
+    <input id="paperSwitch5" name="paperSwitch5" type="checkbox" checked />
+    <span class="paper-switch-slider"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label class="paper-switch">
+    <input id="paperSwitch6" name="paperSwitch6" type="checkbox" checked />
+    <span class="paper-switch-slider round"></span>
+  </label>
+  <label for="paperSwitch6" class="paper-switch-label">
+    Circle switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch7" class="paper-switch-label">
+    Circle switch
+  </label>
+  <label class="paper-switch">
+    <input id="paperSwitch7" name="paperSwitch7" type="checkbox" />
+    <span class="paper-switch-slider round"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <p>Type2 - inline style (square & circle)</p>
+  <label class="paper-switch-2">
+    <input id="paperSwitch8" name="paperSwitch8" type="checkbox" checked />
+    <span class="paper-switch-slider"></span>
+  </label>
+  <label for="paperSwitch8" class="paper-switch-2-label">
+    Square switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch9" class="paper-switch-2-label">
+    Square switch
+  </label>
+  <label class="paper-switch-2">
+    <input id="paperSwitch9" name="paperSwitch9" type="checkbox" />
+    <span class="paper-switch-slider"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label class="paper-switch-2">
+    <input id="paperSwitch10" name="paperSwitch10" type="checkbox" />
+    <span class="paper-switch-slider round"></span>
+  </label>
+  <label for="paperSwitch10" class="paper-switch-2-label">
+    Circle switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch11" class="paper-switch-2-label">
+    Circle switch
+  </label>
+  <label class="paper-switch-2">
+    <input id="paperSwitch11" name="paperSwitch11" type="checkbox" checked />
+    <span class="paper-switch-slider round"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <p>Type3 - tile style (square & circle)</p>
+  <label for="paperSwitch1" class="paper-switch-tile">
+    <input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border">Front</div>
+      <div class="paper-switch-tile-card-back border background-primary">Back</div>
+    </div>
+  </label>
+  <label for="paperSwitch2" class="paper-switch-tile">
+    <input id="paperSwitch2" name="paperSwitch2" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border background-warning">Off</div>
+      <div class="paper-switch-tile-card-back border background-secondary">On</div>
+    </div>
+  </label>
+  <label for="paperSwitch3" class="paper-switch-tile">
+    <input id="paperSwitch3" name="paperSwitch3" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border background-danger">Declined</div>
+      <div class="paper-switch-tile-card-back border background-success">Accepted</div>
+    </div>
+  </label>
+</fieldset>
 
 #### Code:
 
@@ -124,4 +223,103 @@ description: PaperCSS Forms
     <input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
   </label>
 </fieldset>
+<fieldset class="form-group">
+  <legend>Some Switch</legend>
+  <p>Default - standard outline style (square & circle)</p>
+  <label class="paper-switch">
+    <input id="paperSwitch4" name="paperSwitch4" type="checkbox" />
+    <span class="paper-switch-slider"></span>
+  </label>
+  <label for="paperSwitch4" class="paper-switch-label">
+    Square switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch5" class="paper-switch-label">
+    Square switch
+  </label>
+  <label class="paper-switch">
+    <input id="paperSwitch5" name="paperSwitch5" type="checkbox" checked />
+    <span class="paper-switch-slider"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label class="paper-switch">
+    <input id="paperSwitch6" name="paperSwitch6" type="checkbox" checked />
+    <span class="paper-switch-slider round"></span>
+  </label>
+  <label for="paperSwitch6" class="paper-switch-label">
+    Circle switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch7" class="paper-switch-label">
+    Circle switch
+  </label>
+  <label class="paper-switch">
+    <input id="paperSwitch7" name="paperSwitch7" type="checkbox" />
+    <span class="paper-switch-slider round"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <p>Type2 - inline style (square & circle)</p>
+  <label class="paper-switch-2">
+    <input id="paperSwitch8" name="paperSwitch8" type="checkbox" checked />
+    <span class="paper-switch-slider"></span>
+  </label>
+  <label for="paperSwitch8" class="paper-switch-2-label">
+    Square switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch9" class="paper-switch-2-label">
+    Square switch
+  </label>
+  <label class="paper-switch-2">
+    <input id="paperSwitch9" name="paperSwitch9" type="checkbox" />
+    <span class="paper-switch-slider"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label class="paper-switch-2">
+    <input id="paperSwitch10" name="paperSwitch10" type="checkbox" />
+    <span class="paper-switch-slider round"></span>
+  </label>
+  <label for="paperSwitch10" class="paper-switch-2-label">
+    Circle switch
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <label for="paperSwitch11" class="paper-switch-2-label">
+    Circle switch
+  </label>
+  <label class="paper-switch-2">
+    <input id="paperSwitch11" name="paperSwitch11" type="checkbox" checked />
+    <span class="paper-switch-slider round"></span>
+  </label>
+</fieldset>
+<fieldset class="form-group">
+  <p>Type3 - tile style (square & circle)</p>
+  <label for="paperSwitch1" class="paper-switch-tile">
+    <input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border">Front</div>
+      <div class="paper-switch-tile-card-back border background-primary">Back</div>
+    </div>
+  </label>
+  <label for="paperSwitch2" class="paper-switch-tile">
+    <input id="paperSwitch2" name="paperSwitch2" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border background-warning">Off</div>
+      <div class="paper-switch-tile-card-back border background-secondary">On</div>
+    </div>
+  </label>
+  <label for="paperSwitch3" class="paper-switch-tile">
+    <input id="paperSwitch3" name="paperSwitch3" type="checkbox" />
+    <div class="paper-switch-tile-card border">
+      <div class="paper-switch-tile-card-front border background-danger">Declined</div>
+      <div class="paper-switch-tile-card-back border background-success">Accepted</div>
+    </div>
+  </label>
+</fieldset>
 ```
diff --git a/src/components/_forms.scss b/src/components/_forms.scss
index 0e5887e..902146a 100644
--- a/src/components/_forms.scss
+++ b/src/components/_forms.scss
@@ -119,6 +119,224 @@ select {
       }
     }
   }
+
+  .paper-switch-label,
+  .paper-switch-2-label {
+    float:left;
+    cursor: pointer;
+  }
+
+  .paper-switch-label {
+    margin: -6px 10px 0 0;
+  }
+
+  .paper-switch-2-label {
+    margin: 0 10px 0 0;
+  }
+
+  .paper-switch,
+  .paper-switch-2 {
+    float: left;
+    position: relative;
+    display: block;
+    margin: 0 10px 0 0;
+    
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+
+      &:checked + .paper-switch-slider {
+        background-color: #d0dbc2;
+      }
+
+      &:checked + .paper-switch-slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+
+      &:focus + .paper-switch-slider {
+        box-shadow: 0 0 1px #2196f3;
+      }
+
+    }
+
+    .paper-switch-slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      -webkit-transition: .4s;
+      transition: .4s;
+      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;
+
+      &::before {
+        position: absolute;
+        content: '';
+        left: 4px;
+        -webkit-transition: .4s;
+        transition: .4s;
+        background: $secondary;
+        border-bottom-left-radius: 15px 255px;
+        border-bottom-right-radius: 225px 15px;
+        border-top-left-radius: 255px 15px;
+        border-top-right-radius: 15px 225px;
+      }
+
+    }
+
+    .paper-switch-slider.round {
+      border: 2px solid $primary;
+      border-bottom-left-radius: .7rem 1rem;
+      border-bottom-right-radius: 1rem .9rem;
+      border-top-left-radius: 1rem 1rem;
+      border-top-right-radius: 1rem .6rem;
+
+      &::before {
+        left: 4px;
+        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;
+        border-bottom-left-radius: .7rem 1rem;
+        border-bottom-right-radius: 1rem .9rem;
+        border-top-left-radius: 1rem 1rem;
+        border-top-right-radius: 1rem .6rem;
+      }
+
+    }
+
+  }
+
+  .paper-switch {
+    width: 60px;
+    height: 12px;
+
+    .paper-switch-slider {
+  
+      &::before {
+        height: 20px;
+        width: 20px;
+        bottom: -6px;
+      }
+
+    }
+
+    .paper-switch-slider.round {
+
+      &::before {
+        height: 23px;
+        width: 23px;
+        bottom: -7px;
+      }
+
+    }
+
+  }
+
+  .paper-switch-2 {
+    width: 50px;
+    height: 22px;
+
+    .paper-switch-slider {
+ 
+      &::before {
+        height: 14px;
+        width: 14px;
+        bottom: 2px;
+      }
+
+    }
+
+    .paper-switch-slider.round {
+
+      &::before {
+        height: 14px;
+        width: 14px;
+        bottom: 2px;
+      }
+
+    }
+
+  }
+
+  .paper-switch-tile {
+    float: left;
+    -webkit-perspective: 1000px;
+    perspective: 1000px;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    display: block;
+    width: 80px;
+    height: 80px;
+    position: relative;
+    margin: 40px 0 0 40px;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    
+    &:hover {
+
+      .paper-switch-tile-card {
+        -webkit-transform: rotateX(30deg);
+        transform: rotateX(30deg);
+        box-shadow: 2px 8px 4px -5px rgba(0,0,0,.2);
+      }
+
+      & :checked + .paper-switch-tile-card  {
+        transform: rotateX(150deg);
+        -webkit-transform: rotateX(150deg);
+        background-color:transparent;
+        box-shadow: 0px 10px 15px -15px rgba(0,0,0,.9);
+      }
+
+    }
+
+    input {
+      display: none;
+
+      &:checked + .paper-switch-tile-card{
+        transform: rotateX(180deg);
+        -webkit-transform: rotateX(180deg);
+      }
+
+    }
+
+  }
+
+  .paper-switch-tile-card {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transition: all 600ms;
+    transition: all 600ms;
+    border-color: transparent;
+    background-color: transparent;
+
+    div {
+      position: absolute;
+      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);
+    }
+
+    .paper-switch-tile-card-back {
+      -webkit-transform: rotateX(180deg);
+      transform: rotateX(180deg);
+    }
+
+  }
+
 }
 
 fieldset.form-group {