index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.prepareComponentToken = exports.default = exports.DEPRECATED_TOKENS = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. var _internal = require("../../theme/internal");
  8. const genLayoutStyle = token => {
  9. const {
  10. antCls,
  11. // .ant
  12. componentCls,
  13. // .ant-layout
  14. colorText,
  15. footerBg,
  16. headerHeight,
  17. headerPadding,
  18. headerColor,
  19. footerPadding,
  20. fontSize,
  21. bodyBg,
  22. headerBg
  23. } = token;
  24. return {
  25. [componentCls]: {
  26. display: 'flex',
  27. flex: 'auto',
  28. flexDirection: 'column',
  29. /* fix firefox can't set height smaller than content on flex item */
  30. minHeight: 0,
  31. background: bodyBg,
  32. '&, *': {
  33. boxSizing: 'border-box'
  34. },
  35. [`&${componentCls}-has-sider`]: {
  36. flexDirection: 'row',
  37. [`> ${componentCls}, > ${componentCls}-content`]: {
  38. // https://segmentfault.com/a/1190000019498300
  39. width: 0
  40. }
  41. },
  42. [`${componentCls}-header, &${componentCls}-footer`]: {
  43. flex: '0 0 auto'
  44. },
  45. // RTL
  46. '&-rtl': {
  47. direction: 'rtl'
  48. }
  49. },
  50. // ==================== Header ====================
  51. [`${componentCls}-header`]: {
  52. height: headerHeight,
  53. padding: headerPadding,
  54. color: headerColor,
  55. lineHeight: (0, _cssinjs.unit)(headerHeight),
  56. background: headerBg,
  57. // Other components/menu/style/index.less line:686
  58. // Integration with header element so menu items have the same height
  59. [`${antCls}-menu`]: {
  60. lineHeight: 'inherit'
  61. }
  62. },
  63. // ==================== Footer ====================
  64. [`${componentCls}-footer`]: {
  65. padding: footerPadding,
  66. color: colorText,
  67. fontSize,
  68. background: footerBg
  69. },
  70. // =================== Content ====================
  71. [`${componentCls}-content`]: {
  72. flex: 'auto',
  73. color: colorText,
  74. // fix firefox can't set height smaller than content on flex item
  75. minHeight: 0
  76. }
  77. };
  78. };
  79. const prepareComponentToken = token => {
  80. const {
  81. colorBgLayout,
  82. controlHeight,
  83. controlHeightLG,
  84. colorText,
  85. controlHeightSM,
  86. marginXXS,
  87. colorTextLightSolid,
  88. colorBgContainer
  89. } = token;
  90. const paddingInline = controlHeightLG * 1.25;
  91. return {
  92. // Deprecated
  93. colorBgHeader: '#001529',
  94. colorBgBody: colorBgLayout,
  95. colorBgTrigger: '#002140',
  96. bodyBg: colorBgLayout,
  97. headerBg: '#001529',
  98. headerHeight: controlHeight * 2,
  99. headerPadding: `0 ${paddingInline}px`,
  100. headerColor: colorText,
  101. footerPadding: `${controlHeightSM}px ${paddingInline}px`,
  102. footerBg: colorBgLayout,
  103. siderBg: '#001529',
  104. triggerHeight: controlHeightLG + marginXXS * 2,
  105. triggerBg: '#002140',
  106. triggerColor: colorTextLightSolid,
  107. zeroTriggerWidth: controlHeightLG,
  108. zeroTriggerHeight: controlHeightLG,
  109. lightSiderBg: colorBgContainer,
  110. lightTriggerBg: colorBgContainer,
  111. lightTriggerColor: colorText
  112. };
  113. };
  114. // ============================== Export ==============================
  115. exports.prepareComponentToken = prepareComponentToken;
  116. const DEPRECATED_TOKENS = exports.DEPRECATED_TOKENS = [['colorBgBody', 'bodyBg'], ['colorBgHeader', 'headerBg'], ['colorBgTrigger', 'triggerBg']];
  117. var _default = exports.default = (0, _internal.genStyleHooks)('Layout', genLayoutStyle, prepareComponentToken, {
  118. deprecatedTokens: DEPRECATED_TOKENS
  119. });