tutorial / directive

@xn-font-family:'Microsoft YaHei', Verdana, sans-serif, 'SimSun';

//字体大小
@xn-font-size-sm:12px;    //小号字体
@xn-font-size: 14px;      //默认字体大小 行高20px
@xn-font-size-lg: 16px;  //主导航

//h1-h6
@H1:24px;
@H2:18px;
@H3:14px;



@xn-xn:#666;    //犀牛形象
@xn-theme:#3399ff;    //页面上看到的蓝色基本上是主色
@xn-bg-color:ffff;

@xn-minor-blue:#3399ff;      //蓝色
@xn-minor-red:#ea281a;       //颜色
@xn-minor-orange:#ff9900;   //黄色
@xn-minor-green:#1aad3e;    //绿色

//文字颜色
@xn-font-primary:#333333;       //字体颜色
@xn-font-minor:#666666;         //次要
@xn-font-auxiliary:#999999;     //辅助颜色

@xn-font-blue:#3399ff;        //字体黄色
@xn-font-orange:#ff9900;        //字体黄色
@xn-font-red:#ea281a;           //字体红色
@xn-font-green:#1aad3e;         //字体绿色
@xn-font-white:#ffffff;         //字体白色

@xn-placeholder:#dddddd;        //提示颜色及文案等等。


//边框
@xn-bc:#dddddd;                 //边颜色
@box-shadow-color:e5e5e5;     //阴影颜色
@xn-line-color:#eeeeee;       //线颜色


//状态
@xn-box-success-icon:#1aad3e;   //成功
@xn-box-success-bd:#c6eacf;     //成功边
@xn-box-success-bg:#e8f7eb;     //成功背景

@xn-box-error-icon:#ea281a;   //失败
@xn-box-error-bd:#f9c9c6;     //失败边
@xn-box-error-bg:#fde9e8;     //失败背景

@xn-box-warn-icon:#ff9900;   //警告
@xn-box-warn-bd:#ffe5bf;     //成功边
@xn-box-warn-bg:#ffff5e5;     //失败背景


@xn-box-info-icon:#ff9900;   //提醒
@xn-box-info-bd:#ffe5bf;     //提醒
@xn-box-info-bg:#ffff5e5;     //提醒背景

//连接
@xn-link-normal:#3399ff;    //链接色
@xn-link-hover:#66b3ff;     //鼠标移动上去
@xn-link-click:#3366cc;     //鼠标点击效果
@xn-link-visited:#003366;   //激活


//按钮
//主引导
@xn-btn-primary-text:#fff;          //文字
@xn-btn-primary-normal:#3399ff;    //默认颜色
@xn-btn-primary-hover:#66b3ff;     //鼠标移动
@xn-btn-primary-click:#3366cc;     //鼠标点击

//普通
@xn-btn-default-text:#333333;          //文字
@xn-btn-default-normal:#ddd;    //默认颜色
@xn-btn-default-hover:#eee;     //鼠标移动
@xn-btn-default-click:#ccc;     //鼠标点击

//禁止点击
@xn-btn-disable-text:#333333;          //文字
@xn-btn-disable:#ddd;    //默认颜色

//特殊按钮
@xn-btn-highlight-text:#ffffff;   //特殊的按钮
@xn-btn-highlight-normal:#ff9900;
@xn-btn-highlight-hover:#ffb340;
@xn-btn-highlight-click:#ff6600;

//删除的按钮
@xn-btn-danger-text:#ffffff;
@xn-btn-danger-normal:#ea281a;
@xn-btn-danger-hover:#ee5e53;
@xn-btn-danger-click:#cc0000;


//进度条
@xn-step-done:#99ccff;    //已完成
@xn-step-doing:#3399ff;  //进行中
@xn-step-undo:#eeeeee;   //未进行


@xn-header-bg:#333;           //头部背景

@xn-main-nav-bg:#333;       //一级导航
@xn-subnav-bg:#ececf1;    //二级导航

//表格
@xn-main-table-bg:#ececf1;  //主表格
@xn-minor-table-bg:#ececf1; //次表格

//必填
@xn-star:#ea281a;


//手形状《
@xn-cursor: pointer;

//边线
@xn-solid:solid;
@xn-dotted:dotted;
@xn-dashed:dashed;

@xn-border:1px @xn-solid @xn-bc;

