kingdot/src/styles/theme-default/variables.styl

A UI Components Library For Vue

// media
use('../../utils/media.js')

$-white-color := #FFF
$-black-color := #000
$-font-family := PingFang SC, 'helvetica neue', arial, 'hiragino sans gb', 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif
$-size-array = mini, small, default, large

$-link-color := $-primary-color
$-link-underline := none
$-link-hover-color := palette($-link-color, -1)
$-link-hover-underline := $-link-underline
$-link-font-family := $-font-family
/******************************
                common
*******************************/
// font size
$-font-large-size := 16px
$-font-default-size := 14px
$-font-small-size := 12px
$-font-mini-size := 12px
$-font-base-size := 12px
$-font-second-size := 12px
// font color
$-text-dark-color := #262626
$-text-light-color := #4C4C4C //主要正文颜色
$-text-list-color := #778088 //列表文字颜色
$-text-regular-color := #737373 //常规文字颜色
$-text-placeholder-color := #B2B2B2 //占位文字颜色
//theme color
$-primary-color := #557DFC
$-warning-color := #FF9A42
$-danger-color := #EF4E76
$-success-color := #38C482
// theme lighter color
$-primary-lighter-color := #7797FC
$-warning-lighter-color := #FFAF6B
$-danger-lighter-color := #F3839F
$-success-lighter-color := #5FCF9B
// theme darker color
$-primary-darker-color := #4464C9
$-warning-darker-color := #E58C3E
$-danger-darker-color := #A22334
$-success-darker-color := #33A36D
// border color
$-border-base-color := #CCC //主要边框
$-split-line-color := #E5E5E5 //区域分割线
// background color
$-light-bg-color := #FFF
$-bg-base-color := #fff //基础内容背景样式
$-header-bg-color := #F3F6FB //table,title等头部背景
$-content-bg-color := #F4F7FC //内容区
// disable color
$-disabled-color := #CCC
$-disabled-bg-color := #F2F2F2
$-disabled-border-color := #CCC
// icon color
$-icon-default-color := #B2B2B2
// pend color
$-pend-color := #666
// box-shadow
$-box-shadow := 0 0 15px 0 rgba(0, 0, 0, 0.15);
// border-radius
$-border-radius := 4px
$-border-base-radius := 2px

// transition

$-transition := .25s ease-in-out

/******************************
        Spin
*******************************/

$-spin-color := $-primary-color
$-spin-width := 40px
$-spin-stroke-width := 6

// spinner size
$-spin-large-width := 48px
$-spin-default-width := 40px
$-spin-small-width := 32px
$-spin-mini-width := 24px

// font size
$-spin-large-font-size := 18px
$-spin-default-font-size := 16px
$-spin-small-font-size := 14px
$-spin-mini-font-size := 12px


/******************************
        Button
*******************************/
//btn disabled
$-button-type := 'default'
$-button-disabled-color := $-border-base-color
$-button-disabled-background-color := $-disabled-bg-color
$-button-disabled-border-color := $-disabled-border-color

$-button-default-border-color := $-border-base-color
$-button-default-background-color := #fff
$-button-default-color := $-text-light-color

$-button-default-hover-color := #557DFC
$-button-default-hover-border-color := #557DFC
$-button-default-hover-background-color := #fff
$-button-default-active-color :=  #4165D7
$-button-default-active-background-color :=  #E5ECFF
$-button-default-active-border-color :=  #557DFC

$-button-hollow-hover-color :=  #557DFC
$-button-hollow-hover-border-color :=  #557DFC
$-button-hollow-active-color :=  #4165D7

$-button-primary-hover-background-color := #7999FF
$-button-primary-hover-border-color := #7999FF
$-button-primary-active-background-color := #557DFC
$-button-primary-active-border-color := #557DFC

$-button-success-hover-background-color := #5ED79E
$-button-success-hover-border-color := #5ED79E
$-button-success-active-background-color := #39B67A
$-button-success-active-border-color := #39B67A

