From 5d83423b34b993bbf0ddb91ab8e6000b4fc20467 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 20 Jul 2019 15:46:27 +0800 Subject: [PATCH] [improvement] add padding variables (#3911) --- docs/site/components/DemoList.vue | 6 +- docs/site/desktop/App.vue | 92 ------------------- src/action-sheet/demo/index.vue | 2 +- src/address-list/index.less | 4 +- src/button/demo/index.vue | 10 +- src/button/index.less | 2 +- src/card/index.less | 4 +- src/cell/index.less | 4 +- src/circle/demo/index.vue | 8 +- src/col/demo/index.vue | 2 +- src/count-down/demo/index.vue | 2 +- src/coupon-list/index.less | 4 +- src/coupon/index.less | 6 +- src/dialog/demo/index.vue | 2 +- src/divider/README.md | 2 +- src/divider/README.zh-CN.md | 2 +- src/divider/demo/index.vue | 8 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- src/dropdown-menu/index.less | 2 +- src/field/index.less | 6 +- src/grid-item/index.less | 2 +- src/image-preview/demo/index.vue | 2 +- src/image/demo/index.vue | 2 +- src/index-bar/index.less | 2 +- src/lazyload/demo/index.vue | 11 ++- src/loading/index.less | 4 +- src/nav-bar/index.less | 8 +- src/notify/demo/index.vue | 2 +- src/number-keyboard/demo/index.vue | 4 +- src/overlay/demo/index.vue | 40 +------- .../test/__snapshots__/demo.spec.js.snap | 2 +- src/pagination/demo/index.vue | 4 +- src/password-input/index.less | 2 +- src/popup/demo/index.vue | 4 +- src/pull-refresh/demo/index.vue | 2 +- src/rate/demo/index.vue | 4 +- src/search/index.less | 4 +- src/sidebar/demo/index.vue | 2 +- src/skeleton/demo/index.vue | 10 +- src/skeleton/index.less | 6 +- src/sku/demo/index.vue | 2 +- src/slider/demo/index.vue | 2 +- src/step/index.less | 4 +- src/stepper/demo/index.vue | 8 -- src/steps/demo/index.vue | 2 +- src/steps/index.less | 2 +- src/sticky/demo/index.vue | 4 +- src/style/demo/index.vue | 2 +- src/style/var.less | 19 ++-- src/submit-bar/demo/index.vue | 2 +- src/submit-bar/index.less | 2 +- src/switch/demo/index.vue | 4 +- src/tabs/index.less | 2 +- src/tag/demo/index.vue | 8 +- src/toast/demo/index.vue | 2 +- src/toast/index.less | 2 +- src/tree-select/index.less | 6 +- src/uploader/demo/index.vue | 6 +- src/uploader/index.less | 8 +- 59 files changed, 132 insertions(+), 242 deletions(-) diff --git a/docs/site/components/DemoList.vue b/docs/site/components/DemoList.vue index 0ba0abf79..bb93d6b18 100644 --- a/docs/site/components/DemoList.vue +++ b/docs/site/components/DemoList.vue @@ -77,13 +77,13 @@ export default { .vant-title, .vant-desc { - padding-left: 15px; + padding-left: @padding-md; font-weight: normal; user-select: none; } .vant-title { - margin: 0 0 15px; + margin: 0 0 @padding-md; img, span { @@ -96,7 +96,7 @@ export default { } span { - margin-left: 15px; + margin-left: @padding-md; font-weight: 500; font-size: 36px; } diff --git a/docs/site/desktop/App.vue b/docs/site/desktop/App.vue index bf150c046..5c49a6fef 100644 --- a/docs/site/desktop/App.vue +++ b/docs/site/desktop/App.vue @@ -47,38 +47,7 @@ export default { } }, - mounted() { - this.showVersionTip(); - }, - methods: { - showVersionTip() { - const tip = window.localStorage.getItem('vantVersionTip'); - - if (!tip && this.$vantLang === 'zh-CN') { - const version = document.querySelector('.van-doc-header__version'); - version.insertAdjacentHTML('beforeend', ` -
- 提示：你当前访问的是 Vant 2.0 版本文档，点此切换至旧版文档 -
- -
-
- `); - - const tip = document.querySelector('.doc-version-tip'); - const removeTip = event => { - event.stopPropagation(); - tip.parentNode.removeChild(tip); - }; - - tip.addEventListener('click', removeTip); - version.addEventListener('click', removeTip); - - window.localStorage.setItem('vantVersionTip', 1); - } - }, - onChangeDemoURL(url) { this.simulators = [this.simulators[0], url]; }, @@ -102,65 +71,4 @@ export default { margin-bottom: 20px; } } - -.doc-version-tip { - position: absolute; - top: 35px; - left: 50%; - z-index: 100; - box-sizing: border-box; - width: 300px; - margin-left: -150px; - padding: 15px; - color: #333; - text-align: left; - background-color: #fff; - border-radius: 6px; - box-shadow: 0 4px 12px #ebedf0; - transform-origin: top; - cursor: default; - animation: version-tip .25s cubic-bezier(0.175, 0.885, 0.32, 1.375); - - &::before { - position: absolute; - top: -4px; - left: 50%; - margin-left: -3px; - border: 6px solid; - border-color: transparent transparent white white; - transform: rotate(135deg); - content: ''; - } - - &__button { - width: 60px; - color: #fff; - font-size: 12px; - line-height: 24px; - background: #1889f9; - border: none; - border-radius: 15px; - cursor: pointer; - - &:hover { - background: darken(#1889f9, 10%); - } - - &:focus { - outline: none; - } - } - - @keyframes version-tip { - from { - transform: scaleY(0); - opacity: 0; - } - - to { - transform: scaleY(1); - opacity: 1; - } - } -} diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue index ab2cbd7d7..94fa057c9 100644 --- a/src/action-sheet/demo/index.vue +++ b/src/action-sheet/demo/index.vue @@ -134,7 +134,7 @@ export default { background-color: @white; .van-button { - margin-left: 15px; + margin-left: @padding-md; } p { diff --git a/src/address-list/index.less b/src/address-list/index.less index 65866949c..ebe202aec 100644 --- a/src/address-list/index.less +++ b/src/address-list/index.less @@ -13,7 +13,7 @@ } &__disabled-text { - padding: 0 15px; + padding: 0 @padding-md; color: @address-list-disabled-text-color; font-size: @address-list-disabled-text-font-size; line-height: @address-list-disabled-text-line-height; @@ -24,7 +24,7 @@ padding: @address-list-item-padding; &__value { - padding-right: 34px; + padding-right: @padding-xl; } &__name { diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue index 9b7a846e9..40fe6e316 100644 --- a/src/button/demo/index.vue +++ b/src/button/demo/index.vue @@ -180,20 +180,22 @@ export default { diff --git a/src/button/index.less b/src/button/index.less index 69f528f51..771b2fb14 100644 --- a/src/button/index.less +++ b/src/button/index.less @@ -104,7 +104,7 @@ &--small { min-width: @button-small-min-width; height: @button-small-height; - padding: 0 8px; + padding: 0 @padding-xs; font-size: @button-small-font-size; line-height: @button-small-line-height; } diff --git a/src/card/index.less b/src/card/index.less index 2e6eecd9e..d76ab92d2 100644 --- a/src/card/index.less +++ b/src/card/index.less @@ -10,7 +10,7 @@ background-color: @card-background-color; &:not(:first-child) { - margin-top: 10px; + margin-top: @padding-xs; } &__header { @@ -22,7 +22,7 @@ flex: none; width: @card-thumb-size; height: @card-thumb-size; - margin-right: 10px; + margin-right: @padding-xs; } &__content { diff --git a/src/cell/index.less b/src/cell/index.less index e52a2db14..a99423790 100644 --- a/src/cell/index.less +++ b/src/cell/index.less @@ -14,7 +14,7 @@ background-color: @cell-background-color; &:not(:last-child)::after { - .hairline-bottom(@cell-border-color, 15px); + .hairline-bottom(@cell-border-color, @padding-md); } &--borderless::after { @@ -74,7 +74,7 @@ &::before { position: absolute; - left: 7px; + left: @padding-xs; color: @cell-required-color; font-size: @cell-font-size; content: '*'; diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue index b80f7b187..9102c73ca 100644 --- a/src/circle/demo/index.vue +++ b/src/circle/demo/index.vue @@ -75,16 +75,18 @@ export default { diff --git a/src/divider/test/__snapshots__/demo.spec.js.snap b/src/divider/test/__snapshots__/demo.spec.js.snap index db3ddf077..e8f11cfa7 100644 --- a/src/divider/test/__snapshots__/demo.spec.js.snap +++ b/src/divider/test/__snapshots__/demo.spec.js.snap @@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
-
+
文本
diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less index ba27fc390..9d3fc6331 100644 --- a/src/dropdown-menu/index.less +++ b/src/dropdown-menu/index.less @@ -32,7 +32,7 @@ position: relative; box-sizing: border-box; max-width: 100%; - padding: 0 8px; + padding: 0 @padding-xs; font-size: @dropdown-menu-title-font-size; &::after { diff --git a/src/field/index.less b/src/field/index.less index cc3e12ab0..6a250d4ab 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -66,8 +66,8 @@ &__clear, &__right-icon { - margin-right: -10px; - padding: 0 10px; + margin-right: -@padding-xs; + padding: 0 @padding-xs; line-height: inherit; } @@ -93,7 +93,7 @@ } &__button { - padding-left: 10px; + padding-left: @padding-xs; } &__error-message { diff --git a/src/grid-item/index.less b/src/grid-item/index.less index a1d9a144d..0e087980b 100644 --- a/src/grid-item/index.less +++ b/src/grid-item/index.less @@ -55,6 +55,6 @@ } &__icon + &__text { - margin-top: 8px; + margin-top: @padding-xs; } } diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue index 5cf77ac27..604d01569 100644 --- a/src/image-preview/demo/index.vue +++ b/src/image-preview/demo/index.vue @@ -115,7 +115,7 @@ export default { background-color: @white; .van-button { - margin-left: 15px; + margin-left: @padding-md; } } diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue index d1ab4328d..91e69828f 100644 --- a/src/image/demo/index.vue +++ b/src/image/demo/index.vue @@ -140,7 +140,7 @@ export default { background-color: @white; .van-row { - padding: 0 15px; + padding: 0 @padding-md; } .van-col { diff --git a/src/index-bar/index.less b/src/index-bar/index.less index 7b59f7359..25e8f93cb 100644 --- a/src/index-bar/index.less +++ b/src/index-bar/index.less @@ -13,7 +13,7 @@ } &__index { - padding: 0 3px 0 15px; + padding: 0 @padding-base 0 @padding-md; font-weight: 500; font-size: @index-bar-index-font-size; line-height: @index-bar-index-line-height; diff --git a/src/lazyload/demo/index.vue b/src/lazyload/demo/index.vue index cbee1f8dd..42b1d88a4 100644 --- a/src/lazyload/demo/index.vue +++ b/src/lazyload/demo/index.vue @@ -60,19 +60,22 @@ export default { diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue index e51508b4f..0dca08a6a 100644 --- a/src/number-keyboard/demo/index.vue +++ b/src/number-keyboard/demo/index.vue @@ -104,9 +104,11 @@ export default { diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue index da2b5da52..113571c7b 100644 --- a/src/overlay/demo/index.vue +++ b/src/overlay/demo/index.vue @@ -4,7 +4,7 @@ @@ -34,41 +34,3 @@ export default { } }; - - diff --git a/src/overlay/test/__snapshots__/demo.spec.js.snap b/src/overlay/test/__snapshots__/demo.spec.js.snap index 8a23ac9af..7c4c62f72 100644 --- a/src/overlay/test/__snapshots__/demo.spec.js.snap +++ b/src/overlay/test/__snapshots__/demo.spec.js.snap @@ -2,7 +2,7 @@ exports[`renders demo correctly 1`] = `
-
+
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue index bcc507fd3..7ff5959dc 100644 --- a/src/pagination/demo/index.vue +++ b/src/pagination/demo/index.vue @@ -62,6 +62,8 @@ export default { diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue index 8ee27fb5f..2dbab6ecd 100644 --- a/src/pull-refresh/demo/index.vue +++ b/src/pull-refresh/demo/index.vue @@ -57,7 +57,7 @@ export default { } p { - margin: 10px 0 0 15px; + margin: @padding-xs 0 0 @padding-md; } } diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue index b3b880ef8..2a7393013 100644 --- a/src/rate/demo/index.vue +++ b/src/rate/demo/index.vue @@ -90,12 +90,14 @@ export default { diff --git a/src/search/index.less b/src/search/index.less index 6eb930a6d..9b91b1392 100644 --- a/src/search/index.less +++ b/src/search/index.less @@ -9,7 +9,7 @@ &__content { display: flex; flex: 1; - padding-left: 10px; + padding-left: @padding-xs; background-color: @search-background-color; border-radius: 2px; @@ -27,7 +27,7 @@ .van-cell { flex: 1; - padding: 5px 10px 5px 0; + padding: 5px @padding-xs 5px 0; background-color: transparent; &__left-icon { diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue index cb45be168..077bdf1fc 100644 --- a/src/sidebar/demo/index.vue +++ b/src/sidebar/demo/index.vue @@ -55,7 +55,7 @@ export default { background-color: @white; .van-sidebar { - margin-left: 15px; + margin-left: @padding-md; } } diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue index 59ef3c41b..f722e8e02 100644 --- a/src/skeleton/demo/index.vue +++ b/src/skeleton/demo/index.vue @@ -64,16 +64,18 @@ export default { diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue index c426e8775..e3591c936 100644 --- a/src/slider/demo/index.vue +++ b/src/slider/demo/index.vue @@ -118,7 +118,7 @@ export default { user-select: none; .van-slider { - margin: 0 15px 30px; + margin: 0 @padding-md @padding-xl; } .custom-button { diff --git a/src/step/index.less b/src/step/index.less index f5ed1eb85..94fcb1986 100644 --- a/src/step/index.less +++ b/src/step/index.less @@ -48,9 +48,9 @@ .van-step__circle-container { position: absolute; top: 30px; - left: -8px; + left: -@padding-xs; z-index: 1; - padding: 0 8px; + padding: 0 @padding-xs; background-color: @white; transform: translateY(-50%); } diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue index 708260b16..0fdb0c88e 100644 --- a/src/stepper/demo/index.vue +++ b/src/stepper/demo/index.vue @@ -115,11 +115,3 @@ export default { } }; - - diff --git a/src/steps/demo/index.vue b/src/steps/demo/index.vue index 2a1df23f3..8d4dc6a9f 100644 --- a/src/steps/demo/index.vue +++ b/src/steps/demo/index.vue @@ -102,7 +102,7 @@ export default { } .van-button { - margin: 15px 0 0 15px; + margin: @padding-md 0 0 @padding-md; } .van-steps__message + p { diff --git a/src/steps/index.less b/src/steps/index.less index d5f819c9f..51d94d716 100644 --- a/src/steps/index.less +++ b/src/steps/index.less @@ -16,6 +16,6 @@ } &--vertical { - padding: 0 0 0 35px; + padding: 0 0 0 @padding-xl; } } diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue index 06e8b0a9a..4ef5519df 100644 --- a/src/sticky/demo/index.vue +++ b/src/sticky/demo/index.vue @@ -66,11 +66,13 @@ export default { diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue index d5fc0ffd2..7a8106319 100644 --- a/src/style/demo/index.vue +++ b/src/style/demo/index.vue @@ -90,7 +90,7 @@ export default { .demo-style { .van-ellipsis { max-width: 250px; - margin-left: 15px; + margin-left: @padding-md; font-size: 13px; } diff --git a/src/style/var.less b/src/style/var.less index 4285f1e7f..56e45e413 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -18,11 +18,14 @@ @active-color: #f2f3f5; @background-color: #f8f8f8; @background-color-light: #fafafa; -@padding-xl: 32px; -@padding-lg: 24px; -@padding-md: 16px; -@padding-sm: 12px; -@padding-xs: 8px; + +// Padding +@padding-base: 4px; +@padding-xs: @padding-base * 2; +@padding-sm: @padding-base * 3; +@padding-md: @padding-base * 4; +@padding-lg: @padding-base * 6; +@padding-xl: @padding-base * 8; // ActionSheet @action-sheet-max-height: 90%; @@ -37,13 +40,13 @@ @action-sheet-subname-font-size: 12px; @action-sheet-close-icon-size: 18px; @action-sheet-close-icon-color: @gray-dark; -@action-sheet-close-icon-padding: 0 @padding-md; +@action-sheet-close-icon-padding: 0 @padding-sm; @action-sheet-cancel-padding-top: @padding-xs; @action-sheet-cancel-padding-color: @background-color; // AddressEdit @address-edit-buttons-padding: @padding-xl @padding-md; -@address-edit-button-margin-bottom: @padding-md; +@address-edit-button-margin-bottom: @padding-sm; @address-edit-detail-finish-color: @blue; @address-edit-detail-fnish-font-size: 12px; @@ -167,7 +170,7 @@ // ContactEdit @contact-edit-buttons-padding: @padding-xl @padding-md; -@contact-edit-button-margin-bottom: @padding-md; +@contact-edit-button-margin-bottom: @padding-sm; @contact-edit-field-label-width: 65px; // ContactList diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue index 5b2947760..8e34112ad 100644 --- a/src/submit-bar/demo/index.vue +++ b/src/submit-bar/demo/index.vue @@ -102,7 +102,7 @@ export default { } .van-checkbox { - margin-left: 15px; + margin-left: @padding-sm; } } diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less index 1d08e22f8..0f94e7f89 100644 --- a/src/submit-bar/index.less +++ b/src/submit-bar/index.less @@ -37,7 +37,7 @@ &__text { flex: 1; - padding-right: 12px; + padding-right: @padding-sm; color: @submit-bar-text-color; font-weight: 500; text-align: right; diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue index de73ac5e3..7a6d9eb86 100644 --- a/src/switch/demo/index.vue +++ b/src/switch/demo/index.vue @@ -84,9 +84,11 @@ export default { diff --git a/src/tabs/index.less b/src/tabs/index.less index bfcdc6ee1..14b10f9c1 100644 --- a/src/tabs/index.less +++ b/src/tabs/index.less @@ -77,7 +77,7 @@ &--card { box-sizing: border-box; height: @tabs-card-height; - margin: 0 15px; + margin: 0 @padding-md; border: 1px solid @tabs-default-color; border-radius: 2px; diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue index 344a2c97c..9944e29de 100644 --- a/src/tag/demo/index.vue +++ b/src/tag/demo/index.vue @@ -138,16 +138,18 @@ export default { diff --git a/src/toast/index.less b/src/toast/index.less index 8393eafb7..4df065baf 100644 --- a/src/toast/index.less +++ b/src/toast/index.less @@ -64,6 +64,6 @@ } &__text { - margin-top: 10px; + margin-top: @padding-xs; } } diff --git a/src/tree-select/index.less b/src/tree-select/index.less index 5c4424808..a598f9652 100644 --- a/src/tree-select/index.less +++ b/src/tree-select/index.less @@ -39,7 +39,7 @@ &__item { position: relative; - padding-left: 15px; + padding-left: @padding-md; font-weight: bold; line-height: @tree-select-item-height; @@ -55,7 +55,7 @@ &__selected { position: absolute; top: 50%; - right: 15px; - margin-top: -8px; + right: @padding-md; + margin-top: -@padding-xs; } } diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue index 3b4bb0b7d..1ae8a3a9a 100644 --- a/src/uploader/demo/index.vue +++ b/src/uploader/demo/index.vue @@ -87,11 +87,13 @@ export default { diff --git a/src/uploader/index.less b/src/uploader/index.less index 996c4f75b..263e44c1f 100644 --- a/src/uploader/index.less +++ b/src/uploader/index.less @@ -33,7 +33,7 @@ box-sizing: border-box; width: @uploader-size; height: @uploader-size; - margin: 0 10px 10px 0; + margin: 0 @padding-xs @padding-xs 0; background-color: @uploader-upload-background-color; border: 1px dashed @uploader-upload-border-color; @@ -43,7 +43,7 @@ } &-text { - margin-top: 10px; + margin-top: @padding-xs; color: @uploader-text-color; font-size: @uploader-text-font-size; } @@ -51,7 +51,7 @@ &__preview { position: relative; - margin: 0 10px 10px 0; + margin: 0 @padding-xs @padding-xs 0; &-image { display: block; @@ -86,7 +86,7 @@ &-name { box-sizing: border-box; width: 100%; - margin-top: 5px; + margin-top: @padding-xs; padding: 0 5px; color: @uploader-file-name-text-color; font-size: @uploader-file-name-font-size;