es-grid-template 1.7.23 → 1.7.24

package/lib/table-component/style.scss

@@ -0,0 +1,1083 @@
+$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-spacing: 0;
+    table-layout: fixed;
+    // border: 1px solid $tableBorderColor;
+  }
+
+  .#{$prefix}-grid-container {
+    border: 1px solid $tableBorderColor;
+
+    .#{$prefix}-grid-cell {
+
+      padding: 7px 8px;
+      border-inline-end: 1px solid $tableBorderColor;
+      // border-bottom: 1px solid $tableBorderColor;
+
+      // &.#{$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);
+      //   }
+
+
+      // }
+
+      // &.#{$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;
+      //   }
+      // }
+
+
+
+      &.#{$prefix}-grid-cell-ellipsis {
+
+        .ui-rc_cell-content {
+          width: 100%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          word-break: keep-all;
+        }
+
+      }
+
+
+      &.#{$prefix}-grid-cell-wrap {
+        white-space: normal;
+        // overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: keep-all;
+      }
+
+
+      .#{$prefix}-grid-header-text-wrap {
+        white-space: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: keep-all;
+      }
+
+    }
+
+    tr.#{$prefix}-grid-row {
+      border-bottom: 1px solid lightgray;
+    }
+
+
+    .#{$prefix}-grid-thead {
+
+      .#{$prefix}-grid-cell {
+
+        background-color: $body-color;
+
+        &.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: keep-all;
+            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;
+        }
+
+        .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;
+          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 {
+        display: flex;
+        position: absolute;
+        width: 100%;
+
+        &.#{$prefix}-grid-row-selected {
+
+          .#{$prefix}-grid-cell {
+            background-color: $rowSelectedBg;
+          }
+
+        }
+
+      }
+
+      .#{$prefix}-grid-cell {
+        outline: none;
+
+        background-color: $body-color;
+
+        &.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;
+        }
+
+      }
+
+    }
+
+    .#{$prefix}-grid-tfoot {
+      .#{$prefix}-grid-cell {
+        background-color: $body-color;
+      }
+    }
+
+  }
+
+
+
+  .#{$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;
+      }
+    }
+  }
+
+
+
+}
+
+.#{$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: currentcolor;
+  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;
+    }
+  }
+}