ph-cascade-selector
Version:
trade f2e project
90 lines (88 loc) • 2.42 kB
text/less
.translate(@distance){
-moz-transform: translate(@distance);
-webkit-transform: translate(@distance);
-ms-transform: translate(@distance);
-o-transform: translate(@distance);
transform: translate(@distance);
-moz-transition-duration: 500ms;
-wekit-transition-duration: 500ms;
-ms-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
}
.generate-translate(@n, @i: -@n) when (@i =< @n) {
.translate-@{i} {
.translate(@i * 100%);
}
.generate-translate(@n, (@i + 1));
}
.generate-translate(10);
.cascade-selector{
.cs-panel{
position: fixed;
top:0px;
bottom: 0px;
width: 100%;
overflow-y: scroll;
z-index: 500;
background-color: #ffffff;
}
.cs-item{
padding: 15px;
font-size: 13px;
border-bottom: 1px solid #d7d7d7;
position: relative;
&.disabled{
background-color: #f5f5f5;
}
.item-tip{
color: #ccc;
font-size: 12px;
float: right;
margin-right: 15px;
}
.selected-content{
color: #333;
margin-right: 15px;
float: right;
width: 150px;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
&.item-branch::after{
content: '';
display: inline-block;
width: 7px;
height: 13px;
background-image: url(./img/right-arrow.png);
background-size:7px 13px ;
position: absolute;
right: 15px;
}
&.item-leaf {
position: relative;
.item-content{
margin-left: 32px;
}
.checkbox{
display: inline-block;
width: 22px;
height: 22px;
background-image: url(./img/unchecked.png);
background-size:22px 22px ;
top: 11px;
position: absolute;
left: 15px;
}
&.active{
.checkbox{
background-image: url(./img/checked.png);
background-size:22px 22px ;
}
}
}
}
}