// Name:            Variables
// Description:     变量
// Author:          sensen(rainforest92@126.com)
// ========================================================================

@import "../../core/base/var.mcss";

// Dimension Variables:
// ========================================================================

/* Height */
$height-base = 34px;
$height-xs = 22px;
$height-sm = 30px;
$height-lg = 38px;
$height-xl = 46px;

/* Font Size */
$font-size-base = 14px;
$font-size-xs = 10px;
$font-size-sm = 12px;
$font-size-lg = 16px;
$font-size-xl = 18px;

/* Padding */
$padding-base = 6px 12px;
$padding-xs = 1px 5px;
$padding-sm = 5px 10px;
$padding-lg = 10px 16px;
$padding-xl = 16px 24px;

/* Border Radius */
$border-radius-base = 3px;
$border-radius-xs = 1px;
$border-radius-sm = 2px;
$border-radius-lg = 4px;
$border-radius-xl = 6px;



// Color Variables:
// ========================================================================

/* Brand Colors */
$brand-default =                        #f4f4f4;
$brand-default-dark =                   #e5e5e5;
$brand-default-darker =                 #adadad;
$brand-primary =                        #252B33;
$brand-primary-darker =                 #367fa9;
$brand-info =                           #00c0ef;
$brand-info-lighter =                   mix($brand-info, white, 10%);
$brand-info-darker =                    #00acd6;
$brand-success =                        #00a65a;
$brand-success-lighter =                mix($brand-success, white, 10%);
$brand-success-darker =                 #008d4c;
$brand-warning =                        #f39c12;
$brand-warning-lighter =                mix($brand-warning, white, 10%);
$brand-warning-darker =                 #e08e0b;
$brand-error =                          #dd4b39;
$brand-error-lighter =                  mix($brand-error, white, 10%);
$brand-error-darker =                   #d73925;
$brand-secondary =                      $brand-primary;

/* Gray Colors */
$gray-base = #777;

/* Base Colors */
$background-base = $brand-default;
$color-base = #444;
$border-base = #ddd;
$border-width-base = 1px;



// Form Control Variables:
// ========================================================================

/* Dimensions */
$u-formctrl_padding = $padding-base;
$u-formctrl-sm_padding = $padding-sm;
$u-formctrl-lg_padding = $padding-lg;

$u-formctrl_height = $height-base;
$u-formctrl-sm_height = $height-sm;
$u-formctrl-lg_height = $height-lg;

$u-formctrl_width = 140px;

$u-formctrl-sm_font-size = $font-size-sm;
$u-formctrl-lg_font-size = $font-size-lg;

$u-formctrl_min-width = 140px;

/* Colors */
$u-formctrl_background = white;
$u-formctrl_color = #555;
$u-formctrl_border = #d2d6de;

$u-formctrl-focus_background = $u-formctrl_background;
$u-formctrl-focus_color = $u-formctrl_color;
$u-formctrl-focus_border = $brand-primary;

$u-formctrl-disabled_background = #eee;
$u-formctrl-disabled_color = #999;
$u-formctrl-disabled_border = $u-formctrl_border;

$u-formctrl_placeholder_color = #bbb;



/* Form Control Item */
$u-formctrl_item_padding = 3px 20px;
$u-formctrl_item-hover_background = #f4f4f4;
$u-formctrl_item-hover_color = #444;
$u-formctrl_item-hover_border = null;

$u-formctrl_item-selected_background = $brand-primary;
$u-formctrl_item-selected_color = white;
$u-formctrl_item-selected_border = null;