blaze/scss/components.toggles.scss

@import "mixins/components.toggles";

.c-toggle {
  @include grid;
  @include grid--center;
  width: auto;
  cursor: pointer;
  user-select: none;

  input:not(:checked) + .c-toggle__track {
    background-color: $toggle-track-unchecked-background-color;

    .c-toggle__handle {
      transform: translateZ(0);
    }
  }

  input:disabled + .c-toggle__track {
    background-color: $toggle-track-disabled-background-color;
    cursor: not-allowed;

    .c-toggle__handle {
      background-color: $toggle-handle-disabled-background-color;
      cursor: not-allowed;
    }
  }
}

.c-toggle--brand .c-toggle__track {
  @include toggle__track--background-color($toggle-track-brand-background-color);
}

.c-toggle--info .c-toggle__track {
  @include toggle__track--background-color($toggle-track-info-background-color);
}

.c-toggle--warning .c-toggle__track {
  @include toggle__track--background-color($toggle-track-warning-background-color);
}

.c-toggle--success .c-toggle__track {
  @include toggle__track--background-color($toggle-track-success-background-color);
}

.c-toggle--error .c-toggle__track {
  @include toggle__track--background-color($toggle-track-error-background-color);
}

.c-toggle input {
  display: none;
}

.c-toggle__track {
  @include grid__cell;
  @include grid__cell--width-fixed;
  @include toggle__track--background-color;
  position: relative;
  width: 1em;
  height: .5em;
  margin: $toggle-margin;
  border-radius: $toggle-track-border-radius;
}

.c-toggle__handle {
  position: absolute;
  top: -.25em;
  left: 0;
  width: 1em;
  height: 1em;
  transform: translateX(100%);
  border-radius: $toggle-handle-border-radius;
  background-color: $toggle-handle-background-color;
  box-shadow: $toggle-handle-box-shadow;
}