$-button-warning-hover-background-color := #FFAF6A
$-button-warning-hover-border-color := #FFAF6A
$-button-warning-active-background-color := #F68E35
$-button-warning-active-border-color := #F68E35

$-button-danger-hover-background-color := #FF7F91
$-button-danger-hover-border-color := #FF7F91
$-button-danger-active-background-color := #CB2C42
$-button-danger-active-border-color := #CB2C42

$-button-hollow-primary-hover-background-color := #e5edff
$-button-hollow-primary-active-background-color := #E5ECFF 
$-button-hollow-success-hover-background-color := #e5fff1
$-button-hollow-success-active-background-color := #e5fff1
$-button-hollow-warning-hover-background-color := #fff0e5
$-button-hollow-warning-active-background-color := #fff0e5
$-button-hollow-danger-hover-background-color := #ffe5ee
$-button-hollow-danger-active-background-color := #ffe5ee

//type
$-button-primary-color := $-primary-color
$-button-success-color := $-success-color
$-button-warning-color := $-warning-color
$-button-danger-color := $-danger-color
$-button-text-color := $-primary-color
$-button-none-color := $-black-color

$-button-text-hover-color := #7999FF
$-button-text-active-color := #4165D7
$-button-none-hover-color := #7999FF
$-button-none-active-color := #4165D7

// group
$-button-group-default-color := #fff
$-button-group-default-hover-color := #fff
$-button-group-default-active-color := #fff
$-button-group-active-line-color := #7999FF
$-button-group-active-color := #fff

//btn default
$-button-default-padding := 9px 16px
$-button-default-font-size := 12px

//loading
$-button-stroke-width := 6
//split
$-button-split-padding := 5px 10px

//border
$-button-border-radius := $-border-radius
$-button-border-color := $-border-base-color
$-button-default-border-style := solid
$-button-dashed-border-style := dashed
//shape
$-button-shape-round := 40px
$-button-shape-circle := 50%
//size

$-button-large-padding := 13px 24px
$-button-large-circle-padding := 12px
$-button-large-font-size := 14px
$-button-large-height := 40px

$-button-middle-padding := 9px 16px
$-button-middle-circle-padding := 8px
$-button-middle-font-size := $-font-base-size
$-button-middle-height := 32px

$-button-small-padding := 7px 12px
$-button-small-circle-padding := 6px
$-button-small-font-size := 12px
$-button-small-height := 28px

$-button-mini-padding := 5px 8px
$-button-mini-circle-padding := 4px
$-button-mini-font-size := 12px
$-button-mini-height := 24px
//icon
$-button-icon-text-gutter := 8px

$-button-loading-r := 120 - 60 - ($-button-stroke-width / 2)
$-button-loading-c := round(2 * 3.14 * $-button-loading-r)

$-button-group-line-color := #7999FF
/******************************
        Radio
*******************************/
$-radio-width := 14px

$-radio-border-color := $-border-base-color
$-radio-bg-color := #fff
$-radio-content-bg-color := $-primary-color

// text
$-radio-text-margin-left := 8px
$-radio-text-color := $-text-light-color
$-radio-text-size := $-font-small-size

// checked
$-radio-checked-border-color := $-primary-color
$-radio-inner-width := 8px
$-radio-checked-color := $-primary-color

// disabled
$-radio-disabled-color := $-disabled-color
$-radio-disabled-border-color := $-disabled-border-color
$-radio-disabled-bg-color := $-disabled-bg-color
$-radio-disabled-inner-color := $-disabled-color
/******************************
        Switch
*******************************/
$-switch-active-bg := $-primary-color
$-switch-inactive-bg := $-disabled-color // #ccc
$-switch-disabled-bg := $-disabled-bg-color  // #e5e5e5
$-switch-disabled-font-color := $-disabled-color // #a7a5a5
$-switch-font-size := 14px
$-switch-border-width := $-border-base-radius
$-switch-size-list = $-size-array

$-switch-mini-width := 24px
$-switch-small-width := 36px
$-switch-default-width := 48px
$-switch-large-width := 60px

