// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override


// Table of Contents
//
// Prefix
// Colors
// Options
// Spacing
// Size
// Animation
// Shadow
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Font

// Components
// Z-index master list

// Tables
// Buttons
// Forms
// Dropdowns
// Select
// Navs
// Navbar
// Pagination
// Form states and alerts
// Cards
// Tooltips
// Popovers
// Badges
// Tag
// Modals
// Alerts
// Progress bars
// List group
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Close
// Code
// Switch
// Slider
// Checkbox
// Radio
// Input-number
// Rate
// Steps
// Date-picker
// Upload
// Timeline
// Editor
// Calendar
// Avastar
// Cascader
// Transfer
// Menu
// Tree
// Notice
// Message



// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.


// Prefix
$css-prefix             :'';

// Colors
//
// Grayscale and brand colors for use across Bootstrap.



// Start with assigning color names to specific hex values.

//$red:    #FF5F5F;
//$red-gradient: -45deg #FF788A #FF4545;
//$yellow: #FFBC33;
//$yellow-gradient: -45deg #FFD119 #FFAC4C;
//$green:  #31cf9a;
//$green-gradient: -225deg #46cf8f #1dcfab;
//$blue:   #17A7FB;
//$blue-gradient: -45deg #00C0FA #2F95FA;
//$purple: #7D8FFF;
//$purple-gradient: 225deg #9185FF #6392FF;

@import "mixins/color.scss";


// 品牌色
$brand-primary:             #0B82FF !default;

//图标字体路径
$icon-font-path:            "../fonts" !default;
// 中性色
$white:  #fff;
$black:  #000;

$gray-darker:                 gray-color($brand-primary,#deffff,#000,2%,16%); //背景色深色
$gray-dark:                   #333; //标题颜色
$gray:                        #666; //正文颜色
$gray-light:                  #999; //输入框图标颜色, placeholder颜色
$gray-lighter:                #ccc; //disabled文字颜色
$gray-lightest:               #e5e5e5; //边框颜色
$gray-lightest-18:            #e5e5e5; //背景色，分割线
$gray-lightest-10:            #f4f4f4; //背景色, disabled背景色
$gray-lightest-5:             #F1F4F9; //背景色


// 安全色
$brand-success:             #79C95B !default;
$brand-info:                #0B82FF !default;
$brand-warning:             #FFB717 !default;
$brand-danger:              #FF3F3B !default;

// 色值透明度为80%的实色
$brand-primary-opacity-80:             #85C0FF;
$brand-success-opacity-80:             #93D37B;
$brand-info-opacity-80:                #32C4FE;
$brand-warning-opacity-80:             #FEC444;
$brand-danger-opacity-80:              #FF9F9D;


// 渐变色
$brand-gradient-primary:             gradient-color(225deg,$brand-primary);
$brand-gradient-success:             gradient-color(225deg,$brand-success);
$brand-gradient-info:                gradient-color(225deg,$brand-info);
$brand-gradient-warning:             gradient-color(225deg,$brand-warning);
$brand-gradient-danger:              gradient-color(225deg,$brand-danger);

//color status
$color-status: (
        primary: 'purple' $brand-primary $brand-gradient-primary,
        success: 'green' $brand-success $brand-gradient-success,
        info: 'blue' $brand-info $brand-gradient-info,
        warning: 'yellow' $brand-warning $brand-gradient-warning,
        danger: 'red' $brand-danger $brand-gradient-danger
);

//状态颜色
$default-bg:                $gray-lightest-10;
$disabled-bg:               $gray-lighter;
$divider-bg:                $gray-lightest-18;
$list-hover-bg:             rgba($brand-primary,0.05);
$list-active-bg:            rgba($brand-primary,0.1);


// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-rounded:            true;
$enable-shadows:            true;
$enable-gradients:          false !default;
$enable-transitions:        true;
$enable-hover-media-query:  false;
$enable-grid-classes:       true;
$enable-print-styles:       true;
$enable-ie9:                true;
$enable-brand-primary:      true !default;


// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem;
$spacers: (
        0: 0,//0
        1: ($spacer * .25), //4px
        2: ($spacer * .5), //8px
        3: $spacer, //16px
        4: ($spacer * 1.5), //24px
        5: ($spacer * 3) //48px
);

// 以4px为基数
$spacer-series: (
        0: 0,
        base: 4px, // 避免覆盖spacers里的 '24px',后续可使用 'p-4'
        8: 8px,
        12: 12px,
        16: 16px,
        20: 20px,
        24: 24px,
        28: 28px,
        32: 32px,
        36: 36px,
        40: 40px
);

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%
);

// Animation
$animation-time: .3s;
$animation-time-lg: .6s;
$transition-time: .2s;

// Shadow
$shadow-color           : rgba(0, 0, 0, .2);
$shadow-card            : 0 1px 1px 0 rgba(0,0,0,.1);
$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;
$shadow-base            : $shadow-down;

// Body
//
// Settings for the `<body>` element.

$body-bg:       $white !default;
$body-color:    $gray !default;

// Links
//
// Style anchor elements.

$link-color:            $gray-dark;
$link-decoration:       none;
$link-hover-color:      $brand-primary; //modify
$link-active-color:     $brand-primary;//add
$link-hover-decoration: none;


// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
        "": 0, // 默认为移动端，class不加断点前缀
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
);


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px
);


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:               12;
$grid-gutter-width-base:     20px;
$grid-gutter-widths: (
        xs: $grid-gutter-width-base,
        sm: $grid-gutter-width-base,
        md: $grid-gutter-width-base,
        lg: $grid-gutter-width-base,
        xl: $grid-gutter-width-base
);

// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$font-family-base:         NotoSansSC !default;
$font-family-serif:        PingFang SC, Microsoft Yahei, Helvetica Neue, Arial;
$font-family-monospace:    Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
//$font-family-regular:    NotoSansSC-Regular;
//$font-family-medium:     NotoSansSC-Medium;
//$font-family-light:      NotoSansSC-Light;


$font-size-base: 16px; // Assumes the browser default, typically `16px`
$font-size-lg:   $font-size-base + 4px;
$font-size-sm:   $font-size-base - 2px;
$font-size-xs:   $font-size-base - 4px;

$font-weight-normal: normal;
$font-weight-bold: bold;
$font-weight-base: $font-weight-normal;

$line-height-base: 1.5;

$font-size-h1: 2.5rem;
$font-size-h2: 2rem;
$font-size-h3: 1.75rem;
$font-size-h4: 1.5rem;
$font-size-h5: 1.25rem;
$font-size-h6: 1rem;

