@syncfusion/ej2-querybuilder 20.1.59 → 20.2.40

package/src/query-builder/query-builder.js

@@ -557,7 +557,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             ruleListElem.appendChild(ruleElem);
             this.ruleIdCounter++;
         }
-        if (column && column.ruleTemplate) {
+        if (column && column.ruleTemplate && type !== "insertRule") {
             args = { requestType: 'template-initialize', ruleID: ruleElem.id, action: action, fields: this.fields, rule: rule };
             this.trigger('actionBegin', args);
             this.ruleTemplateFn = this.templateParser(column.ruleTemplate);
@@ -589,7 +589,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             elem = this.ruleElem.querySelector('.e-rule-field').cloneNode(true);
         }
         ruleElem.appendChild(elem);
-        if (column && column.ruleTemplate) {
+        if (column && column.ruleTemplate && type !== "insertRule") {
             this.renderReactTemplates();
         }
         return ruleElem;
@@ -619,7 +619,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var ruleElem;
         var newRule = { 'label': '', 'field': '', 'type': '', 'operator': '' };
         if (!args.cancel) {
-            if (column && column.ruleTemplate) {
+            if (column && column.ruleTemplate && args.type !== "insertRule") {
                 this.selectedColumn = column;
                 operators = this.selectedColumn.operators;
                 newRule = { 'label': column.label, 'field': column.field, 'type': column.type, 'operator': operators[0].value };
@@ -630,6 +630,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 this.trigger('actionBegin', args_1);
             }
             else {
+                if (column && column.ruleTemplate) {
+                    act = args.type;
+                }
                 ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field');
                 ruleElem.querySelector('.e-filter-input').setAttribute('id', ruleElem.id + '_filterkey');
                 var element = ruleElem.querySelector('button');
@@ -667,7 +670,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (!this.isImportRules) {
                 this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId);
             }
-            if (!column || (column && !column.ruleTemplate)) {
+            if (!column || (column && !column.ruleTemplate) || (column && (column.ruleTemplate && args.type == "insertRule"))) {
                 if (this.fieldMode === 'Default') {
                     var ddlField = void 0;
                     var ddlValue = this.isImportRules ? this.GetRootColumnName(rule.field) : rule.field;
@@ -2376,6 +2379,14 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (!(operator.indexOf('null') > -1 || operator.indexOf('empty') > -1)) {
             var parentId = closest(target, '.e-rule-container').id;
             prevItemData = this.getPreviousItemData(prevItemData, column);
+            if (prevItemData && prevItemData.template === undefined) {
+                if (prevItemData.columns) {
+                    prevItemData = this.getColumn(rule.field);
+                }
+            }
+            else if (this.fieldMode === 'DropdownTree' && prevItemData === undefined) {
+                prevItemData = this.getColumn(rule.field);
+            }
             if (prevItemData && prevItemData.template) {
                 this.templateDestroy(prevItemData, parentId + '_valuekey0');
                 var elem = select('#' + parentId + '_valuekey0', target.nextElementSibling);
@@ -3169,6 +3180,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 case 'columns':
                     this.columns = newProp.columns;
                     this.columnSort();
+                    this.updateSubFieldsFromColumns(this.columns);
                     break;
                 case 'sortDirection':
                     this.sortDirection = newProp.sortDirection;

package/styles/fluent-dark.css

@@ -716,25 +716,25 @@
   border: 0 solid #252423;
 }
 .e-query-builder .e-group-container {
-  border-color: #292827;
+  border-color: #797775;
 }
 .e-query-builder .e-rule-container {
   background-color: #1b1a19;
-  border-color: #292827;
+  border-color: #797775;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
-  border-top-color: #292827;
+  border-top-color: #797775;
 }
 .e-query-builder .e-rule-list .e-group-container {
   background-color: transparent;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
-  border-color: #292827;
+  border-color: #797775;
 }
 .e-query-builder .e-btn-group input:checked + label.e-btn, .e-query-builder .e-btn-group .e-btn.e-qb-toggle.e-active-toggle {
   background: #0078d4;
   border-color: #0078d4;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-query-builder .e-group-header .e-btn-group:not(.e-rtl) .e-qb-toggle:last-of-type {
   background-color: #252423;

package/styles/fluent.css

@@ -716,20 +716,20 @@
   border: 0 solid #f3f2f1;
 }
 .e-query-builder .e-group-container {
-  border-color: #edebe9;
+  border-color: #c8c6c4;
 }
 .e-query-builder .e-rule-container {
   background-color: #fff;
-  border-color: #edebe9;
+  border-color: #c8c6c4;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
-  border-top-color: #edebe9;
+  border-top-color: #c8c6c4;
 }
 .e-query-builder .e-rule-list .e-group-container {
   background-color: transparent;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
-  border-color: #edebe9;
+  border-color: #c8c6c4;
 }
 .e-query-builder .e-btn-group input:checked + label.e-btn, .e-query-builder .e-btn-group .e-btn.e-qb-toggle.e-active-toggle {
   background: #0078d4;

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

@@ -94,10 +94,10 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
 $qrybldr-btngroup-bgcolor: $content-bg-color-alt2 !default;
 $qrybldr-btngroup-color: $primary-text-color !default;
 $qrybldr-color: $placeholder-text-color !default;
-$qrybldr-rule-list-border-color: $border-light !default;
+$qrybldr-rule-list-border-color: $border-dark !default;
 $qrybldr-btngroup-active-bgcolor: $primary !default;
 $qrybldr-btngroup-active-color: $primary-text-color !default;
-$groupborder-color: $border-light !default;
+$groupborder-color: $border-dark !default;
 $groupfill-color: $secondary-bg-color !default;
 $groupfill-bgcolor: $content-bg-color !default;
 $qrybldr-brdr-color: $border-light !default;

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

@@ -0,0 +1,108 @@
+//layout variables
+$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: 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: -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 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: 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: 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-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: 4px !default;
+$qrybldr-btngroup-bgcolor: $content-bg-color !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: $secondary-bg-color !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-icon-color: $icon-color !default;

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

@@ -0,0 +1,108 @@
+//layout variables
+$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: 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: -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 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: 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: 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-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: 4px !default;
+$qrybldr-btngroup-bgcolor: $content-bg-color !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: $secondary-bg-color !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-icon-color: $icon-color !default;

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

@@ -716,25 +716,25 @@
   border: 0 solid #252423;
 }
 .e-query-builder .e-group-container {
-  border-color: #292827;
+  border-color: #797775;
 }
 .e-query-builder .e-rule-container {
   background-color: #1b1a19;
-  border-color: #292827;
+  border-color: #797775;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
-  border-top-color: #292827;
+  border-top-color: #797775;
 }
 .e-query-builder .e-rule-list .e-group-container {
   background-color: transparent;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
-  border-color: #292827;
+  border-color: #797775;
 }
 .e-query-builder .e-btn-group input:checked + label.e-btn, .e-query-builder .e-btn-group .e-btn.e-qb-toggle.e-active-toggle {
   background: #0078d4;
   border-color: #0078d4;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-query-builder .e-group-header .e-btn-group:not(.e-rtl) .e-qb-toggle:last-of-type {
   background-color: #252423;

package/styles/query-builder/fluent.css

@@ -716,20 +716,20 @@
   border: 0 solid #f3f2f1;
 }
 .e-query-builder .e-group-container {
-  border-color: #edebe9;
+  border-color: #c8c6c4;
 }
 .e-query-builder .e-rule-container {
   background-color: #fff;
-  border-color: #edebe9;
+  border-color: #c8c6c4;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
-  border-top-color: #edebe9;
+  border-top-color: #c8c6c4;
 }
 .e-query-builder .e-rule-list .e-group-container {
   background-color: transparent;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
-  border-color: #edebe9;
+  border-color: #c8c6c4;
 }
 .e-query-builder .e-btn-group input:checked + label.e-btn, .e-query-builder .e-btn-group .e-btn.e-qb-toggle.e-active-toggle {
   background: #0078d4;

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

@@ -0,0 +1,8 @@
+@include export-module('query-builder-fusionnew-icons') {
+  .e-query-builder {
+    & .e-collapse-rule::before {
+      content: '\e80e';
+            }
+         }
+      }
+      

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

@@ -0,0 +1,8 @@
+@include export-module('query-builder-material3-icons') {
+  .e-query-builder {
+    & .e-collapse-rule::before {
+      content: '\e80e';
+            }
+         }
+      }
+      

package/styles/query-builder/_definition.scss

@@ -1,60 +0,0 @@
-$qrybldr-width: auto;
-$qrybldr-height: auto;
-$qrybldr-brdr: 1px solid;
-$grpcon-padding: 12px;
-$qrybldr-device-diaplay: inline-block;
-$btn-group-fontfmly: Roboto-Regular;
-$drodown-fontsize: 15px;;
-$btn-group-padding: 6px 6.6px 4px;
-$dropdown-menuicon-opacity: .54;
-$group-action-margin: 12px;
-$group-action-mrgntop: 2px;
-$group-action-widthhgt: 1.7em;
-$groupbody-paddingleft: 20px;
-$rulecon-height: auto;
-$rulecon-padding: 12px 6px 12px 6px;
-$rulevalue-paddingbtm: 16px;
-$hrmode-ruledlt-mrgn: 12px;
-$rulecon-margin: 17px;
-$vrmode-ruledlt-mrgnlft: 15.5%;
-$vrmode-ruledlt-mrgntop: 7%;
-$vrmode-ruledlt-mrgnpos: absolute;
-$vr-rulecon-brdrrdus: 2px;
-$qrybldr-grpbody-overflow: auto;
-$qrybldr-grpcont-overflow: hidden;
-$qrybldr-rulelist-grcon-float: right;
-$qrybldr-rulelist-grcon-width: 100%;
-$qrybldr-rulelist-grcon-padding: 12px 0;
-$qrybldr-button-hide: none;
-$qrybldr-field: left;
-$ruledelete-margin: 6px;
-$dropdownpopup-height: 2em;
-$dropdownpopup-width: 1.46em;
-$ruledelete-shadow: none;
-$roundbtn-height: 2em;
-$radio-wrapper-margin: 15px;
-$rule-boxshadow:  0 2px 6px #d3d3d3;
-$qrybldr-bigger-padding: 16px;
-$qrybldr-brdr-color: rgb(215, 215, 215);
-$qrybldr-grpcont-bordercolor: rgba(255, 255, 255, 1);
-$qrybldr-btngroup-active-bgcolor: rgba(227, 23, 91, 1);
-$qrybldr-btngroup-active-color: rgba(255, 255, 255, 1);
-$bigger-group-action-margin: 16px;
-$bigger-qrybldr-rulelist-grcon-padding: 16px 0;
-$bigger-grpcon-padding: 16px;
-$bigger-groupbody-paddingleft: 24px;
-$bigger-hrmode-ruledlt-mrgn: 16px;
-$bigger-rulecon-padding: 16px;
-$bigger-roundbtn-height: 2.5em;
-$bigger-vrmode-ruledlt-mrgnlft: 16px;
-$bigger-rule-delete: right;
-$qrybldr-group-container-margin-top: 10px;
-$qrybldr-group-container-margin-left: 0;
-$qrybldr-posn-relative: relative;
-$qrybldr-rule-list-first-top: -12px;
-$qrybldr-rule-list-before-top: -10px;
-$qrybldr-rule-list-after-top: 50%;
-$qrybldr-rule-list-after-border: 0 0 0 2px;
-$qrybldr-rule-list-before-border: 0 0 2px 2px;
-$qrybldr-rule-list-border-style: solid;
-$qrybldr-rule-list-border-color: #ccc;