$-switch-mini-height := 14px
$-switch-small-height := 18px
$-switch-default-height := 24px
$-switch-large-height := 30px

$-switch-mini-border-radius := $-switch-mini-height
$-switch-small-border-radius := $-switch-small-height
$-switch-default-border-radius := $-switch-default-height
$-switch-large-border-radius := $-switch-large-height


/******************************
        Input
*******************************/
$-input-color := $-text-light-color
$-input-placeholder-color := $-text-placeholder-color
$-input-default-width := 300px
$-input-border := 1px solid $-border-base-color
$-input-size-list = $-size-array
$-input-border-radius := $-border-base-radius
$-input-bg-color := $-light-bg-color
$-input-focus-border := 1px solid $-primary-color
// append && prepend
$-input-pend-color := $-pend-color
$-input-pend-padding-horizontal := 20px
$-input-prepend-radius := 2px 0 0 2px
$-input-append-radius := 0 2px 2px 0

$-input-mini-font-size := $-font-mini-size
$-input-small-font-size := $-font-small-size
$-input-default-font-size := $-font-default-size
$-input-large-font-size := $-font-large-size

$-input-mini-inner-height := 26px
$-input-small-inner-height := 28px
$-input-default-inner-height := 32px
$-input-large-inner-height := 36px

$-input-disabled-color := $-disabled-color
$-input-disabled-border-color := $-disabled-border-color
$-input-disabled-background-color := $-disabled-bg-color

$-input-mini-padding-left-right := 16px
$-input-small-padding-left-right := 16px
$-input-default-padding-left-right := 16px
$-input-large-padding-left-right := 16px

$-input-mini-prefix-padding-left := 16px
$-input-small-prefix-padding-left := 16px
$-input-default-prefix-padding-left := 36px
$-input-large-prefix-padding-left := 16px

$-input-mini-suffix-padding-right := 16px
$-input-small-suffix-padding-right := 16px
$-input-default-suffix-padding-right := 36px
$-input-large-suffix-padding-right := 16px

// 状态颜色
$-input-status-list = $-size-array
$-input-success := $-success-color
$-input-success-border := 1px solid $-success-color
$-input-warning := $-warning-color
$-input-warning-border := 1px solid $-warning-color
$-input-err := $-danger-color
$-input-err-border := 1px solid $-danger-color
$-input-clear-color := $-icon-default-color

$-input-textarea-mini-padding-top-bottom := 4px
$-input-textarea-small-padding-top-bottom := 6px
$-input-textarea-default-padding-top-bottom := 8px
$-input-textarea-large-padding-top-bottom := 10px
$-input-textarea-count-font-size := $-font-second-size
$-input-textarea-count-bottom := 6px
$-input-textarea-count-right := 10px

/******************************
        editable
*******************************/
$-editable-default-height:= $-input-default-inner-height
$-editable-small-height:= $-input-small-inner-height
$-editable-mini-height:= $-input-mini-inner-height
$-editable-large-height:= $-input-large-inner-height

$-editable-default-font-size := $-input-default-font-size
$-editable-small-font-size := $-input-small-font-size
$-editable-mini-font-size := $-input-mini-font-size
$-editable-large-font-size := $-input-large-font-size


/******************************
        checkbox
*******************************/
$-checkbox-width := 14px;
$-checkbox-height := 14px;
$-checkbox-font-size := $-font-small-size;
$-checkbox-default-border-color := $-border-base-color;
$-checkbox-default-background-color := $-light-bg-color;

$-checkbox-disabled-icon-color := $-border-base-color;
$-checkbox-disabled-border-color := $-border-base-color;
$-checkbox-disabled-background-color := $-disabled-bg-color;

$-checkbox-checked-icon-color := $-light-bg-color;
$-checkbox-checked-border-color := $-primary-color;
$-checkbox-checked-background-color := $-primary-color;

