tdesign-react/esm/style/web/components/sticky-tool/_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

// sticky-tool组件整体样式
@sticky-tool-background: @bg-color-container;
@sticky-tool-border: @component-border;
@sticky-tool-shadow:  @shadow-3;
@sticky-tool-popup-shadow: @shadow-3;
@sticky-tool-popup-font-size: @font-size-s;
@sticky-tool-popup-color: @text-color-secondary;

// sticky-tool shape=square
@sticky-tool-border-radius-square: @border-radius-medium;
@sticky-item-border-radius-square: @border-radius-default;

// sticky-tool shape=round
@sticky-tool-border-radius-round: @border-radius-round;
@sticky-item-border-radius-round: @border-radius-circle;

// sticky-item组件整体样式
@sticky-item-margin: @comp-margin-xs;
@sticky-item-bgcolor-hover: @bg-color-container-hover;
@sticky-item-label-height: @comp-size-xxs;
@sticky-item-label-margin-top: @comp-margin-xxs;
@sticky-item-font-size: @font-size-s;
@sticky-item-text-color: @text-color-secondary;
@sticky-item-icon-size: @icon-l;
@sticky-item-icon-color: @text-color-primary;
@sticky-item-bg-color-transition: background-color @anim-duration-base linear;

// sticky-tool type=normal
@sticky-item-size-normal: @comp-size-xxxl;
@sticky-item-icon-margin-normal: @comp-margin-s @comp-margin-l 0 @comp-margin-l;
// sticky-tool type=compact
@sticky-item-size-compact: @comp-size-xl;
@sticky-item-icon-margin-compact: @comp-margin-s;