@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/es/table/style/index-pure.less

@@ -1,763 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import './size';
-@import './bordered';
-
-@table-prefix-cls: ~'@{ant-prefix}-table';
-@tree-prefix-cls: ~'@{ant-prefix}-tree';
-@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
-@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
-@table-header-icon-color: #bfbfbf;
-@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
-@table-sticky-zindex: calc(@zindex-table-fixed + 1);
-@table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
-@table-filter-dropdown-max-height: 264px;
-@table-expand-column-width: 48px;
-
-.@{table-prefix-cls}-wrapper {
-  clear: both;
-  max-width: 100%;
-  .clearfix();
-}
-
-.@{table-prefix-cls} {
-  .reset-component();
-  position: relative;
-  font-size: @table-font-size;
-  background: @table-bg;
-  border-radius: @table-border-radius-base;
-
-  // https://github.com/ant-design/ant-design/issues/17611
-  table {
-    width: 100%;
-    text-align: left;
-    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-
-  // ============================= Cell =============================
-  &-thead > tr > th,
-  &-tbody > tr > td,
-  tfoot > tr > th,
-  tfoot > tr > td {
-    position: relative;
-    padding: @table-padding-vertical @table-padding-horizontal;
-    overflow-wrap: break-word;
-  }
-
-  &-cell-ellipsis {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    word-break: keep-all;
-
-    // Fixed first or last should special process
-    &.@{table-prefix-cls}-cell-fix-left-last,
-    &.@{table-prefix-cls}-cell-fix-right-first {
-      overflow: visible;
-
-      .@{table-prefix-cls}-cell-content {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .@{table-prefix-cls}-column-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: keep-all;
-    }
-  }
-
-  // ============================ Title =============================
-  &-title {
-    padding: @table-padding-vertical @table-padding-horizontal;
-  }
-
-  // ============================ Footer ============================
-  &-footer {
-    padding: @table-padding-vertical @table-padding-horizontal;
-    color: @table-footer-color;
-    background: @table-footer-bg;
-  }
-
-  // ============================ Header ============================
-  &-thead {
-    > tr {
-      > th {
-        position: relative;
-        color: @table-header-color;
-        font-weight: 500;
-        text-align: left;
-        background: @table-header-bg;
-        border-bottom: @border-width-base @border-style-base @table-border-color;
-        transition: background 0.3s ease;
-
-        &[colspan]:not([colspan='1']) {
-          text-align: center;
-        }
-
-        &:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before {
-          position: absolute;
-          top: 50%;
-          right: 0;
-          width: 1px;
-          height: 1.6em;
-          background-color: @table-header-cell-split-color;
-          transform: translateY(-50%);
-          transition: background-color 0.3s;
-          content: '';
-        }
-      }
-    }
-
-    > tr:not(:last-child) > th {
-      &[colspan] {
-        border-bottom: 0;
-      }
-    }
-  }
-
-  // ============================= Body =============================
-  &-tbody {
-    > tr {
-      > td {
-        border-bottom: @border-width-base @border-style-base @table-border-color;
-        transition: background 0.3s;
-
-        // ========================= Nest Table ===========================
-        > .@{table-prefix-cls}-wrapper:only-child,
-        > .@{table-prefix-cls}-expanded-row-fixed > .@{table-prefix-cls}-wrapper:only-child {
-          .@{table-prefix-cls} {
-            margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-expand-column-width -
-                  @table-padding-horizontal);
-
-            &-tbody > tr:last-child > td {
-              border-bottom: 0;
-
-              &:first-child,
-              &:last-child {
-                border-radius: 0;
-              }
-            }
-          }
-        }
-      }
-
-      &.@{table-prefix-cls}-row:hover > td,
-      > td.@{table-prefix-cls}-cell-row-hover {
-        background: @table-row-hover-bg;
-      }
-
-      &.@{table-prefix-cls}-row-selected {
-        > td {
-          background: @table-selected-row-bg;
-          border-color: rgba(0, 0, 0, 0.03);
-        }
-
-        &:hover {
-          > td {
-            background: @table-selected-row-hover-bg;
-          }
-        }
-      }
-    }
-  }
-
-  // =========================== Summary ============================
-  &-summary {
-    position: relative;
-    z-index: @zindex-table-fixed;
-    background: @table-bg;
-
-    div& {
-      box-shadow: 0 -@border-width-base 0 @table-border-color;
-    }
-
-    > tr {
-      > th,
-      > td {
-        border-bottom: @border-width-base @border-style-base @table-border-color;
-      }
-    }
-  }
-
-  // ========================== Pagination ==========================
-  &-pagination.@{ant-prefix}-pagination {
-    margin: 16px 0;
-  }
-
-  &-pagination {
-    display: flex;
-    flex-wrap: wrap;
-    row-gap: @padding-xs;
-
-    > * {
-      flex: none;
-    }
-
-    &-left {
-      justify-content: flex-start;
-    }
-
-    &-center {
-      justify-content: center;
-    }
-
-    &-right {
-      justify-content: flex-end;
-    }
-  }
-
-  // ================================================================
-  // =                           Function                           =
-  // ================================================================
-
-  // ============================ Sorter ============================
-  &-thead th.@{table-prefix-cls}-column-has-sorters {
-    outline: none;
-    cursor: pointer;
-    transition: all 0.3s;
-
-    &:hover {
-      background: @table-header-sort-active-bg;
-
-      &::before {
-        background-color: transparent !important;
-      }
-    }
-
-    &:focus-visible {
-      color: @primary-color;
-    }
-
-    // https://github.com/ant-design/ant-design/issues/30969
-    &.@{table-prefix-cls}-cell-fix-left:hover,
-    &.@{table-prefix-cls}-cell-fix-right:hover {
-      background: @table-fixed-header-sort-active-bg;
-    }
-  }
-
-  &-thead th.@{table-prefix-cls}-column-sort {
-    background: @table-header-sort-bg;
-
-    &::before {
-      background-color: transparent !important;
-    }
-  }
-
-  td&-column-sort {
-    background: @table-body-sort-bg;
-  }
-
-  &-column-title {
-    position: relative;
-    z-index: 1;
-    flex: 1;
-  }
-
-  &-column-sorters {
-    display: flex;
-    flex: auto;
-    align-items: center;
-    justify-content: space-between;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      content: '';
-    }
-  }
-
-  &-column-sorter {
-    margin-left: 4px;
-    color: @table-header-icon-color;
-    font-size: 0;
-    transition: color 0.3s;
-
-    &-inner {
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    &-up,
-    &-down {
-      font-size: 11px;
-
-      &.active {
-        color: @primary-color;
-      }
-    }
-
-    &-up + &-down {
-      margin-top: -0.3em;
-    }
-  }
-
-  &-column-sorters:hover &-column-sorter {
-    color: darken(@table-header-icon-color, 10%);
-  }
-
-  // ============================ Filter ============================
-  &-filter-column {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &-filter-trigger {
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin: -4px (-@table-padding-horizontal / 2) -4px 4px;
-    padding: 0 4px;
-    color: @table-header-icon-color;
-    font-size: @font-size-sm;
-    border-radius: @border-radius-base;
-    cursor: pointer;
-    transition: all 0.3s;
-
-    &:hover {
-      color: @text-color-secondary;
-      background: @table-header-filter-active-bg;
-    }
-
-    &.active {
-      color: @primary-color;
-    }
-  }
-
-  // Dropdown
-  &-filter-dropdown {
-    .reset-component();
-
-    min-width: 120px;
-    background-color: @table-filter-dropdown-bg;
-    border-radius: @border-radius-base;
-    box-shadow: @box-shadow-base;
-
-    // Reset menu
-    .@{dropdown-prefix-cls}-menu {
-      // https://github.com/ant-design/ant-design/issues/4916
-      // https://github.com/ant-design/ant-design/issues/19542
-      max-height: @table-filter-dropdown-max-height;
-      overflow-x: hidden;
-      border: 0;
-      box-shadow: none;
-
-      &:empty::after {
-        display: block;
-        padding: 8px 0;
-        color: @disabled-color;
-        font-size: @font-size-sm;
-        text-align: center;
-        content: 'Not Found';
-      }
-    }
-
-    &-tree {
-      padding: 8px 8px 0;
-
-      .@{tree-prefix-cls}-treenode .@{tree-prefix-cls}-node-content-wrapper:hover {
-        background-color: @tree-node-hover-bg;
-      }
-
-      .@{tree-prefix-cls}-treenode-checkbox-checked .@{tree-prefix-cls}-node-content-wrapper {
-        &,
-        &:hover {
-          background-color: @tree-node-selected-bg;
-        }
-      }
-    }
-
-    &-search {
-      padding: 8px;
-      border-bottom: @border-width-base @border-color-split @border-style-base;
-
-      &-input {
-        input {
-          min-width: 140px;
-        }
-        .@{iconfont-css-prefix} {
-          color: @disabled-color;
-        }
-      }
-    }
-
-    &-checkall {
-      width: 100%;
-      margin-bottom: 4px;
-      margin-left: 4px;
-    }
-
-    &-submenu > ul {
-      max-height: calc(100vh - 130px);
-      overflow-x: hidden;
-      overflow-y: auto;
-    }
-
-    // Checkbox
-    &,
-    &-submenu {
-      .@{ant-prefix}-checkbox-wrapper + span {
-        padding-left: 8px;
-      }
-    }
-
-    // Operation
-    &-btns {
-      display: flex;
-      justify-content: space-between;
-      padding: 7px 8px;
-      overflow: hidden;
-      background-color: @table-filter-btns-bg;
-      border-top: @border-width-base @border-style-base @table-border-color;
-    }
-  }
-
-  // ========================== Selections ==========================
-  &-selection-col {
-    width: @table-selection-column-width;
-  }
-
-  &-bordered &-selection-col {
-    width: @table-selection-column-width + 18px;
-  }
-
-  table tr th&-selection-column,
-  table tr td&-selection-column {
-    padding-right: @padding-xs;
-    padding-left: @padding-xs;
-    text-align: center;
-
-    .@{ant-prefix}-radio-wrapper {
-      margin-right: 0;
-    }
-  }
-
-  table tr th&-selection-column&-cell-fix-left {
-    z-index: 3;
-  }
-
-  table tr th&-selection-column::after {
-    background-color: transparent !important;
-  }
-
-  &-selection {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-
-    &-extra {
-      position: absolute;
-      top: 0;
-      z-index: 1;
-      cursor: pointer;
-      transition: all 0.3s;
-      margin-inline-start: 100%;
-      padding-inline-start: (@table-padding-horizontal / 4);
-
-      .@{iconfont-css-prefix} {
-        color: @table-header-icon-color;
-        font-size: 10px;
-
-        &:hover {
-          color: @table-header-icon-color-hover;
-        }
-      }
-    }
-  }
-
-  // ========================== Expandable ==========================
-  &-expand-icon-col {
-    width: @table-expand-column-width;
-  }
-
-  &-row-expand-icon-cell {
-    text-align: center;
-
-    .@{table-prefix-cls}-row-expand-icon {
-      display: inline-flex;
-      float: none;
-      vertical-align: sub;
-    }
-  }
-
-  &-row-indent {
-    float: left;
-    height: 1px;
-  }
-
-  &-row-expand-icon {
-    .operation-unit();
-    position: relative;
-    float: left;
-    box-sizing: border-box;
-    width: @expand-icon-size;
-    height: @expand-icon-size;
-    padding: 0;
-    color: inherit;
-    line-height: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)) * 2 + @border-width-base *
-      3;
-    background: @table-expand-icon-bg;
-    border: @border-width-base @border-style-base @table-border-color;
-    border-radius: @border-radius-base;
-    transform: scale((unit(@checkbox-size) / unit(@expand-icon-size)));
-    transition: all 0.3s;
-    user-select: none;
-    @expand-icon-size: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)) * 2 +
-      @border-width-base * 3;
-
-    &:focus,
-    &:hover,
-    &:active {
-      border-color: currentcolor;
-    }
-
-    &::before,
-    &::after {
-      position: absolute;
-      background: currentcolor;
-      transition: transform 0.3s ease-out;
-      content: '';
-    }
-
-    &::before {
-      top: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2));
-      right: 3px;
-      left: 3px;
-      height: @border-width-base;
-    }
-
-    &::after {
-      top: 3px;
-      bottom: 3px;
-      left: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2));
-      width: @border-width-base;
-      transform: rotate(90deg);
-    }
-
-    // Motion effect
-    &-collapsed::before {
-      transform: rotate(-180deg);
-    }
-
-    &-collapsed::after {
-      transform: rotate(0deg);
-    }
-
-    &-spaced {
-      &::before,
-      &::after {
-        display: none;
-        content: none;
-      }
-      background: transparent;
-      border: 0;
-      visibility: hidden;
-    }
-
-    .@{table-prefix-cls}-row-indent + & {
-      margin-top: ((@font-size-base * @line-height-base - @border-width-base * 3) / 2) -
-        ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2));
-      margin-right: @padding-xs;
-    }
-  }
-
-  tr&-expanded-row {
-    &,
-    &:hover {
-      > td {
-        background: @table-expanded-row-bg;
-      }
-    }
-
-    // https://github.com/ant-design/ant-design/issues/25573
-    .@{descriptions-prefix-cls}-view {
-      display: flex;
-
-      table {
-        flex: auto;
-        width: auto;
-      }
-    }
-  }
-
-  // With fixed
-  .@{table-prefix-cls}-expanded-row-fixed {
-    position: relative;
-    margin: -@table-padding-vertical -@table-padding-horizontal;
-    padding: @table-padding-vertical @table-padding-horizontal;
-  }
-
-  // ========================= Placeholder ==========================
-  &-tbody > tr&-placeholder {
-    text-align: center;
-    .@{table-prefix-cls}-empty & {
-      color: @disabled-color;
-    }
-
-    &:hover {
-      > td {
-        background: @component-background;
-      }
-    }
-  }
-
-  // ============================ Fixed =============================
-  &-cell-fix-left,
-  &-cell-fix-right {
-    position: sticky !important;
-    z-index: @zindex-table-fixed;
-    background: @table-bg;
-  }
-
-  &-cell-fix-left-first::after,
-  &-cell-fix-left-last::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: -1px;
-    width: 30px;
-    transform: translateX(100%);
-    transition: box-shadow 0.3s;
-    content: '';
-    pointer-events: none;
-  }
-
-  &-cell-fix-left-all::after {
-    display: none;
-  }
-
-  &-cell-fix-right-first::after,
-  &-cell-fix-right-last::after {
-    position: absolute;
-    top: 0;
-    bottom: -1px;
-    left: 0;
-    width: 30px;
-    transform: translateX(-100%);
-    transition: box-shadow 0.3s;
-    content: '';
-    pointer-events: none;
-  }
-
-  .@{table-prefix-cls}-container {
-    &::before,
-    &::after {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      z-index: calc(@table-sticky-zindex + 1);
-      width: 30px;
-      transition: box-shadow 0.3s;
-      content: '';
-      pointer-events: none;
-    }
-
-    &::before {
-      left: 0;
-    }
-
-    &::after {
-      right: 0;
-    }
-  }
-
-  &-ping-left {
-    &:not(.@{table-prefix-cls}-has-fix-left) > .@{table-prefix-cls}-container {
-      position: relative;
-
-      &::before {
-        box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
-      }
-    }
-
-    .@{table-prefix-cls}-cell-fix-left-first::after,
-    .@{table-prefix-cls}-cell-fix-left-last::after {
-      box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
-    }
-
-    .@{table-prefix-cls}-cell-fix-left-last::before {
-      background-color: transparent !important;
-    }
-  }
-
-  &-ping-right {
-    &:not(.@{table-prefix-cls}-has-fix-right) > .@{table-prefix-cls}-container {
-      position: relative;
-
-      &::after {
-        box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
-      }
-    }
-
-    .@{table-prefix-cls}-cell-fix-right-first::after,
-    .@{table-prefix-cls}-cell-fix-right-last::after {
-      box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
-    }
-  }
-
-  &-sticky {
-    &-holder {
-      position: sticky;
-      z-index: @table-sticky-zindex;
-      background: @component-background;
-    }
-
-    &-scroll {
-      position: sticky;
-      bottom: 0;
-      z-index: @table-sticky-zindex;
-      display: flex;
-      align-items: center;
-      background: lighten(@table-border-color, 80%);
-      border-top: 1px solid @table-border-color;
-      opacity: 0.6;
-
-      &:hover {
-        transform-origin: center bottom;
-      }
-
-      &-bar {
-        height: 8px;
-        background-color: @table-sticky-scroll-bar-bg;
-        border-radius: @table-sticky-scroll-bar-radius;
-
-        &:hover {
-          background-color: @table-sticky-scroll-bar-active-bg;
-        }
-
-        &-active {
-          background-color: @table-sticky-scroll-bar-active-bg;
-        }
-      }
-    }
-  }
-}
-
-@media all and (-ms-high-contrast: none) {
-  .@{table-prefix-cls} {
-    &-ping-left {
-      .@{table-prefix-cls}-cell-fix-left-last::after {
-        box-shadow: none !important;
-      }
-    }
-
-    &-ping-right {
-      .@{table-prefix-cls}-cell-fix-right-first::after {
-        box-shadow: none !important;
-      }
-    }
-  }
-}
-
-@import './radius';
-@import './rtl';