Partystreusel

Switch 

<div class="switch">
    <input class="switch__input" type="checkbox" name="Switch " id="switchid" />
    <label class="switch__label" for="switchid">
        <span class="switch__text">Label</span>
    </label>
</div>
 
<div class="switch">
  <input class="switch__input" type="checkbox" name="Switch {{@index}}" id="switchid{{@index}}"/>
  <label class="switch__label" for="switchid{{@index}}">
    <span class="switch__text">{{label}}</span>
    {{#if show-text}}
      <span class="switch__active" aria-hidden="true">Yes</span>
      <span class="switch__inactive" aria-hidden="true">No</span>
    {{/if}}
  </label>
</div>
 
{
  "label": "Label"
}
  • Content: 
    $switch__width: rem(80);
$switch__height: rem(40);
$switch__inner-space: rem(4);

$switch__radius: $switch__height;
$switch__knob-size: $switch__height - $switch__inner-space * 2;

.switch {
  display: inline-block;
  position: relative;
  margin-bottom: rem(18);
  cursor: pointer;
  height: $switch__height;
  width: $switch__width;
  user-select: none;
  -webkit-tap-highlight-color: rgba($color__dark, 0);
}

.switch__label {
  display: block;
  position: relative;
  height: $switch__height;
  width: 100%;
  cursor: pointer;
  background: $color__accent;
  border-radius: $switch__radius;
  transition: all 0.15s ease-out;
  transform: translate3d(0, 0, 0);

  &::after {
    content: '';
    display: block;
    background: $color__bright;
    position: absolute;
    top: $switch__inner-space;
    left: $switch__inner-space;
    width: $switch__knob-size;
    height: $switch__knob-size;
    border-radius: $switch__radius;
    transition: all 0.15s ease-out;
    transform: translate3d(0, 0, 0);
  }
}

.switch__input {
  display: none;
}

.switch__text {
  @include hide-text;
}

.switch__active,
.switch__inactive {
  color: $color__bright;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.switch__active {
  display: none;
  left: 15%;
}

.switch__inactive {
  right: 15%;
}

// STATES
.switch:hover {
  .switch__label {
    background: $color__accent--dark;
  }
}

.switch__input:checked {
  + .switch__label {
    background: $color__brand--one;

    &::after {
      left: $switch__width - $switch__knob-size - $switch__inner-space;
    }

    // stylelint-disable selector-max-specificity
    .switch__inactive {
      display: none;
    }

    .switch__active {
      display: inline;
    }
    // stylelint-enable selector-max-specificity
  }
}
  • URL: /components/raw/switch/_switch.scss
  • Filesystem Path: patterns/02-molecules/switch/_switch.scss
  • Size: 1.8 KB

There are no notes for this item.