antd/es/anchor/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style'; // ============================== Shared ==============================

var genSharedAnchorStyle = function genSharedAnchorStyle(token) {
  var _$concat, _extends2, _$concat2;

  var componentCls = token.componentCls,
      holderOffsetBlock = token.holderOffsetBlock,
      anchorBallSize = token.anchorBallSize,
      lineWidthBold = token.lineWidthBold;
  return _defineProperty({}, "".concat(componentCls, "-wrapper"), (_$concat2 = {
    marginBlockStart: -holderOffsetBlock,
    paddingBlockStart: holderOffsetBlock,
    // delete overflow: auto
    // overflow: 'auto',
    backgroundColor: 'transparent'
  }, _defineProperty(_$concat2, componentCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    position: 'relative',
    paddingInlineStart: lineWidthBold
  }, _defineProperty(_extends2, "".concat(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: '" "'
    }
  }), _defineProperty(_extends2, "".concat(componentCls, "-ink-ball"), {
    position: 'absolute',
    left: {
      _skip_check_: true,
      value: '50%'
    },
    display: 'none',
    width: anchorBallSize,
    height: anchorBallSize,
    backgroundColor: token.colorBgContainer,
    border: "".concat(lineWidthBold, "px solid ").concat(token.colorPrimary),
    borderRadius: anchorBallSize,
    transform: 'translateX(-50%)',
    transition: "top ".concat(token.motionDurationSlow, " ease-in-out"),
    '&.visible': {
      display: 'inline-block'
    }
  }), _defineProperty(_extends2, "".concat(componentCls, "-link"), (_$concat = {
    paddingBlock: token.anchorPaddingBlock,
    paddingInline: "".concat(token.anchorPaddingInline, "px 0"),
    '&-title': {
      position: 'relative',
      display: 'block',
      marginBlockEnd: token.anchorTitleBlock,
      overflow: 'hidden',
      color: token.colorText,
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
      transition: "all ".concat(token.motionDurationSlow),
      '&:only-child': {
        marginBlockEnd: 0
      }
    }
  }, _defineProperty(_$concat, "&-active > ".concat(componentCls, "-link-title"), {
    color: token.colorPrimary
  }), _defineProperty(_$concat, "".concat(componentCls, "-link"), {
    paddingBlock: token.anchorPaddingBlockSecondary
  }), _$concat)), _extends2))), _defineProperty(_$concat2, "".concat(componentCls, "-fixed ").concat(componentCls, "-ink ").concat(componentCls, "-ink-ball"), {
    display: 'none'
  }), _$concat2));
}; // ============================== Export ==============================


export default genComponentStyleHook('Anchor', function (token) {
  var fontSize = token.fontSize,
      lineHeight = token.lineHeight,
      fontSizeLG = token.fontSizeLG,
      padding = token.padding,
      paddingXXS = token.paddingXXS;
  var fontHeight = Math.round(fontSize * lineHeight); // Still a magic number: 36 & 26

  var titleHeight = fontSize / 14 * 36;
  var subTitleHeight = fontSize / 14 * 26;
  var anchorToken = mergeToken(token, {
    holderOffsetBlock: paddingXXS,
    anchorPaddingBlock: (titleHeight - fontHeight) / 2,
    anchorPaddingBlockSecondary: (subTitleHeight - fontHeight) / 2,
    anchorPaddingInline: padding,
    anchorTitleBlock: fontSize / 14 * 3,
    anchorBallSize: fontSizeLG / 2
  });
  return [genSharedAnchorStyle(anchorToken)];
});