@syncfusion/ej2-querybuilder 25.2.7 → 26.1.38

package/styles/query-builder/_fluent2-definition.scss

@@ -0,0 +1,114 @@
+$qrybldr-width: auto !default;
+$qrybldr-height: auto !default;
+$qrybldr-brdr: 1px solid !default;
+$qrybldr-btngrp-brdr: none !default;
+$grpcon-padding: 11px !default;
+$qrybldr-device-diaplay: inline-block !default;
+$group-action-margin: 12px !default;
+$group-action-mrgntop: 5px !default;
+$groupbody-paddingleft: 20px !default;
+$rulecon-height: auto !default;
+$rulecon-padding: 12px 0 12px 12px !default;
+$hrmode-ruledlt-mrgn: 12px !default;
+$vrmode-ruledlt-mrgnpos: absolute !default;
+$qrybldr-rulelist-grcon-float: right !default;
+$qrybldr-rulelist-grcon-width: 100% !default;
+$qrybldr-button-hide: none !default;
+$qrybldr-field: left !default;
+$ruledelete-margin: 12px !default;
+$radio-wrapper-margin: 15px !default;
+$qrybldr-group-container-margin-top: 12px !default;
+$qrybldr-group-container-margin-left: 0 !default;
+$qrybldr-posn-relative: relative !default;
+$rule-boxshadow: none !default;
+$qrybldr-rule-list-first-left: -12px !default;
+$qrybldr-rule-list-first-right: -12px !default;
+$qrybldr-rule-list-before-top: -10px !default;
+$qrybldr-rule-list-after-border: 0 0 0 2px !default;
+$qrybldr-rule-list-before-border: 0 0 2px 2px !default;
+$qrybldr-rule-list-rtl-after-border: 0 2px 0 0 !default;
+$qrybldr-rule-list-rtl-before-border: 0 2px 2px 0 !default;
+$qrybldr-rule-list-border-style: solid !default;
+$before-border-height: calc(50% + 14px) !default;
+$after-border-height: calc(50% + 8px) !default;
+$qrybldr-add-icon: '\e805' !default;
+$qrybldr-delete-icon: '\e7e7' !default;
+$bigger-group-action-margin: 16px !default;
+$bigger-groupbody-paddingleft: 24px !default;
+$bigger-hrmode-ruledlt-mrgn: 15px !default;
+$bigger-rulecon-padding: 16px 0 16px 16px !default;
+$device-rule-padding: 15px 0 0 15px !default;
+$device-rule-padding-right: 15px !default;
+$bigger-ruledelete-marginleft: 16px !default;
+$qrybldr-rule-border: 1px solid !default;
+$qrybldr-rule-list-after-height: calc(100% - 17px) !default;
+$qrybldr-rule-list-height: 25px !default;
+$qrybldr-rule-list-top: 17px !default;
+$qrybldr-nav-width: 10px !default;
+$qrybldr-rule-container-after-height: calc(50% + 6px) !default;
+$qrybldr-rule-container-after-top: calc(50% - 3px) !default;
+$qrybldr-grpcon-brder-left: -11px !default;
+$bigger-rule-list-first-top: -14px !default;
+$qrybldr-rulecont-margin: -1px !default;
+$ruledelete-shadow: none !default;
+$device-rulecon-padding: 14px !default;
+$qrybldr-rulelist: 14px 0 14px 0 !default;
+$qrybldr-bigger-rulelist: 16px 0 16px 0 !default;
+$qrybldr-add-mrgn-btm: 2px !default;
+$device-rulecon-right-padding: 8px !default;
+$qrybldr-summary-padding: 12px !default;
+$qrybldr-summary-btn-padding: 12px !default;
+$qrybldr-bigger-summary-padding: 15px !default;
+$qrybldr-bigger-summary-btn-padding: 15px !default;
+$qrybldr-summary-text-width: 100% !default;
+$qrybldr-clspe-rule-pos: absolute !default;
+$qrybldr-btngrp-shadow: none !default;
+$qrybldr-multi-width: 190px !default;
+$qrybldr-device-value-width: 100% !default;
+$qrybldr-btngroup-display: inline-block !default;
+$qrybldr-grpcon-aftrbrder-left: -11px !default;
+$after-ruleborder-height: calc(50% + 10px) !default;
+$qrybldr-val-error-border: 8px solid !default;
+$biggerafter-ruleborder-height: calc(50% + 12px) !default;
+$qrybldr-bigger-rule-list-before-top: -12px !default;
+$qrybldr-rule-list-first-top: -11px !default;
+$qrybldr-collapse-rule-padding: 0 14px !default;
+$qrybldr-multi-maxwidth: 200px !default;
+$qrybldr-device-multi-maxwidth: 100% !default;
+$qrybldr-btn-left: 10px !default;
+$qrybldr-touch-btn-left: 14px !default;
+$qrybldr-collapse-font-size: 14px !default;
+$qrybldr-collapse-padding: 9px !default;
+$qrybldr-collapse-box-shadow: none !default;
+$qrybldr-collapse-txtarea-margin: 8px !default;
+$qrybldr-brdr-radius: 4px !default;
+$qrybldr-summary-line-height: 1.5em !default;
+$qrybldr-smrytxt-font-size: $text-sm !default;
+$qrybldr-bigger-smrytxt-font-size: $text-base !default;
+$qrybldr-spinner-right: 5px !default;
+$qrybldr-spinner-left: auto !default;
+$qrybldr-rtl-spinner-right: auto !default;
+$qrybldr-rtl-spinner-left: 5px !default;
+$qrybldr-btngrp-brdr-radius: 4px !default;
+$qrybldr-btngroup-bgcolor: $primary !default;
+$qrybldr-btngroup-color: $primary-text-color !default;
+$qrybldr-color: $placeholder-text-color !default;
+$qrybldr-rule-list-border-color: $border !default;
+$qrybldr-btngroup-active-bgcolor: $primary !default;
+$qrybldr-btngroup-active-color: $primary-text-color !default;
+$groupborder-color: $border !default;
+$groupfill-color: transparent !default;
+$groupfill-bgcolor: $content-bg-color-alt1 !default;
+$qrybldr-brdr-color: $border !default;
+$qrybldr-bg-color: transparent !default;
+$qrybldr-val-error-bg-color: $danger-light !default;
+$qrybldr-val-error-color: $danger-bg-color !default;
+$qrybldr-collapse-brdr-color: $border-light !default;
+$qryblr-drag-icon-color: $content-text-color-alt3 !default;
+$qrybldr-drag-icon-font-size: 18px !default;
+$qrybldr-drag-icon-bigger-font-size: 20px !default;
+$qrybldr-drag-bg-color: $table-bg-color-selected !default;
+$qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
+$qrybldr-drag-grp-list-heg: 31px !default;
+$qrybldr-drag-grp-big-list-heg: 36px !default;
+$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;

