Material Switch Input

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">  
<p class="switch-input">
  <input type="checkbox" name="option-1" id="option-1" class="switch-input-focus">
  <label class="switch-input-mode" for="option-1"></label>
</p>
<p class="switch-input">
  <input type="checkbox" name="option-2" id="option-2" class="switch-input-focus" checked>
  <label class="switch-input-mode" for="option-2"></label>
</p>
<p class="switch-input">
  <input type="checkbox" name="option-3" id="option-3" class="switch-input-focus" disabled>
  <label class="switch-input-mode" for="option-3"></label>
</p>
<p class="switch-input">
  <input type="checkbox" name="option-4" id="option-4" class="switch-input-focus" checked disabled>
  <label class="switch-input-mode" for="option-4"></label>
</p>
</div>
</div>

<div class="align black">
  <div class="align-bis">
  
<p class="switch-input">
  <input type="checkbox" name="option-5" id="option-5" class="switch-input-focus black">
  <label class="switch-input-mode" for="option-5"></label>
</p>
<p class="switch-input">
  <input type="checkbox" name="option-6" id="option-6" class="switch-input-focus black" checked>
  <label class="switch-input-mode" for="option-6"></label>
</p>
<p class="switch-input">
  <input type="checkbox" name="option-6" id="option-6" class="switch-input-focus black" disabled>
  <label class="switch-input-mode" for="option-7"></label>
</p>
<p class="switch-input">
  <input type="checkbox" name="option-7" id="option-7" class="switch-input-focus black" checked disabled>
  <label class="switch-input-mode" for="option-8"></label>
</p>
</div>
</div>

SCSS

$primary : #03A9F4;

* {
  padding: 0;
}

.align{
  display: flex;
  background-color: rgb(250,250,250);
  padding: 100px 0;
  &-bis{
    margin: auto;
  }
  &.black{
    background-color:#333333;
  }
}
.switch-input{
  margin: 30px auto;
  position: relative;
  width: 30px;
  height: 16px;
  &-focus{
    display:none;
    &.black{
      + label{
        &:before{
          background-color: #BDBDBD;
        }
        &:after{
          background-color:rgba(255,255,255,0.5);
        }
      }
      &[disabled]{
        + label {
          &:before{
            background-color: #424242!important;
          }
          &:after{
            background-color: rgba(255,255,255,0.1)!important;
          }
        }
      }
    }
    &:checked{
      + label{
          &:before{
          background:$primary;
          left : calc(100% - 16px);
          box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 1px 1px 2px rgba(0,0,0,0.24);
        }
        &:after{
          background-color: rgba(3,169,244,0.5);
        }
      }
    }
    &[disabled]{
      + label{
        &:before{
          background-color: #BDBDBD!important;
        }
        &:after{
          background-color: rgba(0,0,0,0.12)!important;
        }
      }
    }
  }
  &-mode{
    &:before{
      z-index:8;
      transition: all 0.2s ease;
      width:20px;
      height:20px;
      position:absolute;
      left:-8px;
      top:0;
      content:"";
      background-color:#FAFAFA;
      border-radius: 50%;
      margin-top:-2px;
      cursor: pointer;
      box-shadow: -1px 1px 3px rgba(0,0,0,0.12), -1px 1px 2px rgba(0,0,0,0.24);
    }
    &:after{
      transition: all 0.2s ease;
      content:"";
      top:0;
      bottom: 0;
      left:0;
      right:0;
      background: rgba(0,0,0,0.38);
      border-radius: 8px;
      position:absolute;
    }
  }
}