ant-design/components/checkbox/style/index.ts

264 lines
7.8 KiB
TypeScript
Raw Normal View History

import { unit } from '@ant-design/cssinjs';
import { genFocusOutline, resetComponent } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
export interface ComponentToken {}
interface CheckboxToken extends FullToken<'Checkbox'> {
checkboxCls: string;
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
checkboxSize: number;
}
// ============================== Styles ==============================
export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
const { checkboxCls } = token;
const wrapperCls = `${checkboxCls}-wrapper`;
return [
// ===================== Basic =====================
{
// Group
[`${checkboxCls}-group`]: {
...resetComponent(token),
display: 'inline-flex',
flexWrap: 'wrap',
columnGap: token.marginXS,
// Group > Grid
[`> ${token.antCls}-row`]: {
flex: 1,
},
},
// Wrapper
[wrapperCls]: {
...resetComponent(token),
display: 'inline-flex',
alignItems: 'baseline',
cursor: 'pointer',
// Fix checkbox & radio in flex align #30260
'&:after': {
display: 'inline-block',
width: 0,
overflow: 'hidden',
content: "'\\a0'",
},
// Checkbox near checkbox
[`& + ${wrapperCls}`]: {
marginInlineStart: 0,
},
[`&${wrapperCls}-in-form-item`]: {
'input[type="checkbox"]': {
width: 14, // FIXME: magic
height: 14, // FIXME: magic
},
},
},
// Wrapper > Checkbox
[checkboxCls]: {
...resetComponent(token),
position: 'relative',
whiteSpace: 'nowrap',
lineHeight: 1,
cursor: 'pointer',
borderRadius: token.borderRadiusSM,
// To make alignment right when `controlHeight` is changed
// Ref: https://github.com/ant-design/ant-design/issues/41564
alignSelf: 'center',
// Wrapper > Checkbox > input
[`${checkboxCls}-input`]: {
position: 'absolute',
// 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
inset: 0,
zIndex: 1,
cursor: 'pointer',
opacity: 0,
margin: 0,
[`&:focus-visible + ${checkboxCls}-inner`]: {
...genFocusOutline(token),
},
},
// Wrapper > Checkbox > inner
[`${checkboxCls}-inner`]: {
boxSizing: 'border-box',
display: 'block',
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
width: token.checkboxSize,
height: token.checkboxSize,
direction: 'ltr',
backgroundColor: token.colorBgContainer,
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
borderRadius: token.borderRadiusSM,
borderCollapse: 'separate',
transition: `all ${token.motionDurationSlow}`,
'&:after': {
boxSizing: 'border-box',
position: 'absolute',
top: '50%',
insetInlineStart: '25%',
display: 'table',
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}`,
borderTop: 0,
borderInlineStart: 0,
transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
opacity: 0,
content: '""',
transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`,
},
},
// Wrapper > Checkbox + Text
'& + span': {
paddingInlineStart: token.paddingXS,
paddingInlineEnd: token.paddingXS,
},
},
},
// ===================== Hover =====================
{
// Wrapper & Wrapper > Checkbox
[`
${wrapperCls}:not(${wrapperCls}-disabled),
${checkboxCls}:not(${checkboxCls}-disabled)
`]: {
[`&:hover ${checkboxCls}-inner`]: {
borderColor: token.colorPrimary,
},
},
[`${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,
},
},
},
// ==================== Checked ====================
{
// Wrapper > Checkbox
[`${checkboxCls}-checked`]: {
[`${checkboxCls}-inner`]: {
backgroundColor: token.colorPrimary,
borderColor: token.colorPrimary,
'&:after': {
opacity: 1,
transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
},
},
},
[`
${wrapperCls}-checked:not(${wrapperCls}-disabled),
${checkboxCls}-checked:not(${checkboxCls}-disabled)
`]: {
[`&:hover ${checkboxCls}-inner`]: {
backgroundColor: token.colorPrimaryHover,
borderColor: 'transparent',
},
},
},
// ================= Indeterminate =================
{
[checkboxCls]: {
'&-indeterminate': {
// Wrapper > Checkbox > inner
[`${checkboxCls}-inner`]: {
backgroundColor: token.colorBgContainer,
borderColor: token.colorBorder,
'&:after': {
top: '50%',
insetInlineStart: '50%',
width: token.calc(token.fontSizeLG).div(2).equal(),
height: token.calc(token.fontSizeLG).div(2).equal(),
backgroundColor: token.colorPrimary,
border: 0,
transform: 'translate(-50%, -50%) scale(1)',
opacity: 1,
content: '""',
},
},
},
},
},
// ==================== Disable ====================
{
// Wrapper
[`${wrapperCls}-disabled`]: {
cursor: 'not-allowed',
},
// Wrapper > Checkbox
[`${checkboxCls}-disabled`]: {
// Wrapper > Checkbox > input
[`&, ${checkboxCls}-input`]: {
cursor: 'not-allowed',
// Disabled for native input to enable Tooltip event handler
// ref: https://github.com/ant-design/ant-design/issues/39822#issuecomment-1365075901
pointerEvents: 'none',
},
// Wrapper > Checkbox > inner
[`${checkboxCls}-inner`]: {
background: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
'&:after': {
borderColor: token.colorTextDisabled,
},
},
'&:after': {
display: 'none',
},
'& + span': {
color: token.colorTextDisabled,
},
[`&${checkboxCls}-indeterminate ${checkboxCls}-inner::after`]: {
background: token.colorTextDisabled,
},
},
},
];
};
// ============================== Export ==============================
export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>) {
const checkboxToken: CheckboxToken = mergeToken<CheckboxToken>(token, {
checkboxCls: `.${prefixCls}`,
refactor: Table to CSS-IN-JS (#35584) * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add basic styles of table * style: add basic border styles of table * style: add more styles of table * style: add more styles of table * style: add pagination and summary styles * add more styles * style: add cell-ellipsis styles * style: add Radius style * style: add sorter style * style: add sorter style * style: add filter style * style: add filter style * style: add filter style * style: fix filter and sort style * style: fix bordered style * style: fix bordered style * style: fix bordered style * style: add size style * style: fix size style * style: add selection style * style: format code * style: add sticky code * style: add expand code * style: add expand code * style: add expand code * style: add fixed code * add fixed style * style: fix diff place * style: use number as px string * chore: improve function name * chore: use token * style: rtl styles * chore: fix marigin and padding logical properties * fix: rtl styles * fix: table filter dropdown style * chore: remove useStyle * chore: revert classNames * fix: test case * fix shadow in rtl * Apply suggestions from code review * chore: sub filter tree * style: fix tree dropdown padding Co-authored-by: zombiej <smith3816@gmail.com>
2022-05-31 10:10:35 +08:00
checkboxSize: token.controlInteractiveSize,
});
return [genCheckboxStyle(checkboxToken)];
}
export default genStyleHooks('Checkbox', (token, { prefixCls }) => [getStyle(prefixCls, token)]);