yyzone/src/assets/styles/base/vars.less

yyzone vue components and utils

// color
@yy-primary-color  :#E14C46;
@yy-default-color  :#e4e4e4;
@yy-warning-color  :#FF8B00;
@yy-success-color  :#00B39E;
@yy-error-color    :#BD3646;
@yy-disbale-color  :#BFBFBF;
@yy-hover-color    :#F3F3F3;

// text colors
@yy-text-default: #555555;
@yy-text-primary: #111111;
@yy-text-info:    #888888;

// buttons
@yy-btn-padding:         6px 16px;
@yy-btn-small-padding:   2px 7px 1px; 
@yy-btn-font-size:       12px;
@yy-btn-border-radius:   3px;
@yy-btn-min-width:       72px;
@yy-btn-line-height:     1.5;
@yy-btn-primary-bg:      #E14C46;
@yy-btn-primary-color:   #FFFFFF;
@yy-btn-primary-border:  #E14C46;
@yy-btn-default-bg:      #E4E4E4;
@yy-btn-default-color:   #555555;
@yy-btn-default-border:  #E4E4E4;
@yy-btn-success-bg:      #1FBFA7;
@yy-btn-success-color:   #FFFFFF;
@yy-btn-success-border:  #1FBFA7;
@yy-btn-warning-bg:      #FFAB00;
@yy-btn-warning-color:   #FFFFFF;
@yy-btn-warning-border:  #FFAB00;
@yy-btn-danger-bg:       #4C4C4C;
@yy-btn-danger-color:    #FFFFFF;
@yy-btn-danger-border:   #4C4C4C;
@yy-btn-ghost-bg:        rgba(0, 0, 0, 0);
@yy-btn-ghost-color:     #555555;
@yy-btn-ghost-border:    #D0D0D0;
@yy-btn-ghost-light-bg:        rgba(0, 0, 0, 0);
@yy-btn-ghost-light-color:     #ffffff;
@yy-btn-ghost-light-border:    rgba(255, 255, 255, 0.9);
@yy-btn-disable-bg:      #F3F3F3;
@yy-btn-disable-color:   #BFBFBF;
@yy-btn-disable-border:  #F3F3F3;


// border colros
@yy-border-default: #d0d0d0;
@yy-border-primary: #dddddd;
@yy-border-info:    #DEE0E3;

// bg colors
@yy-bg-default: #F8F8F8;
@yy-bg-primary: #F3F3F3;
@yy-bg-info:    #ffffff;
@yy-bg-opacity: rgba(0, 0, 0, .6);

// font size
@yy-font-size-xs: 12px;
@yy-font-size-sm: 14px;
@yy-font-size-md: 16px;
@yy-font-size-lg: 18px;

// animation
@yy-animation-time         : .3s;
@yy-transition-time        : .2s;
@yy-ease-in-out            : ease-in-out;

// shadow
@yy-shadow-base            : 0 3px 10px 0px rgba(0, 0, 0, .2);

// pading
@yy-padding-default: 8px 16px;