vue-moo/lib/component/vue/instance/table/theme.css

moo

@import 'planes/base.css';
@import 'planes/unit.css';

.moo-table {
  /* reset */
  .moo-btn {
    .btn-touch {
      background: transparent;
      border: none;
      text-shadow: none;
      color: #333;
    }
  }
}

.moo-table table {
  width: 100%;
  border-collapse: collapse;
}

.moo-table tr:hover {
  background-color: #ade5b2;
}

.moo-table tr {
  background-color: #f7fff7;

  td {
    border: 1px solid #ade5b2;
  }

  td.tb-opt {
    width: 150pxr;
    border-top: 1px solid #ade5b2;
    border-bottom: 1px solid #ade5b2;
    border-left: none;
    border-right: none;

    .moo-btn {
      position: relative;
      .btn-touch {
        color: #009d2a;
      }
      .btn-touch::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -12.5pxr;
        margin-left: 1px;
        height: 25pxr;
        border-right: 1px solid #00720b;
      }
    }
  }
  td.tb-opt:last-child {
    border-right: 1px solid #ade5b2;
    .moo-btn .btn-touch::after {
      display: none;
    }
  }
}

.moo-table .tb-head {
  background: -moz-linear-gradient(#60fd70, #00ae25, #03c817);
  background: -webkit-linear-gradient(#60fd70, #00ae25, #03c817);
  background: linear-gradient(#60fd70, #00ae25, #03c817);
  td {
    border: 1px solid #00a611;

    .moo-btn {
      .btn-touch {
        color: #eaffec;
        text-shadow: 0 0 2px #004006;

        .iconfont {
          font-size: 25pxr;
          color: #fff;
        }
      }
    }
  }
}

.moo-table .tb-opt {
  .moo-btn {
    .btn-touch {

    }
  }
}

.moo-table .no-table-data {
  padding: 20pxr;
  font-size: 12pxr;
  background-color: #efefef;
  text-align: center;
  color: #666;
}

.moo-table .tb-head-select {
  width: 60pxr;
  .moo-btn .btn-touch span{
    color: #b7e684;
  }
}

.moo-table .tb-select {
  width: 60pxr;
  background: #dfffe2;

  span {
    display: block;
    margin: 0 auto;
    width: 25pxr;
    height: 25pxr;
    font-size: 25pxr;
    color: #93c698;
  }

  span.icon-check {
    color: #00a41f;
  }
}

.moo-table .tb-selected {
  background-color: #055f9a;
}