Source

iswitch / iswitch.less

// Vars ////////////////////////////////////////////////////////////////////////

@white: #fff;
@black: #000;
@blue:  #0570BF;

@switch-size: 25px;
@switch-gap:  10px;

// Mixins //////////////////////////////////////////////////////////////////////

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
      -ms-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

.linear-gradient(@direction, @startColor: #fff, @endColor: #000) {
  background-color: @endColor;
  background-image: -webkit-linear-gradient(@direction, @startColor, @endColor);
     background-image: -moz-linear-gradient(@direction, @startColor, @endColor);
      background-image: -ms-linear-gradient(@direction, @startColor, @endColor);
       background-image: -o-linear-gradient(@direction, @startColor, @endColor);
          background-image: linear-gradient(@direction, @startColor, @endColor);
  background-repeat: repeat-x;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", @startColor, @endColor)); // IE9 and down
}

// Code ////////////////////////////////////////////////////////////////////////

.switch {
  line-height: 1.0;

  input {
    display: none;
  }
  label {
    .transition(.1s);
    display: inline-block;
    color: #888;
    position: relative;
    line-height: @switch-size;
    cursor: pointer;
    z-index: 10;

    &:first-of-type {
      padding-right: @switch-size * 2 - @switch-size / 2 + @switch-gap;
    }
    &:last-of-type {
      padding-left: @switch-size * 2 - @switch-size / 2 + @switch-gap;
    }
  }
  input:checked + label {
    color: #222;
    cursor: default;
  }
  input:checked + label:first-of-type {
    padding-right: @switch-size / 2 + @switch-gap / 2;
  }
  input:checked + label:last-of-type {
    padding-left: @switch-size / 2 + @switch-gap / 2;
  }

  label:first-of-type {
    &:after {
      display: inline-block;
      position: absolute;
      content: "";
      background: lighten(@black, 60%);
      .linear-gradient(top, @blue, lighten(@blue, 30%));
      box-shadow:
        inset 2px 3px 3px fade(darken(@blue, 15%), 80%),
        inset 6px @switch-size / 2 0px fade(lighten(@blue, 7%), 80%),
        inset 0 -1px 1px fade(@black, 33%);
      border-radius: @switch-size;
      width: @switch-size * 2;
      height: @switch-size;
      margin-left: @switch-gap;
    }
    &:before{
      display: inline-block;
      position: absolute;
      content: "";
      background: lighten(@black, 80%);
      .linear-gradient(top, lighten(@black, 85%), lighten(@black, 98%));
      box-shadow:
        -1px 0px 2px fade(@black, 33%),
        inset 0px 2px 0px fade(@white, 80%),
        inset 0px -2px 0px fade(@white, 80%);
      border: 1px solid lighten(@black, 60%);
      border-radius: @switch-size;
      width: @switch-size - 2;
      height: @switch-size - 2;
      right: -@switch-size / 2 - @switch-gap / 2 + 2;
      z-index: 5;
    }
  }
}