| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _internal = require("../../theme/internal");
- var _style = require("../../style");
- const genBreadcrumbStyle = token => {
- const {
- componentCls,
- iconCls
- } = token;
- return {
- [componentCls]: (0, _extends2.default)((0, _extends2.default)({}, (0, _style.resetComponent)(token)), {
- color: token.breadcrumbBaseColor,
- fontSize: token.breadcrumbFontSize,
- [iconCls]: {
- fontSize: token.breadcrumbIconFontSize
- },
- ol: {
- display: 'flex',
- flexWrap: 'wrap',
- margin: 0,
- padding: 0,
- listStyle: 'none'
- },
- a: (0, _extends2.default)({
- color: token.breadcrumbLinkColor,
- transition: `color ${token.motionDurationMid}`,
- padding: `0 ${token.paddingXXS}px`,
- borderRadius: token.borderRadiusSM,
- height: token.lineHeight * token.fontSize,
- display: 'inline-block',
- marginInline: -token.marginXXS,
- '&:hover': {
- color: token.breadcrumbLinkColorHover,
- backgroundColor: token.colorBgTextHover
- }
- }, (0, _style.genFocusStyle)(token)),
- [`li:last-child`]: {
- color: token.breadcrumbLastItemColor,
- [`& > ${componentCls}-separator`]: {
- display: 'none'
- }
- },
- [`${componentCls}-separator`]: {
- marginInline: token.breadcrumbSeparatorMargin,
- color: token.breadcrumbSeparatorColor
- },
- [`${componentCls}-link`]: {
- [`
- > ${iconCls} + span,
- > ${iconCls} + a
- `]: {
- marginInlineStart: token.marginXXS
- }
- },
- [`${componentCls}-overlay-link`]: {
- borderRadius: token.borderRadiusSM,
- height: token.lineHeight * token.fontSize,
- display: 'inline-block',
- padding: `0 ${token.paddingXXS}px`,
- marginInline: -token.marginXXS,
- [`> ${iconCls}`]: {
- marginInlineStart: token.marginXXS,
- fontSize: token.fontSizeIcon
- },
- '&:hover': {
- color: token.breadcrumbLinkColorHover,
- backgroundColor: token.colorBgTextHover,
- a: {
- color: token.breadcrumbLinkColorHover
- }
- },
- a: {
- '&:hover': {
- backgroundColor: 'transparent'
- }
- }
- },
- // rtl style
- [`&${token.componentCls}-rtl`]: {
- direction: 'rtl'
- }
- })
- };
- };
- // ============================== Export ==============================
- var _default = exports.default = (0, _internal.genComponentStyleHook)('Breadcrumb', token => {
- const BreadcrumbToken = (0, _internal.mergeToken)(token, {
- breadcrumbBaseColor: token.colorTextDescription,
- breadcrumbFontSize: token.fontSize,
- breadcrumbIconFontSize: token.fontSize,
- breadcrumbLinkColor: token.colorTextDescription,
- breadcrumbLinkColorHover: token.colorText,
- breadcrumbLastItemColor: token.colorText,
- breadcrumbSeparatorMargin: token.marginXS,
- breadcrumbSeparatorColor: token.colorTextDescription
- });
- return [genBreadcrumbStyle(BreadcrumbToken)];
- });
|