Contents

.label-switch {
  $action-color: #477DCA !default;
  $base-background-color: white !default;
  $switch-width: 52px;
  $switch-padding: 2px;
  $switch-height: 32px;
  $switch-radius: $switch-height;
  $knob-size: $switch-height - ($switch-padding * 2);
  $knob-radius: $switch-height - ($switch-padding * 2);
  $knob-width: $knob-size;
  $switch-background: $base-background-color;
  $switch-border-background: darken($base-background-color, 9%);
  $switch-shadow: 0 2px 5px transparentize(black, 0.6);

  border-radius: $switch-radius;
  cursor: pointer;
  display: inline-block;
  height: $switch-height;
  position: relative;
  width: $switch-width;

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

    + .checkbox {
      background: $switch-border-background;
      border: 0;
      border-radius: $switch-radius;
      cursor: pointer;
      height: $switch-height;
      margin: 0;
      padding: 0;
      position: relative;
      transition: all 0.3s ease;
      width: $switch-width;
      z-index: 0;

      &::before {
        @include position(absolute, 2px 0 0 2px);
        background: $switch-background;
        border-radius: $switch-radius;
        content: "";
        height: $knob-radius;
        transform: scale(1);
        transition: all 0.3s ease;
        width: $switch-width - ($switch-padding * 2);
        z-index: 1;
      }

      &::after {
        @include position(absolute, 2px 0 0 2px);
        @include size($knob-size);
        background: $switch-background;
        border-radius: $knob-radius;
        box-shadow: $switch-shadow;
        content: "";
        transition: all 0.3s ease;
        z-index: 2;
      }
    }

    &:checked {
      + .checkbox {
        background: $action-color;

        &::before {
          transform: scale(0);
        }

        &::after {
          left: $switch-width - $knob-width - ($switch-padding);
        }
      }
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.2.0	source/stylesheets/refills/_switch.scss