frontend/src/styles/components/base/fancycheckbox.scss

// Fancy Checkboxes
.fancycheckbox {
  display: inline-block;
  padding-right: 5px;
  padding-top: 3px;

  input[type=checkbox] {
    display: none;
  }

  &.is-block {
    margin: .5rem .2rem;
  }

  .check {
    cursor: pointer;
    position: relative;
    margin: auto;
    width: 18px;
    height: 18px;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);

    &:hover svg {
      stroke: $primary;
    }

    span {
      font-size: 0.8rem;
      vertical-align: top;
      padding-left: .5rem;
    }

    svg {
      position: relative;
      z-index: 1;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke: #c8ccd4;
      stroke-width: 1.5;
      transform: translate3d(0, 0, 0);
      transition: all 0.2s ease;

      path {
        stroke-dasharray: 60;
        stroke-dashoffset: 0;
      }

      polyline {
        stroke-dasharray: 22;
        stroke-dashoffset: 66;
      }
    }
  }

  &.is-disabled .check:hover svg {
    stroke: #c8ccd4;
  }

  input[type=checkbox]:checked + .check svg {
    stroke: $primary;
  }

  input[type=checkbox]:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
  }

  input[type=checkbox]:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
  }
}