//函数
.box-shadow(@xn-left:0px,@xn-top:1px,@xn-blur:2px,@xn-color:#e5e5e5,@xn-inset:outset){
  box-shadow:@xn-left,@xn-top,@xn-blur,@xn-color,@xn-inset;
  -moz-box-shadow:@xn-left,@xn-top,@xn-blur,@xn-color,@xn-inset;
  -webkit-box-shadow:@xn-left,@xn-top,@xn-blur,@xn-color,@xn-inset;
  -khtml-box-shadow:@xn-left,@xn-top,@xn-blur,@xn-color,@xn-inset;
}

//圆角
.radius(){
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  -khtml-border-radius: 50%;
}

.border-radius(@xn-radius:2px){
  border-radius:@xn-radius;
  -moz-border-radius:@xn-radius;
  -webkit-border-radius:@xn-radius;
  -khtml-border-radius: @xn-radius;
}

//图片路径
@xn-img-location:"https://cdn.xiniunet.com/";

//文字排版位置
.text-align(@xn-state:left){
  text-align: @xn-state;
}

//浮动
.float(@xn-state:left){
  float: @xn-state;
}

//块级与行级元素设置
.display(@xn-state:inline-block){
  display: @xn-state;
}

.font-weight(@xn-state:bold){
  font-weight:@xn-state;
}

//宽度

@xn-width:1190px;




/*----------------------------------公共基础设置----------------------------------------------*/
@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;
  color:@xn-font-primary;
  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: content-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: 20px;
  padding: 5px 0;
  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-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}


//栅格系统
.xn-col-md-1 {
  width: 4.1666666%!important;
}
.xn-col-md-2 {
  width: 8.3333332%!important;
}
.xn-col-md-3 {
  width: 12.4999998%!important;
}
.xn-col-md-4 {
  width: 16.6666664%!important;
}
.xn-col-md-5 {
  width: 20.833333%!important;
}
.xn-col-md-6 {
  width: 24.9999996%!important;
}
.xn-col-md-7 {
  width: 29.1666662%!important;
}
.xn-col-md-8 {
  width: 33.3333328%!important;
}
.xn-col-md-9 {
  width: 37.4999994%!important;
}
.xn-col-md-10 {
  width: 41.666666%!important;
}
.xn-col-md-11 {
  width: 45.8333326%!important;
}
.xn-col-md-12 {
  width: 49.9999992%!important;
}
.xn-col-md-13 {
  width: 54.166666%!important;
}
.xn-col-md-14 {
  width: 58.3333324%!important;
}
.xn-col-md-15 {
  width: 62.499999%!important;
}
.xn-col-md-16 {
  width: 66.6666656%!important;
}
.xn-col-md-17 {
  width: 70.8333322%!important;
}
.xn-col-md-18 {
  width: 74.9999988%!important;
}
.xn-col-md-19 {
  width: 79.1666654%!important;
}
.xn-col-md-20 {
  width: 83.333332%!important;
}
.xn-col-md-21 {
  width: 87.4999986%!important;
}
.xn-col-md-22 {
  width: 91.6666652%!important;
}
.xn-col-md-23 {
  width: 95.8333318%!important;
}
.xn-col-md-24 {
  width: 100%!important;
}

.xn-col-md-offset-0 {
  margin-left: 0%!important;
}
.xn-col-md-offset-1 {
  margin-left: 4.1666666%!important;
}
.xn-col-md-offset-2 {
  margin-left: 8.3333332%!important;
}
.xn-col-md-offset-3 {
  margin-left: 12.4999998%!important;
}
.xn-col-md-offset-4 {
  margin-left: 16.6666664%!important;
}
.xn-col-md-offset-5 {
  margin-left: 20.833333%!important;
}
.xn-col-md-offset-6 {
  margin-left: 24.9999996%!important;
}
.xn-col-md-offset-7 {
  margin-left: 29.1666662%!important;
}
.xn-col-md-offset-8 {
  margin-left: 33.3333328%!important;
}
.xn-col-md-offset-9 {
  margin-left: 37.4999994%!important;
}
.xn-col-md-offset-10 {
  margin-left: 41.666666%!important;
}
.xn-col-md-offset-11 {
  margin-left: 45.8333326%!important;
}
.xn-col-md-offset-12 {
  margin-left: 49.9999992%!important;
}
.xn-col-md-offset-13 {
  margin-left: 54.166666%!important;
}
.xn-col-md-offset-14 {
  margin-left: 58.3333324%!important;
}
.xn-col-md-offset-15 {
  margin-left: 62.499999%!important;
}
.xn-col-md-offset-16 {
  margin-left: 66.6666656%!important;
}
.xn-col-md-offset-17 {
  margin-left: 70.8333322%!important;
}
.xn-col-md-offset-18 {
  margin-left: 74.9999988%!important;
}
.xn-col-md-offset-19 {
  margin-left: 79.1666654%!important;
}
.xn-col-md-offset-20 {
  margin-left: 83.333332%!important;
}
.xn-col-md-offset-21 {
  margin-left: 87.4999986%!important;
}
.xn-col-md-offset-22 {
  margin-left: 91.6666652%!important;
}
.xn-col-md-offset-23 {
  margin-left: 95.8333318%!important;
}
.xn-col-md-offset-24 {
  margin-left: 100%!important;
}