package/styles/query-builder/_fusionnew-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $qrybldr-width: auto !default;
 $qrybldr-height: auto !default;
 $qrybldr-brdr: 1px solid !default;
@@ -106,3 +105,11 @@ $qrybldr-val-error-bg-color: $danger-light !default;
 $qrybldr-val-error-color: $danger-bg-color !default;
 $qrybldr-collapse-brdr-color: $border-light !default;
 $qrybldr-icon-color: $icon-color !default;
+$qrybldr-drag-icon-font-size: 14px !default;
+$qrybldr-drag-icon-bigger-font-size: 22px !default;
+$qrybldr-drag-bg-color: $groupfill-bgcolor !default;
+$qrybldr-drag-grp-icon-pad: 10px 10px 10px 3px !default;
+$qrybldr-drag-grp-list-heg: 28px !default;
+$qrybldr-drag-grp-big-list-heg: 34px !default;
+$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;

package/styles/query-builder/_highcontrast-definition.scss

@@ -102,3 +102,11 @@ $qrybldr-spinner-left: auto !default;
 $qrybldr-rtl-spinner-right: auto !default;
 $qrybldr-rtl-spinner-left: 5px !default;
 $qrybldr-btngrp-brdr-radius: 0 !default;
+$qrybldr-drag-icon-font-size: 14px !default;
+$qrybldr-drag-icon-bigger-font-size: 18px !default;
+$qrybldr-drag-bg-color: $groupfill-bgcolor !default;
+$qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
+$qrybldr-drag-grp-list-heg: 32px !default;
+$qrybldr-drag-grp-big-list-heg: 37px !default;
+$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: $content-font !default;

package/styles/query-builder/_highcontrast-light-definition.scss

