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

@import "../../_variables.less";

@image-viewer__icon-color--disabled: @text-color-disabled;
@image-viewer__image--background-color__error: @bg-color-component-disabled;
@image-viewer__image-text--error: #000000;

@image-viewer-error-font: @font-body-medium;

@image-viewer-modal-padding: @comp-paddingTB-xs @comp-paddingLR-s;
@image-viewer-modal-header-pre-bt-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs;
@image-viewer-modal-header-padding-bottom: @comp-margin-s;
@image-viewer-modal-header-size: @comp-size-xxxl;
@image-viewer-modal-header-image-box-size: @comp-size-xl;
@image-viewer-modal-header-image-box-margin: @comp-margin-l @comp-margin-xs @comp-margin-s;
@image-viewer-modal-button-size: @comp-size-xl;
@image-viewer-utils-content-padding: 0 @comp-paddingLR-xs;
@image-viewer-utils-modal-icon-margin: 0 @comp-margin-xs;
@image-viewer-utils-modal-icon-size: @comp-size-m;
@image-viewer-utils-modal-utils-scale-width: @comp-size-xl;

@image-viewer-header-hide-padding: 0 0 12px 0;
@image-viewer-header-padding: 12px 0;
@image-viewer-header-box-height: 40px;
@image-viewer-header-box-width: calc(40px / 9 * 16);
@image-viewer-header-box-width-margin-left: calc(40px / 9 * 16 * 3 + 4px * 3);
@image-viewer-header-all-box-width: calc(40px / 9 * 16 * 7 + 4px * 6);