index.js 3.1 KB

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