There are no notes for this item.

<div class="control control--checkbox checkbox checkbox--default">
    <input type="checkbox" id="checkbox2" class="">
    <label for="checkbox2" class="control__name">Unselected</label>
    <div class="control__indicator"></div>
</div>

<script>
    var inputs = document.getElementsByClassName("jsPartial");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].indeterminate = true;
    }
</script>
  • Content:
    /*------------------------------------*\
        #CHECKBOX
    \*------------------------------------*/
    
    // Basic control styles
    .control {
      position: relative;
    }
    
    // Hide default browser input
    .control input {
      position: absolute;
      z-index: -2;
      opacity: 0;
    }
    
    .control__name {
      display: block;
      padding-left: 30px;
    }
    
    // Pointer-clicker when not disabled
    input:not([disabled]) ~ label {
      cursor: pointer;
    }
    
    // Custom control
    .control__indicator {
      position: absolute;
      left: 0;
      top: 2px;
      height: 13px;
      width: 13px;
      background-color: $background-default;
      border-radius: 3px;
      border: 1px solid $border-form;
      z-index: -1;
    }
    
    // Hide default browser input
    .control input:disabled ~ .control__indicator {
      background-color: $background-default;
      opacity: .5;
      pointer-events: none;
    }
    
    // Custom control
    .control__indicator:after {
      content: '';
      position: absolute;
      display: none; // Hide check
    }
    
    // Show check
    .control input:checked ~ .control__indicator:after {
      display: block;
    }
    
    // Checkbox tick
    .control--checkbox .control__indicator:after {
      left: 4px;
      top: -2px;
      width: 5px;
      height: 12px;
      border: solid $border-hover;
      border-width: 0 2px 2px 0;
      transform: rotate(27deg);
    }
    
    // Indeterminate checkbox tick
    input:indeterminate ~ .control__indicator:after {
      width: 9px;
      height: 0;
      display: block;
      transform: none;
      left: 1px;
      top: 4px;
      border-width: 0 0 3px 0;
    }
    
    // Disabled tick colour
    .control--checkbox input:disabled ~ .control__indicator:after {
      opacity: .5;
    }
    
    // Hover + Hover when checked
    .control:hover input:not([disabled]) ~ .control__indicator,
    .control:hover input:not([disabled]):checked ~ .control__indicator {
      border: 1px solid $border-default;
    }
    
    // Pressed + Pressed when checked
    .control input:not([disabled]):active ~ .control__indicator:after,
    .control input:not([disabled]):checked:active ~ .control__indicator:after {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 2px;
      border: none;
      background-color: $border-active;
      left: 2px;
      top: 2px;
      display: block;
      transform: none;
    }
    
  • URL: /components/raw/checkbox/checkbox.scss
  • Filesystem Path: components/02-atoms/04-checkbox/checkbox.scss
  • Size: 2.1 KB