// !default表示默认值，若有其他非默认值，则默认值会被覆盖
// 所有的子元素都必须要有&>或&来限制，避免递归浪费css性能
// 使用尽量少的class，尽量多的元素标签来表示元素
// 使用中横线命名，名字若归属于某项事物的，则以 ： 事物-属性来命名，这样以便ide提示和搜索。
// 不重复引入组件，比如select是由input和option组件，再加一些修正样式组成，但input,option不需要在select中引入，以免index.scss重复引入input和option。所以如果要单独使用select，则需要引入input, option组件
// 不可单独拿出来使用的组件，无需单独一个文件，比如button-group。而option是可以单独拿出来使用的，则需要单独的文件。
// 没有特殊用处，无需事件，不允许用户修改的装饰性图标，使用after或before来引入图标
// 只写通用动画，专门用于vue或专门用于react中的动画，他们自己写。

// 字体图标路径,绝对路径
$iconfont-path: '/dist/iconfont' !default;
// 背景颜色
$primary: #409EFF !default;
$success: #67C23A !default;
$warning: #fecf20 !default;
$danger: #F56C6C !default;
$info: #909399 !default;

$background: #f5f5f9 !default;
$background-primary: lighten($primary, 35) !default;
$background-success: lighten($success, 45) !default;
$background-warning: lighten($warning, 40) !default;
$background-danger: lighten($danger, 27) !default;
$background-info: lighten($info, 37) !default;

// 文字颜色
$text-dark: #303133 !default;
$text: #606266 !default;
$text-light: #909399 !default;
$text-lighter: #C0C4CC !default;

// 边框颜色
$border-dark: #DCDFE6 !default;
$border: #E4E7ED !default;
$border-light: #EBEEF5 !default;
$border-lighter: #F2F6FC !default;

// 字体
$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif !default;

// 字体大小
$huge: 20px !default;
$big: 18px !default;
$large: 16px !default;
$normal: 14px !default;
$small: 12px !default;
$tiny: 10px !default;

// space表示空间距离，padding和margin通用变量
$space-big: 32px !default;
$space-large: 22px !default;
$space: 14px !default;
$space-small: 8px !default;
$space-tiny: 4px !default;

// 元素高度， ant-design 主要有 large 40 normal 32 small 24
$height-large: 40px !default;
$height: 32px !default;
$height-small: 24px !default;

$types: primary, success, warning, info, danger !default;
$colors: (
        primary: $primary,
        success: $success,
        warning: $warning,
        danger: $danger,
        info: $info
) !default;
$background-colors: (
        primary: $background-primary,
        success: $background-success,
        warning: $background-warning,
        danger: $background-danger,
        info: $background-info
) !default;

$tr-background: #fafafa !default;

$box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) !default;

// 默认border-radius圆角大小
$radius: 4px !default;

$transition-time: .4s !default;

// 长宽一样，为length, 只分宽或高，用width和height
$input-length: 175px !default;

$counter-input-width: 80px !default;

$switch-width: 40px !default;
$switch-height: 20px !default;
$cascader-option-height: 210px !default;

$slider-bar-length: 4px !default;
$slider-circle-length: 14px !default;

$date-picker-width: 330px !default;
$data-picker-circle-length: 24px !default;
// 等级星星颜色
$rate-star: #f8c422 !default;

$dialog-background: rgba(0, 0, 0, 0.4) !default;

$file-list-picture-length: 100px !default;
$file-list-title-picture-length: 60px !default;
$file-list-title-picture-inline-width: 200px !default;

$field-label-width: 80px !default;

$steps-circle-length: 26px !default;
$steps-small-circle-length: 18px !default;
$steps-vertical-height: 60px !default;

$badge-height: 20px !default;
$badge-dot-height: 8px !default;

$pagination-page-size-width: 100px !default;
$pagination-goto-width: 50px !default;

$collapse-header-height: 40px !default;

$tabs-line-height: 2px!default;
$tabs-height: 40px!default;

$tooltip-dark: #373737 !default;
$tooltip-height: 40px!default;
$tooltip-angle-length: 8px!default;

$notification-width: 300px!default;
$notification-icon-font-size: 30px!default;
$dialog-small-width: 15%!default;
$dialog-large-width: 50%!default;


$message-width: 300px!default;
$transfer-height: 180px!default;
$transfer-width: 120px!default;

// iconfont 对应的 content 的内容
$icon-angle-right: "\e608" !default;