index.js 2.7 KB

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