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

// 颜色
@swiper-navigation-item-bg: @font-white-4;
@swiper-navigation-item-bg-outside: @text-color-disabled;

@swiper-navigation-item-bg-hover: @font-white-2;
@swiper-navigation-item-bg-active: @bg-color-container;

@swiper-navigation-item-outside-bg-hover:  @text-color-primary;
@swiper-navigation-item-outside-bg-active: @brand-color-active;

@swiper-navigation-arrow-color-fraction: @text-color-secondary;
@swiper-navigation-text-color-fraction: @text-color-secondary;

@swiper-arrow-active: @font-white-3;

// 字体
@swiper-navigation-font-size-fraction-medium: @font-size-base;
@swiper-navigation-font-size-fraction-small: @font-size-s;
@swiper-navigation-font-size-fraction-large:  @font-size-l;
@swiper-navigation-line-height-fraction-medium:  @text-line-height-base;
@swiper-navigation-line-height-fraction-small:  @text-line-height-s;
@swiper-navigation-line-height-fraction-large:  @text-line-height-l;

@swiper-arrow-icon-font-size-large:  @icon-l + 8;
@swiper-arrow-icon-font-size-medium:  @icon-l;
@swiper-arrow-icon-font-size-small:  @icon-l - 8;

// 尺寸
@swiper-navigation-item-width-bars-medium: 14px;
@swiper-navigation-item-height-bars-medium: 3px;

@swiper-navigation-item-width-bars-large: 21px;
@swiper-navigation-item-height-bars-large: 4px;

@swiper-navigation-item-width-bars-small: 9px;
@swiper-navigation-item-height-bars-small: 2px;

@swiper-navigation-item-width-bars-medium-active: 24px; // 24px
@swiper-navigation-item-width-bars-large-active: 36px; // 36px
@swiper-navigation-item-width-bars-small-active: 15px;

@swiper-arrow-size-base: 8px;
@swiper-arrow-width-small: @swiper-arrow-size-base * 2;
@swiper-arrow-height-small: @swiper-arrow-size-base * 2;
@swiper-arrow-width-medium: @swiper-arrow-size-base * 3;
@swiper-arrow-height-medium: @swiper-arrow-size-base * 3;
@swiper-arrow-width-large: @swiper-arrow-size-base * 4;
@swiper-arrow-height-large: @swiper-arrow-size-base * 4;

@swiper-arrow-left-small: @swiper-arrow-size-base;
@swiper-arrow-left-medium: @swiper-arrow-size-base * 2;
@swiper-arrow-left-large: @swiper-arrow-size-base * 3;

@swiper-card-transform-scale-active: scale(1);
@swiper-card-transform-scale: scale(.63);

// 间距
@swiper-navigation-item-margin-large: 8px;
@swiper-navigation-item-margin-medium: 6px;
@swiper-navigation-item-margin-small: 4px;

// 点
@swiper-navigation-item-dot-size: @size-2;

// 位置
@swiper-z-index-default: 1;
@swiper-navigation-z-index-default: @swiper-z-index-default + 1;

// 动画
@swiper-animation-duration: .5s;
@swiper-animation-time-fn: @anim-time-fn-easing;