@syncfusion/ej2-querybuilder 31.2.16 → 32.1.21

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

@@ -1 +1,158 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$qrybldr-width: auto !default;
+$qrybldr-height: auto !default;
+$qrybldr-brdr: 1px solid !default;
+$qrybldr-collapse-brdr: 0 solid !default;
+$qrybldr-btngrp-brdr: none !default;
+$grpcon-padding: 12px !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: 8px 8px 8px 8px !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: 8px !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: -13px !default;
+$qrybldr-rule-list-first-right: -13px !default;
+$qrybldr-rule-list-before-top: -9px !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: dashed !default;
+$qrybldr-joined-rule-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 16px 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: 14px !default;
+$qrybldr-rule-container-after-height: calc(50% + 6px) !default;
+$qrybldr-rule-container-after-top: calc(50% - 3px) !default;
+$qrybldr-grpcon-brder-left: -12px !default;
+$bigger-rule-list-first-top: -14px !default;
+$qrybldr-rulecont-margin: -3px !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: $shadow-sm !default;
+$qrybldr-multi-width: 190px !default;
+$qrybldr-device-value-width: 100% !default;
+$qrybldr-btngroup-display: inline-block !default;
+$qrybldr-grpcon-aftrbrder-left: -12px !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: 20px !default;
+$qrybldr-collapse-padding: 5px !default;
+$qrybldr-collapse-box-shadow: none !default;
+$qrybldr-collapse-txtarea-margin: 8px !default;
+$qrybldr-brdr-radius: $radius-4 !default;
+$qrybldr-summary-line-height: 1.5em !default;
+$qrybldr-smrytxt-font-size: 14px !default;
+$qrybldr-bigger-smrytxt-font-size: 16px !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: $radius-20 !default;
+$qrybldr-btngroup-bgcolor: rgba($content-bg-color) !default;
+$qrybldr-btngroup-color: rgba($primary-text-color) !default;
+$qrybldr-color: rgba($content-text-color) !default;
+$qrybldr-rule-list-border-color: rgba($border-light) !default;
+$qrybldr-btngroup-active-bgcolor: rgba($primary) !default;
+$qrybldr-btngroup-active-color: rgba($primary-text-color) !default;
+$groupborder-color: rgba($border-light) !default;
+$groupfill-color: $transparent !default;
+$groupfill-bgcolor: $content-bg-color-alt1 !default;
+$qrybldr-brdr-color: rgba($border-light) !default;
+$qrybldr-bg-color: transparent !default;
+$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;
+$spinner-border-light-color: rgba($primary-light) !default;
+$spinner-border-color: rgba($primary) !default;
+$qryblr-zero-padding-margin: 0 !default;
+$qrybldr-bigger-drag-clone-padding: 24px 5px !default;
+$qrybldr-bigger-drag-clone-margin: 15px !default;
+$qrybldr-dragclone-value-margin-top: 10px !default;
+$qrybldr-dragclone-drag-rule-padding: 18px 5px !default;
+$qrybldr-dragclone-rule-padding: 10px !default;
+$qrybldr-dragclone-qb-rule-padding: 15px 3px 15px 11px !default;
+$qrybldr-dragclone-qb-rule-margin: 1px !default;
+$qrybldr-drag-rule-bottom-line-border: 2px solid $qrybldr-btngroup-active-bgcolor !default;
+$qrybldr-zero-border-radius: $radius-0 !default;
+$qrybldr-group-body-rule-margin: 12px !default;
+$qrybldr-group-container-not-padding: 12px !default;
+$qrybldr-group-container-not-border-radius: $radius-4 !default;
+$qrybldr-group-container-not-border: 1px solid !default;
+$qrybldr-summary-line-height: 1.5em !default;
+$qry-multi-list-margin-top: 10px !default;
+$qry-multi-list-margin-bottom: 10px !default;
+$qry-multi-list-margin-left: 3px !default;
+$qry-multi-list-margin-right: 10px !default;
+$qry-toggle-btn-margin-right: 6px !default;
+$qry-multi-init-group-height: 40px !default;
+$qrybldr-vertical-width: auto !default;
+$qrybldr-rule-value-width: 200px !default;
+$qrybldr-btn-group-width: 8px !default;
+$qry-btn-rule-group-before-left: -13px !default;
+$qry-btn-rule-list-before-left: 12.5px !default;
+$qrybldr-group-container-height: calc(50% - 8px) !default;
+$qrybldr-group-container-after-height: calc(50% + 17px) !default;
+$qrybldr-group-container-after-top: calc(50% - 17px) !default;
+$qry-btn-group-before-left: -12px !default;
+$qrybldr-btn-rtl-right-radius: $radius-4 !default;
+$qrybldr-btn-rtl-left-radius: $radius-0 !default;
+$qrybldr-toggle-btn-left-radius: $radius-4 !default;
+$qry-bldr-btn-small-font-size: 14px !default;
+$qry-bldr-btn-small-line-height: 18.4px !default;
+$qry-bldr-btn-small-padding: 6px 12px !default;
+$qryblder-border: 1px !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $qrybldr-width: auto !default;
 $qrybldr-height: auto !default;
 $qrybldr-brdr: 1px solid !default;
