index.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import { genStyleHooks, mergeToken } from '../../theme/internal';
  2. import genSpaceCompactStyle from './compact';
  3. const genSpaceStyle = token => {
  4. const {
  5. componentCls,
  6. antCls
  7. } = token;
  8. return {
  9. [componentCls]: {
  10. display: 'inline-flex',
  11. '&-rtl': {
  12. direction: 'rtl'
  13. },
  14. '&-vertical': {
  15. flexDirection: 'column'
  16. },
  17. '&-align': {
  18. flexDirection: 'column',
  19. '&-center': {
  20. alignItems: 'center'
  21. },
  22. '&-start': {
  23. alignItems: 'flex-start'
  24. },
  25. '&-end': {
  26. alignItems: 'flex-end'
  27. },
  28. '&-baseline': {
  29. alignItems: 'baseline'
  30. }
  31. },
  32. [`${componentCls}-item:empty`]: {
  33. display: 'none'
  34. },
  35. // https://github.com/ant-design/ant-design/issues/47875
  36. [`${componentCls}-item > ${antCls}-badge-not-a-wrapper:only-child`]: {
  37. display: 'block'
  38. }
  39. }
  40. };
  41. };
  42. const genSpaceGapStyle = token => {
  43. const {
  44. componentCls
  45. } = token;
  46. return {
  47. [componentCls]: {
  48. '&-gap-row-small': {
  49. rowGap: token.spaceGapSmallSize
  50. },
  51. '&-gap-row-middle': {
  52. rowGap: token.spaceGapMiddleSize
  53. },
  54. '&-gap-row-large': {
  55. rowGap: token.spaceGapLargeSize
  56. },
  57. '&-gap-col-small': {
  58. columnGap: token.spaceGapSmallSize
  59. },
  60. '&-gap-col-middle': {
  61. columnGap: token.spaceGapMiddleSize
  62. },
  63. '&-gap-col-large': {
  64. columnGap: token.spaceGapLargeSize
  65. }
  66. }
  67. };
  68. };
  69. // ============================== Export ==============================
  70. export const prepareComponentToken = () => ({});
  71. export default genStyleHooks('Space', token => {
  72. const spaceToken = mergeToken(token, {
  73. spaceGapSmallSize: token.paddingXS,
  74. spaceGapMiddleSize: token.padding,
  75. spaceGapLargeSize: token.paddingLG
  76. });
  77. return [genSpaceStyle(spaceToken), genSpaceGapStyle(spaceToken), genSpaceCompactStyle(spaceToken)];
  78. }, () => ({}), {
  79. // Space component don't apply extra font style
  80. // https://github.com/ant-design/ant-design/issues/40315
  81. resetStyle: false
  82. });