lg-view/src/styles/custom.less

lgView

// prefix 
@css-prefix          : lg-;
@css-prefix-iconfong :lg-icon;

//color 
@primary-color :#208bff;
@default-color: @white;
@success-color: #4cd964;
@warning-color: #f0ad4e;
@danger-color : #dd524d;
@royal-color  : #8a6de9;
@disabled-color: #cccccc;
@disabled-cover-color: #f3f3f3;
@white: #fff;
@black: #000;

//base
@body-background : @white;
@component-background :@white;
@content-background:#efeff4;
@font-family          : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@title-color            : #17233d;
@text-color             : #515a6e;
@font-size-base         : 17px;
@line-height-base       : 1.5;
@border-radius-base     : .pr(10)[@res];
@padding-base:.pr(10)[@res];
@margin-base:.pr(10)[@res];

// Border color
@border-color-base      : #dcdee2 ; 
@border-width-base      : 1px;      
@border-style-base      : solid;    
@border:@border-style-base @border-width-base @border-color-base ;
@border-radius-small: .pr(2)[@res];
@border-radius-normal: .pr(4)[@res];
@border-radius-large: .pr(8)[@res];
@border-radius-circle: 50%;

// Background color
@background-color-base        : #efeff4;  // base

// Shadow
@shadow-color           : rgba(0, 0, 0, .2);
@shadow-base            : @shadow-down;
@shadow-up              : 0 -1px 6px @shadow-color;
@shadow-down            : 0 1px 6px @shadow-color;
@shadow-left            : -1px 0 6px @shadow-color;
@shadow-right           : 1px 0 6px @shadow-color;

// Animation
@animation-time         : .3s;
@animation-time-quick   : .15s;
@transition-time        : .25s;
@ease-in-out            : ease-in-out;

// active
@active-light-ratio:10%;
@active-shadow-fuzzy:.pr(4)[@res];
// --------

//card 
@card-margin: @margin-base; 
@card-padding: @padding-base; 
@card-bg:@white;
@card-shadow:0 1px 1px 0 rgba(0,0,0,.3);

//tag-area
@tag-area-content-padding:.5em;

//input-group
@input-group-color:@border-color-base;

//input-row
@input-row-input: .pr(40)[@res];
@input-row-input-padding:@padding-base;
@input-row-label-padding:@padding-base;
@input-row-icon-margin-right:.pr(2)[@res];
@input-row-select-border-right-width:.pr(40)[@res];
@input-row-select-padding:.pr(15)[@res];

//radio
@radio-size-base: 24;
@radio-size-padding:5;
@radio-inner-size-small-rate:0.8;
@radio-inner-size-large-rate:1.2;
@radio-inner-width:.pr(@radio-size-base)[@res];
@radio-inner-height:.pr(@radio-size-base)[@res];
@radio-inner-padding:.pr(@radio-size-padding)[@res]; //radio 的大小
// small >>>
@radio-inner-width-small:.pr(@radio-size-base * @radio-inner-size-small-rate)[@res];
@radio-inner-height-small:.pr(@radio-size-base * @radio-inner-size-small-rate )[@res];
@radio-inner-padding-small:.pr(@radio-size-padding  * @radio-inner-size-small-rate)[@res]; 
// small <<<
// large >>>
@radio-inner-width-large:.pr(@radio-size-base * @radio-inner-size-large-rate)[@res];
@radio-inner-height-large:.pr(@radio-size-base * @radio-inner-size-large-rate)[@res];
@radio-inner-padding-large:.pr(@radio-size-padding * @radio-inner-size-large-rate)[@res]; 
// large <<<
@radio-inner-checked-border-color:@primary-color;
@radio-inner-checked-background-color:@primary-color;
@radio-inner-disabled-background-color:@disabled-color;
@radio-label-padding:.pr(5)[@res];
@radio-border: @border;
@radio-transition: all @transition-time @ease-in-out; 

