@central-design-system/components 4.0.0-alpha.3 → 4.0.0-alpha.5

package/src/components/CdsTable/CdsTable.scss

@@ -0,0 +1,1140 @@
+@use '../../styles/tools';
+@use './styles/CdsTable.variables' as *;
+@use './styles/CdsTable.mixins' as *;
+
+@include tools.layer('components') {
+  .cds-table-wrapper {
+    position: relative;
+    clear: both;
+    max-width: 100%;
+  }
+
+  .cds-table {
+    position: relative;
+
+    @include tools.cds-text-regular-200;
+
+    table {
+      width: 100%;
+      text-align: left;
+      border-spacing: 0;
+      border-collapse: separate;
+      border-radius: 0;
+    }
+
+    &--with-pagination {
+      .cds-table__footer {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &--striped,
+    &__row--striped {
+      > td {
+        background: linear-gradient(0deg, $table-stipe-cell-bg 0%, $table-stipe-cell-bg 100%), $table-cell-bg !important;
+      }
+    }
+
+    &__row--error {
+      > td {
+        background: linear-gradient(0deg, $table-error-cell-bg 0%, $table-error-cell-bg 100%), $table-cell-bg !important;
+      }
+    }
+
+    &__row--warning {
+      > td {
+        background: linear-gradient(0deg, $table-warning-cell-bg 0%, $table-warning-cell-bg 100%), $table-cell-bg !important;
+      }
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &--disabled,
+    &--readonly {
+      .cds-table__container {
+        pointer-events: none;
+        user-select: none;
+      }
+    }
+
+    // ============================= Row =============================
+    &__row {
+      &--no-children {
+        .cds-table__row-expand-icon {
+          visibility: hidden;
+          opacity: 0;
+        }
+      }
+    }
+
+    // ============================= Row =============================
+
+    // ============================= Cell =============================
+    &__thead > tr > th,
+    &__tbody > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td {
+      position: relative;
+      overflow-wrap: break-word;
+    }
+
+    &__size {
+      &--xs {
+        .cds-table__thead > tr > th,
+        .cds-table__tbody > tr > td,
+        tfoot > tr > th,
+        tfoot > tr > td {
+          padding: tools.$cds-spacing-xxs;
+
+          &.cds-table__row-expand-icon-cell,
+          &:has(.cds-button:not(.cds-table__row-expand-icon--tree)),
+          &:has(.cds-text-input),
+          &:has(.cds-toggle) {
+            padding: tools.$cds-spacing-3xs;
+          }
+
+          &:has(.cds-table-wrapper) {
+            padding: 0 !important;
+          }
+
+          &.cds-table__selection-column {
+            padding: 0 var(--cds-spacing-300);
+
+            &.cds-table__cell--fix-left {
+              padding: 0 var(--cds-spacing-200);
+            }
+          }
+        }
+      }
+
+      &--sm {
+        .cds-table__thead > tr > th,
+        .cds-table__tbody > tr > td,
+        tfoot > tr > th,
+        tfoot > tr > td {
+          padding: tools.$cds-spacing-xs;
+
+          &.cds-table__row-expand-icon-cell,
+          &:has(.cds-button:not(.cds-table__row-expand-icon--tree)),
+          &:has(.cds-text-input),
+          &:has(.cds-toggle) {
+            padding: tools.$cds-spacing-xxs;
+          }
+
+          &:has(.cds-table-wrapper) {
+            padding: 0 !important;
+          }
+
+          &.cds-table__selection-column {
+            padding: 0 var(--cds-spacing-300);
+
+            &.cds-table__cell--fix-left {
+              padding: 0 var(--cds-spacing-200);
+            }
+          }
+        }
+      }
+
+      &--md {
+        .cds-table__thead > tr > th,
+        tfoot > tr > th {
+          height: $table-th-height;
+          padding: $table-th-padding;
+
+          &.cds-table__selection-column {
+            padding: 0 var(--cds-spacing-300);
+
+            &.cds-table__cell--fix-left {
+              padding: 0 var(--cds-spacing-200);
+            }
+          }
+        }
+
+        .cds-table__tbody > tr > td,
+        tfoot > tr > td {
+          height: $table-td-height;
+          padding: $table-td-padding;
+
+          &.cds-table__row-expand-icon-cell,
+          &:has(.cds-button),
+          &:has(.cds-toggle) {
+            padding-top: var(--cds-spacing-300);
+            padding-bottom: 0;
+          }
+
+          &:has(.cds-table__row-expand-icon--tree) {
+            padding: $table-td-padding;
+          }
+
+          &:has(.cds-text-input) {
+            padding-top: var(--cds-spacing-200);
+            padding-bottom: 0;
+          }
+
+          &:has(.cds-table-wrapper) {
+            padding: 0 !important;
+          }
+
+          &.cds-table__selection-column {
+            padding: 0 var(--cds-spacing-300);
+
+            &.cds-table__cell--fix-left {
+              padding: 0 var(--cds-spacing-200);
+            }
+          }
+
+          &:has(.cds-skeleton-loader) {
+            padding-top: var(--cds-spacing-300);
+            padding-bottom: var(--cds-spacing-200);
+          }
+        }
+
+        .cds-table__table-layout--fixed {
+          .cds-table__thead > tr > th,
+          .cds-table__tbody > tr > td,
+          tfoot > tr > th,
+          tfoot > tr > td {
+            &.cds-table__selection-column {
+              padding: 0 var(--cds-spacing-200);
+            }
+          }
+        }
+      }
+
+      &--lg {
+        .cds-table__thead > tr > th,
+        .cds-table__tbody > tr > td,
+        tfoot > tr > th,
+        tfoot > tr > td {
+          padding: tools.$cds-spacing-m;
+
+          &.cds-table__row-expand-icon-cell,
+          &:has(.cds-button:not(.cds-table__row-expand-icon--tree)),
+          &:has(.cds-text-input),
+          &:has(.cds-toggle) {
+            padding: tools.$cds-spacing-m;
+          }
+
+          &:has(.cds-table-wrapper) {
+            padding: 0 !important;
+          }
+
+          &.cds-table__selection-column {
+            padding: 0 var(--cds-spacing-300);
+
+            &.cds-table__cell--fix-left {
+              padding: 0 var(--cds-spacing-200);
+            }
+          }
+        }
+      }
+
+      &--xl {
+        .cds-table__thead > tr > th,
+        .cds-table__tbody > tr > td,
+        tfoot > tr > th,
+        tfoot > tr > td {
+          padding: tools.$cds-spacing-l;
+
+          &.cds-table__row-expand-icon-cell,
+          &:has(.cds-button:not(.cds-table__row-expand-icon--tree)),
+          &:has(.cds-text-input),
+          &:has(.cds-toggle) {
+            padding: tools.$cds-spacing-l;
+          }
+
+          &:has(.cds-table-wrapper) {
+            padding: 0 !important;
+          }
+
+          &.cds-table__selection-column {
+            padding: 0 var(--cds-spacing-300);
+
+            &.cds-table__cell--fix-left {
+              padding: 0 var(--cds-spacing-200);
+            }
+          }
+        }
+      }
+    }
+
+    &__cell {
+      &--ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: keep-all;
+        white-space: nowrap;
+
+        .cds-table__column-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: keep-all;
+        }
+      }
+    }
+
+    // ============================= Cell =============================
+
+    // ============================ Header =============================
+    &__title {
+      padding: $table-slot-paddings;
+      color: $table-color;
+      background: $table-bg;
+      border-top: $table-border;
+      border-right: $table-border;
+      border-left: $table-border;
+      border-radius: $table-border-radius;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ============================ Header =============================
+
+    // ============================ Header =============================
+    &__toolbar {
+      padding: $table-slot-paddings;
+      color: $table-color;
+      background: $table-bg;
+      border-top: $table-border;
+      border-right: $table-border;
+      border-left: $table-border;
+      border-radius: $table-border-radius;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &__title + &__toolbar {
+      border-radius: 0;
+    }
+
+    // ============================ Header =============================
+
+    // ============================ Footer ============================
+    &__footer {
+      padding: $table-slot-paddings;
+      color: $table-color;
+      background: $table-bg;
+      border-right: $table-border;
+      border-bottom: $table-border;
+      border-left: $table-border;
+      border-radius: $table-border-radius;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    // ============================ Footer ============================
+
+    // ============================ Header ============================
+    &__thead {
+      > tr {
+        > th {
+          position: relative;
+          color: $table-header-color;
+          text-align: left;
+          background: $table-header-bg;
+          border-bottom: $table-border-header;
+          transition: background tools.$cds-duration-very-fast + ms ease;
+
+          @include tools.cds-text-bold-200;
+
+          &[colspan]:not([colspan='1']) {
+            text-align: center;
+          }
+        }
+      }
+
+      > tr:not(:last-child) > th {
+        &[colspan] {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    // ============================ Header ============================
+
+    // ============================= Body =============================
+    &__tbody {
+      > tr {
+        > td {
+          font-kerning: none;
+          vertical-align: top;
+          color: $table-color;
+          background: $table-cell-bg;
+          border-bottom: $table-border;
+          transition: background tools.$cds-duration-very-fast + ms;
+
+          @include tools.cds-text-regular-200;
+
+          // ========================= Nest Table ===========================
+          > .cds-table-wrapper:only-child,
+          > .cds-table__expanded-row-fixed > .cds-table-wrapper:only-child {
+            .cds-table {
+              margin-left: $table-nested-gap;
+
+              &__container {
+                border-top: 0;
+              }
+
+              &__thead > tr > th {
+                background-color: $table-bg-nested;
+              }
+
+              &__tbody > tr > td:last-child,
+              &__thead > tr > th:last-child {
+                border-right: 0;
+              }
+
+              &__tbody > tr:last-child > td {
+                border-bottom: 0;
+
+                &:first-child,
+                &:last-child {
+                  border-radius: 0;
+                }
+              }
+            }
+          }
+
+          // ========================= Nest Table ===========================
+        }
+
+        &.cds-table__row--selected {
+          > td {
+            background: $table-selected-cell-bg;
+          }
+        }
+      }
+    }
+
+    // ============================= Body =============================
+
+    // ============================= Hover ============================
+    &--hovered {
+      .cds-table__row:hover > td,
+      > td.cds-table__cell--row-hover {
+        background: $table-cell-hover-bg;
+      }
+
+      &.cds-table--ping-left {
+        @include cell-fixed-hover-ping('left');
+      }
+
+      &.cds-table--ping-right {
+        @include cell-fixed-hover-ping('right');
+      }
+
+      .cds-table__row--striped {
+        &:hover {
+          > td.cds-table__cell--row-hover {
+            background: linear-gradient(0deg, $table-stipe-cell-bg 0%, $table-stipe-cell-bg 100%), $table-cell-hover-bg !important;
+          }
+        }
+      }
+
+      .cds-table__row--selected {
+        &:hover {
+          > td.cds-table__cell--row-hover {
+            background: linear-gradient(0deg, $table-selected-cell-bg 0%, $table-selected-cell-bg 100%), $table-cell-hover-bg !important;
+          }
+        }
+      }
+
+      .cds-table__row--warning {
+        &:hover {
+          > td.cds-table__cell--row-hover {
+            background: linear-gradient(0deg, $table-warning-cell-bg 0%, $table-warning-cell-bg 100%), $table-cell-hover-bg !important;
+          }
+        }
+      }
+
+      .cds-table__row--error {
+        &:hover {
+          > td.cds-table__cell--row-hover {
+            background: linear-gradient(0deg, $table-error-cell-bg 0%, $table-error-cell-bg 100%), $table-cell-hover-bg !important;
+          }
+        }
+      }
+    }
+
+    // ============================= Hover ============================
+
+    // ========================== Selections ==========================
+    &__selection-col {
+      width: $table-selection-column-width;
+    }
+
+    &__bordered &__selection-col {
+      width: calc(#{$table-selection-column-width} + #{tools.$cds-spacing-m});
+    }
+
+    table tr th.cds-table__selection-column,
+    table tr td.cds-table__selection-column {
+      width: $table-selected-cell-width;
+      vertical-align: middle;
+      text-align: center;
+
+      .cds-table-radio-wrapper {
+        margin-right: 0;
+      }
+
+      .cds-selection-control__input {
+        --cds-selection-control-width: var(--cds-checkbox-button-size);
+      }
+    }
+
+    table tr th.cds-table__selection-column.cds-table__cell--fix-left {
+      z-index: 3;
+    }
+
+    table tr th.cds-table__selection-column::after {
+      background-color: transparent !important;
+    }
+
+    &__selection {
+      .cds-selection-control__input {
+        --cds-selection-control-width: var(--cds-checkbox-button-size);
+      }
+
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      &:has(.cds-table__selection--extra) {
+        width: tools.to-rem(32px);
+      }
+
+      &--extra {
+        position: absolute;
+        left: tools.to-rem(20px);
+        z-index: 1;
+        cursor: pointer;
+        transition: all tools.$cds-duration-normal + ms;
+
+        &-btn {
+          width: tools.to-rem(16px) !important;
+          height: tools.to-rem(16px) !important;
+          margin-left: var(--cds-spacing-100);
+        }
+      }
+    }
+
+    // ========================== Selections ==========================
+
+    // ========================== Expandable ==========================
+    &__cell--with-append {
+      .cds-table__row-expand-icon {
+        margin-right: tools.$cds-spacing-xs;
+      }
+    }
+
+    &__expand-icon-col {
+      width: tools.to-rem(48px);
+    }
+
+    &__row-expand-icon-cell {
+      text-align: center;
+    }
+
+    &__row-indent {
+      float: left;
+      height: 1px;
+    }
+
+    &__row-expand-icon {
+      float: left;
+
+      .cds-icon {
+        user-select: none;
+        transition: transform tools.$cds-duration-normal + ms;
+      }
+
+      &--tree {
+        width: $table-expandable-tree-button-width !important;
+        height: $table-expandable-tree-button-width !important;
+        background-color: transparent;
+      }
+
+      &--expanded {
+        background-color: $table-expandable-button-opened-bg;
+      }
+
+      &--expanded:not(&--tree) {
+        .cds-icon {
+          transform: rotate(90deg);
+        }
+      }
+
+      &--spaced {
+        visibility: hidden;
+        background: transparent;
+        border: 0;
+      }
+    }
+
+    tr.cds-table__expanded-row,
+    &,
+    &:hover {
+      > td {
+        background-color: $table-expanded-row-bg;
+      }
+    }
+
+    .cds-table__expanded-row-fixed {
+      position: relative;
+      padding: tools.$cds-spacing-m;
+      margin: calc(#{tools.$cds-spacing-m} * -1);
+    }
+
+    // ========================== Expandable ==========================
+
+    // ========================== Pagination ==========================
+    &__pagination {
+      display: grid;
+      grid-template-areas: 'area-left area-center area-right';
+      grid-auto-columns: 1fr 1fr 1fr;
+      align-items: center;
+      padding: $table-slot-paddings;
+      color: $table-color;
+      background: $table-bg;
+      border-right: $table-border;
+      border-bottom: $table-border;
+      border-left: $table-border;
+      border-radius: $table-border-radius;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+
+      @media (max-width: $table-breakpoint-md) {
+        grid-template-areas:
+          'area-left area-left'
+          'area-center area-center'
+          'area-right area-right';
+        grid-auto-columns: 1fr 1fr;
+      }
+
+      > * {
+        flex: none
+      }
+
+      .cds-table__pagination-counter {
+        @include tools.cds-text-regular-200;
+      }
+
+      .cds-table__pagination-size {
+        display: flex;
+        gap: var(--cds-spacing-200);
+        align-items: center;
+
+        > span {
+          color: $table-page-size-text-color;
+
+          @include tools.cds-text-regular-200;
+        }
+
+        .cds-select {
+          flex: 0 0 auto;
+        }
+      }
+
+      &--left {
+        .cds-pagination {
+          display: flex;
+          grid-area: area-left;
+          justify-content: flex-start;
+        }
+
+        .cds-table__pagination-counter {
+          display: flex;
+          grid-area: area-center;
+          justify-content: center;
+        }
+
+        .cds-table__pagination-size {
+          display: flex;
+          grid-area: area-right;
+          justify-content: flex-end;
+        }
+      }
+
+      &--center {
+        .cds-pagination {
+          display: flex;
+          grid-area: area-center;
+          justify-content: center;
+        }
+
+        .cds-table__pagination-counter {
+          display: flex;
+          grid-area: area-left;
+          justify-content: flex-start;
+        }
+
+        .cds-table__pagination-size {
+          display: flex;
+          grid-area: area-right;
+          justify-content: flex-end;
+        }
+      }
+
+      &--right {
+        .cds-pagination {
+          display: flex;
+          grid-area: area-right;
+          justify-content: flex-end;
+        }
+
+        .cds-table__pagination-counter {
+          display: flex;
+          grid-area: area-center;
+          justify-content: center;
+        }
+
+        .cds-table__pagination-size {
+          display: flex;
+          grid-area: area-left;
+          justify-content: flex-start;
+        }
+      }
+    }
+
+    // ========================== Pagination ==========================
+
+    // ========================== Bordered ==========================
+    .cds-table__container {
+      border-top: $table-border;
+      border-left: $table-border;
+
+      > .cds-table__content,
+      > .cds-table__header,
+      > .cds-table__body,
+      > .cds-table__summary {
+        > table {
+          > thead > tr > th,
+          > tbody > tr > td,
+          > tfoot > tr > th,
+          > tfoot > tr > td {
+            border-right: $table-border;
+            border-bottom: $table-border;
+          }
+
+          > thead {
+            > tr:not(:last-child) > th {
+              border-bottom: $table-border;
+            }
+          }
+
+          // Fixed right should provides additional border
+          > thead > tr,
+          > tbody > tr,
+          > tfoot > tr {
+            &.cds-table__cell--fix-right-first::after {
+              border-right: $table-border;
+            }
+          }
+        }
+      }
+    }
+
+    &.cds-table--borderless {
+      .cds-table__container {
+        border-right: $table-border;
+
+        .cds-table__thead > tr > th {
+          border-right: none;
+        }
+
+        .cds-table__tbody > tr > td {
+          border-right: none;
+          border-left: none;
+        }
+      }
+    }
+
+    // ========================== Bordered ==========================
+
+
+    // ================================================================
+    // =                           Function                           =
+    // ================================================================
+
+    // ============================ Sorter ============================
+    &__thead {
+      th.cds-table__column-has-sorters {
+        cursor: pointer;
+        transition: all tools.$cds-duration-normal + ms;
+
+        &:hover {
+          background: $table-header-sort-active-bg;
+        }
+
+        &.cds-table__cell--fix-left:hover,
+        &.cds-table__cell--fix-right:hover {
+          background: $table-fixed-header-sort-active-bg;
+        }
+      }
+
+      th.cds-table__column-sort {
+        // background: $table-header-sort-bg; @todo выделения пока убираем, но вдруг опять захочется?
+      }
+    }
+
+    td {
+      &.cds-table__column-sort {
+        // background: $table-body-sort-bg; @todo выделения пока убираем, но вдруг опять захочется?
+      }
+    }
+
+    &__column-title {
+      position: relative;
+      z-index: 1;
+      flex: 1;
+    }
+
+    &__column-sorters {
+      display: flex;
+      flex: auto;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 tools.$cds-spacing-xxs;
+
+      &::after {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        content: '';
+      }
+    }
+
+    &__column-sorter {
+      display: flex;
+      margin-left: tools.$cds-spacing-xxs;
+
+      &-inner {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &-icon {
+        svg {
+          fill: $table-sort-icon-color;
+        }
+
+        &--active {
+          svg {
+            fill: $table-sort-icon-color-active;
+          }
+        }
+      }
+
+      &-up + &-down {
+        margin-top: -0.3em;
+      }
+    }
+
+    // ============================ Sorter ============================
+
+    // ============================ Filter ============================
+    &__filter-column {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &__filter-trigger {
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 var(--cds-spacing-100);
+      cursor: pointer;
+
+      @include tools.cds-animation-motion(tools.$cds-duration-instant, 'ease-in-out', 'basic');
+    }
+
+    &__dropdown {
+      padding: var(--cds-spacing-100);
+
+      &-buttons {
+        display: flex;
+        gap: var(--cds-spacing-200);
+        justify-content: space-between;
+        padding: var(--cds-spacing-200);
+        padding-bottom: var(--cds-spacing-100);
+
+        .cds-button {
+          flex: 1;
+        }
+      }
+
+      &-no-filters {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--cds-spacing-200);
+      }
+    }
+
+    // ============================ Filter ============================
+
+    // ========================= Placeholder ==========================
+    &__tbody > tr.cds-table-placeholder {
+      text-align: center;
+    }
+
+    // ========================= Placeholder ==========================
+
+    // ============================ Fixed =============================
+    &__cell {
+      &--fix-left,
+      &--fix-right {
+        position: sticky !important;
+        z-index: $table-z-index-fixed;
+      }
+
+      &--fix-left-first::after,
+      &--fix-left-last::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: -1px;
+        width: 30px;
+        pointer-events: none;
+        content: '';
+        transform: translateX(100%);
+        transition: box-shadow tools.$cds-duration-normal + ms;
+      }
+
+      &--fix-right-first::after,
+      &--fix-right-last::after {
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        left: 0;
+        width: 30px;
+        pointer-events: none;
+        content: '';
+        transform: translateX(-100%);
+        transition: box-shadow tools.$cds-duration-normal + ms;
+      }
+
+      &--scrollbar {
+        box-shadow: 0 1px 0 1px $table-header-bg;
+      }
+    }
+
+    .cds-table__container {
+      &::before,
+      &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: $table-z-index-fixed;
+        width: 30px;
+        pointer-events: none;
+        content: '';
+        transition: box-shadow tools.$cds-duration-normal + ms;
+      }
+
+      &::before {
+        left: 0;
+      }
+
+      &::after {
+        right: 0;
+      }
+    }
+
+    &--ping-left {
+      &:not(.cds-table--has-fix-left) .cds-table__container {
+        position: relative;
+
+        &::before {
+          box-shadow: inset 10px 0 8px -8px $table-box-shadow-color;
+        }
+      }
+
+      .cds-table__cell--fix-left-first::after,
+      .cds-table__cell--fix-left-last::after {
+        box-shadow: inset 10px 0 8px -8px $table-box-shadow-color;
+      }
+
+      @include cell-fixed-ping('left');
+    }
+
+    &--ping-right {
+      &:not(.cds-table--has-fix-right) .cds-table__container {
+        position: relative;
+
+        &::after {
+          box-shadow: inset -10px 0 8px -8px $table-box-shadow-color;
+        }
+      }
+
+      .cds-table__cell--fix-right-first::after,
+      .cds-table__cell--fix-right-last::after {
+        box-shadow: inset -10px 0 8px -8px $table-box-shadow-color;
+      }
+
+      @include cell-fixed-ping('right');
+
+      .cds-table__cell--fix-right-first {
+        border-left: $table-border !important;
+      }
+    }
+
+    &__sticky {
+      &-holder {
+        position: sticky;
+        z-index: $table-z-index-sticky;
+        background: $table-bg;
+      }
+
+      &-scroll {
+        position: sticky;
+        bottom: 0;
+        z-index: $table-z-index-sticky;
+        display: flex;
+        align-items: center;
+        border-top: $table-sticky-scroll-border;
+        opacity: 0.6;
+
+        &:hover {
+          transform-origin: center bottom;
+        }
+
+        &-bar {
+          height: tools.to-rem(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;
+          }
+        }
+      }
+    }
+
+    // ============================ Fixed =============================
+
+    // ============================ Resize =============================
+    &__resize-handle {
+      position: absolute;
+      inset: 0 tools.to-rem(-8px) 0 auto;
+      z-index: 1;
+      width: tools.to-rem(16px);
+      height: 100% !important;
+      touch-action: none;
+      cursor: col-resize;
+      user-select: auto;
+
+      &-line {
+        display: block;
+        width: 1px;
+        height: 100% !important;
+        margin-left: 8px;
+        background-color: $table-line-bg;
+        opacity: 0;
+
+        @include tools.cds-animation-motion(tools.$cds-duration-fast, 'ease-in-out', 'basic');
+      }
+
+      &:hover {
+        .cds-table__resize-handle-line {
+          opacity: 1;
+        }
+      }
+
+      &--dragging {
+        overflow: hidden;
+
+        .cds-table__resize-handle-line {
+          opacity: 1;
+        }
+
+        &::before {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          width: 200vw;
+          content: ' ';
+          opacity: 0;
+          transform: translateX(-50%);
+        }
+      }
+    }
+
+    // ============================ Resize =============================
+
+    // ========================== Drag-n-Drop ==========================
+    &__drag-handle-cell {
+      padding-right: 0 !important;
+      padding-left: 0 !important;
+      text-align: center;
+    }
+
+    &__drag-handle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: $table-drag-handle-color;
+      touch-action: none;
+      cursor: grab;
+      user-select: none;
+
+      @include tools.cds-animation-motion(tools.$cds-duration-fast, 'ease-in-out', 'basic');
+
+      &:hover {
+        color: $table-drag-handle-color-hover;
+      }
+
+      &:active {
+        cursor: grabbing;
+      }
+
+      &-icon {
+        width: $table-drag-handle-size;
+        height: $table-drag-handle-size;
+      }
+
+      &--column {
+        margin-right: var(--cds-spacing-100);
+        vertical-align: middle;
+      }
+    }
+
+    // Перетаскиваемая строка / колонка
+    &__row--dragging > td,
+    &__cell--col-dragging {
+      opacity: $table-dragging-opacity;
+    }
+
+    // Индикатор позиции вставки строки
+    &__row--drag-over-top > td {
+      box-shadow: inset 0 $table-drag-indicator-size 0 0 $table-drag-indicator-color;
+    }
+
+    &__row--drag-over-bottom > td {
+      box-shadow: inset 0 calc(-1 * #{$table-drag-indicator-size}) 0 0 $table-drag-indicator-color;
+    }
+
+    // Индикатор позиции вставки колонки
+    &__cell--drag-over-left {
+      box-shadow: inset $table-drag-indicator-size 0 0 0 $table-drag-indicator-color;
+    }
+
+    &__cell--drag-over-right {
+      box-shadow: inset calc(-1 * #{$table-drag-indicator-size}) 0 0 0 $table-drag-indicator-color;
+    }
+
+    // ========================== Drag-n-Drop ==========================
+  }
+}