/*
 * components
 */

// button
button-primary-fill = color-primary
button-primary-fill-disabled = color-bg-disabled
button-primary-fill-tap = color-bg-tap
button-primary-width = 100%
button-primary-height = 100px
button-primary-font-size = 32px
button-primary-font-weight = font-weight-medium
button-primary-radius = radius-normal

button-ghost-fill = color-bg-base
button-ghost-fill-tap = color-bg-tap
button-ghost-primary-fill-tap = color-bg-tap-highlight
button-ghost-width = 160px
button-ghost-height = 60px
button-ghost-width-sm = 130px
button-ghost-height-sm = 50px
button-ghost-font-size = 24px
button-ghost-color = color-border-element
button-ghost-primary-color = color-primary
button-ghost-radius = 8px

button-link-fill = color-bg-base
button-link-fill-tap = color-bg-tap
button-link-width = 100%
button-link-height = 100px
button-link-color = color-primary-tap
button-link-border = color-border-base

button-icon-gap = h-gap-sm
button-disabled-opacity = opacity-disabled

// icon
icon-size-xs = 20px
icon-size-sm = 24px
icon-size-md = 32px
icon-size-lg = 42px

// action-bar
action-bar-width = 100%
action-bar-height = 100px
action-bar-button-font-size = 32px
action-bar-button-font-weight = font-weight-medium
action-bar-button-disabled-opacity = opacity-disabled
action-bar-button-disabled-bg = color-bg-disabled
action-bar-button-disabled-color = color-text-base-inverse
action-bar-button-tap-bg = color-bg-tap
action-bar-button-color = color-text-base
action-bar-button-color-highlight = color-text-base-inverse
action-bar-button-fill = color-bg-base
action-bar-button-fill-highlight = color-primary
action-bar-text-color = color-primary
action-bar-text-font-size = 36px
action-bar-text-left = h-gap-lg
action-bar-shadow = shadow-top
action-bar-zindex = 100

// notice-bar
notice-bar-fill = #4A4C5B
notice-bar-color = color-text-base-inverse
notice-bar-zindex = 1300

// stepper
stepper-fill = color-primary-background
stepper-disabled-opacity = opacity-disabled
stepper-color = color-text-base
stepper-font-size = font-body-large
stepper-input-font-size = font-body-normal
stepper-height = 50px
stepper-width-button = 54px
stepper-width-input = 68px
stepper-radius-button = 0 0 0 0
stepper-radius-input = 0 0 0 0

// steps
steps-color = #ccc
steps-color-active = color-primary
steps-border = dotted 2px #ccc
steps-border-active = solid 2px #ccc
steps-size = 12px // icon size
steps-size-active = 32px
steps-text-color = color-text-base
steps-text-font-size = font-minor-large

// tabs
tab-color = color-primary-tap
tab-font-size = font-body-normal
tab-text-color = color-text-base
tab-bg = color-bg-base
tab-border-color = color-border-minor
tab-height = 80px
tab-ink-bar-height = 3px
tab-zindex = 101

// tag
tag-color = color-primary
tag-fillet-radius = radius-normal
tag-large-font-size = font-body-normal
tag-small-font-size = font-minor-normal
tag-tiny-font-size = 12px

// field
field-padding = h-gap-lg
field-padding-h = 32px
field-padding-v = 29px
field-title-color = color-text-base
field-title-font-size = font-body-normal
field-title-font-weight = font-weight-medium
field-title-margin = 26px
field-item-padding-v = 22px
field-item-bg-color = color-bg-base
field-item-bg-tap-color = color-bg-tap
field-item-color = color-text-base
field-item-font-size = font-body-normal
field-item-icon-color = #ccc
field-item-border-color = color-border-minor
field-item-color-disabled = opacity-disabled
field-item-brief-font-size = font-minor-large
field-item-brief-color = color-text-caption

