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

React components to support the MCP styleguide

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const css_1 = require("@emotion/css");
const colors_1 = require("../colors");
const createStyle = ({ checkbox, label }) => (0, css_1.css) `
  ${checkbox} {
    position: absolute; // take it out of document flow
    opacity: 0; // hide it
    margin: 10px 0;

    & + ${label} {
      position: relative;
      display: inline-flex;
      height: 18px;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      vertical-align: middle;
      cursor: pointer;
      padding: 0;
      font-weight: 400;
      color: ${colors_1.cobalt.base};
    }

    // Box.
    & + ${label} > :first-child {
      display: inline-flex;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: 1px;
      user-select: none;

      & > svg {
        display: none;
        width: 10px;
        height: 10px;
        flex-shrink: 0;
        color: ${colors_1.white};
      }
    }

    // Default box when not checked, indeterminate, hovered, focused, or disabled
    &:not(:checked):not(.focusable-checkbox-indeterminate):not(:hover):not(:focus):not(:disabled)
      + ${label}
      > :first-child {
      border: 2px solid ${colors_1.cobalt.base};
      background: ${colors_1.white};
    }

    // Hovered box when not disabled, or Focused box when not checked
    &:not(:disabled):hover + ${label} > :first-child,
    &:not(:checked):focus + ${label} > :first-child {
      border: 2px solid ${colors_1.ocean.darker};
    }

    // Focused box when checked or indeterminate
    &:focus + ${label} > :first-child {
      box-shadow: 0px 0px 3px ${colors_1.ocean.darker};
    }

    // Box checked
    &:checked + ${label} > :first-child,
    &.focusable-checkbox-indeterminate + ${label} > :first-child {
      background: ${colors_1.ocean.darker};
      outline: 0;
    }

    // Icons when checked
    &:checked:not(.focusable-checkbox-indeterminate) + ${label} .focusable-checkbox__check-icon,
    &.focusable-checkbox-indeterminate + ${label} .focusable-checkbox__indeterminate-icon {
      display: block;
    }

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

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

    // Disabled box when checked or indeterminate
    &:checked:disabled + ${label} > :first-child,
    &.focusable-checkbox-indeterminate:disabled + ${label} > :first-child {
      background: ${colors_1.alloy};
    }
  }
`;
exports.default = createStyle;
//# sourceMappingURL=styles.js.map