/*整体加*/
[class*="xn-col-md-"], [class*="xn-col-sm-"] {
  float:left;
  padding:0 5px;
  min-height: 1px;
}
.xn-row{
  margin: 0 -5px;
}



/**
* @xn-grid-width  ：外层总宽度
* @grid-number： 第几个栅格系统。
* @grid-total： 共分为多少栏目。
*
*/

//.grid(@grid-number:1,@xn-grid-width:1190,@grid-total:24,@grid-spacing:10){
//    margin-right : @grid-spacing px;
//    width: (@xn-width+@grid-spacing)/@grid-total*@grid-number-@grid-spacing px;
//}

.grid(@grid-number:1){
  width:(((@xn-width+10)/24*@grid-number)-10);
}

.grid-offset(@grid-number:1){
  margin-left:((@xn-width+10)/24*@grid-number);
}

.xn-grid-layout{
  .xn-grid-1{
    .grid(1)
  }
  .xn-grid-2{
    .grid(2)
  }
  .xn-grid-3{
    .grid(3)
  }
  .xn-grid-4{
    .grid(4)
  }
  .xn-grid-5{
    .grid(5)
  }
  .xn-grid-6{
    .grid(6)
  }
  .xn-grid-7{
    .grid(7)
  }
  .xn-grid-8{
    .grid(8)
  }
  .xn-grid-9{
    .grid(9)
  }
  .xn-grid-10{
    .grid(10)
  }
  .xn-grid-11{
    .grid(11)
  }
  .xn-grid-12{
    .grid(12)
  }
  .xn-grid-13{
    .grid(13)
  }
  .xn-grid-14{
    .grid(14)
  }
  .xn-grid-15{
    .grid(15)
  }
  .xn-grid-16{
    .grid(16)
  }
  .xn-grid-17{
    .grid(17)
  }
  .xn-grid-18{
    .grid(18)
  }
  .xn-grid-19{
    .grid(19)
  }
  .xn-grid-20{
    .grid(20)
  }
  .xn-grid-21{
    .grid(21)
  }
  .xn-grid-22{
    .grid(22)
  }
  .xn-grid-23{
    .grid(23)
  }
  .xn-grid-24{
    .grid(24)
  }

  //左边间距
  .xn-grid-offset-1{
    .grid-offset(1)
  }
  .xn-grid-offset-2{
    .grid-offset(2)
  }
  .xn-grid-offset-3{
    .grid-offset(3)
  }
  .xn-grid-offset-4{
    .grid-offset(4)
  }
  .xn-grid-offset-5{
    .grid-offset(5)
  }
  .xn-grid-offset-6{
    .grid-offset(6)
  }
  .xn-grid-offset-7{
    .grid-offset(7)
  }
  .xn-grid-offset-8{
    .grid-offset(8)
  }
  .xn-grid-offset-9{
    .grid-offset(9)
  }
  .xn-grid-offset-10{
    .grid-offset(10)
  }
  .xn-grid-offset-11{
    .grid-offset(11)
  }
  .xn-grid-offset-12{
    .grid-offset(12)
  }
  .xn-grid-offset-13{
    .grid-offset(13)
  }
  .xn-grid-offset-14{
    .grid-offset(14)
  }
  .xn-grid-offset-15{
    .grid-offset(15)
  }
  .xn-grid-offset-16{
    .grid-offset(16)
  }
  .xn-grid-offset-17{
    .grid-offset(17)
  }
  .xn-grid-offset-18{
    .grid-offset(18)
  }
  .xn-grid-offset-19{
    .grid-offset(19)
  }
  .xn-grid-offset-20{
    .grid-offset(20)
  }
  .xn-grid-offset-21{
    .grid-offset(21)
  }
  .xn-grid-offset-22{
    .grid-offset(22)
  }
  .xn-grid-offset-23{
    .grid-offset(23)
  }
  .xn-grid-offset-24{
    .grid-offset(24)
  }
}
.xn-grid-layout [class*="xn-grid-"]{
  float:left;
  margin-right: 10px;
  min-height: 1px;
}
.xn-grid-layout [class*="xn-grid-"]:last-child{
  margin-right: 0;
}
.xn-grid-layout:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}