es-grid-template 1.1.7 → 1.2.0

package/es/grid-component/styles.scss

@@ -1,701 +1,766 @@
-$prefix: 'ui-rc' !default;
-$antdPrefix: 'ant' !default;
-$primary: #eb4619 !default;
-$rowHoverBg: #FBDED6 !default;
-$rowSelectedBg: #FEF2EF !default;
-//$tableBorderColor: red !default;
-$tableBorderColor: #e0e0e0 !default;
-//$tableBorderColor: #f0f0f0 !default;
-$border-radius: 6px !default;
-$body-color: #ffffff !default;
-$cell-selected-bg: #E6EFFD !default;
-$cell-index-selected-bg: #0550C5 !default;
-$cell-index-focus-bg: #CEDBEF !default;
-$rowSelectedHoverBg: 'ui-rc' !default;
-$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
-$fontFamily: "Montserrat",Helvetica,Arial,serif !default;
-
-.react-hot-toast {
-  font-size: 1rem;
-  color: $body-color;
-  letter-spacing: 0.14px;
-  box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
-  border-radius: $border-radius;
-}
-
-.popup-context-menu {
-  min-width: 200px;
-}
-
-// -------------- Table -------------
-
-.#{$prefix}-table-wrapper {
-
-
-  &.table-none-column-select {
-    .#{$prefix}-table-cell {
-      &.#{$prefix}-table-selection-column {
-        padding: 0 !important;
-        overflow: hidden !important;
-        border-inline-end: 0 !important;
-        //flex: 0 0 0 !important;
-        //width: 0 !important;
-      }
-    }
-  }
-
-  .ui-rc-table {
-    line-height: 20px;
-    //color: #283046;
-    //font-weight: 500;
-    //font-family: $fontFamily !important;
-  }
-
-  .#{$prefix}-table-tbody-virtual {
-    .#{$prefix}-table-cell {
-      border-bottom: 1px solid $tableBorderColor;
-    }
-  }
-
-  .#{$prefix}-table-bordered {
-
-    .#{$prefix}-table-tbody-virtual {
-      .#{$prefix}-table-cell {
-        //display: flex;
-        border-inline-end: 1px solid $tableBorderColor;
-      }
-    }
-
-  }
-
-  .#{$prefix}-table-tbody {
-
-    .#{$prefix}-table-row {
-
-      &.#{$prefix}-table-row-selected {
-        > .#{$prefix}-table-cell {
-          background: #FEF2EF;
-        }
-      }
-
-      &.row-disabled {
-        .ui-rc-table-cell {
-          //background-color: #f5f5f5;
-        }
-      }
-
-      > .#{$prefix}-table-cell {
-        &.#{$prefix}-table-cell-row-hover {
-          background: #FBDED6;
-        }
-
-        &.ui-rc-cell-command {
-          padding: 3px 8px;
-
-          .ui-rc-cell-command__content {
-            display: flex;
-            gap: 5px;
-            overflow: hidden;
-          }
-        }
-
-
-      }
-
-      &:has(.indent-level-1) {
-        .ui-rc-table-cell {
-          &.cell-number {
-            padding-left: 15px;
-          }
-        }
-      }
-    }
-
-    .ui-rc-table-placeholder {
-      .ui-rc-table-cell {
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-        .ui-rc-table-expanded-row-fixed {
-          margin-top: 0 !important;
-          margin-bottom: 0 !important;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}-table-thead {
-
-    > tr {
-      > th,
-      > td {
-        border-bottom: 1px solid $tableBorderColor;
-      }
-    }
-
-    .ui-rc-table-cell {
-      &.ui-rc-table-cell-fix-left-last {
-        .ui-rc-table-cell-content {
-          //overflow: visible;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}-table-summary {
-    .#{$prefix}-table-cell {
-      background-color: #fafafa;
-      height: 39px;
-      font-weight: 600;
-    }
-
-    > tr > td {
-      border-bottom: 1px solid $tableBorderColor;
-    }
-  }
-
-  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
-    border-inline-start: 1px solid $tableBorderColor;
-  }
-
-  .#{$prefix}-table {
-
-    &.#{$prefix}-table-bordered {
-      > .#{$prefix}-table-container {
-        border-inline-start: 1px solid $tableBorderColor;
-        border-top: 1px solid $tableBorderColor;
-
-        > .#{$prefix}-table-content,
-        > .#{$prefix}-table-header,
-        > .#{$prefix}-table-body,
-        > .#{$prefix}-table-summary {
-          > table {
-            > thead {
-              > tr:not(:last-child) {
-                > th {
-                  border-bottom: 1px solid $tableBorderColor;
-                }
-              }
-            }
-          }
-        }
-
-
-        > .#{$prefix}-table-content,
-        > .#{$prefix}-table-header,
-        > .#{$prefix}-table-body,
-        > .#{$prefix}-table-summary {
-          > table {
-            > thead,
-            > tbody,
-            > tfoot {
-              > tr {
-                > th,
-                > td {
-                  border-inline-end: 1px solid $tableBorderColor;
-                }
-              }
-            }
-          }
-        }
-
-      }
-
-      > .#{$prefix}-table-title {
-        border: 1px solid $tableBorderColor;
-        border-bottom: 0;
-      }
-    }
-
-    &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
-      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
-    }
-
-  }
-
-  .#{$prefix}-table-ping-left {
-    .#{$prefix}-table-cell-fix-left-first::after,
-    .#{$prefix}-table-cell-fix-left-last::after {
-      box-shadow: inset 10px 0 8px -8px $boxShadowColor;
-    }
-  }
-
-  .#{$prefix}-table-ping-right {
-    .#{$prefix}-table-cell-fix-right-first::after,
-    .#{$prefix}-table-cell-fix-right-last::after {
-      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
-    }
-  }
-
-
-  .#{$prefix}-table.#{$prefix}-table-bordered {
-    > .#{$prefix}-table-container {
-      > .#{$prefix}-table-header > table > thead > tr,
-      > .#{$prefix}-table-summary > table > tfoot > tr {
-        > .#{$prefix}-table-cell-fix-right-first::before {
-          border-inline-start: 1px solid $tableBorderColor;
-          content: "";
-          position: absolute;
-          inset-block: 0;
-          inset-inline-start: -1px;
-        }
-      }
-    }
-  }
-
-
-}
-
-// -------------- Table edit-------------
-
-.#{$prefix}-table-wrapper {
-
-  &.grid-editable {
-
-    //.#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-cell,
-    //.#{$prefix}-table.#{$prefix}-table-small .cell-editable,
-    //.#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>th,
-    //.#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>td {
-    //  padding: 0;
-    //}
-
-    .#{$prefix}-table.#{$prefix}-table-small .ui-rc-table-tbody .rc-ui-cell-editable{
-      display: flex;
-      padding: 0;
-    }
-
-    .#{$prefix}-table.#{$prefix}-table-small {
-      .#{$prefix}-table-thead > tr > th,
-      tfoot > tr > th,
-      tfoot > tr > td,
-      tfoot > tr > td.#{$prefix}-table-cell
-      {
-        //padding: 8px 8px;
-      }
-    }
-
-    .#{$prefix}-table.#{$prefix}-table-small {
-      .#{$prefix}-table-selection-column{
-        //padding: 8px 8px;
-      }
-    }
-
-    .ui-rc_cell-content {
-      user-select: none;
-      padding: 8px 8px;
-      min-height: 23px;
-      .ui-rc_content {
-        width: 100%;
-      }
-    }
-
-    .ui-rc_cell-content.selected {
-      background-color: $cell-selected-bg;
-    }
-
-    .ui-rc_cell-content--index {
-      &.focus {
-        background-color: $cell-index-focus-bg;
-        //color: #fff;
-        font-weight: 500;
-      }
-      &.selected {
-        background-color: $cell-index-selected-bg;
-        color: #fff;
-        font-weight: 500;
-      }
-    }
-
-    .#{$prefix}-table-tbody {
-      .#{$prefix}-table-row {
-        &.#{$prefix}-table-row-selected {
-          >.#{$prefix}-table-cell {
-            background: #FEF2EF;
-          }
-        }
-        >.#{$prefix}-table-cell {
-          &.#{$prefix}-table-cell-row-hover {
-            background: #FBDED6;
-          }
-        }
-      }
-
-
-      .#{$prefix}-table-cell{
-
-        &.cell-editing {
-          padding: 0 !important;
-          &:focus-visible {
-            outline: none;
-          }
-          .ant-form-item ,
-          .ant-row.ant-form-item-row,
-          .ant-col.ant-form-item-control,
-          .ant-form-item-control-input,
-          .ant-form-item-control-input-content,
-          .ant-input{
-            height: 100%;
-            &:focus-visible {
-              outline: none;
-            }
-          }
-
-          .ui-rc-checkbox-wrapper {
-            .ui-rc-checkbox {
-              background-color: red;
-            }
-            .ui-rc-checkbox-input {
-              &:focus-visible {
-                outline: none;
-              }
-            }
-          }
-
-
-          .ant-input, .ant-picker{
-            border-radius: 0;
-          }
-
-          // color picker
-
-          .ant-color-picker-trigger{
-            height: 100%;
-            border-radius: 0;
-            .ant-color-picker-color-block {
-              height: 100%;
-              width: 100%;
-            }
-
-          }
-
-
-          // ------------ select  ---------------
-
-          .ui-rc-table-select-single .ui-rc-table-select-selector,
-          .ui-rc-select-single .ui-rc-select-selector {
-
-            border-radius: 0;
-
-          }
-
-          .ui-rc-table-select-single:not(.ui-rc-table-select-customize-input) {
-            .ui-rc-table-select-selector {
-              .ui-rc-table-select-selection-search-input {
-                height: auto;
-              }
-            }
-          }
-
-          // ------------ select  ---------------
-
-
-        }
-        &.cell-editable {
-          &:focus-visible {
-            outline: none;
-          }
-        }
-        .ui-rc-table-cell-content {
-          display: flex;
-          height: 100%;
-        }
-
-        .ui-rc_cell-content,
-        .ui-rc-table-cell-content{
-          width: 100%;
-        }
-        .ui-rc_content {
-          //padding: 5px 8px;
-        }
-        .ui-rc_content:has(.ant-color-picker-trigger) {
-          padding: 1px 8px;
-        }
-      }
-    }
-
-  }
-
-}
-// ---------------- Table edit end---------------
-
-
-// -------------- Checkbox ----------
-
-.#{$prefix}-checkbox-indeterminate {
-  &:hover {
-    .#{$prefix}-checkbox-inner {
-      border-color: $primary !important;;
-    }
-  }
-
-  .#{$prefix}-checkbox-inner {
-    &:after {
-      background-color: $primary;
-    }
-  }
-}
-//.ui-rc-checkbox-input {
-//  &:focus-visible {
-//    outline: none;
-//  }
-//}
-
-.ui-rc-checkbox .ui-rc-checkbox-input:focus-visible+.ui-rc-checkbox-inner {
-  outline: none;
-}
-
-.#{$prefix}-checkbox {
-  &.#{$prefix}-checkbox-checked {
-    &:hover {
-      .#{$prefix}-checkbox-inner {
-        background-color: $primary;
-        border-color: $primary;
-      }
-    }
-
-    .#{$prefix}-checkbox-inner {
-      background-color: $primary;
-      border-color: $primary;
-    }
-  }
-}
-
-.#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
-  .#{$prefix}-checkbox-inner {
-    border-color: $primary;
-  }
-}
-
-.#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
-  .#{$prefix}-checkbox-inner {
-    border-color: $primary;
-  }
-
-  .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
-    .#{$prefix}-checkbox-inner {
-      background-color: $primary;
-    }
-  }
-}
-
-// ------------ Tree ---------------
-
-.#{$prefix}-tree {
-  .#{$prefix}-tree-checkbox-checked {
-    .#{$prefix}-tree-checkbox-inner {
-      background-color: $primary;
-      border-color: $primary;
-    }
-  }
-
-  .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
-  .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
-    .#{$prefix}-tree-checkbox-inner {
-      background-color: $primary;
-    }
-  }
-
-  .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
-  .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
-    .#{$prefix}-tree-checkbox-inner {
-      border-color: $primary;
-    }
-  }
-}
-
-
-// ------------ ant Tree ---------------
-
-.#{$antdPrefix}-tree {
-  .#{$antdPrefix}-tree-checkbox-checked {
-    .#{$antdPrefix}-tree-checkbox-inner {
-      background-color: $primary;
-      border-color: $primary;
-    }
-  }
-
-  .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
-  .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
-    .#{$antdPrefix}-tree-checkbox-inner {
-      background-color: $primary;
-    }
-  }
-
-  .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
-  .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
-    .#{$antdPrefix}-tree-checkbox-inner {
-      border-color: $primary;
-    }
-  }
-}
-
-
-// ------------ paging ---------------
-
-.#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
-  margin: 0;
-}
-
-.ui-rc-table-wrapper {
-  .ui-rc-table {
-    .#{$prefix}-pagination {
-      &::before {
-        content: "";
-        position: absolute;
-        border-left: 1px solid $tableBorderColor;
-        height: 55px;
-        bottom: 0;
-        left: 0;
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        border-left: 1px solid $tableBorderColor;
-        height: 55px;
-        bottom: 0;
-        visibility: visible;
-        right: 0;
-      }
-
-      &.top-pagination {
-        border: none;
-        padding-top: 0;
-        padding-bottom: 0;
-        .ui-rc-pagination-total-text {
-          margin-left: auto;
-        }
-      }
-      border-bottom: 1px solid $tableBorderColor;
-
-    }
-  }
-}
-
-
-.#{$prefix}-pagination {
-
-  .ui-rc-pagination-total-text {
-    white-space: nowrap;
-  }
-
-  .#{$prefix}-pagination-item-active {
-    border-color: $primary;
-
-    &:hover {
-      border-color: $primary;
-
-      a {
-        color: $primary;
-      }
-    }
-
-    a {
-      color: $primary;
-    }
-  }
-
-  .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
-    .#{$prefix}-pagination-item-container {
-      .#{$prefix}-pagination-item-link-icon {
-        color: $primary;
-      }
-    }
-  }
-}
-
-
-
-//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
-//  border-inline-end: 1px solid $tableBorderColor;
-//}
-//
-//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
-//  //border-inline-end: 1px solid $tableBorderColor;
-//  border-inline-end: 0 solid $tableBorderColor;
-//}
-//
-//
-//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
-//  margin-top: 0;
-//  margin-bottom: 0;
-//  border-inline-end: 1px solid $tableBorderColor;
-//}
-//
-//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
-//  border-inline-end: 0 solid $tableBorderColor;
-//}
-
-
-.#{$prefix}-table-wrapper {
-  .#{$prefix}-table {
-    &.#{$prefix}-table-bordered {
-      > .#{$prefix}-table-container {
-        > .#{$prefix}-table-content,
-        > .#{$prefix}-table-header,
-        > .#{$prefix}-table-body,
-        > .#{$prefix}-table-summary {
-          > table > tbody > tr {
-            > th,
-            > td {
-              > .#{$prefix}-table-expanded-row-fixed::after {
-                // Thêm CSS ở đây
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-
-.ui-rc-table-wrapper {
-  .ui-rc-table.ui-rc-table-small {
-    .ui-rc-table-title,
-    .ui-rc-table-footer,
-    .ui-rc-table-cell,
-    .ui-rc-table-thead > tr > th,
-    .ui-rc-table-tbody > tr > th,
-    .ui-rc-table-tbody > tr > td,
-    tfoot > tr > th,
-    tfoot > tr > td {
-      //padding: 8px 8px;
-      font-size: 13px;
-    }
-  }
-}
-.ui-rc-table-wrapper {
-  .ui-rc-table.ui-rc-table-small {
-    .ui-rc-table-cell {
-      &:has(.ant-color-picker-trigger) {
-        padding: 1px 8px;
-      }
-      .ant-color-picker-trigger{
-        width: 100%;
-        min-height: 20px;
-        .ant-color-picker-clear {
-          height: 20px;
-        }
-      }
-    }
-  }
-}
-
-
-
-//ui-rc-table-ping-right
-
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after {
-  border-inline-end: 1px solid $tableBorderColor;
-}
+$prefix: 'ui-rc' !default;
+$antdPrefix: 'ant' !default;
+$primary: #eb4619 !default;
+$rowHoverBg: #FBDED6 !default;
+$rowSelectedBg: #FEF2EF !default;
+//$tableBorderColor: red !default;
+$tableBorderColor: #e0e0e0 !default;
+//$tableBorderColor: #f0f0f0 !default;
+$border-radius: 6px !default;
+$body-color: #ffffff !default;
+$cell-selected-bg: #E6EFFD !default;
+$cell-index-selected-bg: #0550C5 !default;
+$cell-index-focus-bg: #CEDBEF !default;
+$rowSelectedHoverBg: 'ui-rc' !default;
+$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
+$fontFamily: "Montserrat",Helvetica,Arial,serif !default;
+
+.react-hot-toast {
+  font-size: 1rem;
+  color: $body-color;
+  letter-spacing: 0.14px;
+  box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
+  border-radius: $border-radius;
+}
+
+.popup-context-menu {
+  min-width: 200px;
+}
+
+// -------------- Table -------------
+
+.#{$prefix}-table-wrapper {
+
+
+  &.table-none-column-select {
+    .#{$prefix}-table-cell {
+      &.#{$prefix}-table-selection-column {
+        padding: 0 !important;
+        overflow: hidden !important;
+        border-inline-end: 0 !important;
+        //flex: 0 0 0 !important;
+        //width: 0 !important;
+      }
+    }
+  }
+
+  .ui-rc-table {
+    line-height: 20px;
+    //color: #283046;
+    //font-weight: 500;
+    //font-family: $fontFamily !important;
+  }
+
+  .#{$prefix}-table-tbody-virtual {
+    .#{$prefix}-table-cell {
+      border-bottom: 1px solid $tableBorderColor;
+    }
+  }
+
+  .#{$prefix}-table-bordered {
+
+    .#{$prefix}-table-tbody-virtual {
+      .#{$prefix}-table-cell {
+        //display: flex;
+        border-inline-end: 1px solid $tableBorderColor;
+      }
+    }
+
+  }
+
+  .#{$prefix}-table-tbody {
+
+    .#{$prefix}-table-row {
+
+      &.#{$prefix}-table-row-selected {
+        > .#{$prefix}-table-cell {
+          background: #FEF2EF;
+        }
+      }
+
+      &.row-disabled {
+        .ui-rc-table-cell {
+          //background-color: #f5f5f5;
+        }
+      }
+
+      > .#{$prefix}-table-cell {
+        &.#{$prefix}-table-cell-row-hover {
+          background: #FBDED6;
+        }
+
+        &.ui-rc-cell-command {
+          padding: 3px 8px;
+
+          .ui-rc-cell-command__content {
+            display: flex;
+            gap: 5px;
+            overflow: hidden;
+          }
+        }
+
+
+      }
+
+
+      @for $i from 0 through 10 {
+        &:has(.indent-level-#{$i}) {
+          .ui-rc-table-cell {
+            &.cell-number {
+              .ui-rc_content {
+                padding-left: $i * 10px;
+              }
+            }
+          }
+        }
+      }
+
+    }
+
+    .ui-rc-table-placeholder {
+      .ui-rc-table-cell {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        .ui-rc-table-expanded-row-fixed {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}-table-thead {
+
+    > tr {
+      > th,
+      > td {
+        border-bottom: 1px solid $tableBorderColor;
+      }
+    }
+
+    .ui-rc-table-cell {
+      &.ui-rc-table-cell-fix-left-last {
+        .ui-rc-table-cell-content {
+          //overflow: visible;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}-table-summary {
+    .#{$prefix}-table-cell {
+      background-color: #fafafa;
+      height: 39px;
+      font-weight: 600;
+    }
+
+    > tr > td {
+      border-bottom: 1px solid $tableBorderColor;
+    }
+  }
+
+  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
+    border-inline-start: 1px solid $tableBorderColor;
+  }
+
+  .#{$prefix}-table {
+
+    &.#{$prefix}-table-bordered {
+      > .#{$prefix}-table-container {
+        border-inline-start: 1px solid $tableBorderColor;
+        border-top: 1px solid $tableBorderColor;
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead {
+              > tr:not(:last-child) {
+                > th {
+                  border-bottom: 1px solid $tableBorderColor;
+                }
+              }
+            }
+          }
+        }
+
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead,
+            > tbody,
+            > tfoot {
+              > tr {
+                > th,
+                > td {
+                  border-inline-end: 1px solid $tableBorderColor;
+                }
+              }
+            }
+          }
+        }
+
+      }
+
+      > .#{$prefix}-table-title {
+        border: 1px solid $tableBorderColor;
+        border-bottom: 0;
+      }
+    }
+
+    &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
+      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
+    }
+
+  }
+
+  .#{$prefix}-table-ping-left {
+    .#{$prefix}-table-cell-fix-left-first::after,
+    .#{$prefix}-table-cell-fix-left-last::after {
+      box-shadow: inset 10px 0 8px -8px $boxShadowColor;
+    }
+  }
+
+  .#{$prefix}-table-ping-right {
+    .#{$prefix}-table-cell-fix-right-first::after,
+    .#{$prefix}-table-cell-fix-right-last::after {
+      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
+    }
+  }
+
+
+  .#{$prefix}-table.#{$prefix}-table-bordered {
+    > .#{$prefix}-table-container {
+      > .#{$prefix}-table-header > table > thead > tr,
+      > .#{$prefix}-table-summary > table > tfoot > tr {
+        > .#{$prefix}-table-cell-fix-right-first::before {
+          border-inline-start: 1px solid $tableBorderColor;
+          content: "";
+          position: absolute;
+          inset-block: 0;
+          inset-inline-start: -1px;
+        }
+      }
+    }
+  }
+
+
+}
+
+// -------------- Table edit-------------
+
+.#{$prefix}-table-wrapper {
+
+  &.grid-editable {
+
+
+    //.#{$prefix}-table.#{$prefix}-table-small .ui-rc-table-tbody .rc-ui-cell-editable{
+    .#{$prefix}-table .ui-rc-table-tbody .rc-ui-cell-editable{
+      display: flex;
+      padding: 0;
+      .ui-rc-table-row-expand-icon {
+        top: 8px;
+        left: 8px;
+      }
+    }
+
+    .#{$prefix}-table.#{$prefix}-table-small {
+      .#{$prefix}-table-thead > tr > th,
+      tfoot > tr > th,
+      tfoot > tr > td,
+      tfoot > tr > td.#{$prefix}-table-cell
+      {
+        //padding: 8px 8px;
+      }
+    }
+
+    .#{$prefix}-table.#{$prefix}-table-small {
+      .#{$prefix}-table-selection-column{
+        //padding: 8px 8px;
+      }
+    }
+
+    .ui-rc_cell-content {
+      user-select: none;
+      padding: 8px 8px;
+      min-height: 23px;
+      overflow: hidden;
+      .ui-rc_content {
+        width: 100%;
+      }
+    }
+
+    .ui-rc_cell-content.selected {
+      background-color: $cell-selected-bg;
+    }
+
+    .ui-rc_cell-content--index {
+      &.focus {
+        background-color: $cell-index-focus-bg;
+        //color: #fff;
+        font-weight: 500;
+      }
+      &.selected {
+        background-color: $cell-index-selected-bg;
+        color: #fff;
+        font-weight: 500;
+      }
+    }
+
+    .#{$prefix}-table-tbody {
+
+      .#{$prefix}-table-row {
+        &.#{$prefix}-table-row-selected {
+          >.#{$prefix}-table-cell {
+            background: #FEF2EF;
+          }
+        }
+        >.#{$prefix}-table-cell {
+          &.#{$prefix}-table-cell-row-hover {
+            background: #FBDED6;
+          }
+        }
+
+        .ui-rc-table-cell {
+
+          .ui-rc-table-row-indent {
+            position: absolute;
+            @for $i from 1 through 10 {
+              &.indent-level-#{$i} {
+                padding-left: $i * 25px;;
+              }
+            }
+          }
+
+          @for $i from 0 through 10 {
+            &:has(.indent-level-#{$i}) {
+
+              .ui-rc-table-row-expand-icon {
+                position: absolute;
+                //.ui-rc_content {
+                padding-left: $i * 10px;
+                //}
+              }
+
+              .ui-rc_cell-content {
+                padding-left: $i * 25px + 8px;
+              }
+
+            }
+          }
+
+          @for $i from 0 through 10 {
+            &:has(.indent-level-#{$i}) {
+
+              .ui-rc-table-row-expand-icon {
+                position: absolute;
+                left: $i * 25px + 8px !important;
+              }
+
+              .ui-rc_cell-content {
+                padding-left: ($i + 1)* 25px + 8px;
+              }
+
+            }
+          }
+        }
+      }
+
+
+      .#{$prefix}-table-cell{
+
+        &.ui-rc-table-cell-ellipsis {
+          .ui-rc_cell-content {
+
+            .ui-rc_content {
+              text-overflow: ellipsis;
+              text-decoration: none;
+              transition: 0.3s;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+          }
+        }
+
+        &.cell-editing {
+          padding: 0 !important;
+          &:focus-visible {
+            outline: none;
+          }
+          .ant-form-item ,
+          .ant-row.ant-form-item-row,
+          .ant-col.ant-form-item-control,
+          .ant-form-item-control-input,
+          .ant-form-item-control-input-content,
+          .ant-input{
+            height: 100%;
+            &:focus-visible {
+              outline: none;
+            }
+          }
+
+          .ui-rc-checkbox-wrapper {
+            .ui-rc-checkbox {
+              background-color: red;
+            }
+            .ui-rc-checkbox-input {
+              &:focus-visible {
+                outline: none;
+              }
+            }
+          }
+
+
+          .ant-input, .ant-picker{
+            border-radius: 0;
+          }
+
+          // color picker
+
+          .ant-color-picker-trigger{
+            height: 100%;
+            border-radius: 0;
+            .ant-color-picker-color-block {
+              height: 100%;
+              width: 100%;
+            }
+
+          }
+
+
+          // ------------ select  ---------------
+
+          .ui-rc-table-select-single .ui-rc-table-select-selector,
+          .ui-rc-select-single .ui-rc-select-selector {
+
+            border-radius: 0;
+
+          }
+
+          .ui-rc-table-select-single:not(.ui-rc-table-select-customize-input) {
+            .ui-rc-table-select-selector {
+              .ui-rc-table-select-selection-search-input {
+                height: auto;
+              }
+            }
+          }
+
+          // ------------ select  ---------------
+
+
+        }
+        &.cell-editable {
+          &:focus-visible {
+            outline: none;
+          }
+        }
+        .ui-rc-table-cell-content {
+          display: flex;
+          height: 100%;
+        }
+
+        .ui-rc_cell-content,
+        .ui-rc-table-cell-content{
+          //width: 100%;
+          flex: 1;
+        }
+        .ui-rc_content {
+          //padding: 5px 8px;
+        }
+        .ui-rc_content:has(.ant-color-picker-trigger) {
+          padding: 1px 8px;
+        }
+      }
+    }
+
+  }
+
+}
+// ---------------- Table edit end---------------
+
+
+// -------------- Checkbox ----------
+
+.#{$prefix}-checkbox-indeterminate {
+  &:hover {
+    .#{$prefix}-checkbox-inner {
+      border-color: $primary !important;;
+    }
+  }
+
+  .#{$prefix}-checkbox-inner {
+    &:after {
+      background-color: $primary;
+    }
+  }
+}
+//.ui-rc-checkbox-input {
+//  &:focus-visible {
+//    outline: none;
+//  }
+//}
+
+.ui-rc-checkbox .ui-rc-checkbox-input:focus-visible+.ui-rc-checkbox-inner {
+  outline: none;
+}
+
+.#{$prefix}-checkbox {
+  &.#{$prefix}-checkbox-checked {
+    &:hover {
+      .#{$prefix}-checkbox-inner {
+        background-color: $primary;
+        border-color: $primary;
+      }
+    }
+
+    .#{$prefix}-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+}
+
+.#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
+  .#{$prefix}-checkbox-inner {
+    border-color: $primary;
+  }
+}
+
+.#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
+  .#{$prefix}-checkbox-inner {
+    border-color: $primary;
+  }
+
+  .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
+    .#{$prefix}-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+}
+
+// ------------ Tree ---------------
+
+.#{$prefix}-tree {
+  .#{$prefix}-tree-checkbox-checked {
+    .#{$prefix}-tree-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
+    .#{$prefix}-tree-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+
+  .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
+    .#{$prefix}-tree-checkbox-inner {
+      border-color: $primary;
+    }
+  }
+}
+
+
+// ------------ ant Tree ---------------
+
+.#{$antdPrefix}-tree {
+  .#{$antdPrefix}-tree-checkbox-checked {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+
+  .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      border-color: $primary;
+    }
+  }
+}
+
+
+// ------------ paging ---------------
+
+.#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
+  margin: 0;
+}
+
+.ui-rc-table-wrapper {
+  .ui-rc-table {
+    .#{$prefix}-pagination {
+      &::before {
+        content: "";
+        position: absolute;
+        border-left: 1px solid $tableBorderColor;
+        height: 55px;
+        bottom: 0;
+        left: 0;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        border-left: 1px solid $tableBorderColor;
+        height: 55px;
+        bottom: 0;
+        visibility: visible;
+        right: 0;
+      }
+
+      &.top-pagination {
+        border: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        .ui-rc-pagination-total-text {
+          margin-left: auto;
+        }
+      }
+      border-bottom: 1px solid $tableBorderColor;
+
+    }
+  }
+}
+
+
+.#{$prefix}-pagination {
+
+  .ui-rc-pagination-total-text {
+    white-space: nowrap;
+  }
+
+  .#{$prefix}-pagination-item-active {
+    border-color: $primary;
+
+    &:hover {
+      border-color: $primary;
+
+      a {
+        color: $primary;
+      }
+    }
+
+    a {
+      color: $primary;
+    }
+  }
+
+  .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
+    .#{$prefix}-pagination-item-container {
+      .#{$prefix}-pagination-item-link-icon {
+        color: $primary;
+      }
+    }
+  }
+}
+
+
+
+//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+//  border-inline-end: 1px solid $tableBorderColor;
+//}
+//
+//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+//  //border-inline-end: 1px solid $tableBorderColor;
+//  border-inline-end: 0 solid $tableBorderColor;
+//}
+//
+//
+//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+//  margin-top: 0;
+//  margin-bottom: 0;
+//  border-inline-end: 1px solid $tableBorderColor;
+//}
+//
+//.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+//  border-inline-end: 0 solid $tableBorderColor;
+//}
+
+
+.#{$prefix}-table-wrapper {
+  .#{$prefix}-table {
+    &.#{$prefix}-table-bordered {
+      > .#{$prefix}-table-container {
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table > tbody > tr {
+            > th,
+            > td {
+              > .#{$prefix}-table-expanded-row-fixed::after {
+                // Thêm CSS ở đây
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.ui-rc-table-wrapper {
+  .ui-rc-table.ui-rc-table-small {
+    .ui-rc-table-title,
+    .ui-rc-table-footer,
+    .ui-rc-table-cell,
+    .ui-rc-table-thead > tr > th,
+    .ui-rc-table-tbody > tr > th,
+    .ui-rc-table-tbody > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td {
+      //padding: 8px 8px;
+      font-size: 13px;
+    }
+  }
+}
+.ui-rc-table-wrapper {
+  .ui-rc-table.ui-rc-table-small {
+    .ui-rc-table-cell {
+      &:has(.ant-color-picker-trigger) {
+        padding: 1px 8px;
+      }
+      .ant-color-picker-trigger{
+        width: 100%;
+        min-height: 20px;
+        .ant-color-picker-clear {
+          height: 20px;
+        }
+      }
+    }
+  }
+}
+
+
+
+//ui-rc-table-ping-right
+
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >thead>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >tbody>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-content >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-header >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-body >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after,
+.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-bordered >.ui-rc-table-container >.ui-rc-table-summary >table >tfoot>tr >.ui-rc-table-cell-fix-right-first::after {
+  border-inline-end: 1px solid $tableBorderColor;
+}