ant-design/components/segmented/style/index.tsx

216 lines
6.3 KiB
TypeScript
Raw Normal View History

import type { CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent, textEllipsis } from '../../style';
export interface ComponentToken {}
interface SegmentedToken extends FullToken<'Segmented'> {
segmentedPaddingHorizontal: number;
segmentedPaddingHorizontalSM: number;
segmentedContainerPadding: number;
labelColor: string;
labelColorHover: string;
bgColor: string;
bgColorHover: string;
bgColorSelected: string;
}
// ============================== Mixins ==============================
function getItemDisabledStyle(cls: string, token: SegmentedToken): CSSObject {
return {
[`${cls}, ${cls}:hover, ${cls}:focus`]: {
color: token.colorTextDisabled,
cursor: 'not-allowed',
},
};
}
function getItemSelectedStyle(token: SegmentedToken): CSSObject {
return {
backgroundColor: token.bgColorSelected,
boxShadow: token.boxShadow,
};
}
const segmentedTextEllipsisCss: CSSObject = {
overflow: 'hidden',
// handle text ellipsis
...textEllipsis,
};
// ============================== Styles ==============================
const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken) => {
const { componentCls } = token;
return {
[componentCls]: {
...resetComponent(token),
display: 'inline-block',
padding: token.segmentedContainerPadding,
color: token.labelColor,
backgroundColor: token.bgColor,
borderRadius: token.borderRadius,
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
2022-05-26 09:14:09 +08:00
[`${componentCls}-group`]: {
position: 'relative',
display: 'flex',
alignItems: 'stretch',
justifyItems: 'flex-start',
width: '100%',
},
// RTL styles
'&&-rtl': {
direction: 'rtl',
},
// block styles
'&&-block': {
display: 'flex',
},
2022-05-26 09:14:09 +08:00
[`&&-block ${componentCls}-item`]: {
flex: 1,
minWidth: 0,
},
// item styles
[`${componentCls}-item`]: {
position: 'relative',
textAlign: 'center',
cursor: 'pointer',
transition: `color ${token.motionDurationMid} ${token.motionEaseInOut}`,
borderRadius: token.borderRadiusSM,
'&-selected': {
...getItemSelectedStyle(token),
color: token.labelColorHover,
},
'&::after': {
content: '""',
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
insetInlineStart: 0,
borderRadius: 'inherit',
transition: `background-color ${token.motionDurationMid}`,
},
[`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
color: token.labelColorHover,
'&::after': {
backgroundColor: token.bgColorHover,
},
},
'&-label': {
minHeight: token.controlHeight - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeight - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontal}px`,
...segmentedTextEllipsisCss,
},
// syntactic sugar to add `icon` for Segmented Item
'&-icon + *': {
2022-12-15 11:38:08 +08:00
marginInlineStart: token.marginSM / 2,
},
'&-input': {
position: 'absolute',
insetBlockStart: 0,
insetInlineStart: 0,
width: 0,
height: 0,
opacity: 0,
pointerEvents: 'none',
},
},
// size styles
'&&-lg': {
borderRadius: token.borderRadiusLG,
[`${componentCls}-item-label`]: {
minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontal}px`,
fontSize: token.fontSizeLG,
},
[`${componentCls}-item`]: {
borderRadius: token.borderRadius,
},
},
'&&-sm': {
borderRadius: token.borderRadiusSM,
2022-09-21 10:35:14 +08:00
[`${componentCls}-item-label`]: {
minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
},
[`${componentCls}-item`]: {
borderRadius: token.borderRadiusXS,
},
},
// disabled styles
...getItemDisabledStyle(`&-disabled ${componentCls}-item`, token),
...getItemDisabledStyle(`${componentCls}-item-disabled`, token),
// thumb styles
[`${componentCls}-thumb`]: {
...getItemSelectedStyle(token),
position: 'absolute',
insetBlockStart: 0,
insetInlineStart: 0,
width: 0,
height: '100%',
padding: `${token.paddingXXS}px 0`,
borderRadius: token.borderRadiusSM,
[`& ~ ${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)::after`]:
{
backgroundColor: 'transparent',
},
},
// transition effect when `appear-active`
[`${componentCls}-thumb-motion-appear-active`]: {
transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOut}, width ${token.motionDurationSlow} ${token.motionEaseInOut}`,
willChange: 'transform, width',
},
},
};
};
// ============================== Export ==============================
2022-11-15 22:22:04 +08:00
export default genComponentStyleHook('Segmented', (token) => {
const {
lineWidthBold,
lineWidth,
colorTextLabel,
colorText,
colorFillSecondary,
2022-11-15 22:22:04 +08:00
colorBgLayout,
colorBgElevated,
} = token;
const segmentedToken = mergeToken<SegmentedToken>(token, {
segmentedPaddingHorizontal: token.controlPaddingHorizontal - lineWidth,
segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - lineWidth,
segmentedContainerPadding: lineWidthBold,
labelColor: colorTextLabel,
labelColorHover: colorText,
2022-11-15 22:22:04 +08:00
bgColor: colorBgLayout,
bgColorHover: colorFillSecondary,
2022-11-15 22:22:04 +08:00
bgColorSelected: colorBgElevated,
});
return [genSegmentedStyle(segmentedToken)];
});