$headings-margin-bottom: ($spacer / 2);
$headings-font-family:   $font-family-serif;//modify
$headings-font-weight:   400;
$headings-line-height:   1.1;
$headings-color:         inherit;
$headings-margin-bottom: .25rem;



$blockquote-small-color:  $gray;
$blockquote-font-size:    ($font-size-base * 1.25);
$blockquote-border-color: $gray-lighter;
$blockquote-border-width: .25rem;







// Components
//
// Define common padding and border radius sizes and more.

$line-height-lg:         (4 / 3);
$line-height-sm:         1.5;

$border-width: .0625rem;

$border-radius:          2px;

$component-active-color: $white;
$component-active-bg:    rgba($brand-primary,.1);

$transition-base:        all $transition-time ease-in-out;
$transition-fade:        opacity .15s linear;
$transition-collapse:    height .35s ease;

$hr-border-color: rgba($black,.1);
$hr-border-width: $border-width;

$mark-padding: .2em;

$dt-font-weight: $font-weight-bold;

$kbd-box-shadow:         inset 0 -.1rem 0 rgba($black,.25);
$nested-kbd-font-weight: $font-weight-bold;

$list-inline-padding: 5px;


// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown-backdrop:  1050;
$zindex-dropdown:           1060;
$zindex-sticky:             1020;
$zindex-fixed:              1030;
$zindex-modal-backdrop:     1050;
$zindex-modal:              1050;
$zindex-popover:            1060;
$zindex-tooltip:            1070;
$zindex-message:            1090;
$zindex-notification:       1090;
$zindex-loading:            1100;
$zindex-loading-fullscreen: 2000;
$zindex-loading-bar:        2000;





// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-prefix-cls:              $css-prefix + "table";

$table-font-size:               $font-size-sm;
$table-sm-font-size:            $font-size-xs;
$table-lg-font-size:            $font-size-base;
$table-th-height:               40px;
$table-td-height:               44px;
$table-sm-th-height:            32px;
$table-sm-td-height:            40px;
$table-lg-th-height:            48px;
$table-lg-td-height:            60px;
$table-cell-padding:            .75rem;
$table-sm-cell-padding:         .3rem;
$table-both-ends-padding:       1.875rem;

$table-bg:                      $white;
$table-bg-accent:               $gray-lightest-5;
$table-bg-accent-height:        300px;
$table-bg-hover:                $list-hover-bg;
$table-bg-active:               $list-active-bg;

$table-border-width:            $border-width;
$table-border-color:            $gray-lightest-18;

$table-head-bg:                 $gray-lightest-10;
$table-head-color:              $gray;

$table-transition:               .2s ease-in-out;


// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
$btn-prefix-cls:                 $css-prefix + "btn";

$btn-padding-x:                  16px;
$btn-height:                     1.875rem;
$btn-font-size:                  $font-size-sm;
$btn-icon-font-size:             $font-size-base;
$btn-active-box-shadow:          inset 0 0 0 2px rgba($white, .3);

$btn-primary-color:              $white;
$btn-primary-bg:                 $brand-primary;
$btn-primary-gradient-bg:        $brand-gradient-primary;

$btn-secondary-bg:               #fff;
$btn-secondary-color:            $gray-dark;
$btn-secondary-border:           $gray-lightest;
$btn-secondary-active-box-shadow:inset 0 0 0 2px rgba($brand-primary, .3);

$btn-info-color:                 $white;
$btn-info-bg:                    $brand-info;
$btn-info-gradient-bg:           $brand-gradient-info;

$btn-success-color:              $white;
$btn-success-bg:                 $brand-success;
$btn-success-gradient-bg:        $brand-gradient-success;

$btn-warning-color:              $white;
$btn-warning-bg:                 $brand-warning;
$btn-warning-gradient-bg:        $brand-gradient-warning;

$btn-danger-color:               $white;
$btn-danger-bg:                  $brand-danger;
$btn-danger-gradient-bg:         $brand-gradient-danger;

$btn-outline-primary-color:             $brand-primary;
$btn-outline-primary-hover-color:       $brand-primary;
$btn-outline-primary-border:            $brand-primary-opacity-80;
$btn-outline-primary-hover-border:      $brand-primary;

$btn-outline-info-color:         $brand-info;
$btn-outline-info-hover-color:   $brand-info;
$btn-outline-info-border:        $brand-info-opacity-80;
$btn-outline-info-hover-border:  $brand-info;

$btn-outline-success-color:         $brand-success;
$btn-outline-success-hover-color:   $brand-success;
$btn-outline-success-border:        $brand-success-opacity-80;
$btn-outline-success-hover-border:  $brand-success;

$btn-outline-danger-color:         $brand-danger;
$btn-outline-danger-hover-color:   $brand-danger;
$btn-outline-danger-border:        $brand-danger-opacity-80;
$btn-outline-danger-hover-border:  $brand-danger;

$btn-outline-warning-color:         $brand-warning;
$btn-outline-warning-hover-color:   $brand-warning;
$btn-outline-warning-border:        $brand-warning-opacity-80;
$btn-outline-warning-hover-border:  $brand-danger;

$btn-outline-white-color:        $white;
$btn-outline-white-border:       $white;

$btn-link-disabled-color:        $gray-light;

$btn-block-margin-y:             .5rem;

$btn-sm-padding-x:               .5rem;
$btn-sm-padding-y:               .34375rem;
$btn-sm-height:                  1.5rem;
$btn-sm-font-size:               $font-size-sm;
$btn-sm-icon-font-size:          $font-size-base;

$btn-lg-padding-x:               1.5rem;
$btn-lg-padding-y:               .625rem;
$btn-lg-height:                   3.125rem;
$btn-lg-font-size:               $font-size-base;
$btn-lg-icon-font-size:          24px;

$btn-transition:                 $transition-base;


// Forms
$form-prefix-cls:                 $css-prefix + "form";

$cursor-disabled:                not-allowed !important;

$input-prefix-cls:               $css-prefix + "input";

$input-textarea-prefix-cls: $css-prefix+"-textarea";

$input-icon-color:                $gray-light;
$input-bg-disabled:               $gray-lightest-10;
$input-border-color:              $gray-lightest;
$input-color-placeholder:         $gray-light;


$input-padding-x:                .5rem;
$input-padding-y:                .595rem;
$input-line-height:              1.4;

$input-bg:                       $white;


