| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326 |
- // Color variables
- @black: #000;
- @white: #fff;
- @red: #f44;
- @blue: #1989fa;
- @orange: #ff976a;
- @orange-dark: #ed6a0c;
- @orange-light: #fffbe8;
- @green: #07c160;
- @gray: #c8c9cc;
- @gray-light: #e5e5e5;
- @gray-darker: #7d7e80;
- @gray-dark: #969799;
- // Default colors
- @text-color: #323233;
- @border-color: #ebedf0;
- @active-color: #f2f3f5;
- @background-color: #f8f8f8;
- @background-color-light: #fafafa;
- // ActionSheet
- @action-sheet-max-height: 90%;
- @action-sheet-header-height: 44px;
- @action-sheet-header-font-size: 16px;
- @action-sheet-item-height: 50px;
- @action-sheet-item-background: @white;
- @action-sheet-item-font-size: 16px;
- @action-sheet-item-text-color: @text-color;
- @action-sheet-subname-color: @gray-darker;
- @action-sheet-subname-font-size: 12px;
- @action-sheet-close-icon-size: 18px;
- @action-sheet-close-icon-color: @gray-dark;
- // Badge
- @badge-font-size: 14px;
- @badge-line-height: 1.4;
- @badge-text-color: @gray-darker;
- @badge-padding: 20px 12px 20px 9px;
- @badge-active-color: @active-color;
- @badge-background-color: @background-color;
- @badge-selected-font-weight: 500;
- @badge-selected-text-color: @text-color;
- @badge-selected-border-color: @red;
- @badge-selected-background-color: @white;
- // BadgeGroup
- @badge-group-width: 85px;
- // Button
- @button-mini-height: 22px;
- @button-mini-min-width: 50px;
- @button-mini-font-size: 10px;
- @button-mini-line-height: 20px;
- @button-small-height: 30px;
- @button-small-font-size: 12px;
- @button-small-min-width: 60px;
- @button-small-line-height: 28px;
- @button-normal-font-size: 14px;
- @button-large-height: 50px;
- @button-large-line-height: 48px;
- @button-default-height: 44px;
- @button-default-line-height: 42px;
- @button-default-font-size: 16px;
- @button-default-color: @text-color;
- @button-default-background-color: @white;
- @button-default-border-color: @border-color;
- @button-primary-color: @white;
- @button-primary-background-color: @green;
- @button-primary-border-color: @green;
- @button-info-color: @white;
- @button-info-background-color: @blue;
- @button-info-border-color: @blue;
- @button-danger-color: @white;
- @button-danger-background-color: @red;
- @button-danger-border-color: @red;
- @button-warning-color: @white;
- @button-warning-background-color: @orange;
- @button-warning-border-color: @orange;
- @button-bottom-action-default-color: @white;
- @button-bottom-action-default-background-color: @orange;
- @button-bottom-action-primary-color: @white;
- @button-bottom-action-primary-background-color: @red;
- @button-border-width: 1px;
- @button-border-radius: 2px;
- @button-round-border-radius: 10em;
- @button-plain-background-color: @white;
- @button-disabled-opacity: .5;
- // Card
- @card-padding: 5px 15px;
- @card-font-size: 12px;
- @card-text-color: @text-color;
- @card-background-color: @background-color-light;
- @card-thumb-size: 90px;
- @card-title-line-height: 16px;
- @card-desc-color: @gray-darker;
- @card-desc-line-height: 20px;
- @card-price-color: @red;
- @card-origin-price-color: @gray-darker;
- @card-origin-price-font-size: 10px;
- // Cell
- @cell-font-size: 14px;
- @cell-line-height: 24px;
- @cell-vertical-padding: 10px;
- @cell-horizontal-padding: 15px;
- @cell-text-color: @text-color;
- @cell-background-color: @white;
- @cell-border-color: @border-color;
- @cell-active-color: @active-color;
- @cell-required-color: @red;
- @cell-label-color: @gray-dark;
- @cell-label-font-size: 12px;
- @cell-label-line-height: 18px;
- @cell-label-margin-top: 3px;
- @cell-value-color: @gray-dark;
- @cell-icon-size: 16px;
- @cell-right-icon-color: @gray-dark;
- @cell-large-vertical-padding: 12px;
- @cell-large-title-font-size: 16px;
- @cell-large-label-font-size: 14px;
- // CellGroup
- @cell-group-background-color: @white;
- @cell-group-title-color: @gray-dark;
- @cell-group-title-padding: 15px 15px 5px;
- @cell-group-title-font-size: 14px;
- @cell-group-title-line-height: 16px;
- // Checkbox
- @checkbox-size: 20px;
- @checkbox-border-color: @gray-light;
- @checkbox-transition-duration: .2s;
- @checkbox-label-margin: 10px;
- @checkbox-label-color: @text-color;
- @checkbox-checked-icon-color: @blue;
- @checkbox-disabled-icon-color: @gray;
- @checkbox-disabled-label-color: @gray;
- @checkbox-disabled-background-color: @border-color;
- // Circle
- @circle-text-color: @text-color;
- // Collapse
- @collapse-item-transition-duration: .3s;
- @collapse-item-content-padding: 15px;
- @collapse-item-content-font-size: 13px;
- @collapse-item-content-line-height: 1.5;
- @collapse-item-content-text-color: @gray-dark;
- @collapse-item-content-background-color: @white;
- @collapse-item-title-disabled-color: @gray;
- // Dialog
- @dialog-width: 85%;
- @dialog-font-size: 16px;
- @dialog-transition: .3s;
- @dialog-border-radius: 4px;
- @dialog-background-color: @white;
- @dialog-header-font-weight: 500;
- @dialog-header-padding-top: 25px;
- @dialog-header-isolated-padding: 25px 0;
- @dialog-message-padding: 25px;
- @dialog-message-font-size: 14px;
- @dialog-message-line-height: 1.5;
- @dialog-message-max-height: 60vh;
- @dialog-has-title-message-text-color: @gray-darker;
- @dialog-has-title-message-padding-top: 12px;
- @dialog-confirm-button-text-color: @blue;
- // Field
- @field-label-max-width: 90px;
- @field-input-text-color: @text-color;
- @field-input-error-text-color: @red;
- @field-input-disabled-text-color: @gray-dark;
- @field-placeholder-text-color: @gray-dark;
- @field-icon-size: 16px;
- @field-clear-icon-size: 16px;
- @field-clear-icon-color: @gray;
- @field-right-icon-color: @gray-dark;
- @field-error-message-color: @red;
- @field-error-message-text-color: 12px;
- @field-text-area-min-height: 60px;
- // Info
- @info-size: 16px;
- @info-color: @white;
- @info-padding: 0 3px;
- @info-font-size: 12px;
- @info-font-weight: 500;
- @info-border-width: 1px;
- @info-background-color: @red;
- @info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
- // List
- @list-icon-size: 16px;
- @list-icon-margin-right: 5px;
- @list-text-color: @gray-dark;
- @list-text-font-size: 13px;
- @list-text-line-height: 50px;
- // NavBar
- @nav-bar-height: 46px;
- @nav-bar-background-color: @white;
- @nav-bar-arrow-size: 16px;
- @nav-bar-icon-color: @blue;
- @nav-bar-text-color: @blue;
- @nav-bar-title-font-size: 16px;
- @nav-bar-title-text-color: @text-color;
- // Notify
- @notify-padding: 6px 15px;
- @notify-font-size: 14px;
- @notify-line-height: 20px;
- // NumberKeyboard
- @number-keyboard-key-height: 54px;
- @number-keyboard-key-background: #ebedf0;
- // Overlay
- @overlay-background-color: rgba(0, 0, 0, 0.7);
- // Panel
- @panel-background-color: @white;
- @panel-header-value-color: @red;
- @panel-footer-padding: 10px 15px;
- // Radio
- @radio-size: 20px;
- @radio-border-color: @gray-light;
- @radio-transition-duration: .2s;
- @radio-label-margin: 10px;
- @radio-label-color: @text-color;
- @radio-checked-icon-color: @blue;
- @radio-disabled-icon-color: @gray;
- @radio-disabled-label-color: @gray;
- @radio-disabled-background-color: @border-color;
- // Rate
- @rate-horizontal-padding: 2px;
- // Slider
- @slider-active-background-color: @blue;
- @slider-inactive-background-color: @gray-light;
- @slider-disabled-opacity: .3;
- @slider-button-width: 20px;
- @slider-button-height: 20px;
- @slider-button-border-radius: 50%;
- @slider-button-background-color: @white;
- @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
- // Swipe
- @swipe-indicator-size: 6px;
- @swipe-indicator-margin: 10px;
- @swipe-indicator-active-opacity: 1;
- @swipe-indicator-inactive-opacity: .3;
- @swipe-indicator-active-background-color: @blue;
- @swipe-indicator-inactive-background-color: @border-color;
- // Switch
- @switch-width: 2em;
- @switch-height: 1em;
- @switch-node-size: 1em;
- @switch-node-z-index: 1;
- @switch-node-background-color: @white;
- @switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
- @switch-background-color: @white;
- @switch-on-background-color: @blue;
- @switch-transition-duration: .3s;
- @switch-disabled-opacity: .4;
- @switch-border: 1px solid rgba(0, 0, 0, .1);
- // SwitchCell
- @switch-cell-padding-top: 9px;
- @switch-cell-padding-bottom: 9px;
- // Tab
- @tabs-line-height: 44px;
- @tabs-card-height: 30px;
- // Tabbar
- @tabbar-height: 50px;
- @tabbar-background-color: @white;
- // TabbarItem
- @tabbar-item-font-size: 12px;
- @tabbar-item-text-color: @gray-darker;
- @tabbar-item-active-color: @blue;
- @tabbar-item-line-height: 1;
- @tabbar-item-icon-size: 18px;
- @tabbar-item-margin-bottom: 5px;
- // Tag
- @tag-padding: .2em .5em;
- @tag-font-size: 10px;
- @tag-medium-font-size: 12px;
- @tag-large-font-size: 14px;
- @tag-text-color: @white;
- @tag-border-radius: .2em;
- @tag-round-border-radius: .8em;
- // Toast
- @toast-max-width: 70%;
- @toast-font-size: 14px;
- @toast-text-color: @white;
- @toast-line-height: 20px;
- @toast-border-radius: 4px;
- @toast-background-color: rgba(@text-color, .88);
- @toast-icon-size: 48px;
- @toast-text-min-width: 96px;
- @toast-text-padding: 8px 12px;
- @toast-default-padding: 15px;
- @toast-default-width: 90px;
- @toast-default-min-height: 90px;
- @toast-position-top-distance: 50px;
- @toast-position-bottom-distance: 50px;
- // Search
- @search-background-color: #f7f8fA;
- // Stepper
- @stepper-active-color: #e8e8e8;
- @stepper-background-color: @active-color;
- @stepper-button-disabled-color: #f7f8fa;
- @stepper-input-disabled-color: @active-color;
- @stepper-border-radius: 4px;
|