deer-ui/lib/styles/themes.less

React.js UI components for PC Web

/**
deer-ui 默认主题配置
*/

@primary-color: #31c27c;
@warning-color: #fca130;
@error-color: #f93e3e;
@success-color: #35C613;
@info-color: #61affe;
@default-color: #d9d9d9;

@border-color: #e8e8e8;
@border-radius: 4px;
@font-size: 14px;
@font-size-small: 12px;
@font-size-large: 16px;
@bg-color: #FAFAFA;
@font-color: rgba(0, 0, 0, .65);
@disabled-font-color: fade(@font-color, 20%);
@disabled-bg-color: #f5f5f5;
@common-bg-color: rgba(0, 0, 0, .5);
@default-text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
@disabled-color: #f5f5f5;
@default-shadow: 0 4px 22px 0 rgba(15, 35, 95, 0.12);
//动画时间
@loading-time: 1.5s;
@loading-opacity: .7;
@animation-time : .5s;
@animation-type: cubic-bezier(0.165, 0.84, 0.44, 1);
@animation-type-easy-in-out: cubic-bezier(.9, .25, .08, .83);
@default-transition: @animation-time @animation-type;
//Collapse
@collapse-animate-time: .4s;


//codeView
@codeView-default-font-size: 14px;
@codeView-default-border-color: @primary-color;
@codeView-default-border-radius: 10px;

//Button

@button-default-padding: 0 30px;
@button-default-font-size: 14px;
@button-default-height: 40px;
@button-default-width: 40px;
@button-default-border-radius: 5px;

@button-small-font-size: 12px;
@button-small-padding: 0 10px;
@button-small-height: 30px;

@button-large-font-size: 16px;
@button-large-padding: 0 40px;
@button-large-height: 50px;
@button-disabled-opacity: .7;


//Empty
@default-empty-border-color: @default-color;
@default-empty-background-color: #fff;
@default-empty-color: rgba(0, 0, 0, 0.65);


//Message
@default-message-z-index: 1000;
@default-message-font-size: 14px;
@default-message-line-height: 22px;
@default-message-border-radius: 6px;
//message宽度
@default-message-width: 200px;
@default-message-height: 30px;
//动画时间
@default-message-show-time: .5s;
@default-message-dark-bg: @common-bg-color;
@default-message-dark-font-color: #fff;
//message内容图标大小
@default-message-icon-font-size: 14px;


//Spin
@default-spin-bg: rgba(255, 255, 255, .9);
//加载图标大小
@default-spin-indicator-font-size: 32px;
//加载图标颜色
@default-spin-indicator-color: @primary-color;
//图标三种大小
@default-spin-small-font-size: 20px;
@default-spin-default-font-size: 28px;
@default-spin-large-font-size: 34px;
//tip字体
@default-spin-tip-font-size: 14px;


// Table

@default-table-border-color: @border-color;
@default-table-odd-color: @bg-color;
@default-table-even-color: white;
@default-table-hover-color: fade(@primary-color, 10%);

// tabs
@default-tabs-font-size: 14px;
@default-tabs-active-color: @primary-color;
@default-tabs-transition-type: @animation-type;
@default-tabs-transition-time: @animation-time;
@default-tabs-content-border-top-color: @border-color;
@default-tabs-header-color: #000;
@default-tabPane-color: #000;
@default-tabPane-padding-top: 10px;


//checkbox
@default-checkbox-width: 16px;
@default-checkbox-height: 16px;
@default-checkbox-bg-color: #fff;
@default-checkbox-margin-right: 10px;
@default-checkbox-transition-type: cubic-bezier(.71, -0.46, .88, .6);
@default-checkbox-transition-time: .1s;
@default-checkbox-border-color: @primary-color;


//divider
@default-divider-padding: 0 20px;
@default-divider-font-size: 16px;
@default-divider-orientation-padding: 10px 20px;

@default-divider-left-left-width: 10%;
@default-divider-left-right-width: 90%;

@default-divider-right-left-width: 90%;
@default-divider-right-right-width: 10%;


// input
@default-input-padding: 10px;
@default-input-height: 40px;
@default-input-box-shadow: 0 0 0 2px fade(@primary-color, 20%);
@default-input-height-small: 30px;
@default-input-height-large: 50px;
@default-input-prefix-offset: 10px;

//Radio 单选框
@default-radio-width : 15px;
@default-radio-height : @default-radio-width;
@default-radio-offset-right: 8px;

//Grid
@max-col-length : 24;
@max-row-width : 100%;

//Layout
@default-layout-width: 1200px;
@default-layout-padding: 15px;


//Select
@deer-ui-select-width: 200px;
@deer-ui-select-offset-top: 5px;
@default-select-font-size: 14px;

//datepicker
@deer-ui-date-picker-width: 300px;
@deer-ui-date-picker-offset-top: 8px;
@deer-ui-date-picker-date-width: 36px;
@deer-ui-date-picker-date-height: 36px;
@deer-ui-date-picker-date-offset: 0 4px 4px 0;
@deer-ui-date-picker-padding: 15px 20px;


//Upload
@deer-ui-upload-list-width: 300px;
@deer-ui-upload-list-cover-width: 50px;
@deer-ui-upload-list-cover-height: 50px;
@deer-ui-upload-list-preview-width: 100%;
@deer-ui-upload-list-preview-height: 300px;


//Progress 进度条
@deer-ui-progress-height : 10px;
@deer-ui-progress-stroke-width : 6px;
@deer-ui-progress-border-radius: 20px;
@deer-ui-progress-bg-offset : 15px 15px;
@deer-ui-progress-animate-time: 15s;
@deer-ui-progress-circle-percent-font-size: 20px;