mixins.js 5.1 KB

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