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

yyzone vue components and utils

@yy-css-prefix: yy-;

// Color 
@yy-skybule-color                  : #588CE9;
@yy-primary-color                  : #EE2223;
@yy-info-color                     : #E4E4E4;
@yy-success-color                  : #18b681;
@yy-warning-color                  : #FF8B00;
@yy-error-color                    : #EE2223;

@yy-link-color                     : #3B70CE;
@yy-link-hover-color               : tint(@yy-link-color, 20%);
@yy-link-active-color              : shade(@yy-link-color, 5%);

// Base
@yy-text-primary-color             : #333333;
@yy-text-info-color                : #666666;
@yy-text-disabled-color            : #BFBFBF;
@yy-font-size-base                 : 14px;
@yy-font-size-small                : 12px;
@yy-font-size-large                : 16px;
@cursor-disabled                   : not-allowed;
@cursor-pointer                    : pointer;
@yy-text-base-color                : #FFFFFF;
 

// Border color
@yy-border-color-base              : #D9D9D9;  
@yy-border-color-split             : #DBE0E5;  
@yy-border-color-dark              : #AAAAAA;
@yy-border-color-info              : #DEE0E3;
@yy-border-color-disabled          : #E6E6E6;
@yy-border-color-hover             : #505766;

// Background color
@yy-background-body                : #FFFFFF;
@yy-background-component           : #FFFFFF;
@yy-background-color-base          : #F7F7F7;
@yy-background-color-disabled      : #F7F7F7;
@yy-background-color-hover         : #F0F3F9;
@yy-background-color-selected      : #FEF9ED;
@yy-background-color-opacity       : rgba(0, 0, 0, .6);

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

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

// Button
@yy-btn-padding                    : 9px 16px;
@yy-btn-small-padding              : 5px 7px;
@yy-btn-large-padding              : 10px 25px;
@yy-btn-font-size                  : 12px;
@yy-btn-border-radius              : 3px;
@yy-btn-min-width                  : 60px;

@yy-btn-line-height                : 1;

@yy-btn-primary-bg                 : @yy-primary-color;
@yy-btn-primary-color              : #FFFFFF;
@yy-btn-primary-border             : @yy-primary-color;

@yy-btn-default-bg                 : #DBE0E5;
@yy-btn-default-color              : #555555;
@yy-btn-default-border             : #DBE0E5;

@yy-btn-success-bg                 : #505766;
@yy-btn-success-color              : #FFFFFF;
@yy-btn-success-border             : #505766;

@yy-btn-warning-bg                 : #FF8B00;
@yy-btn-warning-color              : #FFFFFF;
@yy-btn-warning-border             : #FF8B00;

@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;

// Input
@yy-input-height-small             : 28px;
@yy-input-height-base              : 32px;
@yy-input-height-large             : 36px;
@yy-input-padding-horizontal       : 10px;
@yy-input-padding-vertical-base    : 7px;

@yy-input-color                    : @yy-text-primary-color;
@yy-input-placeholder-color        : @yy-text-disabled-color;
@yy-input-border-color             : @yy-border-color-base;
@yy-input-bg                       : @yy-background-component;
@yy-input-disabled-bg              : @yy-background-color-disabled;
@yy-input-disabled-color           : @yy-text-disabled-color;
@yy-input-readonly-bg              : @yy-background-color-disabled;

@yy-input-hover-border-color       : @yy-border-color-hover;
@yy-input-focus-border-color       : @yy-border-color-hover;
@yy-input-error-border-color       : @yy-error-color;
@yy-input-disabled-border          : @yy-border-color-base;

// Message
@yy-message-success-bg             : #EBF8F2;
@yy-message-success-border         : #A7E1C4;
@yy-message-warning-bg             : #FEF3EB;
@yy-message-warning-border         : #FCCCA7;
@yy-message-error-bg               : #FEF3EB;
@yy-message-error-border           : #FCCCA7;

// Pagination
@yy-pagination-bg                  : #ADB4BC;

// Slider
@yy-slider-height                  :4px;
@yy-slider-margin                  :13px 0;
@yy-slider-button-wrap-size        :14px;
@yy-slider-button-wrap-offset      :-4px;

@yy-slider-color                   : @yy-success-color;
@yy-slider-disabled-color          : #EAEBED;
@yy-slider-bg                      : #EAEBED;

// Select
@yy-select-hover-bg                : @yy-background-color-hover;
@yy-select-selected-bg             : @yy-background-color-selected;

// Table
@yy-table-thead-bg                 : #F7F9FD;
@yy-table-td-hover-bg              : @yy-background-color-hover;
@yy-table-border                   : #F0F0F0;
@yy-table-thead-bottom-border      : @yy-border-color-split;
@yy-table-thead-top-border         : @yy-border-color-dark;
@yy-table-td-highlight-bg          : @yy-background-color-selected;
@yy-table-td-stripe-bg             : tint(#F0F3F9, 50%);

// Tag 
@yy-tag-bg                         : #F7F9FD;
@yy-tag-border                     : @yy-border-color-split;

// Radio && Checkbox
@yy-radio-border                   : #CCCCCC;
@yy-check-border                   : #CCCCCC;