//变量和mixin等 start--
.border-box(){
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.mp0(){
    margin: 0;
    padding: 0;
}
//变量和mixin等 end--

// normolize
h4 {
    line-height: 2;
}
p,strong {
    line-height: 1.5;
}

.T-vue-tree-docs{
    .border-box;
    .mp0;
    padding:15px;
    //background: rgb(237,239,233);
    * {
        .border-box;
        .mp0;
    }
    ul,ol{
        list-style:none;
    }
    h1,h2,h3,h4,h5{
        .mp0;
        width: auto;
        line-height: 1.5;
    }
    h1{
        margin: 20px 0;
        font-size:34px;
        color:#333;
        font-weight: 700;
    }

    h2{
        margin: 20px 0;
        font-size:24px;
        color:#333;
        font-weight: 600;
    }
    h3{
        margin: 15px 0;
        font-size:20px;
        color:#555;
        font-weight: 400;
        border:none;
    }

    .title-mark{
        width: auto !important;
        border-bottom:1px solid #7E43E8;

        display: inline-block;
        &:before{
            display: inline-block;
            content:'';
            width: 0;
            height: 0;
            border:6px solid #7E43E8;
            border-color: transparent #7E43E8  #7E43E8 transparent;
            vertical-align: bottom;
            margin-right:10px;
        }
    }

    .main-content{
        width: 80%;
        margin:0 auto;
        .inner-main-content{
            margin-top:30px;
        }
    }
    @media screen and(max-width:990px){
        .main-content{
            width: 100%;
        }
    }

    .example-box {
        .border-box;
        -webkit-box-shadow: 0 0 2px 0 purple;
        -moz-box-shadow: 0 0 2px 0 purple;
        box-shadow: 0 0 2px 0 purple;
        min-height: 100px;
        height:auto;
        width: 80%;
        margin:0 0 10px;
        padding:0;

        &:last-child{
            margin:0;
        }
        .example-title{
            color:#333;
            font-size:16px;
            line-height: 1.5;
        }

        .example-inner-box{
            border: 1px solid #dcdcdc;
            width: 98%;
            margin: 5px auto;
        }

        .bottom{
            .control-part{
                cursor: pointer;
                text-align: center;
                line-height: 2.5;
                //border:1px solid #c296c0;
                background: rgba(194, 150, 192, 0.73);
                border-left:none;
                border-right:none;
            }
            .code-part{
                background: rgb(244, 243, 244);
                padding:7px;
                overflow: auto;
            }
        }

        &.padding{
            padding:7px;
        }
    }

    .demo1-tree-wrapper{
        width: 100%;
        height: 180px;


    }

    .high-light-yellow{
        background:#DACFA3;
    }

    .btn{
        padding:7px 13px;
    }
    .btn-block{
        display: block;
        margin:0 0 10px;
    }
    .example-result-box{
        width: 100%;
        height:auto;
        min-height: 100px;
        max-height: 400px;
        overflow: auto;
        border:1px solid #dfdfdf;
    }
}