@spaced-out/ui-design-system/lib/components/Toggle/Toggle.module.css

Sense UI components library

@value (
  borderWidthNone,
  borderWidthTertiary,
  borderRadiusMedium,
  borderRadiusLarge
) from '../../styles/variables/_border.css';

@value (
  colorBackgroundTertiary,
  colorBorderSecondary,
  colorFillPrimary,
  colorFillDisabled,
  colorFocusPrimary,
  colorBorderSecondary
) from '../../styles/variables/_color.css';

@value (
  motionDurationSlow
) from '../../styles/variables/_motion.css';

@value (
  spaceNone,
  spaceXXSmall,
  spaceMedium
) from '../../styles/variables/_space.css';

@value (
  shadowBoxShadow1X,
  shadowBoxShadow1Y,
  shadowBoxShadow1Blur,
  shadowBoxShadow1Spread,
  shadowBoxShadow1Color ) from '../../styles/variables/_shadow.css';

@value (
  size10,
  size18,
  size24,
  size36,
  size40
) from '../../styles/variables/_size.css';

.container {
  position: relative;
  display: flex;
  gap: spaceMedium;
  height: size24;
  align-items: center;
  cursor: pointer;
}

.disabled {
  cursor: not-allowed;
}

.toggleWrap input[type='checkbox'] {
  opacity: 0;
  position: absolute;
  width: size36;
  height: size18;
}

.toggleWrap input[type='checkbox']:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.toggleWrap {
  width: size40;
  height: size24;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle {
  position: relative;
  width: size36;
  height: size18;
  box-sizing: border-box;
  cursor: pointer;
  transition: motionDurationSlow;
  background: colorBorderSecondary;
  border-radius: borderRadiusLarge;
}

.toggle::before {
  position: absolute;
  content: '';
  height: size10;
  width: size10;
  margin: auto;
  top: spaceNone;
  bottom: spaceNone;
  left: spaceXXSmall;
  transition: motionDurationSlow;
  background: colorBackgroundTertiary;
  border-radius: borderRadiusMedium;
}

.container input:checked + .toggle::before {
  transform: translateX(size18);
}

.container input:checked + .toggle {
  background-color: colorFillPrimary;
}

.container input:focus + .toggle {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.container input:active + .toggle {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

/* disabled/unchecked */
.disabledButton {
  pointer-events: none;
  cursor: not-allowed;
  background: colorFillDisabled;
}

.disabledButton::before {
  background: colorBorderSecondary;
}

/* disabled/checked */
.container input[type='checkbox']:checked + .disabled {
  border: borderWidthNone;
  background: colorFillDisabled;
  cursor: not-allowed;
}

.container input[type='checkbox']:checked + .disabled::before {
  background: colorBorderSecondary;
}

.toggleLabel {
  composes: formLabelMedium from '../../styles/typography.module.css';
  composes: secondary from '../../styles/typography.module.css';
  margin-left: spaceNone;
}