@@ -102,3 +102,11 @@ $qrybldr-spinner-left: auto !default;
 $qrybldr-rtl-spinner-right: auto !default;
 $qrybldr-rtl-spinner-left: 5px !default;
 $qrybldr-btngrp-brdr-radius: 0 !default;
+$qrybldr-drag-icon-font-size: 14px !default;
+$qrybldr-drag-icon-bigger-font-size: 18px !default;
+$qrybldr-drag-bg-color: $groupfill-bgcolor !default;
+$qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
+$qrybldr-drag-grp-list-heg: 32px !default;
+$qrybldr-drag-grp-big-list-heg: 37px !default;
+$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: $content-font !default;

package/styles/query-builder/_layout.scss

@@ -1,3 +1,22 @@
+@mixin fluent2-small-round-btn {
+  @if $theme-name == 'fluent2' {
+    height: 32px;
+    width: 32px;
+    border-radius: 20px;
+    border-color: transparent;
+    line-height: 14px;
+  }
+}
+
+@mixin fluent2-bigger-small-round-btn {
+  @if $theme-name == 'fluent2' {
+    height: 38px;
+    width: 38px;
+    border-radius: 20px;
+    border-color: transparent;
+    line-height: 0px;
+  }
+}
 @include export-module('querybuilder-layout') {
   .e-query-builder {
     border: $qrybldr-brdr;
@@ -10,8 +29,68 @@
       right: $qrybldr-spinner-right;
     }
 
-    &.e-rtl {
+    & .e-cloneproperties.e-group-body {
+      padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-dragclone.e-cloneproperties {
+      & .e-group-container,
+      & .e-rule-container {
+        @if $skin-name == 'fluent2' {
+          box-shadow: $shadow-md;
+        }
+        background: $qrybldr-drag-bg-color;
+      }
+
+      & .e-rule-value-delete {
+        margin-top: 10px;
+      }
+
+      & .e-drag-qb-rule {
+        padding: 18px 5px;
+        @if $skin-name == 'fluent2' {
+          color: $icon-color;
+        }
+      }
+    }
 
+    & .e-dragclone,
+    & .e-drag-qb-rule {
+      cursor: move;
+    }
+
+    & .e-dragclone .e-rule-field {
+      display: flex;
+      padding: 10px;
+    }
+
+    & .e-dragclone.e-notallowedcur,
+    & .e-dragclone.e-notallowedcur .e-drag-qb-rule {
+      cursor: not-allowed !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-group-body .e-drag-qb-rule,
+    & .e-dragclone .e-drag-qb-rule {
+      padding: 15px 3px 15px 11px;
+      vertical-align: middle;
+      font-size: $qrybldr-drag-icon-font-size;
+      color: $qryblr-drag-icon-color;
+    }
+
+    & .e-group-header .e-drag-qb-rule {
+      margin: 1px;
+      padding: $qrybldr-drag-grp-icon-pad !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-drag-rule-bottom-line {
+      border-bottom: 2px solid $qrybldr-btngroup-active-bgcolor !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-drag-rule-top-line {
+      border-top: 2px solid $qrybldr-btngroup-active-bgcolor !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &.e-rtl {
       & .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small {
         &.e-not {
           @if $skin-name == 'Material3' {
@@ -82,6 +161,10 @@
         padding-left: $qrybldr-btn-left;
       }
 
+      &.e-device .e-rule-field .e-drag-qb-rule:not(.e-hidden) {
+        display: block;
+      }
+
       & .e-group-header {
         & .e-group-action .e-btn {
           margin-left: $qrybldr-group-container-margin-left;
@@ -149,7 +232,12 @@
 
     & .e-rule-list > ::after,
     & .e-rule-list > ::before {
-      border-style: $qrybldr-rule-list-border-style;
+      @if $theme-name == 'fluent2' {
+        border-style: dotted;
+      }
+      @else {
+        border-style: $qrybldr-rule-list-border-style;
+      }
       content: '';
       left: $qrybldr-rule-list-first-left;
       position: $vrmode-ruledlt-mrgnpos;
@@ -188,7 +276,6 @@
     }
 
     & .e-group-header {
-
       & .e-group-action .e-btn {
         margin-left: $group-action-margin;
       }
@@ -229,6 +316,14 @@
         border: $qrybldr-btngrp-brdr;
         box-shadow: $qrybldr-btngrp-shadow;
         display: $qrybldr-btngroup-display;
+
+        & .e-btn.e-small {
+          @if $theme-name == 'fluent2' {
+            font-size: 14px;
+            line-height: 18.4px;
+            padding: 6px 12px;
+          }
+        }
       }
 
       & .e-btn.e-btngroup-and-lbl.e-small {
@@ -316,6 +411,10 @@
         box-shadow: $ruledelete-shadow;
       }
 
+      & .e-btn.e-small.e-round {
+        @include fluent2-small-round-btn;
+      }
+
       & .e-group-action .e-readonly {
         display: inline-block;
         visibility: hidden;
@@ -383,11 +482,7 @@
           margin-top: $grpcon-padding;
         }
 
-        & .e-rule-filter {
-          padding: $rulecon-padding;
-          width: $qrybldr-width;
-        }
-
+        & .e-rule-filter,
         & .e-rule-sub-filter {
           padding: $rulecon-padding;
           width: $qrybldr-width;
@@ -469,6 +564,10 @@
         &.e-btn.e-small.e-round {
           box-shadow: $ruledelete-shadow;
         }
+
+        & .e-btn.e-small.e-round {
+          @include fluent2-small-round-btn;
+        }
       }
 
       & .e-vertical-mode .e-removerule.e-rule-delete {
@@ -485,10 +584,7 @@
       box-shadow: $rule-boxshadow;
     }
 
-    &.e-device .e-group-body .e-rule-container .e-rule-filter {
-      padding: $device-rulecon-padding;
-    }
-
+    &.e-device .e-group-body .e-rule-container .e-rule-filter,
     &.e-device .e-group-body .e-rule-container .e-rule-sub-filter {
       padding: $device-rulecon-padding;
     }
@@ -582,6 +678,105 @@
         padding: $device-rule-padding;
       }
     }
+
+    &.e-multi-connector {
+      & .e-rule-list > .e-btn-group {
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+
+      & .e-qb-toggle {
+        margin-left: 3px;
+        margin-right: 10px;
+      }
+
+      & .e-group-container:not(:first-child) {
+        padding: 12px;
+        border: 1px solid;
+        margin-top: 0;
+        border-radius: 4px;
+      }
+
+      & .e-rule-list > .e-group-container:first-child {
+        padding: 12px;
+        border: 1px solid;
+        border-radius: 4px;
+      }
+
+      & .e-group-container:not(:first-child)::before,
+      & .e-rule-list > .e-group-container:first-child::before{
+        height: calc(50% - 8px);
+      }
+
+      & .e-group-container::after {
+        height: calc(50% + 17px);
+        top: calc(50% - 17px);
+      }
+
+      & .e-btn-group + .e-group-container {
+        margin-top: 0;
+      }
+
+      & .e-group-action .e-btn:first-child {
+        margin-left: 0;
+      }
+
+      & .e-qb-toggle-btn + .e-group-action .e-btn:first-child {
+        margin-left: 6px !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      & .e-btn-group {
+        & .e-btn.e-small {
+          @if $theme-name == 'fluent2' {
+            font-size: 14px;
+            line-height: 18.4px;
+            padding: 6px 12px;
+          }
+        }
+      }
+
+      & .e-multi-connector-init-group {
+        height: 40px;
+      }
+
+      & .e-btn-group::after,
+      & .e-btn-group::before {
+        left: -12px;
+        width: 8px;
+      }
+
+      & .e-rule-list .e-group-container::before,
+      & .e-rule-list .e-group-container::after {
+        left: -12px !important; /* stylelint-disable-line declaration-no-important */
+        @if $skin-name == 'Material3' {
+          left: -13px !important; /* stylelint-disable-line declaration-no-important */
+        }
+        
+        @if $skin-name == 'material' {
+          left: -12.8px !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+
+      & .e-rule-list .e-btn-group::before,
+      & .e-rule-list .e-btn-group::after {
+        left: -11.2px !important; /* stylelint-disable-line declaration-no-important */
+        @if $skin-name == 'Material3' {
+          left: -12.5px !important; /* stylelint-disable-line declaration-no-important */
+        }
+
+        @if $skin-name == 'material' {
+          left: -12px !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+
+      & .e-qb-toggle-btn {
+        box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      & .e-btn-group + .e-rule-container {
+        margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
 
   .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-top,
@@ -658,6 +853,39 @@
       margin-top: $device-rulecon-padding;
     }
 
+    & .e-rule-container button.e-button-hide {
+      display: $qrybldr-button-hide !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    & .e-collapse-rule {
+      @if $theme-name == 'fluent2' {
+        font-size: 16px;
+        padding: 11px;
+      }
+    }
+
+    & .e-btn.e-small.e-round .e-btn-icon {
+      @if $theme-name == 'fluent2' {
+        font-size: 16px;
+      }
+    }
+
+    & .e-drag-qb-rule {
+      font-size: $qrybldr-drag-icon-bigger-font-size;
+    }
+
+    & .e-group-header .e-btn-group .e-small.e-btn {
+      @if $theme-name == 'fluent2' {
+        font-size: 16px;
+        line-height: 20px;
+        padding: 8px 12px;
+      }
+    }
+
+    & .e-group-header .e-group-action .e-btn.e-small.e-round {
+      @include fluent2-bigger-small-round-btn;
+    }
+
     & .e-group-body {
       padding-left: $bigger-groupbody-paddingleft;
 
@@ -723,6 +951,10 @@
         &.e-btn.e-small.e-round {
           box-shadow: $ruledelete-shadow;
         }
+
+        & .e-btn.e-small.e-round {
+          @include fluent2-bigger-small-round-btn;
+        }
       }
     }
 
@@ -759,4 +991,33 @@
       padding: $bigger-rulecon-padding;
     }
   }
+
+  .e-query-builder.e-device .e-rule-field .e-drag-qb-rule:not(.e-hidden) {
+    display: block;
+  }
+
+  .e-bigger .e-query-builder .e-dragclone.e-cloneproperties {
+    & .e-drag-qb-rule {
+      padding: 24px 5px;
+    }
+    & .e-rule-value-delete {
+      margin: 15px;
+    }
+  }
+
+  .e-query-builder.e-device .e-dragclone.e-cloneproperties .e-rule-field {
+    display: block;
+  }
+
+  .e-query-builder.e-draggable .e-rule-list .e-group-container::before {
+    height: $qrybldr-drag-grp-list-heg;
+  }
+
+  .e-bigger .e-query-builder.e-draggable .e-rule-list .e-group-container::before {
+    height: $qrybldr-drag-grp-big-list-heg;
+  }
+
+  .e-bigger .e-query-builder .e-group-header .e-drag-qb-rule {
+    padding: $qrybldr-drag-grp-big-icon-pad !important; /* stylelint-disable-line declaration-no-important */
+  }
 }

package/styles/query-builder/_material-dark-definition.scss

@@ -103,3 +103,11 @@ $qrybldr-spinner-left: auto !default;
 $qrybldr-rtl-spinner-right: auto !default;
 $qrybldr-rtl-spinner-left: 5px !default;
 $qrybldr-btngrp-brdr-radius: 2px !default;
+$qrybldr-drag-icon-font-size: 12px !default;
+$qrybldr-drag-icon-bigger-font-size: 14px !default;
+$qrybldr-drag-bg-color: $groupfill-bgcolor !default;
+$qrybldr-drag-grp-icon-pad: 10px 10px 10px 3px !default;
+$qrybldr-drag-grp-list-heg: 25px !default;
+$qrybldr-drag-grp-big-list-heg: 32px !default;
+$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $grey-dark-font !default;

package/styles/query-builder/_material-definition.scss

@@ -102,3 +102,11 @@ $qrybldr-spinner-left: auto !default;
 $qrybldr-rtl-spinner-right: auto !default;
 $qrybldr-rtl-spinner-left: 5px !default;
 $qrybldr-btngrp-brdr-radius: 2px !default;
+$qrybldr-drag-icon-font-size: 12px !default;
+$qrybldr-drag-icon-bigger-font-size: 14px !default;
+$qrybldr-drag-bg-color: $groupfill-bgcolor !default;
+$qrybldr-drag-grp-icon-pad: 10px 10px 10px 3px !default;
+$qrybldr-drag-grp-list-heg: 25px !default;
+$qrybldr-drag-grp-big-list-heg: 32px !default;
+$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: rgba($grey-black, .87) !default;

package/styles/query-builder/_material3-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $qrybldr-width: auto !default;
 $qrybldr-height: auto !default;
 $qrybldr-brdr: 1px solid !default;
@@ -108,3 +107,11 @@ $qrybldr-val-error-bg-color: rgba($danger-light) !default;
 $qrybldr-val-error-color: rgba($danger-bg-color) !default;
 $qrybldr-collapse-brdr-color: rgba($border-light) !default;
 $qrybldr-icon-color: rgba($icon-color) !default;
+$qrybldr-drag-icon-font-size: 16px !default;
+$qrybldr-drag-icon-bigger-font-size: 18px !default;
+$qrybldr-drag-bg-color: $groupfill-bgcolor !default;
+$qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
+$qrybldr-drag-grp-list-heg: 26px !default;
+$qrybldr-drag-grp-big-list-heg: 34px !default;
+$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: rgba($secondary-text-color) !default;

package/styles/query-builder/_tailwind-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $qrybldr-width: auto !default;
 $qrybldr-height: auto !default;
 $qrybldr-brdr: 1px solid !default;
@@ -105,3 +104,11 @@ $qrybldr-bg-color: transparent !default;
 $qrybldr-val-error-bg-color: $danger-light !default;
 $qrybldr-val-error-color: $danger-bg-color !default;
 $qrybldr-collapse-brdr-color: $border-light !default;
+$qrybldr-drag-icon-font-size: 14px !default;
+$qrybldr-drag-icon-bigger-font-size: 14px !default;
+$qrybldr-drag-bg-color: $groupfill-bgcolor !default;
+$qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
+$qrybldr-drag-grp-list-heg: 28px !default;
+$qrybldr-drag-grp-big-list-heg: 34px !default;
+$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;

package/styles/query-builder/_theme.scss

@@ -7,21 +7,13 @@
       border-color: $qrybldr-brdr-color;
     }
 
-    & .e-group-header .e-dropdown-btn.e-add-btn,
-    .e-deletegroup,
-    .e-clone-grp-btn,
-    .e-lock-grp-btn {
-      @if $skin-name == 'bootstrap5' {
-        background: $qrybldr-btngroup-bgcolor;
-        box-shadow: none;
-        color: $qrybldr-icon-color;
-      }
-      @else if $skin-name == 'FluentUI' {
-        background: $qrybldr-btngroup-bgcolor;
-        border: 0 solid $qrybldr-btngroup-bgcolor;
-      }
+    & .e-disable .e-drag-qb-rule,
+    & .e-disable.e-drag-qb-rule {
+      color: $qrybldr-brdr-color;
     }
 
+    & .e-group-header .e-dropdown-btn.e-add-btn,
+    .e-deletegroup,
     & .e-group-header .e-clone-grp-btn,
     & .e-group-header .e-lock-grp-btn {
       @if $skin-name == 'bootstrap5' {
@@ -36,7 +28,6 @@
     }
 
     &.e-rtl .e-btn-group.e-rtl {
-
       & .e-qb-toggle.e-btn.e-small {
         @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' or $skin-name == 'fabric-dark' {
           border-right: 1px solid $qrybldr-brdr-color;
@@ -60,10 +51,7 @@
       }
 
       & .e-btn.e-btngroup-and-lbl.e-not {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' {
-          border-right: transparent;
-        }
-        @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' {
           border-right: transparent;
         }
       }
@@ -99,10 +87,7 @@
     }
 
     & .e-btn-group:not(.e-rtl) .e-qb-toggle.e-btn.e-small {
-      @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' {
-        border-right: transparent;
-      }
-      @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' {
+      @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' {
         border-right: transparent;
       }
     }
@@ -178,6 +163,13 @@
         background: $qrybldr-brdr-color;
       }
     }
+
+    &.e-multi-connector {
+      & .e-group-container:not(:first-child),
+      & .e-rule-list > .e-group-container:first-child {
+        border-color: $qrybldr-brdr-color;
+      }
+    }
   }
 }
 
@@ -203,3 +195,23 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: $qrybldr-val-error-color;
 }
+
+.e-query-builder .e-btn.e-round.e-small {
+  @if $theme-name == 'fluent2' {
+    &:hover {
+      background: transparent !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &:focus {
+      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &:active {
+      background: $content-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &:disabled {
+      background: $content-bg-color-alt1 !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+}