index.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.genCheckboxStyle = exports.default = void 0;
  6. exports.getStyle = getStyle;
  7. var _cssinjs = require("@ant-design/cssinjs");
  8. var _style = require("../../style");
  9. var _internal = require("../../theme/internal");
  10. // ============================== Styles ==============================
  11. const genCheckboxStyle = token => {
  12. const {
  13. checkboxCls
  14. } = token;
  15. const wrapperCls = `${checkboxCls}-wrapper`;
  16. return [
  17. // ===================== Basic =====================
  18. {
  19. // Group
  20. [`${checkboxCls}-group`]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  21. display: 'inline-flex',
  22. flexWrap: 'wrap',
  23. columnGap: token.marginXS,
  24. // Group > Grid
  25. [`> ${token.antCls}-row`]: {
  26. flex: 1
  27. }
  28. }),
  29. // Wrapper
  30. [wrapperCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  31. display: 'inline-flex',
  32. alignItems: 'baseline',
  33. cursor: 'pointer',
  34. // Fix checkbox & radio in flex align #30260
  35. '&:after': {
  36. display: 'inline-block',
  37. width: 0,
  38. overflow: 'hidden',
  39. content: "'\\a0'"
  40. },
  41. // Checkbox near checkbox
  42. [`& + ${wrapperCls}`]: {
  43. marginInlineStart: 0
  44. },
  45. [`&${wrapperCls}-in-form-item`]: {
  46. 'input[type="checkbox"]': {
  47. width: 14,
  48. // FIXME: magic
  49. height: 14 // FIXME: magic
  50. }
  51. }
  52. }),
  53. // Wrapper > Checkbox
  54. [checkboxCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  55. position: 'relative',
  56. whiteSpace: 'nowrap',
  57. lineHeight: 1,
  58. cursor: 'pointer',
  59. borderRadius: token.borderRadiusSM,
  60. // To make alignment right when `controlHeight` is changed
  61. // Ref: https://github.com/ant-design/ant-design/issues/41564
  62. alignSelf: 'center',
  63. // Wrapper > Checkbox > input
  64. [`${checkboxCls}-input`]: {
  65. position: 'absolute',
  66. // Since baseline align will get additional space offset,
  67. // we need to move input to top to make it align with text.
  68. // Ref: https://github.com/ant-design/ant-design/issues/38926#issuecomment-1486137799
  69. inset: 0,
  70. zIndex: 1,
  71. cursor: 'pointer',
  72. opacity: 0,
  73. margin: 0,
  74. [`&:focus-visible + ${checkboxCls}-inner`]: (0, _style.genFocusOutline)(token)
  75. },
  76. // Wrapper > Checkbox > inner
  77. [`${checkboxCls}-inner`]: {
  78. boxSizing: 'border-box',
  79. display: 'block',
  80. width: token.checkboxSize,
  81. height: token.checkboxSize,
  82. direction: 'ltr',
  83. backgroundColor: token.colorBgContainer,
  84. border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
  85. borderRadius: token.borderRadiusSM,
  86. borderCollapse: 'separate',
  87. transition: `all ${token.motionDurationSlow}`,
  88. '&:after': {
  89. boxSizing: 'border-box',
  90. position: 'absolute',
  91. top: '50%',
  92. insetInlineStart: '25%',
  93. display: 'table',
  94. width: token.calc(token.checkboxSize).div(14).mul(5).equal(),
  95. height: token.calc(token.checkboxSize).div(14).mul(8).equal(),
  96. border: `${(0, _cssinjs.unit)(token.lineWidthBold)} solid ${token.colorWhite}`,
  97. borderTop: 0,
  98. borderInlineStart: 0,
  99. transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
  100. opacity: 0,
  101. content: '""',
  102. transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`
  103. }
  104. },
  105. // Wrapper > Checkbox + Text
  106. '& + span': {
  107. paddingInlineStart: token.paddingXS,
  108. paddingInlineEnd: token.paddingXS
  109. }
  110. })
  111. },
  112. // ===================== Hover =====================
  113. {
  114. // Wrapper & Wrapper > Checkbox
  115. [`
  116. ${wrapperCls}:not(${wrapperCls}-disabled),
  117. ${checkboxCls}:not(${checkboxCls}-disabled)
  118. `]: {
  119. [`&:hover ${checkboxCls}-inner`]: {
  120. borderColor: token.colorPrimary
  121. }
  122. },
  123. [`${wrapperCls}:not(${wrapperCls}-disabled)`]: {
  124. [`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled) ${checkboxCls}-inner`]: {
  125. backgroundColor: token.colorPrimaryHover,
  126. borderColor: 'transparent'
  127. },
  128. [`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled):after`]: {
  129. borderColor: token.colorPrimaryHover
  130. }
  131. }
  132. },
  133. // ==================== Checked ====================
  134. {
  135. // Wrapper > Checkbox
  136. [`${checkboxCls}-checked`]: {
  137. [`${checkboxCls}-inner`]: {
  138. backgroundColor: token.colorPrimary,
  139. borderColor: token.colorPrimary,
  140. '&:after': {
  141. opacity: 1,
  142. transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
  143. transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`
  144. }
  145. }
  146. },
  147. [`
  148. ${wrapperCls}-checked:not(${wrapperCls}-disabled),
  149. ${checkboxCls}-checked:not(${checkboxCls}-disabled)
  150. `]: {
  151. [`&:hover ${checkboxCls}-inner`]: {
  152. backgroundColor: token.colorPrimaryHover,
  153. borderColor: 'transparent'
  154. }
  155. }
  156. },
  157. // ================= Indeterminate =================
  158. {
  159. [checkboxCls]: {
  160. '&-indeterminate': {
  161. '&': {
  162. // Wrapper > Checkbox > inner
  163. [`${checkboxCls}-inner`]: {
  164. backgroundColor: `${token.colorBgContainer}`,
  165. borderColor: `${token.colorBorder}`,
  166. '&:after': {
  167. top: '50%',
  168. insetInlineStart: '50%',
  169. width: token.calc(token.fontSizeLG).div(2).equal(),
  170. height: token.calc(token.fontSizeLG).div(2).equal(),
  171. backgroundColor: token.colorPrimary,
  172. border: 0,
  173. transform: 'translate(-50%, -50%) scale(1)',
  174. opacity: 1,
  175. content: '""'
  176. }
  177. },
  178. // https://github.com/ant-design/ant-design/issues/50074
  179. [`&:hover ${checkboxCls}-inner`]: {
  180. backgroundColor: `${token.colorBgContainer}`,
  181. borderColor: `${token.colorPrimary}`
  182. }
  183. }
  184. }
  185. }
  186. },
  187. // ==================== Disable ====================
  188. {
  189. // Wrapper
  190. [`${wrapperCls}-disabled`]: {
  191. cursor: 'not-allowed'
  192. },
  193. // Wrapper > Checkbox
  194. [`${checkboxCls}-disabled`]: {
  195. // Wrapper > Checkbox > input
  196. [`&, ${checkboxCls}-input`]: {
  197. cursor: 'not-allowed',
  198. // Disabled for native input to enable Tooltip event handler
  199. // ref: https://github.com/ant-design/ant-design/issues/39822#issuecomment-1365075901
  200. pointerEvents: 'none'
  201. },
  202. // Wrapper > Checkbox > inner
  203. [`${checkboxCls}-inner`]: {
  204. background: token.colorBgContainerDisabled,
  205. borderColor: token.colorBorder,
  206. '&:after': {
  207. borderColor: token.colorTextDisabled
  208. }
  209. },
  210. '&:after': {
  211. display: 'none'
  212. },
  213. '& + span': {
  214. color: token.colorTextDisabled
  215. },
  216. [`&${checkboxCls}-indeterminate ${checkboxCls}-inner::after`]: {
  217. background: token.colorTextDisabled
  218. }
  219. }
  220. }];
  221. };
  222. // ============================== Export ==============================
  223. exports.genCheckboxStyle = genCheckboxStyle;
  224. function getStyle(prefixCls, token) {
  225. const checkboxToken = (0, _internal.mergeToken)(token, {
  226. checkboxCls: `.${prefixCls}`,
  227. checkboxSize: token.controlInteractiveSize
  228. });
  229. return genCheckboxStyle(checkboxToken);
  230. }
  231. var _default = exports.default = (0, _internal.genStyleHooks)('Checkbox', (token, {
  232. prefixCls
  233. }) => [getStyle(prefixCls, token)]);