@@ -83,7 +85,7 @@ $qrybldr-collapse-font-size: 20px !default;
 $qrybldr-collapse-padding: 5px !default;
 $qrybldr-collapse-box-shadow: none !default;
 $qrybldr-collapse-txtarea-margin: 8px !default;
-$qrybldr-brdr-radius: 4px !default;
+$qrybldr-brdr-radius: $radius-4 !default;
 $qrybldr-summary-line-height: 1.5em !default;
 $qrybldr-smrytxt-font-size: 14px !default;
 $qrybldr-bigger-smrytxt-font-size: 16px !default;
@@ -91,7 +93,7 @@ $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: 20px !default;
+$qrybldr-btngrp-brdr-radius: $radius-20 !default;
 $qrybldr-btngroup-bgcolor: rgba($content-bg-color) !default;
 $qrybldr-btngroup-color: rgba($primary-text-color) !default;
 $qrybldr-color: rgba($content-text-color) !default;
@@ -117,3 +119,40 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: rgba($secondary-text-color) !default;
 $spinner-border-light-color: rgba($primary-light) !default;
 $spinner-border-color: rgba($primary) !default;
+$qryblr-zero-padding-margin: 0 !default;
+$qrybldr-bigger-drag-clone-padding: 24px 5px !default;
+$qrybldr-bigger-drag-clone-margin: 15px !default;
+$qrybldr-dragclone-value-margin-top: 10px !default;
+$qrybldr-dragclone-drag-rule-padding: 18px 5px !default;
+$qrybldr-dragclone-rule-padding: 10px !default;
+$qrybldr-dragclone-qb-rule-padding: 15px 3px 15px 11px !default;
+$qrybldr-dragclone-qb-rule-margin: 1px !default;
+$qrybldr-drag-rule-bottom-line-border: 2px solid $qrybldr-btngroup-active-bgcolor !default;
+$qrybldr-zero-border-radius: $radius-0 !default;
+$qrybldr-group-body-rule-margin: 12px !default;
+$qrybldr-group-container-not-padding: 12px !default;
+$qrybldr-group-container-not-border-radius: $radius-4 !default;
+$qrybldr-group-container-not-border: 1px solid !default;
+$qrybldr-summary-line-height: 1.5em !default;
+$qry-multi-list-margin-top: 10px !default;
+$qry-multi-list-margin-bottom: 10px !default;
+$qry-multi-list-margin-left: 3px !default;
+$qry-multi-list-margin-right: 10px !default;
+$qry-toggle-btn-margin-right: 6px !default;
+$qry-multi-init-group-height: 40px !default;
+$qrybldr-vertical-width: auto !default;
+$qrybldr-rule-value-width: 200px !default;
+$qrybldr-btn-group-width: 8px !default;
+$qry-btn-rule-group-before-left: -13px !default;
+$qry-btn-rule-list-before-left: 12.5px !default;
+$qrybldr-group-container-height: calc(50% - 8px) !default;
+$qrybldr-group-container-after-height: calc(50% + 17px) !default;
+$qrybldr-group-container-after-top: calc(50% - 17px) !default;
+$qry-btn-group-before-left: -12px !default;
+$qrybldr-btn-rtl-right-radius: $radius-4 !default;
+$qrybldr-btn-rtl-left-radius: $radius-0 !default;
+$qrybldr-toggle-btn-left-radius: $radius-4 !default;
+$qry-bldr-btn-small-font-size: 14px !default;
+$qry-bldr-btn-small-line-height: 18.4px !default;
+$qry-bldr-btn-small-padding: 6px 12px !default;
+$qryblder-border: 1px !default;

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

