mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
412 lines (364 loc) • 12.9 kB
text/stylus
/// action-bar
action-bar-width = 100%
action-bar-height = 100px
action-bar-padding-v = v-gap-md
action-bar-padding-h = h-gap-sl
action-bar-button-gap = 22px
action-bar-slot-height = button-height
action-bar-zindex = 100
/// action-sheet
action-sheet-height = 120px
action-sheet-padding-h = h-gap-sl
action-sheet-color = color-text-body
action-sheet-color-highlight = color-primary
action-sheet-color-cancel = color-text-minor
action-sheet-font-size = font-caption-normal
action-sheet-bg = color-bg-inverse
action-sheet-disabled-opacity = opacity-disabled
action-sheet-cancel-gap-bg = color-bg-base
action-sheet-zindex = 1101
/// agree
agree-fill = color-primary
// agree-fill-inverse = color-bg-disabled
agree-disabled-opacity = opacity-disabled
/// bill
bill-bg = color-bg-base
bill-name-font-size = font-caption-large
bill-name-color = color-text-body
bill-no-font-size = font-minor-large
bill-no-color = color-text-placeholder
bill-description-font-size = font-minor-large
bill-description-color = color-text-caption
/// button
button-primary-fill = color-primary
button-default-fill = color-bg-inverse
button-disabled-fill = color-bg-disabled
button-warning-fill = color-text-error
button-primary-active-fill =
button-default-active-fill = color-bg-base
button-warning-active-fill =
button-primary-plain-active-fill =
button-default-plain-active-fill = color-bg-base
button-warning-plain-active-fill =
button-default-color = color-text-body
button-primary-color = color-text-base-inverse
button-disabled-color = color-text-base-inverse
button-warning-color = color-text-base-inverse
button-default-plain-color = button-default-color
button-primary-plain-color = button-primary-fill
button-warning-plain-color = button-warning-fill
button-disabled-plain-color = color-text-disabled
button-height = 100px
button-font-size = font-caption-large
button-font-weight = font-weight-medium
button-small-height = 64px
button-small-font-size = font-body-large
button-radius = radius-normal
/// captcha
captcha-zindex = 1301
captcha-title-color = color-text-base
captcha-title-font-size = font-heading-normal
captcha-color = color-text-caption
captcha-font-size = font-body-large
captcha-footer-font-size = font-minor-large
captcha-error-color = color-text-error
captcha-brief-color = color-text-caption
captcha-countbtn-gap = h-gap-lg
captcha-btn-color = color-primary
/// cashier
cashier-bg = color-bg-inverse
cashier-choose-title-font-size = font-body-large // 支付标题
cashier-choose-title-color = color-text-minor
cashier-choose-amount-font-size = 80px // 支付金额
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-title-font-size = 30px // 支付渠道标题
cashier-choose-channel-title-color = color-text-body
cashier-choose-channel-title-action-font-size = font-body-large // 支付渠道动作标题
cashier-choose-channel-title-action-color = color-primary
cashier-choose-channel-desc-font-size = font-minor-large // 支付渠道备注
cashier-choose-channel-desc-color = color-text-caption
cashier-choose-channel-icon-color = color-primary
cashier-choose-more-font-size = font-minor-large // 更多支付方式
cashier-choose-more-color = color-text-minor
/// chart
chart-line-color =
chart-path-color = color-primary
chart-text-color = color-text-minor
chart-label-size = 22px
chart-value-size = 20px
/// cell-item
cell-item-min-height = 100px
cell-item-padding-v = 32px
cell-item-multilines-padding-v = 36px
cell-item-title-color = color-text-base
cell-item-title-font-size = font-caption-normal
cell-item-brief-color = color-text-caption
cell-item-brief-font-size = font-minor-large
cell-item-right-color = color-text-caption
cell-item-right-font-size = font-body-large
cell-item-border-color = color-border-base
/// check
check-color = color-text-highlight
checkbox-color = color-text-base
checkbox-font-size = font-caption-normal
checkbox-disabled-color = color-text-disabled
checkbox-active-color = color-primary
checkbox-active-border-color = color-primary
checkbox-border-color = color-border-element
checkbox-border-radius = radius-normal
/// codebox
codebox-font-size = 50px
codebox-width = 66px
codebox-height = 70px
codebox-gutter = 18px
codebox-border-width = 2px
codebox-border-color = color-border-element
codebox-border-active-color = color-text-base
codebox-color = color-text-base
codebox-blink-color = color-text-base
codebox-dot-color = color-text-base
codebox-holder-space = h-gap-sm
codebox-disabled-color = color-text-disabled
/// date-picker
date-picker-font-size = font-caption-normal
date-time-picker-font-size = font-body-large
/// dialog
dialog-width = 606px
dialog-radius = 12px
dialog-body-padding = 52px
dialog-title-font-size = 40px
dialog-title-color = color-text-base
dialog-text-font-size = font-body-large
dialog-action-font-weight = font-weight-medium
dialog-text-color = color-text-minor
dialog-action-height = 100px
dialog-action-font-size = font-caption-large
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 = 1500
/// drop-menu
drop-menu-height = 110px
drop-menu-bar-bg = color-bg-inverse
drop-menu-bar-border-color = color-border-base
drop-menu-list-bg = color-bg-inverse
drop-menu-color = color-primary
drop-menu-font-size = font-caption-normal
drop-menu-font-weight = font-weight-medium
drop-menu-disabled-opacity = opacity-disabled
drop-menu-zindex = 1200
/// field
field-padding-h = h-gap-sl
field-padding-v = v-gap-sl
field-bg-color = color-bg-inverse
field-header-gap = v-gap-lg
field-footer-gap = v-gap-md
field-title-color = color-text-base
field-title-font-size = font-caption-large
field-title-font-weight = font-weight-medium
field-title-font-weight-android = bold
field-brief-color = color-text-caption
field-brief-font-size = font-minor-large
field-action-color = color-text-caption
field-action-font-size = font-minor-large
/// field-item
field-item-min-height = 100px
field-item-padding-v = 30px
field-item-title-width = 160px
field-item-title-gap = 10px
field-item-color = color-text-base
field-item-font-size = font-caption-normal
field-item-font-weight = font-weight-medium
field-item-placeholder-color = color-text-placeholder
field-item-addon-color = color-text-caption
field-item-addon-font-size = font-body-large
field-item-border-color = color-border-base
field-item-children-font-size = font-minor-large
/// detail-item
detail-item-font-size = font-body-large
detail-item-title-color = color-text-caption
detail-item-content-color = color-text-body
detail-item-gap = v-gap-sm
/// icon
icon-size-xss = 16px
icon-size-xs = 20px
icon-size-sm = 24px
icon-size-md = 32px
icon-size-lg = 42px
icon-font-family = url("https://manhattan.didistatic.com/static/manhattan/mand-mobile-iconfont.2.6.0.woff") format("woff"), url("https://manhattan.didistatic.com/static/manhattan/mand-mobile-iconfont.2.6.0.ttf") format("truetype")
/// image-viewer
image-viewer-index-font-size = 32px
image-viewer-index-bottom = 100px
image-viewer-zindex = 1001
/// input-item
input-item-height = 100px
input-item-font-size = font-caption-normal
input-item-font-weight = font-weight-medium
input-item-font-weight-android = bold
input-item-title-latent-font-size = font-body-normal
input-item-font-size-large = 80px
input-item-font-size-error = font-minor-large
input-item-font-size-brief = font-minor-large
input-item-color = color-text-base
input-item-title-latent-color = color-text-minor
input-item-color-disabled = color-text-caption
input-item-color-error = color-text-error
input-item-color-brief = color-text-caption
input-item-placeholder = color-text-placeholder
input-item-color-highlight = color-text-base
input-item-icon = color-text-placeholder // delete icon
/// textarea-item
textarea-item-font-size = font-caption-normal
textarea-item-font-weight = font-weight-medium
textarea-item-line-height = 1.4
textarea-item-color = color-text-base
textarea-item-icon = color-text-placeholder // delete icon
textarea-item-color-error = color-text-error
textarea-item-color-disabled = color-text-caption
textarea-item-placeholder-color = color-text-placeholder
textarea-item-placeholder-weight = font-weight-normal
/// slider
slider-bg-base = color-bg-base
slider-bg-tap = color-primary
slider-handle-bg = color-bg-inverse
/// landscape
landscape-width = 540px
// landscape-radius = radius-normal
landscape-fullscreen-bg = color-bg-inverse
landscape-zindex = 1600
/// notice-bar
notice-bar-fill = rgba(89, 158, 248, .08)
notice-bar-font-size = font-body-normal
notice-bar-color = color-primary
notice-bar-border-radius = 32px
notice-bar-fill-warning =
notice-bar-color-warning =
notice-bar-fill-activity =
notice-bar-color-activity =
notice-bar-zindex = 999
/// number-keyboard
number-keyboard-width = 100%
number-keyboard-height = 428px
number-keyboard-bg = color-bg-base
number-keyboard-key-height = 107px
number-keyboard-key-bg = color-bg-inverse
number-keyboard-key-bg-tap = color-bg-base
number-keyboard-key-confirm-bg = color-primary
number-keyboard-key-confirm-bg-tap = button-primary-active-fill
number-keyboard-key-font-size = font-heading-medium
number-keyboard-key-font-weight = font-weight-medium
number-keyboard-key-color = color-text-base
number-keyboard-key-confirm-color = color-text-base-inverse
number-keyboard-key-border-color = color-border-base
number-keyboard-zindex = 1302
/// picker
picker-padding-h = h-gap-sl
picker-font-size = font-caption-normal
picker-disabled-opacity = .2
picker-color = color-text-disabled
picker-color-active = color-text-highlight
picker-font-weight-active = font-weight-medium
picker-border-color = color-border-base
picker-zindex = 1100
/// popup
popup-title-bar-bg = color-bg-inverse
popup-title-bar-height = 120px
popup-title-bar-height-large = 180px
popup-title-bar-radius = 8px
popup-title-bar-radius-large = 40px
popup-title-bar-font-size-button = font-caption-large
popup-title-bar-font-weight-button = font-weight-medium
popup-title-bar-font-size-title = 40px
popup-title-bar-font-size-describe = font-body-large
popup-title-bar-color-title = color-text-base
popup-title-bar-color-describe = color-text-caption
popup-title-bar-color-button-left = color-text-minor
popup-title-bar-color-button-right = color-text-highlight
popup-mask-bg = color-mask
popup-zindex = 1000
///radio
radio-color = color-text-highlight
/// result-page
result-page-image-size = 260px
result-page-title-font-size = font-caption-normal
result-page-describe-font-size = font-body-large
result-page-title-color = color-text-base
result-page-describe-color = color-text-caption
/// selector
selector-disabled-opacity = .2
selector-active-color = color-primary
selector-zindex = 1102
/// stepper
stepper-fill = color-bg-base
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 = 2px
stepper-radius-input = 0
/// steps
steps-color = color-border-base
steps-color-active = color-primary
steps-border-size = 1px
steps-icon-size = 32px // icon size
steps-text-color = color-text-body
steps-text-font-size = font-body-large
steps-text-gap-horizontal = 20px
steps-text-gap-vertical = 40px
steps-desc-color = color-text-caption
steps-desc-font-size = font-body-normal
steps-transition-delay = .15s
/// switch
switch-fill = color-primary
switch-fill-inverse = color-bg-disabled
switch-handle-color =
switch-item-color-disabled = opacity-disabled
/// swiper
swiper-indicator-fill = color-primary
/// tabs
tab-font-size = font-body-large
tab-font-weight = font-weight-medium
tab-text-color = color-text-minor
tab-active-color = color-primary
tab-disabled-color = color-text-disabled
tab-bg = color-bg-base
tab-height = 100px
tab-ink-height = 4px
tab-offset = h-gap-sl
tab-item-gap = 27px
/// tab-picker
tab-picker-height = 500px
tab-picker-h-gap = h-gap-sl
tab-picker-bg = color-bg-inverse
tab-picker-zindex = 1102
/// tag
tag-color = color-primary
tag-fillet-radius = 4px
tag-large-font-size = font-body-normal
tag-small-font-size = font-minor-normal
tag-tiny-font-size = 12px
/// tip
tip-fill =
tip-fill-opacity = .8
tip-font-size = font-minor-large
tip-color = color-text-base-inverse
tip-radius = 1000px
tip-padding = 15px 32px
tip-close-size = 32px
tip-shadow = 0 5px 20px rgba(0, 0, 0, .08)
tip-zindex = 1303
/// toast
toast-fill =
toast-font-size = font-body-large
toast-color =
toast-radius = radius-normal
toast-radius-medium = radius-medium
toast-padding = 20px 32px
toast-zindex = 1700