$input-color:                    $gray-dark;
$input-btn-border-width:         $border-width; // For form controls and buttons
$input-box-shadow:               inset 0 1px 1px rgba($black,.075);

$input-bg-focus:                 $input-bg;
$input-border-focus:             $brand-primary;
$input-border-focus-neutrals:    $gray;
$input-border-hover:             $brand-primary;
$input-border-hover-neutrals:    $gray;
$input-box-shadow-focus:         inset 0 0 0 2px rgba($brand-primary, 0.3);
$input-box-shadow-focus-neutrals:inset 0 0 0 2px $gray-lightest-18;
$input-color-focus:              $input-color;


$input-padding-x-sm:             .5rem;
$input-padding-y-sm:             .438rem;

$input-padding-x-lg:             1rem;
$input-padding-y-lg:             .815rem;


$input-font-size:             $font-size-sm;
$input-font-size-lg:          $font-size-base;
$input-font-size-sm:          $font-size-xs;

$input-icon-font-size:             1rem;
$input-icon-font-size-lg:          1.5rem;
$input-icon-font-size-sm:          $font-size-base;

$input-height:                   1.875rem;
$input-height-lg:                3.125rem;
$input-height-sm:                1.5rem;


$input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s;

$form-text-margin-top:     .25rem;
$form-feedback-margin-top: $form-text-margin-top;

$form-check-margin-bottom:  .5rem;
$form-check-input-gutter:   1.25rem;
$form-check-input-margin-y: .25rem;
$form-check-input-margin-x: .25rem;

$form-check-inline-margin-x: .75rem;

$form-group-margin-bottom:       1.2rem;
$form-group-label-font-size:     .875rem;
$form-group-label-font-size-sm:     .75rem;
$form-group-label-font-size-lg:     1rem;
$form-inline-group-gutter:          .625rem;
$form-inline-group-label-gutter:    .3125rem;

$input-group-addon-bg:           $gray-lightest-10;
$input-group-addon-border-color: $input-border-color;
$input-group-addon-focus-border-color: $brand-primary;
$input-group-addon-color:         $input-icon-color;


// Form validation icons
$form-icon-success-color: $brand-success;

$form-icon-warning-color: $brand-warning;

$form-icon-danger-color: $brand-danger;


// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-prefix-cls:            $css-prefix + "dropdown";

$dropdown-item-min-width:        64px;
$dropdown-padding-y:             8px;
$dropdown-margin-top:            .625rem;
$dropdown-bg:                    $white;
$dropdown-border-color:          transparent;
$dropdown-border-width:          $border-width;
$dropdown-divider-bg:            $divider-bg;
$dropdown-box-shadow:            0 2px 10px 0 rgba($black,.08);

$dropdown-link-color:            $body-color;
$dropdown-link-check-icon-color: $brand-primary;
$dropdown-link-hover-color:      $brand-primary;
$dropdown-link-hover-bg:         $list-hover-bg;

$dropdown-link-active-color:     $component-active-color;
$dropdown-link-active-bg:        $component-active-bg;

$dropdown-link-disabled-color:   $gray-lighter;

$dropdown-item-padding-x:        .625rem;
$dropdown-item-padding-y:        0;

$dropdown-group-title-padding-y:   .5rem;
$dropdown-group-title-font-size:   $font-size-xs;
$dropdown-group-title-color:       $gray-lighter;

$dropdown-header-color:          $gray;

//select
//
$select-prefix-cls:                 $css-prefix + "select";

$select-selection-icon-font-size:     1rem;
$select-sm-selection-icon-font-size:  1rem;
$select-lg-selection-icon-font-size:  1.5rem;

$select-clear-icon-font-size:     18px;
$select-sm-clear-icon-font-size:  14px;
$select-lg-clear-icon-font-size:  22px;

$select-selection-icon-spacer:       .3125rem;



// Navs
$nav-prefix-cls:                 $css-prefix + "nav";

$nav-item-margin:               .2rem;
$nav-item-inline-spacer:        1rem;
$nav-link-padding-x:            1rem;
$nav-link-padding-y:            0;
$nav-link-hover-bg:             $gray-lighter;
$nav-link-disabled-color:       $gray-lighter;

$nav-tabs-height:                             32px;
$nav-tabs-sm-height:                          32px;
$nav-tabs-link-color:                         $body-color;
$nav-tabs-link-hover-color:                   $brand-primary;
$nav-tabs-link-active-color:                  $brand-primary;
$nav-tabs-link-border-width:                  2px;
$nav-tabs-link-active-border-color:           $gray-lightest;
$nav-tabs-close-color:                        $gray-light;
$nav-tabs-close-hover-color:                  $body-color;

$nav-pills-height:                             32px;
$nav-pills-sm-height:                          32px;
$nav-pills-bg:                                 transparent;
$nav-pills-link-color:                         $body-color;
$nav-pills-link-hover-color:                   $brand-primary;
$nav-pills-link-active-color:                  $brand-primary;
$nav-pills-link-active-bg:                     $body-bg;
$nav-pills-separate-line-color:                $gray-lightest-18;
$nav-pills-text-cutoff-mask-width:             50px;
$nav-pills-close-color:                        $gray;
$nav-pills-close-hover-color:                  $body-color;

// Navbar
$navbar-prefix-cls:                 $css-prefix + "navbar";

$navbar-padding-x:                  $spacer;
$navbar-padding-y:                  ($spacer / 2);

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $navbar-brand-font-size * $line-height-base;
$navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2);
$navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2;

$navbar-toggler-padding-x:           .75rem;
$navbar-toggler-padding-y:           .25rem;
$navbar-toggler-font-size:           $font-size-lg;
$navbar-toggler-border-radius:       $border-radius;

$navbar-inverse-color:                 rgba($white,.5);
$navbar-inverse-hover-color:           rgba($white,.75);
$navbar-inverse-active-color:          rgba($white,1);
$navbar-inverse-disabled-color:        rgba($white,.25);
$navbar-inverse-toggler-border:        rgba($white,.1);

$navbar-light-color:                rgba($black,.5);
$navbar-light-hover-color:          rgba($black,.7);
$navbar-light-active-color:         rgba($black,.9);
$navbar-light-disabled-color:       rgba($black,.3);
$navbar-light-toggler-border:       rgba($black,.1);


// tabs
$tabs-vertical-nav-tabs-height:     32px;
$tabs-vertical-sm-nav-tabs-height:  32px;

// Pagination
$pagination-prefix-cls:             $css-prefix + "pagination";

