2022-11-02 16:25:28 +08:00
|
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-11-02 16:25:28 +08:00
|
|
|
import { resetComponent } from '../../style';
|
|
|
|
import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
|
|
|
|
|
|
|
|
export interface ComponentToken {}
|
|
|
|
|
|
|
|
interface TourToken extends FullToken<'Tour'> {
|
|
|
|
tourZIndexPopup: number;
|
|
|
|
sliderWidth: number;
|
|
|
|
sliderHeight: number;
|
|
|
|
tourBorderRadius: number;
|
|
|
|
tourCloseSize: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
// =============================== Base ===============================
|
2022-11-17 23:31:41 +08:00
|
|
|
const genBaseStyle: GenerateStyle<TourToken> = (token) => {
|
2022-11-02 16:25:28 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
|
|
|
lineHeight,
|
|
|
|
padding,
|
|
|
|
paddingXS,
|
|
|
|
borderRadius,
|
|
|
|
borderRadiusXS,
|
|
|
|
colorPrimary,
|
|
|
|
colorText,
|
|
|
|
colorFill,
|
|
|
|
sliderHeight,
|
|
|
|
sliderWidth,
|
2023-02-03 11:20:21 +08:00
|
|
|
boxShadowTertiary,
|
2022-11-02 16:25:28 +08:00
|
|
|
tourZIndexPopup,
|
|
|
|
fontSize,
|
|
|
|
colorBgContainer,
|
|
|
|
fontWeightStrong,
|
|
|
|
marginXS,
|
|
|
|
colorTextLightSolid,
|
|
|
|
tourBorderRadius,
|
|
|
|
colorWhite,
|
|
|
|
colorBgTextHover,
|
|
|
|
tourCloseSize,
|
2022-11-10 22:30:48 +08:00
|
|
|
motionDurationSlow,
|
2022-11-02 16:25:28 +08:00
|
|
|
} = token;
|
|
|
|
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
[componentCls]: {
|
|
|
|
...resetComponent(token),
|
|
|
|
|
|
|
|
color: colorText,
|
|
|
|
position: 'absolute',
|
|
|
|
zIndex: tourZIndexPopup,
|
|
|
|
display: 'block',
|
|
|
|
visibility: 'visible',
|
|
|
|
fontSize,
|
|
|
|
lineHeight,
|
|
|
|
width: 520,
|
|
|
|
'--antd-arrow-background-color': colorBgContainer,
|
|
|
|
|
2022-11-03 00:43:26 +08:00
|
|
|
'&-pure': {
|
|
|
|
maxWidth: '100%',
|
|
|
|
position: 'relative',
|
|
|
|
},
|
|
|
|
|
2022-11-02 16:25:28 +08:00
|
|
|
[`&${componentCls}-hidden`]: {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
|
2022-12-19 11:34:36 +08:00
|
|
|
// ============================= panel content ============================
|
2022-11-02 16:25:28 +08:00
|
|
|
[`${componentCls}-content`]: {
|
|
|
|
position: 'relative',
|
|
|
|
},
|
|
|
|
[`${componentCls}-inner`]: {
|
|
|
|
textAlign: 'start',
|
|
|
|
textDecoration: 'none',
|
|
|
|
borderRadius: tourBorderRadius,
|
2023-02-03 11:20:21 +08:00
|
|
|
boxShadow: boxShadowTertiary,
|
2022-11-02 16:25:28 +08:00
|
|
|
position: 'relative',
|
|
|
|
backgroundColor: colorBgContainer,
|
|
|
|
border: 'none',
|
|
|
|
backgroundClip: 'padding-box',
|
|
|
|
|
|
|
|
[`${componentCls}-close`]: {
|
|
|
|
position: 'absolute',
|
|
|
|
top: padding,
|
|
|
|
insetInlineEnd: padding,
|
|
|
|
color: token.colorIcon,
|
|
|
|
outline: 'none',
|
|
|
|
width: tourCloseSize,
|
|
|
|
height: tourCloseSize,
|
|
|
|
borderRadius: token.borderRadiusSM,
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
|
2022-11-02 16:25:28 +08:00
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
color: token.colorIconHover,
|
|
|
|
backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-cover`]: {
|
|
|
|
textAlign: 'center',
|
|
|
|
padding: `${padding + tourCloseSize + paddingXS}px ${padding}px 0`,
|
|
|
|
img: {
|
|
|
|
width: '100%',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
[`${componentCls}-header`]: {
|
|
|
|
padding: `${padding}px ${padding}px ${paddingXS}px`,
|
|
|
|
|
|
|
|
[`${componentCls}-title`]: {
|
|
|
|
lineHeight,
|
|
|
|
fontSize,
|
|
|
|
fontWeight: fontWeightStrong,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-description`]: {
|
|
|
|
padding: `0 ${padding}px`,
|
|
|
|
lineHeight,
|
|
|
|
wordWrap: 'break-word',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-footer`]: {
|
|
|
|
padding: `${paddingXS}px ${padding}px ${padding}px`,
|
|
|
|
textAlign: 'end',
|
|
|
|
borderRadius: `0 0 ${borderRadiusXS}px ${borderRadiusXS}px`,
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
|
|
|
|
[`${componentCls}-sliders`]: {
|
|
|
|
display: 'inline-block',
|
|
|
|
|
|
|
|
[`${componentCls}-slider`]: {
|
|
|
|
width: `${sliderWidth}px`,
|
|
|
|
height: `${sliderHeight}px`,
|
|
|
|
display: 'inline-block',
|
|
|
|
borderRadius: '50%',
|
|
|
|
background: colorFill,
|
|
|
|
marginInlineEnd: sliderHeight,
|
|
|
|
|
|
|
|
'&-active': {
|
|
|
|
background: colorPrimary,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
[`${componentCls}-buttons button`]: {
|
|
|
|
marginInlineStart: marginXS,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-12-19 11:34:36 +08:00
|
|
|
// ============================= primary type ===========================
|
|
|
|
// `$` for panel, `&$` for pure panel
|
|
|
|
[`${componentCls}-primary, &${componentCls}-primary`]: {
|
2022-11-02 16:25:28 +08:00
|
|
|
'--antd-arrow-background-color': colorPrimary,
|
2022-12-19 11:34:36 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-primary`]: {
|
2022-11-02 16:25:28 +08:00
|
|
|
[`${componentCls}-inner`]: {
|
|
|
|
color: colorTextLightSolid,
|
|
|
|
textAlign: 'start',
|
|
|
|
textDecoration: 'none',
|
|
|
|
backgroundColor: colorPrimary,
|
|
|
|
borderRadius,
|
2023-02-03 11:20:21 +08:00
|
|
|
boxShadow: boxShadowTertiary,
|
2022-11-02 16:25:28 +08:00
|
|
|
|
|
|
|
[`${componentCls}-close`]: {
|
|
|
|
color: colorTextLightSolid,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-sliders`]: {
|
|
|
|
[`${componentCls}-slider`]: {
|
|
|
|
background: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
|
|
|
|
|
|
|
|
'&-active': {
|
|
|
|
background: colorTextLightSolid,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-prev-btn`]: {
|
|
|
|
color: colorTextLightSolid,
|
|
|
|
borderColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
|
2022-12-19 11:34:36 +08:00
|
|
|
backgroundColor: colorPrimary,
|
2022-11-02 16:25:28 +08:00
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
backgroundColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
|
|
|
|
borderColor: 'transparent',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-next-btn`]: {
|
|
|
|
color: colorPrimary,
|
|
|
|
borderColor: 'transparent',
|
|
|
|
background: colorWhite,
|
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
background: new TinyColor(colorBgTextHover).onBackground(colorWhite).toRgbString(),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-11-10 22:30:48 +08:00
|
|
|
// ============================= mask ===========================
|
|
|
|
[`${componentCls}-mask`]: {
|
|
|
|
[`${componentCls}-placeholder-animated`]: {
|
|
|
|
transition: `all ${motionDurationSlow}`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// =========== Limit left and right placement radius ==============
|
2022-11-02 16:25:28 +08:00
|
|
|
[[
|
2022-12-05 14:15:26 +08:00
|
|
|
'&-placement-left',
|
|
|
|
'&-placement-leftTop',
|
|
|
|
'&-placement-leftBottom',
|
|
|
|
'&-placement-right',
|
|
|
|
'&-placement-rightTop',
|
|
|
|
'&-placement-rightBottom',
|
2022-11-02 16:25:28 +08:00
|
|
|
].join(',')]: {
|
|
|
|
[`${componentCls}-inner`]: {
|
2022-12-31 22:12:30 +08:00
|
|
|
borderRadius: Math.min(tourBorderRadius, MAX_VERTICAL_CONTENT_RADIUS),
|
2022-11-02 16:25:28 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-11-10 22:30:48 +08:00
|
|
|
|
|
|
|
// ============================= Arrow ===========================
|
2022-11-02 16:25:28 +08:00
|
|
|
getArrowStyle<TourToken>(token, {
|
|
|
|
colorBg: 'var(--antd-arrow-background-color)',
|
|
|
|
contentRadius: tourBorderRadius,
|
|
|
|
limitVerticalRadius: true,
|
|
|
|
}),
|
|
|
|
];
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-11-17 23:31:41 +08:00
|
|
|
export default genComponentStyleHook('Tour', (token) => {
|
2022-11-02 16:25:28 +08:00
|
|
|
const { borderRadiusLG, fontSize, lineHeight } = token;
|
|
|
|
const TourToken = mergeToken<TourToken>(token, {
|
|
|
|
tourZIndexPopup: token.zIndexPopupBase + 70,
|
|
|
|
sliderWidth: 6,
|
|
|
|
sliderHeight: 6,
|
|
|
|
tourBorderRadius: borderRadiusLG,
|
|
|
|
tourCloseSize: fontSize * lineHeight,
|
|
|
|
});
|
|
|
|
return [genBaseStyle(TourToken)];
|
|
|
|
});
|