@@ -1 +1,148 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+$qrybldr-width: auto !default;
+$qrybldr-height: auto !default;
+$qrybldr-brdr: 1px solid !default;
+$qrybldr-btngrp-brdr: none !default;
+$grpcon-padding: 12px !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: dotted !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: $text-xl !default;
+$qrybldr-collapse-padding: 5px !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-light !default;
+$qrybldr-btngroup-active-bgcolor: $primary !default;
+$qrybldr-btngroup-active-color: $primary-text-color !default;
+$groupborder-color: $border-light !default;
+$groupfill-color: transparent !default;
+$groupfill-bgcolor: $content-bg-color-alt1 !default;
+$qrybldr-brdr-color: $border-light !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;
+$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;
+
+$qryblr-zero-padding-margin: 0 !default;
+$qrybldr-bigger-drag-clone-padding: 24px 5px !default;
+$qrybldr-bigger-drag-clone-margin: 15px !default;
+$qrybldr-dragclone-value-margin-top: 10px !default;
+$qrybldr-dragclone-drag-rule-padding: 18px 5px !default;
+$qrybldr-dragclone-rule-padding: 10px !default;
+$qrybldr-dragclone-qb-rule-padding: 15px 3px 15px 11px !default;
+$qrybldr-dragclone-qb-rule-margin: 1px !default;
+$qrybldr-drag-rule-bottom-line-border: 2px solid $qrybldr-btngroup-active-bgcolor !default;
+$qrybldr-zero-border-radius: 0 !default;
+$qrybldr-group-body-rule-margin: 12px !default;
+$qrybldr-group-container-not-padding: 12px !default;
+$qrybldr-group-container-not-border-radius: 4px !default;
+$qrybldr-group-container-not-border: 1px solid !default;
+$qrybldr-summary-line-height: 1.5em !default;
+$qry-multi-list-margin-top: 10px !default;
+$qry-multi-list-margin-bottom: 10px !default;
+$qry-multi-list-margin-left: 3px !default;
+$qry-multi-list-margin-right: 10px !default;
+$qry-toggle-btn-margin-right: 6px !default;
+$qry-multi-init-group-height: 40px !default;
+$qrybldr-vertical-width: auto !default;
+$qrybldr-rule-value-width: 200px !default;
+$qrybldr-btn-group-width: 8px !default;
+$qrybldr-group-container-height: calc(50% - 8px) !default;
+$qrybldr-group-container-after-height: calc(50% + 17px) !default;
+$qrybldr-group-container-after-top: calc(50% - 17px) !default;
+$qry-btn-group-before-left: -12px !default;
+$qry-btn-rule-group-before-left: -12px !default;
+$qry-btn-rule-list-before-left: -11.2px !default;
+$qryblder-border: 1px !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
 $qrybldr-width: auto !default;
 $qrybldr-height: auto !default;
 $qrybldr-brdr: 1px solid !default;
@@ -112,5 +114,35 @@ $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;
-$spinner-border-light-color: $primary-light !default;
-$spinner-border-color: $primary !default;
+
+$qryblr-zero-padding-margin: 0 !default;
+$qrybldr-bigger-drag-clone-padding: 24px 5px !default;
+$qrybldr-bigger-drag-clone-margin: 15px !default;
+$qrybldr-dragclone-value-margin-top: 10px !default;
+$qrybldr-dragclone-drag-rule-padding: 18px 5px !default;
+$qrybldr-dragclone-rule-padding: 10px !default;
+$qrybldr-dragclone-qb-rule-padding: 15px 3px 15px 11px !default;
+$qrybldr-dragclone-qb-rule-margin: 1px !default;
+$qrybldr-drag-rule-bottom-line-border: 2px solid $qrybldr-btngroup-active-bgcolor !default;
+$qrybldr-zero-border-radius: 0 !default;
+$qrybldr-group-body-rule-margin: 12px !default;
+$qrybldr-group-container-not-padding: 12px !default;
+$qrybldr-group-container-not-border-radius: 4px !default;
+$qrybldr-group-container-not-border: 1px solid !default;
+$qrybldr-summary-line-height: 1.5em !default;
+$qry-multi-list-margin-top: 10px !default;
+$qry-multi-list-margin-bottom: 10px !default;
+$qry-multi-list-margin-left: 3px !default;
+$qry-multi-list-margin-right: 10px !default;
+$qry-toggle-btn-margin-right: 6px !default;
+$qry-multi-init-group-height: 40px !default;
+$qrybldr-vertical-width: auto !default;
+$qrybldr-rule-value-width: 200px !default;
+$qrybldr-btn-group-width: 8px !default;
+$qrybldr-group-container-height: calc(50% - 8px) !default;
+$qrybldr-group-container-after-height: calc(50% + 17px) !default;
+$qrybldr-group-container-after-top: calc(50% - 17px) !default;
+$qry-btn-group-before-left: -12px !default;
+$qry-btn-rule-group-before-left: -12px !default;
+$qry-btn-rule-list-before-left: -11.2px !default;
+$qryblder-border: 1px !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 $qrybldr-width: auto !default;
 $qrybldr-height: auto !default;
 $qrybldr-brdr: 1px solid !default;
@@ -81,7 +83,7 @@ $qrybldr-collapse-font-size: $text-sm !default;
 $qrybldr-collapse-padding: 5px !default;
 $qrybldr-collapse-box-shadow: none !default;
 $qrybldr-collapse-txtarea-margin: 8px !default;
