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

// 颜色
@switch-checked-bg-color: @brand-color;
@switch-checked-bg-color-hover: @brand-color-hover;
@switch-checked-bg-color-loading: @brand-color-focus;
@switch-checked-bg-color-disabled: @brand-color-disabled;

@switch-unchecked-bg-color: @bg-color-secondarycomponent;
@switch-unchecked-bg-color-hover: @bg-color-secondarycomponent-hover;
@switch-unchecked-bg-color-loading: @bg-color-component-disabled;
@switch-unchecked-bg-color-disabled: @bg-color-component-disabled;

@switch-handle-bg-color: #fff;
@switch-content-color-checked: @text-color-anti;
@switch-content-color-unchecked: @text-color-anti;

// 尺寸
@switch-height-l: @comp-size-xs;
@switch-height-default: @comp-size-xxs;
@switch-height-s: @comp-size-xxxs;

@switch-min-width-l: calc(@switch-height-l / .618);
@switch-min-width-default: calc(@switch-height-default / .618);
@switch-min-width-s: calc(@switch-height-s / .618);

//change uncheck handle size
@switch-width-border-base: 5px;
@switch-width-border-value: 1px; //公差值

@switch-width-border-l: @switch-width-border-base;
@switch-width-border-default: (@switch-width-border-base - @switch-width-border-value * 1);
@switch-width-border-s: (@switch-width-border-base - @switch-width-border-value * 2);

//change check handle size
@switch-width-border-check-base: 3px;
@switch-width-border-check-value: .5px; //公差值

@switch-width-border-check-l: @switch-width-border-check-base;
@switch-width-border-check-default: (@switch-width-border-check-base - @switch-width-border-check-value * 1);
@switch-width-border-check-s: (@switch-width-border-check-base - @switch-width-border-check-value * 2);

// 字体
@switch-content-font-size-l: @font-size-l;
@switch-content-font-size-default: @font-size-s;
@switch-content-font-size-s: 9px;

// 间距
@switch-content-margin-left-l: calc(@switch-min-width-l / 2 + 4px);
@switch-content-margin-right-l: @comp-margin-s;

@switch-content-margin-left-default: calc(@switch-min-width-default / 2 + 2px);
@switch-content-margin-right-default: @comp-margin-xs;

@switch-content-margin-left-s: calc(@switch-min-width-s / 2 + 2px);
@switch-content-margin-right-s: @comp-margin-xxs;

// 动画
@switch-transition: all @anim-duration-base @anim-time-fn-easing;
@switch-handle-transition: all @anim-duration-base @anim-time-fn-easing;
@switch-content-transition: padding @anim-duration-base @anim-time-fn-easing,
  opacity @anim-duration-base linear;