tutorial / directive

@import "variables.less";
/*表格*/
.xn-table-wrap {
  margin: 0;
  padding: 0;
  font-size: @xn-font-size;

  .table {
    border: none;
    margin-bottom: 0;

    thead {
      tr {
        border-top: solid 1px transparent;
        border-bottom: solid 1px transparent;
        th {
          border: none;
          font-size: 14px;
          color: @xn-font-primary;
          font-weight: normal;
        }
      }
    }
    tbody {
      tr {
        /*height: 70px;*/
        border-bottom: solid 1px @xn-line-color;

        .selectCl {
          background: #F8F8FF;
          color: @xn-font-primary;
          font-weight: bold;

          &:nth-last-child(2) {font-weight: normal;}

          &:last-child {font-weight: normal;}

          pre {
            color: @xn-font-primary;
          }
        }

        td {
          border: none;
          background: #fff;
          padding:5px 8px;
          color: @xn-font-minor;
          font-size: @xn-font-size;
          pre {color: @xn-font-minor;}

          .icon-closed {
            padding-top: 15px;
            width: 85px;
            font-size: 45px;
            line-height: 40px;
            display: inline-block;
          }
        }
      }
    }
  }

  .pagination {
    float: none;
    margin: 20px 0;
  }
}
.xn-table-wrap input[type="radio"],.xn-table-wrap input[type="checkbox"]{
  float: none;
  margin-right: 5px;
  margin-top: 7px;
}
.xn-table-wrap .table thead th{

  font-size: 16px;
  height: 30px;
  vertical-align:middle;
  line-height: 30px;
  padding: 0 8px;
  background: @xn-minor-table-bg;
}
.xn-table-wrap .table tbody  td{
  border-top:none;
  border-left:none;
  border-right:none;
  border-bottom: @xn-border;
}

.xn-table-wrap .table-bordered > thead > tr > th{
  border-bottom: @xn-border;
}
.xn-table-wrap .table-bordered > thead > tr > th,
.xn-table-wrap .table-bordered > tfoot > tr > th,
.xn-table-wrap .table-bordered > thead > tr > td,
.xn-table-wrap .table-bordered > tbody > tr > td,
.xn-table-wrap .table-bordered > tfoot > tr > td {border-color:@xn-line-color; }

.xn-table-wrap .table-striped > tbody > tr >td ,.xn-table-wrap .table-striped > tbody > tr >th{
  background: @xn-font-white;
}
.xn-table-wrap .table-striped >tbody>tr>td{
  vertical-align:middle;
  /*    word-break: break-all;*/
  color: @xn-font-minor;
  min-height: 40px;
}
.xn-table-wrap .table-striped >tbody>tr>td>i{
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 5px;
}


.xn-table-wrap .table tbody .center{
  text-align: center;
}
.xn-table-wrap .table tbody .top{
  vertical-align:top;
}
.xn-table-wrap .table tbody .state-true{
  color: #5f8459;
  font-weight: bold;
}
.xn-table-wrap .table tbody .state-false{
  color:@xn-font-red;
  font-weight: bold;
}
.xn-table-wrap .table tbody .view{
  position: relative;
  width: 92px;
}
.xn-table-wrap .table tbody .view .view-a{
  padding-left: 10px;
  text-align: left;
  width: 90px;
  height: 30px;
  line-height: 30px;
  border: 1px solid transparent;
  display: inline-block;
  cursor: pointer;
  .border-radius(4px 4px 0 0);
}
.xn-table-wrap .table tbody .view .view-a-center{
  text-align: center;
  padding-left: 0;
}
.xn-table-wrap .table tbody .view .view-a:hover{
  text-decoration: none;
  border-top: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  background: @xn-minor-orange;
  color: @xn-font-white;
}
.xn-table-wrap .table tbody .view .view-a i{
  width: 15px;
  height: 15px;
  display: inline-block;
  position: absolute;
  line-height: 30px;
  right: 5px;
}
.xn-table-wrap .table tbody .view .view-ul{
  position: absolute;
  top: 30px;
  left:1px;
  width: 90px;
  background: @xn-font-white;
  z-index: 99;
  display: none;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  .border-radius(0 0  4px 4px);
}

.xn-table-wrap .table tbody .view li{
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #bbbbbb;
  height: 30px;
}
.xn-table-wrap .table tbody .view li a{
  text-align: center;
  line-height: 30px;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}
.xn-table-wrap .table tbody .view li a:hover{
  text-decoration: none;
  background: @xn-minor-orange;
  color: @xn-font-white;
}

.xn-table-wrap .table tbody .showMessage .view-a{
  border-top: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  background: @xn-font-white;
}
.xn-table-wrap .table tbody .showMessage .view-a i{
  display: none;
}
.xn-table-wrap .table tbody .showMessage .view-ul {
  display: inline-block;
  border-bottom: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}
.xn-table-wrap .table tfoot{
  text-align: center;
  font-size: @xn-font-size;
  color: @xn-font-minor;
}

/*表格排序*/
.xn-table-wrap .order{
  margin-top: 5px;
  width: 20px;
  display: inline-block;
  float: right;
  overflow: hidden;
  margin-left: 5px;
}
.xn-table-wrap .order i.icon-upward-1,.xn-table-wrap .order i.icon-downward-1{
  text-align: center;
  float: right;
  line-height: 10px;
  font-size: @xn-font-size-sm;
  height: 10px;
  width: 100%;
  color: #dcdcdc;
  cursor: pointer;
}