@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;
      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 ${colors_1.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 ${colors_1.teal.base};
      border-radius: 2px;
    }

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

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

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

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

    // Disabled box when checked or indeterminate
    &:checked:disabled + ${label}:before, &.focusable-checkbox-indeterminate:disabled + ${label}:before {
      background: ${colors_1.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);
    }
  }
`;
exports.default = createStyle;
//# sourceMappingURL=styles.js.map