index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. "use client";
  2. import { unit } from '@ant-design/cssinjs';
  3. export const textEllipsis = {
  4. overflow: 'hidden',
  5. whiteSpace: 'nowrap',
  6. textOverflow: 'ellipsis'
  7. };
  8. export const resetComponent = (token, needInheritFontFamily = false) => ({
  9. boxSizing: 'border-box',
  10. margin: 0,
  11. padding: 0,
  12. color: token.colorText,
  13. fontSize: token.fontSize,
  14. // font-variant: @font-variant-base;
  15. lineHeight: token.lineHeight,
  16. listStyle: 'none',
  17. // font-feature-settings: @font-feature-settings-base;
  18. fontFamily: needInheritFontFamily ? 'inherit' : token.fontFamily
  19. });
  20. export const resetIcon = () => ({
  21. display: 'inline-flex',
  22. alignItems: 'center',
  23. color: 'inherit',
  24. fontStyle: 'normal',
  25. lineHeight: 0,
  26. textAlign: 'center',
  27. textTransform: 'none',
  28. // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  29. verticalAlign: '-0.125em',
  30. textRendering: 'optimizeLegibility',
  31. '-webkit-font-smoothing': 'antialiased',
  32. '-moz-osx-font-smoothing': 'grayscale',
  33. '> *': {
  34. lineHeight: 1
  35. },
  36. svg: {
  37. display: 'inline-block'
  38. }
  39. });
  40. export const clearFix = () => ({
  41. // https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229
  42. '&::before': {
  43. display: 'table',
  44. content: '""'
  45. },
  46. '&::after': {
  47. // https://github.com/ant-design/ant-design/issues/21864
  48. display: 'table',
  49. clear: 'both',
  50. content: '""'
  51. }
  52. });
  53. export const genLinkStyle = token => ({
  54. a: {
  55. color: token.colorLink,
  56. textDecoration: token.linkDecoration,
  57. backgroundColor: 'transparent',
  58. // remove the gray background on active links in IE 10.
  59. outline: 'none',
  60. cursor: 'pointer',
  61. transition: `color ${token.motionDurationSlow}`,
  62. '-webkit-text-decoration-skip': 'objects',
  63. // remove gaps in links underline in iOS 8+ and Safari 8+.
  64. '&:hover': {
  65. color: token.colorLinkHover
  66. },
  67. '&:active': {
  68. color: token.colorLinkActive
  69. },
  70. '&:active, &:hover': {
  71. textDecoration: token.linkHoverDecoration,
  72. outline: 0
  73. },
  74. // https://github.com/ant-design/ant-design/issues/22503
  75. '&:focus': {
  76. textDecoration: token.linkFocusDecoration,
  77. outline: 0
  78. },
  79. '&[disabled]': {
  80. color: token.colorTextDisabled,
  81. cursor: 'not-allowed'
  82. }
  83. }
  84. });
  85. export const genCommonStyle = (token, componentPrefixCls, rootCls, resetFont) => {
  86. const prefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
  87. const rootPrefixSelector = rootCls ? `.${rootCls}` : prefixSelector;
  88. const resetStyle = {
  89. boxSizing: 'border-box',
  90. '&::before, &::after': {
  91. boxSizing: 'border-box'
  92. }
  93. };
  94. let resetFontStyle = {};
  95. if (resetFont !== false) {
  96. resetFontStyle = {
  97. fontFamily: token.fontFamily,
  98. fontSize: token.fontSize
  99. };
  100. }
  101. return {
  102. [rootPrefixSelector]: Object.assign(Object.assign(Object.assign({}, resetFontStyle), resetStyle), {
  103. [prefixSelector]: resetStyle
  104. })
  105. };
  106. };
  107. export const genFocusOutline = (token, offset) => ({
  108. outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
  109. outlineOffset: offset !== null && offset !== void 0 ? offset : 1,
  110. transition: 'outline-offset 0s, outline 0s'
  111. });
  112. export const genFocusStyle = (token, offset) => ({
  113. '&:focus-visible': genFocusOutline(token, offset)
  114. });
  115. export const genIconStyle = iconPrefixCls => ({
  116. [`.${iconPrefixCls}`]: Object.assign(Object.assign({}, resetIcon()), {
  117. [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
  118. display: 'block'
  119. }
  120. })
  121. });
  122. export const operationUnit = token => Object.assign(Object.assign({
  123. // FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
  124. // And Typography use this to generate link style which should not do this.
  125. color: token.colorLink,
  126. textDecoration: token.linkDecoration,
  127. outline: 'none',
  128. cursor: 'pointer',
  129. transition: `all ${token.motionDurationSlow}`,
  130. border: 0,
  131. padding: 0,
  132. background: 'none',
  133. userSelect: 'none'
  134. }, genFocusStyle(token)), {
  135. '&:hover': {
  136. color: token.colorLinkHover,
  137. textDecoration: token.linkHoverDecoration
  138. },
  139. '&:focus': {
  140. color: token.colorLinkHover,
  141. textDecoration: token.linkFocusDecoration
  142. },
  143. '&:active': {
  144. color: token.colorLinkActive,
  145. textDecoration: token.linkHoverDecoration
  146. }
  147. });