2022-11-23 20:22:38 +08:00
|
|
|
import type { GenerateStyle } from '../../theme/internal';
|
2024-04-08 14:04:08 +08:00
|
|
|
import type { ButtonToken } from './token';
|
2022-04-22 22:36:50 +08:00
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
|
|
|
|
// Border
|
|
|
|
[`> span, > ${buttonTypeCls}`]: {
|
|
|
|
'&:not(:last-child)': {
|
|
|
|
[`&, & > ${buttonTypeCls}`]: {
|
|
|
|
'&:not(:disabled)': {
|
|
|
|
borderInlineEndColor: borderColor,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:not(:first-child)': {
|
|
|
|
[`&, & > ${buttonTypeCls}`]: {
|
|
|
|
'&:not(:disabled)': {
|
|
|
|
borderInlineStartColor: borderColor,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genGroupStyle: GenerateStyle<ButtonToken> = (token) => {
|
2023-08-08 14:03:31 +08:00
|
|
|
const { componentCls, fontSize, lineWidth, groupBorderColor, colorErrorHover } = token;
|
2022-04-22 22:36:50 +08:00
|
|
|
|
|
|
|
return {
|
2022-04-25 10:54:00 +08:00
|
|
|
[`${componentCls}-group`]: [
|
|
|
|
{
|
|
|
|
position: 'relative',
|
|
|
|
display: 'inline-flex',
|
|
|
|
|
|
|
|
// Border
|
|
|
|
[`> span, > ${componentCls}`]: {
|
|
|
|
'&:not(:last-child)': {
|
|
|
|
[`&, & > ${componentCls}`]: {
|
|
|
|
borderStartEndRadius: 0,
|
|
|
|
borderEndEndRadius: 0,
|
2022-04-22 22:36:50 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
'&:not(:first-child)': {
|
2023-11-08 14:56:15 +08:00
|
|
|
marginInlineStart: token.calc(lineWidth).mul(-1).equal(),
|
2022-04-22 22:36:50 +08:00
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
[`&, & > ${componentCls}`]: {
|
|
|
|
borderStartStartRadius: 0,
|
|
|
|
borderEndStartRadius: 0,
|
2022-04-22 22:36:50 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
[componentCls]: {
|
|
|
|
position: 'relative',
|
|
|
|
zIndex: 1,
|
2022-04-22 22:36:50 +08:00
|
|
|
|
2024-06-22 21:59:12 +08:00
|
|
|
'&:hover, &:focus, &:active': {
|
2022-04-25 10:54:00 +08:00
|
|
|
zIndex: 2,
|
|
|
|
},
|
|
|
|
|
|
|
|
'&[disabled]': {
|
|
|
|
zIndex: 0,
|
|
|
|
},
|
2022-04-22 22:36:50 +08:00
|
|
|
},
|
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
[`${componentCls}-icon-only`]: {
|
2022-11-01 15:06:38 +08:00
|
|
|
fontSize,
|
2022-04-22 22:36:50 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
// Border Color
|
2023-08-08 14:03:31 +08:00
|
|
|
genButtonBorderStyle(`${componentCls}-primary`, groupBorderColor),
|
2022-04-25 10:54:00 +08:00
|
|
|
genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover),
|
|
|
|
],
|
2022-04-22 22:36:50 +08:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export default genGroupStyle;
|