$pagination-font-size:               $font-size-xs;
$pagination-font-size-lg:            $font-size-sm;
$pagination-font-size-sm:            $font-size-xs;

$pagination-space:                  .5rem;
$pagination-space-lg:               .9375rem;
$pagination-space-sm:               4px;

$pagination-width:                    1.875rem;
$pagination-height:                   1.875rem;

$pagination-width-lg:                 2.5rem;
$pagination-height-lg:                2.5rem;

$pagination-width-sm:                 1.5rem;
$pagination-height-sm:                1.5rem;

$pagination-input-width:              3rem;

$pagination-icon-font-size:           1.25rem;
$pagination-icon-font-size-lg:        1.5rem;
$pagination-icon-font-size-sm:        1rem;

$pagination-color:                     $gray-dark;
$pagination-bg:                        $white;
$pagination-border-width:              $border-width;
$pagination-border-color:              $gray-lightest;

$pagination-hover-color:               $brand-primary;
$pagination-hover-bg:                  $white;
$pagination-hover-border:              $brand-primary;

$pagination-active-color:              $white;
$pagination-active-bg:                 $brand-primary;
$pagination-active-border:             $brand-primary;

$pagination-disabled-color:            $gray-lighter;
$pagination-disabled-bg:               $gray-lightest-10;
$pagination-disabled-border:           $gray-lightest;


// Form states and alerts
//
// Define colors for form feedback states and, by default, alerts.

$state-success-text:             $brand-success;
$state-success-bg:               rgba($brand-success,.1);
$state-success-border:           $brand-success;

$state-info-text:                $brand-info;
$state-info-bg:                  rgba($brand-info,.1);
$state-info-border:              $brand-info;

$state-warning-text:             $brand-warning;
$state-warning-bg:               rgba($brand-warning,.1);
$mark-bg:                        $state-warning-bg;
$state-warning-border:           $brand-warning;

$state-danger-text:              $brand-danger;
$state-danger-bg:                rgba($brand-danger,.1);
$state-danger-border:            $brand-danger;


// Cards
$card-prefix-cls:          $css-prefix + "card";

$card-spacer-x:            1.25rem;
$card-spacer-y:            .75rem;
$card-border-width:        1px;
$card-border-radius:       $border-radius;
$card-border-color:        $gray-lightest-18;
$card-border-radius-inner: $card-border-radius - $card-border-width;
$card-cap-bg:              $gray-lightest-10;
$card-bg:                  $white;

$card-link-hover-color:    $white;

$card-img-overlay-padding: 1.25rem;

$card-deck-margin:          ($grid-gutter-width-base / 2);

$card-columns-count:        3;
$card-columns-gap:          1.25rem;
$card-columns-margin:       $card-spacer-y;


$card-header-color:         $body-color;
$card-header-font-size:     $font-size-sm;

$card-title-font-size:      $font-size-lg;
$card-title-spacer-y:       .375rem;
$cart-text-color:           $gray;
$cart-text-font-size:       $font-size-sm;

$card-footer-font-size:     $font-size-sm;
$card-footer-spacer-x:      .625rem;
$card-footer-spacer-y:      .625rem;

$card-header-spacer-y:       .5625rem;
$card-header-pills-link-bg:  $gray-lightest-10;
$card-header-pills-link-height: 2rem;
$card-header-pills-link-color:          $body-color;
$card-header-pills-link-active-color:   $white;
$card-header-pills-link-disabled-color: $gray-lighter;
$card-header-pills-link-font-size:      $font-size-xs;
$card-header-pills-item-gutter-x:       .3125rem;


// Tooltips
$tooltip-prefix-cls:          $css-prefix + "tooltip";

$tooltip-max-width:           200px;
$tooltip-color:               $white;
$tooltip-bg:                  rgba($black,.8);
$tooltip-padding-y:           8px;
$tooltip-padding-x:           8px;
$tooltip-margin:              3px;

$tooltip-arrow-width:         5px;
$tooltip-arrow-color:         $tooltip-bg;
$tooltip-distance:            $tooltip-arrow-width + $tooltip-margin;


// Popovers
$popover-prefix-cls:                  $css-prefix + "popover";

$popover-bg:                          $white;
$popover-color:                       $body-color;
$popover-min-width:                   150px;
$popover-max-width:                   300px;
$popover-border-width:                $border-width;
$popover-border-color:                $gray-lightest-18;
$popover-box-shadow:                  0 10px 40px rgba(0,0,0,.12);

$popover-arrow-width:                 10px;
$popover-arrow-color:                 $popover-bg;
$popover-arrow-outer-width:           $popover-arrow-width + 1;
$popover-arrow-outer-color:           $popover-border-color;

$popover-content-padding-x:           16px;
$popover-content-padding-y:           16px;

$popover-title-bg:                    $white;
$popover-title-font-size:             $font-size-sm;
$popover-title-padding-x:             0;
$popover-title-padding-y:             8px;

$popover-body-font-size:              $font-size-sm;



// Badges
$badge-prefix-cls:           $css-prefix + "badge";

$badge-default-bg:            $gray;
$badge-color:                 $white;
$badge-link-hover-color:      $white;
$badge-font-size:             $font-size-xs;
$badge-font-weight:           400;
$badge-height:                14px;
$badge-padding-x:             4px;

//$badge-pill-padding-x:        .6em;
//$badge-pill-border-radius:    10rem;

$badge-dot-height:          8px;
$badge-dot-width:           8px;


// Tag
$tag-prefix-cls:                  $css-prefix + "tag";

$tag-height:                      1.5rem;
$tag-margin-x:                    .25rem;
$tag-margin-y:                    .125rem;
$tag-padding-x:                   .5rem;
$tag-title-font-size:             $font-size-xs;
$tag-title-close-font-size:       $font-size-sm;

$tag-text-padding-x:               8px;

$tag-pill-border-radius:           $tag-height;

$tag-status-title-font-size:       $font-size-sm;
$tag-status-prefix-icon-spacer-x:  8px;
$tag-status-prefix-icon-width:     6px;
$tag-status-prefix-icon-height:    6px;
$tag-status-prefix-icon-box-shadow:none;


// Modals

// Padding applied to the modal body
$modal-prefix-cls:            $css-prefix + "modal";

$modal-inner-padding:         20px;

$modal-dialog-margin:         30px;
$modal-dialog-sm-up-margin-y: 30px;



$modal-title-line-height:     $line-height-base;
$modal-title-font-size:       $font-size-base;
$modal-close-size:            $font-size-lg;

