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

// 颜色
@calendar-highlight-color: @brand-color;
@calendar-title-color: @text-color-primary;
@calendar-border-color: @border-level-1-color;
@calendar-body-hover-bg-color: @brand-color-light;
@calendar-body-cell-color: @text-color-secondary;
@calendar-body-cell-hover-bg-color: @bg-color-container-hover;
@calendar-head-cell-color: @text-color-secondary;
@calendar-head-bg-color: @bg-color-container;
@calendar-body-cell-border-color: @border-level-1-color;
@calendar-body-cell-display-disabled-color: @text-color-disabled;
@calendar-body-cell-display-now-color: @text-color-primary;
@calendar-body-cell-display-check-color: @text-color-secondary;
@calendar-body-cell-check-bg-color: @brand-color-light;
@calendar-body-cell-border-check-color: @brand-color;
@calendar-card-body-cell-bg-hover: @bg-color-secondarycontainer-hover;
@calendar-bg: @bg-color-container;
@calendar-card-cell-value-check-color: @text-color-anti;
@calendar-card-cell-value-check-bg: @brand-color;
@calendar-card-head-row-bg: @bg-color-container;
@calendar-cell-font-color: @text-color-primary;
@calendar-body-cell-display-disabled-opacity: .16;

// 文字
@calendar-head-cell-font: @font-title-small;
@calendar-card-body-cell-font: @font-body-medium;
@calendar-table-cell-font: @font-title-small;
@calendar-body-cell-display-font: @font-title-small;
@calendar-card-body-cell-display-font: @font-body-medium;
@calendar-head-title-font: @font-title-large;

// 间距行高
@calendar-full-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl;
@calendar-control-padding: 0;
@calendar-panel-margin-top: @comp-margin-xxxl;
@calendar-head-margin-bottom: @comp-margin-s;
@calendar-body-cell-padding: 0;
@calendar-body-cell-margin-left: 0;
@calendar-table-margin-right: @comp-margin-s;
@calendar-footer-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl;
@calendar-table-cell-padding: 0;
@calendar-card-panel-padding: @comp-paddingTB-m @comp-paddingLR-m;
@calendar-card-calendar-control-padding: 0;
@calendar-card-panel-margin-top: @comp-margin-m;
@calendar-card-footer-padding: 0 @comp-paddingLR-m;
@calendar-control-section-cell-margin-right: @comp-margin-s;
@calendar-body-line-height: @text-line-height-base;
@calendar-header-row-padding: 0px;
@calendar-card-body-cell-display-padding: calc(@comp-paddingTB-xxs / 2);
@calendar-control-margin-bottom: @comp-margin-xxxl;
@calendar-panel-card-padding: @comp-paddingTB-m @comp-paddingLR-m;
@calendar-card-control-margin-bottom: @comp-margin-m;

// 尺寸
@calendar-full-min-width: 560px;
@calendar-head-cell-height: 100%;
@calendar-body-cell-height: 104px;
@calendar-body-cell-content-min-height: 64px;
@calendar-body-cell-content-padding: @comp-paddingTB-s @comp-paddingLR-xs;
@calendar-footer-height: 90px;
@calendar-card-width: 280px;
@calendar-card-calendar-panel-height-month: 200px;
@calendar-card-calendar-panel-height-year: 168px;
@calendar-card-footer-height: @comp-size-xxl;
@calendar-section-height: 100%;
@calendar-card-cell-size: 100%;
@calendar-card-table-size: 100%;
@calendar-card-cell-value-size: @comp-size-xs;
@calendar-card-cell-value-size-year: @comp-size-xxl;
@calendar-border-size: 2px;

// 定位
@calendar-body-row-flex: 1;

// 边框弧度
@calendar-card-body-cell-display-border-radius: @border-radius-default;
@calendar-scrollbar-thumb-border-radius: @border-radius-default;
@calendar-card-checked-pointer-border-radius: @border-radius-medium;

// 动画
@calendar-transition-duration: @anim-duration-base;
@calendar-transition-property: border-top, background;
@calendar-transition-timing-function: linear;