/******************************
        progress
*******************************/
$-progress-outBar-bgc := #ECECEC
$-progress-bar-marginRight := -58px
$-progress-bar-paddingRight := 50px
$-progress-text-marginLeft := 16px

/******************************
        collapse
*******************************/
$-collapse-border := 1px solid $-split-line-color;
$-collapse-active-color := $-primary-color;
$-collapse-title-background-color := #F7FAFE;
$-collapse-content-background-color := #fff;
$-collapse-title-height := 42px;
$-collapse-padding := 24px;
$-collapse-concise-content-padding := 0 34px 24px;
$-collapse-disabled-color := $-disabled-color;

/******************************
        message
*******************************/
$-message-width := 400px;
$-message-content-line-height := 1.5;
$-message-font-size := $-font-small-size;
$-message-padding := 6px 14px 6px 20px;
$-message-border-radius := $-border-radius;
$-message-transition := $-transition;

$-message-default-font-color := $-text-regular-color;
$-message-success-font-color := $-success-color;
$-message-warning-font-color := $-warning-color;
$-message-error-font-color := $-danger-color;
$-message-info-font-color := $-primary-color;

$-message-default-background-color := #F0F0F3;
$-message-success-background-color := #DBFBEC;
$-message-warning-background-color := #FFECDC;
$-message-error-background-color := #FFE8EC;
$-message-info-background-color := #E5ECFF;

$-message-default-border-color := $-message-default-background-color;
$-message-success-border-color := $-message-success-background-color;
$-message-warning-border-color := $-message-warning-background-color;
$-message-error-border-color := $-message-error-background-color;
$-message-info-border-color := $-message-info-background-color;

/******************************
        pagination
*******************************/
$-pagination-font-size := 12px
$-pagination-margin := 16px
$-pagination-margin-left := $-pagination-margin
$-pagination-margin-right := $-pagination-margin
$-pagination-text-color := $-text-light-color

$-pagination-btn-active-color := #fff
$-pagination-btn-active-border-color := $-pagination-btn-active-color
$-pagination-btn-active-bg-color := $-pagination-btn-active-color
$-pagination-input-bg-color := $-pagination-btn-active-color
$-pagination-btn-active-text-color := $-primary-color
$-pagination-limits-color := #ccc
$-pagination-limits-hover-color := $-primary-color
// goto
$-pagination-goto-width := 40px
$-pagination-goto-margin := 4px
$-pagination-goto-border-color := #d1d5de

/******************************
        steps
*******************************/
$-steps-container-background-color := $-light-bg-color  //主题色
$-steps-step-spot-done-background-color := $-primary-color
$-steps-step-spot-line-border-color := $-split-line-color
$-steps-step-spot-line-background-color := transparent
$-steps-step-spot-active-background-color := $-primary-color ;
$-steps-step-spot-default-background-color := $-split-line-color
$-steps-step-line-background-color := $-split-line-color
$-steps-step-line-active-background-color := $-primary-color;
$-steps-title-color := $-text-light-color
$-steps-title-active-color := $-text-dark-color
$-steps-description-color :=  $-text-placeholder-color
$-steps-description-active-color := $-text-light-color
$-steps-step-index-default-background-color := #fff;
$-steps-step-index-default-border-color := $-border-base-color
$-steps-step-index-default-color := $-text-regular-color
$-steps-step-simple-background-color := $-header-bg-color
$-steps-step-simple-border-color := $-bg-base-color //和主题色保持一直
$-steps-step-index-icon-color := $-border-base-color
$-steps-step-icon-active-color := $-primary-color
$-steps-step-icon-done-color := $-primary-color
// 自定义状态
$-steps-step-custom-status-wrong-border := 2px solid #ED3351
$-steps-step-custom-status-wrong-background-color := #EFCECE
$-steps-step-custom-status-wrong-color := #ED3351

$-steps-step-custom-status-wait-border := 1px solid $-border-base-color
$-steps-step-custom-status-wait-background-color := transparent
$-steps-step-custom-status-wait-color := #737373