$modal-content-bg:               $white;
$modal-content-border-color:     rgba($black,.2);
$modal-content-border-width:     $border-width;
$modal-content-xs-box-shadow:    0 2px 10px 0 rgba($black,.1);
$modal-content-sm-up-box-shadow: 0 2px 10px 0 rgba($black,.1);;

$modal-backdrop-bg:           $black;
$modal-backdrop-opacity:      .6;
$modal-header-border-color:   $gray-lighter;
$modal-footer-border-color:   $modal-header-border-color;
$modal-header-border-width:   $modal-content-border-width;
$modal-footer-border-width:   $modal-header-border-width;
$modal-header-padding-x:       20px;
$modal-header-padding-y:       8px;
$modal-header-bg:              $gray-lightest-10 $brand-gradient-primary;

$modal-lg:                    800px;
$modal-md:                    500px;
$modal-sm:                    300px;

$modal-transition:            transform .3s ease-out;


// Alerts
//
// Define alert colors, border radius, and padding.

$alert-prefix-cls:            $css-prefix + "alert";

$alert-min-height:            2.5rem;
$alert-padding-x:             1rem;
$alert-padding-y:             .625rem;
$alert-margin-bottom:         1.25rem;
$alert-border-radius:         $border-radius;
$alert-border-width:          $border-width;
$alert-text-color:            $gray;
$alert-font-size:             $font-size-sm;
$alert-line-height:           1.25;

$alert-with-icon-padding-x:  38px;
$alert-with-icon-with-desc-padding-x:  46px;

$alert-desc-font-size:        $font-size-sm;
$alert-desc-padding-y:        $alert-padding-y/2;

$alert-icon-position-x:       $alert-padding-x;
$alert-icon-position-y:       $alert-padding-y;
$alert-icon-font-size:        $font-size-base;
$alert-icon-desc-font-size:   1.25rem;
$alert-icon-space:            .5rem;
$alert-close-icon-font-size:  $font-size-sm;
$alert-close-icon-cursor:     pointer;

//第一个参数为背景色，第二个参数为边框色
$alert-style-panel: (
        null: #F8F9FA rgba(123,147,167,0.18),
        'success': #ECF4E9 $brand-success,
        'warning': #FAF2E2 $brand-warning,
        'danger':  #FAE6E6 $brand-danger,
        'info': #E1EDFA $brand-info,
);

// Progress bars
$progress-prefix-cls:           $css-prefix + "progress";

$progress-height:               10px;
$progress-font-size:            .75rem;
$progress-icon-font-size:       $font-size-lg;
$progress-bg:                   $gray-lightest-5;
$progress-border-radius:        $progress-height;
$progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1);
$progress-bar-color:            $white;
$progress-bar-bg:               $brand-primary;
$progress-bar-gradient-bg:      $brand-gradient-primary;
$progress-bar-animation-timing: 1s linear infinite;
$progress-height-sm:            6px;
$progress-font-size-sm:         $font-size-xs;
$progress-icon-font-size-sm:    $font-size-sm;


$progress-circle-bg-color:           $gray-lightest-10;

$progress-circle-svg-width:          80px;
$progress-circle-svg-height:         80px;
$progress-circle-border-width:       4px;
$progress-circle-text-font-size:     $font-size-xs;
$progress-circle-icon-font-size:     30px;
$progress-circle-percent-font-size:  20px;
$progress-circle-radius:             36;
$progress-circle-perimeter:          3.1415926 * (2 * $progress-circle-radius);

$progress-circle-svg-width-sm:          40px;
$progress-circle-svg-height-sm:         40px;
$progress-circle-border-width-sm:       2px;
$progress-circle-text-font-size-sm:     $font-size-xs;
$progress-circle-icon-font-size-sm:     $font-size-xs;
$progress-circle-percent-font-size-sm:  $font-size-xs;
$progress-circle-radius-sm:             18;
$progress-circle-perimeter-sm:          3.1415926 * (2 * $progress-circle-radius-sm);


$progress-circle-svg-width-lg:          200px;
$progress-circle-svg-height-lg:         200px;
$progress-circle-border-width-lg:       20px;
$progress-circle-text-font-size-lg:     24px;
$progress-circle-icon-font-size-lg:     48px;
$progress-circle-percent-font-size-lg:  48px;
$progress-circle-radius-lg:             80;
$progress-circle-perimeter-lg:          3.1415926 * (2 * $progress-circle-radius-lg);




// List group
$list-group-prefix-cls:          $css-prefix + "list-group";

$list-group-color:               $body-color;
$list-group-bg:                  $white;
$list-group-border-color:        $gray-lightest-18;
$list-group-border-width:        $border-width;
$list-group-border-radius:       $border-radius;
$list-group-font-size:           $font-size-sm;

$list-group-item-padding-x:      1.25rem;
$list-group-item-padding-y:      .875rem;

$list-group-hover-bg:            $list-hover-bg;
$list-group-active-color:        $component-active-color;
$list-group-active-border:       $gray-lightest-18;

$list-group-disabled-color:      $gray-lighter;
$list-group-disabled-bg:         $list-group-bg;

$list-group-link-color:          $body-color;
$list-group-link-hover-color:    $list-group-link-color;

$list-group-link-active-color:   $list-group-color;

