index.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. export { operationUnit } from './operationUnit';
  3. export { roundedArrow } from './roundedArrow';
  4. export { genPresetColor } from './presetColor';
  5. export const textEllipsis = {
  6. overflow: 'hidden',
  7. whiteSpace: 'nowrap',
  8. textOverflow: 'ellipsis'
  9. };
  10. export const resetComponent = token => ({
  11. boxSizing: 'border-box',
  12. margin: 0,
  13. padding: 0,
  14. color: token.colorText,
  15. fontSize: token.fontSize,
  16. // font-variant: @font-variant-base;
  17. lineHeight: token.lineHeight,
  18. listStyle: 'none',
  19. // font-feature-settings: @font-feature-settings-base;
  20. fontFamily: token.fontFamily
  21. });
  22. export const resetIcon = () => ({
  23. display: 'inline-flex',
  24. alignItems: 'center',
  25. color: 'inherit',
  26. fontStyle: 'normal',
  27. lineHeight: 0,
  28. textAlign: 'center',
  29. textTransform: 'none',
  30. // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  31. verticalAlign: '-0.125em',
  32. textRendering: 'optimizeLegibility',
  33. '-webkit-font-smoothing': 'antialiased',
  34. '-moz-osx-font-smoothing': 'grayscale',
  35. '> *': {
  36. lineHeight: 1
  37. },
  38. svg: {
  39. display: 'inline-block'
  40. }
  41. });
  42. export const clearFix = () => ({
  43. // https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229
  44. '&::before': {
  45. display: 'table',
  46. content: '""'
  47. },
  48. '&::after': {
  49. // https://github.com/ant-design/ant-design/issues/21864
  50. display: 'table',
  51. clear: 'both',
  52. content: '""'
  53. }
  54. });
  55. export const genLinkStyle = token => ({
  56. a: {
  57. color: token.colorLink,
  58. textDecoration: token.linkDecoration,
  59. backgroundColor: 'transparent',
  60. outline: 'none',
  61. cursor: 'pointer',
  62. transition: `color ${token.motionDurationSlow}`,
  63. '-webkit-text-decoration-skip': 'objects',
  64. '&:hover': {
  65. color: token.colorLinkHover
  66. },
  67. '&:active': {
  68. color: token.colorLinkActive
  69. },
  70. [`&:active,
  71. &:hover`]: {
  72. textDecoration: token.linkHoverDecoration,
  73. outline: 0
  74. },
  75. // https://github.com/ant-design/ant-design/issues/22503
  76. '&:focus': {
  77. textDecoration: token.linkFocusDecoration,
  78. outline: 0
  79. },
  80. '&[disabled]': {
  81. color: token.colorTextDisabled,
  82. cursor: 'not-allowed'
  83. }
  84. }
  85. });
  86. export const genCommonStyle = (token, componentPrefixCls) => {
  87. const {
  88. fontFamily,
  89. fontSize
  90. } = token;
  91. const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
  92. return {
  93. [rootPrefixSelector]: {
  94. fontFamily,
  95. fontSize,
  96. boxSizing: 'border-box',
  97. '&::before, &::after': {
  98. boxSizing: 'border-box'
  99. },
  100. [rootPrefixSelector]: {
  101. boxSizing: 'border-box',
  102. '&::before, &::after': {
  103. boxSizing: 'border-box'
  104. }
  105. }
  106. }
  107. };
  108. };
  109. export const genFocusOutline = token => ({
  110. outline: `${token.lineWidthBold}px solid ${token.colorPrimaryBorder}`,
  111. outlineOffset: 1,
  112. transition: 'outline-offset 0s, outline 0s'
  113. });
  114. export const genFocusStyle = token => ({
  115. '&:focus-visible': _extends({}, genFocusOutline(token))
  116. });