@import 'GeneralStyle.less';

// 纯文字的列表页
// 仅有一列，无操作按钮，文字title可跳转

.nomal-table-thead {
  tr {
    th {
      .thead-font-style;
      .thead-border-style;
      background-color: @white;
      padding: 8px 0 8px 20px;
    }
  }
}

.text-table-list {
  padding: 20px 20px 0;

  .ant-table-thead {
    tr {
      th {
        .thead-font-style;
        .thead-border-style;
        background-color: @white;
        padding: 8px 0 8px 20px;
      }
    }
  }

  .ant-table-tbody {
    tr {
      td {
        .tobdy-item-border;
        padding: 16px 0 16px 20px;
        background-color: @white;

        .item-content {
          padding-right: 80px;

          .item-title {
            .tbody-item-title;
          }

          .item-description {
            .tbody-item-description;
            .text-full-width-ellipsis;
          }
        }
      }
    }
  }
}

// 带logo、有操作的列表
// 有logo、文字、button组成，有两列；
.operate-logo-table-list {
  padding: 20px 20px 0;

  .ant-table-thead {
    tr {
      th {
        .thead-font-style;
        .thead-border-style;
        padding-left: 20px;
        padding-top: 8px;
        padding-bottom: 8px;
        background-color: @white;

        &:nth-child(1) {
          width: 70%;
        }

        &:nth-child(2) {
          width: 30%;
          text-align: right;
        }
      }
    }
  }

  .ant-table-tbody {
    tr {
      td {
        .tobdy-item-border;
        background-color: @white;
        padding: 16px 0;

        &:nth-child(1) {
          width: 70%;
          padding-left: 6px;
        }

        &:nth-child(2) {
          width: 30%;

          .operate {
            float: right;
          }

          button {
            margin-left: 10px;
          }
        }

        .item-content {
          padding-left: 74px;
          width: 100%;
          position: relative;

          .item-title {
            .tbody-item-title;
            display: inline-block;
          }

          .item-description {
            .tbody-item-description;
            .text-full-width-ellipsis;
            display: block;
          }

          // logo相关
          .logo-wrapper {
            .general-logo-wrapper;
            margin-right: 0;
            position: absolute;
            left: 0;
            top: -6px;

            .logo {
              .general-app-logo;
            }
          }

          .tag {
            .general-tag;
          }
        }
      }
    }
  }
}

// 给 table 每行添加 hover 样式
.text-table-list-add-hover() {
  .ant-table-tbody {
    tr {
      background: @white;
      &:hover {
        td {
          background: rgba(198, 203, 212, 0.2);
        }
      }
      td {
        background-color: rgba(255, 255, 255, 0);
        box-shadow: inset 0 7px 0 0 rgba(255, 255, 255, 1), inset 0 -7px 0 0 rgba(255, 255, 255, 1);
      }
    }
  }
}

// 可勾选、带Logo的列表
// 勾选框为一列，logo、文字描述为一列；
.select-logo-table-list {
  .ant-table-thead {
    tr {
      th {
        .thead-font-style;
        .thead-border-style;
        background-color: @white;

        &.ant-table-selection-column {
          width: 22px;
          vertical-align: middle;
          padding: 0 0 0 6px;
        }

        &:nth-child(2) {
          .thead-font-style;
          .thead-border-style;
          padding-left: 20px;
          padding-top: 8px;
          padding-bottom: 8px;
          background-color: @white;
        }
      }
    }
  }

  .ant-table-tbody {
    tr {
      td {
        padding: 16px 0;
        .tobdy-item-border;
        background-color: @white;

        &.ant-table-selection-column {
          width: 22px;
          vertical-align: middle;
          padding: 0 0 0 6px;
        }

        &:nth-child(2) {
          .item-content {
            padding-left: 94px;
            width: 100%;
            position: relative;

            .item-title {
              .tbody-item-title;
              display: inline-block;
            }

            .item-description {
              .tbody-item-description;
              .text-full-width-ellipsis;
              display: block;
            }

            // logo相关
            .logo-wrapper {
              .general-logo-wrapper;
              margin-right: 0;
              position: absolute;
              left: 20px;
              top: -6px;

              .logo {
                .general-app-logo;
              }
            }

            .tag {
              .general-tag;
            }
          }
        }
      }
    }
  }
  .table-checkbox-with-primary-color;
}

