react-tri-state-checkbox/styles/checkbox.css

Mixed-state checkbox for React

/* https://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/css/checkbox.css */

.tri-state-checkbox {
  position: relative;
  padding-left: 1.4em;
  cursor: default;
}

.tri-state-checkbox::before,
.tri-state-checkbox::after {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translate(-50%, -50%);
  content: '';
}

.tri-state-checkbox::before {
  width: 14px;
  height: 14px;
  border: 1px solid hsl(0, 0%, 66%);
  border-radius: 0.2em;
  background-image: linear-gradient(
    to bottom,
    hsl(300, 3%, 93%),
    #fff 30%
  );
}

.tri-state-checkbox:active::before {
  background-image: linear-gradient(
    to bottom,
    hsl(300, 3%, 73%),
    hsl(300, 3%, 93%) 30%
  );
}

.tri-state-checkbox[aria-checked='mixed']::before,
.tri-state-checkbox[aria-checked='true']::before {
  border-color: hsl(216, 80%, 50%);
  background: hsl(217, 95%, 68%);
  background-image: linear-gradient(
    to bottom,
    hsl(217, 95%, 68%),
    hsl(216, 80%, 57%)
  );
}

.tri-state-checkbox[aria-checked='mixed']::after {
  display: block;
  width: 8px;
  border-bottom: 0.125em solid #fff;
  transform: translate(-50%, -50%) rotateZ(45deg);
  transform-origin: center center;
}

.tri-state-checkbox[aria-checked='mixed']:active::after,
.tri-state-checkbox[aria-checked='true']::after {
  display: block;
  width: 0.25em;
  height: 0.4em;
  border: solid #fff;
  border-width: 0 0.125em 0.125em 0;
  transform: translateY(-65%) translateX(-50%) rotate(45deg);
}

.tri-state-checkbox[aria-checked='mixed']:active::before,
.tri-state-checkbox[aria-checked='true']:active::before {
  background-image: linear-gradient(
    to bottom,
    hsl(216, 80%, 57%),
    hsl(217, 95%, 68%)
  );
}

.tri-state-checkbox:focus {
  outline: none;
}

.tri-state-checkbox:focus::before {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: hsl(216, 94%, 73%);
  border-width: 3px;
  border-radius: calc(0.2em + 3px);
  box-shadow: inset 0 0 0 1px hsl(216, 80%, 50%);
}