naive-ui/styles/DataTable.scss

@import "./mixins/mixins.scss";

@mixin data-table-size-mixin () {
  @include m(small-size) {
    font-size: map-get($--n-font-size, 'medium');
    @include b(data-table-th) {
      padding: 5px 5px 5px 11px;
    }
    @include b(data-table-td) {
      padding: 5px 5px 5px 11px;
    }
  }
  @include m(medium-size) {
    font-size: map-get($--n-font-size, 'medium');
    @include b(data-table-th) {
      padding: 10px 10px 10px 16px;
    }
    @include b(data-table-td) {
      padding: 10px 10px 10px 16px;
    }
  }
  @include m(large-size) {
    font-size: map-get($--n-font-size, 'large');
    @include b(data-table-th) {
      padding: 15px 15px 15px 20px;
    }
    @include b(data-table-td) {
      padding: 15px 15px 15px 20px;
    }
  }
}

@include themes-mixin {
  @include b(data-table) {
    @include once {
      @include data-table-size-mixin();
      width: 100%;
      font-size: 14px;
      padding-bottom: 8px;
      @include e(empty) {
        height: 108px;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity .3s $--n-ease-in-out-cubic-bezier;
        @include m(hide) {
          opacity: 0;
        }
      }
      @include e(pagination) {
        margin-top: 24px;
        display: flex;
        justify-content: flex-end;
      }
    }
    @include b(data-table-wrapper) {
      @include once {
        position: relative;
        transition: border-color .3s $--n-ease-in-out-cubic-bezier;
        border-top-left-radius: $--n-data-table-border-radius;
        border-top-right-radius: $--n-data-table-border-radius;
        overflow: hidden;
        line-height: 1.75;
      }
    }
    @include b(data-table-table) {
      @include once {
        width: 100%;
        word-wrap: break-word;
        word-break: break-all;
        table-layout: fixed;
        transition: background-color .3s $--n-ease-in-out-cubic-bezier;
        border-collapse: separate;
        border-spacing: 0;
      }
      background-color: map-get($--data-table-body-background-color, 'default');
      @include b(data-table-thead) {
        @include once {
          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
        }
        background-color: map-get($--data-table-header-background-color, 'default');
      }
      @include b(data-table-tr) {
        &:hover {
          background-color: map-get($--data-table-row-background-color, 'hover');
          @include b(data-table-td) {
            background-color: map-get($--data-table-row-background-color, 'hover');
          }
        }
      }
      @include b(data-table-tr) {
        @include once {
          box-sizing: border-box;
          transition: background-color 0.3s $--n-ease-in-out-cubic-bezier;
          background-clip: padding-box;
          &:last-child {
            @include b(data-table-td) {
              &::after {
                bottom: 0 !important;
              }
              &::before {
                bottom: 0 !important;
              }
            }
          }
        }
      }
      @include b(data-table-td) {
        @include once {
          text-align: left;
          box-sizing: border-box;
          border: none;
          transition:
            box-shadow .3s $--n-ease-in-out-cubic-bezier,
            background-color .3s $--n-ease-in-out-cubic-bezier,
            border-color .3s $--n-ease-in-out-cubic-bezier,
            color .3s $--n-ease-in-out-cubic-bezier;
          @include m(ellipsis) {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          @include m(fixed-left) {
            left: 0;
            position: sticky;
            z-index: 2;
            &::after {
              content: "";
              width: 16px;
              display: inline-block;
              position: absolute;
              top: 0;
              bottom: -1px;
              transition: box-shadow .2s $--n-ease-in-out-cubic-bezier;
              right: -16px;
            }
          }
          @include m(fixed-right) {
            right: 0;
            position: sticky;
            &::before {
              content: "";
              width: 16px;
              display: inline-block;
              position: absolute;
              top: 0;
              bottom: -1px;
              transition: box-shadow .2s $--n-ease-in-out-cubic-bezier;
              left: -16px;
            }
          }
        }
        background-color: map-get($--data-table-body-background-color, 'default');
        @include m(shadow-before) {
          &::before {
            box-shadow: inset -16px 0 12px -16px $--data-table-fixed-column-box-shadow-color;
          }
        }
        @include m(shadow-after) {
          border-right-color: transparent !important;
          &::after {
            box-shadow: inset 16px 0 12px -16px $--data-table-fixed-column-box-shadow-color;
          }
        }
        color: $--data-table-body-text-color;
        border-bottom: 1px solid map-get($--data-table-border-color, 'default');
      }
      @include b(data-table-th) {
        @include once {
          position: relative;
          text-align: left;
          font-weight: $--n-strong-weight;
          box-sizing: border-box;
          transition:
            border-color .3s $--n-ease-in-out-cubic-bezier,
            color .3s $--n-ease-in-out-cubic-bezier,
            background-color .3s $--n-ease-in-out-cubic-bezier;
          @include m(filterable) {
            padding-right: 36px;
          }
          @include e(ellipsis) {
            display: inline-block;
            vertical-align: middle;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            max-width: 100%;
          }
        }
        background-color: map-get($--data-table-header-background-color, 'default');
        border-color: map-get($--data-table-border-color, 'default');
        color: $--data-table-header-text-color;
        @include m(sortable) {
          @include once {
            cursor: pointer;
            @include e(ellipsis) {
              max-width: calc(100% - 18px);
            }
          }
          &:hover {
            background-color: map-get($--data-table-header-background-color, 'hover');
          }
        }
        @include m(fixed-left) {
          left: 0;
          position: sticky;
          z-index: 2;
          &::after {
            content: "";
            width: 16px;
            display: inline-block;
            position: absolute;
            top: 0;
            bottom: 0;
            transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
            right: -16px;
          }
        }
        @include m(fixed-right) {
          right: 0;
          position: sticky;
          z-index: 1;
          &::before {
            content: "";
            width: 16px;
            display: inline-block;
            position: absolute;
            top: 0;
            bottom: 0;
            transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
            left: -16px;
          }
        }
        @include m(shadow-before) {
          &::before {
            box-shadow: inset -16px 0 12px -16px $--data-table-fixed-column-box-shadow-color;
          }
        }
        @include m(shadow-after) {
          border-right-color: transparent !important;
          &::after {
            box-shadow: inset 16px 0 12px -16px $--data-table-fixed-column-box-shadow-color;
          }
        }
      }
    }
    @include m(single-column) {
      @include b(data-table-wrapper) {
        @include b(data-table-table){
          @include b(data-table-tr) {
            @include b(data-table-td) {
              border-bottom: 0px solid map-get($--data-table-border-color, 'default') !important;
              &::after {
                bottom: 0 !important;
              }
              &::before {
                bottom: 0 !important;
              }
            }
          }
        }
      }
    }
    @include not-m(single-line) {
      @include b(data-table-wrapper) {
        @include b(data-table-table){
          @include b(data-table-th) {
            border-right: 1px solid map-get($--data-table-border-color, 'default');
            &:last-child {
              border-right: 0px solid map-get($--data-table-border-color, 'default');
            }
          }
          @include b(data-table-td) {
            border-right: 1px solid map-get($--data-table-border-color, 'default');
            &:last-child {
              border-right: 0px solid map-get($--data-table-border-color, 'default');
            }
          }
        }
      }
    }
    @include m(bordered) {
      @include b(data-table-wrapper) {
        overflow: hidden;
        border: 1px solid map-get($--data-table-border-color, 'default');
        border-bottom-left-radius: $--n-data-table-border-radius;
        border-bottom-right-radius: $--n-data-table-border-radius;
        @include b(data-table-table){
          @include b(data-table-tr) {
            &:last-child {
              @include b(data-table-td) {
                border-bottom: 0px solid map-get($--data-table-border-color, 'default');
              }
            }
          }
        }
      }
    }
    @include b(scrollbar-content) {
      overflow: visible;
    }
    @include b(data-table-base-table-header) {
      @include once {
        transition: border-color .3s $--n-ease-in-out-cubic-bezier;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
        scrollbar-width: none;
      }
      border-bottom: 1px solid map-get($--data-table-border-color, 'default');
      @include b(data-table-th) {
        @include b(data-table-sort-button) {
          @include once {
            height: 14px;
            width: 14px;
            margin-left: 4px;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            @include e(asc-icon) {
              bottom: calc(50% - 2px);
              left: 0;
            }
            @include e(desc-icon) {
              top: calc(50% - 2px);
              left: 0;
            }
          }
          @include m(asc) {
            @include e(asc-icon) {
              fill: map-get($--data-table-button-color, 'active');
            }
          }
          @include m(desc) {
            @include e(desc-icon) {
              fill: map-get($--data-table-button-color, 'active');
            }
          }
          @include e(asc-icon, desc-icon) {
            @include once {
              transition: fill .3s $--n-ease-in-out-cubic-bezier;
              position: absolute;
            }
            fill: map-get($--data-table-button-color, 'default');
          }
        }
        @include b(data-table-filter-button) {
          @include once {
            position: absolute;
            z-index: auto;
            right: 0;
            width: 36px;
            top: 0;
            bottom: 0;
            cursor: pointer;
          }
          @include e(icon-wrapper) {
            @include once {
              position: absolute;
              z-index: auto;
              right: 0;
              left: 0;
              top: 0;
              bottom: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: background-color .3s $--n-ease-in-out-cubic-bezier;
            }
            &:hover {
              background-color: map-get($--data-table-icon-button-background-color, 'hover');
            }
            @include b(icon) {
              @include once {
                font-size: 12px;
              }
              fill: map-get($--data-table-button-color, 'default');
              stroke: map-get($--data-table-button-color, 'default');
            }
          }
          @include m(popover-visible) {
            @include e(icon-wrapper) {
              background-color: map-get($--data-table-icon-button-background-color, 'hover');
            }
          }
          @include m(active) {
            @include e(icon-wrapper) {
              background-color: map-get($--data-table-icon-button-background-color, 'hover');
              @include b(icon) {
                fill: map-get($--data-table-button-color, 'active');
                stroke: map-get($--data-table-button-color, 'active');
              }
            }
          }
        }
      }
    }
  }
  @include as-modal-content {
    @include b(data-table) {
      @include b(data-table-table) {
        background-color: map-get($--data-table-body-background-color, 'modal');
        @include b(data-table-thead) {
          background-color: map-get($--data-table-header-background-color, 'modal');
        }
        @include b(data-table-th) {
          border-color: map-get($--data-table-border-color, 'modal');
          background-color: map-get($--data-table-header-background-color, 'modal');
          @include m(sortable) {
            &:hover {
              background-color: map-get($--data-table-header-background-color, 'modal-hover');
            }
          }
        }
        @include b(data-table-tr) {
          &:hover {
            background-color: map-get($--data-table-row-background-color, 'modal-hover');
            @include b(data-table-td) {
              background-color: map-get($--data-table-row-background-color, 'modal-hover');
            }
          }
        }
        @include b(data-table-td) {
          border-color: map-get($--data-table-border-color, 'modal');
          background-color: map-get($--data-table-body-background-color, 'modal')
        }
      }
      @include not-m(single-line) {
        @include b(data-table-wrapper) {
          @include b(data-table-table){
            @include b(data-table-th) {
              border-right: 1px solid map-get($--data-table-border-color, 'modal');
              &:last-child {
                border-right: 0px solid map-get($--data-table-border-color, 'modal');
              }
            }
            @include b(data-table-td) {
              border-right: 1px solid map-get($--data-table-border-color, 'modal');
              &:last-child {
                border-right: 0px solid map-get($--data-table-border-color, 'modal');
              }
            }
          }
        }
      }
      @include m(bordered) {
        @include b(data-table-wrapper) {
          border: 1px solid map-get($--data-table-border-color, 'modal');
          @include b(data-table-table){
            @include b(data-table-tr) {
              &:last-child {
                @include b(data-table-td) {
                  border-bottom: 0px solid map-get($--data-table-border-color, 'modal');
                }
              }
            }
          }
        }
      }
      @include b(data-table-base-table-header) {
        border-bottom: 1px solid map-get($--data-table-border-color, 'modal');
      }
    }
  }
}

@include b(data-table-filter-menu) {
  @include b(scrollbar) {
    max-height: 240px;
  }
  @include e(group) {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 0 12px;
    @include b(checkbox) {
      margin-bottom: 12px;
      margin-right: 0;
    }
    @include b(radio) {
      margin-bottom: 12px;
      margin-right: 0;
    }
  }
  @include b(divider) {
    margin: 0;
  }
  @include e(action) {
    padding: 8px 12px;
    display: flex;
    flex-wrap: no-wrap;
    justify-content: space-evenly;
    @include b(button) {
      &:not(:last-child) {
        margin-right: 8px;
      }
    }
  }
}