mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 19:06:36 +08:00
[improvement] unify padding (#3910)
This commit is contained in:
neverland
GitHub
parent
b2b60f58a8
commit
e400c9b67d
@ -10,7 +10,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__item-value {
|
&__item-value {
|
||||||
padding-right: 34px;
|
padding-right: @padding-xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__group {
|
&__group {
|
||||||
@ -29,7 +29,7 @@
|
|||||||
&__edit {
|
&__edit {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 15px;
|
right: @padding-md;
|
||||||
font-size: @contact-list-edit-icon-size;
|
font-size: @contact-list-edit-icon-size;
|
||||||
transform: translate(0, -50%);
|
transform: translate(0, -50%);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -96,7 +96,7 @@
|
|||||||
@button-disabled-opacity: .5;
|
@button-disabled-opacity: .5;
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
@card-padding: 5px 15px;
|
@card-padding: @padding-xs @padding-md;
|
||||||
@card-font-size: 12px;
|
@card-font-size: 12px;
|
||||||
@card-text-color: @text-color;
|
@card-text-color: @text-color;
|
||||||
@card-background-color: @background-color-light;
|
@card-background-color: @background-color-light;
|
||||||
@ -112,7 +112,7 @@
|
|||||||
@cell-font-size: 14px;
|
@cell-font-size: 14px;
|
||||||
@cell-line-height: 24px;
|
@cell-line-height: 24px;
|
||||||
@cell-vertical-padding: 10px;
|
@cell-vertical-padding: 10px;
|
||||||
@cell-horizontal-padding: 15px;
|
@cell-horizontal-padding: @padding-md;
|
||||||
@cell-text-color: @text-color;
|
@cell-text-color: @text-color;
|
||||||
@cell-background-color: @white;
|
@cell-background-color: @white;
|
||||||
@cell-border-color: @border-color;
|
@cell-border-color: @border-color;
|
||||||
@ -125,14 +125,14 @@
|
|||||||
@cell-value-color: @gray-dark;
|
@cell-value-color: @gray-dark;
|
||||||
@cell-icon-size: 16px;
|
@cell-icon-size: 16px;
|
||||||
@cell-right-icon-color: @gray-dark;
|
@cell-right-icon-color: @gray-dark;
|
||||||
@cell-large-vertical-padding: 12px;
|
@cell-large-vertical-padding: @padding-sm;
|
||||||
@cell-large-title-font-size: 16px;
|
@cell-large-title-font-size: 16px;
|
||||||
@cell-large-label-font-size: 14px;
|
@cell-large-label-font-size: 14px;
|
||||||
|
|
||||||
// CellGroup
|
// CellGroup
|
||||||
@cell-group-background-color: @white;
|
@cell-group-background-color: @white;
|
||||||
@cell-group-title-color: @gray-dark;
|
@cell-group-title-color: @gray-dark;
|
||||||
@cell-group-title-padding: 15px 15px 5px;
|
@cell-group-title-padding: @padding-md @padding-md @padding-xs;
|
||||||
@cell-group-title-font-size: 14px;
|
@cell-group-title-font-size: 14px;
|
||||||
@cell-group-title-line-height: 16px;
|
@cell-group-title-line-height: 16px;
|
||||||
|
|
||||||
@ -140,7 +140,7 @@
|
|||||||
@checkbox-size: 20px;
|
@checkbox-size: 20px;
|
||||||
@checkbox-border-color: @gray-light;
|
@checkbox-border-color: @gray-light;
|
||||||
@checkbox-transition-duration: .2s;
|
@checkbox-transition-duration: .2s;
|
||||||
@checkbox-label-margin: 10px;
|
@checkbox-label-margin: @padding-xs;
|
||||||
@checkbox-label-color: @text-color;
|
@checkbox-label-color: @text-color;
|
||||||
@checkbox-checked-icon-color: @blue;
|
@checkbox-checked-icon-color: @blue;
|
||||||
@checkbox-disabled-icon-color: @gray;
|
@checkbox-disabled-icon-color: @gray;
|
||||||
@ -152,7 +152,7 @@
|
|||||||
|
|
||||||
// Collapse
|
// Collapse
|
||||||
@collapse-item-transition-duration: .3s;
|
@collapse-item-transition-duration: .3s;
|
||||||
@collapse-item-content-padding: 15px;
|
@collapse-item-content-padding: @padding-md;
|
||||||
@collapse-item-content-font-size: 13px;
|
@collapse-item-content-font-size: 13px;
|
||||||
@collapse-item-content-line-height: 1.5;
|
@collapse-item-content-line-height: 1.5;
|
||||||
@collapse-item-content-text-color: @gray-dark;
|
@collapse-item-content-text-color: @gray-dark;
|
||||||
@ -160,20 +160,20 @@
|
|||||||
@collapse-item-title-disabled-color: @gray;
|
@collapse-item-title-disabled-color: @gray;
|
||||||
|
|
||||||
// ContactCard
|
// ContactCard
|
||||||
@contact-card-padding: 15px;
|
@contact-card-padding: @padding-md;
|
||||||
@contact-card-add-icon-size: 40px;
|
@contact-card-add-icon-size: 40px;
|
||||||
@contact-card-add-icon-color: @blue;
|
@contact-card-add-icon-color: @blue;
|
||||||
@contact-card-value-line-height: 20px;
|
@contact-card-value-line-height: 20px;
|
||||||
|
|
||||||
// ContactEdit
|
// ContactEdit
|
||||||
@contact-edit-buttons-padding: 30px 15px;
|
@contact-edit-buttons-padding: @padding-xl @padding-md;
|
||||||
@contact-edit-button-margin-bottom: 15px;
|
@contact-edit-button-margin-bottom: @padding-md;
|
||||||
@contact-edit-field-label-width: 65px;
|
@contact-edit-field-label-width: 65px;
|
||||||
|
|
||||||
// ContactList
|
// ContactList
|
||||||
@contact-list-edit-icon-size: 16px;
|
@contact-list-edit-icon-size: 16px;
|
||||||
@contact-list-add-button-z-index: 9999;
|
@contact-list-add-button-z-index: 9999;
|
||||||
@contact-list-item-padding: 15px;
|
@contact-list-item-padding: @padding-md;
|
||||||
|
|
||||||
// CountDown
|
// CountDown
|
||||||
@count-down-text-color: @text-color;
|
@count-down-text-color: @text-color;
|
||||||
@ -181,9 +181,9 @@
|
|||||||
@count-down-line-height: 20px;
|
@count-down-line-height: 20px;
|
||||||
|
|
||||||
// Coupon
|
// Coupon
|
||||||
@coupon-margin: 0 15px 15px;
|
@coupon-margin: 0 @padding-md @padding-md;
|
||||||
@coupon-content-height: 100px;
|
@coupon-content-height: 100px;
|
||||||
@coupon-content-padding: 24px 0 0 15px;
|
@coupon-content-padding: @padding-lg 0 0 @padding-md;
|
||||||
@coupon-background-color: @white;
|
@coupon-background-color: @white;
|
||||||
@coupon-active-background-color: @active-color;
|
@coupon-active-background-color: @active-color;
|
||||||
@coupon-border-radius: 4px;
|
@coupon-border-radius: 4px;
|
||||||
@ -194,7 +194,7 @@
|
|||||||
@coupon-currency-font-size: 50%;
|
@coupon-currency-font-size: 50%;
|
||||||
@coupon-name-font-size: 16px;
|
@coupon-name-font-size: 16px;
|
||||||
@coupon-disabled-text-color: @gray-dark;
|
@coupon-disabled-text-color: @gray-dark;
|
||||||
@coupon-description-padding: 7px 15px;
|
@coupon-description-padding: @padding-xs @padding-md;
|
||||||
@coupon-description-background-color: @background-color-light;
|
@coupon-description-background-color: @background-color-light;
|
||||||
@coupon-description-border-color: @border-color;
|
@coupon-description-border-color: @border-color;
|
||||||
|
|
||||||
@ -203,7 +203,7 @@
|
|||||||
|
|
||||||
// CouponList
|
// CouponList
|
||||||
@coupon-list-background-color: @background-color;
|
@coupon-list-background-color: @background-color;
|
||||||
@coupon-list-field-padding: 7px 15px;
|
@coupon-list-field-padding: @padding-xs @padding-md;
|
||||||
@coupon-list-exchange-button-height: 32px;
|
@coupon-list-exchange-button-height: 32px;
|
||||||
@coupon-list-empty-image-size: 200px;
|
@coupon-list-empty-image-size: 200px;
|
||||||
@coupon-list-empty-tip-color: @gray-dark;
|
@coupon-list-empty-tip-color: @gray-dark;
|
||||||
@ -218,23 +218,23 @@
|
|||||||
@dialog-background-color: @white;
|
@dialog-background-color: @white;
|
||||||
@dialog-header-font-weight: 500;
|
@dialog-header-font-weight: 500;
|
||||||
@dialog-header-line-height: 24px;
|
@dialog-header-line-height: 24px;
|
||||||
@dialog-header-padding-top: 25px;
|
@dialog-header-padding-top: @padding-lg;
|
||||||
@dialog-header-isolated-padding: 25px 0;
|
@dialog-header-isolated-padding: @padding-lg 0;
|
||||||
@dialog-message-padding: 25px;
|
@dialog-message-padding: @padding-lg;
|
||||||
@dialog-message-font-size: 14px;
|
@dialog-message-font-size: 14px;
|
||||||
@dialog-message-line-height: 20px;
|
@dialog-message-line-height: 20px;
|
||||||
@dialog-message-max-height: 60vh;
|
@dialog-message-max-height: 60vh;
|
||||||
@dialog-has-title-message-text-color: @gray-darker;
|
@dialog-has-title-message-text-color: @gray-darker;
|
||||||
@dialog-has-title-message-padding-top: 12px;
|
@dialog-has-title-message-padding-top: @padding-sm;
|
||||||
@dialog-confirm-button-text-color: @blue;
|
@dialog-confirm-button-text-color: @blue;
|
||||||
|
|
||||||
// Divider
|
// Divider
|
||||||
@divider-margin: 15px 0;
|
@divider-margin: @padding-md 0;
|
||||||
@divider-text-color: @gray-dark;
|
@divider-text-color: @gray-dark;
|
||||||
@divider-font-size: 14px;
|
@divider-font-size: 14px;
|
||||||
@divider-line-height: 24px;
|
@divider-line-height: 24px;
|
||||||
@divider-border-color: @border-color;
|
@divider-border-color: @border-color;
|
||||||
@divider-content-padding: 15px;
|
@divider-content-padding: @padding-md;
|
||||||
@divider-content-left-width: 10%;
|
@divider-content-left-width: 10%;
|
||||||
@divider-content-right-width: 10%;
|
@divider-content-right-width: 10%;
|
||||||
|
|
||||||
@ -258,7 +258,7 @@
|
|||||||
@field-text-area-min-height: 60px;
|
@field-text-area-min-height: 60px;
|
||||||
|
|
||||||
// GridItem
|
// GridItem
|
||||||
@grid-item-content-padding: 15px 10px;
|
@grid-item-content-padding: @padding-md @padding-xs;
|
||||||
@grid-item-content-background-color: @white;
|
@grid-item-content-background-color: @white;
|
||||||
@grid-item-content-active-color: @active-color;
|
@grid-item-content-active-color: @active-color;
|
||||||
@grid-item-icon-size: 28px;
|
@grid-item-icon-size: 28px;
|
||||||
@ -276,7 +276,7 @@
|
|||||||
@goods-action-icon-text-color: @gray-darker;
|
@goods-action-icon-text-color: @gray-darker;
|
||||||
|
|
||||||
// IndexAnchor
|
// IndexAnchor
|
||||||
@index-anchor-padding: 0 15px;
|
@index-anchor-padding: 0 @padding-md;
|
||||||
@index-anchor-text-color: @text-color;
|
@index-anchor-text-color: @text-color;
|
||||||
@index-anchor-font-weight: 500;
|
@index-anchor-font-weight: 500;
|
||||||
@index-anchor-font-size: 14px;
|
@index-anchor-font-size: 14px;
|
||||||
@ -329,8 +329,8 @@
|
|||||||
|
|
||||||
// NoticeBar
|
// NoticeBar
|
||||||
@notice-bar-height: 40px;
|
@notice-bar-height: 40px;
|
||||||
@notice-bar-padding: 0 15px;
|
@notice-bar-padding: 0 @padding-md;
|
||||||
@notice-bar-wrapable-padding: 8px 15px;
|
@notice-bar-wrapable-padding: @padding-xs @padding-md;
|
||||||
@notice-bar-text-color: @orange-dark;
|
@notice-bar-text-color: @orange-dark;
|
||||||
@notice-bar-font-size: 14px;
|
@notice-bar-font-size: 14px;
|
||||||
@notice-bar-line-height: 24px;
|
@notice-bar-line-height: 24px;
|
||||||
@ -339,7 +339,7 @@
|
|||||||
@notice-bar-icon-min-width: 22px;
|
@notice-bar-icon-min-width: 22px;
|
||||||
|
|
||||||
// Notify
|
// Notify
|
||||||
@notify-padding: 6px 15px;
|
@notify-padding: @padding-xs @padding-md;
|
||||||
@notify-font-size: 14px;
|
@notify-font-size: 14px;
|
||||||
@notify-line-height: 20px;
|
@notify-line-height: 20px;
|
||||||
|
|
||||||
@ -353,7 +353,7 @@
|
|||||||
@number-keyboard-title-color: @gray-darker;
|
@number-keyboard-title-color: @gray-darker;
|
||||||
@number-keyboard-title-height: 30px;
|
@number-keyboard-title-height: 30px;
|
||||||
@number-keyboard-title-font-size: 14px;
|
@number-keyboard-title-font-size: 14px;
|
||||||
@number-keyboard-close-padding: 0 15px;
|
@number-keyboard-close-padding: 0 @padding-md;
|
||||||
@number-keyboard-close-color: @blue;
|
@number-keyboard-close-color: @blue;
|
||||||
@number-keyboard-close-font-size: 14px;
|
@number-keyboard-close-font-size: 14px;
|
||||||
@number-keyboard-button-text-color: @white;
|
@number-keyboard-button-text-color: @white;
|
||||||
@ -376,11 +376,11 @@
|
|||||||
// Panel
|
// Panel
|
||||||
@panel-background-color: @white;
|
@panel-background-color: @white;
|
||||||
@panel-header-value-color: @red;
|
@panel-header-value-color: @red;
|
||||||
@panel-footer-padding: 10px 15px;
|
@panel-footer-padding: @padding-xs @padding-md;
|
||||||
|
|
||||||
// PasswordInput
|
// PasswordInput
|
||||||
@password-input-height: 50px;
|
@password-input-height: 50px;
|
||||||
@password-input-margin: 0 15px;
|
@password-input-margin: 0 @padding-md;
|
||||||
@password-input-font-size: 20px;
|
@password-input-font-size: 20px;
|
||||||
@password-input-border-radius: 6px;
|
@password-input-border-radius: 6px;
|
||||||
@password-input-background-color: @white;
|
@password-input-background-color: @white;
|
||||||
@ -394,7 +394,7 @@
|
|||||||
@picker-background-color: @white;
|
@picker-background-color: @white;
|
||||||
@picker-toolbar-height: 44px;
|
@picker-toolbar-height: 44px;
|
||||||
@picker-title-font-size: 16px;
|
@picker-title-font-size: 16px;
|
||||||
@picker-action-padding: 0 15px;
|
@picker-action-padding: 0 @padding-md;
|
||||||
@picker-action-font-size: 14px;
|
@picker-action-font-size: 14px;
|
||||||
@picker-action-text-color: @blue;
|
@picker-action-text-color: @blue;
|
||||||
@picker-action-active-color: @active-color;
|
@picker-action-active-color: @active-color;
|
||||||
@ -424,7 +424,7 @@
|
|||||||
@radio-size: 20px;
|
@radio-size: 20px;
|
||||||
@radio-border-color: @gray-light;
|
@radio-border-color: @gray-light;
|
||||||
@radio-transition-duration: .2s;
|
@radio-transition-duration: .2s;
|
||||||
@radio-label-margin: 10px;
|
@radio-label-margin: @padding-xs;
|
||||||
@radio-label-color: @text-color;
|
@radio-label-color: @text-color;
|
||||||
@radio-checked-icon-color: @blue;
|
@radio-checked-icon-color: @blue;
|
||||||
@radio-disabled-icon-color: @gray;
|
@radio-disabled-icon-color: @gray;
|
||||||
@ -436,14 +436,14 @@
|
|||||||
@rate-icon-gutter: 4px;
|
@rate-icon-gutter: 4px;
|
||||||
|
|
||||||
// Search
|
// Search
|
||||||
@search-padding: 10px 16px;
|
@search-padding: 10px @padding-sm;
|
||||||
@search-background-color: #f7f8fA;
|
@search-background-color: #f7f8fA;
|
||||||
@search-input-height: 34px;
|
@search-input-height: 34px;
|
||||||
@search-label-padding: 0 5px;
|
@search-label-padding: 0 5px;
|
||||||
@search-label-color: @text-color;
|
@search-label-color: @text-color;
|
||||||
@search-label-font-size: 14px;
|
@search-label-font-size: 14px;
|
||||||
@search-left-icon-color: @gray-dark;
|
@search-left-icon-color: @gray-dark;
|
||||||
@search-action-padding: 0 10px;
|
@search-action-padding: 0 @padding-xs;
|
||||||
@search-action-text-color: @text-color;
|
@search-action-text-color: @text-color;
|
||||||
@search-action-font-size: 14px;
|
@search-action-font-size: 14px;
|
||||||
|
|
||||||
@ -454,7 +454,7 @@
|
|||||||
@sidebar-font-size: 14px;
|
@sidebar-font-size: 14px;
|
||||||
@sidebar-line-height: 1.4;
|
@sidebar-line-height: 1.4;
|
||||||
@sidebar-text-color: @gray-darker;
|
@sidebar-text-color: @gray-darker;
|
||||||
@sidebar-padding: 20px 12px 20px 9px;
|
@sidebar-padding: 20px @padding-sm 20px @padding-xs;
|
||||||
@sidebar-active-color: @active-color;
|
@sidebar-active-color: @active-color;
|
||||||
@sidebar-background-color: @background-color;
|
@sidebar-background-color: @background-color;
|
||||||
@sidebar-selected-font-weight: 500;
|
@sidebar-selected-font-weight: 500;
|
||||||
@ -465,7 +465,7 @@
|
|||||||
// Skeleton
|
// Skeleton
|
||||||
@skeleton-row-height: 16px;
|
@skeleton-row-height: 16px;
|
||||||
@skeleton-row-background-color: @active-color;
|
@skeleton-row-background-color: @active-color;
|
||||||
@skeleton-row-margin-top: 12px;
|
@skeleton-row-margin-top: @padding-sm;
|
||||||
@skeleton-avatar-background-color: @active-color;
|
@skeleton-avatar-background-color: @active-color;
|
||||||
@skeleton-animation-duration: 1.2s;
|
@skeleton-animation-duration: 1.2s;
|
||||||
|
|
||||||
@ -521,7 +521,7 @@
|
|||||||
@submit-bar-currency-font-size: 14px;
|
@submit-bar-currency-font-size: 14px;
|
||||||
@submit-bar-text-color: @text-color;
|
@submit-bar-text-color: @text-color;
|
||||||
@submit-bar-text-font-size: 14px;
|
@submit-bar-text-font-size: 14px;
|
||||||
@submit-bar-tip-padding: 10px;
|
@submit-bar-tip-padding: @padding-xs @padding-sm;
|
||||||
@submit-bar-tip-font-size: 12px;
|
@submit-bar-tip-font-size: 12px;
|
||||||
@submit-bar-tip-line-height: 1.5;
|
@submit-bar-tip-line-height: 1.5;
|
||||||
@submit-bar-tip-color: #f56723;
|
@submit-bar-tip-color: #f56723;
|
||||||
@ -530,7 +530,7 @@
|
|||||||
|
|
||||||
// Swipe
|
// Swipe
|
||||||
@swipe-indicator-size: 6px;
|
@swipe-indicator-size: 6px;
|
||||||
@swipe-indicator-margin: 10px;
|
@swipe-indicator-margin: @padding-sm;
|
||||||
@swipe-indicator-active-opacity: 1;
|
@swipe-indicator-active-opacity: 1;
|
||||||
@swipe-indicator-inactive-opacity: .3;
|
@swipe-indicator-inactive-opacity: .3;
|
||||||
@swipe-indicator-active-background-color: @blue;
|
@swipe-indicator-active-background-color: @blue;
|
||||||
@ -551,7 +551,7 @@
|
|||||||
|
|
||||||
// SwitchCell
|
// SwitchCell
|
||||||
@switch-cell-padding-top: @cell-vertical-padding - 1px;
|
@switch-cell-padding-top: @cell-vertical-padding - 1px;
|
||||||
@switch-cell-padding-bottom: @cell-vertical-padding -1px;
|
@switch-cell-padding-bottom: @cell-vertical-padding - 1px;
|
||||||
@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
|
@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
|
||||||
@switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px;
|
@switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px;
|
||||||
|
|
||||||
@ -604,8 +604,8 @@
|
|||||||
@toast-background-color: rgba(@text-color, .88);
|
@toast-background-color: rgba(@text-color, .88);
|
||||||
@toast-icon-size: 40px;
|
@toast-icon-size: 40px;
|
||||||
@toast-text-min-width: 96px;
|
@toast-text-min-width: 96px;
|
||||||
@toast-text-padding: 8px 12px;
|
@toast-text-padding: @padding-xs @padding-sm;
|
||||||
@toast-default-padding: 15px;
|
@toast-default-padding: @padding-md;
|
||||||
@toast-default-width: 90px;
|
@toast-default-width: 90px;
|
||||||
@toast-default-min-height: 90px;
|
@toast-default-min-height: 90px;
|
||||||
@toast-position-top-distance: 50px;
|
@toast-position-top-distance: 50px;
|
||||||
@ -615,7 +615,7 @@
|
|||||||
@tree-select-font-size: 14px;
|
@tree-select-font-size: 14px;
|
||||||
@tree-select-nav-background-color: @background-color-light;
|
@tree-select-nav-background-color: @background-color-light;
|
||||||
@tree-select-content-background-color: @white;
|
@tree-select-content-background-color: @white;
|
||||||
@tree-select-nav-item-padding: 0 9px 0 12px;
|
@tree-select-nav-item-padding: 0 @padding-xs 0 @padding-sm;
|
||||||
@tree-select-nav-item-active-border-color: @red;
|
@tree-select-nav-item-active-border-color: @red;
|
||||||
@tree-select-nav-item-active-background-color: @white;
|
@tree-select-nav-item-active-background-color: @white;
|
||||||
@tree-select-nav-item-disabled-color: @gray-dark;
|
@tree-select-nav-item-disabled-color: @gray-dark;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user