mixins.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.getTitleStyles = exports.getResetStyles = exports.getLinkStyles = exports.getEllipsisStyles = exports.getEditableStyles = exports.getCopyableStyles = void 0;
  6. var _colors = require("@ant-design/colors");
  7. var _style = require("../../style");
  8. /*
  9. .typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) {
  10. margin-bottom: @headingMarginBottom;
  11. color: @headingColor;
  12. font-weight: @fontWeight;
  13. fontSize: @fontSize;
  14. line-height: @lineHeight;
  15. }
  16. */
  17. const getTitleStyle = (fontSize, lineHeight, color, token) => {
  18. const {
  19. titleMarginBottom,
  20. fontWeightStrong
  21. } = token;
  22. return {
  23. marginBottom: titleMarginBottom,
  24. color,
  25. fontWeight: fontWeightStrong,
  26. fontSize,
  27. lineHeight
  28. };
  29. };
  30. const getTitleStyles = token => {
  31. const headings = [1, 2, 3, 4, 5];
  32. const styles = {};
  33. headings.forEach(headingLevel => {
  34. styles[`
  35. h${headingLevel}&,
  36. div&-h${headingLevel},
  37. div&-h${headingLevel} > textarea,
  38. h${headingLevel}
  39. `] = getTitleStyle(token[`fontSizeHeading${headingLevel}`], token[`lineHeightHeading${headingLevel}`], token.colorTextHeading, token);
  40. });
  41. return styles;
  42. };
  43. exports.getTitleStyles = getTitleStyles;
  44. const getLinkStyles = token => {
  45. const {
  46. componentCls
  47. } = token;
  48. return {
  49. 'a&, a': Object.assign(Object.assign({}, (0, _style.operationUnit)(token)), {
  50. userSelect: 'text',
  51. [`&[disabled], &${componentCls}-disabled`]: {
  52. color: token.colorTextDisabled,
  53. cursor: 'not-allowed',
  54. '&:active, &:hover': {
  55. color: token.colorTextDisabled
  56. },
  57. '&:active': {
  58. pointerEvents: 'none'
  59. }
  60. }
  61. })
  62. };
  63. };
  64. exports.getLinkStyles = getLinkStyles;
  65. const getResetStyles = token => ({
  66. code: {
  67. margin: '0 0.2em',
  68. paddingInline: '0.4em',
  69. paddingBlock: '0.2em 0.1em',
  70. fontSize: '85%',
  71. fontFamily: token.fontFamilyCode,
  72. background: 'rgba(150, 150, 150, 0.1)',
  73. border: '1px solid rgba(100, 100, 100, 0.2)',
  74. borderRadius: 3
  75. },
  76. kbd: {
  77. margin: '0 0.2em',
  78. paddingInline: '0.4em',
  79. paddingBlock: '0.15em 0.1em',
  80. fontSize: '90%',
  81. fontFamily: token.fontFamilyCode,
  82. background: 'rgba(150, 150, 150, 0.06)',
  83. border: '1px solid rgba(100, 100, 100, 0.2)',
  84. borderBottomWidth: 2,
  85. borderRadius: 3
  86. },
  87. mark: {
  88. padding: 0,
  89. // FIXME hardcode in v4
  90. backgroundColor: _colors.gold[2]
  91. },
  92. 'u, ins': {
  93. textDecoration: 'underline',
  94. textDecorationSkipInk: 'auto'
  95. },
  96. 's, del': {
  97. textDecoration: 'line-through'
  98. },
  99. strong: {
  100. fontWeight: token.fontWeightStrong
  101. },
  102. // list
  103. 'ul, ol': {
  104. marginInline: 0,
  105. marginBlock: '0 1em',
  106. padding: 0,
  107. li: {
  108. marginInline: '20px 0',
  109. marginBlock: 0,
  110. paddingInline: '4px 0',
  111. paddingBlock: 0
  112. }
  113. },
  114. ul: {
  115. listStyleType: 'circle',
  116. ul: {
  117. listStyleType: 'disc'
  118. }
  119. },
  120. ol: {
  121. listStyleType: 'decimal'
  122. },
  123. // pre & block
  124. 'pre, blockquote': {
  125. margin: '1em 0'
  126. },
  127. pre: {
  128. padding: '0.4em 0.6em',
  129. whiteSpace: 'pre-wrap',
  130. wordWrap: 'break-word',
  131. background: 'rgba(150, 150, 150, 0.1)',
  132. border: '1px solid rgba(100, 100, 100, 0.2)',
  133. borderRadius: 3,
  134. fontFamily: token.fontFamilyCode,
  135. // Compatible for marked
  136. code: {
  137. display: 'inline',
  138. margin: 0,
  139. padding: 0,
  140. fontSize: 'inherit',
  141. fontFamily: 'inherit',
  142. background: 'transparent',
  143. border: 0
  144. }
  145. },
  146. blockquote: {
  147. paddingInline: '0.6em 0',
  148. paddingBlock: 0,
  149. borderInlineStart: '4px solid rgba(100, 100, 100, 0.2)',
  150. opacity: 0.85
  151. }
  152. });
  153. exports.getResetStyles = getResetStyles;
  154. const getEditableStyles = token => {
  155. const {
  156. componentCls,
  157. paddingSM
  158. } = token;
  159. const inputShift = paddingSM;
  160. return {
  161. '&-edit-content': {
  162. position: 'relative',
  163. 'div&': {
  164. insetInlineStart: token.calc(token.paddingSM).mul(-1).equal(),
  165. insetBlockStart: token.calc(inputShift).div(-2).add(1).equal(),
  166. marginBottom: token.calc(inputShift).div(2).sub(2).equal()
  167. },
  168. [`${componentCls}-edit-content-confirm`]: {
  169. position: 'absolute',
  170. insetInlineEnd: token.calc(token.marginXS).add(2).equal(),
  171. insetBlockEnd: token.marginXS,
  172. color: token.colorIcon,
  173. // default style
  174. fontWeight: 'normal',
  175. fontSize: token.fontSize,
  176. fontStyle: 'normal',
  177. pointerEvents: 'none'
  178. },
  179. textarea: {
  180. margin: '0!important',
  181. // Fix Editable Textarea flash in Firefox
  182. MozTransition: 'none',
  183. height: '1em'
  184. }
  185. }
  186. };
  187. };
  188. exports.getEditableStyles = getEditableStyles;
  189. const getCopyableStyles = token => ({
  190. [`${token.componentCls}-copy-success`]: {
  191. [`
  192. &,
  193. &:hover,
  194. &:focus`]: {
  195. color: token.colorSuccess
  196. }
  197. },
  198. [`${token.componentCls}-copy-icon-only`]: {
  199. marginInlineStart: 0
  200. }
  201. });
  202. exports.getCopyableStyles = getCopyableStyles;
  203. const getEllipsisStyles = () => ({
  204. [`
  205. a&-ellipsis,
  206. span&-ellipsis
  207. `]: {
  208. display: 'inline-block',
  209. maxWidth: '100%'
  210. },
  211. '&-ellipsis-single-line': {
  212. whiteSpace: 'nowrap',
  213. overflow: 'hidden',
  214. textOverflow: 'ellipsis',
  215. // https://blog.csdn.net/iefreer/article/details/50421025
  216. 'a&, span&': {
  217. verticalAlign: 'bottom'
  218. },
  219. '> code': {
  220. paddingBlock: 0,
  221. maxWidth: 'calc(100% - 1.2em)',
  222. display: 'inline-block',
  223. overflow: 'hidden',
  224. textOverflow: 'ellipsis',
  225. verticalAlign: 'bottom',
  226. // https://github.com/ant-design/ant-design/issues/45953
  227. boxSizing: 'content-box'
  228. }
  229. },
  230. '&-ellipsis-multiple-line': {
  231. display: '-webkit-box',
  232. overflow: 'hidden',
  233. WebkitLineClamp: 3,
  234. WebkitBoxOrient: 'vertical'
  235. }
  236. });
  237. exports.getEllipsisStyles = getEllipsisStyles;