tdesign-mobile-vue
Version:
tdesign-mobile-vue
90 lines (81 loc) • 3.58 kB
text/less
// 组件变量
// 名称可按如下规则定义：
// <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
// 颜色
@upload-icon-check-circle-filled-color: @success-color;
@upload-icon-error-circle-filled-color: @error-color;
@upload-icon-loading-color: @brand-color;
@upload-icon-time-filled-color: @text-color-placeholder;
@upload-highlight-color: @text-color-primary;
@upload-icon-add-color: @text-color-placeholder;
@upload-small-color: @text-color-placeholder;
@upload-placeholder-color: @text-color-placeholder;
@upload-icon-color: @text-color-placeholder;
@upload-icon-color-hover: @text-color-secondary;
@upload-list-file-icon-color: @brand-color;
@upload-list-item-error-color: @error-color;
@upload-list-control-color-hover: @error-color;
@upload-card-item-error-icon-warning-color: @error-color;
@upload-card-item-status-color: @error-color;
@upload-card-item-bg-color: @bg-color-page;
@upload-card-item-bg-border-color-hover: @brand-color;
@upload-card-name-color: @text-color-primary;
@upload-card-box-bg-color: @bg-color-page;
@upload-card-container-bg-color: @bg-color-secondarycontainer;
@upload-card-status-color: @text-color-disabled;
@upload-card-mask-color: @bg-color-container;
@upload-card-mask-bg-color: @text-color-secondary;
@upload-tips-error-color: @error-color;
// 背景
@upload-card-mask-opacity-disabled: .3;
// 字体
@upload-list-file-icon-font-size: 40px;
@upload-list-item-font-size: @font-size-base;
@upload-card-font-size: @font-size-s;
@upload-card-item-icon-add-font-size: 30px;
@upload-card-status-font-size: @font-size-s;
@upload-dragger-font-size: @font-size-base;
@upload-dragger-text-font-size: @font-size-base;
@upload-dragger-progress-icon-font-size: @font-size-l;
@upload-small-font-size: @font-size-s;
@upload-single-display-text-font-size: @font-size-s;
@upload-single-input-delete-font-size: @font-size-base;
@upload-flow-table-th-font-weight: normal;
// 尺寸
@upload-img-size: 80px;
@upload-card-mask-divider-height: @font-size-l;
// @upload-card-mask-item-width: 30px;
// @upload-card-mask-item-height: 30px;
@upload-icon-size: @font-size-l;
@upload-icon-size-middle: calc(@font-size * 2);
@upload-icon-size-large: calc(@font-size * 2.4);
// 边框
@upload-card-item-bg-border: 1px dashed @component-stroke;
@upload-card-box-border: 1px dashed @component-stroke;
@upload-card-box-border-radius: @radius-small;
@upload-card-content-border: 1px solid @component-stroke;
@upload-card-contariner-border: 1px dashed @component-stroke;
// 位置
// 间距
@upload-card-padding: 0 0 0 @spacer;
@upload-card-line-height: @text-line-height;
@upload-card-item-padding: 0 @spacer 0 0;
@upload-card-item-margin: 0 0 @spacer 0;
@upload-card-item-error-icon-warning-margin-bottom: 10px;
@upload-card-icon-loading-margin-bottom: 10px;
@upload-card-name-margin-top: @spacer;
@upload-card-container-icon-add-margin-bottom: @spacer;
@upload-card-content-padding: @spacer;
@upload-card-status-wrap-svg-margin-bottom: 6px;
@upload-small-line-height: 20px;
@upload-display-text-margin-top: 10px;
@upload-icon-clear-circle-filled-margin-top: 2px;
@upload-tips-margin-top: @spacer;
@upload-card-mask-divider-margin: 0 @spacer;