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

@popconfirm-cls: ~"@{prefix}-popconfirm";

@popconfirm-spacer: @comp-margin-s;

// popconfirm
@popconfirm-shadow1: 0 10px 10px -5px rgba(0, 0, 0, .04);
@popconfirm-shadow2: 0 12px 26px 5px rgba(0, 0, 0, .1);
@popconfirm-padding: @comp-paddingTB-l @comp-paddingLR-l;
@popconfirm-position: relative; // TODO: position 最后应该是absolute

// TODO: 建议设置最大宽度
@popconfirm-max-width: 320px;

// popconfirm buttons
@popconfirm-buttons-margin-top: @comp-margin-l;
@popconfirm-button-margin: @popconfirm-spacer;

// 小三角
@popconfirm-arrow-margin: @comp-margin-xxl;
@popconfirm-arrow-absolute-offset: -4px;
@popconfirm-arrow-border-width: 4px;
@popconfirm-arrow-size: (@popconfirm-arrow-border-width * 2);
@popconfirm-arrow-rotate: rotate(45deg);
@popconfirm-arrow-top-border-color: transparent #fff #fff transparent;
@popconfirm-arrow-bottom-border-color: #fff transparent transparent #fff;
@popconfirm-arrow-left-border-color: #fff #fff transparent transparent;
@popconfirm-arrow-right-border-color: transparent transparent #fff #fff;
@popconfirm-arrow-top-shadow: 2px 2px 5px rgba(0, 0, 0, .06);
@popconfirm-arrow-bottom-shadow: -2px -2px 5px rgba(0, 0, 0, .06);
@popconfirm-arrow-left-shadow: 2px -2px 5px rgba(0, 0, 0, .06);
@popconfirm-arrow-right-shadow: -2px 2px 5px rgba(0, 0, 0, .06);

// 间距
@popconfirm-icon-margin-right: @comp-margin-s;
@popconfirm-icon-padding: calc(calc(@text-line-height-base - @popconfirm-icon-size) / 2) 0;
@popconfirm-confirm-margin-right: @comp-margin-s;

// 尺寸
@popconfirm-icon-size: calc(@font-size-base + 6px);

// 圆角
@popconfirm-border-radius: @border-radius-medium;

// 颜色
@popconfirm-icon-warning: @warning-color;
@popconfirm-icon-danger: @error-color;
@popconfirm-icon-default: @brand-color;