tdesign-react/esm/style/web/components/transfer/_var.less

TDesign Component for React

// 色值
@transfer-bg-color: transparent;
@transfer-bg-hover: @bg-color-container-hover;
@transfer-bg-checked: @brand-color-light;
@transfer-border-color: @border-level-1-color;
@transfer-font-color: @text-color-primary;

// 间距
@transfer-list-margin-horizontal: @comp-margin-s;
@transfer-list-header-padding: 0 @comp-paddingLR-s;
@transfer-list-header-margin: 0 @transfer-list-margin-horizontal;
@transfer-list-header-text-margin-left: @comp-margin-s;
@transfer-list-checkbox-group-gap: @comp-margin-xs;
@transfer-list-checkbox-group-margin: @comp-margin-s 0;
@transfer-list-item-padding: @comp-paddingLR-xs @comp-paddingLR-s;
@transfer-list-item-margin: 0 @transfer-list-margin-horizontal;
@transfer-list-item-text-margin-left: @comp-margin-s;
@transfer-list-search-wrapper-margin: 0 @transfer-list-margin-horizontal;
@transfer-list-with-search-padding-top: @comp-size-m;
@transfer-list-wrapper-padding: @comp-paddingTB-m @comp-paddingLR-m;
@transfer-list-with-tree-padding: 0 @comp-paddingLR-m;
@transfer-list-with-tree-margin: @comp-margin-s 0;
@transfer-list-pagination-padding: @comp-paddingTB-m;
@transfer-operations-margin: auto @comp-margin-s;
@transfer-operations-gap: @comp-margin-l;
// 有翻页时候transfer的下内边距
@transfer-with-pagination-padding-bottom: calc(@transfer-list-pagination-height + @transfer-list-pagination-padding * 2);
// 有footer时候transfer的下内边距
@transfer-with-footer-padding-bottom: 48px;
// 有翻页和footer时候transfer的下内边距
@transfer-with-pagination-footer-padding-bottom: calc(@transfer-with-pagination-padding-bottom + @transfer-with-footer-padding-bottom);
// search&footer
@transfer-with-search-footer-padding-bottom: 48px;
// pagination&search
@transfer-with-search-pagination-padding-bottom: 48px;
//pagination&footer&search
@transfer-with-all-padding-bottom: 88px;

// 尺寸
@transfer-common-width: 200px;
@transfer-common-height: 200px;
// 有search的高度
@transfer-with-search-height: 240px;
// 有翻页时候transfer的高度
@transfer-with-pagination-height: 240px;
// 有footer时候transfer的高度
@transfer-with-footer-height: 248px;
// 有翻页和footer时候transfer的高度,search&footer
@transfer-with-footer-both-height: 288px;
// pagination&search
@transfer-with-both-height: 280px;
//pagination&footer&search
@transfer-with-all-height: 328px;
// 包裹树组件时候transfer的高度
@transfer-wrap-height: 320px;
@transfer-wrap-width: 206px;
@transfer-list-header-height: @comp-size-xxl;
@transfer-list-header-width: calc(
  @transfer-common-width - @transfer-list-margin-horizontal * 2
);
@transfer-list-search-wrapper-width: calc(
  @transfer-common-width - @transfer-list-margin-horizontal * 2
);
@transfer-list-pagination-height: @comp-size-xs;
@transfer-operations-button-height: @comp-size-xs;
@transfer-operations-icon-size: @comp-size-xxxs;

// 字体
@transfer-font: @font-body-medium;

// 边框
@transfer-border: 1px solid @transfer-border-color;
@transfer-list-border: 0;
@transfer-list-with-search-border: 0;
@transfer-border-radius: @border-radius-medium;

// 阴影
@transfer-box-shadow: @shadow-1;