@fluent-windows/core/Checkbox/Checkbox.styled.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

var root = function root(theme) {
  return {
    width: 20,
    height: 20,
    display: 'inline-block',
    position: 'relative',
    cursor: 'pointer',
    borderRadius: 2,
    border: '2px solid',
    overflow: 'hidden',
    transition: theme.transitions.checkbox,
    color: theme.colors.black["default"],
    backgroundColor: theme.colors.white["default"],
    borderColor: theme.colors.standard["default"],
    '&:hover, &:focus': {
      borderColor: theme.colors.standard.dark1
    },
    '&:active': {
      color: theme.colors.white["default"],
      backgroundColor: theme.colors.primary["default"],
      borderColor: theme.colors.primary["default"]
    },
    '& > input': {
      width: '100%',
      height: '100%',
      cursor: 'pointer',
      opacity: 0,
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      zIndex: 1
    }
  };
};

var checked = function checked(theme) {
  return {
    color: theme.colors.white["default"],
    backgroundColor: theme.colors.primary["default"],
    borderColor: theme.colors.primary["default"],
    '&:hover, &:focus': {
      borderColor: theme.colors.primary["default"]
    },
    '&:active': {
      backgroundColor: theme.colors.primary.dark3,
      borderColor: theme.colors.primary.dark3
    }
  };
};

var disabled = function disabled(theme) {
  return {
    color: theme.colors.standard.dark2,
    backgroundColor: theme.colors.standard.light1,
    borderColor: theme.colors.standard["default"],
    pointerEvents: 'none',
    cursor: 'not-allowed'
  };
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    checked: checked(theme),
    disabled: disabled(theme)
  };
};

exports.styles = styles;