custom-checkbox-radio.scss

// Overrideable variables
$ccr-size: 1em !default;
$ccr-color-outer: black !default;
$ccr-color-outer-checked: $ccr-color-outer !default;
$ccr-color-inner: black !default;
$ccr-background: #fff !default;
$ccr-background-checked: $ccr-background !default;
$ccr-border-width: 1px !default;
$ccr-border-width-focus: $ccr-border-width + 1px !default;
$ccr-border-radius-checkbox: 2px !default;
$ccr-icon-scale-checkbox: 70% !default;
$ccr-icon-scale-radio: 45% !default;
@import "./lib";
.checkbox,
.radio {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    ~ label {
      display: flex;
      line-height: 1.1;
      cursor: pointer;
      user-select: none;
      &::before {
        content: "";
        width: $ccr-size;
        height: $ccr-size;
        // outline: 1px solid; // **** Debugging ****
        background-color: $ccr-background;
        // box-shadow doesn't mess with the position of the background-image, unlike border
        box-shadow: 0 0 0 $ccr-border-width $ccr-color-outer;
        background-position: center;
        background-repeat: no-repeat;
        flex-shrink: 0;
        margin-right: 0.5em;
        transform: translateY(-15%);
      }
      // Nested inline elements won't render their whitespace,
      // what with it being flexed as a henchman so work around it:
      a {
        margin-right: 0.3em;
        margin-left: 0.3em;
      }
    }
    &:focus ~ label::before {
      box-shadow: 0 0 0 $ccr-border-width-focus $ccr-color-outer;
    }
    &:checked ~ label::before {
      background-color: $ccr-background-checked;
      box-shadow: 0 0 0 $ccr-border-width $ccr-color-outer-checked;
    }
  }
}
// Checkbox-specific
.checkbox input {
  ~ label {
    &::before {
      border-radius: $ccr-border-radius-checkbox;
    }
  }
  &:checked ~ label::before {
    background-image: svg(
      "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z' fill='#{$ccr-color-inner}' /></svg>"
    );
    background-size: $ccr-icon-scale-checkbox $ccr-icon-scale-checkbox;
  }
}
// Radio-specific
.radio input {
  ~ label {
    &::before {
      border-radius: 50%;
    }
  }
  &:checked ~ label::before {
    background-image: svg(
      "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='#{$ccr-color-inner}' /></svg>"
    );
    background-size: $ccr-icon-scale-radio $ccr-icon-scale-radio;
  }
}