index.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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 genSharedBackTopStyle = token => {
  11. const {
  12. componentCls,
  13. backTopFontSize,
  14. backTopSize,
  15. zIndexPopup
  16. } = token;
  17. return {
  18. [componentCls]: Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), {
  19. position: 'fixed',
  20. insetInlineEnd: token.backTopInlineEnd,
  21. insetBlockEnd: token.backTopBlockEnd,
  22. zIndex: zIndexPopup,
  23. width: 40,
  24. height: 40,
  25. cursor: 'pointer',
  26. '&:empty': {
  27. display: 'none'
  28. },
  29. [`${componentCls}-content`]: {
  30. width: backTopSize,
  31. height: backTopSize,
  32. overflow: 'hidden',
  33. color: token.backTopColor,
  34. textAlign: 'center',
  35. backgroundColor: token.backTopBackground,
  36. borderRadius: backTopSize,
  37. transition: `all ${token.motionDurationMid}`,
  38. '&:hover': {
  39. backgroundColor: token.backTopHoverBackground,
  40. transition: `all ${token.motionDurationMid}`
  41. }
  42. },
  43. // change to .backtop .backtop-icon
  44. [`${componentCls}-icon`]: {
  45. fontSize: backTopFontSize,
  46. lineHeight: (0, _cssinjs.unit)(backTopSize)
  47. }
  48. })
  49. };
  50. };
  51. const genMediaBackTopStyle = token => {
  52. const {
  53. componentCls,
  54. screenMD,
  55. screenXS,
  56. backTopInlineEndMD,
  57. backTopInlineEndXS
  58. } = token;
  59. return {
  60. [`@media (max-width: ${(0, _cssinjs.unit)(screenMD)})`]: {
  61. [componentCls]: {
  62. insetInlineEnd: backTopInlineEndMD
  63. }
  64. },
  65. [`@media (max-width: ${(0, _cssinjs.unit)(screenXS)})`]: {
  66. [componentCls]: {
  67. insetInlineEnd: backTopInlineEndXS
  68. }
  69. }
  70. };
  71. };
  72. const prepareComponentToken = token => ({
  73. zIndexPopup: token.zIndexBase + 10
  74. });
  75. // ============================== Export ==============================
  76. exports.prepareComponentToken = prepareComponentToken;
  77. var _default = exports.default = (0, _internal.genStyleHooks)('BackTop', token => {
  78. const {
  79. fontSizeHeading3,
  80. colorTextDescription,
  81. colorTextLightSolid,
  82. colorText,
  83. controlHeightLG,
  84. calc
  85. } = token;
  86. const backTopToken = (0, _internal.mergeToken)(token, {
  87. backTopBackground: colorTextDescription,
  88. backTopColor: colorTextLightSolid,
  89. backTopHoverBackground: colorText,
  90. backTopFontSize: fontSizeHeading3,
  91. backTopSize: controlHeightLG,
  92. backTopBlockEnd: calc(controlHeightLG).mul(1.25).equal(),
  93. backTopInlineEnd: calc(controlHeightLG).mul(2.5).equal(),
  94. backTopInlineEndMD: calc(controlHeightLG).mul(1.5).equal(),
  95. backTopInlineEndXS: calc(controlHeightLG).mul(0.5).equal()
  96. });
  97. return [genSharedBackTopStyle(backTopToken), genMediaBackTopStyle(backTopToken)];
  98. }, prepareComponentToken);