index.js 4.2 KB

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