lojk-ui
Version:
lojk vue ui components library
49 lines (46 loc) • 959 B
text/less
@import (reference) "../../style/config";
@register: lotus-switch;
.@{register} {
//开关按钮
.widthSingle(82);
.heightSingle(48);
border: 1px solid #dfdfdf;
background-color: #dfdfdf;
.borderRadius(24);
position: relative;
&:before {
content: '';
z-index: 1;
position: absolute;
top: 0;
left: 0;
.widthSingle(82);
.heightSingle(48);
.borderRadius(24);
transition: transform .3s;
background-color: #fdfdfd;
}
&:after {
content: '';
z-index: 2;
position: absolute;
left: 0;
top: 0;
transition: transform .3s;
.widthSingle(48);
.heightSingle(48);
.borderRadius(24);
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
&-act {
border-color: #09bb07;
background-color: #09bb07;
&:before {
transform: scale(0);
}
&:after {
.transformXRem(34);
}
}
}