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 {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  border-radius: 34px;

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

/* The slider */
.gf-form-switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $dark-3;
  transition: 0.4s;

  &::before {
    position: absolute;
    content: '';
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background: $dark-4;
    transition: 0.4s;
    border-radius: 50%;
  }
}

input:checked + .gf-form-switch__slider {
  background-color: $dark-5;
}

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

input:checked + .gf-form-switch__slider:before {
  transform: translateX(26px);
  background: $blue;
}