index.js 3.0 KB

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