$-steps-step-custom-status-finished-border := 2px solid $-primary-color
$-steps-step-custom-status-finished-background-color := #DBE1F5
$-steps-step-custom-status-finished-color := $-primary-color

$-steps-step-custom-status-active-border := none
$-steps-step-custom-status-active-background-color := $-primary-color;
$-steps-step-custom-status-active-color := #fff


/******************************
        breadcrumb
*******************************/
$-breadcrumb-item-text-color := $-text-light-color
$-breadcrumb-item-text-last-color := $-text-dark-color
$-breadcrumb-item-link-color := $-primary-color
$-breadcrumb-item-link-hover := $-primary-lighter-color
$-breadcrumb-item-link-active := $-primary-darker-color

/******************************
                Tabs
*******************************/
$-tabs-color-active-bar := $-primary-color
$-tabs-color-active := $-primary-color
$-tabs-color-font := $-text-light-color
$-tabs-after-backgroundColor := $-split-line-color //#e5e5e5
$-tabs-after-borderColor := $-split-line-color
$-tabs-after-borderColor-card := $-split-line-color
$-tabs-addButton-backgroundColor :=$-split-line-color//#e5e5e5
$-tabs-addButton-activeColor :=$-split-line-color//#e5e5e5
$-tabs-font-size :=$-font-default-size// 14px
$-tabs-color-background := $-white-color//#ffffff
$-tabs-card-color-background := $-white-color//#ffffff
$-tabs-color-guanbi := #C0C7CC
$-tabs-after-backgroundColor := #e5e5e5
$-tabs-after-borderColor := #e5e5e5
$-tabs-after-borderColor-card := #e5e5e5
$-tabs-after-disabledColor := $-border-base-color

$-tabs-large-backgroundColor := #F0F0F3
$-tabs-card-backgroundColor := #F3F4F7
$-tabs-card-background := #F3F4F7
$-tabs-after-width :=100%
$-tabs-border-width := 1px
$-tabs-user-select :=none

$-tabs-super-card-background-color := #F1F2F5
/******************************
                Drawer
*******************************/
$-drawer-active-color := $-primary-darker-color//#4464c9
$-drawer-hover-color := $-primary-lighter-color //#7797FC
$-drawer-trueButton-backgroundColor :=$-primary-color// #557DFC
$-drawer-txt-color :=$-text-dark-color// #262626
$-drawer-overlay-backgroundColor := $-black-color//#000
$-drawer-mian-backgroundColor := $-white-color//#ffffff
$-drawer-trueButton-fontColor :=$-white-color// #fff
$-drawer-closeButton-backgroundColor :=$-white-color// #fff
$-drawer-closeButton-borderColor :=$-border-base-color// #ccc

$-drawer-titleBorder-color :=$-split-line-color// #E5E5E5
$-drawer-titleIcon-color := $-border-base-color//#ccc
$-drawer-footerBorder-color := $-split-line-color//#E5E5E5

$-drawer-main-width := 100%
$-drawer-main-height := 100%

$-drawer-animation-time := .5s
/******************************
        Dialog
*******************************/
$-dialog-background-color := $-light-bg-color
$-dialog-header-background-color := $-light-bg-color
$-dialog-line-color := $-split-line-color
$-dialog-title-color := $-text-dark-color
$-dialog-body-color := $-text-light-color
$-dialog-icon-title-color := #404040
$-dialog-message-color := $-text-regular-color
$-dialog-confirm-title-color := $-text-dark-color
$-dialog-confirm-tips-color := $-text-regular-color
$-dialog-tips-title-color := #404040
$-dialog-tips-message-color := $-text-regular-color
$-dialog-scrollbar-background-color := $-light-bg-color
$-dialog-scrollbar-thumb-color := $-border-base-color

/******************************
        spinner
*******************************/
//$-spinnter-border-color := $-border-base-color
$-spinner-disable-background := #f2f2f2
$-spinner-disable-color := #ccc
$-spinner-primary-color := $-primary-color
$-spinner-fill-bg := #fff
$-spinner-input-padding := 8

