.f-template-listview-demo{
    padding: 2rem;
    &.f-template-listview-demo-fill{
        height: 600px;
        display: flex;
        flex-direction:column;
        .demo-title{
            flex-shrink:0;
        }
        .listview-example-wrapper{
            flex: 1 1 0;
        }
    }
    .listview-header{
        margin-bottom: 14px;
        .add-list{
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #999;
            border: 1px dotted #ccc;
        }
        .search-wrapper{
            .search-group{
                width: 100%;
                margin: 0 0 10px;
                display: flex;
                position: relative;
                flex-wrap: wrap;
                align-items: stretch;
                .search-input{
                    flex: 1 1 auto;
    
                }
            }
            .search-result{
                margin-top: 10px;
                font-size: 14px;
                color: #999;
                line-height: 22px;
            }
        }
        .sort-wrapper{
            .sort-group{
                display: flex;
                flex-direction: row;
                padding: 10px 0;
                margin: 0 0 10px;
                border-bottom: 1px solid #ddd;
                .sort-type{
                    flex: 1;
                    font-size: 14px;
                    line-height: 22px;
                    text-align: center;
                    border-right: 1px solid #ddd;
                    &:last-child{
                        border-right: 0;
                    }
                    &.sort-ascending a,&.sort-ascending a:hover{
                        color: #388FFF;
                        
                    }
                    a{
                        padding: 0 20px;
                        &:hover{
                            color: #57708d;
                        }
                    }
                }
            }
        }
    }
    .list-view-footer{
        margin-top: 14px;
        .explain{
            margin: 0;
            line-height: 22px;
            font-size: 14px;
            color: #999;
        }
    }
}