@cimpress/react-components/dist/esm/src/Checkbox/styles.js

React components to support the MCP styleguide

import { css } from '@emotion/css';
import { coal, teal, alloy } from '../colors';
const createStyle = ({ checkbox, label }) => css `
  ${checkbox} {
    position: absolute; // take it out of document flow
    opacity: 0; // hide it
    margin: 10px 0;

    & + ${label} {
      position: relative;
      cursor: pointer;
      padding: 0;
      font-weight: 400;
      display: inline-block;
    }

    // Box.
    & + ${label}:before {
      content: '';
      margin-right: 10px;
      display: inline-block;
      vertical-align: text-top;
      background: white;
      width: 18px;
      height: 18px;
    }

    // Default box when not checked, indeterminate, hovered, focused, or disabled
    &:not(:checked):not(.focusable-checkbox-indeterminate):not(:hover):not(:focus):not(:disabled) + ${label}:before {
      border: 2px solid ${coal};
      border-radius: 2px;
    }

    // Hovered box when not disabled, or Focused box when not checked
    &:not(:disabled):hover + ${label}:before, &:not(:checked):focus + ${label}:before {
      border: 2px solid ${teal.base};
      border-radius: 2px;
    }

    // Focused box when checked or indeterminate
    &:focus + ${label}:before {
      box-shadow: 0px 0px 3px ${teal.base};
    }

    // Box checked
    &:checked + ${label}:before, &.focusable-checkbox-indeterminate + ${label}:before {
      background: ${teal.base};
      border-radius: 2px;
      outline: 0;
    }

    // Disabled state ${label}.
    &:disabled + ${label} {
      color: ${alloy};
      cursor: auto;
    }

    // Disabled box when not checked
    &:not(:checked):disabled + ${label}:before {
      box-shadow: none;
      border: 2px solid ${alloy};
    }

    // Disabled box when checked or indeterminate
    &:checked:disabled + ${label}:before, &.focusable-checkbox-indeterminate:disabled + ${label}:before {
      background: ${alloy};
    }

    &:not(:checked).focusable-checkbox-indeterminate + ${label}:after {
      content: '';
      position: absolute;
      left: 4px;
      top: 12px;
      color: white;
      border: 1px solid white;
      border-radius: 2px;

      width: 10px;
      height: 1px;
    }

    &:checked + ${label}:after {
      content: 'L';
      position: absolute;
      left: 6px;
      top: -1px;
      color: white;
      font-weight: 500;
      transform: scaleX(-1) rotate(-45deg);
    }
  }
`;
export default createStyle;
//# sourceMappingURL=styles.js.map