// input-item
input-item-height = 100px
input-item-title-width = 170px
input-item-title-gap = 22px
input-item-font-size = font-body-normal
input-item-title-latent-font-size = 26px
input-item-font-size-large = 42px
input-item-font-size-error = 22px
input-item-font-weight = font-weight-normal
input-item-color = color-text-base
input-item-title-latent-color = #666
input-item-color-disabled = opacity-disabled
input-item-color-error = #FF525D
input-item-placeholder = color-text-placeholder
input-item-placeholder-highlight = color-primary
input-item-icon = color-text-placeholder // delete icon

// radio
radio-fill = color-primary-tap

// switch
switch-fill = color-primary
switch-fill-inverse = color-bg-disabled
switch-handle-color = #FFF
switch-item-color-disabled = opacity-disabled

// agree
agree-fill = color-primary
agree-fill-inverse = color-bg-disabled
agree-disabled-opacity = opacity-disabled

// action-sheet
action-sheet-height = 120px
action-sheet-color = color-text-base
action-sheet-color-highlight = color-primary
action-sheet-color-cancel = color-text-base
action-sheet-font-size = 30px
action-sheet-bg = color-bg-base
action-sheet-disabled-opacity = opacity-disabled
action-sheet-cancel-gap-bg = color-primary-background
action-sheet-zindex = 1101

// picker
picker-font-size = font-body-large
picker-disabled-opacity = .2
picker-color = color-text-base
picker-zindex = 1100

// selector
selector-height= 100px
selector-disabled-opacity = .2
selector-font-size = 30px
selector-color = color-text-base
selector-active-color = color-primary
selector-zindex = 1102

// dialog
dialog-width = 534px
dialog-radius = 0
dialog-title-font-size = font-heading-normal
dialog-title-color = color-text-base
dialog-text-font-size = font-body-normal
dialog-text-color = color-text-minor
dialog-action-height = 100px
dialog-action-font-size = font-heading-normal
dialog-action-border-color = color-border-base
dialog-close-color = color-text-caption
dialog-action-highlight-color = color-primary
dialog-icon-size = 100px
dialog-icon-fill = color-text-caption
dialog-zindex = 1402

// toast
toast-fill = rgba(0, 0, 0, .8)
toast-font-size = font-body-normal
toast-color = #ccc
toast-radius = radius-normal
toast-text-left = 88px
toast-gap = 26px
toast-zindex = 1501

// tip
tip-fill = rgba(74, 76, 91, 0.8)
tip-font-size = font-minor-large
tip-color = color-text-base-inverse
tip-radius = radius-normal
tip-gap = 20px 50px 20px 30px
tip-close-size = 16px
tip-zindex = 1300

// captcha
captcha-zindex = 1400
captcha-title-color = color-text-base
captcha-title-font-size = font-heading-normal
captcha-error-color = #FF525D
captcha-countbtn-gap = h-gap-lg

// codebox
codebox-font-size = font-body-normal
codebox-width = 80px
codebox-gutter = 8px
codebox-border-color = color-border-base
codebox-border-active-color = color-primary
codebox-blink-color = color-primary
codebox-input-height = 68px
codebox-input-padding = 16px 32px
codebox-input-font-size = font-body-normal
codebox-input-border-color = color-border-base
codebox-input-radius = radius-normal
codebox-dot-color = #000

// chart
chart-line-color = #ccc
chart-path-color = color-primary
chart-text-color = color-text-minor
chart-label-size = 22px
chart-value-size = 20px

// popup
popup-title-bar-bg = color-bg-base
popup-title-bar-border-color = color-border-base
popup-title-bar-height = 110px
popup-title-bar-font-size-button = font-body-normal
popup-title-bar-font-size-title = font-heading-medium
popup-title-bar-color-title = color-text-base
popup-title-bar-color-button-left = color-text-minor
popup-title-bar-color-button-right = color-text-highlight
popup-mask-bg = rgba(0, 0, 0, .4)
popup-zindex = 1000

