index.js 4.9 KB

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