PDJ Brandbox

checkbox 

<div class="checkbox">
    <label class="checkbox__inner">
        <input type="checkbox" name="option" value="option">

        <span class="checkbox__spoof">
            <span class="checkbox__icon">
                <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                    <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                </svg>

            </span>
        </span>

        <span class="checkbox__label">
            Option
        </span>
    </label>
</div>
 
<div class="checkbox">
  <label class="checkbox__inner">
    <input type="checkbox" name="{{ name }}" value="{{ value }}"{{#if class}} class="{{ class }}"{{/if}}{{#if checked}} checked{{/if}}>

    <span class="checkbox__spoof">
      <span class="checkbox__icon">
        {{render '@icon-check' }}
      </span>
    </span>

    <span class="checkbox__label">
      {{ label }}
    </span>
  </label>
</div>
 
label: Option
value: option
name: option
checked: false
class: ''
  • Content: 
    .checkbox {
  position: relative;
  padding: 0;
}

.checkbox__inner {
  display: flex;
  align-items: flex-start;
}

.checkbox input[type='checkbox'] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 1.45em;
  height: 1.45em;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  appearance: none;
  box-shadow: none;
  border-radius: 0 !important;
}

.checkbox__spoof {
  transition: border-color 150ms, background-color 150ms;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.375em;
  height: 1.375em;
  margin-right: 0.75em;
  padding: 0;
  color: var(--color--neutrals-0);
  border: 1px solid var(--color--neutrals-10);
  border-radius: 0;
  background: var(--color--neutrals-0);
  cursor: pointer;

  input[type='checkbox']:checked + & {
    color: var(--color--neutrals-0);
    background-color: var(--color--neutrals-10);
  }

  .sl-options__item & {
    background-color: var(--color--neutrals-0) !important;
  }
}

.checkbox__icon {
  display: block;
  width: 0.75em;
  color: inherit;

  input[type='checkbox']:checked + .checkbox__spoof & {
    animation: 500ms 1 forwards popout;
  }

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.checkbox__label {
  transform: translateY(1px);
  line-height: 1.3;
  user-select: none;
  cursor: pointer;
}

@keyframes popout {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}
  • URL: /components/raw/checkbox/checkbox.scss
  • Filesystem Path: ../src/02_atoms/checkbox/checkbox.scss
  • Size: 1.5 KB

No notes defined.