@sdata/web-vue 1.5.0 → 1.7.0

package/es/table/style/index.less

@@ -1,875 +0,0 @@
-@import url('../../style/mixins/index.less');
-@import url('./token.less');
-@import url('./filters-popup.less');
-
-@table-prefix-cls: ~'@{prefix}-table';
-
-@table-cls-table: ~'@{table-prefix-cls}-element';
-@table-cls-tr: ~'@{table-prefix-cls}-tr';
-@table-cls-th: ~'@{table-prefix-cls}-th';
-@table-cls-td: ~'@{table-prefix-cls}-td';
-
-.expandBtn() {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: @table-size-expand-button;
-  height: @table-size-expand-button;
-  padding: 0;
-  color: @table-color-expand-icon;
-  font-size: @table-font-size-expand-button;
-  line-height: @table-size-expand-button;
-  background-color: @table-color-bg-expand-icon;
-  border: @table-border-expand-icon-width solid @table-color-expand-icon-border;
-  border-radius: @table-border-radius-expand-button;
-  outline: none;
-  cursor: pointer;
-  transition: background-color @transition-duration-1 @transition-timing-function-linear;
-
-  &:hover {
-    color: @table-color-expand-icon_hover;
-    background-color: @table-color-bg-expand-icon_hover;
-    border-color: @table-color-expand-icon-border_hover;
-  }
-}
-
-.table-size(@size) {
-  .@{table-prefix-cls}-cell {
-    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  }
-
-  //.@{table-prefix-cls}-col-has-sorter .@{table-prefix-cls}-cell-with-sorter {
-  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  //  cursor: pointer;
-  //}
-
-  //.@{table-cls-td} {
-  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  //}
-
-  .@{table-cls-th} {
-    font-size: ~'@{table-size-@{size}-font-header-size}';
-  }
-
-  .@{table-cls-td} {
-    font-size: ~'@{table-size-@{size}-font-size}';
-  }
-
-  .@{table-prefix-cls}-footer {
-    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  }
-
-  // expand row in fixed
-  //.@{table-prefix-cls}-cell-fixed-expand {
-  //  margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}';
-  //  padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-  //}
-
-  // sub table
-  .@{table-prefix-cls}-tr-expand .@{table-cls-td} .@{table-prefix-cls} {
-    margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}'
-      ~'calc(-@{table-size-@{size}-padding-vertical} - @{table-border-width})'
-      ~'-@{table-size-@{size}-padding-horizontal}';
-  }
-
-  // editor row
-  .@{table-prefix-cls}-editable-row {
-    .@{table-prefix-cls}-cell-wrap-value {
-      padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
-    }
-  }
-}
-
-.@{table-prefix-cls} {
-  position: relative;
-
-  &-column-handle {
-    position: absolute;
-    top: 0;
-    right: -4px;
-    z-index: 1;
-    width: 8px;
-    height: 100%;
-    cursor: col-resize;
-  }
-
-  // spin
-  .@{prefix}-spin {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  // ???
-  > .@{prefix}-spin > .@{prefix}-spin-children::after {
-    z-index: 2;
-  }
-
-  // footer
-  &-footer {
-    border-radius: 0 0 @table-border-radius @table-border-radius;
-  }
-
-  // box-shadow of the fixed column on the left
-  &-scroll-position-right &-col-fixed-left-last::after,
-  &-scroll-position-middle &-col-fixed-left-last::after {
-    box-shadow: @table-shadow-left;
-  }
-
-  // box-shadow of the fixed column on the right
-  &-scroll-position-left &-col-fixed-right-first::after,
-  &-scroll-position-middle &-col-fixed-right-first::after {
-    box-shadow: @table-shadow-right;
-  }
-
-  &-layout-fixed {
-    .@{table-cls-table} {
-      table-layout: fixed;
-    }
-  }
-
-  .@{table-cls-table} {
-    width: 100%;
-    min-width: 100%;
-    margin: 0;
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-
-  &-th {
-    position: relative;
-    box-sizing: border-box;
-    color: @table-color-text-header-cell;
-    font-weight: @table-font-weight-header-text;
-    line-height: @line-height-base;
-    text-align: left;
-    background-color: @table-color-bg-header-cell;
-
-    &[colspan] {
-      text-align: center;
-    }
-
-    &-align-right {
-      text-align: right;
-
-      .@{table-prefix-cls}-cell-with-sorter {
-        justify-content: flex-end;
-      }
-    }
-
-    &-align-center {
-      text-align: center;
-
-      .@{table-prefix-cls}-cell-with-sorter {
-        justify-content: center;
-      }
-    }
-  }
-
-  &-td {
-    box-sizing: border-box;
-    color: @table-color-text-body-cell;
-    line-height: @line-height-base;
-    text-align: left;
-    word-break: break-all;
-    background-color: @table-color-bg-body-cell;
-    border-bottom: @table-border-width @table-border-style @table-color-border;
-
-    &-align-right {
-      text-align: right;
-    }
-
-    &-align-center {
-      text-align: center;
-    }
-
-    &.@{table-prefix-cls}-drag-handle {
-      cursor: move;
-    }
-  }
-
-  &-cell {
-    display: flex;
-    align-items: center;
-
-    &-align-right {
-      justify-content: flex-end;
-      text-align: right;
-    }
-
-    &-align-center {
-      justify-content: center;
-      text-align: center;
-    }
-  }
-
-  &-text-ellipsis {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-td-content {
-    display: block;
-    width: 100%;
-  }
-
-  .@{table-cls-th}&-col-sorted {
-    background-color: @table-color-bg-header-sorted-cell;
-  }
-
-  .@{table-cls-td}&-col-sorted {
-    background-color: @table-color-bg-body-sorted-cell;
-  }
-
-  &-col-fixed-left,
-  &-col-fixed-right {
-    position: sticky;
-    z-index: 10;
-  }
-
-  &-col-fixed-left-last::after,
-  &-col-fixed-right-first::after {
-    position: absolute;
-    top: 0;
-    bottom: -@table-border-width;
-    left: 0;
-    width: @table-size-shadow-wrapper-width;
-    box-shadow: none;
-    transform: translateX(-100%);
-    transition: box-shadow @transition-duration-1 @transition-timing-function-linear;
-    content: '';
-    pointer-events: none;
-  }
-
-  // ????
-  &-col-fixed-left-last::after {
-    right: 0;
-    left: unset;
-    transform: translateX(100%);
-  }
-
-  &-cell-text-ellipsis {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  // useless
-  &-editable-row {
-    .@{table-prefix-cls}-cell-wrap-value {
-      border: @table-border-width solid @table-color-editable-body-cell-border;
-      border-radius: @table-border-radius;
-      cursor: pointer;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-
-    &:hover {
-      .@{table-prefix-cls}-cell-wrap-value {
-        border: @table-border-width solid @table-color-border;
-      }
-    }
-  }
-
-  //&-cell {
-  //  word-break: break-all;
-  //}
-
-  // Expand
-  .@{table-prefix-cls}-expand-btn {
-    .expandBtn();
-  }
-
-  &-cell-expand-icon {
-    display: flex;
-    align-items: center;
-  }
-
-  &-cell-expand-icon &-cell-inline-icon {
-    display: inline-flex;
-    margin-right: @table-spacing-expand-button-margin-right;
-
-    .@{prefix}-icon-loading {
-      color: @color-primary-6;
-    }
-  }
-
-  &-cell-expand-icon-hidden {
-    display: inline-block;
-    width: @table-size-expand-button;
-    height: @table-size-expand-button;
-    margin-right: @table-spacing-expand-button-margin-right;
-  }
-
-  &-tr-expand .@{table-cls-td} {
-    background-color: @table-color-bg-expand-content;
-  }
-
-  &-cell-fixed-expand {
-    position: sticky;
-    left: 0;
-    box-sizing: border-box;
-  }
-
-  &-tr-expand .@{table-cls-td} & {
-    .@{table-prefix-cls}-container {
-      border: none;
-    }
-
-    .@{table-cls-th} {
-      border-bottom: @table-border-width @table-border-style @table-color-border;
-    }
-
-    .@{table-cls-th},
-    .@{table-cls-td} {
-      background-color: transparent;
-    }
-
-    .@{table-prefix-cls}-pagination {
-      margin-bottom: @table-spacing-pagination-margin;
-    }
-  }
-
-  // Selection
-  //& &-th&-operation &-th-item,
-  //& &-td&-operation {
-  //  padding-right: @table-spacing-selection-padding-horizontal;
-  //  padding-left: @table-spacing-selection-padding-horizontal;
-  //}
-  &-th&-operation,
-  &-td&-operation {
-    text-align: center;
-  }
-
-  &-th&-operation &-cell,
-  &-td&-operation &-cell {
-    display: flex;
-    justify-content: center;
-    padding: 0;
-  }
-
-  &-radio,
-  &-checkbox {
-    justify-content: center;
-  }
-
-  &-checkbox .@{prefix}-checkbox,
-  &-radio .@{prefix}-radio {
-    padding-left: 0;
-  }
-
-  // colgroup selection
-  &-selection-checkbox-col,
-  &-selection-radio-col {
-    .fixed-width(@table-size-selection-col-width);
-  }
-
-  &-expand-col {
-    .fixed-width(@table-size-expand-icon-col-width);
-  }
-
-  &-drag-handle-col {
-    .fixed-width(@table-size-drag-handle-col-width);
-  }
-
-  &-th {
-    transition: background-color @transition-duration-1 @transition-timing-function-linear;
-  }
-
-  &-cell-with-sorter {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &:hover {
-      background-color: @table-color-bg-header-sorted-cell_hover;
-    }
-  }
-
-  &-cell-with-filter {
-    display: flex;
-    align-items: center;
-  }
-
-  &-cell-next-ascend &-sorter-icon {
-    .@{prefix}-icon-caret-up {
-      color: @table-color-header-sorter-icon_next;
-    }
-  }
-
-  &-cell-next-descend &-sorter-icon {
-    .@{prefix}-icon-caret-down {
-      color: @table-color-header-sorter-icon_next;
-    }
-  }
-
-  &-sorter {
-    display: inline-block;
-    margin-left: @table-spacing-header-sorter-icon-margin-left;
-    vertical-align: -3px;
-  }
-
-  &-sorter&-sorter-direction-one {
-    vertical-align: 0;
-  }
-
-  &-sorter-icon {
-    position: relative;
-    width: @table-size-header-sorter-icon-width;
-    height: @table-size-header-sorter-icon-height;
-    overflow: hidden;
-    line-height: @table-size-header-sorter-icon-height;
-
-    .@{prefix}-icon-caret-up,
-    .@{prefix}-icon-caret-down {
-      position: absolute;
-      top: 50%;
-      color: @table-color-header-sorter-icon;
-      font-size: @table-font-size-header-sorter-icon;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-
-    .@{prefix}-icon-caret-up {
-      top: @table-position-header-sorter-icon-up-top;
-      left: @table-position-header-sorter-icon-left;
-    }
-
-    .@{prefix}-icon-caret-down {
-      top: @table-position-header-sorter-icon-down-top;
-      left: @table-position-header-sorter-icon-left;
-    }
-
-    &&-active {
-      svg {
-        color: @table-color-header-sorter-icon_active;
-      }
-    }
-  }
-
-  &-filters {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: @table-size-filters-width;
-    height: 100%;
-    line-height: 1;
-    vertical-align: 0;
-    background-color: transparent;
-    cursor: pointer;
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-
-    &:hover,
-    &-open {
-      background-color: @table-color-bg-header-filters-icon_hover;
-    }
-
-    svg {
-      color: @table-color-header-filters-icon;
-      font-size: @table-font-size-filters-icon;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-
-    &-active {
-      svg {
-        color: @table-color-header-filters-icon_active;
-      }
-    }
-
-    &-align-left {
-      position: relative;
-      width: auto;
-      margin-left: @table-spacing-header-sorter-icon-margin-left;
-
-      svg {
-        font-size: @table-font-size-header-sorter-icon;
-      }
-
-      &:hover,
-      &-open {
-        background: none;
-      }
-
-      &:hover::before,
-      &.@{table-prefix-cls}-filters-open::before {
-        background: @table-filters-icon-bg_hover;
-      }
-    }
-  }
-
-  /* ---- Table sorter, filter, checkbox, radio (End) ---- */
-  &-container {
-    position: relative;
-    border-radius: @table-border-radius @table-border-radius 0 0;
-  }
-
-  &-header {
-    flex-shrink: 0;
-    border-radius: @table-border-radius @table-border-radius 0 0;
-  }
-
-  &-container {
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 0;
-
-    // chrome not fluent: https://codepen.io/quanqqq/pen/BaLpEQd?editors=0010
-    // border-radius: @table-border-radius @table-border-radius 0 0 0;
-
-    .@{table-prefix-cls}-content {
-      display: flex;
-      flex-direction: column;
-      width: auto;
-      height: 100%;
-
-      &-scroll-x {
-        overflow: auto hidden;
-      }
-    }
-
-    &::before,
-    &::after {
-      position: absolute;
-      //top: -@table-border-width;
-      //bottom: -@table-border-width;
-      z-index: 1;
-      width: @table-size-shadow-wrapper-width;
-      height: 100%;
-      box-shadow: none;
-      transition: box-shadow @transition-duration-1 @transition-timing-function-linear;
-      content: '';
-      pointer-events: none;
-    }
-
-    &::before {
-      top: 0;
-      left: 0;
-      border-top-left-radius: @table-border-radius;
-    }
-
-    &::after {
-      top: 0;
-      right: 0;
-      border-top-right-radius: @table-border-radius;
-    }
-
-    // box-shadow on the left side of the scroll table
-    &:not(.@{table-prefix-cls}-has-fixed-col-left) {
-      &.@{table-prefix-cls}-scroll-position-right::before,
-      &.@{table-prefix-cls}-scroll-position-middle::before {
-        box-shadow: @table-shadow-left;
-      }
-    }
-
-    // box-shadow on the right side of the scroll table
-    &:not(.@{table-prefix-cls}-has-fixed-col-right) {
-      &.@{table-prefix-cls}-scroll-position-left::after,
-      &.@{table-prefix-cls}-scroll-position-middle::after {
-        box-shadow: @table-shadow-right;
-      }
-    }
-  }
-
-  &-header {
-    overflow: hidden;
-    background-color: @table-color-bg-header-cell;
-    scrollbar-color: transparent transparent;
-
-    &-sticky {
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-  }
-
-  &:not(&-empty) &-header::-webkit-scrollbar {
-    // 仅隐藏横向滚动条
-    height: 0;
-    background-color: transparent;
-  }
-
-  &&-empty &-header {
-    overflow-x: auto;
-  }
-
-  &-body {
-    position: relative;
-    width: 100%;
-    min-height: @table-size-body-min-width;
-    overflow: auto;
-    background-color: @table-color-body-background;
-  }
-
-  &-border {
-    .@{table-prefix-cls}-container {
-      border-top: @table-border-width @table-border-style @table-color-border;
-      border-left: @table-border-width @table-border-style @table-color-border;
-
-      // ??用处
-      //&::before {
-      //  position: absolute;
-      //  bottom: 0;
-      //  left: 0;
-      //  z-index: 2;
-      //  width: 100%;
-      //  height: @table-border-width;
-      //  background-color: @table-color-border;
-      //  content: '';
-      //}
-    }
-
-    .@{table-prefix-cls}-scroll-y {
-      border-bottom: @table-border-width @table-border-style @table-color-border;
-
-      .@{table-prefix-cls}-body .@{table-cls-tr}:last-of-type .@{table-cls-td},
-      tfoot .@{table-cls-tr}:last-of-type .@{table-cls-td} {
-        border-bottom: none;
-
-        &.@{table-prefix-cls}-col-fixed-left-last::after,
-        &.@{table-prefix-cls}-col-fixed-right-first::after {
-          bottom: 0;
-        }
-      }
-    }
-
-    .@{table-cls-tr} .@{table-cls-th} {
-      border-bottom: @table-border-width @table-border-style @table-color-border;
-    }
-
-    //.@{table-prefix-cls}-tr-expand .@{table-prefix-cls}-cell-fixed-expand {
-    //  border-left: @table-border-width @table-border-style @table-color-border;
-    //}
-
-    .@{table-prefix-cls}-footer {
-      border: @table-border-width @table-border-style @table-color-border;
-      border-top: 0;
-    }
-  }
-
-  &-border:not(&-border-cell) {
-    .@{table-prefix-cls}-container {
-      border-right: @table-border-width @table-border-style @table-color-border;
-    }
-
-    //.@{table-cls-tr} .@{table-cls-th}[colspan] {
-    //  border-bottom: none;
-    //}
-    //
-    //.@{table-prefix-cls}-tr-expand .@{table-prefix-cls}-cell-fixed-expand {
-    //  border-left: none;
-    //}
-  }
-
-  &-border-cell {
-    .@{table-cls-th},
-    .@{table-cls-td}:not(.@{table-prefix-cls}-tr-expand) {
-      border-right: @table-border-width @table-border-style @table-color-border;
-    }
-
-    .@{table-cls-th}-resizing,
-    .@{table-cls-td}-resizing:not(.@{table-prefix-cls}-tr-expand) {
-      border-right-color: @table-color-border_resizing;
-    }
-  }
-
-  &-border-header-cell {
-    .@{table-cls-th} {
-      border-right: @table-border-width @table-border-style @table-color-border;
-      border-bottom: @table-border-width @table-border-style @table-color-border;
-    }
-    .@{table-cls-th}-resizing,
-    .@{table-cls-td}-resizing:not(.@{table-prefix-cls}-tr-expand) {
-      border-right-color: @table-color-border_resizing;
-    }
-  }
-
-  &-border&-border-header-cell {
-    thead {
-      .@{table-cls-tr}:first-child .@{table-cls-th}:last-child {
-        border-right: 0;
-      }
-    }
-  }
-
-  &-border-body-cell {
-    .@{table-cls-td}:not(:last-child):not(.@{table-prefix-cls}-tr-expand) {
-      border-right: @table-border-width @table-border-style @table-color-border;
-    }
-  }
-
-  // stripe: true
-  &-stripe {
-    &:not(.@{table-prefix-cls}-dragging)
-      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty):not(
-        .@{table-prefix-cls}-tr-summary
-      ):nth-child(even),
-    .@{table-cls-tr}-drag {
-      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(
-          .@{table-prefix-cls}-col-fixed-right
-        ) {
-        background-color: @table-color-bg-body-stripe-row;
-      }
-
-      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
-      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: -1;
-          width: 100%;
-          height: 100%;
-          background-color: @table-color-bg-body-stripe-row;
-          content: '';
-        }
-      }
-    }
-  }
-
-  & .@{table-cls-tr}-draggable {
-    cursor: move;
-  }
-
-  &-hover {
-    &:not(.@{table-prefix-cls}-dragging)
-      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty):not(
-        .@{table-prefix-cls}-tr-summary
-      ):hover,
-    .@{table-cls-tr}-drag {
-      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(
-          .@{table-prefix-cls}-col-fixed-right
-        ) {
-        background-color: @table-color-bg-body-row_hover;
-      }
-
-      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
-      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: -1;
-          width: 100%;
-          height: 100%;
-          background-color: @table-color-bg-body-row_hover;
-          content: '';
-        }
-      }
-    }
-
-    .@{table-cls-tr}-expand:not(.@{table-prefix-cls}-tr-empty):hover {
-      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(
-          .@{table-prefix-cls}-col-fixed-right
-        ) {
-        background-color: @table-color-bg-expand-content_hover;
-      }
-    }
-
-    // 去除嵌套子表格的 hover 效果
-    .@{table-prefix-cls}-tr-expand .@{table-cls-td} & {
-      .@{table-cls-tr}:not(.@{table-prefix-cls}-tr-empty) {
-        .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(
-            .@{table-prefix-cls}-col-fixed-right
-          ) {
-          background-color: transparent;
-        }
-
-        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
-        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
-          &::before {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  &-tfoot {
-    position: relative;
-    z-index: 1;
-    flex-shrink: 0;
-    width: 100%;
-    overflow-x: auto;
-    background-color: @table-color-bg-tfoot;
-    box-shadow: 0 -@table-border-width 0 @table-color-border;
-    scrollbar-color: transparent transparent;
-
-    &::-webkit-scrollbar {
-      height: 0;
-      background-color: transparent;
-    }
-  }
-
-  & tfoot &-td {
-    background-color: @table-color-bg-tfoot;
-  }
-
-  // Active row
-  &-tr-checked .@{table-cls-td} {
-    background-color: @table-color-bg-body-row_active;
-  }
-
-  // Size
-  .table-size(large);
-
-  &-size-medium {
-    .table-size(medium);
-  }
-
-  &-size-small {
-    .table-size(small);
-  }
-
-  &-size-mini {
-    .table-size(mini);
-  }
-
-  // virtualized
-  &-virtualized .@{table-cls-table} {
-    table-layout: fixed;
-  }
-
-  &-virtualized div&-body div&-tr {
-    display: flex;
-  }
-
-  &-virtualized div&-body div&-td {
-    display: flex;
-    flex: 1;
-    align-items: center;
-  }
-}
-
-.@{table-prefix-cls}-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: @table-spacing-pagination-margin;
-
-  &-left {
-    justify-content: flex-start;
-  }
-
-  &-center {
-    justify-content: center;
-  }
-
-  &-top {
-    margin-top: 0;
-    margin-bottom: @table-spacing-pagination-margin;
-  }
-}
-
-.@{prefix}-virtual-list {
-  & > .@{table-prefix-cls}-element {
-    width: auto;
-  }
-}
-
-@{sd-theme-tag}[sd-theme='dark'] {
-  .@{table-prefix-cls}-tr-checked .@{table-cls-td} {
-    background-color: @table-color-bg-body-row_active_dark;
-  }
-}