//checkbox
@checkbox-standin-size: 24 ; // 整体基础宽
@checkbox-standin-size-small-rate: 0.8 ;  // small 尺寸 : 基于基础尺寸缩小 
@checkbox-standin-size-large-rate: 1.2 ;  // large 尺寸 : 基于基础尺寸放大
@checkbox-standin-before-size: 12 ; //内部钩子的基础框
@checkbox-standin-size-before-rate: 0.3 ; //钩子的宽高比 1 : 3
@checkbox-label-padding:.pr(5)[@res];
@checkbox-standin-before-radius:@border-radius-normal;
@checkbox-standin-disabled-color:@disabled-cover-color;
@checkbox-standin-before-disabled-color:@disabled-color;
@checkbox-standin-border-radius:@border-radius-normal;
@checkbox-standin-before-border:solid .pr(4)[@res] @primary-color ;
@checkbox-standin-transition:all @transition-time @ease-in-out;
@checkbox-standin-width:.pr(@checkbox-standin-size)[@res];
@checkbox-standin-height:.pr(@checkbox-standin-size)[@res];
// small >>>
@checkbox-standin-width-small:.pr(@checkbox-standin-size * @checkbox-standin-size-small-rate)[@res];
@checkbox-standin-height-small:.pr(@checkbox-standin-size * @checkbox-standin-size-small-rate)[@res];
// small <<<
// large >>>
@checkbox-standin-width-large:.pr(@checkbox-standin-size * @checkbox-standin-size-large-rate)[@res];
@checkbox-standin-height-large:.pr(@checkbox-standin-size * @checkbox-standin-size-large-rate)[@res];
// large <<<
@checkbox-standin-before-height:.pr(@checkbox-standin-before-size)[@res];
@checkbox-standin-before-width:.pr(@checkbox-standin-before-size*@checkbox-standin-size-before-rate)[@res];
// small >>>
@checkbox-standin-before-small-height:.pr(@checkbox-standin-before-size * @checkbox-standin-size-small-rate )[@res];
@checkbox-standin-before-small-width:.pr(@checkbox-standin-before-size*@checkbox-standin-size-before-rate*@checkbox-standin-size-small-rate)[@res];
// small <<<
// large >>>
@checkbox-standin-before-large-height:.pr(@checkbox-standin-before-size * @checkbox-standin-size-large-rate)[@res];
@checkbox-standin-before-large-width:.pr(@checkbox-standin-before-size*@checkbox-standin-size-before-rate*@checkbox-standin-size-large-rate)[@res];
// large <<<

//list 
@list-border:@border;
@list-border-radius:@border-radius-normal;
//list-item
@list-item-after-color:@border-color-base;
@list-item-margin-left:@padding-base;
@list-item-padding:@padding-base;
@list-item-height:.pr(40)[@res];

//button
@button-size-base:10; 
@button-size-small-rate:0.8;
@button-size-large-rate:1.2;
@button-padding:.pr(@button-size-base)[@res];
@button-padding-small:.pr(@button-size-base * @button-size-small-rate)[@res];
@button-padding-large:.pr(@button-size-base * @button-size-large-rate)[@res];
@button-fontsize-small: @button-size-small-rate; 
@button-fontsize-large: @button-size-large-rate; 
@button-active-primary-bgclor:.deepening-bgcolor(@primary-color,@active-light-ratio)[@res];
@button-active-success-bgclor:.deepening-bgcolor(@success-color,@active-light-ratio)[@res];
@button-active-warning-bgclor:.deepening-bgcolor(@warning-color,@active-light-ratio)[@res];
@button-active-danger-bgclor:.deepening-bgcolor(@danger-color,@active-light-ratio)[@res];
//shadow >>>
@button-active-default-shadow:.active-shadow(@shadow-color ,@active-shadow-fuzzy)[@res];
@button-active-primary-shadow:.active-shadow(@primary-color,@active-shadow-fuzzy)[@res];
@button-active-success-shadow:.active-shadow(@success-color,@active-shadow-fuzzy)[@res];
@button-active-warning-shadow:.active-shadow(@warning-color,@active-shadow-fuzzy)[@res];
@button-active-danger-shadow:.active-shadow(@danger-color,@active-shadow-fuzzy)[@res];
//shadow <<<
//border >>>
@button-ghost-primary-border-color:@primary-color;
@button-ghost-success-border-color:@success-color;
@button-ghost-warning-border-color:@warning-color;
@button-ghost-danger-border-color:@danger-color;
//border <<<