mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Swipe: add less vars (#3169)
This commit is contained in:
parent
acbcd931f6
commit
5b82d67784
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user