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

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

View File

@ -247,7 +247,12 @@
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
// 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-width: 2em;

View File

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