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

/**
 * 颜色
 */
@dialog-box-shadow: @shadow-2;
@drawer-bg-color: @bg-color-container;
@drawer-border-color: @border-level-1-color;
@drawer-header-text-color: @text-color-primary;
@drawer-body-text-color: @text-color-secondary;
@drawer-shadow: @shadow-2;
@drawer-mask: @mask-active;
@drawer-close-btn-color: @text-color-primary;
@drawer-close-btn-bg-color: @bg-color-container;
@dialog-close-btn-bg-hover: @bg-color-container-hover;
@dialog-close-btn-bg-active: @bg-color-container-active;

/**
 * 尺寸
 */
@drawer-icon-size: calc(@font-size-base + 2px);
@drawer-header-height: @comp-size-xxxl;
@drawer-close-btn-size: @comp-size-xs;
@drawer-content-wrapper-size: 300px;

/**
 * 字体
 */
@drawer-body-text-font-size: @font-body-medium;
@drawer-header-font-size: @font-title-medium;

/**
 * 动画
 */
@drawer-default-timing-function: @anim-time-fn-easing;
@drawer-default-duration: @anim-duration-base;
@drawer-slow-duration: @anim-duration-slow;

/**
 * 间距
 */
@drawer-footer-padding: @comp-paddingTB-l @comp-paddingLR-l;
@drawer-header-padding: 0 @comp-paddingLR-l;
@drawer-body-padding: @comp-paddingTB-l @comp-paddingLR-l;
@drawer-footer-btn-margin-left: @comp-margin-s;

/**
 * 位置
 */
@drawer-close-btn-position-right: @comp-margin-s;
@drawer-footer-text-align: left;

/**
 * 边框弧度
 */
@drawer-header-border-radius: @border-radius-small @border-radius-small 0 0;