responsivewebframework/src/less/switch.less

Jalasoft Foundation Front End Framework ========================================

// Switch

input[type="checkbox"][class*="switch"] {
  display: none;

  &+label {
    display: inline-flex;

    cursor: pointer;
    position: relative;
    margin: @margin-component;
    margin-left: 16px;
    width: 32px;
    height: 16px;
    border-radius: 16px;
    background-color: @dividers-color;

    webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    transition: background-color 0.5s;

    &:before {
      position: absolute;
      top:  0;
      left: 0;
      width: 16px;
      height: inherit;
      border-radius: 16px;
      background-color: rgb(165, 200, 165);
      content: "";


      -webkit-transition: width 0.5s;
      -moz-transition: width 0.5s;
      -ms-transition: width 0.5s;
      -o-transition: width 0.5s;
      transition: width 0.5s;
    }

    &:after {
      position: absolute;
      content: "";
      top:  -1px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 16px;
      border : solid 1px @disabled-color;
      background-color: rgb(255, 255, 255);

      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
    }

    &>div {
      margin-left: 26px;
      width: 52px;
      height: 30px;
      position: absolute;
      left: -37px;
      top: -8px;
    }
  }

  &:checked+label {
    &:before {
      width: 32px;
    }

    &:after {
      margin-left: 16px;
      background-color: rgb(105, 170, 110);
      border : solid 1px rgb(105, 170, 110);
    }
  }
}