blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 23:19:15 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] add font-size vars (#3912)

Browse Source
This commit is contained in:
neverland 2019-07-20 16:06:12 +08:00 committed by GitHub
parent 5d83423b34
commit 6bfd53e435
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 76 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/address-edit/index.less
View File

@ -14,7 +14,7 @@
&__finish {
color: @address-edit-detail-finish-color;
font-size: @address-edit-detail-fnish-font-size;
font-size: @address-edit-detail-finish-font-size;
}
}
}

2
src/address-list/index.less
View File

@ -30,7 +30,7 @@
&__name {
margin-bottom: 5px;
font-weight: 500;
font-size: 14px;
font-size: @font-size-md;
line-height: 20px;
}

2
src/contact-list/index.less
View File

@ -22,7 +22,7 @@
&__name {
font-weight: 500;
font-size: 14px;
font-size: @font-size-md;
line-height: 20px;
}

2
src/coupon/index.less
View File

@ -34,7 +34,7 @@
p {
color: @gray-dark;
font-size: 12px;
font-size: @font-size-sm;
line-height: 16px;
}

2
src/nav-bar/index.less
View File

@ -42,7 +42,7 @@
&__right {
position: absolute;
bottom: 0;
font-size: 14px;
font-size: @font-size-md;
}
&__left {

136
src/style/var.less
View File

@ -1,4 +1,4 @@
// Color variables
// Basic Colors
@black: #000;
@white: #fff;
@red: #f44;
@ -12,7 +12,7 @@
@gray-darker: #7d7e80;
@gray-dark: #969799;
// Default colors
// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@ -27,17 +27,23 @@
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;
// Font Size
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
// ActionSheet
@action-sheet-max-height: 90%;
@action-sheet-header-height: 44px;
@action-sheet-header-font-size: 16px;
@action-sheet-header-font-size: @font-size-lg;
@action-sheet-item-height: 50px;
@action-sheet-item-background: @white;
@action-sheet-item-font-size: 16px;
@action-sheet-item-font-size: @font-size-lg;
@action-sheet-item-text-color: @text-color;
@action-sheet-item-disabled-text-color: @gray;
@action-sheet-subname-color: @gray-darker;
@action-sheet-subname-font-size: 12px;
@action-sheet-subname-font-size: @font-size-sm;
@action-sheet-close-icon-size: 18px;
@action-sheet-close-icon-color: @gray-dark;
@action-sheet-close-icon-padding: 0 @padding-sm;
@ -48,35 +54,35 @@
@address-edit-buttons-padding: @padding-xl @padding-md;
@address-edit-button-margin-bottom: @padding-sm;
@address-edit-detail-finish-color: @blue;
@address-edit-detail-fnish-font-size: 12px;
@address-edit-detail-finish-font-size: @font-size-sm;
// AddressList
@address-list-disabled-text-color: @gray-dark;
@address-list-disabled-text-font-size: 12px;
@address-list-disabled-text-font-size: @font-size-sm;
@address-list-disabled-text-line-height: 30px;
@address-list-add-button-z-index: 9999;
@address-list-item-padding: @padding-md;
@address-list-item-text-color: @gray-darker;
@address-list-item-disabled-text-color: @gray-dark;
@address-list-item-font-size: 12px;
@address-list-item-font-size: @font-size-sm;
@address-list-item-line-height: 16px;
@address-list-edit-icon-size: 16px;
// Button
@button-mini-height: 22px;
@button-mini-min-width: 50px;
@button-mini-font-size: 10px;
@button-mini-font-size: @font-size-xs;
@button-mini-line-height: 20px;
@button-small-height: 30px;
@button-small-font-size: 12px;
@button-small-font-size: @font-size-sm;
@button-small-min-width: 60px;
@button-small-line-height: 28px;
@button-normal-font-size: 14px;
@button-normal-font-size: @font-size-md;
@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-font-size: @font-size-lg;
@button-default-color: @text-color;
@button-default-background-color: @white;
@button-default-border-color: @border-color;
@ -100,7 +106,7 @@
// Card
@card-padding: @padding-xs @padding-md;
@card-font-size: 12px;
@card-font-size: @font-size-sm;
@card-text-color: @text-color;
@card-background-color: @background-color-light;
@card-thumb-size: 90px;
@ -109,10 +115,10 @@
@card-desc-line-height: 20px;
@card-price-color: @red;
@card-origin-price-color: @gray-darker;
@card-origin-price-font-size: 10px;
@card-origin-price-font-size: @font-size-xs;
// Cell
@cell-font-size: 14px;
@cell-font-size: @font-size-md;
@cell-line-height: 24px;
@cell-vertical-padding: 10px;
@cell-horizontal-padding: @padding-md;
@ -122,21 +128,21 @@
@cell-active-color: @active-color;
@cell-required-color: @red;
@cell-label-color: @gray-dark;
@cell-label-font-size: 12px;
@cell-label-font-size: @font-size-sm;
@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: @padding-sm;
@cell-large-title-font-size: 16px;
@cell-large-label-font-size: 14px;
@cell-large-title-font-size: @font-size-lg;
@cell-large-label-font-size: @font-size-md;
// CellGroup
@cell-group-background-color: @white;
@cell-group-title-color: @gray-dark;
@cell-group-title-padding: @padding-md @padding-md @padding-xs;
@cell-group-title-font-size: 14px;
@cell-group-title-font-size: @font-size-md;
@cell-group-title-line-height: 16px;
// Checkbox
@ -180,7 +186,7 @@
// CountDown
@count-down-text-color: @text-color;
@count-down-font-size: 14px;
@count-down-font-size: @font-size-md;
@count-down-line-height: 20px;
// Coupon
@ -195,7 +201,7 @@
@coupon-amount-color: @red;
@coupon-amount-font-size: 24px;
@coupon-currency-font-size: 50%;
@coupon-name-font-size: 16px;
@coupon-name-font-size: @font-size-lg;
@coupon-disabled-text-color: @gray-dark;
@coupon-description-padding: @padding-xs @padding-md;
@coupon-description-background-color: @background-color-light;
@ -210,12 +216,12 @@
@coupon-list-exchange-button-height: 32px;
@coupon-list-empty-image-size: 200px;
@coupon-list-empty-tip-color: @gray-dark;
@coupon-list-empty-tip-font-size: 14px;
@coupon-list-empty-tip-font-size: @font-size-md;
@coupon-list-empty-tip-line-height: 20px;
// Dialog
@dialog-width: 85%;
@dialog-font-size: 16px;
@dialog-font-size: @font-size-lg;
@dialog-transition: .3s;
@dialog-border-radius: 4px;
@dialog-background-color: @white;
@ -224,7 +230,7 @@
@dialog-header-padding-top: @padding-lg;
@dialog-header-isolated-padding: @padding-lg 0;
@dialog-message-padding: @padding-lg;
@dialog-message-font-size: 14px;
@dialog-message-font-size: @font-size-md;
@dialog-message-line-height: 20px;
@dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: @gray-darker;
@ -234,7 +240,7 @@
// Divider
@divider-margin: @padding-md 0;
@divider-text-color: @gray-dark;
@divider-font-size: 14px;
@divider-font-size: @font-size-md;
@divider-line-height: 24px;
@divider-border-color: @border-color;
@divider-content-padding: @padding-md;
@ -266,7 +272,7 @@
@grid-item-content-active-color: @active-color;
@grid-item-icon-size: 28px;
@grid-item-text-color: @gray-darker;
@grid-item-text-font-size: 12px;
@grid-item-text-font-size: @font-size-sm;
// GoodsAction
@goods-action-background-color: @white;
@ -274,7 +280,7 @@
@goods-action-icon-height: 50px;
@goods-action-icon-color: @text-color;
@goods-action-icon-size: 18px;
@goods-action-icon-font-size: 10px;
@goods-action-icon-font-size: @font-size-xs;
@goods-action-icon-active-color: @active-color;
@goods-action-icon-text-color: @gray-darker;
@ -282,20 +288,20 @@
@index-anchor-padding: 0 @padding-md;
@index-anchor-text-color: @text-color;
@index-anchor-font-weight: 500;
@index-anchor-font-size: 14px;
@index-anchor-font-size: @font-size-md;
@index-anchor-line-height: 32px;
@index-anchor-background-color: transparent;
@index-anchor-sticky-background-color: @white;
// IndexBar
@index-bar-index-font-size: 10px;
@index-bar-index-font-size: @font-size-xs;
@index-bar-index-line-height: 14px;
// Info
@info-size: 16px;
@info-color: @white;
@info-padding: 0 3px;
@info-font-size: 12px;
@info-font-size: @font-size-sm;
@info-font-weight: 500;
@info-border-width: 1px;
@info-background-color: @red;
@ -303,23 +309,23 @@
// Image
@image-placeholder-text-color: @gray-dark;
@image-placeholder-font-size: 14px;
@image-placeholder-font-size: @font-size-md;
@image-placeholder-background-color: @background-color;
// ImagePreview
@image-preview-index-text-color: @white;
@image-preview-index-font-size: 14px;
@image-preview-index-font-size: @font-size-md;
@image-preview-overlay-background-color: rgba(0, 0, 0, .9);
// List
@list-icon-margin-right: 5px;
@list-text-color: @gray-dark;
@list-text-font-size: 13px;
@list-text-font-size: @font-size-sm;
@list-text-line-height: 50px;
// Loading
@loading-text-color: @gray-dark;
@loading-text-font-size: 14px;
@loading-text-font-size: @font-size-md;
// NavBar
@nav-bar-height: 46px;
@ -327,7 +333,7 @@
@nav-bar-arrow-size: 16px;
@nav-bar-icon-color: @blue;
@nav-bar-text-color: @blue;
@nav-bar-title-font-size: 16px;
@nav-bar-title-font-size: @font-size-lg;
@nav-bar-title-text-color: @text-color;
// NoticeBar
@ -335,7 +341,7 @@
@notice-bar-padding: 0 @padding-md;
@notice-bar-wrapable-padding: @padding-xs @padding-md;
@notice-bar-text-color: @orange-dark;
@notice-bar-font-size: 14px;
@notice-bar-font-size: @font-size-md;
@notice-bar-line-height: 24px;
@notice-bar-background-color: @orange-light;
@notice-bar-icon-size: 16px;
@ -343,7 +349,7 @@
// Notify
@notify-padding: @padding-xs @padding-md;
@notify-font-size: 14px;
@notify-font-size: @font-size-md;
@notify-line-height: 20px;
// NumberKeyboard
@ -352,13 +358,13 @@
@number-keyboard-key-background: #ebedf0;
@number-keyboard-key-font-size: 24px;
@number-keyboard-key-active-color: @active-color;
@number-keyboard-delete-font-size: 16px;
@number-keyboard-delete-font-size: @font-size-lg;
@number-keyboard-title-color: @gray-darker;
@number-keyboard-title-height: 30px;
@number-keyboard-title-font-size: 14px;
@number-keyboard-title-font-size: @font-size-md;
@number-keyboard-close-padding: 0 @padding-md;
@number-keyboard-close-color: @blue;
@number-keyboard-close-font-size: 14px;
@number-keyboard-close-font-size: @font-size-md;
@number-keyboard-button-text-color: @white;
@number-keyboard-button-background-color: @blue;
@ -367,7 +373,7 @@
// Pagination
@pagination-height: 40px;
@pagination-font-size: 14px;
@pagination-font-size: @font-size-md;
@pagination-item-width: 36px;
@pagination-item-default-color: @blue;
@pagination-item-disabled-color: @gray-darker;
@ -388,7 +394,7 @@
@password-input-border-radius: 6px;
@password-input-background-color: @white;
@password-input-info-color: @gray-dark;
@password-input-info-font-size: 14px;
@password-input-info-font-size: @font-size-md;
@password-input-error-info-color: @red;
@password-input-dot-size: 10px;
@password-input-dot-color: @black;
@ -396,12 +402,12 @@
// Picker
@picker-background-color: @white;
@picker-toolbar-height: 44px;
@picker-title-font-size: 16px;
@picker-title-font-size: @font-size-lg;
@picker-action-padding: 0 @padding-md;
@picker-action-font-size: 14px;
@picker-action-font-size: @font-size-md;
@picker-action-text-color: @blue;
@picker-action-active-color: @active-color;
@picker-option-font-size: 16px;
@picker-option-font-size: @font-size-lg;
@picker-option-text-color: @black;
@picker-option-disabled-opacity: .3;
@ -414,13 +420,13 @@
@progress-height: 4px;
@progress-background-color: @gray-light;
@progress-pivot-padding: 0 5px;
@progress-pivot-font-size: 10px;
@progress-pivot-font-size: @font-size-xs;
@progress-pivot-line-height: 1.6;
@progress-pivot-background-color: @gray-light;
// PullRefresh
@pull-refresh-head-height: 50px;
@pull-refresh-head-font-size: 14px;
@pull-refresh-head-font-size: @font-size-md;
@pull-refresh-head-text-color: @gray-dark;
// Radio
@ -444,17 +450,17 @@
@search-input-height: 34px;
@search-label-padding: 0 5px;
@search-label-color: @text-color;
@search-label-font-size: 14px;
@search-label-font-size: @font-size-md;
@search-left-icon-color: @gray-dark;
@search-action-padding: 0 @padding-xs;
@search-action-text-color: @text-color;
@search-action-font-size: 14px;
@search-action-font-size: @font-size-md;
// Sidebar
@sidebar-width: 85px;
// SidebarItem
@sidebar-font-size: 14px;
@sidebar-font-size: @font-size-md;
@sidebar-line-height: 1.4;
@sidebar-text-color: @gray-darker;
@sidebar-padding: 20px @padding-sm 20px @padding-xs;
@ -485,14 +491,14 @@
// Step
@step-text-color: @gray-dark;
@step-process-text-color: @text-color;
@step-font-size: 14px;
@step-font-size: @font-size-md;
@step-line-color: @border-color;
@step-finish-line-color: @green;
@step-finish-text-color: @text-color;
@step-icon-size: 12px;
@step-circle-size: 5px;
@step-circle-color: @gray-dark;
@step-horizontal-title-font-size: 12px;
@step-horizontal-title-font-size: @font-size-sm;
// Steps
@steps-background-color: @white;
@ -508,7 +514,7 @@
@stepper-button-disabled-icon-color: @gray;
@stepper-input-width: 32px;
@stepper-input-height: 28px;
@stepper-input-font-size: 14px;
@stepper-input-font-size: @font-size-md;
@stepper-input-text-color: @text-color;
@stepper-input-disabled-text-color: @gray;
@stepper-input-disabled-background-color: @active-color;
@ -521,11 +527,11 @@
@submit-bar-button-width: 110px;
@submit-bar-price-color: @red;
@submit-bar-price-font-size: 18px;
@submit-bar-currency-font-size: 14px;
@submit-bar-currency-font-size: @font-size-md;
@submit-bar-text-color: @text-color;
@submit-bar-text-font-size: 14px;
@submit-bar-text-font-size: @font-size-md;
@submit-bar-tip-padding: @padding-xs @padding-sm;
@submit-bar-tip-font-size: 12px;
@submit-bar-tip-font-size: @font-size-sm;
@submit-bar-tip-line-height: 1.5;
@submit-bar-tip-color: #f56723;
@submit-bar-tip-background-color: #fff7cc;
@ -563,7 +569,7 @@
@tabbar-background-color: @white;
// TabbarItem
@tabbar-item-font-size: 12px;
@tabbar-item-font-size: @font-size-sm;
@tabbar-item-text-color: @gray-darker;
@tabbar-item-active-color: @blue;
@tabbar-item-line-height: 1;
@ -574,7 +580,7 @@
@tab-text-color: @gray-darker;
@tab-active-text-color: @text-color;
@tab-disabled-text-color: @gray;
@tab-font-size: 14px;
@tab-font-size: @font-size-md;
// Tabs
@tabs-default-color: @red;
@ -586,9 +592,9 @@
// Tag
@tag-padding: .2em .5em;
@tag-font-size: 10px;
@tag-medium-font-size: 12px;
@tag-large-font-size: 14px;
@tag-font-size: @font-size-xs;
@tag-medium-font-size: @font-size-sm;
@tag-large-font-size: @font-size-md;
@tag-text-color: @white;
@tag-border-radius: .2em;
@tag-round-border-radius: .8em;
@ -600,7 +606,7 @@
// Toast
@toast-max-width: 70%;
@toast-font-size: 14px;
@toast-font-size: @font-size-md;
@toast-text-color: @white;
@toast-line-height: 20px;
@toast-border-radius: 4px;
@ -615,7 +621,7 @@
@toast-position-bottom-distance: 50px;
// TreeSelect
@tree-select-font-size: 14px;
@tree-select-font-size: @font-size-md;
@tree-select-nav-background-color: @background-color-light;
@tree-select-content-background-color: @white;
@tree-select-nav-item-padding: 0 @padding-xs 0 @padding-sm;
@ -631,7 +637,7 @@
@uploader-icon-size: 24px;
@uploader-icon-color: @gray-dark;
@uploader-text-color: @gray-dark;
@uploader-text-font-size: 12px;
@uploader-text-font-size: @font-size-sm;
@uploader-upload-border-color: @gray-light;
@uploader-upload-background-color: @white;
@uploader-delete-color: @white;
@ -639,5 +645,5 @@
@uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px;
@uploader-file-icon-color: @gray-darker;
@uploader-file-name-font-size: 12px;
@uploader-file-name-font-size: @font-size-sm;
@uploader-file-name-text-color: @gray-darker;