-$qrybldr-brdr-radius: 4px !default;
+$qrybldr-brdr-radius: $radius-4 !default;
 $qrybldr-summary-line-height: 1.5em !default;
 $qrybldr-smrytxt-font-size: $text-sm !default;
 $qrybldr-bigger-smrytxt-font-size: $text-base !default;
@@ -89,7 +91,7 @@ $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-btngrp-brdr-radius: $radius-4 !default;
 $qrybldr-btngroup-bgcolor: $content-bg-color !default;
 $qrybldr-btngroup-color: $primary-text-color !default;
 $qrybldr-color: $content-text-color !default;
@@ -115,3 +117,37 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $icon-color !default;
 $spinner-border-light-color: $primary-light !default;
 $spinner-border-color: $primary !default;
+$qrybldr-collapse-rule-font-size: $text-base !default;
+
+$qryblr-zero-padding-margin: 0 !default;
+$qrybldr-bigger-drag-clone-padding: 24px 5px !default;
+$qrybldr-bigger-drag-clone-margin: 15px !default;
+$qrybldr-dragclone-value-margin-top: 10px !default;
+$qrybldr-dragclone-drag-rule-padding: 18px 5px !default;
+$qrybldr-dragclone-rule-padding: 10px !default;
+$qrybldr-dragclone-qb-rule-padding: 15px 3px 15px 11px !default;
+$qrybldr-dragclone-qb-rule-margin: 1px !default;
+$qrybldr-drag-rule-bottom-line-border: 2px solid $qrybldr-btngroup-active-bgcolor !default;
+$qrybldr-zero-border-radius: $radius-0 !default;
+$qrybldr-group-body-rule-margin: 12px !default;
+$qrybldr-group-container-not-padding: 12px !default;
+$qrybldr-group-container-not-border-radius: $radius-4 !default;
+$qrybldr-group-container-not-border: 1px solid !default;
+$qry-multi-list-margin-top: 10px !default;
+$qry-multi-list-margin-bottom: 10px !default;
+$qry-multi-list-margin-left: 3px !default;
+$qry-multi-list-margin-right: 10px !default;
+$qry-toggle-btn-margin-right: 6px !default;
+$qry-multi-init-group-height: 40px !default;
+$qrybldr-vertical-width: auto !default;
+$qrybldr-rule-value-width: 200px !default;
+$qrybldr-btn-group-width: 8px !default;
+$qrybldr-group-container-height: calc(50% - 8px) !default;
+$qrybldr-group-container-after-height: calc(50% + 17px) !default;
+$qrybldr-group-container-after-top: calc(50% - 17px) !default;
+$qry-btn-group-before-left: -12px !default;
+$qry-btn-rule-group-before-left: -12px !default;
+$qry-btn-rule-list-before-left: -11.2px !default;
+$qry-bldr-collapse-rule-right: 7px !default;
+$qry-bldr-collapse-rule-border-radius: $radius-20 !default;
+$qryblder-border: 1px !default;

package/styles/query-builder/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/query-builder/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('querybuilder-theme') {
   .e-query-builder {
     background: $qrybldr-bg-color;
@@ -237,26 +239,3 @@
     }
   }
 }
-
-.e-querybuilder-spinner::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid $spinner-border-light-color;
-  border-top: 2px solid $spinner-border-color;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: translateX(-50%) rotate(0deg);
-  }
-
-  100% {
-    transform: translateX(-50%) rotate(360deg);
-  }
-}

package/styles/query-builder/bds.css

@@ -836,42 +836,6 @@
   color: #d92c20;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--color-sf-utility-primary-light);
-  border-top: 2px solid var(--color-sf-brand-primary);
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/query-builder/bds.scss

@@ -1,16 +1,16 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-buttons/styles/radio-button/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/button-group/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bds-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bds-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bds-definition.scss';
-@import 'ej2-inputs/styles/textbox/bds-definition.scss';
-@import 'ej2-popups/styles/tooltip/bds-definition.scss';
-@import 'ej2-popups/styles/spinner/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-buttons/styles/radio-button/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/button-group/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bds-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bds-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bds-definition' as *;
+@use 'ej2-inputs/styles/textbox/bds-definition' as *;
+@use 'ej2-popups/styles/tooltip/bds-definition' as *;
+@use 'ej2-popups/styles/spinner/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/query-builder/bootstrap-dark.css

@@ -733,42 +733,6 @@
   color: #f44336;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgb(189, 219.8, 255);
-  border-top: 2px solid #0070f0;
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/query-builder/bootstrap-dark.scss

@@ -1,16 +1,16 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/radio-button/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/button-group/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bootstrap-dark-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/textbox/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/radio-button/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/button-group/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bootstrap-dark-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/textbox/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;