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