[breaking change] reconstruct Swipe component (#194)

* Swipe: reconstruct

* [bugfix]: Swipe autoplay

[bugfix] AddressEdit doc link
This commit is contained in:
neverland
2017-10-12 06:22:12 -05:00
committed by GitHub
parent 77f6a798e4
commit 560ccfdec2
12 changed files with 242 additions and 681 deletions

View File

@@ -3,9 +3,10 @@
.van-card {
color: $text-color;
height: 90px;
height: 100px;
background: #fafafa;
position: relative;
box-sizing: border-box;
padding: 5px 15px 5px 115px;
&:not(:first-child) {

View File

@@ -29,3 +29,7 @@ ul {
padding: 0;
list-style: none;
}
button {
font-family: inherit;
}

View File

@@ -1,53 +1,44 @@
@import './common/var.css';
$van-swipe-indicator: 6px;
.van-swipe {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
&__indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
&__indicator {
width: 5px;
height: 5px;
display: inline-block;
border-radius: 100%;
background: $gray-dark;
opacity: .8;
margin: 0 3px;
z-index: 1;
&--active {
background: $orange;
opacity: 1;
}
}
&__items {
position: relative;
overflow: hidden;
height: 100%;
}
position: relative;
user-select: none;
&-item {
display: none;
float: left;
height: 100%;
width: 100%;
text-align: center;
}
img {
width: 100%;
height: auto;
&__track {
height: 100%;
overflow: hidden;
}
&__indicators {
left: 50%;
bottom: 10px;
position: absolute;
height: $van-swipe-indicator;
transform: translate3d(-50%, 0, 0);
> i {
border-radius: 100%;
vertical-align: top;
display: inline-block;
background-color: $gray-dark;
width: $van-swipe-indicator;
height: $van-swipe-indicator;
&:not(:last-child) {
margin-right: $van-swipe-indicator;
}
}
&:first-child {
display: block;
.van-swipe__indicator {
&--active {
background-color: $orange;
}
}
}
}