2023-11-14 16:10:23 +08:00
|
|
|
import { unit } from '@ant-design/cssinjs';
|
|
|
|
|
2023-03-29 10:21:35 +08:00
|
|
|
import { genFocusOutline, resetComponent } from '../../style';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
2023-11-29 17:23:45 +08:00
|
|
|
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
2022-05-31 10:10:35 +08:00
|
|
|
|
|
|
|
export interface ComponentToken {}
|
2022-04-07 18:24:45 +08:00
|
|
|
|
|
|
|
interface CheckboxToken extends FullToken<'Checkbox'> {
|
2022-03-11 14:29:29 +08:00
|
|
|
checkboxCls: string;
|
2022-05-31 10:10:35 +08:00
|
|
|
checkboxSize: number;
|
2022-03-11 14:29:29 +08:00
|
|
|
}
|
|
|
|
|
2022-03-01 21:12:00 +08:00
|
|
|
// ============================== Styles ==============================
|
2022-11-14 15:11:56 +08:00
|
|
|
export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
|
2022-03-11 14:29:29 +08:00
|
|
|
const { checkboxCls } = token;
|
2022-03-01 21:12:00 +08:00
|
|
|
const wrapperCls = `${checkboxCls}-wrapper`;
|
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
return [
|
|
|
|
// ===================== Basic =====================
|
|
|
|
{
|
|
|
|
// Group
|
|
|
|
[`${checkboxCls}-group`]: {
|
|
|
|
...resetComponent(token),
|
2022-03-01 21:12:00 +08:00
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
display: 'inline-flex',
|
2023-05-09 10:09:20 +08:00
|
|
|
flexWrap: 'wrap',
|
|
|
|
columnGap: token.marginXS,
|
|
|
|
|
|
|
|
// Group > Grid
|
|
|
|
[`> ${token.antCls}-row`]: {
|
|
|
|
flex: 1,
|
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
},
|
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
// Wrapper
|
|
|
|
[wrapperCls]: {
|
|
|
|
...resetComponent(token),
|
2022-03-01 21:12:00 +08:00
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
display: 'inline-flex',
|
|
|
|
alignItems: 'baseline',
|
2022-03-01 21:12:00 +08:00
|
|
|
cursor: 'pointer',
|
2022-03-03 14:55:19 +08:00
|
|
|
|
|
|
|
// Fix checkbox & radio in flex align #30260
|
|
|
|
'&:after': {
|
|
|
|
display: 'inline-block',
|
|
|
|
width: 0,
|
|
|
|
overflow: 'hidden',
|
|
|
|
content: "'\\a0'",
|
|
|
|
},
|
|
|
|
|
|
|
|
// Checkbox near checkbox
|
2023-01-20 10:31:27 +08:00
|
|
|
[`& + ${wrapperCls}`]: {
|
2023-05-09 10:09:20 +08:00
|
|
|
marginInlineStart: 0,
|
2022-03-03 14:55:19 +08:00
|
|
|
},
|
2022-03-24 22:58:40 +08:00
|
|
|
|
2023-01-20 10:31:27 +08:00
|
|
|
[`&${wrapperCls}-in-form-item`]: {
|
2022-03-24 22:58:40 +08:00
|
|
|
'input[type="checkbox"]': {
|
|
|
|
width: 14, // FIXME: magic
|
|
|
|
height: 14, // FIXME: magic
|
|
|
|
},
|
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
},
|
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
// Wrapper > Checkbox
|
|
|
|
[checkboxCls]: {
|
|
|
|
...resetComponent(token),
|
|
|
|
|
2022-03-01 21:12:00 +08:00
|
|
|
position: 'relative',
|
2022-03-03 14:55:19 +08:00
|
|
|
whiteSpace: 'nowrap',
|
|
|
|
lineHeight: 1,
|
|
|
|
cursor: 'pointer',
|
2023-08-04 11:22:33 +08:00
|
|
|
borderRadius: token.borderRadiusSM,
|
2022-03-01 21:12:00 +08:00
|
|
|
|
2023-05-25 20:46:51 +08:00
|
|
|
// To make alignment right when `controlHeight` is changed
|
|
|
|
// Ref: https://github.com/ant-design/ant-design/issues/41564
|
|
|
|
alignSelf: 'center',
|
2023-03-31 14:30:50 +08:00
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
// Wrapper > Checkbox > input
|
|
|
|
[`${checkboxCls}-input`]: {
|
2022-03-01 21:12:00 +08:00
|
|
|
position: 'absolute',
|
2023-03-29 10:21:35 +08:00
|
|
|
// Since baseline align will get additional space offset,
|
|
|
|
// we need to move input to top to make it align with text.
|
|
|
|
// Ref: https://github.com/ant-design/ant-design/issues/38926#issuecomment-1486137799
|
2023-03-31 14:30:50 +08:00
|
|
|
inset: 0,
|
2022-03-03 14:55:19 +08:00
|
|
|
zIndex: 1,
|
|
|
|
cursor: 'pointer',
|
2022-03-01 21:12:00 +08:00
|
|
|
opacity: 0,
|
2023-03-29 10:21:35 +08:00
|
|
|
margin: 0,
|
2022-09-09 10:53:03 +08:00
|
|
|
|
|
|
|
[`&:focus-visible + ${checkboxCls}-inner`]: {
|
|
|
|
...genFocusOutline(token),
|
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
},
|
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
// Wrapper > Checkbox > inner
|
|
|
|
[`${checkboxCls}-inner`]: {
|
2022-09-13 17:21:59 +08:00
|
|
|
boxSizing: 'border-box',
|
2022-03-03 14:55:19 +08:00
|
|
|
display: 'block',
|
2022-05-31 10:10:35 +08:00
|
|
|
width: token.checkboxSize,
|
|
|
|
height: token.checkboxSize,
|
2022-03-03 14:55:19 +08:00
|
|
|
direction: 'ltr',
|
2022-06-28 20:33:01 +08:00
|
|
|
backgroundColor: token.colorBgContainer,
|
2023-11-14 16:10:23 +08:00
|
|
|
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusSM,
|
2022-03-03 14:55:19 +08:00
|
|
|
borderCollapse: 'separate',
|
2022-11-14 15:11:56 +08:00
|
|
|
transition: `all ${token.motionDurationSlow}`,
|
2022-03-03 14:55:19 +08:00
|
|
|
|
|
|
|
'&:after': {
|
2022-09-13 17:21:59 +08:00
|
|
|
boxSizing: 'border-box',
|
2022-03-03 14:55:19 +08:00
|
|
|
position: 'absolute',
|
|
|
|
top: '50%',
|
2023-12-13 21:46:25 +08:00
|
|
|
insetInlineStart: '25%',
|
2022-03-03 14:55:19 +08:00
|
|
|
display: 'table',
|
2023-11-14 16:10:23 +08:00
|
|
|
width: token.calc(token.checkboxSize).div(14).mul(5).equal(),
|
|
|
|
height: token.calc(token.checkboxSize).div(14).mul(8).equal(),
|
|
|
|
border: `${unit(token.lineWidthBold)} solid ${token.colorWhite}`,
|
2022-03-03 14:55:19 +08:00
|
|
|
borderTop: 0,
|
2022-03-11 17:07:16 +08:00
|
|
|
borderInlineStart: 0,
|
2022-03-03 14:55:19 +08:00
|
|
|
transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
|
|
|
|
opacity: 0,
|
|
|
|
content: '""',
|
2022-11-14 15:11:56 +08:00
|
|
|
transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`,
|
2022-03-03 14:55:19 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// Wrapper > Checkbox + Text
|
|
|
|
'& + span': {
|
2022-03-11 17:07:16 +08:00
|
|
|
paddingInlineStart: token.paddingXS,
|
|
|
|
paddingInlineEnd: token.paddingXS,
|
2022-03-03 14:55:19 +08:00
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-03-02 20:32:25 +08:00
|
|
|
// ===================== Hover =====================
|
2022-03-03 14:55:19 +08:00
|
|
|
{
|
|
|
|
// Wrapper & Wrapper > Checkbox
|
|
|
|
[`
|
2022-09-07 12:00:00 +08:00
|
|
|
${wrapperCls}:not(${wrapperCls}-disabled),
|
|
|
|
${checkboxCls}:not(${checkboxCls}-disabled)
|
|
|
|
`]: {
|
2022-09-09 10:53:03 +08:00
|
|
|
[`&:hover ${checkboxCls}-inner`]: {
|
2022-03-22 09:37:37 +08:00
|
|
|
borderColor: token.colorPrimary,
|
2022-03-03 14:55:19 +08:00
|
|
|
},
|
2022-03-02 20:32:25 +08:00
|
|
|
},
|
2022-12-01 14:37:22 +08:00
|
|
|
|
|
|
|
[`${wrapperCls}:not(${wrapperCls}-disabled)`]: {
|
|
|
|
[`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled) ${checkboxCls}-inner`]: {
|
|
|
|
backgroundColor: token.colorPrimaryHover,
|
|
|
|
borderColor: 'transparent',
|
|
|
|
},
|
|
|
|
[`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled):after`]: {
|
|
|
|
borderColor: token.colorPrimaryHover,
|
|
|
|
},
|
|
|
|
},
|
2022-03-02 20:32:25 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// ==================== Checked ====================
|
2022-03-03 14:55:19 +08:00
|
|
|
{
|
|
|
|
// Wrapper > Checkbox
|
|
|
|
[`${checkboxCls}-checked`]: {
|
|
|
|
[`${checkboxCls}-inner`]: {
|
2022-03-22 09:37:37 +08:00
|
|
|
backgroundColor: token.colorPrimary,
|
|
|
|
borderColor: token.colorPrimary,
|
2022-03-02 20:32:25 +08:00
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
'&:after': {
|
|
|
|
opacity: 1,
|
|
|
|
transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
|
2022-11-14 15:11:56 +08:00
|
|
|
transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
|
2022-03-03 14:55:19 +08:00
|
|
|
},
|
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
},
|
2022-09-07 12:00:00 +08:00
|
|
|
|
|
|
|
[`
|
|
|
|
${wrapperCls}-checked:not(${wrapperCls}-disabled),
|
|
|
|
${checkboxCls}-checked:not(${checkboxCls}-disabled)
|
|
|
|
`]: {
|
2022-09-09 10:53:03 +08:00
|
|
|
[`&:hover ${checkboxCls}-inner`]: {
|
2022-09-07 12:00:00 +08:00
|
|
|
backgroundColor: token.colorPrimaryHover,
|
|
|
|
borderColor: 'transparent',
|
|
|
|
},
|
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
},
|
|
|
|
|
2023-07-18 21:15:58 +08:00
|
|
|
// ================= Indeterminate =================
|
|
|
|
{
|
|
|
|
[checkboxCls]: {
|
|
|
|
'&-indeterminate': {
|
|
|
|
// Wrapper > Checkbox > inner
|
|
|
|
[`${checkboxCls}-inner`]: {
|
|
|
|
backgroundColor: token.colorBgContainer,
|
|
|
|
borderColor: token.colorBorder,
|
|
|
|
|
|
|
|
'&:after': {
|
|
|
|
top: '50%',
|
|
|
|
insetInlineStart: '50%',
|
2023-11-14 16:10:23 +08:00
|
|
|
width: token.calc(token.fontSizeLG).div(2).equal(),
|
|
|
|
height: token.calc(token.fontSizeLG).div(2).equal(),
|
2023-07-18 21:15:58 +08:00
|
|
|
backgroundColor: token.colorPrimary,
|
|
|
|
border: 0,
|
|
|
|
transform: 'translate(-50%, -50%) scale(1)',
|
|
|
|
opacity: 1,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-03-01 21:12:00 +08:00
|
|
|
// ==================== Disable ====================
|
2022-03-03 14:55:19 +08:00
|
|
|
{
|
|
|
|
// Wrapper
|
|
|
|
[`${wrapperCls}-disabled`]: {
|
2022-03-01 21:12:00 +08:00
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
// Wrapper > Checkbox
|
|
|
|
[`${checkboxCls}-disabled`]: {
|
|
|
|
// Wrapper > Checkbox > input
|
|
|
|
[`&, ${checkboxCls}-input`]: {
|
|
|
|
cursor: 'not-allowed',
|
2022-12-26 23:35:18 +08:00
|
|
|
// Disabled for native input to enable Tooltip event handler
|
|
|
|
// ref: https://github.com/ant-design/ant-design/issues/39822#issuecomment-1365075901
|
|
|
|
pointerEvents: 'none',
|
2022-03-03 14:55:19 +08:00
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
// Wrapper > Checkbox > inner
|
|
|
|
[`${checkboxCls}-inner`]: {
|
2022-06-28 20:33:01 +08:00
|
|
|
background: token.colorBgContainerDisabled,
|
2022-03-22 13:26:29 +08:00
|
|
|
borderColor: token.colorBorder,
|
2022-03-03 14:55:19 +08:00
|
|
|
|
|
|
|
'&:after': {
|
2022-05-06 15:58:32 +08:00
|
|
|
borderColor: token.colorTextDisabled,
|
2022-03-03 14:55:19 +08:00
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
},
|
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
'&:after': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
|
2022-03-03 14:55:19 +08:00
|
|
|
'& + span': {
|
2022-03-22 13:26:29 +08:00
|
|
|
color: token.colorTextDisabled,
|
2022-03-03 14:55:19 +08:00
|
|
|
},
|
2023-01-04 10:19:51 +08:00
|
|
|
|
|
|
|
[`&${checkboxCls}-indeterminate ${checkboxCls}-inner::after`]: {
|
|
|
|
background: token.colorTextDisabled,
|
|
|
|
},
|
2022-03-01 21:12:00 +08:00
|
|
|
},
|
|
|
|
},
|
2022-03-03 14:55:19 +08:00
|
|
|
];
|
2022-03-01 21:12:00 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-04-21 02:06:22 +08:00
|
|
|
export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>) {
|
2022-04-11 16:04:00 +08:00
|
|
|
const checkboxToken: CheckboxToken = mergeToken<CheckboxToken>(token, {
|
2022-03-11 14:29:29 +08:00
|
|
|
checkboxCls: `.${prefixCls}`,
|
2022-05-31 10:10:35 +08:00
|
|
|
checkboxSize: token.controlInteractiveSize,
|
2022-04-11 16:04:00 +08:00
|
|
|
});
|
2022-03-11 14:29:29 +08:00
|
|
|
|
2022-04-26 01:00:39 +08:00
|
|
|
return [genCheckboxStyle(checkboxToken)];
|
2022-03-02 20:32:25 +08:00
|
|
|
}
|
|
|
|
|
2023-11-29 17:23:45 +08:00
|
|
|
export default genStyleHooks('Checkbox', (token, { prefixCls }) => [getStyle(prefixCls, token)]);
|