$-spinner-large-width := 160
$-spinner-default-width := 130
$-spinner-small-width := 100
$-spinner-mini-width := 85

$-spinner-large-input-padding := 10
$-spinner-default-input-padding := 8
$-spinner-small-input-padding := 6
$-spinner-mini-input-padding := 4

$-spinner-btn-large-height := 36
$-spinner-btn-default-height := 32
$-spinner-btn-small-height := 28
$-spinner-btn-mini-height := 26
$-spinner-border-color := $-border-base-color

/******************************
        slider
*******************************/
$-slider-height ?= 4px
$-slider-bg-color ?= #ECECEC
$-slider-bar-color ?= #557DFC

$-slider-border-radius ?= 100px
$-slider-handle-height ?= 8px
$-slider-handle-width ?= $-slider-handle-height
$-slider-handle-border ?= 2px solid $-slider-bar-color
$-slider-handle-border-radius ?= 50%
$-slider-handle-bg-color ?= #fff
$-slider-handle-hover-transform ?= scale(1.5)
$-slider-handle-hover-bg-color ?= $-slider-bar-color
$-slider-handle-disabled-bg-color ?= #fff

$-slider-disabled-color = #999
$-slider-disabled-bg-color = #f7f7f7
// stop point
$-slider-stop-point-width ?= $-slider-height
$-slider-stop-point-height ?= $-slider-stop-point-width
// marks
$-slider-marks-height ?= 20px
$-slider-marks-margin-top ?= 10px
// other
$-slider-range-input-width ?= 146px
$-slider-input-width ?= 80px

/******************************
        tree
*******************************/
$-tree-node-bg-color ?= #f5f5f5

/******************************
        Dropdown
*******************************/
$-dropdown-menu-color := #404040
$-dropdown-menu-bg := $-white-color
$-dropdown-menu-padding := 8px 0
$-dropdown-menu-margin := 5px 0

//item
$-dropdown-item-disabled-bg := $-disabled-color
$-dropdown-item-hover-bg := #F3F4F7
$-dropdown-item-dividedLine := #ccc
$-dropdown-item-disabled-hover := $-white-color

/******************************
        transfer
*******************************/
$-transfer-base-color := $-text-light-color
$-transfer-radius := $-border-radius
$-transfer-header-bg := $-header-bg-color
$-transfer-width := 198
$-transfer-row-height := 39
$-transfer-row-padding := 0 15px
$-transfer-filter-margin := 10px 15px
$-transfer-content-height := 290px
$-transfer-items-height := 32px
$-transfer-items-padding := 0 15px
$-tarnsfer-serach-width := 100%
$-transfer-btn-padding := 0 30px
$-transfer-btn-margin-left := 10px
$-transfer-btn-vertical-mr := 10px 0 0
$-transfer-footer-btn-padding := 4px 15px
$-transfer-footer-btn-margin := 15px
/******************************
        select
*******************************/
$-select-height-large := 36px;
$-select-height-default := 32px;
$-select-height-small := 28px;
$-select-height-mini := 26px;

$-select-margin-large := 5px 0 5px 8px
$-select-margin-default := 5px 0 5px 8px
$-select-margin-small := 3px 0 3px 8px
$-select-margin-mini := 2px 0 2px 8px

$-select-radius := 4px
$-select-base-color := #404040
$-select-bg := #fff
$-select-input-color := #B2B2B2
$-select-border-hover := #ccc
$-select-active-color :=  #557DFC
$-select-disabled-color := #F3F4F7
$-select-disabled-bg := #F3F4F7
$-select-menu-bg := #fff
$-select-menu-color := #404040
$-select-group-color := #B2B2B2
$-select-tag-bg := #F1F1F5

$-select-tag-close-bg := #ccc
$-select-tag-close-color := #fff

$-select-data-color := #ccc

$-select-item-hover-bg := #F3F4F7
$-select-item-text-color :=  #404040

