@import "../public/public.less";
@import "../public/header.less";

//侧滑列表
    .user-list{
        width: 100%;
        height: 100%;
        overflow: auto;
        position: absolute;
        top: 44px;
        bottom: 0;
        left: 0;
        height: auto;   
    }   
    .user-list-scroll .user-list-row{     
        position: relative;
        overflow: hidden;
        .user-list-handle{
            position: relative;
            .transition(left 0.4s ease);
            left: 0;
            background-color: @BODY-BG-COLOR;
            padding: 15px 20px;
            .display-box();
            .box-vertical-alignment();
            z-index: 2;
            .user-list-image{
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }   
            .user-list-icon{
                margin-right: 10px;
                .iconfont(@SWIPELIST-COMPONENT-ICON-FONTSIZE);
            }
            div{
                .flex();
                min-width: 0;
            }
            .user-list-title{
                .text_oneRow_ellipsis();
            }   
            .user-sub-image{
                width: 17px;
                height: 17px;
            }
            .user-list-subtitle{
                .text_oneRow_ellipsis();
                display: inline-block;
            }   
            &.user-list-selected{
                left: -120px;
            }  
            &:after{
                content: "\e611";
                display: block;
                .iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
                .transform(rotate(180deg));
            }                    
        }
        .user-list-button{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 1;
            div{
                width: 60px;
                height: 100%;
                .display-box();
                .box-horizontal-alignment();
                .box-vertical-alignment();
                color: @SWIPELIST-COMPONENT-BUTTON-COLOR;
                float: left;
                &:nth-last-of-type(1){
                    background-color: transparent;
                    .iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
                    color: #00FFFF;
                }
            }
        }                   
        &:after{
            .defaultBorder();
            z-index: 2;
            .white_gradient_border();
        }
    }
