You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.3 KiB
62 lines
1.3 KiB
3 years ago
|
import type { GenerateStyle } from '../../_util/theme';
|
||
|
|
import type { ButtonToken } from '.';
|
||
|
|
|
||
|
|
const genGroupStyle: GenerateStyle<ButtonToken> = token => {
|
||
|
|
const { componentCls, fontSizeBase, controlLineWidth, colorPrimaryHover } = token;
|
||
|
|
|
||
|
|
return {
|
||
|
|
[`${componentCls}-group`]: {
|
||
|
|
position: 'relative',
|
||
|
|
display: 'inline-flex',
|
||
|
|
|
||
|
|
// Border
|
||
|
|
[`> span, > ${componentCls}`]: {
|
||
|
|
'&:not(:last-child)': {
|
||
|
|
[`&, & > ${componentCls}`]: {
|
||
|
|
borderStartEndRadius: 0,
|
||
|
|
borderEndEndRadius: 0,
|
||
|
|
|
||
|
|
'&:not(:disabled)': {
|
||
|
|
borderInlineEndColor: colorPrimaryHover,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
'&:not(:first-child)': {
|
||
|
|
marginInlineStart: -controlLineWidth,
|
||
|
|
|
||
|
|
[`&, & > ${componentCls}`]: {
|
||
|
|
borderStartStartRadius: 0,
|
||
|
|
borderEndStartRadius: 0,
|
||
|
|
|
||
|
|
'&:not(:disabled)': {
|
||
|
|
borderInlineStartColor: colorPrimaryHover,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
[componentCls]: {
|
||
|
|
position: 'relative',
|
||
|
|
zIndex: 1,
|
||
|
|
|
||
|
|
[`&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active`]: {
|
||
|
|
zIndex: 2,
|
||
|
|
},
|
||
|
|
|
||
|
|
'&[disabled]': {
|
||
|
|
zIndex: 0,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
[`${componentCls}-icon-only`]: {
|
||
|
|
fontSize: fontSizeBase,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
export default genGroupStyle;
|