mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] add padding variables (#3911)
This commit is contained in:
neverland
GitHub
parent
e400c9b67d
commit
5d83423b34
@ -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;
|
||||
}
|
||||
|
||||
@ -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', `
|
||||
<div class="doc-version-tip">
|
||||
提示：你当前访问的是 Vant 2.0 版本文档，点此切换至旧版文档
|
||||
<div style="text-align: right;">
|
||||
<button class="doc-version-tip__button">好哒</button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -134,7 +134,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -180,20 +180,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-button {
|
||||
.van-button {
|
||||
&--large {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
|
||||
&--small,
|
||||
&--normal:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
margin-right: @padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
@ -201,7 +203,7 @@ export default {
|
||||
}
|
||||
|
||||
&-row {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: @padding-sm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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: '*';
|
||||
|
||||
@ -75,16 +75,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-circle {
|
||||
.van-circle {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 10px;
|
||||
margin: @padding-md 0 0 10px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,7 +104,7 @@ export default {
|
||||
|
||||
.demo-col {
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
|
||||
@ -127,7 +127,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.van-count-down {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
&__list {
|
||||
box-sizing: border-box;
|
||||
padding: 15px 0;
|
||||
padding: @padding-md 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
@ -33,7 +33,7 @@
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: 15px 0;
|
||||
margin: @padding-md 0;
|
||||
color: @coupon-list-empty-tip-color;
|
||||
font-size: @coupon-list-empty-tip-font-size;
|
||||
line-height: @coupon-list-empty-tip-line-height;
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
&__head {
|
||||
position: relative;
|
||||
min-width: @coupon-head-width;
|
||||
padding-right: 10px;
|
||||
padding-right: @padding-xs;
|
||||
|
||||
p {
|
||||
white-space: pre-wrap;
|
||||
@ -73,8 +73,8 @@
|
||||
|
||||
&__corner {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 15px;
|
||||
top: @padding-md;
|
||||
right: @padding-md;
|
||||
}
|
||||
|
||||
&__description {
|
||||
|
||||
@ -127,7 +127,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.van-doc-demo-block > .van-button {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@ -38,7 +38,7 @@ Vue.use(Divider);
|
||||
### Custom Style
|
||||
|
||||
```html
|
||||
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
|
||||
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
|
||||
Text
|
||||
</van-divider>
|
||||
```
|
||||
|
||||
@ -48,7 +48,7 @@ Vue.use(Divider);
|
||||
可以直接通过`style`属性设置分割线的样式
|
||||
|
||||
```html
|
||||
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
|
||||
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
|
||||
文字
|
||||
</van-divider>
|
||||
```
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customStyle')">
|
||||
<van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 15px' }">
|
||||
<van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
|
||||
{{ $t('text') }}
|
||||
</van-divider>
|
||||
</demo-block>
|
||||
@ -67,11 +67,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-divider {
|
||||
background-color: #fff;
|
||||
background-color: @white;
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-top: 15px;
|
||||
padding-top: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 15px;">
|
||||
<div class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 16px;">
|
||||
文本
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -55,6 +55,6 @@
|
||||
}
|
||||
|
||||
&__icon + &__text {
|
||||
margin-top: 8px;
|
||||
margin-top: @padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -140,7 +140,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
|
||||
.van-col {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -60,19 +60,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-lazyload {
|
||||
padding: 15px;
|
||||
padding-right: @padding-md;
|
||||
padding-left: @padding-md;
|
||||
|
||||
img,
|
||||
div[lazy] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin: 10px 0 0;
|
||||
padding: 15px;
|
||||
margin-bottom: @padding-md;
|
||||
padding: @padding-md;
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 15px;
|
||||
background-position: @padding-md;
|
||||
background-size: 315px 250px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-left: @padding-xs;
|
||||
color: @loading-text-color;
|
||||
font-size: @loading-text-font-size;
|
||||
vertical-align: middle;
|
||||
@ -70,7 +70,7 @@
|
||||
align-items: center;
|
||||
|
||||
.van-loading__text {
|
||||
margin: 10px 0 0;
|
||||
margin: @padding-xs 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,17 +46,17 @@
|
||||
}
|
||||
|
||||
&__left {
|
||||
left: 15px;
|
||||
left: @padding-md;
|
||||
}
|
||||
|
||||
&__right {
|
||||
right: 15px;
|
||||
right: @padding-md;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
margin: 0 -15px;
|
||||
padding: 0 15px;
|
||||
margin: 0 -@padding-md;
|
||||
padding: 0 @padding-md;
|
||||
color: @nav-bar-text-color;
|
||||
vertical-align: middle;
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -104,9 +104,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-number-keyboard {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('showOverlay')"
|
||||
style="margin-left: 15px;"
|
||||
style="margin-left: 16px;"
|
||||
@click="show = true"
|
||||
/>
|
||||
|
||||
@ -34,41 +34,3 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-skeleton {
|
||||
background-color: #fff;
|
||||
|
||||
.van-switch {
|
||||
margin: 0 15px 10px;
|
||||
}
|
||||
|
||||
.demo-preview {
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
|
||||
.demo-content {
|
||||
padding-top: 6px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 13px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">显示遮罩层</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;"><span class="van-button__text">显示遮罩层</span></button>
|
||||
<div class="van-overlay" style="z-index: 1; display: none;" name="van-fade"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,6 +62,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-pagination {
|
||||
.van-pagination {
|
||||
width: 100%;
|
||||
@ -69,7 +71,7 @@ export default {
|
||||
}
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
&__info,
|
||||
&__error-info {
|
||||
margin-top: 15px;
|
||||
margin-top: @padding-md;
|
||||
font-size: @password-input-info-font-size;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -152,11 +152,11 @@ export default {
|
||||
|
||||
.demo-popup {
|
||||
.van-row {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -57,7 +57,7 @@ export default {
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0 0 15px;
|
||||
margin: @padding-xs 0 0 @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -90,12 +90,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-rate {
|
||||
padding-bottom: 20px;
|
||||
background-color: #fff;
|
||||
|
||||
.van-rate {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.van-sidebar {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -64,16 +64,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-skeleton {
|
||||
background-color: #fff;
|
||||
background-color: @white;
|
||||
|
||||
.van-switch {
|
||||
margin: 0 15px 10px;
|
||||
margin: 0 @padding-md @padding-xs;
|
||||
}
|
||||
|
||||
.demo-preview {
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
.demo-content {
|
||||
padding-top: 6px;
|
||||
@ -95,7 +97,7 @@ export default {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 15px;
|
||||
margin-right: @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
.van-skeleton {
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
&__avatar {
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px;
|
||||
margin-right: @padding-md;
|
||||
background-color: @skeleton-avatar-background-color;
|
||||
|
||||
&--round {
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
&__avatar + &__content {
|
||||
padding-top: 8px;
|
||||
padding-top: @padding-xs;
|
||||
}
|
||||
|
||||
&__row,
|
||||
|
||||
@ -226,7 +226,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.sku-container {
|
||||
padding: 0 15px;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
user-select: none;
|
||||
|
||||
.van-slider {
|
||||
margin: 0 15px 30px;
|
||||
margin: 0 @padding-md @padding-xl;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
|
||||
@ -115,11 +115,3 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-stepper {
|
||||
.van-stepper {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
margin: @padding-md 0 0 @padding-md;
|
||||
}
|
||||
|
||||
.van-steps__message + p {
|
||||
|
||||
@ -16,6 +16,6 @@
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
padding: 0 0 0 35px;
|
||||
padding: 0 0 0 @padding-xl;
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,11 +66,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-sticky {
|
||||
height: 200vh;
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -90,7 +90,7 @@ export default {
|
||||
.demo-style {
|
||||
.van-ellipsis {
|
||||
max-width: 250px;
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
}
|
||||
|
||||
.van-checkbox {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -84,9 +84,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-switch {
|
||||
.van-switch {
|
||||
margin: 0 15px;
|
||||
margin: 0 @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -138,16 +138,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-tag {
|
||||
background-color: #fff;
|
||||
background-color: @white;
|
||||
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,7 +161,7 @@ export default {
|
||||
background-color: @white;
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -64,6 +64,6 @@
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-top: 10px;
|
||||
margin-top: @padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,11 +87,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-uploader {
|
||||
background-color: #fff;
|
||||
background-color: @white;
|
||||
|
||||
.van-uploader {
|
||||
margin-left: 15px;
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user