mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
8e27cf986f
* chore: rm component less file * refactor: less file * refactor: rm less * refactor: rm page-header and comment * chore: rm less in components * chore: update dist config * chore: update image test * chore: update dekko * chore: rm lib dekko * chore: update dist dekko * chore: udpate bundle size * test: update snapshot * test: rm theme test * test: update snapshot * test: update snapshot * chore: copy reset.css * test: update image test * chore: copy reset.css to es * chore: update site script
129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import type { CSSObject } from '@ant-design/cssinjs';
|
|
import type { FullToken, GenerateStyle } from '../../theme';
|
|
import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
|
|
|
|
export interface ComponentToken {}
|
|
|
|
interface AnchorToken extends FullToken<'Anchor'> {
|
|
holderOffsetBlock: number;
|
|
anchorPaddingBlock: number;
|
|
anchorPaddingBlockSecondary: number;
|
|
anchorPaddingInline: number;
|
|
anchorBallSize: number;
|
|
anchorTitleBlock: number;
|
|
}
|
|
|
|
// ============================== Shared ==============================
|
|
const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
|
|
const { componentCls, holderOffsetBlock, anchorBallSize, lineWidthBold } = token;
|
|
|
|
return {
|
|
[`${componentCls}-wrapper`]: {
|
|
marginBlockStart: -holderOffsetBlock,
|
|
paddingBlockStart: holderOffsetBlock,
|
|
|
|
// delete overflow: auto
|
|
// overflow: 'auto',
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
[componentCls]: {
|
|
...resetComponent(token),
|
|
position: 'relative',
|
|
paddingInlineStart: lineWidthBold,
|
|
|
|
[`${componentCls}-ink`]: {
|
|
position: 'absolute',
|
|
insetBlockStart: 0,
|
|
insetInlineStart: 0,
|
|
height: '100%',
|
|
|
|
'&::before': {
|
|
position: 'relative',
|
|
display: 'block',
|
|
width: lineWidthBold,
|
|
height: '100%',
|
|
margin: '0 auto',
|
|
backgroundColor: token.colorSplit,
|
|
content: '" "',
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-ink-ball`]: {
|
|
position: 'absolute',
|
|
left: {
|
|
_skip_check_: true,
|
|
value: '50%',
|
|
},
|
|
display: 'none',
|
|
width: anchorBallSize,
|
|
height: anchorBallSize,
|
|
backgroundColor: token.colorBgContainer,
|
|
border: `${lineWidthBold}px solid ${token.colorPrimary}`,
|
|
borderRadius: anchorBallSize,
|
|
transform: 'translateX(-50%)',
|
|
transition: `top ${token.motionDurationSlow} ease-in-out`,
|
|
|
|
'&.visible': {
|
|
display: 'inline-block',
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-link`]: {
|
|
paddingBlock: token.anchorPaddingBlock,
|
|
paddingInline: `${token.anchorPaddingInline}px 0`,
|
|
|
|
'&-title': {
|
|
position: 'relative',
|
|
display: 'block',
|
|
marginBlockEnd: token.anchorTitleBlock,
|
|
overflow: 'hidden',
|
|
color: token.colorText,
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
|
|
'&:only-child': {
|
|
marginBlockEnd: 0,
|
|
},
|
|
},
|
|
|
|
[`&-active > ${componentCls}-link-title`]: {
|
|
color: token.colorPrimary,
|
|
},
|
|
|
|
// link link
|
|
[`${componentCls}-link`]: {
|
|
paddingBlock: token.anchorPaddingBlockSecondary,
|
|
},
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-fixed ${componentCls}-ink ${componentCls}-ink-ball`]: {
|
|
display: 'none',
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
// ============================== Export ==============================
|
|
export default genComponentStyleHook('Anchor', token => {
|
|
const { fontSize, lineHeight, fontSizeLG, padding, paddingXXS } = token;
|
|
|
|
const fontHeight = Math.round(fontSize * lineHeight);
|
|
|
|
// Still a magic number: 36 & 26
|
|
const titleHeight = (fontSize / 14) * 36;
|
|
const subTitleHeight = (fontSize / 14) * 26;
|
|
|
|
const anchorToken = mergeToken<AnchorToken>(token, {
|
|
holderOffsetBlock: paddingXXS,
|
|
anchorPaddingBlock: (titleHeight - fontHeight) / 2,
|
|
anchorPaddingBlockSecondary: (subTitleHeight - fontHeight) / 2,
|
|
anchorPaddingInline: padding,
|
|
anchorTitleBlock: (fontSize / 14) * 3,
|
|
anchorBallSize: fontSizeLG / 2,
|
|
});
|
|
return [genSharedAnchorStyle(anchorToken)];
|
|
});
|