kingdot/src/styles/theme/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 := #FFF
$-text-light-color := #8D919B //主要正文颜色
$-text-list-color := #8D919B //列表文字颜色
$-text-regular-color := #FFFFFF //常规文字颜色
$-text-placeholder-color := #8D919B //占位文字颜色
//theme color
$-primary-linear-color := linear-gradient(180deg, #F8334C 0%, #4E284D 91%)
$-primary-color := #5399FF
$-warning-color := #FF9A42
$-danger-color := #ED3351
$-success-color := #38C482
// theme lighter color
$-primary-lighter-linear-color := linear-gradient(180deg, #E946E5 0%, #5F3D5E 91%)
$-primary-lighter-color := #75ADFF
$-warning-lighter-color := #FFAF6B
$-danger-lighter-color := #F05B73
$-success-lighter-color := #5FCF9B
// theme darker color
$-primary-lighter-linear-color := linear-gradient(180deg, #B8273C 0%, #3D1F3C 91%)
$-primary-darker-color := #427ACC
$-warning-darker-color := #E58C3E
$-danger-darker-color := #BD2840
$-success-darker-color := #33A36D
// border color
$-border-base-color := #525C77 //主要边框
$-split-line-color := #2F374F //区域分割线
// background color
$-light-bg-color := #2C314E
$-bg-base-color := #2C314E //基础内容背景样式
$-header-bg-color := #2C324D //table,title等头部背景
$-content-bg-color := #1E253D //内容区
// disable color
$-disabled-color := #4F576E
$-disabled-bg-color := #222A41
$-disabled-border-color := #2F374F
// icon color
$-icon-default-color := #4F576E
// pend color
$-pend-color := #FFF
// box-shadow
$-box-shadow := none
// border-radius
$-border-radius := 4px
$-border-base-radius := 2px

// transition

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

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

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

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

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


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

$-button-default-border-color := #525C77
$-button-default-background-color := rgb(26,34,54)
$-button-default-color := $-white-color

$-button-default-hover-color := $-white-color
$-button-default-hover-background-color := #3D4660
$-button-default-hover-border-color := #525C77

$-button-default-active-color :=  #4165D7
$-button-default-active-background-color :=  #38425E
$-button-default-active-border-color :=  #525C77

$-button-hollow-hover-color := $-white-color
$-button-hollow-hover-border-color := #525C77
$-button-hollow-active-color := $-white-color

$-button-primary-hover-background := linear-gradient(180deg, #E8465D 0%, #603D5F 100%)
$-button-primary-hover-border-color := $-border-base-color
$-button-primary-active-background-color := linear-gradient(180deg, #B8283C 0%, #3E203D 100%)
$-button-primary-active-border-color := $-border-base-color

$-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 := $-button-primary-hover-background
$-button-hollow-primary-active-background-color := $-button-primary-active-background-color
$-button-hollow-success-hover-background-color := #e5fff1
$-button-hollow-success-active-background-color := #38C482
$-button-hollow-warning-hover-background-color := #fff0e5
$-button-hollow-warning-active-background-color := #e5fff1
$-button-hollow-danger-hover-background-color := #ffe5ee
$-button-hollow-danger-active-background-color := #EF4E76

//type
$-button-primary-color := linear-gradient(180deg, #F8334C 0%, #4E284D 91%)
$-button-primary-border-color := transparent
$-button-success-color := $-success-color
$-button-warning-color := $-warning-color
$-button-danger-color := $-danger-color
$-button-text-color := $-primary-color
$-button-none-color := #fff

$-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 := #525C77
$-button-group-default-hover-color := $-button-primary-hover-background
$-button-group-default-active-color := $-button-primary-active-background-color
$-button-group-active-line-color := $-button-primary-active-background-color
$-button-group-active-color := #fff
//btn default
$-button-default-padding := 9px 16px
$-button-default-font-size := 12px

$-button-text-hover-color := $-primary-color
$-button-none-hover-color := $-primary-color
//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-paddingg := 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 := linear-gradient(180deg, #E8465D 0%, #603D5F 100%)
/******************************
        Radio
*******************************/
$-radio-width := 14px

$-radio-border-color := #525C77
$-radio-bg-color := #222A41
$-radio-content-bg-color := #fff

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

// checked
$-radio-checked-border-color := $-radio-border-color
$-radio-inner-width := 8px
$-radio-checked-color := #2F374F

// disabled
$-radio-disabled-color := #4f566d
$-radio-disabled-border-color := #4f566d
$-radio-disabled-bg-color := #222A41
$-radio-disabled-inner-color := #4f566d
/******************************
        Switch
*******************************/
$-switch-active-bg := $-primary-linear-color
$-switch-inactive-bg := $-disabled-color // #ccc
$-switch-disabled-bg := $-disabled-bg-color  // #e5e5e5
$-switch-disabled-font-color := $-disabled-color // #a7a5a5
$-switch-font-size := $-font-default-size
$-switch-border-width := 2px
$-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


/******************************
        Switch
*******************************/
$-switch-active-bg := $-primary-lighter-linear-color
$-switch-inactive-bg := #525C77
$-switch-disabled-bg := $-disabled-bg-color
$-switch-disabled-font-color := $-disabled-color
$-switch-font-size := $-font-base-size
$-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

$-textarea-default-padding-top-bottom := 8px
$-textarea-count-font-size := $-font-second-size
$-textarea-count-bottom := 6px
$-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-default-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 := $-disabled-border-color;
$-checkbox-disabled-background-color := $-disabled-bg-color;

$-checkbox-checked-icon-color := $-pend-color;
$-checkbox-checked-border-color := $-icon-default-color;
$-checkbox-checked-background-color := $-icon-default-color;

/******************************
        collapse
*******************************/
$-collapse-border := 1px solid $-split-line-color;
$-collapse-active-color := $-primary-color;
$-collapse-title-background-color := #2C324D;
$-collapse-content-background-color := $-disabled-bg-color;
$-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 := #373F57;
$-message-success-background-color := #274E4D;
$-message-warning-background-color := #654526;
$-message-error-background-color := #552B39;
$-message-info-background-color := #2E3A5F;

$-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;

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

$-pagination-btn-active-color := none
$-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 := $-danger-color
$-pagination-limits-color := #ccc
$-pagination-limits-hover-color := $-primary-linear-color

// goto
$-pagination-goto-width := 40px
$-pagination-goto-margin := 4px
$-pagination-goto-border-color := #525C77

/******************************
        steps
*******************************/
$-steps-container-background-color := $-disabled-bg-color //主题色
$-steps-step-spot-done-background-color := $-danger-color
$-steps-step-spot-line-border-color := $-danger-color
$-steps-step-spot-line-background-color := transparent
$-steps-step-spot-active-background-color := $-danger-color;
$-steps-step-spot-default-background-color := $-border-base-color
$-steps-step-line-background-color := $-border-base-color
$-steps-step-line-active-background-color := $-danger-color;
$-steps-title-color := $-text-dark-color
$-steps-title-active-color := $-text-dark-color
$-steps-description-color :=  $-text-light-color
$-steps-description-active-color := $-text-light-color
$-steps-step-index-default-background-color := $-disabled-bg-color;
$-steps-step-index-default-border-color := $-border-base-color
$-steps-step-index-default-color := $-text-dark-color

$-steps-step-simple-background-color := $-header-bg-color
$-steps-step-simple-border-color := $-disabled-bg-color //和主题色保持一直
$-steps-step-index-icon-color := $-border-base-color
$-steps-step-icon-active-color := $-danger-color
$-steps-step-icon-done-color := $-danger-color
// 自定义状态
$-steps-step-custom-status-wrong-border := none
$-steps-step-custom-status-wrong-background-color := $-primary-linear-color
$-steps-step-custom-status-wrong-color := $-text-dark-color

$-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 := $-text-dark-color

$-steps-step-custom-status-finished-border := none
$-steps-step-custom-status-finished-background-color := $-primary-linear-color
$-steps-step-custom-status-finished-color := $-text-dark-color

$-steps-step-custom-status-active-border := transparent
$-steps-step-custom-status-active-background-color := $-primary-linear-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 :=$-danger-color// #ED3351
$-tabs-color-active := #ffffff
$-tabs-large-backgroundColor-active := #252D45
$-tabs-card-color-background :=$-primary-linear-color//linear-gradient(180deg, #F8334C 0%, #4E284D 91%)
$-tabs-color-background := #222A41
$-kd-add-tab :=#2d354d
$-tabs-color-font := $-text-light-color//#8D919B

$-tabs-after-backgroundColor :=$-split-line-color// #2F374F;

$-tabs-color-guanbi := #C0C7CC

$-tabs-after-borderColor := transparent
$-tabs-after-disabledColor := $-disabled-color//#4F576E
$-tabs-large-backgroundColor := #2D354D
$-tabs-card-backgroundColor := #F3F4F7
$-tabs-card-background := #222a41
$-tabs-after-borderColor-card :=$-border-base-color//#525c77

$-tabs-font-size := 14px

$-tabs-after-width :=100%
$-tabs-border-width := 1px

$-tabs-user-select :=none

/******************************
          Drawer
*******************************/
$-drawer-position = top , bottom , left , right

$-drawer-active-color := #4464c9
$-drawer-hover-color := #7797FC
$-drawer-mian-backgroundColor := #222A41

$-drawer-trueButton-backgroundColor := $-primary-linear-color// linear-gradient(180deg, #F8334C 0%, #4E284D 91%)
$-drawer-trueButton-fontColor := $-text-regular-color//#fff
$-drawer-closeButton-backgroundColor := #222A41
$-drawer-closeButton-borderColor := #525C77
$-drawer-closeButton-fontColor :=$-text-regular-color//#ffffff

$-drawer-overlay-backgroundColor := #000
$-drawer-titleBorder-color := #2C314E
$-drawer-title-backgroundColor := $-light-bg-color//#2C314E

$-drawer-titleIcon-color := #ccc
$-drawer-footerBorder-color := $-split-line-color//#2F374F
$-drawer-txt-color := $-text-regular-color//#ffffff

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

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

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

/******************************
        spinner
*******************************/

$-spinner-fill-bg := #2c314e
$-spinner-border-color := $-border-base-color
$-spinner-disable-background := #222A41
$-spinner-disable-color := #2f374f
$-spinner-primary-color := $-primary-color
$-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

/******************************
        slider
*******************************/
$-slider-height ?= 4px
$-slider-bg-color ?= #2F374F
$-slider-bar-color ?= #ED3351

$-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 ?= #2c324e

/******************************
        transfer
*******************************/
$-transfer-base-color :=  #FFF
$-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

/******************************
        Dropdown
*******************************/

$-dropdown-menu-bg := #2C324D
$-dropdown-color := #2C324D
$-dropdown-menu-color := #fff
$-dropdown-menu-padding := 8px 0
$-dropdown-menu-margin := 5px 0

//item
$-dropdown-item-disabled-bg := $-disabled-color
$-dropdown-item-hover-bg := #3E4564
$-dropdown-item-dividedLine := #ccc
$-dropdown-item-disabled-hover := #3E4564

/******************************
        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-bg := #222A41
$-select-base-color := #fff
$-select-menu-bg := #2C324D
$-select-menu-color := #fff
$-select-input-color := #8d919b
$-select-border-hover := #8d919b
$-select-active-color :=  #557DFC
$-select-disabled-color := #2F374F
$-select-disabled-bg := #2F374F

$-select-item-hover-bg := #3E4564
$-select-group-color := #B2B2B2
$-select-tag-bg :=  #525C77

$-select-tag-close-bg := #ccc
$-select-tag-close-color := #828DAC
$-select-item-text-color := #fff
$-select-data-color := #ccc
$-select-option-disabled-bg := #2c324d
$-select-option-disabled-color := #4F576E
/******************************
        Upload
*******************************/
$-upload-drag-bg := #252D45
$-upload-drag-icon := #4f596e
$-upload-default-text := #404040
$-upload-drag-tip-color := #fff
$-upload-text-hover-color := $-content-bg-hover-color
$-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

/******************************
        Datapicker
*******************************/
$-datepicker-bg-color := #2c324d // 暗色
$-datepicker-disabled-color := $-border-base-color
$-datepicker-disabled-border-color := $-disabled-border-color
$-datepicker-icon-color := $-icon-default-color
$-datepicker-day-blue-color := #557DFC

// 日历日期状态颜色 暗色主题  #2c314e
$-datepicker-day-hover-bg-color := linear-gradient(180deg, #F8334C 0%, #4E284D 91%)
$-datepicker-day-hover-color := $-white-color
$-datepicker-day-in-range-bg-color := #3D4660
$-datepicker-day-selected-bg-color := linear-gradient(180deg, #F8334C 0%, #4E284D 91%)
$-datepicker-day-selected-color := $-text-dark-color
$-datepicker-day-disMonth-bg-color := #2c314e
$-datepicker-day-disMonth-color := #CCC
$-datepicker-day-disabled-bg-color := #2c314e
$-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



/******************************
            TimePicker
*******************************/
// $-datepicker-day-selected-bg-color := linear-gradient(180deg, #F8334C 0%, #4E284D 91%)
// $-datepicker-day-selected-color := $-text-dark-color
// 容器的暗色底色
// $-timepicker-bg-color := #2c324d // 暗色
$-timepicker-time-active-color := $-primary-color
$-timepicker-time-disabled-color := #CCCCCC
$-timepicker-item-hover-bg-color := #F3F4F7

/******************************
                Menu
*******************************/
$-menu-horizontal-background := #252D45
$-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 := none
$-menu-item-active-background-image := linear-gradient(90deg, #F8334C 0%, #4E284D 100%);
$-menu-item-active-color := #fff
$-menu-item-horizontal-active-background := none
$-menu-item-horizontal-active-background-image := none
$-menu-item-horizontal-active-color := #fff

$-menu-submenu-popper-content-width := 200px
$-menu-submenu-popper-content-background := #2C324D
$-menu-submenu-popper-content-color := #fff
$-menu-submenu-popper-horizontal-content-width := 200px
/******************************
            DateTimePicker
*******************************/
$-datetimepicker-bg-color := #2c324d // 暗色 bgcolor
$-datetimepicker-icon-color := $-icon-default-color
$-datetimepicker-box-shadow := $-box-shadow

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

$-datetimepicker-tab-text-color := $-text-dark-color
$-datetimepicker-tab-default-color := linear-gradient(180deg, #f8334c 0%, #4e284d 100%);
$-datetimepicker-tab-not-active-color := #2c324d // 暗色

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


/******************************
        Tag
*******************************/
$-tag-background-color := #222A41;
$-tag-border-color := #525C77;
$-tag-color := #fff

$-tag-success-background-color := #224140;
$-tag-success-border-color := #33A36D;
$-tag-success-color :=  #39B67A;

$-tag-info-background-color := #222A41;
$-tag-info-border-color := #427ACC;
$-tag-info-color := #5399FF;

$-tag-warning-background-color := #413D22;
$-tag-warning-border-color := #E0873B;
$-tag-warning-color := #F68E35;

$-tag-danger-background-color := #46242F;
$-tag-danger-border-color := #BD2840;
$-tag-danger-color := #ED3351;

$-tag-disabled-background-color := #222A41;
$-tag-disabled-border-color := #2F374F;
$-tag-disabled-color := #4F576E;

$-tag-solid-success-background-color := #33A36D;
$-tag-solid-info-background-color :=  #427ACC;
$-tag-solid-warning-background-color := #E0873B;
$-tag-solid-danger-background-color := #BD2840;
$-tag-solid-color := #fff;

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