wfquery/demo/arrangement/phone.less

like jQuery but just for new browser

@border-color: #ea0;
@panel-color: #d2d2d2;
@scrollbar-color: #999;
.phone{
    margin: 0 auto;
    border: 2px solid @border-color;
    overflow: hidden;
    &:focus{
        box-shadow: 0 0 20px @border-color;
        outline: none;
    }
    &.iphone{
        border-radius: 25px;
        .header{
            height: 40px;
            background: #fff;
            position: relative;
            &:before{
                display: block;
                background: @panel-color;
                width: 80px;
                height: 10px;
                border-radius: 5px;
                content: " ";
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -3px -40px;
            }
        }
        .footer{
            background: #fff;
            height: 30px;
        }   
    }
}

.screen{
    position: relative;
    z-index: 1;
    background: @panel-color;
    ul,li{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    li{
        &.onedit{
            opacity: .3;
        }
        width: percentage( 1 / 3 );
        height: percentage( 1 / 3 );
        position: relative;
        overflow: hidden;
        float: left;
        img{
            width: 100%;
            position: absolute;
        }
        &.size-1-1{
            width: percentage( 1 / 9 );
            height: percentage( 1 / 6 );    
        }
        &.size-1_5-1{
            width: percentage( 1.5 / 9 );
            height: percentage( 1 / 6 );    
        }
        &.size-2-2{
            width: percentage( 2 / 9 );
            height: percentage( 2 / 6 );    
        }
        &.size-3-1{
            width: percentage( 3 / 9 );
            height: percentage( 1 / 6 );    
        }
        &.size-3-2{
            width: percentage( 3 / 9 );
            height: percentage( 2 / 6 );    
        }
        &.size-3-3{
            width: percentage( 3 / 9 );
            height: percentage( 3 / 6 );    
        }
        &.size-6-4{
            width: percentage( 6 / 9 );
            height: percentage( 4 / 6 );    
        }
    
        //垂直偏移
        &.margin-1{
            margin-top: percentage( -1 / 6 );    
        }
        &.margin-2{
            margin-top: percentage( -2 / 6 );    
        }
        &.margin-3{
            margin-top: percentage( -3 / 6 );    
        }
        &.margin-4{
            margin-top: percentage( -4 / 6 );    
        }
    }
}

.edit-holder{
    position:absolute;
    background:green;
    opacity:.6;
    z-index:2;
    cursor: move;
}

::-webkit-scrollbar{
    width: 0;
}