// drop-menu
drop-menu-height = 82px
drop-menu-zindex = 1200
drop-menu-bar-bg = color-bg-base
drop-menu-bar-border-color = color-border-base
drop-menu-list-bg = color-bg-base
drop-menu-color = color-text-link
drop-menu-font-size = font-body-normal
drop-menu-disabled-opacity = opacity-disabled

// number-keyboard
number-keyboard-width = 100%
number-keyboard-height = 428px
number-keyboard-key-height = 107px
number-keyboard-key-bg = #ebebeb
number-keyboard-key-bg-tap = #f0f0f0
number-keyboard-key-confirm-bg = color-primary
number-keyboard-key-confirm-bg-tap = #DD7F49
number-keyboard-key-font-size = 48px
number-keyboard-key-color = color-text-minor
number-keyboard-key-color-simple = #000
number-keyboard-zindex = 1403

//tab-picker
tab-picker-font-size = font-body-normal
tab-picker-color = color-text-base
tab-picker-highlight-color = color-primary
tab-picker-min-height = 100px

// date-picker
date-picker-font-size = font-body-normal
date-time-picker-font-size = font-minor-large

// image-viewer
image-viewer-zindex = 1001
image-viewer-index-font-size = 32px
image-viewer-index-bottom = 100px

// cashier
cashier-bg = color-bg-base
cashier-choose-title-font-size = font-body-normal // 支付标题
cashier-choose-title-color = color-text-minor
cashier-choose-amount-font-size = 72px // 支付金额
cashier-choose-amount-color = color-text-base
cashier-choose-describe-font-size = font-minor-normal // 支付描述
cashier-choose-describe-color = color-text-minor
cashier-choose-channel-font-size = font-minor-large // 支付渠道
cashier-choose-channel-color = color-text-minor
cashier-choose-channel-icon-color = color-primary
cashier-choose-more-font-size = font-minor-large // 更多支付方式
cashier-choose-more-color = color-text-minor 

/*
 * global color
 */

// brand color
color-primary = #fc9153 // 1st main color for buttons & highlight text which is not clickable
color-primary-tap = #3ca0e6 // 2nd main color for links and selected element
color-primary-background = #f3f4f5 // 3rd main color for background

// text color
color-text-base = #333 // default text color
color-text-base-inverse = #fff // default inverse text color
color-text-minor = #666 // auxiliary text color
color-text-caption = #999 // subtitle and describe text  color
color-text-disabled = #ccc // input placeholder
color-text-placeholder = #ccc // input placeholder
color-text-highlight = color-primary // hight text color
color-text-link = color-primary-tap // link text color

// border color
color-border-base = #d9d9d9 // defalut gap color of items
color-border-minor = #ebebeb // gap color of items
color-border-element = #999 // border color of element such as button

// background color
color-bg-base = #fff // default background color
color-bg-disabled = #ccc // background color for disabeld element
color-bg-mask = rgba(0, 0, 0, .4) // background color for mask layer
color-bg-tap = rgba(0, 0, 0, .08) // background color for element click state
color-bg-tap-highlight = rgba(252, 145, 83, .08) // background color for highlight element click state

// opacity
opacity-disabled = .4 // opacity of disabled button, switch, agree

/*
 * global size
 */

// text size
font-heading-large  = 42px
font-heading-medium = 36px
font-heading-normal = 32px
font-body-large     = 30px
font-body-normal    = 28px
font-minor-large    = 24px
font-minor-normal   = 20px

font-weight-normal = 400
font-weight-medium = 500
font-weight-bold   = 600

// radius size
radius-normal = 4px
radius-circle = 50%

// border size
border-width-base = 2px

// gap size
h-gap-sm = 12px
h-gap-md = 20px
h-gap-lg = 32px
v-gap-sm = 12px
v-gap-md = 20px
v-gap-lg = 32px

/*
 * global other
 */

// box shadow
shadow-bottom    = 0 2px 4px rgba(0, 0, 0, .12)
shadow-top = 0 -2px 4px rgba(0, 0, 0, .12)

// animate
ease-in-out-quint = cubic-bezier(.86, 0, .07, 1)

font-family-normal = "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif