/**
 * @author jonasli
 * @module smart campus Variables
 * @date 2017/02/26
 */

// brand  多处引用的颜色,也是组件默认颜色 -->eg: button
// ====================================
$scui-brand-default:            #F7F7F7;
$scui-brand-green:              #04BE02;
$scui-brand-blue:               #50b5e1;
$scui-brand-orange:             #ff925c;
$scui-brand-red:                #EF4F4F;

// color --> rgba
// ===================================
// 灰色文本颜色
$scui-gray-base:                #000;
$scui-gray-darker:              #333;        // .8
$scui-gray-dark:                #4D4D4D;     // .7
$scui-gray:                     #666;        // .6
$scui-gray-light:               #999;        // .4
$scui-gray-lighter:             #ccc;        // .2

// 绿色文本颜色
$scui-green-base:               #6bd767;
$scui-green-darker:             #89DF85;
$scui-green-dark:               #97E394;
$scui-green:                    #A6E7A4;
$scui-green-light:              #C4EFC2;
$scui-green-lighter:            #E1F7E1;

// 蓝色文本颜色
$scui-blue-base:                #148eff;
$scui-blue-darker:              #43A5FF;
$scui-blue-dark:                #5AB0FF;
$scui-blue:                     #72BBFF;
$scui-blue-light:               #A1D2FF;
$scui-blue-lighter:             #D0E8FF;

// 橙色文本颜色
$scui-orange-base:              #ff925c;
$scui-orange-darker:            #FFA87D;
$scui-orange-dark:              #FFB28D;
$scui-orange:                   #FFBE9D;
$scui-orange-light:             #FFD3BE;
$scui-orange-lighter:           #FFE9DE;

// 红色文本颜色
$scui-red-base:              	#EF4F4F;
$scui-red-darker:            	#F37575;
$scui-red-dark:              	#F69E9E;
$scui-red:                   	#F7AFAF;
$scui-red-light:             	#FAC7C7;
$scui-red-lighter:           	#FCE2E2;

// 文字链接颜色
$scui-link-gray:                 $scui-gray-light;
$scui-link-blue:                 $scui-blue-light;

// 文本默认颜色 
$scui-text-color:                $scui-gray-base;
$scui-text-white:                #fff;

// border color
// ===================================
// 灰色 边框颜色
$scui-border-gray-base:          #CACACA;
$scui-border-gray-darker:        #D4D4D4;        
$scui-border-gray-dark:          #DADADA;     
$scui-border-gray:               #DFDFDF;        
$scui-border-gray-light:         #EAEAEA; // 默认       
$scui-border-gray-lighter:       #F5F5F5;        

// 绿色 边框颜色
$scui-border-green-base:         #33D34E;
$scui-border-green-darker:       #5BDB71;        
$scui-border-green-dark:         #6FE082;     
$scui-border-green:              #84E494;        
$scui-border-green-light:        #ADEDB8; // 默认  
$scui-border-green-lighter:      #D6F6DB;  

// background-color
// ====================================
// 灰色 背景颜色
$scui-bg-gray-base:              #CACACA;
$scui-bg-gray-darker:            #D4D4D4;        
$scui-bg-gray-dark:              #DADADA;     
$scui-bg-gray:                   #DFDFDF;        
$scui-bg-gray-light:             #EAEAEA;        
$scui-bg-gray-lighter:           #F5F5F5; // 默认    

// 绿色 背景颜色
$scui-bg-green-base:             #4CD764;
$scui-bg-green-darker:           #6FDF83;        
$scui-bg-green-dark:             #81E392;     
$scui-bg-green:                  #93E7A2;        
$scui-bg-green-light:            #B7EFC1;        
$scui-bg-green-lighter:          #DBF7E0; // 默认   

// 白色背景颜色
$scui-bg-white:                  #fff;       

// font-size
// ====================================
// 字体大小
$scui-font-size-base:            14px;

$scui-font-size-h1:              floor(($scui-font-size-base * 2.6));  // ~36px
$scui-font-size-h2:              floor(($scui-font-size-base * 2.15)); // ~30px
$scui-font-size-h3:              ceil(($scui-font-size-base * 1.7));   // ~24px
$scui-font-size-h4:              ceil(($scui-font-size-base * 1.25));  // ~18px
$scui-font-size-h5:              $scui-font-size-base;
$scui-font-size-h6:              ceil(($scui-font-size-base * 0.85));  // ~12px

$scui-font-size-12:              12px;
$scui-font-size-14:              14px;
$scui-font-size-16:              16px;
$scui-font-size-18:              18px;

$scui-font-size-20:              20px;
$scui-font-size-22:              22px;
$scui-font-size-32:              32px;

