PDJ Brandbox

video-bg 

<div class="toggle">
    <input class="toggle__checkbox" type="checkbox" id="toggle-toggle-1">
    <label class="toggle__label" for="toggle-toggle-1">Lorem ipsum</label>
</div>
 
<div class="toggle">
  <input class="toggle__checkbox" type="checkbox" id="toggle-{{id}}"{{#if checked}} checked{{/if}}>
  <label class="toggle__label" for="toggle-{{id}}">{{label}}</label>
</div>
 
id: toggle-1
label: Lorem ipsum
  • Content: 
    .toggle {
  display: inline-flex;

  &__checkbox {
    position: absolute;
    left: -9999px;

    &:checked {
      &+ .toggle__label {
        &:before {
          background: var(--color--action);
        }
        &:after {
          left: calc(var(--gap--16) - var(--gap--1));
          transform: translateX(-100%);
        }
      }
    }
  }

  &__label {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    position: relative;

    &:before {
      background: var(--color--neutrals-2);
      border-radius: var(--gap--8);
      content: '';
      display: inline-flex;
      height: var(--gap--8);
      margin-right: var(--gap--4);
      width: var(--gap--16);
      transition: background-color 300ms;
    }
    &:after {
      background: var(--color--neutrals-0);
      border-radius: 100%;
      content: '';
      display: block;
      height: var(--gap--6);
      position: absolute;
      left: var(--gap--1);
      transition: left 300ms, transform 300ms;
      top: var(--gap--1);
      width: var(--gap--6);
    }
  }
}
  • URL: /components/raw/toggle/toggle.scss
  • Filesystem Path: ../src/02_atoms/toggle/toggle.scss
  • Size: 1.1 KB

No notes defined.