Contents

$st-width: 72px;
$st-rounded-radius: $st-width / 2;
$st-rectangle-radius: 3px;

.switch-toggle {
  @include user-select(none);
  position: relative;
  width: $st-width;

  input.switch-checkbox {
    display: none;

    &:checked + .switch-label .switch-inner {
      margin-left: 0;
    }

    &:checked + .switch-label .switch-toggle-switch {
      right: 0;
    }
  }

  label.switch-label {
    border-radius: $st-rounded-radius;
    cursor: pointer;
    display: block;
    overflow: hidden;

    .switch-inner {
      @include transition(opacity 0.5s ease);
      border-radius: 3px;
      margin-left: -100%;
      width: 200%;

      &:before, &:after {
        @include box-sizing(border-box);
        float: left;
        height: 35px;
        padding: 0;
        width: 50%;
      }

      &:before {
        content: '';
        background: $blue;
      }

      &:after {
        content: '';
        background: #DDD;
      }
    }

    .switch-toggle-switch {
      @include size(24px);
      @include position(absolute, 0px 35px 0px 0);
      @include transition(all 0.3s ease-in 0s);
      border-radius: 100%;
      margin: 6px;
      background: white;
      box-shadow: 0 0 1px 2px rgba(0,0,0,0.1);
    }
  }

  &.rectangle {
    label.switch-label {
      border-radius: $st-rectangle-radius;

      .switch-toggle-switch {
        border-radius: $st-rectangle-radius;
      }
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.0.1	source/stylesheets/refills/_switch-toggle.scss