antd/es/checkbox/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { Keyframes } from '@ant-design/cssinjs';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { genFocusOutline, resetComponent } from '../../style'; // ============================== Motion ==============================

var antCheckboxEffect = new Keyframes('antCheckboxEffect', {
  '0%': {
    transform: 'scale(1)',
    opacity: 0.5
  },
  '100%': {
    transform: 'scale(1.6)',
    opacity: 0
  }
}); // ============================== Styles ==============================

export var genCheckboxStyle = function genCheckboxStyle(token) {
  var _extends2, _ref, _ref3, _$concat2, _ref4, _$concat3, _ref5;

  var checkboxCls = token.checkboxCls;
  var wrapperCls = "".concat(checkboxCls, "-wrapper");
  return [(_ref = {}, _defineProperty(_ref, "".concat(checkboxCls, "-group"), _extends(_extends({}, resetComponent(token)), {
    display: 'inline-flex'
  })), _defineProperty(_ref, wrapperCls, _extends(_extends({}, resetComponent(token)), {
    display: 'inline-flex',
    alignItems: 'baseline',
    lineHeight: 'unset',
    cursor: 'pointer',
    // Fix checkbox & radio in flex align #30260
    '&:after': {
      display: 'inline-block',
      width: 0,
      overflow: 'hidden',
      content: "'\\a0'"
    },
    // Checkbox near checkbox
    '& + &': {
      marginInlineStart: token.marginXS
    },
    '&&-in-form-item': {
      'input[type="checkbox"]': {
        width: 14,
        height: 14 // FIXME: magic

      }
    }
  })), _defineProperty(_ref, checkboxCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    top: '0.2em',
    position: 'relative',
    whiteSpace: 'nowrap',
    lineHeight: 1,
    cursor: 'pointer'
  }, _defineProperty(_extends2, "".concat(checkboxCls, "-input"), _defineProperty({
    position: 'absolute',
    inset: 0,
    zIndex: 1,
    width: '100%',
    height: '100%',
    cursor: 'pointer',
    opacity: 0
  }, "&:focus-visible + ".concat(checkboxCls, "-inner"), _extends({}, genFocusOutline(token)))), _defineProperty(_extends2, "".concat(checkboxCls, "-inner"), {
    boxSizing: 'border-box',
    position: 'relative',
    top: 0,
    insetInlineStart: 0,
    display: 'block',
    width: token.checkboxSize,
    height: token.checkboxSize,
    direction: 'ltr',
    backgroundColor: token.colorBgContainer,
    border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorder),
    borderRadius: token.controlRadiusSM,
    borderCollapse: 'separate',
    transition: "all ".concat(token.motionDurationFast),
    '&:after': {
      boxSizing: 'border-box',
      position: 'absolute',
      top: '50%',
      insetInlineStart: '21.5%',
      display: 'table',
      width: token.checkboxSize / 14 * 5,
      height: token.checkboxSize / 14 * 8,
      border: "".concat(token.lineWidthBold, "px solid ").concat(token.colorBgContainer),
      borderTop: 0,
      borderInlineStart: 0,
      transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
      opacity: 0,
      transition: "all ".concat(token.motionDurationFast, " cubic-bezier(.71,-.46,.88,.6), opacity ").concat(token.motionDurationFast),
      content: '""'
    }
  }), _defineProperty(_extends2, '& + span', {
    paddingInlineStart: token.paddingXS,
    paddingInlineEnd: token.paddingXS
  }), _extends2))), _ref), // ================= Indeterminate =================
  _defineProperty({}, checkboxCls, {
    '&-indeterminate': _defineProperty({}, "".concat(checkboxCls, "-inner"), {
      '&:after': {
        top: '50%',
        insetInlineStart: '50%',
        width: token.fontSizeLG / 2,
        height: token.fontSizeLG / 2,
        backgroundColor: token.colorPrimary,
        border: 0,
        transform: 'translate(-50%, -50%) scale(1)',
        opacity: 1,
        content: '""'
      }
    })
  }), (_ref3 = {}, _defineProperty(_ref3, "".concat(wrapperCls, ":hover ").concat(checkboxCls, ":after"), {
    visibility: 'visible'
  }), _defineProperty(_ref3, "\n        ".concat(wrapperCls, ":not(").concat(wrapperCls, "-disabled),\n        ").concat(checkboxCls, ":not(").concat(checkboxCls, "-disabled)\n      "), _defineProperty({}, "&:hover ".concat(checkboxCls, "-inner"), {
    borderColor: token.colorPrimary
  })), _ref3), (_ref4 = {}, _defineProperty(_ref4, "".concat(checkboxCls, "-checked"), (_$concat2 = {}, _defineProperty(_$concat2, "".concat(checkboxCls, "-inner"), {
    backgroundColor: token.colorPrimary,
    borderColor: token.colorPrimary,
    '&:after': {
      opacity: 1,
      transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
      transition: "all ".concat(token.motionDurationSlow, " ").concat(token.motionEaseOutBack, " ").concat(token.motionDurationFast)
    }
  }), _defineProperty(_$concat2, '&:after', {
    position: 'absolute',
    top: 0,
    insetInlineStart: 0,
    width: '100%',
    height: '100%',
    borderRadius: token.controlRadiusSM,
    visibility: 'hidden',
    border: "".concat(token.lineWidthBold, "px solid ").concat(token.colorPrimary),
    animationName: antCheckboxEffect,
    animationDuration: token.motionDurationSlow,
    animationTimingFunction: 'ease-in-out',
    animationFillMode: 'backwards',
    content: '""'
  }), _$concat2)), _defineProperty(_ref4, "\n        ".concat(wrapperCls, "-checked:not(").concat(wrapperCls, "-disabled),\n        ").concat(checkboxCls, "-checked:not(").concat(checkboxCls, "-disabled)\n      "), _defineProperty({}, "&:hover ".concat(checkboxCls, "-inner"), {
    backgroundColor: token.colorPrimaryHover,
    borderColor: 'transparent'
  })), _ref4), (_ref5 = {}, _defineProperty(_ref5, "".concat(wrapperCls, "-disabled"), {
    cursor: 'not-allowed'
  }), _defineProperty(_ref5, "".concat(checkboxCls, "-disabled"), (_$concat3 = {}, _defineProperty(_$concat3, "&, ".concat(checkboxCls, "-input"), {
    cursor: 'not-allowed'
  }), _defineProperty(_$concat3, "".concat(checkboxCls, "-inner"), {
    background: token.colorBgContainerDisabled,
    borderColor: token.colorBorder,
    '&:after': {
      borderColor: token.colorTextDisabled
    }
  }), _defineProperty(_$concat3, '&:after', {
    display: 'none'
  }), _defineProperty(_$concat3, '& + span', {
    color: token.colorTextDisabled
  }), _$concat3)), _ref5)];
}; // ============================== Export ==============================

export function getStyle(prefixCls, token) {
  var checkboxToken = mergeToken(token, {
    checkboxCls: ".".concat(prefixCls),
    checkboxSize: token.controlInteractiveSize
  });
  return [genCheckboxStyle(checkboxToken)];
}
export default genComponentStyleHook('Checkbox', function (token, _ref6) {
  var prefixCls = _ref6.prefixCls;
  return [getStyle(prefixCls, token)];
});