open-vault/ui/app/styles/core/switch.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

// This file defines the style for switch, with the nested classes: is-small, is-rounded, is-success

.switch[type='checkbox'] {
  display: inline-block;
  outline: 0;
  opacity: 0;
  position: absolute;
  user-select: none;

  + label {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: $size-6;
    justify-content: flex-start;
    line-height: 1.5;
    padding-left: 3.5rem;
    position: relative;

    &::before {
      position: absolute;
      display: block;
      top: calc(50% - 1.5rem * 0.5);
      left: 0;
      width: $size-1;
      height: $size-4;
      border: 0.1rem solid transparent;
      border-radius: $radius-large;
      background: $ui-gray-300;
      content: '';
    }

    &::after {
      background: $white;
      border-radius: $radius-large;
      content: '';
      display: block;
      height: $size-6;
      left: $size-11;
      position: absolute;
      top: calc(50% - 1rem * 0.5);
      transform: translate3d(0, 0, 0);
      transition: all 0.25s ease-out;
      width: $size-6;
    }

    &:checked::after {
      left: 1.625rem;
    }
  }
}

// is-rounded
.switch[type='checkbox'].is-rounded {
  + label {
    &::before {
      border-radius: 16px;
    }
    &::after {
      border-radius: 50%;
    }
  }
  &.is-small {
    + label {
      &::before {
        border-radius: 16px;
      }
      &::after {
        border-radius: 50%;
      }
    }
  }
}
// is-small
.switch[type='checkbox'].is-small {
  + label {
    cursor: pointer;
    display: inline-block;
    font-size: $size-8;
    font-weight: bold;
    height: 18px;
    padding-left: $size-8 * 2.5;
    position: relative;
    margin: 0 $size-11;
    &::before {
      border: 0.1rem solid transparent;
      border-radius: $radius-large;
      background: $ui-gray-300;
      display: block;
      content: '';
      height: $size-8;
      position: absolute;
      top: calc($size-8 / 5);
      width: $size-8 * 2;
    }
    &::after {
      background: $white;
      border-radius: $radius-large;
      content: '';
      display: block;
      height: $size-8 * 0.8;
      left: 0;
      position: absolute;
      top: calc($size-8 / 4);
      transform: translateX(0.15rem);
      transition: all 0.25s ease-out;
      width: $size-8 * 0.8;
      will-change: left;

      &:checked {
        left: $size-5;
      }
    }
  }
  &:checked + label::after {
    left: 0;
    transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
  }
}

// is-success
.switch[type='checkbox'].is-success:checked + label::before {
  background: $blue;
}

// focus
.switch[type='checkbox']:focus + label {
  box-shadow: 0 0 1px $blue;
}

// disabled
.switch[type='checkbox'][disabled] {
  cursor: not-allowed;
}

.switch[type='checkbox'][disabled] + label {
  opacity: 0.5;
}

.switch[type='checkbox'][disabled] + label:hover {
  cursor: not-allowed;
}

// misc.
.field-body .switch[type='checkbox'] + label {
  margin-top: 0.375em;
}