$scui-font-size-base:            14px;
$scui-font-size-large:           ceil(($scui-font-size-base * 1.25));  // ~18px
$scui-font-size-small:           ceil(($scui-font-size-base * 0.85));  // ~12px

$scui-btn-font-weight:           normal;

// image
// ====================================
// 图片大小
$scui-img-16:                    16px;
$scui-img-22:                    22px; // dropload loading
$scui-img-32:                    32px;
$scui-img-56:                    56px;
$scui-img-70:                    70px;
$scui-img-90:                    90px;
$scui-img-130:                   130px;
$scui-img-150:                   150px;

$scui-img-base:                  $scui-img-90;
$scui-img-large:                 $scui-img-130;
$scui-img-small:                 $scui-img-32;

// line-height
// ====================================
// 行高
$scui-line-height-base:          1.5;
$scui-line-height-small:         1.3333333; // for Win 8.1 Chrome
$scui-line-height-large:         1.6;

// border-radius
// ====================================
// 圆角
$scui-border-radius-base:        5px;
$scui-border-radius-larger:      8px;
$scui-border-radius-large:       6px;
$scui-border-radius-small:       3px;
$scui-border-radius-smaller:     2px;
$scui-border-radius-fixed:       0;

// padding
// ====================================
// 内边距
$scui-padding-base-vertical:         6px;
$scui-padding-base-horizontal:       14px;

$scui-padding-large-vertical:        8px;
$scui-padding-large-horizontal:      16px;

$scui-padding-md-vertical:           6px;
$scui-padding-md-horizontal:         30px;

$scui-padding-small-vertical:        5px;
$scui-padding-small-horizontal:      10px;

$scui-padding-smaller-vertical:      3px;
$scui-padding-smaller-horizontal:    6px;

$scui-padding-5:                     5px;
$scui-padding-10:                    10px;
$scui-padding-15:                    15px;
$scui-padding-20:                    20px;
$scui-padding-25:                    25px;
$scui-padding-30:                    30px;
$scui-padding-40:                    40px;
$scui-padding-60:                    60px;

// margin
// ====================================
// 外边距
$scui-margin-base-vertical:          6px;
$scui-margin-base-horizontal:        14px;

$scui-margin-large-vertical:         8px;
$scui-margin-large-horizontal:       16px;

$scui-margin-md-vertical:            6px;
$scui-margin-md-horizontal:          30px;

$scui-margin-small-vertical:         5px;
$scui-margin-small-horizontal:       10px;

$scui-margin-smaller-vertical:       3px;
$scui-margin-smaller-horizontal:     6px;

$scui-margin-5:                      5px;
$scui-margin-10:                     10px;
$scui-margin-15:                     15px;
$scui-margin-20:                     20px;
$scui-margin-25:                     25px;
$scui-margin-30:                     30px;
$scui-margin-40:                     40px;
$scui-margin-60:                     60px;

// button
// ====================================
// 按钮
$scui-btn-default-color:              #454545;
$scui-btn-default-bg:                 $scui-brand-default;
$scui-btn-default-border:             #ccc;

$scui-btn-green-color:                #fff; // rgba(255, 255, 255, 0.6)
$scui-btn-green-bg:                   $scui-brand-green;
$scui-btn-green-border:               darken($scui-btn-green-bg, 5%);

$scui-btn-blue-color:                 #fff; 
$scui-btn-blue-bg:                    $scui-brand-blue;
$scui-btn-blue-border:                darken($scui-btn-blue-bg, 5%);

$scui-btn-orange-color:               #fff; 
$scui-btn-orange-bg:                  $scui-brand-orange;
$scui-btn-orange-border:              darken($scui-btn-orange-bg, 5%);

$scui-btn-red-color:                  #fff; 
$scui-btn-red-bg:                     $scui-brand-red;
$scui-btn-red-border:                 darken($scui-btn-red-bg, 5%);

$scui-btn-plain-color:                $scui-gray-dark; 
$scui-btn-plain-bg:                   #fff;
$scui-btn-plain-border:               $scui-gray-dark; 

$scui-btn-fixed-green-color:          #fff; 
$scui-btn-fixed-green-bg:             $scui-brand-green;
$scui-btn-fixed-green-border:         darken($scui-btn-fixed-green-bg, 5%);

$scui-btn-fixed-white-color:          $scui-gray-dark; 
$scui-btn-fixed-white-bg:             #fff; 
$scui-btn-fixed-white-border:         darken($scui-btn-fixed-white-bg, 5%);

$scui-btn-fixed-red-color:            #fff;
$scui-btn-fixed-red-bg:               $scui-brand-red;
$scui-btn-fixed-red-border:           darken($scui-btn-fixed-red-bg, 5%);