123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.prepareComponentToken = exports.default = void 0;
- var _cssinjs = require("@ant-design/cssinjs");
- var _style = require("../../style");
- var _internal = require("../../theme/internal");
- // ============================== Shared ==============================
- const genSharedAnchorStyle = token => {
- const {
- componentCls,
- holderOffsetBlock,
- motionDurationSlow,
- lineWidthBold,
- colorPrimary,
- lineType,
- colorSplit,
- calc
- } = token;
- return {
- [`${componentCls}-wrapper`]: {
- marginBlockStart: calc(holderOffsetBlock).mul(-1).equal(),
- paddingBlockStart: holderOffsetBlock,
- // delete overflow: auto
- // overflow: 'auto',
- [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
- position: 'relative',
- paddingInlineStart: lineWidthBold,
- [`${componentCls}-link`]: {
- paddingBlock: token.linkPaddingBlock,
- paddingInline: `${(0, _cssinjs.unit)(token.linkPaddingInlineStart)} 0`,
- '&-title': Object.assign(Object.assign({}, _style.textEllipsis), {
- position: 'relative',
- display: 'block',
- marginBlockEnd: token.anchorTitleBlock,
- color: token.colorText,
- transition: `all ${token.motionDurationSlow}`,
- '&:only-child': {
- marginBlockEnd: 0
- }
- }),
- [`&-active > ${componentCls}-link-title`]: {
- color: token.colorPrimary
- },
- // link link
- [`${componentCls}-link`]: {
- paddingBlock: token.anchorPaddingBlockSecondary
- }
- }
- }),
- [`&:not(${componentCls}-wrapper-horizontal)`]: {
- [componentCls]: {
- '&::before': {
- position: 'absolute',
- insetInlineStart: 0,
- top: 0,
- height: '100%',
- borderInlineStart: `${(0, _cssinjs.unit)(lineWidthBold)} ${lineType} ${colorSplit}`,
- content: '" "'
- },
- [`${componentCls}-ink`]: {
- position: 'absolute',
- insetInlineStart: 0,
- display: 'none',
- transform: 'translateY(-50%)',
- transition: `top ${motionDurationSlow} ease-in-out`,
- width: lineWidthBold,
- backgroundColor: colorPrimary,
- [`&${componentCls}-ink-visible`]: {
- display: 'inline-block'
- }
- }
- }
- },
- [`${componentCls}-fixed ${componentCls}-ink ${componentCls}-ink`]: {
- display: 'none'
- }
- }
- };
- };
- const genSharedAnchorHorizontalStyle = token => {
- const {
- componentCls,
- motionDurationSlow,
- lineWidthBold,
- colorPrimary
- } = token;
- return {
- [`${componentCls}-wrapper-horizontal`]: {
- position: 'relative',
- '&::before': {
- position: 'absolute',
- left: {
- _skip_check_: true,
- value: 0
- },
- right: {
- _skip_check_: true,
- value: 0
- },
- bottom: 0,
- borderBottom: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
- content: '" "'
- },
- [componentCls]: {
- overflowX: 'scroll',
- position: 'relative',
- display: 'flex',
- scrollbarWidth: 'none' /* Firefox */,
- '&::-webkit-scrollbar': {
- display: 'none' /* Safari and Chrome */
- },
- [`${componentCls}-link:first-of-type`]: {
- paddingInline: 0
- },
- [`${componentCls}-ink`]: {
- position: 'absolute',
- bottom: 0,
- transition: `left ${motionDurationSlow} ease-in-out, width ${motionDurationSlow} ease-in-out`,
- height: lineWidthBold,
- backgroundColor: colorPrimary
- }
- }
- }
- };
- };
- const prepareComponentToken = token => ({
- linkPaddingBlock: token.paddingXXS,
- linkPaddingInlineStart: token.padding
- });
- // ============================== Export ==============================
- exports.prepareComponentToken = prepareComponentToken;
- var _default = exports.default = (0, _internal.genStyleHooks)('Anchor', token => {
- const {
- fontSize,
- fontSizeLG,
- paddingXXS,
- calc
- } = token;
- const anchorToken = (0, _internal.mergeToken)(token, {
- holderOffsetBlock: paddingXXS,
- anchorPaddingBlockSecondary: calc(paddingXXS).div(2).equal(),
- anchorTitleBlock: calc(fontSize).div(14).mul(3).equal(),
- anchorBallSize: calc(fontSizeLG).div(2).equal()
- });
- return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
- }, prepareComponentToken);
|