tdesign-react/esm/common/style/web/components/time-picker/_var.less

TDesign Component for React

// variable of less of time-picker

// size
@time-picker-width: 240px; // time-picker的宽度
@time-picker-panel-width: 280px; // time-picker的panel宽度

@time-picker-input-height: @comp-size-xs;
@time-picker-container-top: calc(@time-picker-input-height + 2px);

@time-picker-font: @font-body-medium;

@time-picker-panel-body-height: calc(calc(@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) * 7 + @time-picker-panel-item-margin-vertical);
@time-picker-panel-item-height: @comp-size-xs;
@time-picker-input-item-input-width: 28px;
@time-picker-input-item-input-meridiem-width: 36px;

// color
@time-picker-background-color-common: transparent;
@time-picker-input-border-color-hover: @brand-color;
@time-picker-input-text-color: @text-color-primary;
@time-picker-input-color-disabled: @text-color-disabled;
@time-picker-input-color-focused: @brand-color;
@time-picker-panel-input-color: @text-color-primary;
@time-picker-panel-input-placeholder-color: @text-color-placeholder;
@time-picker-panel-item-color: @text-color-secondary;
@time-picker-panel-item-color-hover: @text-color-primary;
@time-picker-panel-item-color-current: @brand-color;
@time-picker-panel-item-background-color-current: @brand-color-light;
@time-picker-panel-item-background-color-active: @bg-color-container-hover;

@time-picker-panel-dropdown-box-shadow: 0 1px 6px rgba(0, 0, 0, .15);

// box-sizing
@time-picker-input-border: 1px solid @border-level-2-color;
@time-picker-input-border-active: 1px solid @brand-color;
@time-picker-input-border-disabled: 1px solid @border-level-2-color;

@time-picker-panel-section-padding: @pop-padding-xl calc(@pop-padding-xl - @time-picker-panel-item-margin-horizontal);
@time-picker-panel-footer-padding: @pop-padding-xl;
@time-picker-panel-item-border-radius: @border-radius-default;
@time-picker-panel-item-margin-vertical: @size-3;
@time-picker-panel-item-margin-horizontal: @comp-margin-xs;
@time-picker-panel-item-margin: @time-picker-panel-item-margin-vertical
  @time-picker-panel-item-margin-horizontal;

//shadow
@time-picker-input-shadow-active: 0 0 2px 2px @brand-color-focus;