index.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.prepareComponentToken = exports.default = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. var _style = require("../../style");
  8. var _internal = require("../../theme/internal");
  9. // ============================== Shared ==============================
  10. const genSharedAnchorStyle = token => {
  11. const {
  12. componentCls,
  13. holderOffsetBlock,
  14. motionDurationSlow,
  15. lineWidthBold,
  16. colorPrimary,
  17. lineType,
  18. colorSplit,
  19. calc
  20. } = token;
  21. return {
  22. [`${componentCls}-wrapper`]: {
  23. marginBlockStart: calc(holderOffsetBlock).mul(-1).equal(),
  24. paddingBlockStart: holderOffsetBlock,
  25. // delete overflow: auto
  26. // overflow: 'auto',
  27. [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  28. position: 'relative',
  29. paddingInlineStart: lineWidthBold,
  30. [`${componentCls}-link`]: {
  31. paddingBlock: token.linkPaddingBlock,
  32. paddingInline: `${(0, _cssinjs.unit)(token.linkPaddingInlineStart)} 0`,
  33. '&-title': Object.assign(Object.assign({}, _style.textEllipsis), {
  34. position: 'relative',
  35. display: 'block',
  36. marginBlockEnd: token.anchorTitleBlock,
  37. color: token.colorText,
  38. transition: `all ${token.motionDurationSlow}`,
  39. '&:only-child': {
  40. marginBlockEnd: 0
  41. }
  42. }),
  43. [`&-active > ${componentCls}-link-title`]: {
  44. color: token.colorPrimary
  45. },
  46. // link link
  47. [`${componentCls}-link`]: {
  48. paddingBlock: token.anchorPaddingBlockSecondary
  49. }
  50. }
  51. }),
  52. [`&:not(${componentCls}-wrapper-horizontal)`]: {
  53. [componentCls]: {
  54. '&::before': {
  55. position: 'absolute',
  56. insetInlineStart: 0,
  57. top: 0,
  58. height: '100%',
  59. borderInlineStart: `${(0, _cssinjs.unit)(lineWidthBold)} ${lineType} ${colorSplit}`,
  60. content: '" "'
  61. },
  62. [`${componentCls}-ink`]: {
  63. position: 'absolute',
  64. insetInlineStart: 0,
  65. display: 'none',
  66. transform: 'translateY(-50%)',
  67. transition: `top ${motionDurationSlow} ease-in-out`,
  68. width: lineWidthBold,
  69. backgroundColor: colorPrimary,
  70. [`&${componentCls}-ink-visible`]: {
  71. display: 'inline-block'
  72. }
  73. }
  74. }
  75. },
  76. [`${componentCls}-fixed ${componentCls}-ink ${componentCls}-ink`]: {
  77. display: 'none'
  78. }
  79. }
  80. };
  81. };
  82. const genSharedAnchorHorizontalStyle = token => {
  83. const {
  84. componentCls,
  85. motionDurationSlow,
  86. lineWidthBold,
  87. colorPrimary
  88. } = token;
  89. return {
  90. [`${componentCls}-wrapper-horizontal`]: {
  91. position: 'relative',
  92. '&::before': {
  93. position: 'absolute',
  94. left: {
  95. _skip_check_: true,
  96. value: 0
  97. },
  98. right: {
  99. _skip_check_: true,
  100. value: 0
  101. },
  102. bottom: 0,
  103. borderBottom: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
  104. content: '" "'
  105. },
  106. [componentCls]: {
  107. overflowX: 'scroll',
  108. position: 'relative',
  109. display: 'flex',
  110. scrollbarWidth: 'none' /* Firefox */,
  111. '&::-webkit-scrollbar': {
  112. display: 'none' /* Safari and Chrome */
  113. },
  114. [`${componentCls}-link:first-of-type`]: {
  115. paddingInline: 0
  116. },
  117. [`${componentCls}-ink`]: {
  118. position: 'absolute',
  119. bottom: 0,
  120. transition: `left ${motionDurationSlow} ease-in-out, width ${motionDurationSlow} ease-in-out`,
  121. height: lineWidthBold,
  122. backgroundColor: colorPrimary
  123. }
  124. }
  125. }
  126. };
  127. };
  128. const prepareComponentToken = token => ({
  129. linkPaddingBlock: token.paddingXXS,
  130. linkPaddingInlineStart: token.padding
  131. });
  132. // ============================== Export ==============================
  133. exports.prepareComponentToken = prepareComponentToken;
  134. var _default = exports.default = (0, _internal.genStyleHooks)('Anchor', token => {
  135. const {
  136. fontSize,
  137. fontSizeLG,
  138. paddingXXS,
  139. calc
  140. } = token;
  141. const anchorToken = (0, _internal.mergeToken)(token, {
  142. holderOffsetBlock: paddingXXS,
  143. anchorPaddingBlockSecondary: calc(paddingXXS).div(2).equal(),
  144. anchorTitleBlock: calc(fontSize).div(14).mul(3).equal(),
  145. anchorBallSize: calc(fontSizeLG).div(2).equal()
  146. });
  147. return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
  148. }, prepareComponentToken);