tutorial / directive

@import "variables.less";
/*----------------------------------公共基础设置----------------------------------------------*/
@charset "utf-8";
html,body,div,span,h1, h2, h3, h4, h5, h6, p,pre,a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, dialog, figure, footer, header,
nav, section{
    margin:0;
    padding:0;
    border:0;
    font-weight: normal;
}
body {
    font-size: @xn-font-size;
    line-height: 1.5;
    color: @xn-font-primary;
    font-family:@xn-font-family;
    background:@xn-bg-color;
    box-sizing: border-box;
}

ul,ol,li { list-style:none; }
article, aside, details, figcaption, figure, dialog,
footer, header,menu, nav, section {
    .display(block);
}
pre{
    background: transparent;
    font-family:@xn-font-family;
    font-size: @xn-font-size;
    white-space: pre-wrap;
    word-wrap: break-word;
}

a{ cursor:@xn-cursor;text-decoration: none}

//文字设置
.font-primary{color:@xn-font-primary;}
.font-minor{color:@xn-font-minor;}
.font-auxiliary{color:@xn-font-auxiliary;}

.font-blue{color:@xn-font-blue;}
.font-orange{color:@xn-font-orange;}
.font-red{color:@xn-font-red;}
.font-green{color:@xn-font-green;}
.font-white{color:@xn-font-white;}

.clearfix:after{
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
}
.auto{margin: 0 auto}

.f-left{
    .float(left)!important;
}
.f-right{
    .float(right)!important;
}
/* Remember to define your own focus styles! */
:focus { outline: 0; }

.xn-lh{
    line-height: 30px;
    min-height: 1px;
}
.xn-line{
    height: 0;
    border-top:@xn-border;
    margin: 20px 0;
    line-height: 0;
}

.xn-text-center{
    .text-align(center);
}
.xn-center{
    .text-align(center);
}
.xn-text-right{
    .text-align(right);
}
.xn-text-left{
    .text-align(left);
}
.xn-inline{
    .display();
}
.xn-block{
    .display(block);
}
.xn-input-line{
    margin-bottom: 10px;
}
.xn-input-line-lg{
    margin-bottom: 15px;
}

.xn-relative{
    position: relative;
}
.xn-absolute{
    position: absolute;
}
.none{.display(none)}

//文件上传
.file-none{
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
a img { border: none; }

.xn-cursor{
    cursor: pointer;
}


//填充
.ml-5{margin-left:5px}
.ml-10{margin-left:10px}
.ml-15{margin-left:15px}
.ml-20{margin-left:20px}
.ml-30{margin-left:30px}
.ml-50{margin-left:50px}

.mr-5{margin-right:5px}
.mr-10{margin-right:10px}
.mr-15{margin-right:15px}
.mr-20{margin-right:20px}
.mr-30{margin-right:30px}
.mr-50{margin-right:50px}

.mt-5{margin-top:5px}
.mt-10{margin-top:10px}
.mt-15{margin-top:15px}
.mt-20{margin-top:20px}
.mt-30{margin-top:30px}
.mt-50{margin-top:50px}

.mb-5{margin-bottom:5px}
.mb-10{margin-bottom:10px}
.mb-15{margin-bottom:15px}
.mb-20{margin-bottom:20px}
.mb-30{margin-bottom:30px}
.mb-50{margin-bottom:50px}

.pl-5{padding-left:5px}
.pl-10{padding-left:10px}
.pl-15{padding-left:15px}
.pl-20{padding-left:20px}
.pl-30{padding-left:30px}
.pl-50{padding-left:50px}

.pr-5{padding-right:5px}
.pr-10{padding-right:10px}
.pr-15{padding-right:15px}
.pr-20{padding-right:20px}
.pr-30{padding-right:30px}
.pr-50{padding-right:50px}

.pt-5{padding-top:5px}
.pt-10{padding-top:10px}
.pt-15{padding-top:15px}
.pt-20{padding-top:20px}
.pt-30{padding-top:30px}
.pt-50{padding-top:50px}

.pb-5{padding-bottom:5px}
.pb-10{padding-bottom:10px}
.pb-15{padding-bottom:15px}
.pb-20{padding-bottom:20px}
.pb-30{padding-bottom:30px}
.pb-50{padding-bottom:50px}

.xn-fw{
    .font-weight();
}

//特定的值
.xn-width{
    width: @xn-width;
}

/*加载中*/
#loadingInit{ position:fixed;top:0;bottom:0;left:0;right:0;z-index:10000000;background:#333 url('@{xn-img-location}img/loadingAll.gif') center center no-repeat}