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

Sense UI components library

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

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

@value (
  size18,
  size20,
  size24,
  size110,
  size160,
  size240,
  size500,
  sizeFluid
) from '../../styles/variables/_size.css';

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

.checkboxContainer {
  color: colorFillPrimary;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: spaceSmall;
  cursor: pointer;
}

.checkboxContainer .disabled {
  cursor: not-allowed;
}

.horizontalCheckbox {
  flex: 1 0 size160; /*  grow, don't shrink, start with size160 width */
}

.fluidCheckbox {
  flex: 0 0 auto; /* don't grow, don't shrink, auto width */
}

.checkboxSquare {
  width: size24;
  height: size24;
  min-width: size24;
  min-height: size24;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.checkboxSquare .disabled {
  cursor: not-allowed;
  border: borderWidthTertiary solid colorFillDisabled;
}

.inputCheckbox {
  position: absolute;
  width: size24;
  height: size24;
  cursor: pointer;
  opacity: 0;
}

.checkboxSquareInner {
  box-sizing: border-box;
  height: size18;
  width: size18;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: borderRadiusXSmall;
  background-color: colorBackgroundTertiary;
}

.enabled {
  border: borderWidthTertiary solid colorBorderSecondary;
  cursor: pointer;
}

input[type='checkbox']:focus + .enabled {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

input[type='checkbox']:checked + .enabled {
  border: borderWidthNone;
  background: colorFillPrimary;
}

input[type='checkbox']:checked:focus + .enabled {
  border: borderWidthNone;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

input[type='checkbox']:indeterminate + .enabled {
  border: borderWidthNone;
  background: colorFillPrimary;
}

input[type='checkbox']:indeterminate:focus + .enabled {
  border: borderWidthNone;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

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

.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

input[type='checkbox']:checked + .disabled {
  border: borderWidthNone;
  background: colorFillDisabled;
}

input[type='checkbox']:indeterminate + .disabled {
  border: borderWidthNone;
  background: colorFillDisabled;
}

.error {
  border: borderWidthTertiary solid colorBorderDanger;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusDanger;
}

input[type='checkbox']:indeterminate + .error {
  border: borderWidthNone;
  background: colorDanger;
}

input[type='checkbox']:checked + .error {
  border: borderWidthNone;
  background: colorDanger;
}

.checkboxLabel {
  composes: formLabelMedium from '../../styles/typography.module.css';
  composes: secondary from '../../styles/typography.module.css';
}

.labelDisabled {
  color: colorTextDisabled;
}