wetrade-design/lib/table/style/bordered.less

一款多语言支持Vue3的UI框架

@import './size';
@import (reference) '../../style/themes/index';
@table-prefix-cls: ~'@{wd-prefix}-table';
// @scrollbar-prefix-cls: ~'@{wd-prefix}-scroll';

@table-header-border: @border-width-base @border-style-base @table-header-border-color;
@table-body-border: @border-width-base @border-style-base @table-body-border-color;

.@{table-prefix-cls}.@{table-prefix-cls}-bordered {
  // ============================ Title =============================
  > .@{table-prefix-cls}-title {
    border: @table-header-border;
    border-bottom: 0;
  }

  > .@{table-prefix-cls}-container {
    // ============================ Content ============================
    // border-left: @table-body-border;

    > .@{table-prefix-cls}-content,
    > .@{table-prefix-cls}-header,
    > .@{table-prefix-cls}-body,
    > .@{table-prefix-cls}-summary {
      table {
        // ============================= Cell =============================
        > thead > tr > th,
        > tfoot > tr > th,
        > tfoot > tr > td {
          border-right: @table-header-border;
        }
        // ============================ Header ============================
        > thead {
          > tr:not(:last-child) > th {
            border-bottom: @border-width-base @border-style-base @table-header-border-color;
          }

          > tr > th {
            &::before {
              background-color: transparent !important;
            }

            &:first-of-type {
              border-left: @table-body-border;
            }
          }
        }

        > tbody > tr > td {
          border-right: @table-body-border;
        }
        > tbody > tr > td.@{table-prefix-cls}-cell-col-index-0 {
          border-left: @table-body-border;
        }

        // Fixed right should provides additional border
        > thead > tr,
        > tbody > tr,
        > tfoot > tr {
          > .@{table-prefix-cls}-cell-fix-right-first::after {
            border-right: @table-body-border;
          }
        }
      }

      // ========================== Expandable ==========================
      table > tbody > tr > td {
        > .@{table-prefix-cls}-expanded-row-fixed {
          margin: -@table-padding-vertical (-@table-padding-horizontal - @border-width-base);

          &::after {
            position: absolute;
            top: 0;
            right: @border-width-base;
            bottom: 0;
            border-right: @table-body-border;
            content: '';
          }
        }
      }
    }

    > .@{table-prefix-cls}-content,
    > .@{table-prefix-cls}-header {
      table {
        border-top: @table-header-border;
      }
    }
  }

  &.@{table-prefix-cls}-scroll-horizontal {
    > .@{table-prefix-cls}-container > .@{table-prefix-cls}-body {
      table > tbody {
        > tr.@{table-prefix-cls}-expanded-row,
        > tr.@{table-prefix-cls}-placeholder {
          > td {
            border-right: 0;
          }
        }
      }
    }
  }

  // Size related
  &.@{table-prefix-cls}-middle {
    > .@{table-prefix-cls}-container {
      > .@{table-prefix-cls}-content,
      > .@{table-prefix-cls}-body {
        table > tbody > tr > td {
          > .@{table-prefix-cls}-expanded-row-fixed {
            margin: -@table-padding-vertical-md (-@table-padding-horizontal-md - @border-width-base);
          }
        }
      }
    }
  }

  &.@{table-prefix-cls}-small {
    > .@{table-prefix-cls}-container {
      > .@{table-prefix-cls}-content,
      > .@{table-prefix-cls}-body {
        table > tbody > tr > td {
          > .@{table-prefix-cls}-expanded-row-fixed {
            margin: -@table-padding-vertical-sm (-@table-padding-horizontal-sm - @border-width-base);
          }
        }
      }
    }
  }

  // ============================ Footer ============================
  > .@{table-prefix-cls}-footer {
    border: @table-header-border;
    border-top: 0;
  }

  &.@{table-prefix-cls}-empty {
    &
      > .@{table-prefix-cls}-container
      > .@{table-prefix-cls}-body
      table
      > tbody
      > tr
      > td
      > .@{table-prefix-cls}-expanded-row-fixed::after {
      border: none;
    }
    &.@{table-prefix-cls}-scroll-horizontal
      > .@{table-prefix-cls}-container
      > .@{table-prefix-cls}-body
      table
      > tbody
      > tr.@{table-prefix-cls}-placeholder
      > td {
      border: none;
    }

    // .@{table-prefix-cls}-header {
    // border-left: @table-body-border;
    // border-right: @table-body-border;
    // }
    & > .@{table-prefix-cls}-container > .@{table-prefix-cls}-content table > thead > tr > th,
    & > .@{table-prefix-cls}-container > .@{table-prefix-cls}-header table > thead > tr > th {
      &:last-of-type {
        border-right: none;
      }

      &:first-of-type {
        border-left: none;
      }
    }

    & > .@{table-prefix-cls}-container > .@{table-prefix-cls}-content table > tbody > tr > td {
      &:first-of-type {
        border: none;
      }
    }
  }
}

.@{table-prefix-cls}-cell {
  // ============================ Nested ============================
  .@{table-prefix-cls}-container:first-child {
    // :first-child to avoid the case when bordered and title is set
    border-top: 0;
  }

  &-scrollbar {
    box-shadow: 0 @border-width-base 0 @border-width-base @table-header-bg;
  }
}