mixins.js 5.8 KB

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