$list-group-item-action-border-color:  rgba(#96B0B2,.2);



// Image thumbnails
$thumbnail-prefix-cls:          $css-prefix + "thumbnail";

$thumbnail-padding:           .25rem;
$thumbnail-bg:                $body-bg;
$thumbnail-border-width:      $border-width;
$thumbnail-border-color:      #ddd;
$thumbnail-border-radius:     $border-radius;
$thumbnail-box-shadow:        0 1px 2px rgba($black,.075);
$thumbnail-transition:        all .2s ease-in-out;


// Figures

$figure-caption-font-size: 90%;
$figure-caption-color:     $gray;


// Breadcrumbs

$breadcrumb-prefix-cls:              $css-prefix + "breadcrumb";

$breadcrumb-padding-y:          .75rem;
$breadcrumb-padding-x:          1rem;
$breadcrumb-item-padding:       8px;
$breadcrumb-font-size:           $font-size-sm;
$breadcrumb-text-color:          $gray;

$breadcrumb-bg:                 $body-bg;
$breadcrumb-divider-color:      $gray;
$breadcrumb-active-color:       $brand-primary;
$breadcrumb-hover-color:        $brand-primary;
$breadcrumb-divider:            "/";
$breadcrumb-icon-text-spacer:   .25rem;


// Carousel
$carousel-prefix-cls:                         $css-prefix + "carousel";

$carousel-control-color:                      $white;
$carousel-control-width:                      10%;
$carousel-control-opacity:                    .5;

$carousel-indicator-width:                    5px;
$carousel-indicator-height:                   5px;
$carousel-indicator-spacer:                   10px;
$carousel-indicator-active-width:             9px;
$carousel-indicator-active-height:            9px;
$carousel-indicator-active-bg:                $white;

$carousel-caption-width:                      80%;
$carousel-caption-color:                      $white;

$carousel-control-icon-width:                 48px;

$carousel-caption-spacer-y:                    10px;
$carousel-title-font-size:                     1.875rem;
$carousel-description-font-size:               1rem;


// Close
$close-prefix-cls:            $css-prefix + "close";

$close-font-size:             $font-size-base * 1.5;
$close-font-weight:           $font-weight-bold;
$close-color:                 $black;
$close-text-shadow:           0 1px 0 $white;

// Code
$code-prefix-cls:            $css-prefix + "code";

$code-font-size:              90%;
$code-padding-x:              .4rem;
$code-padding-y:              .2rem;
$code-color:                  #bd4147;
$code-bg:                     $gray-lightest;

$kbd-color:                   $white;
$kbd-bg:                      $body-color;

$pre-color:                   $body-color;
$pre-scrollable-max-height:   340px;


// Switch
$switch-prefix-cls:           $css-prefix + "switch";

$switch-font-size:            $font-size-base;
$switch-lg-font-size:         $font-size-base + 6px;
$switch-sm-font-size:         $font-size-sm;

$switch-color:                $gray;

$switch-height:               1.875rem;
$switch-sm-height:            1.5rem;
$switch-lg-height:            2.5rem;

$switch-width:                3.5625rem;
$switch-sm-width:             2.5rem;
$switch-lg-width:             4.25rem;

$switch-cursor:               pointer;
$switch-bg:                   $gray-lightest-18;
$switch-transition:           $transition-base;

$switch-border-radius:        $border-radius;
$switch-round-border-radius:  20px;

$switch-border-color:         transparent;
$switch-border-size:          1px;
$switch-border-style:         solid;

$switch-checked-color:        $white;
$switch-checked-bg:           $brand-primary;
$switch-checked-gradient-bg:  $brand-gradient-primary;
$switch-checked-border:       inherit;

$switch-inner-color:          inherit;

$switch-inner-padding-x:      .625rem;
$switch-lg-inner-padding-x:   .725rem;
$switch-sm-inner-padding-x:   .325rem;

$switch-inner-font-size:      ($switch-font-size *.75);
$switch-inner-margin-left:    24px;
$switch-inner-margin-right:   6px;

$switch-toggle-space:         .1875rem;
$switch-toggle-space-sm:      .125rem;
$switch-toggle-space-lg:      .1875rem;

$switch-toggle-width:         $switch-height - $switch-toggle-space*2;
$switch-lg-toggle-width:      2.125rem;
$switch-sm-toggle-width:      $switch-sm-height - $switch-toggle-space-sm*2;

$switch-toggle-height:        $switch-height - $switch-toggle-space*2;
$switch-lg-toggle-height:     2.125rem;
$switch-sm-toggle-height:     $switch-sm-height - $switch-toggle-space-sm*2;

$switch-checked-toggle-left:          calc(100% - #{$switch-toggle-width} - #{$switch-toggle-space});
$switch-lg-checked-toggle-left:       calc(100% - #{$switch-lg-toggle-width} - #{$switch-toggle-space-lg});
$switch-sm-checked-toggle-left:       calc(100% - #{$switch-sm-toggle-width} - #{$switch-toggle-space-sm});

$switch-toggle-radius:        3px;
$switch-round-toggle-radius: 18px;

$switch-toggle-bg:            $white;
$switch-toggle-text-space:     .625rem;

$switch-round-width:                3.1875rem;
$switch-round-sm-width:             2.375rem;


// Slider
$slider-prefix-cls:                   $css-prefix + "slider";

$slider-lg-height:                    8px;
$slider-height:                       4px;
$slider-sm-height:                    3px;

$slider-bg:                           $gray-lightest-10;
$slider-disabled-color:               #84C0FF;
$slider-cursor:                       pointer;
$slider-border-radius:                6px;
$slider-transition:                   background-color $animation-time ease;

$slider-track-bg:                       $brand-primary;
$slider-track-gradient-bg:              $brand-gradient-primary;

$slider-rail-bg:                        $brand-primary;

$slider-handle-border-color:            $brand-primary;

$slider-handle-size:                    10px;
$slider-lg-handle-size:                 10px;
$slider-sm-handle-size:                 8px;

$slider-handle-margin-l:               -7px;

$slider-handle-border-width:           3px;
$slider-lg-handle-border-width:           2px;
$slider-sm-handle-border-width:           2px;

$slider-handle-bg:                     #fff;
$slider-handle-box-shadow:             0 4px 8px 0 rgba(0,0,0,0.06);
$slider-handle-transition:              all .3s linear;

$slider-mark-font-size:               $font-size-xs;
$slider-sm-mark-font-size:            $font-size-xs - .2;

$slider-stop-scale-height:            8px;
$slider-stop-scale-margin-top:        10px;

// Checkbox
$checkbox-prefix-cls:      $css-prefix + "form-checkbox";

$checkbox-size:           16px;
$checkbox-sm-size:         .75rem;
$checkbox-lg-size:        1.125rem;

$checkbox-cursor:          pointer;
$checkbox-padding:         0 0 0 ($checkbox-size + 8px);

$checkbox-font-size:          $font-size-sm;
$checkbox-lg-font-size:       $font-size-base;
$checkbox-sm-font-size:       $font-size-xs;

$checkbox-padding-l:          3px;
$checkbox-lg-padding-l:       4px;
$checkbox-sm-padding-l:       2px;


$checkbox-bg:                $white;
$checkbox-disabled-bg:       $input-bg-disabled;

$checkbox-border-color:           $input-border-color;
$checkbox-hover-border-color:     $brand-primary;
$checkbox-border-radius:          2px;

$checkbox-checked-color:         $white;
$checkbox-checked-bg:            $brand-primary;
$checkbox-checked-disabled-bg:   $gray;

$checkbox-group-inline-space:   2rem;

$checkbox-btn-checked-bg-size:      22px;
$checkbox-btn-checked-bg-color:     $brand-primary;
$checkbox-btn-checked-border-color: $brand-primary;
$checkbox-btn-checked-icon-font-size:$font-size-xs;
$checkbox-btn-padding:              $input-padding-x;
$checkbox-btn-padding-lg:           $input-padding-x-lg;
$checkbox-btn-padding-sm:           $input-padding-x-sm;

$checkbox-group-space:   10px;
$checkbox-group-space-lg:12px;
$checkbox-group-space-sm:8px;


// Radio
$radio-prefix-cls:      $css-prefix + "form-radio";

$radio-size:           .875rem;
$radio-sm-size:        1rem;
$radio-lg-size:        1.375rem;

$radio-cursor:          pointer;

$radio-font-size:          $font-size-sm;
$radio-lg-font-size:       $font-size-base;
$radio-sm-font-size:       $font-size-xs;

$radio-padding-l:          .625rem;
$radio-lg-padding-l:       .6875rem;
$radio-sm-padding-l:       .5rem;

$radio-bg:               $white;
$radio-disabled-bg:      $input-bg-disabled !important;

$radio-disabled-border:        $gray-lightest !important;
$radio-border-color:           $input-border-color;
$radio-hover-border-color:     $brand-primary;
$radio-border-radius:          50%;

$radio-checked-color:         $white;
$radio-checked-bg:            $brand-primary;
$radio-checked-disabled-bg:   $gray!important;

$radio-group-inline-space:   2rem;

// Input-number
$input-number-prefix-cls: $css-prefix + "form-input-number";

$input-number-width:      7.625rem;
$input-number-height:     $input-height;
$input-number-font-size:  $input-font-size;
$input-number-color:           $body-color;
$input-number-control-bg:      #fff;
$input-number-control-width:   24px;

$input-lg-number-width:      5.25rem;
$input-lg-number-height:     $input-height-lg;
$input-lg-number-font-size:  $input-font-size-lg;

$input-sm-number-width:      5.25rem;
$input-sm-number-height:     $input-height-sm;
$input-sm-number-font-size:  $input-font-size-sm;

// Rate
//$rate-size:    1.375rem 0.875rem;//star-size text-size
//$rate-sm-size:    1rem 0.75rem;
//$rate-star-color:   $gray-lightest;
//$rate-text-color:   $gray;
//$rate-active-color:   $brand-warning;
//$rate-star-spacing: 2px;

// Steps
$steps-prefix-cls:             $css-prefix + "steps";

$steps-tail-bg:                $gray-lightest-18;
$steps-tail-size:              1px;

$steps-horizontal-item-space:  16px;

$steps-horizontal-item-width:  140px;

$steps-vertical-item-space:    8px;

$steps-main-bg:                transparent;

$steps-head-border-width:      1px;
$steps-head-border-color:      $gray-lightest-18;
$steps-head-size:              32px;
$steps-head-font-size:         $font-size-sm;

$steps-main-title-color:       $gray;
$steps-main-title-font-size:   $font-size-sm;
$steps-main-description-font-size: $font-size-xs;

$steps-finish-head-border-color:$brand-primary;
$steps-finish-head-icon-color:  $brand-primary;
$steps-finish-tail-size:        1px;
$steps-finish-tail-bg:          $brand-primary $brand-gradient-primary;
$steps-finish-title-color:      $gray-dark;
$steps-finish-description-color: $gray;

$steps-process-head-border-color:transparent;
$steps-process-head-bg:         $brand-primary $brand-gradient-primary;
$steps-process-head-icon-color: $white;
$steps-process-title-color:     $body-color;
$steps-process-description-color: $body-color;

$steps-wait-head-border-color:  $gray-lightest-18;
$steps-wait-head-icon-color:    $gray-light;
$steps-wait-title-color:        $gray-light;
$steps-wait-description-color:  $gray-light;

$steps-error-head-border-color:  $brand-danger;
$steps-error-head-icon-color:    $brand-danger;
$steps-error-title-color:        $brand-danger;
$steps-error-description-color:  $brand-danger;

$steps-sm-head-size:           24px;
$steps-sm-main-title-font-size:$font-size-xs;


// Date-picker
$date-pick-prefix-cls:                $css-prefix + "date-pick";

$date-panel-width:                    245px;
$date-panel-height:                   260px;
$datePicker-weekDays-font-size:       $font-size-xs;

$datePicker-padding-x:                14px;
$datePicker-padding-y:                12px;

$datePicker-footer-padding:           8px;

$datePicker-date-spacer:              7px 8px;
$datePicker-date-width:               24px;
$datePicker-date-height:              24px;
$datePicker-date-font-size:           $font-size-xs;
$datePicker-date-border-radius:       $border-radius;

$datePicker-header-color:            $gray-dark;
$datePicker-header-font-size:        $font-size-sm;
$datePicker-header-height:           36px;

$datePicker-other-panel-width:          calc(#{$date-panel-width} * 2 + #{$border-width});
$datePicker-other-panel-date-padding:   0;
$datePicker-other-panel-date-width:     40px;
$datePicker-other-panel-date-border-radius:  $datePicker-date-height;

$time-spinner-height:                190px;
$time-spinner-time-border-radius:    50%;

// Upload
$upload-prefix-cls:                   $css-prefix + "upload";

$upload-picture-card-width:           6rem;
$upload-picture-card-height:          6rem;
$upload-list-picture-thumbnail-width: 3rem;
$upload-list-picture-thumbnail-height:3rem;
$upload-item-space:                   .5rem;


// upload head
$upload-head-prefix-cls:                   $css-prefix + "upload-head";



// Timeline
$timeline-prefix-cls:  $css-prefix + "timeline";

$timeline-font-size:   $font-size-base;
$timeline-color:        $body-color;


$timeline-item-icon-width:  14px;
$timeline-item-icon-border:  3px solid $brand-primary;
$timeline-item-icon-border-radius:  50%;

$timeline-item-space-left:  12px;

$timeline-item-tail-color:   $divider-bg;
$timeline-item-tail-space-left:   ($timeline-item-icon-width/2);

$timeline-item-time-width:     60px;

$timeline-item-content-padding-top:     1px;
$timeline-item-content-padding-right:     1px;
$timeline-item-content-padding-bottom:     1px;
$timeline-item-content-padding-left:     30px;

$timeline-horizontal-space-left:      ($timeline-item-time-width + $timeline-item-content-padding-left - $timeline-item-icon-width) ;
$timeline-horizontal-time-align:    right;

// Editor
//$editor-color:  $body-color;
//$editor-border: 1px solid $input-border-color;
//$editor-border-radius: 4px 4px 0 0;
//
//$editor-toolbar-padding-x:      20px;
//$editor-toolbar-padding-y:      18px;
//$editor-toolbar-icon-font-size:     20px;
//$editor-toolbar-icon-color:     $gray;
//$editor-toolbar-icon-hover-active-color: $brand-primary;
//$editor-toolbar-icon-width:             $editor-toolbar-icon-font-size;
//$editor-toolbar-icon-height:             $editor-toolbar-icon-font-size;
//$editor-toolbar-icon-group-space-x:    24px;
//$editor-toolbar-icon-space-x:    10px;
//$editor-toolbar-icon-space-y:    10px;

// Calendar
$full-calendar-header-title:          $font-size-lg;
$full-calendar-border-color:          $gray-lightest-18;



// Avastar
$avatar-prefix-cls:            $css-prefix + "avatar";

$avatar-height:            40px;
$avatar-width:             40px;
$avatar-text-color:        $white;
$avatar-dot-height:          8px;
$avatar-dot-width:           8px;
$avatar-text-font-size:    $font-size-sm;
$avatar-height-sm:         32px;
$avatar-width-sm:          32px;
$avatar-text-font-size-sm: $font-size-xs;



// Cascader
$cascader-prefix-cls:    $css-prefix + "cascader";

$cascader-min-width:      100px;
$cascader-margin-right:      10px;
$cascader-loading-color:      $brand-primary;

// Transfer
$transfer-prefix-cls:    $css-prefix + "transfer";

$transfer-spacer-x:  8px;
$transfer-spacer-y: 8px;
$transfer-operation-spacer:.5rem;


// Menu
$menu-prefix-cls:                $css-prefix + "menu";
$menu-bg:                        $white;
$submenu-bg:                     $white;
$menu-border-color:              $gray-lightest-18;

$menu-item-font-size:                 $font-size-sm;
$menu-item-icon-font-size:            $font-size-base;
$menu-horizontal-item-icon-font-size: $font-size-lg;
$menu-item-transition:                all .2s ease-in-out;
$menu-item-icon-space-x:              4px;
$menu-item-icon-collapse-space-x:     8px;
$menu-item-border:                    3px solid transparent;
$menu-item-group-color:               $gray-lighter;


$menu-item-color:                $body-color;
$menu-item-border-color:         transparent;

$menu-item-hover-color:    $body-color;
$menu-item-hover-bg:       $list-hover-bg;

$menu-item-active-color:   $brand-primary;
$menu-item-active-bg:      $component-active-bg;
$menu-item-active-border-color:  transparent;

$menu-light-horizontal-item-hover-bg:     transparent;
$menu-light-horizontal-item-active-bg:    $brand-primary;
$menu-light-horizontal-item-hover-color:  $brand-primary;
$menu-light-horizontal-item-active-color:  $white;

$menu-dark-bg:                 #343B55;
$menu-dark-submenu-bg:         rgba(0,0,0,.18);
$menu-dark-item-color:         rgba($white, .8);
$menu-dark-border-color:       transparent;
$menu-dark-item-group-color:   rgba($white,.4);


$menu-dark-item-hover-color:   $white;
$menu-dark-item-hover-bg:      rgba(0,0,0,.1);

$menu-dark-item-active-color:   $white;
$menu-dark-item-active-bg:      $brand-primary;
$menu-dark-item-active-border-color: $brand-primary;

$menu-ghost-bg:                 $brand-primary;
$menu-ghost-submenu-bg:         transparent;
$menu-ghost-item-color:         rgba($white, .8);
$menu-ghost-border-color:       transparent;
$menu-ghost-item-group-color:    rgba($white,.4);


$menu-ghost-item-hover-color:   $white;
$menu-ghost-item-hover-bg:      rgba($white,.15);

$menu-ghost-item-active-color:   $white;
$menu-ghost-item-active-bg:      rgba($black,.1);
$menu-ghost-item-active-border-color: transparent;


$menu-horizontal-height:  50px;
$menu-horizontal-padding-x:  25px;

$menu-vertical-height:  40px;
$menu-vertical-padding-x:  24px;
$menu-vertical-padding-y:  0;

$menu-folded-vertical-height:        40px;
$menu-folded-item-icon-font-size: 22px;


// Tree
//---
$tree-prefix-cls:                $css-prefix + "tree";

$tree-node-text-padding-y:        0px;
$tree-node-text-padding-x:        5px;
$tree-node-text-check-bg:         $list-active-bg;
$tree-node-text-hover-bg:         $list-hover-bg;


// Notice
//---
$notice-prefix-cls:     $css-prefix + "notice";
$notice-width:          490px;
$notice-spacer-right:   24px;
$notice-spacer-bottom:  10px;
$notice-padding:        16px;
$notice-close-icon-color: $gray;
$notice-close-icon-hover-color: $body-color;
$notice-close-icon-font-size:$font-size-base;
$notice-title-font-size:$font-size-base;
$notice-title-spacer-bottom:5px;
$notice-desc-font-size: 14px;
$notice-desc-color:$body-color;
$notice-icon-size:24px;
$notice-with-desc-icon-size:24px;

// Message
//--
$message-prefix-cls:      $css-prefix + "message";

$message-font-size:       14px;
$message-top:             16px;
$message-content-padding-x:16px;
$message-content-padding-y:8px;
$message-content-bg-color: $white;
$message-icon-spacer-x:    8px;
$message-icon-font-size:   16px;

//Backtop
$backtop-prefix-cls:            $css-prefix + "back-top";

// slipbox
$slipbox-wraper-min-width: 350px;
$slipbox-wraper-max-width: 33.3%;
$slipbox-wraper-top:       60px;
$slipbox-header-height:    70px;
$slipbox-header-padding:   18px;
$slipbox-header-fontSize:  $slipbox-header-padding;
$slipbox-header-color:     #2d3e53;
$slipbox-header-border-color: #979797;

// anchor
$anchor-prefix-cls:         $css-prefix + "anchor";
$anchor-border-width:       1px;
$anchor-ink-border-color:   $gray-lightest;

// cityPicker
$city-picker-prefix-cls:    $css-prefix + "city-picker";
$city-picker-input-height:  30px;
$city-picker-input-sm-height:  24px;
$city-picker-input-padding-right:    24px;