index.js 3.3 KB

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