es-grid-template 1.8.28 → 1.8.29

package/es/table-component/style.scss

@@ -1,1221 +1,1221 @@
-$prefix: 'ui-rc' !default;
-$antdPrefix: 'ant' !default;
-$primary: #eb4619 !default;
-$rowHoverBg: #FBDED6 !default;
-$rowSelectedBg: #FEF2EF !default;
-//$tableBorderColor: red !default;
-$tableBorderColor: #e0e0e0 !default;
-//$tableBorderColor: #C4C4C4 !default;
-//$tableBorderColor: #f0f0f0 !default;
-$border-radius: 6px !default;
-$border-selected-color: #0550C5 !default;
-$body-color: #ffffff !default;
-//$cell-selected-bg: #E6EFFD !default;
-$cell-selected-bg: #F3F8FF !default;
-//$cell-index-selected-bg: #0550C5 !default;
-$cell-index-selected-bg: #1869E6 !default;
-//$cell-index-focus-bg: #CEDBEF !default;
-$cell-index-focus-bg: #E6EFFD !default;
-$rowSelectedHoverBg: 'ui-rc' !default;
-$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
-$fontFamily: "Montserrat", Helvetica, Arial, serif !default;
-
-
-* {
-  box-sizing: border-box;
-}
-
-
-.#{$prefix}-grid {
-
-  // border: 1px solid $tableBorderColor;
-
-  color: #000000de;
-
-  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%;
-      // width: 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;
-
-      .#{$prefix}-grid-cell {
-        font-weight: 500;
-        color: #000000E0;
-
-        background-color: $body-color;
-        border-inline-end: 1px solid $tableBorderColor;
-        border-bottom: 1px solid $tableBorderColor;
-
-        // &::before {
-        //   content: "";
-        //   position: absolute;
-        //   inset-block: 0;
-        //   right: 0;
-        //   inset-inline-start: 0px;
-        //   border-inline-end: 1px solid #e0e0e0;
-        // }
-
-        &.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;
-            // text-overflow: ellipsis;
-            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%;
-
-        &: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;
-
-        background-color: $body-color;
-
-        &.#{$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 {
-
-            border-radius: 0;
-
-          }
-
-          .#{$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-cell {
-        background-color: $body-color;
-        border-inline-end: 1px solid $tableBorderColor;
-      }
-    }
-
-  }
-
-
-
-  .#{$prefix}-grid-container {
-
-
-
-    &.ui-rc-table-ping-left {
-
-      .#{$prefix}-grid-cell {
-
-        &.cell-editable {
-
-
-          &.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-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 {
-    .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 {
-    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;
-
-
-  }
-
-
-
+$prefix: 'ui-rc' !default;
+$antdPrefix: 'ant' !default;
+$primary: #eb4619 !default;
+$rowHoverBg: #FBDED6 !default;
+$rowSelectedBg: #FEF2EF !default;
+//$tableBorderColor: red !default;
+$tableBorderColor: #e0e0e0 !default;
+//$tableBorderColor: #C4C4C4 !default;
+//$tableBorderColor: #f0f0f0 !default;
+$border-radius: 6px !default;
+$border-selected-color: #0550C5 !default;
+$body-color: #ffffff !default;
+//$cell-selected-bg: #E6EFFD !default;
+$cell-selected-bg: #F3F8FF !default;
+//$cell-index-selected-bg: #0550C5 !default;
+$cell-index-selected-bg: #1869E6 !default;
+//$cell-index-focus-bg: #CEDBEF !default;
+$cell-index-focus-bg: #E6EFFD !default;
+$rowSelectedHoverBg: 'ui-rc' !default;
+$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
+$fontFamily: "Montserrat", Helvetica, Arial, serif !default;
+
+
+* {
+  box-sizing: border-box;
+}
+
+
+.#{$prefix}-grid {
+
+  // border: 1px solid $tableBorderColor;
+
+  color: #000000de;
+
+  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%;
+      // width: 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;
+
+      .#{$prefix}-grid-cell {
+        font-weight: 500;
+        color: #000000E0;
+
+        background-color: $body-color;
+        border-inline-end: 1px solid $tableBorderColor;
+        border-bottom: 1px solid $tableBorderColor;
+
+        // &::before {
+        //   content: "";
+        //   position: absolute;
+        //   inset-block: 0;
+        //   right: 0;
+        //   inset-inline-start: 0px;
+        //   border-inline-end: 1px solid #e0e0e0;
+        // }
+
+        &.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;
+            // text-overflow: ellipsis;
+            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%;
+
+        &: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;
+
+        background-color: $body-color;
+
+        &.#{$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 {
+
+            border-radius: 0;
+
+          }
+
+          .#{$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-cell {
+        background-color: $body-color;
+        border-inline-end: 1px solid $tableBorderColor;
+      }
+    }
+
+  }
+
+
+
+  .#{$prefix}-grid-container {
+
+
+
+    &.ui-rc-table-ping-left {
+
+      .#{$prefix}-grid-cell {
+
+        &.cell-editable {
+
+
+          &.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-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 {
+    .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 {
+    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;
+
+
+  }
+
+
+
 }