@patreon/studio/module/components/Toggle/Toggle.module.css

Patreon Studio Design System

.container {
  /* CSS variable contracts - defaults */
  --Toggle-backgroundColor: var(--global-bg-base-default);
  --Toggle-backgroundColorHover: var(--global-bg-base-hover);
  --Toggle-backgroundColorActive: var(--global-bg-base-pressed);
  --Toggle-borderColor: var(--global-border-action-default);
  --Toggle-handleColor: var(--global-content-muted-default);
  --Toggle-checkmarkScale: calc(18 / 22);
  --Toggle-handleScale: calc(18 / 22);
  --Toggle-checkmarkOpacity: 0;
  --Toggle-handleBoxShadow: var(--global-boxShadow-low);
  --Toggle-spinnerMarginLeft: calc(50% + 2px);
  --Toggle-spinnerOpacity: 0;
  --Toggle-handleTranslate: 0;

  /* Apply the variables */
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  background-color: var(--Toggle-backgroundColor);
  border: 1px solid var(--Toggle-borderColor);
  border-radius: var(--global-radius-circle);
  box-sizing: border-box;
  display: flex;
  height: 28px;
  overflow: hidden;
  padding: 0 6px;
  position: relative;
  width: 48px;
}

.container:hover {
    background-color: var(--Toggle-backgroundColorHover);
  }

.container:active {
    background-color: var(--Toggle-backgroundColorActive);
  }

/* Variant: isOn */

.container.isOn {
    --Toggle-backgroundColor: var(--global-control-surface-default);
    --Toggle-backgroundColorHover: var(--global-control-surface-hover);
    --Toggle-backgroundColorActive: var(--global-control-surface-pressed);
    --Toggle-spinnerMarginLeft: -2px;
    --Toggle-checkmarkOpacity: 1;
    --Toggle-checkmarkScale: 1;
    --Toggle-borderColor: transparent;
    --Toggle-handleColor: var(--global-control-action-default);
    --Toggle-handleTranslate: calc(100% - 2px);
    --Toggle-handleScale: 1;
  }

.container.isOn svg {
      transition-delay: var(--global-transition-fast-duration);
    }

/* Variant: disabled */

.container.disabled {
    --Toggle-backgroundColorHover: var(--Toggle-backgroundColor);
    --Toggle-backgroundColorActive: var(--Toggle-backgroundColor);
    --Toggle-handleBoxShadow: none;

    cursor: not-allowed;
    opacity: var(--global-opacity-disabled);
  }

/* Variant: isLoading */

.container.isLoading {
    --Toggle-spinnerOpacity: var(--global-opacity-disabled);
  }

.handle {
  background-color: var(--Toggle-handleColor);
  border-radius: var(--global-radius-circle);
  box-shadow: var(--Toggle-handleBoxShadow);
  color: var(--Toggle-backgroundColor);
  display: grid;
  height: 22px;
  left: 0;
  margin: 2px;
  place-items: center;
  position: absolute;
  top: 0;
  transform: translateX(var(--Toggle-handleTranslate, 0)) scale(var(--Toggle-handleScale, 1));
  transition: var(--global-transition-fast-duration) var(--global-transition-fast-easing);
  transition-property: transform, opacity;
  width: 22px;
  z-index: 2;

  /* stylelint-disable-next-line no-descending-specificity */
}

.handle svg {
    height: 14px;
    opacity: var(--Toggle-checkmarkOpacity);
    transform: scale(var(--Toggle-checkmarkScale));
    transition: var(--global-transition-regular-duration) var(--global-transition-regular-easing);
    transition-property: transform, opacity;
    width: 14px;
  }

.loadingSpinnerWrapper {
  margin: 2px;
  margin-left: var(--Toggle-spinnerMarginLeft);
  opacity: var(--Toggle-spinnerOpacity);
  position: relative;
  transform: scale(0.7);
  transform-origin: center;
  transition: var(--global-transition-fast-duration) var(--global-transition-fast-easing);
  transition-property: transform, opacity;
  z-index: 1;
}