shineout/lib/styles/themes/default.less

Shein 前端组件库

@import './bootstrap.less';
@import './cssvar.less';

@colors-blue: #3399ff;
@colors-primary-value: #3399ff;
@colors-primary: var(--primary-color, @colors-primary-value);

@colors-secondary-value: #999999;
@colors-secondary: var(--secondary-color, @colors-secondary-value);

@colors-success-value: #00cc66;
@colors-success: var(--success-color, @colors-success-value);

@colors-info-value: @colors-cyan;
@colors-info: var(--info-color, @colors-info-value);

@colors-warning-value: #ff9900;
@colors-warning: var(--warning-color, @colors-warning-value);

@colors-danger-value: #f85555;
@colors-danger: var(--danger-color, @colors-danger-value);

@btn-default-border-color-value: #dee2e6;
@btn-default-border: var(--button-default-border, @btn-default-border-color-value);

@btn-circle-width: 34px;
@btn-circle-small-width: 30px;
@btn-circle-large-width: 43px;
@button-border-radius-value: 3px;
@btn-border-radius-base: var(--button-border-radius, @button-border-radius-value);
@button-small-border-radius-value: 3px;
@btn-border-radius-small: var(--button-small-border-radius, @button-small-border-radius-value);
@button-large-border-radius-value: 4px;
@btn-border-radius-large: var(--button-large-border-radius, @button-large-border-radius-value);

@button-padding-base-horizontal-value: @padding-base-horizontal;
@btn-padding-x: var(--button-padding-base-horizontal, @button-padding-base-horizontal-value);
@button-padding-base-vertical-value: @padding-base-vertical;
@btn-padding-y: var(--button-padding-base-vertical, @button-padding-base-vertical-value);

@button-padding-large-horizontal-value: @padding-large-horizontal;
@btn-padding-large-x: var(--button-padding-large-horizontal, @button-padding-large-horizontal-value);
@button-padding-large-vertical-value: @padding-large-vertical;
@btn-padding-large-y: var(--button-padding-large-vertical, @button-padding-large-vertical-value);

@button-padding-small-horizontal-value: @padding-small-horizontal;
@btn-padding-small-x: var(--button-padding-small-horizontal, @button-padding-small-horizontal-value);
@button-padding-small-vertical-value: @padding-small-vertical;
@btn-padding-small-y: var(--button-padding-small-vertical, @button-padding-small-vertical-value);

@table-head-color-value: @text-color;
@table-head-color: var(--table-head-color, @table-head-color-value);

@table-border-color-value: #ddd;
@table-border-color: var(--table-border-color, @table-border-color-value);

@table-bg-hover-value: #f5f5f5;
@table-bg-hover: var(--table-hover-bg, @table-bg-hover-value);

@table-color-value: @gray-600-value;
@table-color: var(--table-color, @table-color-value);

@table-cell-padding-horizontal-value: 8px;
@table-cell-padding-horizontal: var(--table-cell-padding-horizontal, @table-cell-padding-horizontal-value);

@table-cell-padding-vertical-value: 8px;
@table-cell-padding-vertical: var(--table-cell-padding-vertical, @table-cell-padding-vertical-value);

@pagination-hover-border-value: @pagination-border;
@pagination-hover-border: var(--pagination-hover-border, @pagination-hover-border-value);

@pagination-hover-bg-value: @gray-100-value;
@pagination-hover-bg: var(--pagination-hover-bg, @pagination-hover-bg-value);

@tag-border-color-value: #d9d9d9;
@tag-border-color: var(--tag-border-color, @tag-border-color-value);

@tag-border-radius-value: 3px;
@tag-border-radius: var(--tag-border-radius, @tag-border-radius-value);

@tag-padding-x-value: 8px;
@tag-padding-x: var(--tag-padding-horizontal, @tag-padding-x-value);

@tag-padding-y-value: 2px;
@tag-padding-y: var(--tag-padding-vertical, @tag-padding-y-value);

@dropdown-link-active-bg-value: #f5f5f5;
@dropdown-link-active-bg: var(--select-item-active-bg, @dropdown-link-active-bg-value);

@dropdown-link-active-color-value: @gray-800-darken-5-value;
@dropdown-link-active-color: var(--select-item-active-color, @dropdown-link-active-color-value);

@dropdown-default-border-width-color-value: #dee2e6;
@dropdown-default-border-width-color:var(--button-default-border, @dropdown-default-border-width-color-value);

