tdesign-react/esm/common/style/web/components/dialog/_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-border-color: transparent;
@dialog-bg-color: @bg-color-container;
@dialog-header-text-color: @text-color-primary;
@dialog-header-bg-color-fullscreen: @bg-color-secondarycontainer;
@dialog-close-icon-fullscreen-hover: @bg-color-secondarycontainer-hover;
@dialog-close-icon-fullscreen-active: @bg-color-secondarycontainer-active;
@dialog-body-text-color: @text-color-secondary;
@dialog-close-icon-hover: @bg-color-container-hover;
@dialog-close-icon-active: @bg-color-container-active;
@dialog-info-icon-color: @brand-color;
@dialog-success-icon-color: @success-color;
@dialog-warning-icon-color: @warning-color;
@dialog-error-icon-color: @error-color;
@dialog-close-color: @text-color-secondary;
@dialog-mask-bg-color: @mask-active;

// 字体
@dialog-header-font: @font-title-medium;
@dialog-header-weight: 600;
@dialog-body-text-font: @font-body-medium;

// 尺寸
@dialog-width: 480px;
@dialog-header-height-fullscreen: @comp-size-xxxl;
@dialog-icon-size: calc(@font-size-l + 8px);
@dialog-close-icon-size: calc(@font-size-l + 4px);
@dialog-footer-height-fullscreen: @comp-size-xxxxl;

// 间距
@dialog-spacer: @comp-paddingTB-xxl @comp-paddingLR-xxl;
@dialog-default-spacer: @comp-paddingTB-xxl @comp-paddingLR-xxl;
@dialog-default-padding: @dialog-spacer;
@dialog-header-icon-margin-right: @comp-margin-s;
@dialog-header-icon-margin-top: @size-1;
@dialog-header-content-margin-right: @comp-margin-s;
@dialog-header-padding-fullscreen: 0 @comp-paddingLR-xxl;
@dialog-closebtn-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs;
@dialog-body-padding: @comp-paddingTB-l 0;
@dialog-body-padding-fullscreen: @comp-paddingTB-xl @comp-paddingLR-xxl;
@dialog-body-icon-padding: @comp-paddingTB-l 0;
@dialog-footer-button-margin-left: @comp-margin-s;
@dialog-footer-padding: @comp-paddingTB-l 0 0;
@dialog-footer-padding-fullscreen: 0 @comp-paddingLR-xxl @comp-paddingTB-xxl;

// 边框
@dialog-border: 1px solid @border-level-1-color;
@dialog-border-radius: @border-radius-medium;
@dialog-close-border-radius: @border-radius-medium;

// 位置
@dialog-close-position-top: @spacer-3;
@dialog-close-position-right: @spacer-3;
// 此处不能使用20% 因为定位是paddingTop 所以20% 会根据屏幕宽度
@dialog-top-position-top: 20vh;

// 动画
@dialog-anim-duration: @anim-duration-base;
@dialog-anim-time-fn-enter: @anim-time-fn-easing;
@dialog-anim-time-fn-exit: @anim-time-fn-easing;