<div class="form-item form-item--checkbox">
    <input type="checkbox" id="alternate" name="example-checkbox" class="checkbox checkbox--alternate">
    <label for="alternate">
    Alternate checkbox
    
  </label>
</div>
<div class="form-item form-item--checkbox">
  <input type="checkbox" id="{{id}}"{{#if name}} name="{{name}}"{{/if}} class="checkbox checkbox--{{modifier}}{{#if redirectUrl}} js-form-item-redirect{{/if}}"{{#if checked}} checked="true"{{/if}}{{#if redirectUrl}} data-redirect-url="{{redirectUrl}}"{{/if}}>
  <label for="{{id}}">
    {{#if image}}<img class="checkbox__image" src="{{image}}">{{/if}}{{{label}}}
    {{#if labelIcon}}{{render (dynamicVariant 'icons' labelIcon)}}{{/if}}
  </label>
</div>
{
  "id": "alternate",
  "name": "example-checkbox",
  "modifier": "alternate",
  "label": "Alternate checkbox"
}
  • Content:
    (function (window) {
      'use strict';
    
      const redirectCheckboxes = document.querySelectorAll('.js-form-item-redirect');
    
      function redirectPage(e) {
        const redirectUrl = e.target.closest('.js-form-item-redirect').getAttribute('data-redirect-url');
        if (redirectUrl) {
          window.location.href = redirectUrl;
        }
      }
    
      function init() {
        for (let i = 0; i < redirectCheckboxes.length; i++) {
          redirectCheckboxes[i].addEventListener('click', redirectPage);
        }
      }
    
      init();
    })(this);
    
  • URL: /components/raw/checkbox/checkbox.js
  • Filesystem Path: src/components/01-elements/form-items/checkbox/checkbox.js
  • Size: 506 Bytes
  • Content:
    // https://codepen.io/CreativeJuiz/pen/BiHzp
    
    .checkbox {
      position: absolute !important;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      word-wrap: normal;
    }
    
    .checkbox ~ label {
      @include text-label($color-darkest);
      display: inline-block;
      position: relative;
      cursor: pointer;
      box-sizing: border-box;
    
      a {
        transition: color $transition-standard;
        color: $color-darkest;
        font-weight: $font-weight-bold;
        text-decoration: none;
    
        &:hover {
          color: $color-primary;
        }
      }
    
      .icon {
        position: absolute;
        top: 0;
        padding-left: 10px;
      }
    }
    
    .checkbox--default ~ label {
      padding-left: 30px;
      line-height: 20px;
    }
    
    .checkbox--alternate ~ label {
      padding-left: 40px;
      line-height: 30px;
    }
    
    .checkbox ~ label:before {
      position: absolute;
      top: 50%;
      width: 20px;
      height: 20px;
      transform: translateY(-50%);
      content: '';
      box-sizing: border-box;
    }
    
    .checkbox--default ~ label:before {
      left: 0;
      border: 1px solid $color-medium-dark;
      background: $color-white;
    }
    
    .checkbox--alternate ~ label:before {
      left: 5px;
      background: $color-medium-light;
    }
    
    .checkbox ~ label:after {
      position: absolute;
      top: 50%;
      transition: opacity .1s, transform .1s;
      content: '';
    }
    
    .checkbox--default ~ label:after {
      left: 4px;
      width: 12px;
      height: 12px;
      background-color: $color-medium-light;
    }
    
    .checkbox--alternate ~ label:after {
      left: 0;
      width: 30px;
      height: 30px;
      border: 2px solid $color-medium-light;
      box-sizing: border-box;
    }
    
    .checkbox:not(:checked) ~ label:after {
      transform: scale(0);
      opacity: 0;
    }
    
    .checkbox:checked ~ label:after {
      transform: scale(1) translateY(-50%);
      opacity: 1;
    }
    
    .checkbox:not(:checked) ~ label:hover:after {
      @include breakpoint($breakpoint-xl) {
        transform: scale(1) translateY(-50%);
        opacity: 1;
      }
    }
    
    .checkbox--default:checked ~ label:after {
      background-color: $color-primary;
    }
    
    .checkbox--alternate:checked ~ label:after {
      border-color: $color-primary;
    }
    
    .checkbox--switch {
      & ~ label {
        display: block;
        position: relative;
        margin: 0;
        padding-right: 64px;
        color: $color-dark;
        font-size: 1.9rem;
        font-weight: bold;
        line-height: 50px;
    
        &:before {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: 54px;
          height: $gutter-width-half;
          margin: $gutter-width 0;
          transform: unset;
          border-radius: $gutter-width-half / 2;
          background: $color-light;
        }
    
        &:after {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: 30px;
          height: 30px;
          margin: $gutter-width-half 0;
          padding: 0;
          transition: color .1s, transform .1s;
          border-radius: 50%;
          box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .15);
        }
      }
    
      &:not(:checked) {
        & ~ label {
          &:after {
            transform: scale(1) translate(-24px, 0);
            background: $color-dark;
            opacity: 1;
          }
    
          &:hover:after {
            @include breakpoint($breakpoint-xl) {
              transform: scale(1) translate(-24px, 0);
            }
          }
        }
      }
    
      &:checked {
        & ~ label {
          &:after {
            transform: scale(1) translate(0, 0);
            background: $color-primary;
          }
        }
      }
    }
    
    .checkbox__image {
      width: 140px;
      margin-right: 5px;
      float: left;
      vertical-align: middle;
    }
    
    // Accessibility
    
    .checkbox--default:focus ~ label:before {
      border: 1px solid $color-dark;
    }
    
  • URL: /components/raw/checkbox/checkbox.scss
  • Filesystem Path: src/components/01-elements/form-items/checkbox/checkbox.scss
  • Size: 3.5 KB

There are no notes for this item.