/*
布局设计器
*/
.@{css-prefix}-design{
    height: 100%;
    >.@{css-prefix}-design-head {
        height: 70px;
        border-bottom:2px #0066cc solid;
        background: #ffffff;
        background: -moz-linear-gradient(top,  #ffffff 0%, #f3f8fd 50%, #e5f0fa 100%);
        background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f8fd 50%,#e5f0fa 100%);
        background: linear-gradient(to bottom,  #ffffff 0%,#f3f8fd 50%,#e5f0fa 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5f0fa',GradientType=0 );
        .clearfix();
        >.tool{
            padding:15px;
        }
    }
    >.@{css-prefix}-design-main{
        position: absolute;
        left:0;
        right:231px;
        top:72px;
        bottom:0;
        background: #666;
        padding:20px;
        .@{css-prefix}-design-area{
            height:100%;
            width:100%;
            padding:10px;
            box-sizing: border-box;
            overflow: auto;
            background: #fff;
            .@{css-prefix}-design-row{
                padding:10px 0;
            }
            .@{css-prefix}-design-col{
                border:1px #ddd dashed;
                padding: 8px;
                box-shadow: inset 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
                >.@{css-prefix}-design-col-inner{
                    min-height: 46px;
                    >.nullData{
                        line-height:36px;color:#ddd;text-align:center;position:absolute;width:100%
                    }
                }
            }
        }
    }
    >.@{css-prefix}-design-aside{
        border-left:1px #ccc solid;
        background:#f6f6f6;
        position: absolute;
        top:72px;
        right: 0;
        bottom:0;
        width:230px;
        >.@{css-prefix}-design-aside-head{
            padding:10px;
            background: #fff;
            border-bottom: 1px solid #7ac4f4;
            color: #1E81E5;
        }
        .@{css-prefix}-design-aside-msg{
            color:#1E81E5;
            padding:5px;
        }
        .@{css-prefix}-design-aside-tabs{
            text-align: center;
            padding:10px;
        }
        .@{css-prefix}-design-layoutDemo{
            padding: 5px 10px;
            >.preview{
                cursor: move;
                .clearfix();
                >.name{
                    float: left;
                    width: 60px;
                    padding:5px 0;
                }
                >.view{
                    margin-left:65px;
                    margin-bottom: 10px;
                    text-align: center;
                    .@{css-prefix}-design-col{
                        border:1px #ddd dashed;
                        background:#fff;
                        padding:5px 0;
                    }
                }
                input{
                    border:1px #ddd solid;
                    width: 100%;
                    line-height: 28px;
                    height:28px;
                }
            }
        }
        
    }
}

.@{css-prefix}-design-portal{
    border:1px #ddd solid;
    margin-bottom: 10px;
    background: #fff;
    >.@{css-prefix}-design-portal-head{
        padding:10px;
        background:#f1f1f1;
        overflow: hidden;
        cursor: move;
        >.@{css-prefix}-design-portal-tool{
            float: right;
            >.btn{
                cursor: pointer;
                &:hover{
                    color:red
                }
            }
        }
    }
    >.@{css-prefix}-design-portal-body{
        padding:0 10px;
        .@{css-prefix}-portal-panel{
            margin-bottom: 10px;
            cursor: move;
        }
        .@{css-prefix}-design-portal-add{
            padding:10px;
            text-align: center;
            background: #eff5fc;
            >.oper{
                cursor: pointer;
                color:#666;
                line-height: 24px;
                display: inline-block;
                margin: auto;
                span{
                    display: inline-block;
                    vertical-align: middle;
                }
                .iconfont{
                    font-size:24px;
                    color:#0066cc;
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }
    }
}