tdesign-react/esm/common/style/web/components/breadcrumb/_var.less

TDesign Component for React

// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]

// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等

// 如：@button-line-bg-color-hover
// 如：@button-line-height-s

//文字颜色
@breadcrumb-text-color-default: @text-color-placeholder;
@breadcrumb-text-color-hover: @brand-color;
@breadcrumb-text-color-current: @text-color-primary;
@breadcrumb-text-color-disabled: @text-color-disabled;

//icon颜色
@breadcrumb-icon-arrow-color-default: @text-color-placeholder;
@breadcrumb-icon-slash-color-default: @text-color-placeholder;
@breadcrumb-icon-color-hover: @brand-color;
@breadcrumb-icon-color-current: @text-color-placeholder;

//字号
@breadcrumb-font-base: @font-body-medium;

//阴影
@breadcrumb-option-box-shadow: @shadow-2;

@breadcrumb-option-box-bg: @bg-color-container;
//间距
@breadcrumb-separator-margin: 0 @comp-margin-xs;
@breadcrumb-content-icon-margin-bottom: @comp-margin-xxs;

// 尺寸
@breadcrumb-icon-size: @font-size-l;
@breadcrumb-inner-max-width-default: 120px;
@breadcrumb-option-max-width: 120px;
@breadcrumb-inner-msg-width: 300px;