unique-interface/theme/variable.less

无UI组件库

/* Unique Interface Theme Base Variables */

/* Colors
-------------------------- */
@color-white: #fff;
@color-black: #000;
//
// @color-primary: #5485f7;
// @color-primary-dark-1: mix(@color-dark, @color-primary, 10%);
//
@color-bg: @color-white;
@color-bg-covering: @color-black;
@color-bg-primary-1: mix(@color-primary, @color-bg, 10%);
// @color-bg-primary-2: mix(@color-primary, @color-bg, 20%);

// text
@color-text-primary: #222;
@color-text-regular: #555;
@color-text-secondary: #999;
@color-text-alt: @color-white;
// functional
@color-primary: #5485f7;
@color-primary-dark-1: mix(@color-black, @color-primary, 10%);
@color-info: @color-text-regular;
// @color-info-dark-1: mix(@color-black, @color-info, 10%);
@color-disabled: #999;
@color-warn: #ff8135;
// functional background
@color-primary-bg: mix(@color-primary, @color-bg, 10%);
@color-info-bg: mix(@color-info, @color-bg, 10%);                    /* #555 -> #eee */
@color-disabled-bg: mix(@color-disabled, @color-bg, 10%);
// regular
// TODO move to border ?
@color-border-regular: #eee;
@color-bg-active-regular: #eee;
// special
@color-body-bg: #fafafa;
@color-placeholder: #c0c0c0;
@color-backdrop: fade(@color-bg-covering, 20%);

/* Shapes
-------------------------- */
// section
@shape-section-bg-color: @color-bg;
@shape-section-box-shadow: 0 0 8px 0 fade(@color-primary, 8%);
// dropdown
@shape-dropdown-arrow-height: 10px;
@shape-dropdown-arrow-width: 7px;
@shape-dropdown-item-font-size: @font-size-base;
@shape-dropdown-item-line-height: @font-line-height-base;
@shape-dropdown-item-height: 40px;
@shape-dropdown-menu-height: @shape-dropdown-item-height * 5;
@shape-dropdown-item-inner-vertical: (@shape-dropdown-item-height - @shape-dropdown-item-line-height) / 2;
@shape-dropdown-item-inner-horizontal: 20px;

/* Global
-------------------------- */
@block-outer-vertical: 20px;
@block-outer-horizontal: 20px;
@block-inner-vertical: 30px;
@block-inner-horizontal: 30px;

@font-size-base: 14px;
@font-size-sm: 14px;
@font-size-xs: 12px;
@font-line-height-base: 24px;
@font-line-height-sm: 24px;
@font-line-height-xs: 22px;

@border-radius-base: 2px;
@border-width-base: 1px;
@border-style-base: solid;
@border-base: @border-width-base @border-style-base @color-border-regular;

// for form-item like input, button, and so on
@unit-height: 40px;
@unit-height-sm: 30px;
@unit-height-xs: 24px;
@unit-border-width: @border-width-base;
@unit-border-style: @border-style-base;
@unit-border-color: @color-border-regular;
@unit-border: @unit-border-width @unit-border-style @unit-border-color;
@unit-font-size: @font-size-base;
@unit-font-size-sm: @font-size-sm;
@unit-font-size-xs: @font-size-xs;
@unit-line-height: @font-line-height-base;
@unit-line-height-sm: @font-line-height-sm;
@unit-line-height-xs: @font-line-height-xs;
@unit-inner-vertical: (@unit-height - @unit-line-height) / 2;
@unit-inner-vertical-sm: (@unit-height-sm - @unit-line-height-sm) / 2;
@unit-inner-vertical-xs: (@unit-height-xs - @unit-line-height-xs) / 2;
@unit-inner-horizontal: 20px;
@unit-inner-horizontal-sm: 20px;
@unit-inner-horizontal-xs: 20px;
@unit-outer-horizontal: 20px;
@unit-outer-vertical: 20px;

/* Basic
-------------------------- */
// text
@text-color-openable-ellipsis: @color-primary;

// tag
@tag-border-radius: @border-radius-base;
@tag-inner-vertical: 5px;
@tag-inner-horizontal: 10px;
@tag-outer-vertical: 10px;
@tag-outer-horizontal: 10px;
@tag-color-info: @color-info;
@tag-color-info-bg: @color-info-bg;
@tag-color-primary: @color-primary;
@tag-color-primary-bg: @color-primary-bg;

// button
@button-color-text-primary: @color-text-alt;
@button-group-border-radius: @border-radius-base;

/* Form
-------------------------- */
@form-gap-vertical: 20px;
@form-footer-button-width: 100px;
@form-footer-button-gap: 60px;

// form-item
@form-item-outer-vertical: 20px;
@form-item-height: @unit-height;
@form-item-label-color: @color-text-primary;
@form-item-label-font-size: @unit-font-size;
@form-item-label-line-height: @unit-line-height;
@form-item-label-inner-vertical: @unit-inner-vertical;
@form-item-label-outer-horizontal: 30px;
@form-item-label-required-content: "*";
@form-item-label-required-color: @color-warn;
@form-item-error-height: @form-item-outer-vertical - 0;
@form-item-error-inner-horizontal: @unit-inner-horizontal + @unit-border-width;
@form-item-error-color: @color-warn;
@form-item-error-font-size: @font-size-xs;

// radio
@radio-button-border-color: @color-border-regular;
@radio-button-bg-color: @color-white;
@radio-button-color-text: @color-text-regular;
@radio-button-border-color-checked: @color-primary;
@radio-button-bg-color-checked: @color-primary;
@radio-button-color-text-checked: @color-text-alt;
@radio-button-bg-color-hover: @color-bg-active-regular;

// checkbox
@checkbox-icon-border-radius: 2px;

// select
@select-tag-gap: 4px;
@select-border-color-focus: @unit-border-color;


/* Info
-------------------------- */
// popper
@popper-bg-color: fade(@color-bg-covering, 60%);
// modal
@modal-footer-button-width: 100px;
@modal-footer-button-gap: 30px;
@modal-border-radius: 0;
@modal-close-padding: .5em;
// msgbox
@msgbox-width: 340px;


/* Navigation
-------------------------- */
// pagination
@pagination-color-primary: @color-primary;
@pagination-input-color: @color-text-regular;
@pagination-input-width: 2em;
@pagination-unit-height: 24px;
@pagination-unit-border-width: 1px;
@pagination-unit-border: @pagination-unit-border-width solid @pagination-color-primary;
@pagination-unit-inner-horizontal: 10px;
@pagination-unit-outer-horizontal: 10px;

// menu
@menu-item-unit-gap: 10px;
@menu-item-height: 60px;
@menu-item-border-width: 6px;
@menu-item-inner-horizontal: 20px;

// tabs
@tab-border-width: 4px;
@tab-inner-top: 30px;
@tab-inner-bottom: 10px;
@tab-outer-left: @block-inner-horizontal;
@tab-outer-right: 50px;

// breadcrumb
@breadcrumb-height: 40px;