tdesign-react
Version:
TDesign Component for React
40 lines (32 loc) • 1.19 kB
text/less
// 组件变量
// 名称可按如下规则定义：
// <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
// 颜色
@badge-text-color: @text-color-anti;
@badge-color: @error-color;
// 尺寸
// 默认尺寸 circle/round 高度
@badge-height: @comp-size-xxs;
// 小尺寸 circle/round 高度
@badge-height-s: @comp-size-xxxs;
// dot 宽/高
@badge-dot-size: 6px;
// @badge-status-size: 6px;
@badge-min-width: 8px;
// 字体
@badge-font: @font-body-small;
// 间距
// 默认尺寸circle/round 左右padding
@badge-padding: calc((@badge-height - @badge-min-width) / 2);
// 小尺寸circle/round 左右padding
@badge-padding-s: calc((@badge-height-s - @badge-min-width) / 2);
//边框
@badge-shape-circle: calc(@badge-height / 2);
@badge-shape-round: @border-radius-default;