2023-08-28 21:42:39 +08:00
|
|
|
// Style as inline component
|
2024-01-12 15:03:03 +08:00
|
|
|
import type { ButtonToken } from './token';
|
|
|
|
import { prepareComponentToken, prepareToken } from './token';
|
2023-08-28 21:42:39 +08:00
|
|
|
import { genCompactItemStyle } from '../../style/compact-item';
|
|
|
|
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
|
2023-11-08 14:56:15 +08:00
|
|
|
import type { GenerateStyle } from '../../theme/internal';
|
2023-08-28 21:42:39 +08:00
|
|
|
import { genSubStyleComponent } from '../../theme/internal';
|
2023-11-08 14:56:15 +08:00
|
|
|
import { unit } from '@ant-design/cssinjs';
|
|
|
|
|
|
|
|
const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
|
|
|
|
const { componentCls, calc } = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[componentCls]: {
|
|
|
|
// Special styles for Primary Button
|
|
|
|
[`&-compact-item${componentCls}-primary`]: {
|
|
|
|
[`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
|
|
|
|
{
|
|
|
|
position: 'relative',
|
|
|
|
|
|
|
|
'&:before': {
|
|
|
|
position: 'absolute',
|
|
|
|
top: calc(token.lineWidth).mul(-1).equal(),
|
|
|
|
insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
|
|
|
|
display: 'inline-block',
|
|
|
|
width: token.lineWidth,
|
|
|
|
height: `calc(100% + ${unit(token.lineWidth)} * 2)`,
|
|
|
|
backgroundColor: token.colorPrimaryHover,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// Special styles for Primary Button
|
|
|
|
'&-compact-vertical-item': {
|
|
|
|
[`&${componentCls}-primary`]: {
|
|
|
|
[`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
|
|
|
|
{
|
|
|
|
position: 'relative',
|
|
|
|
|
|
|
|
'&:before': {
|
|
|
|
position: 'absolute',
|
|
|
|
top: calc(token.lineWidth).mul(-1).equal(),
|
|
|
|
insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
|
|
|
|
display: 'inline-block',
|
|
|
|
width: `calc(100% + ${unit(token.lineWidth)} * 2)`,
|
|
|
|
height: token.lineWidth,
|
|
|
|
backgroundColor: token.colorPrimaryHover,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
2023-08-28 21:42:39 +08:00
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2023-08-28 21:56:37 +08:00
|
|
|
export default genSubStyleComponent(
|
|
|
|
['Button', 'compact'],
|
|
|
|
(token) => {
|
|
|
|
const buttonToken = prepareToken(token);
|
2023-08-28 21:42:39 +08:00
|
|
|
|
2023-08-28 21:56:37 +08:00
|
|
|
return [
|
|
|
|
// Space Compact
|
|
|
|
genCompactItemStyle(buttonToken),
|
|
|
|
genCompactItemVerticalStyle(buttonToken),
|
2023-11-08 14:56:15 +08:00
|
|
|
genButtonCompactStyle(buttonToken),
|
2023-08-28 21:56:37 +08:00
|
|
|
];
|
|
|
|
},
|
|
|
|
prepareComponentToken,
|
|
|
|
);
|