@sinchsmb/ui-kit/src/form/Checkbox/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

import { color, shadow } from '../../theme';

export const StyledCheckbox = styled.input`
  appearance: none;
  background-color: ${color('sys/color/input/background/default')};
  border: 2px solid ${color('sys/color/input/border/default')};
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  height: 18px;
  margin: 0;
  outline: none;
  position: relative;
  transition: background-color 0.1s, border-color 0.1s;
  transition-timing-function: linear;
  width: 18px;

  &:disabled {
    background-color: ${color('sys/color/input/background/disabled')};
    border-color: ${color('sys/color/input/border/disabled')};
    cursor: not-allowed;
  }

  /* Checked checkmark */
  &:before {
    border-bottom: 2px solid ${color('sys/color/white')};
    border-right: 2px solid ${color('sys/color/white')};
    display: inline-block;
    height: 7px;
    margin: 1px 0 0 4px;
    opacity: 0;
    transform: rotate(45deg);
    transition: opacity 0.1s;
    transition-timing-function: linear;
    width: 4px;
  }

  /* Intermediate dash */
  &:after {
    background-color: ${color('sys/color/white')};
    border-radius: 2px;
    height: 2px;
    left: 2px;
    opacity: 0;
    position: absolute;
    top: 6px;
    transition: opacity 0.1s;
    transition-timing-function: linear;
    width: 10px;
  }

  &:checked {
    &:before {
      box-sizing: content-box;
      content: '';
      opacity: 1;
    }
  }

  &:indeterminate {
    &:after {
      box-sizing: content-box;
      content: '';
      opacity: 1;
    }
  }

  &:checked:disabled,
  &:indeterminate:disabled {
    background-color: ${color('sys/color/input/border/disabled')};
    border-color: ${color('sys/color/input/border/disabled')};
  }

  &:checked:not(:disabled),
  &:indeterminate:not(:disabled) {
    background-color: ${color('sys/color/primary/default')};
    border-color: ${color('sys/color/primary/default')};
  }

  &:focus-visible:not(:disabled) {
    border-color: ${color('sys/color/input/border/focus')};
    box-shadow: ${shadow('sys/shadow/focus')};
  }

  &:hover:not(:disabled) {
    background-color: ${color('comp/button/subtle/background/hover')};
  }

  &:hover:checked:not(:disabled),
  &:hover:indeterminate:not(:disabled) {
    background-color: ${color('comp/button/primary/background/hover')};
    border-color: ${color('comp/button/primary/border/hover')};
  }
`;