@dropdown-default-border-width-hover-color-value:@colors-primary;
@dropdown-default-border-width-hover-color:var(--primary-color, @dropdown-default-border-width-hover-color-value);

@select-option-hover-color-value: @colors-primary-value;
@select-option-hover-color: var(--select-option-hover-color, @select-option-hover-color-value);

@select-option-hover-bg-value: @dropdown-link-hover-bg;
@select-option-hover-bg: var(--select-option-hover-bg, @select-option-hover-bg-value);

@select-option-color-value: @gray-800-value;
@select-option-color: var(--select-option-color, @select-option-color-value);

@button-font-size-large-value: @font-size-large;
@button-font-size-large: var(--button-font-size-large, @button-font-size-large-value);

@menu-dark-bg-value: #001529;
@menu-dark-bg: var(--menu-dark-bg, @menu-dark-bg-value);

@menu-dark-item-value: #bfbfbf;
@menu-dark-item: var(--menu-dark-color, @menu-dark-item-value);

@menu-item-active-bg-value: @colors-primary-value;
@menu-item-active-bg: var(--menu-item-active-bg, @menu-item-active-bg-value);

@menu-item-active-color-value: #fff;
@menu-item-active-color: var(--menu-item-active-color, @menu-item-active-color-value);

@message-box-shadow-value: 0 6px 12px rgba(0, 0, 0, 0.175);
@message-box-shadow: var(--message-box-shadow, @message-box-shadow-value);

@input-focus-width-value: 3px;
@input-focus-width: var(--input-focus-width, @input-focus-width-value);

@input-bg-disabled-value: @gray-200-value;
@input-bg-disabled: var(--input-bg-disabled, @input-bg-disabled-value);

@input-border-value: @gray-400-value;
@input-border: var(--input-border-color, @input-border-value);

@input-border-focus-value: #80bdff;
@input-border-focus: var(--input-border-focus-color, @input-border-focus-value);

@input-color-placeholder-value: #999;
@input-color-placeholder: var(--input-placeholder-color, @input-color-placeholder-value);

@checkbox-border-color-value: @input-border-value;
@checkbox-border-color: var(--checkbox-border-color, @checkbox-border-color-value);

@panel-border-radius-value: 4px;
@panel-border-radius: var(--panel-border-radius, @panel-border-radius-value);

@panel-header-padding-horizontal-value: 24px;
@panel-header-padding-horizontal: var(--panel-header-padding-horizontal, @panel-header-padding-horizontal-value);

@panel-header-padding-vertical-value: 16px;
@panel-header-padding-vertical: var(--panel-header-padding-vertical, @panel-header-padding-vertical-value);

@panel-body-padding-horizontal-value: 24px;
@panel-body-padding-horizontal: var(--panel-body-padding-horizontal, @panel-body-padding-horizontal-value);

@panel-body-padding-vertical-value: 16px;
@panel-body-padding-vertical: var(--panel-body-padding-vertical, @panel-body-padding-vertical-value);

@panel-footer-padding-horizontal-value: 24px;
@panel-footer-padding-horizontal: var(--panel-footer-padding-horizontal, @panel-footer-padding-horizontal-value);

@panel-footer-padding-vertical-value: 16px;
@panel-footer-padding-vertical: var(--panel-footer-padding-vertical, @panel-footer-padding-vertical-value);

@modal-header-padding: var(--modal-header-padding, 16px 36px 16px 24px);
@modal-header-padding-top: var(--modal-header-padding-top, 16px);
@modal-header-padding-right: var(--modal-header-padding-right, 36px);
@modal-header-padding-bottom: var(--modal-header-padding-bottom, 16px);
@modal-header-padding-left: var(--modal-header-padding-left, 24px);

@modal-body-padding-top: var(--modal-body-padding-top, 16px);
@modal-body-padding-right: var(--modal-body-padding-right, 24px);
@modal-body-padding-bottom: var(--modal-body-padding-bottom, 16px);
@modal-body-padding-left: var(--modal-body-padding-left, 24px);

@modal-footer-padding: var(--modal-footer-padding, 16px 24px);
@modal-border-radius: var(--modal-border-radius, @panel-border-radius-value);
@modal-close-top-margin: var(--modal-close-top-margin, 18px);
@modal-close-right-margin: var(--modal-close-right-margin, 24px);

@common-caret-style: var(--common-caret-style, fill);

@breadcrumb-bg: transparent;