index.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { unit } from '@ant-design/cssinjs';
  2. import { genFocusStyle, resetComponent } from '../../style';
  3. import { genStyleHooks, mergeToken } from '../../theme/internal';
  4. const genBreadcrumbStyle = token => {
  5. const {
  6. componentCls,
  7. iconCls,
  8. calc
  9. } = token;
  10. return {
  11. [componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
  12. color: token.itemColor,
  13. fontSize: token.fontSize,
  14. [iconCls]: {
  15. fontSize: token.iconFontSize
  16. },
  17. ol: {
  18. display: 'flex',
  19. flexWrap: 'wrap',
  20. margin: 0,
  21. padding: 0,
  22. listStyle: 'none'
  23. },
  24. a: Object.assign({
  25. color: token.linkColor,
  26. transition: `color ${token.motionDurationMid}`,
  27. padding: `0 ${unit(token.paddingXXS)}`,
  28. borderRadius: token.borderRadiusSM,
  29. height: token.fontHeight,
  30. display: 'inline-block',
  31. marginInline: calc(token.marginXXS).mul(-1).equal(),
  32. '&:hover': {
  33. color: token.linkHoverColor,
  34. backgroundColor: token.colorBgTextHover
  35. }
  36. }, genFocusStyle(token)),
  37. 'li:last-child': {
  38. color: token.lastItemColor
  39. },
  40. [`${componentCls}-separator`]: {
  41. marginInline: token.separatorMargin,
  42. color: token.separatorColor
  43. },
  44. [`${componentCls}-link`]: {
  45. [`
  46. > ${iconCls} + span,
  47. > ${iconCls} + a
  48. `]: {
  49. marginInlineStart: token.marginXXS
  50. }
  51. },
  52. [`${componentCls}-overlay-link`]: {
  53. borderRadius: token.borderRadiusSM,
  54. height: token.fontHeight,
  55. display: 'inline-block',
  56. padding: `0 ${unit(token.paddingXXS)}`,
  57. marginInline: calc(token.marginXXS).mul(-1).equal(),
  58. [`> ${iconCls}`]: {
  59. marginInlineStart: token.marginXXS,
  60. fontSize: token.fontSizeIcon
  61. },
  62. '&:hover': {
  63. color: token.linkHoverColor,
  64. backgroundColor: token.colorBgTextHover,
  65. a: {
  66. color: token.linkHoverColor
  67. }
  68. },
  69. a: {
  70. '&:hover': {
  71. backgroundColor: 'transparent'
  72. }
  73. }
  74. },
  75. // rtl style
  76. [`&${token.componentCls}-rtl`]: {
  77. direction: 'rtl'
  78. }
  79. })
  80. };
  81. };
  82. export const prepareComponentToken = token => ({
  83. itemColor: token.colorTextDescription,
  84. lastItemColor: token.colorText,
  85. iconFontSize: token.fontSize,
  86. linkColor: token.colorTextDescription,
  87. linkHoverColor: token.colorText,
  88. separatorColor: token.colorTextDescription,
  89. separatorMargin: token.marginXS
  90. });
  91. // ============================== Export ==============================
  92. export default genStyleHooks('Breadcrumb', token => {
  93. const breadcrumbToken = mergeToken(token, {});
  94. return genBreadcrumbStyle(breadcrumbToken);
  95. }, prepareComponentToken);