// 可勾选，仅有文字的列表
// 勾选框为一列，文字描述为一列；
.select-text-table-list {
  .ant-table-thead {
    tr {
      th {
        .thead-font-style;
        .thead-border-style;
        background-color: @white;

        &.ant-table-selection-column {
          width: 22px;
          vertical-align: middle;
          padding: 0 0 0 6px;
        }

        &:nth-child(2) {
          .thead-font-style;
          .thead-border-style;
          padding-left: 20px;
          padding-top: 8px;
          padding-bottom: 8px;
          background-color: @white;
        }
      }
    }
  }

  .ant-table-tbody {
    tr {
      td {
        padding: 16px 0;
        .tobdy-item-border;
        background-color: @white;

        &.ant-table-selection-column {
          width: 22px;
          vertical-align: top;
          padding: 18px 0 0 6px;
        }

        &:nth-child(2) {
          .item-content {
            padding-left: 20px;
            width: 100%;

            .item-title {
              .tbody-item-title;
              display: inline-block;
            }

            .item-description {
              .tbody-item-description;
              .text-full-width-ellipsis;
              display: block;
            }
          }
        }
      }
    }
  }
  .table-checkbox-with-primary-color;
}

// 可勾选，仅有文字的列表
// 勾选框为一列，文字标题有两列
.select-text-title-table-list {
  .ant-table-thead {
    tr {
      th {
        .thead-font-style;
        .thead-border-style;
        background-color: @white;

        &.ant-table-selection-column {
          width: 22px;
          vertical-align: middle;
          padding: 0 0 0 6px;
        }

        &:nth-child(2) {
          .thead-font-style;
          .thead-border-style;
          padding-left: 20px;
          padding-top: 8px;
          padding-bottom: 8px;
          background-color: @white;
        }
      }
    }
  }

  .ant-table-tbody {
    tr {
      td {
        padding: 16px 0;
        .tobdy-item-border;
        background-color: @white;

        &.ant-table-selection-column {
          width: 22px;
          vertical-align: top;
          padding: 18px 0 0 6px;
        }

        &:nth-child(2) {
          .item-content {
            padding-left: 20px;
            width: 100%;
          }
        }

        &:nth-child(3) {
          .item-content {
            padding-right: 16px;
            width: 100%;
          }
        }
      }
    }
  }
  .table-checkbox-with-primary-color;
}

// 可勾选，仅有文字的列表
// 勾选框为一列，文字标题有多列
.select-text-titles-table-list {
  .ant-table-thead {
    tr {
      th {
        .thead-font-style;
        .thead-border-style;
        background-color: @white;

        &.ant-table-selection-column {
          width: 22px;
          vertical-align: middle;
          padding: 0 0 0 6px;
        }

        &:nth-child(2) {
          .thead-font-style;
          .thead-border-style;
          padding-left: 20px;
          padding-top: 8px;
          padding-bottom: 8px;
          background-color: @white;
        }
      }
    }
  }

  .ant-table-tbody {
    tr {
      td {
        padding: 16px 0;
        .item-content {
          padding-left: 16px;
          width: 100%;
        }
        .tobdy-item-border;
        background-color: @white;

        &.ant-table-selection-column {
          width: 22px;
          vertical-align: top;
          padding: 18px 0 0 6px;
        }

        &:nth-child(2) {
          .item-content {
            padding-left: 20px;
            width: 100%;
          }
        }
      }
    }
  }
  .table-checkbox-with-primary-color;
}

// 新表单
// 如部门已停用列表
@table-v2-thead-font-color: #838f99;
@table-v2-tbody-font-color: #5b5b5b;
@table-v2-border-color: #e8eaed;
.table-v2-normal-td-th {
  font-size: 14px;
  line-height: 24px;
  padding: 8px 0;
}
.table-v2 {
  position: relative;
  .ant-table-thead {
    tr {
      th {
        .table-v2-normal-td-th;
        font-weight: 400;
        background: @white;
        color: @table-v2-thead-font-color;
        border-bottom: 1px solid @table-v2-border-color;
        &:first-child {
          padding-left: 24px;
        }
        &:last-child {
          padding-left: 24px;
        }
      }
    }
  }
  .ant-table-tbody {
    tr {
      border-bottom: none;
      .tbody-cell {
        .text-full-width-ellipsis;
        height: 40px;
        transition: all 0.3s;
      }
      td {
        .table-v2-normal-td-th;
        line-height: 40px;
        color: @table-v2-tbody-font-color;
        border-bottom: 1px solid @table-v2-border-color;
        &:first-child {
          .tbody-cell {
            padding-left: 24px;
          }
        }
        &:last-child {
          .tbody-cell {
            padding-right: 24px;
          }
        }
      }
      &:hover {
        background-color: @white;
        td {
          background-color: @white;
        }
        .tbody-cell {
          background-color: #f4f5f7;
        }
      }
    }
  }
  //&:before {
  //  content: ' ';
  //  display: block;
  //  position: absolute;
  //  height: 2px;
  //  top: 40px;
  //  left: -40px;
  //  right: -40px;
  //  background-color: @table-v2-border-color;
  //  z-index: 100;
  //}
}