es-grid-template 1.8.64 → 1.8.66

package/lib/table-virtuoso/style.scss

@@ -0,0 +1,1441 @@
+$prefix: 'ui-rc' !default;
+$antdPrefix: 'ant' !default;
+$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
+$fontFamily: "Montserrat", Helvetica, Arial, serif !default;
+$border-radius: 6px !default;
+
+$primary: #eb4619 !default;
+
+$rowHoverBg: #FBDED6 !default;
+$rowSelectedBg: #FEF2EF !default;
+$tableBorderColor: #e0e0e0 !default;
+$border-selected-color: #0550C5 !default;
+$body-color: #ffffff !default;
+$cell-selected-bg: #F3F8FF !default;
+$cell-index-selected-bg: #1869E6 !default;
+$cell-index-focus-bg: #E6EFFD !default;
+
+// 404071
+
+// dark
+$tableBorderColorDark: #44485E !default;
+
+$rowHoverBg-Dark: #404071 !default;
+
+$rowSelectedBg-Dark: #25293C !default;
+
+$border-selected-color-Dark: #538ff1 !default;
+$cell-index-selected-bg-Dark: #1869E6 !default;
+
+$body-color-Dark: #343e59 !default;
+
+$cell-selected-bg-Dark: #F3F8FF !default;
+$cell-index-focus-bg-Dark: #E6EFFD !default;
+
+
+
+
+
+* {
+  box-sizing: border-box;
+}
+
+
+.#{$prefix}-grid {
+
+  // border: 1px solid $tableBorderColor;
+
+  color: #000000de;
+  background-color: #ffffff;
+
+  font-size: 14px;
+
+  table {
+    // border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+    // border: 1px solid $tableBorderColor;
+  }
+
+  .#{$prefix}-grid-container {
+
+    // border: 1px solid $tableBorderColor;
+    // border-right: 0;
+    // font-size: 13px;
+
+    // &::after {
+    //   content: "";
+    //   position: absolute;
+    //   top: 0px;
+    //   right: 0;
+    //   height: 100%;
+    //   border-right: 1px solid $tableBorderColor;
+    //   pointer-events: none;
+    //   z-index: 1;
+    // }
+
+    .#{$prefix}-grid-cell {
+
+      padding: 7px 8px;
+
+      &.#{$prefix}-grid-cell-text-center {
+        text-align: center;
+        justify-content: center;
+
+      }
+
+      &.#{$prefix}-grid-cell-text-right {
+        justify-content: flex-end;
+        text-align: right;
+
+      }
+
+      &.#{$prefix}-grid-cell-ellipsis {
+
+
+        .ui-rc_cell-content {
+          width: 100%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          word-break: keep-all;
+
+          &.select-cell {
+            padding-right: 18px;
+            position: relative;
+
+          }
+
+          .caret-down {
+            float: right;
+            position: absolute;
+            right: 0;
+
+            &::before {
+              content: '';
+              display: inline-block;
+              margin-left: 4px;
+              vertical-align: middle;
+              width: 0;
+              height: 0;
+              border-left: 5px solid transparent;
+              border-right: 5px solid transparent;
+              border-top: 5px solid #6f7777;
+            }
+          }
+
+        }
+
+      }
+
+      &.#{$prefix}-grid-cell-wrap {
+        white-space: normal;
+        // overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+      }
+
+      .#{$prefix}-grid-header-text-wrap {
+        white-space: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+      }
+
+    }
+
+    .#{$prefix}-grid-thead {
+      // background-color: #ffffff;
+      background-color: inherit;
+       font-weight: 500;
+
+      .#{$prefix}-grid-cell {
+        font-weight: inherit;
+        color: #000000E0;
+
+        background-color: inherit;
+        // border-inline-end: 1px solid $tableBorderColor;
+        // border-bottom: 1px solid $tableBorderColor;
+
+        &.ui-rc-grid-cell-ellipsis {
+
+          .ui-rc-table-column-title,
+          .#{$prefix}-grid-cell-ellipsis {
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            word-break: keep-all;
+          }
+
+        }
+
+        &.ui-rc-grid-cell-wrap {
+
+          .ui-rc-table-column-title,
+          .#{$prefix}-grid-cell-text-wrap {
+            white-space: normal;
+            word-break: break-word;
+            overflow: hidden;
+          }
+
+        }
+
+        &:hover {
+          .ui-rc-header-trigger {
+
+            .ui-rc-table-column-sorter-cancel {
+              opacity: 1;
+
+            }
+
+          }
+        }
+
+
+        .#{$prefix}-grid-filter-column {
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          align-items: center;
+          position: relative;
+          z-index: 3;
+        }
+
+        .ui-rc-header-trigger {
+          padding-left: 6px;
+          display: flex;
+          align-items: center;
+
+          .ui-rc-table-column-sorter-cancel {
+            opacity: 0;
+          }
+
+        }
+
+        .resizer {
+
+          /* background: rgba(0, 0, 0, 0.5); */
+          cursor: col-resize;
+          height: 100%;
+          position: absolute;
+          right: 0;
+          top: 0;
+          z-index: 3;
+          touch-action: none;
+          user-select: none;
+          width: 5px;
+
+          // &::before {
+          //   content: '';
+          //   border-left: 2px solid blue;
+          // }
+        }
+
+        .resizer.isResizing {
+          // &::before {
+          //   content: '';
+          //   // border-left: 2px solid gray;
+          //   border-left: 2px solid rgb(70, 115, 228);
+          //   position: absolute;
+          //   // height: 50%;
+          //   height: 100%;
+          //   // top: 25%
+          // }
+
+          // background: blue;
+          opacity: 1;
+        }
+
+
+
+
+      }
+
+    }
+
+    .#{$prefix}-grid-tbody {
+
+      .#{$prefix}-grid-row {
+        border-bottom: 1px solid lightgray;
+      }
+
+      .#{$prefix}-grid-row {
+        display: flex;
+        position: absolute;
+        width: 100%;
+        // background-color: #ffffff;
+        background-color: inherit;
+
+        &:hover {
+          .#{$prefix}-grid-cell:not(.editable) {
+            // background-color: $rowHoverBg;
+
+            &.cell-editable,
+            &.#{$prefix}-grid-cell-index,
+            &.#{$prefix}-grid-cell-selection {
+              // background-color: transparent;
+            }
+
+            // &.ui-rc-grid-cell-index {
+            //   background-color: #ffffff;
+            // }
+          }
+        }
+
+        &.#{$prefix}-grid-row-selected {
+
+          .#{$prefix}-grid-cell {
+            background-color: $rowSelectedBg;
+          }
+
+        }
+
+        &.#{$prefix}-grid-row-focus {
+
+          .#{$prefix}-grid-cell {
+            background-color: $rowHoverBg;
+          }
+
+        }
+
+      }
+
+      .#{$prefix}-grid-cell {
+        outline: none;
+        border-inline-end: 1px solid $tableBorderColor;
+
+        border-bottom: 1px solid $tableBorderColor;
+
+        // background-color: $body-color;
+        background-color: inherit;
+
+        &.#{$prefix}-grid-cell-ellipsis:not(:has(>.ui-rc_cell-content)) {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          word-break: keep-all;
+
+
+
+        }
+
+        &.#{$prefix}-grid-cell-index-selected {
+          background-color: $cell-index-selected-bg !important;
+          color: #ffffff;
+        }
+
+
+
+        &.cell-editable {
+
+          // padding: 0;
+          user-select: none;
+
+          &.cell-border-top {
+
+            //border-bottom: 1px solid $border-selected-color;
+            &::after {
+              content: "";
+              position: absolute;
+              top: 0px;
+              left: 0;
+              //right: 0;
+              //bottom: 0;
+              height: 1px;
+              width: 100%;
+              border-top: 1px solid $border-selected-color;
+              /* line đè lên border gốc */
+              pointer-events: none;
+              /* không ảnh hưởng đến tương tác */
+              z-index: 1;
+            }
+
+            // &.ui-rc-grid-cell-fix-left-last {
+            //   &::after {
+            //     left: -100%;
+            //   }
+            // }
+
+            // &.ui-rc-grid-cell-fix-right-first {
+            //   &::after {
+            //     left: 100%;
+            //   }
+            // }
+
+          }
+
+          &.cell-border-bottom {
+            border-bottom: 1px solid $border-selected-color;
+
+
+          }
+
+          &.cell-border-left {
+
+            &::before {
+              content: "";
+              position: absolute;
+              top: 0;
+              left: 0;
+              //right: 0;
+              //bottom: 0;
+              height: 102%;
+              width: 1px;
+              border-left: 1px solid $border-selected-color;
+              /* line đè lên border gốc */
+              pointer-events: none;
+              /* không ảnh hưởng đến tương tác */
+              z-index: 1;
+            }
+          }
+
+          &.cell-border-right {
+            border-inline-end: 1px solid $border-selected-color;
+
+          }
+
+          &.cell-paste-border-top {
+
+            // border-bottom: 1px dashed #949494;
+            &::after {
+              content: "";
+              position: absolute;
+              top: 0px;
+              left: 0;
+              //right: 0;
+              //bottom: 0;
+              height: 1px;
+              width: 100%;
+              border-top: 1px dashed #949494;
+              /* line đè lên border gốc */
+              pointer-events: none;
+              /* không ảnh hưởng đến tương tác */
+              z-index: 1;
+            }
+
+            &.ui-rc-grid-cell-fix-left-last {
+              &::after {
+                left: -100%;
+              }
+            }
+
+            &.ui-rc-grid-cell-fix-right-first {
+              &::after {
+                left: 100%;
+              }
+            }
+          }
+
+          &.cell-paste-border-bottom {
+            border-bottom: 1px dashed #949494;
+          }
+
+          &.cell-paste-border-left {
+            // border-inline-end: 1px dashed #949494;
+
+            &::before {
+              content: "";
+              position: absolute;
+              top: 0;
+              left: 0;
+              //right: 0;
+              //bottom: 0;
+              height: 102%;
+              width: 1px;
+              border-left: 1px dashed #949494;
+              /* line đè lên border gốc */
+              pointer-events: none;
+              /* không ảnh hưởng đến tương tác */
+              z-index: 1;
+            }
+          }
+
+          &.cell-paste-border-right {
+            border-inline-end: 1px dashed #949494;
+          }
+
+          .dragging-point {
+            //visibility: hidden;
+            width: 6px;
+            height: 6px;
+            position: absolute;
+            cursor: crosshair;
+            right: 0px;
+            bottom: 0px;
+            //background: red;
+
+            &.hidden {
+              display: none;
+            }
+
+            .dot-point {
+              position: absolute;
+              width: 6px;
+              height: 6px;
+              border-radius: 0px;
+              background-color: $border-selected-color;
+              bottom: 0;
+              right: 0;
+            }
+
+          }
+
+        }
+
+        &.cell-editing {
+          padding: 0;
+
+          //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% !important;
+            max-height: unset !important;
+
+            &:focus-visible {
+              outline: none;
+            }
+          }
+
+          textarea.ant-input {
+            line-height: 1.8;
+          }
+
+          input.be-cell-editing,
+          .ant-picker,
+          .ui-rc-select-selector,
+          .ui-rc-table-select-selector {
+            padding-inline: 7px;
+          }
+
+          .#{$prefix}-checkbox-wrapper {
+            .#{$prefix}-checkbox {
+              background-color: red;
+            }
+
+            .#{$prefix}-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  ---------------
+
+          .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
+          .#{$prefix}-select-single .#{$prefix}-select-selector,
+          .ui-rc-table-select-selector {
+
+            border-radius: 0 !important;
+
+          }
+
+          .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
+            .#{$prefix}-table-select-selector {
+              .#{$prefix}-table-select-selection-search-input {
+                height: auto;
+              }
+            }
+          }
+        }
+
+        &.#{$prefix}-grid-cell-selected {
+          background-color: $cell-selected-bg !important;
+        }
+
+        &.disable {
+          padding: 7px 8px !important;
+          background-color: #f0f0f0;
+        }
+
+        &.#{$prefix}-grid-cell-command {
+          padding: 2px 8px;
+
+          .ui-rc_cell-content {
+            display: flex;
+          }
+        }
+
+
+        .isValid {
+          &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 0;
+            height: 0;
+            border-top: 0 solid transparent;
+            border-right: 8px solid red;
+            border-bottom: 8px solid transparent;
+          }
+        }
+      }
+
+    }
+
+    .#{$prefix}-grid-tfoot {
+      // background-color: rgb(250, 250, 250);
+
+      .#{$prefix}-grid-footer-row {
+        border-bottom-width: 1px;
+        border-bottom-color: $tableBorderColor;
+        border-bottom-style: solid;
+
+        border-top-width: 1px;
+        border-top-color: $tableBorderColor;
+        border-top-style: solid;
+
+        background-color: #fafafa;
+
+      }
+
+      .#{$prefix}-grid-cell {
+
+        background-color: inherit;
+        
+
+        // border-inline-end: 1px solid $tableBorderColor;
+      }
+    }
+
+  }
+
+
+
+  .#{$prefix}-grid-container {
+
+
+
+    &.ui-rc-table-ping-left {
+
+      .#{$prefix}-grid-cell {
+
+        &.cell-editable {
+
+
+          &.cell-border-top {
+          
+            &.ui-rc-grid-cell-fix-left-last {
+              &::after {
+                left: -100%;
+              }
+            }
+
+          }
+
+          &.cell-paste-border-top {
+
+
+            &.ui-rc-grid-cell-fix-left-last {
+              &::after {
+                left: -100%;
+              }
+            }
+
+            &.ui-rc-grid-cell-fix-right-first {
+              &::after {
+                left: 100%;
+              }
+            }
+          }
+
+        }
+
+
+
+        &.#{$prefix}-grid-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;
+            box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.09);
+          }
+
+
+        }
+
+
+
+      }
+
+    }
+
+    &.ui-rc-table-ping-right {
+
+      .#{$prefix}-grid-cell {
+
+        &.#{$prefix}-grid-cell-fix-right-first {
+          &::after {
+            position: absolute;
+            top: 0;
+            bottom: -1px;
+            left: 0;
+            width: 30px;
+            transform: translateX(-100%);
+            transition: box-shadow 0.3s;
+            content: "";
+            pointer-events: none;
+            box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.09);
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            inset-block: 0;
+            inset-inline-start: -1px;
+            border-inline-start: 1px solid #e0e0e0;
+          }
+        }
+
+        &.cell-editable {
+
+
+
+          &.cell-border-top {
+
+            // &::after {
+            //   content: "";
+            //   position: absolute;
+            //   top: 0px;
+            //   left: 0;
+            //   //right: 0;
+            //   //bottom: 0;
+            //   height: 1px;
+            //   width: 100%;
+            //   border-top: 1px solid $border-selected-color;
+            //   /* line đè lên border gốc */
+            //   pointer-events: none;
+            //   /* không ảnh hưởng đến tương tác */
+            //   z-index: 1;
+            // }
+
+            // &.ui-rc-grid-cell-fix-left-last {
+            //   &::after {
+            //     left: -100%;
+            //   }
+            // }
+
+
+            &.ui-rc-grid-cell-fix-right-first {
+              &::after {
+                left: 100%;
+              }
+            }
+
+          }
+
+
+          &.cell-paste-border-top {
+
+
+            &.ui-rc-grid-cell-fix-left-last {
+              &::after {
+                left: -100%;
+              }
+            }
+
+            &.ui-rc-grid-cell-fix-right-first {
+              &::after {
+                left: 100%;
+              }
+            }
+          }
+
+
+        }
+
+      }
+
+    }
+
+  }
+
+
+
+  // bottom toolbar
+  .ui-rc-toolbar-bottom {
+    // border-bottom: 1px solid #e0e0e0;
+    border-right: 1px solid #e0e0e0;
+    border-left: 1px solid #e0e0e0;
+
+    .be-toolbar-item {
+      .toolbar-dropdown-button {
+        .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
+          border-color: #28c76f;
+        }
+
+        .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
+          border-color: #28c76f;
+
+          .ant-btn-icon {
+            color: #28c76f;
+          }
+        }
+      }
+
+    }
+  }
+
+  .ui-rc-toolbar-bottom_border-bottom {
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .ui-rc-toolbar-bottom {
+    position: relative;
+    padding: .25rem 1rem;
+    background-color: #ffffff;
+
+    // &::before {
+    //   content: "";
+    //   position: absolute;
+    //   border-left: 1px solid #e0e0e0;
+    //   height: 100%;
+    //   bottom: 0;
+    //   left: 0;
+    //   //z-index: -1;
+    // }
+
+    // &::after {
+    //   content: "";
+    //   position: absolute;
+    //   border-left: 1px solid #e0e0e0;
+    //   height: 100%;
+    //   bottom: 0;
+    //   visibility: visible;
+    //   right: 0;
+    //   //z-index: -1;
+    // }
+
+    .toolbar-button {
+      border-radius: 0;
+
+      .ant-btn,
+      .ui-rc-btn {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .spinner-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 4;
+    background-color: #ffffff80;
+  }
+
+
+
+}
+
+.#{$prefix}-grid {
+  .#{$prefix}-grid-top-toolbar {
+    padding: 5px 10px;
+    border-inline: 1px solid $tableBorderColor;
+    border-top: 1px solid $tableBorderColor;
+  }
+}
+
+
+
+// ------------ paging ---------------
+
+
+
+
+.#{$prefix}-grid {
+
+  .#{$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;
+
+      .#{$prefix}-pagination-total-text {
+        margin-left: auto;
+      }
+    }
+
+    padding: 10px;
+
+    border-bottom: 1px solid $tableBorderColor;
+    border-inline: 1px solid $tableBorderColor;
+
+  }
+
+  .#{$prefix}-pagination {
+
+    .#{$prefix}-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;
+        }
+      }
+    }
+  }
+}
+
+// .container {
+//   margin: 1rem auto;
+// }
+
+
+.ui-rc-table-row-expand {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid #f0f0f0;
+  padding: 0;
+  background: #ffffff;
+  user-select: none;
+  position: relative;
+  float: left;
+  width: 17px;
+  height: 17px;
+  line-height: 17px;
+  border-radius: 6px;
+  transform: scale(0.9411764705882353);
+  margin-inline-end: 8px;
+}
+
+.ui-rc-table-row-expand-icon {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid #f0f0f0;
+  padding: 0;
+  background: #ffffff;
+  user-select: none;
+  position: relative;
+  float: left;
+  width: 17px;
+  height: 17px;
+  line-height: 17px;
+  border-radius: 6px;
+  transform: scale(0.9411764705882353);
+}
+
+.ui-rc-table-row-expand-icon::before {
+  top: 7px;
+  inset-inline-end: 3px;
+  inset-inline-start: 3px;
+  height: 1px;
+}
+
+.ui-rc-table-row-expand-icon::after {
+  top: 3px;
+  bottom: 3px;
+  inset-inline-start: 7px;
+  width: 1px;
+  transform: rotate(90deg);
+}
+
+.ui-rc-table-row-expand-icon::before,
+.ui-rc-table-row-expand-icon::after {
+  position: absolute;
+  background: #000000de;
+  transition: transform 0.3s ease-out;
+  content: "";
+
+}
+
+.ui-rc-table-row-expand-icon-spaced {
+  background: transparent;
+  border: 0;
+  visibility: hidden;
+  margin-inline-end: 8px;
+}
+
+
+.ui-rc-table-row-expand-icon-expanded::after {
+  top: 3px;
+  bottom: 3px;
+  inset-inline-start: 7px;
+  width: 1px;
+  transform: rotate(90deg);
+}
+
+.ui-rc-table-row-expand-icon-collapsed::after {
+  transform: rotate(0deg);
+}
+
+.ui-rc-table-row-expand-icon-collapsed::before {
+  transform: rotate(-180deg);
+}
+
+
+.#{$prefix}-grid-filter-dropdown {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 14px;
+  line-height: 1.5714285714285714;
+  list-style: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  min-width: 120px;
+  background-color: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+
+
+.rc-menu-popup {
+  z-index: 1090 !important;
+}
+
+
+// -------------- Checkbox ----------
+
+.#{$prefix}-checkbox-indeterminate {
+  &:hover {
+    .#{$prefix}-checkbox-inner {
+      border-color: $primary !important;
+      ;
+    }
+  }
+
+  .#{$prefix}-checkbox-inner {
+    &:after {
+      background-color: $primary;
+    }
+  }
+}
+
+//.#{$prefix}-checkbox-input {
+//  &:focus-visible {
+//    outline: none;
+//  }
+//}
+
+.#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-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;
+    }
+  }
+}
+
+
+// -------------- radio ----------
+
+.ui-rc-radio-wrapper {
+  .ui-rc-radio-checked {
+    .ui-rc-radio-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  &:hover {
+    .ui-rc-radio-inner {
+      border-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;
+    }
+  }
+}
+
+.ui-rc-pagination {
+  border-bottom: 1px solid #e0e0e0;
+  border-top: 1px solid #e0e0e0;
+  margin: 0;
+  padding: .75rem 1rem;
+  background-color: #ffffff;
+
+  .ui-rc-pagination-total-text {
+    order: 2;
+    margin-left: auto;
+  }
+
+
+
+  &.pagination-template {
+    position: relative;
+
+
+  }
+
+
+
+}
+
+
+// #region theme
+// theme
+
+//  ------------light-----------
+
+.#{$prefix}-grid-light {
+  background-color: #ffffff;
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-thead .ui-rc-grid-cell {}
+}
+
+
+// rgb(225 222 245 / 0.12 
+
+.#{$prefix}-grid-dark {
+  background-color: $body-color-Dark;
+  color: #ffffff;
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-thead .ui-rc-grid-cell {
+    background-color: $body-color-Dark;
+    color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tbody .ui-rc-grid-cell {
+    // background-color: $body-color-Dark;
+    // color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tfoot .ui-rc-grid-cell {
+    background-color: #25293C;
+    color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-toolbar-bottom {
+      background-color: $body-color-Dark;
+      color: #E1DEF5E6;
+      border-color: $tableBorderColorDark;
+    }
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container.ui-rc-table-ping-right .ui-rc-grid-cell.ui-rc-grid-cell-fix-right-first::before {
+    border-inline-start-color: $tableBorderColorDark;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tbody .ui-rc-grid-cell.cell-editable {
+
+
+    &.cell-border-right {
+      border-right-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-bottom {
+      border-bottom-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-left::before {
+      border-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-top::after {
+      border-color: $border-selected-color-Dark;
+    }
+  }
+
+  .ui-rc-pagination {
+    background-color: $body-color-Dark;
+    color: #E1DEF5E6;
+
+    border-bottom: 1px solid $tableBorderColorDark;
+    border-top: 1px solid $tableBorderColorDark;
+    border-inline-color: $tableBorderColorDark;
+
+    .ui-rc-pagination-prev {
+      .anticon.anticon-left {
+        color: #ffffff;
+      }
+    }
+
+    .ui-rc-pagination-disabled {
+      .anticon.anticon-left {
+        color: #7d7a7a;
+      }
+    }
+
+    .ui-rc-pagination-next {
+      .anticon.anticon-right {
+        color: #ffffff;
+      }
+
+      &.ui-rc-pagination-disabled {
+        .anticon.anticon-right {
+          color: #7d7a7a;
+        }
+      }
+
+    }
+  }
+
+  .ui-rc-toolbar {
+    .ui-rc-toolbar-selection-item {
+      background-color: #25293C;
+      color: #E1DEF5E6;
+    }
+
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-grid-top-toolbar {
+      border-top-color: $tableBorderColorDark;
+      border-inline-color: $tableBorderColorDark;
+
+    }
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container::after {
+    border-right-color: $tableBorderColorDark;
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-grid-container {
+      // border-bottom: 0;
+      border-color: $tableBorderColorDark;
+
+      .ui-rc-grid-tbody {
+        .ui-rc-grid-row {
+          border-bottom-color: $tableBorderColorDark;
+
+
+        }
+
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+          background-color: $body-color-Dark;
+          color: #E1DEF5E6;
+
+          &.ui-rc-grid-cell-selected {
+
+            background-color: #33335d !important;
+
+          }
+
+          &.disable {
+            background-color: #272A2F;
+          }
+
+          // input
+          // .ui-rc-table-select-selector,
+          // .ui-rc-select-selector, 
+          // .ant-input-outlined,
+          // .ant-picker-outlined {
+          //   background-color: #272933;
+          //   color: #ffffff;
+
+          //   .ui-rc-table-select-selection-placeholder,
+          //   .ui-rc-select-selection-placeholder {
+          //     color: #797171;
+          //   }
+          // }
+          // .ant-picker-input {
+
+          //   input {
+          //     &::placeholder {
+          //       color: #797171;
+          //     }
+          //   }
+          // }
+          // .ant-input-outlined::placeholder {
+          //   color: #797171;
+          // }
+
+
+        }
+
+        .ui-rc-grid-row-selected {
+          .ui-rc-grid-cell {
+            background-color: $rowSelectedBg-Dark;
+
+            // &.disable {
+            //   background-color: #272A2F;
+            // }
+          }
+        }
+
+      }
+
+      .ui-rc-grid-thead {
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+          border-bottom-color: $tableBorderColorDark;
+        }
+      }
+
+      .ui-rc-grid-tfoot {
+        .#{$prefix}-grid-footer-row {
+          border-bottom-color: $tableBorderColorDark;
+
+          border-top-color: $tableBorderColorDark;
+
+
+
+        }
+
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+        }
+      }
+    }
+  }
+
+  .ui-rc-toolbar-bottom_border-bottom {
+    border-bottom-color: $tableBorderColorDark;
+  }
+}