energylink/public/sass/components/_switch.scss

/* ============================================================
  SWITCH 3 - YES NO
============================================================ */

.gf-form-switch {
  &--small {
    max-width: 2rem;
    min-width: 1.5rem;

    input + label {
      height: 25px;
    }

    input + label::before,
    input + label::after {
      font-size: $font-size-sm;
    }
  }

  &--table-cell {
    margin-bottom: 0;
    margin-right: 0;

    input + label {
      height: 3.6rem;
    }
  }
}

.gf-form-switch--transparent {
  input + label {
    background: transparent;
    border: none;
  }

  input + label::before,
  input + label::after {
    background: transparent;
    border: none;
  }

  &:hover {
    input + label::before {
      background: transparent;
    }

    input + label::after {
      background: transparent;
    }
  }
}

.gf-form-switch--search-result__section {
  min-width: 3.05rem;
  margin-right: -0.3rem;

  input + label {
    height: 1.7rem;
  }
}

.gf-form-switch--search-result__item {
  min-width: 2.7rem;

  input + label {
    height: 2.7rem;
  }
}

.gf-form-switch--search-result-filter-row__checkbox {
  min-width: 3.75rem;

  input + label {
    height: 2.5rem;
  }
}

gf-form-switch[disabled] {
  .gf-form-label,
  .gf-form-switch input + label {
    cursor: default;
    pointer-events: none !important;
    &::before,
    &::after {
      color: $text-color-faint;
      text-shadow: none;
    }
  }
}

.gf-form-switch-container {
  display: flex;
}

.gf-form-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  background: $switch-bg;
  border: 1px solid $input-border-color;
  border-left: none;

  input {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

/* The slider */
.gf-form-switch__slider {
  position: absolute;
  top: 8px;
  left: 16px;
  right: 14px;
  bottom: 10px;
  background: $switch-slider-off-bg;
  border-radius: 8px;
  height: 16px;

  &::before {
    position: absolute;
    content: '';
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background: $switch-slider-color;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: $switch-slider-shadow;
  }
}

input:checked + .gf-form-switch__slider {
  background: $switch-slider-on-bg;
}

/* input:focus + .gf-form-switch__slider { */
/*   box-shadow: 0 0 1px #2196f3; */
/* } */

input:checked + .gf-form-switch__slider::before {
  transform: translateX(14px);
}

/* The Checkbox */

.gf-form-switch__checkbox {
  position: absolute;
  left: 16px;
  height: 16px;
  width: 16px;
  border-radius: 3px;
  border: $checkbox-border;
  background: $checkbox-bg;
  top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
input:checked + .gf-form-switch__checkbox::before {
  font-family: 'FontAwesome';
  content: '\f00c';
  color: $checkbox-color;
}

input:checked + .gf-form-switch__checkbox {
  background: $checkbox-checked-bg;
  border: none;
}