$-select-option-disabled-bg := #F2F2F2
$-select-option-disabled-color := #ccc
/******************************
        Upload
*******************************/
$-upload-drag-bg := #fff
$-upload-drag-icon := #ccc
$-upload-drag-tip-color := #666
$-upload-default-text := #404040
$-upload-success-color := $-success-color
$-upload-error-color := $-warning-color
$-upload-primary-color := $-primary-color
$-upload-border-radius := $-border-radius
$-upload-border-color := $-border-base-color

$-upload-tip-color := $-text-placeholder-color
$-upload-border-color := #ccc
$-upload-progress-top := 28px
$-upload-progress-text-top := -28px

/******************************
        tooltip
*******************************/
// tooltip base
$-tooltip-font-size-base ?= 12px
$-tooltip-line-height-base ?= 1.5
$-tooltip-border-radius-base ?= 4px
$-tooltip-shadow-color ?= rgba(0, 0, 0, 0.15)
$-tooltip-box-shadow-base ?= 0 0 15px 0 $-tooltip-shadow-color
$-tooltip-max-width ?= calc(240px - 14px - 14px)
$-tooltip-arrow-width ?= 5px
$-tooltip-distance ?= $-tooltip-arrow-width - 1px + 4px
// effect
$-tooltip-theme = 'dark' 'light'
$-tooltip-light-bg ?= #fff
$-tooltip-light-color ?= #737373
$-tooltip-dark-bg ?= #2C324D
$-tooltip-dark-color ?= #fff

/******************************
        popover
*******************************/
$-popover-content-light-color ?= #737373
$-popover-titleline-light-color ?= #E5E5E5
$-popover-content-dark-color ?= #8D919B
$-popover-titleline-dark-color ?= #414760

/******************************
        Datepicker
*******************************/
$-datepicker-bg-color := $-white-color // 亮色背景色
$-datepicker-disabled-color := $-border-base-color
$-datepicker-disabled-bg-color := $-disabled-bg-color
$-datepicker-disabled-border-color := $-disabled-border-color
$-datepicker-icon-color := $-icon-default-color
$-datepicker-header-text-default-color := #262626
$-datepicker-day-text-default-color := #404040
$-datepicker-day-blue-color := #557DFC

// 日历日期状态颜色
$-datepicker-day-hover-bg-color := #557DFC
$-datepicker-day-hover-color := $-white-color
$-datepicker-day-in-range-bg-color := #E5ECFF
$-datepicker-day-selected-bg-color := #557DFC
$-datepicker-day-selected-color := $-white-color
$-datepicker-day-disMonth-bg-color := $-white-color
$-datepicker-day-disMonth-color := #CCC
$-datepicker-day-disabled-bg-color := #f7f8fa
$-datepicker-day-disabled-color := #4c4c4c

/******************************
                ScrollSelect
*******************************/

$-scrollselect-height := unit(210 / 14, rem)
$-scrollselect-item-height := unit(30 / 14, rem)
$-scrollselect-item-color := $-text-light-color
$-scrollselect-item-active-color := $-scrollselect-active-color
$-scrollselect-item-active-font-weight := 700
$-scrollselect-item-disabled-color := $-scrollselect-disabled-color

$-scrollselect-border := 1px solid #e5e5e5
$-scrollselect-active-color := #318EFA // blue
$-scrollselect-disabled-color := #999
$-scrollseelect-transition := .25s ease-in-out


/******************************
                TimePicker
*******************************/
$-timepicker-time-active-color := $-primary-color
$-timepicker-time-disabled-color := #CCCCCC
$-timepicker-item-hover-bg-color := #F3F4F7

/******************************
                Menu
*******************************/
$-menu-horizontal-background := none
$-menu-item-horizontal-height := 32px
$-menu-item-vertical-height := 44px
$-menu-item-horizontal-line-height := $-menu-item-horizontal-height
$-menu-item-vertical-line-height := $-menu-item-vertical-height
$-menu-item-border-radius := 4px
$-menu-item-font-size := $-font-small-size
$-menu-item-height-horizontal := $-menu-item-horizontal-height
$-menu-item-height-vertical := $-menu-item-vertical-height

