demarches-normaliennes/app/assets/stylesheets/toggle-switch.scss

@import "colors";
@import "constants";

// Toggle-switch
// The switch - the box around
.form label.toggle-switch {
  position: relative;
  display: inline-block;
  height: 24px;
  margin: 0;
  margin-right: 15px;

  margin-bottom: $default-fields-spacer;

  &.small-margin {
    margin-bottom: $default-spacer;
  }

  &.no-margin {
    margin-bottom: 0;
  }
}

// Hide default HTML checkbox
.form label.toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

// The control
.toggle-switch-control {
  position: absolute;
  width: 47px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $border-grey;
  transition: 0.4s;
  border: 1px solid transparent;
}

.toggle-switch-control::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 1px;
  bottom: 1px;
  background-color: $white;
  transition: 0.4s;
}

input:checked + .toggle-switch-control {
  background-color: $green;
}

input:focus + .toggle-switch-control {
  border-color: $blue-france-500;
  box-shadow: 0px 0px 2px 1px $blue-france-500;
}

input:checked + .toggle-switch-control::before {
  transform: translateX(23px);
}

.toggle-switch-label {
  margin-left: 47px;
  font-size: 16px;
  font-weight: normal;
}

.toggle-switch-label.on {
  color: $green;
}

.toggle-switch-label.off {
  color: $grey;
}

.toggle-switch-checkbox:checked ~ .toggle-switch-label.off {
  display: none;
}

.toggle-switch-checkbox:not(:checked) ~ .toggle-switch-label.on {
  display: none;
}

// Rounded control
.toggle-switch-control.round {
  border-radius: 24px;
}

.toggle-switch-control.round::before {
  border-radius: 50%;
}