index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { genComponentStyleHook, mergeToken } from '../../theme/internal';
  3. import { resetComponent } from '../../style';
  4. // ============================== Shared ==============================
  5. const genSharedDividerStyle = token => {
  6. const {
  7. componentCls,
  8. sizePaddingEdgeHorizontal,
  9. colorSplit,
  10. lineWidth
  11. } = token;
  12. return {
  13. [componentCls]: _extends(_extends({}, resetComponent(token)), {
  14. borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
  15. // vertical
  16. '&-vertical': {
  17. position: 'relative',
  18. top: '-0.06em',
  19. display: 'inline-block',
  20. height: '0.9em',
  21. margin: `0 ${token.dividerVerticalGutterMargin}px`,
  22. verticalAlign: 'middle',
  23. borderTop: 0,
  24. borderInlineStart: `${lineWidth}px solid ${colorSplit}`
  25. },
  26. '&-horizontal': {
  27. display: 'flex',
  28. clear: 'both',
  29. width: '100%',
  30. minWidth: '100%',
  31. margin: `${token.dividerHorizontalGutterMargin}px 0`
  32. },
  33. [`&-horizontal${componentCls}-with-text`]: {
  34. display: 'flex',
  35. alignItems: 'center',
  36. margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
  37. color: token.colorTextHeading,
  38. fontWeight: 500,
  39. fontSize: token.fontSizeLG,
  40. whiteSpace: 'nowrap',
  41. textAlign: 'center',
  42. borderBlockStart: `0 ${colorSplit}`,
  43. '&::before, &::after': {
  44. position: 'relative',
  45. width: '50%',
  46. borderBlockStart: `${lineWidth}px solid transparent`,
  47. // Chrome not accept `inherit` in `border-top`
  48. borderBlockStartColor: 'inherit',
  49. borderBlockEnd: 0,
  50. transform: 'translateY(50%)',
  51. content: "''"
  52. }
  53. },
  54. [`&-horizontal${componentCls}-with-text-left`]: {
  55. '&::before': {
  56. width: '5%'
  57. },
  58. '&::after': {
  59. width: '95%'
  60. }
  61. },
  62. [`&-horizontal${componentCls}-with-text-right`]: {
  63. '&::before': {
  64. width: '95%'
  65. },
  66. '&::after': {
  67. width: '5%'
  68. }
  69. },
  70. [`${componentCls}-inner-text`]: {
  71. display: 'inline-block',
  72. padding: '0 1em'
  73. },
  74. '&-dashed': {
  75. background: 'none',
  76. borderColor: colorSplit,
  77. borderStyle: 'dashed',
  78. borderWidth: `${lineWidth}px 0 0`
  79. },
  80. [`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
  81. '&::before, &::after': {
  82. borderStyle: 'dashed none none'
  83. }
  84. },
  85. [`&-vertical${componentCls}-dashed`]: {
  86. borderInlineStartWidth: lineWidth,
  87. borderInlineEnd: 0,
  88. borderBlockStart: 0,
  89. borderBlockEnd: 0
  90. },
  91. [`&-plain${componentCls}-with-text`]: {
  92. color: token.colorText,
  93. fontWeight: 'normal',
  94. fontSize: token.fontSize
  95. },
  96. [`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]: {
  97. '&::before': {
  98. width: 0
  99. },
  100. '&::after': {
  101. width: '100%'
  102. },
  103. [`${componentCls}-inner-text`]: {
  104. paddingInlineStart: sizePaddingEdgeHorizontal
  105. }
  106. },
  107. [`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]: {
  108. '&::before': {
  109. width: '100%'
  110. },
  111. '&::after': {
  112. width: 0
  113. },
  114. [`${componentCls}-inner-text`]: {
  115. paddingInlineEnd: sizePaddingEdgeHorizontal
  116. }
  117. }
  118. })
  119. };
  120. };
  121. // ============================== Export ==============================
  122. export default genComponentStyleHook('Divider', token => {
  123. const dividerToken = mergeToken(token, {
  124. dividerVerticalGutterMargin: token.marginXS,
  125. dividerHorizontalWithTextGutterMargin: token.margin,
  126. dividerHorizontalGutterMargin: token.marginLG
  127. });
  128. return [genSharedDividerStyle(dividerToken)];
  129. }, {
  130. sizePaddingEdgeHorizontal: 0
  131. });