index.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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. const genPageHeaderStyle = token => {
  11. const {
  12. componentCls,
  13. antCls
  14. } = token;
  15. return {
  16. [componentCls]: (0, _extends2.default)((0, _extends2.default)({}, (0, _style.resetComponent)(token)), {
  17. position: 'relative',
  18. padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`,
  19. backgroundColor: token.colorBgContainer,
  20. [`&${componentCls}-ghost`]: {
  21. backgroundColor: token.pageHeaderGhostBg
  22. },
  23. [`&.has-footer`]: {
  24. paddingBottom: 0
  25. },
  26. [`${componentCls}-back`]: {
  27. marginRight: token.marginMD,
  28. fontSize: token.fontSizeLG,
  29. lineHeight: 1,
  30. [`&-button`]: (0, _extends2.default)((0, _extends2.default)({}, (0, _style.operationUnit)(token)), {
  31. color: token.pageHeaderBackColor,
  32. cursor: 'pointer'
  33. })
  34. },
  35. [`${antCls}-divider-vertical`]: {
  36. height: '14px',
  37. margin: `0 ${token.marginSM}`,
  38. verticalAlign: 'middle'
  39. },
  40. [`${antCls}-breadcrumb + &-heading`]: {
  41. marginTop: token.marginXS
  42. },
  43. [`${componentCls}-heading`]: {
  44. display: 'flex',
  45. justifyContent: 'space-between',
  46. [`&-left`]: {
  47. display: 'flex',
  48. alignItems: 'center',
  49. margin: `${token.marginXS / 2}px 0`,
  50. overflow: 'hidden'
  51. },
  52. [`&-title`]: (0, _extends2.default)({
  53. marginRight: token.marginSM,
  54. marginBottom: 0,
  55. color: token.colorTextHeading,
  56. fontWeight: 600,
  57. fontSize: token.pageHeaderHeadingTitle,
  58. lineHeight: `${token.controlHeight}px`
  59. }, _style.textEllipsis),
  60. [`${antCls}-avatar`]: {
  61. marginRight: token.marginSM
  62. },
  63. [`&-sub-title`]: (0, _extends2.default)({
  64. marginRight: token.marginSM,
  65. color: token.colorTextDescription,
  66. fontSize: token.pageHeaderHeadingSubTitle,
  67. lineHeight: token.lineHeight
  68. }, _style.textEllipsis),
  69. [`&-extra`]: {
  70. margin: `${token.marginXS / 2}px 0`,
  71. whiteSpace: 'nowrap',
  72. [`> *`]: {
  73. marginLeft: token.marginSM,
  74. whiteSpace: 'unset'
  75. },
  76. [`> *:first-child`]: {
  77. marginLeft: 0
  78. }
  79. }
  80. },
  81. [`${componentCls}-content`]: {
  82. paddingTop: token.pageHeaderContentPaddingVertical
  83. },
  84. [`${componentCls}-footer`]: {
  85. marginTop: token.marginMD,
  86. [`${antCls}-tabs`]: {
  87. [`> ${antCls}-tabs-nav`]: {
  88. margin: 0,
  89. [`&::before`]: {
  90. border: 'none'
  91. }
  92. },
  93. [`${antCls}-tabs-tab`]: {
  94. paddingTop: token.paddingXS,
  95. paddingBottom: token.paddingXS,
  96. fontSize: token.pageHeaderTabFontSize
  97. }
  98. }
  99. },
  100. [`${componentCls}-compact ${componentCls}-heading`]: {
  101. flexWrap: 'wrap'
  102. },
  103. // rtl style
  104. [`&${token.componentCls}-rtl`]: {
  105. direction: 'rtl'
  106. }
  107. })
  108. };
  109. };
  110. // ============================== Export ==============================
  111. var _default = exports.default = (0, _internal.genComponentStyleHook)('PageHeader', token => {
  112. const PageHeaderToken = (0, _internal.mergeToken)(token, {
  113. pageHeaderPadding: token.paddingLG,
  114. pageHeaderPaddingVertical: token.paddingMD,
  115. pageHeaderPaddingBreadcrumb: token.paddingSM,
  116. pageHeaderContentPaddingVertical: token.paddingSM,
  117. pageHeaderBackColor: token.colorTextBase,
  118. pageHeaderGhostBg: 'transparent',
  119. pageHeaderHeadingTitle: token.fontSizeHeading4,
  120. pageHeaderHeadingSubTitle: token.fontSize,
  121. pageHeaderTabFontSize: token.fontSizeLG
  122. });
  123. return [genPageHeaderStyle(PageHeaderToken)];
  124. });