energylink/public/sass/components/_switch.scss

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

gf-form-switch[disabled] {
  .gf-form-switch,
  .gf-form-switch-container {
    cursor: default;
    pointer-events: none !important;
    .gf-form-label {
      color: $text-color-weak;
    }
  }
}

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

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

.gf-form-switch {
  display: flex;
  position: relative;
  width: 60px;
  height: $gf-form-input-height;
  background: $switch-bg;
  border: 1px solid $input-border-color;
  border-left: none;
  border-radius: $input-border-radius;
  align-items: center;
  justify-content: center;

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

  &--transparent {
    background: transparent;
    border: 0;
    width: 40px;
  }
}

/* The slider */
.gf-form-switch__slider {
  background: $switch-slider-off-bg;
  border-radius: 8px;
  height: 16px;
  width: 29px;
  display: block;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    height: 12px;
    width: 12px;
    left: 1px;
    top: 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:checked + .gf-form-switch__slider::before {
  transform: translateX(14px);
}

.gf-form-checkbox {
  position: relative;
  display: flex;
  width: 50px;
  height: $gf-form-input-height;
  background: $switch-bg;
  border: 1px solid $input-border-color;
  border-left: none;
  border-radius: $input-border-radius;
  align-items: center;
  justify-content: center;

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

  &--transparent {
    background: transparent;
    border: none;
    width: 23px;
    height: auto;
    position: relative;
    padding-left: 8px;
  }

  &--table-cell {
    width: 20px;
    background: transparent;
    height: auto;
    border: none;
    position: relative;
    top: -5px;
  }
}

.gf-form-switch__checkbox {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  border: $checkbox-border;
  background: $checkbox-bg;
  display: flex;
  align-items: center;
  justify-content: 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;
}