blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 02:41:46 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Swipe: add less vars (#3169)

Browse Source
This commit is contained in:
neverland 2019-04-17 16:49:32 +08:00 committed by GitHub
parent acbcd931f6
commit 5b82d67784
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/style/var.less
View File

@ -247,7 +247,12 @@
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5); @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
// Swipe // Swipe
@swipe-indicator: 6px; @swipe-indicator-size: 6px;
@swipe-indicator-margin: 10px;
@swipe-indicator-active-opacity: 1;
@swipe-indicator-inactive-opacity: .3;
@swipe-indicator-active-background-color: @blue;
@swipe-indicator-inactive-background-color: @border-color;
// Switch // Switch
@switch-width: 2em; @switch-width: 2em;

20
packages/swipe/index.less
View File

@ -13,37 +13,37 @@
display: flex; display: flex;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 10px; bottom: @swipe-indicator-margin;
transform: translateX(-50%); transform: translateX(-50%);
&--vertical { &--vertical {
left: 10px; left: @swipe-indicator-margin;
top: 50%; top: 50%;
bottom: auto; bottom: auto;
flex-direction: column; flex-direction: column;
transform: translateY(-50%); transform: translateY(-50%);
.van-swipe__indicator:not(:last-child) { .van-swipe__indicator:not(:last-child) {
margin-bottom: @swipe-indicator; margin-bottom: @swipe-indicator-size;
} }
} }
} }
&__indicator { &__indicator {
opacity: .3;
border-radius: 100%; border-radius: 100%;
width: @swipe-indicator; opacity: @swipe-indicator-inactive-opacity;
height: @swipe-indicator; width: @swipe-indicator-size;
height: @swipe-indicator-size;
background-color: @swipe-indicator-inactive-background-color;
transition: opacity .2s; transition: opacity .2s;
background-color: @border-color;
&:not(:last-child) { &:not(:last-child) {
margin-right: @swipe-indicator; margin-right: @swipe-indicator-size;
} }
&--active { &--active {
opacity: 1; opacity: @swipe-indicator-active-opacity;
background-color: @blue; background-color: @swipe-indicator-active-background-color;
} }
} }
} }