lojk-ui
Version:
lojk vue ui components library
44 lines (43 loc) • 854 B
CSS
.lotus-switch {
width: 1.09333333rem;
height: 0.64rem;
border: 1px solid #dfdfdf;
background-color: #dfdfdf;
border-radius: 0.32rem;
position: relative;
}
.lotus-switch:before {
content: '';
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 1.09333333rem;
height: 0.64rem;
border-radius: 0.32rem;
transition: transform 0.3s;
background-color: #fdfdfd;
}
.lotus-switch:after {
content: '';
z-index: 2;
position: absolute;
left: 0;
top: 0;
transition: transform 0.3s;
width: 0.64rem;
height: 0.64rem;
border-radius: 0.32rem;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.lotus-switch-act {
border-color: #09bb07;
background-color: #09bb07;
}
.lotus-switch-act:before {
transform: scale(0);
}
.lotus-switch-act:after {
transform: translate3d(0.45333333rem, 0, 0);
}