$-menu-disabled-color := $-disabled-color

$-menu-item-group-title-font-size := $-font-small-size
$-menu-item-group-title-color:= $-text-list-color

$-menu-item-group-title-horizontal-line-height := $-menu-item-horizontal-height
$-menu-item-group-title-vertical-line-height := $-menu-item-vertical-height

$-menu-item-title-horizontal-height := 68px
$-menu-item-title-horizontal-padding := 24px
$-menu-item-title-horizontal-font-size := 14px
$-menu-item-active-background := $-primary-color
$-menu-item-active-background-image := none
$-menu-item-color := #778088
$-menu-item-active-color := #fff
$-menu-item-horizontal-active-background := #fff
$-menu-item-horizontal-active-background-image := none
$-menu-item-horizontal-active-color := $-primary-color

$-menu-submenu-popper-content-width := 200px
$-menu-submenu-popper-content-background := #fff
$-menu-submenu-popper-content-color := #778088
$-menu-submenu-popper-horizontal-content-width := 200px
/******************************
                DateTimePicker
*******************************/
$-datetimepicker-bg-color := $-white-color
$-datetimepicker-icon-color := $-icon-default-color
$-datetimepicker-box-shadow := $-box-shadow

$-datetimepicker-scroll-select-height := unit(220 / 14, rem)

$-datetimepicker-tab-text-color := $-text-light-color
$-datetimepicker-tab-default-color := $-white-color
$-datetimepicker-tab-not-active-color := #F1F1F5

$-datetimepicker-sidebar-font-size := $-font-base-size;


/******************************
   Skeleton
*******************************/

$-skeleton-bg-color := #f2f2f2;
$-skeleton-item-img-color := #bfbfbf;
$-skeleton-active-color := linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);
$-skeleton-round-borderRadius := 100%
$-skeleton-other-borderRadius := 10px


/******************************
   Cascader
*******************************/

$-cascader-default-width := 300px
$-cascader-border-color := $-border-base-color
$-cascader-bg-color := #fff
$-cascader-input-color := #B2B2B2
$-cascader-disabled-bg := #F3F4F7
$-cascader-disabled-text := #ccc
$-cascader-active-color := #557DFC
$-cascader-node-bg-color := #F3F4F7

/******************************
   Tag
*******************************/
$-tag-background-color := #fff;
$-tag-border-color := #B2B2B2;
$-tag-color := #404040;

$-tag-success-background-color := #DBFBEC;
$-tag-success-border-color := #39B67A;
$-tag-success-color := #39B67A;

$-tag-info-background-color := #E5ECFF;
$-tag-info-border-color := #4165D7;
$-tag-info-color := #4165D7;

$-tag-warning-background-color := #FFECDC;
$-tag-warning-border-color := #F68E35;
$-tag-warning-color := #F68E35;

$-tag-danger-background-color := #FFE8EC;
$-tag-danger-border-color := #CB2C42;
$-tag-danger-color := #CB2C42;

$-tag-disabled-background-color := #F2F2F2;
$-tag-disabled-border-color := #ccc;
$-tag-disabled-color := #ccc;

$-tag-solid-success-background-color := #39B67A;
$-tag-solid-info-background-color :=  #4165D7;
$-tag-solid-warning-background-color := #F68E35;
$-tag-solid-danger-background-color := #CB2C42;
$-tag-solid-color := #fff;

$-tag-large-padding := 8px 18px
$-tag-small-padding := 5px 13px

/******************************
        table
*******************************/
$-table-border-color := #edeff4;
$-table-head-background-color := #f7f8fa;
$-table-head-font-size := 14px;
$-table-head-th-padding := 7px 6px;
$-table-color := #343957;
$-table-font-size := 12px;
$-table-guide-color := rgba(0,0,0,.2);
$-table-td-padding := 15px 6px;
$-table-tr-disabled := #efefef;