@syncfusion/ej2-querybuilder 20.4.51 → 21.1.35

package/styles/fluent-dark.css

@@ -413,7 +413,7 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-style: dotted;
-  border-top-width: 2px;
+  border-top-width: 1px;
   margin-top: 0;
 }
 .e-query-builder .e-group-body .e-rule-container.e-separate-rule {
@@ -706,7 +706,7 @@
 }
 
 .e-query-builder {
-  background-color: transparent;
+  background: transparent;
   border-color: #292827;
 }
 .e-query-builder .e-group-header .e-btn-group {
@@ -714,21 +714,21 @@
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
 .e-query-builder .e-deletegroup {
-  background-color: #252423;
+  background: #252423;
   border: 0 solid #252423;
 }
 .e-query-builder .e-group-container {
   border-color: #797775;
 }
 .e-query-builder .e-rule-container {
-  background-color: #1b1a19;
+  background: #1b1a19;
   border-color: #797775;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
   border-top-color: #797775;
 }
 .e-query-builder .e-rule-list .e-group-container {
-  background-color: transparent;
+  background: transparent;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
   border-color: #797775;
@@ -739,33 +739,33 @@
   color: #1b1a19;
 }
 .e-query-builder .e-group-header .e-btn-group:not(.e-rtl) .e-qb-toggle:last-of-type {
-  background-color: #252423;
+  background: #252423;
   border: 0 solid #252423;
 }
 .e-query-builder .e-removerule.e-btn.e-round {
-  background-color: #1b1a19;
-  background-color: #252423;
+  background: #1b1a19;
+  background: #252423;
   border: 0 solid #252423;
 }
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {
-  background-color: transparent;
+  background: transparent;
   color: #a19f9d;
 }
 .e-query-builder .e-collapse-rule {
-  background-color: transparent;
+  background: transparent;
   border-color: #292827;
   color: #a19f9d;
 }
 .e-query-builder .e-collapse-rule:focus, .e-query-builder .e-collapse-rule:active, .e-query-builder .e-collapse-rule:hover {
-  background-color: #292827;
+  background: #292827;
 }
 
 .e-tooltip-wrap.e-querybuilder-error,
 .e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
-  background-color: #fed9cc;
+  background: #fed9cc;
   border-color: #fed9cc;
 }
 

package/styles/fluent.css

@@ -413,7 +413,7 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-style: dotted;
-  border-top-width: 2px;
+  border-top-width: 1px;
   margin-top: 0;
 }
 .e-query-builder .e-group-body .e-rule-container.e-separate-rule {
@@ -706,7 +706,7 @@
 }
 
 .e-query-builder {
-  background-color: transparent;
+  background: transparent;
   border-color: #edebe9;
 }
 .e-query-builder .e-group-header .e-btn-group {
@@ -714,21 +714,21 @@
 }
 .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
 .e-query-builder .e-deletegroup {
-  background-color: #f3f2f1;
+  background: #f3f2f1;
   border: 0 solid #f3f2f1;
 }
 .e-query-builder .e-group-container {
   border-color: #c8c6c4;
 }
 .e-query-builder .e-rule-container {
-  background-color: #fff;
+  background: #fff;
   border-color: #c8c6c4;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
   border-top-color: #c8c6c4;
 }
 .e-query-builder .e-rule-list .e-group-container {
-  background-color: transparent;
+  background: transparent;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
   border-color: #c8c6c4;
@@ -739,33 +739,33 @@
   color: #fff;
 }
 .e-query-builder .e-group-header .e-btn-group:not(.e-rtl) .e-qb-toggle:last-of-type {
-  background-color: #f3f2f1;
+  background: #f3f2f1;
   border: 0 solid #f3f2f1;
 }
 .e-query-builder .e-removerule.e-btn.e-round {
-  background-color: #fff;
-  background-color: #f3f2f1;
+  background: #fff;
+  background: #f3f2f1;
   border: 0 solid #f3f2f1;
 }
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {
-  background-color: transparent;
+  background: transparent;
   color: #605e5c;
 }
 .e-query-builder .e-collapse-rule {
-  background-color: transparent;
+  background: transparent;
   border-color: #edebe9;
   color: #605e5c;
 }
 .e-query-builder .e-collapse-rule:focus, .e-query-builder .e-collapse-rule:active, .e-query-builder .e-collapse-rule:hover {
-  background-color: #edebe9;
+  background: #edebe9;
 }
 
 .e-tooltip-wrap.e-querybuilder-error,
 .e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
-  background-color: #fed9cc;
+  background: #fed9cc;
   border-color: #fed9cc;
 }
 

package/styles/highcontrast-light.css

@@ -429,7 +429,7 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-style: dotted;
-  border-top-width: 2px;
+  border-top-width: 1px;
   margin-top: 0;
 }
 .e-query-builder .e-group-body .e-rule-container.e-separate-rule {
@@ -722,33 +722,24 @@
 }
 
 .e-query-builder {
-  background-color: #fff;
+  background: #fff;
   border-color: #400074;
 }
 .e-query-builder .e-group-header .e-btn-group {
   border-color: #400074;
 }
-.e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
-  border-right: 1px solid #400074;
-}
-.e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-active-toggle {
-  border-right: 1px solid #400074;
-}
-.e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-not {
-  border-right: transparent;
-}
 .e-query-builder .e-group-container {
   border-color: #4f4f4f;
 }
 .e-query-builder .e-rule-container {
-  background-color: #fff;
+  background: #fff;
   border-color: #4f4f4f;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
   border-top-color: #ccc;
 }
 .e-query-builder .e-rule-list .e-group-container {
-  background-color: #fff;
+  background: #fff;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
   border-color: #ccc;
@@ -758,40 +749,28 @@
   border-color: #400074;
   color: #fff;
 }
-.e-query-builder .e-btn-group:not(.e-rtl) .e-qb-toggle.e-btn.e-small {
-  border-right: transparent;
-}
-.e-query-builder .e-btn-group:not(.e-rtl) .e-btn.e-btngroup-and-lbl.e-not {
-  border-left: transparent;
-}
-.e-query-builder .e-group-header .e-btn-group:not(.e-rtl) .e-qb-toggle:last-of-type {
-  border-left: 1px solid;
-}
-.e-query-builder .e-group-header .e-btn-group .e-qb-toggle.e-active-toggle:last-of-type {
-  border-left-color: #400074;
-}
 .e-query-builder .e-removerule.e-btn.e-round {
-  background-color: #fff;
+  background: #fff;
 }
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {
-  background-color: #fff;
+  background: #fff;
   color: #000;
 }
 .e-query-builder .e-collapse-rule {
-  background-color: #fff;
+  background: #fff;
   border-color: #757575;
   color: #000;
 }
 .e-query-builder .e-collapse-rule:focus, .e-query-builder .e-collapse-rule:active, .e-query-builder .e-collapse-rule:hover {
-  background-color: #400074;
+  background: #400074;
 }
 
 .e-tooltip-wrap.e-querybuilder-error,
 .e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
-  background-color: #b30900;
+  background: #b30900;
   border-color: #b30900;
 }
 

package/styles/highcontrast.css

@@ -431,7 +431,7 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-style: dotted;
-  border-top-width: 2px;
+  border-top-width: 1px;
   margin-top: 0;
 }
 .e-query-builder .e-group-body .e-rule-container.e-separate-rule {
@@ -724,7 +724,7 @@
 }
 
 .e-query-builder {
-  background-color: #000;
+  background: #000;
   border-color: #969696;
 }
 .e-query-builder .e-group-header .e-btn-group {
@@ -743,14 +743,14 @@
   border-color: #969696;
 }
 .e-query-builder .e-rule-container {
-  background-color: #000;
+  background: #000;
   border-color: #969696;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
   border-top-color: #ccc;
 }
 .e-query-builder .e-rule-list .e-group-container {
-  background-color: #000;
+  background: #000;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
   border-color: #ccc;
@@ -773,27 +773,27 @@
   border-left-color: #ffd939;
 }
 .e-query-builder .e-removerule.e-btn.e-round {
-  background-color: #000;
+  background: #000;
 }
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {
-  background-color: #000;
+  background: #000;
   color: #fff;
 }
 .e-query-builder .e-collapse-rule {
-  background-color: #000;
+  background: #000;
   border-color: #969696;
   color: #fff;
 }
 .e-query-builder .e-collapse-rule:focus, .e-query-builder .e-collapse-rule:active, .e-query-builder .e-collapse-rule:hover {
-  background-color: #969696;
+  background: #969696;
 }
 
 .e-tooltip-wrap.e-querybuilder-error,
 .e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
-  background-color: #b30900;
+  background: #b30900;
   border-color: #b30900;
 }
 

package/styles/material-dark.css

@@ -359,7 +359,7 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-style: dotted;
-  border-top-width: 2px;
+  border-top-width: 1px;
   margin-top: 0;
 }
 .e-query-builder .e-group-body .e-rule-container.e-separate-rule {
@@ -652,7 +652,7 @@
 }
 
 .e-query-builder {
-  background-color: #303030;
+  background: #303030;
   border-color: #616161;
 }
 .e-query-builder .e-group-header .e-btn-group {
@@ -662,14 +662,14 @@
   border-color: #616161;
 }
 .e-query-builder .e-rule-container {
-  background-color: #424242;
+  background: #424242;
   border-color: #616161;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
   border-top-color: #616161;
 }
 .e-query-builder .e-rule-list .e-group-container {
-  background-color: #303030;
+  background: #303030;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
   border-color: #616161;
@@ -680,27 +680,27 @@
   color: #000;
 }
 .e-query-builder .e-removerule.e-btn.e-round {
-  background-color: #424242;
+  background: #424242;
 }
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {
-  background-color: #303030;
+  background: #303030;
   color: #fff;
 }
 .e-query-builder .e-collapse-rule {
-  background-color: #303030;
+  background: #303030;
   border-color: rgba(0, 0, 0, 0.12);
   color: #fff;
 }
 .e-query-builder .e-collapse-rule:focus, .e-query-builder .e-collapse-rule:active, .e-query-builder .e-collapse-rule:hover {
-  background-color: #616161;
+  background: #616161;
 }
 
 .e-tooltip-wrap.e-querybuilder-error,
 .e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
-  background-color: #fcdbe4;
+  background: #fcdbe4;
   border-color: #fcdbe4;
 }
 

package/styles/material.css

@@ -384,7 +384,7 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-style: dotted;
-  border-top-width: 2px;
+  border-top-width: 1px;
   margin-top: 0;
 }
 .e-query-builder .e-group-body .e-rule-container.e-separate-rule {
@@ -677,7 +677,7 @@
 }
 
 .e-query-builder {
-  background-color: #fff;
+  background: #fff;
   border-color: #e0e0e0;
 }
 .e-query-builder .e-group-header .e-btn-group {
@@ -687,14 +687,14 @@
   border-color: #d3d3d3;
 }
 .e-query-builder .e-rule-container {
-  background-color: #fff;
+  background: #fff;
   border-color: #d3d3d3;
 }
 .e-query-builder .e-rule-container.e-joined-rule {
   border-top-color: #e0e0e0;
 }
 .e-query-builder .e-rule-list .e-group-container {
-  background-color: #fff;
+  background: #fff;
 }
 .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
   border-color: #e0e0e0;
@@ -705,27 +705,27 @@
   color: #fff;
 }
 .e-query-builder .e-removerule.e-btn.e-round {
-  background-color: #fff;
+  background: #fff;
 }
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {
   display: none;
 }
 .e-query-builder .e-summary-content textarea {
-  background-color: #fff;
+  background: #fff;
   color: rgba(0, 0, 0, 0.87);
 }
 .e-query-builder .e-collapse-rule {
-  background-color: #fff;
+  background: #fff;
   border-color: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
 }
 .e-query-builder .e-collapse-rule:focus, .e-query-builder .e-collapse-rule:active, .e-query-builder .e-collapse-rule:hover {
-  background-color: #e0e0e0;
+  background: #e0e0e0;
 }
 
 .e-tooltip-wrap.e-querybuilder-error,
 .e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
-  background-color: #fcdbe4;
+  background: #fcdbe4;
   border-color: #fcdbe4;
 }
 

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

@@ -78,14 +78,14 @@ $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-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: 14px !default;
-$qrybldr-bigger-smrytxt-font-size: 16px !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;

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

@@ -78,14 +78,14 @@ $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-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: 14px !default;
-$qrybldr-bigger-smrytxt-font-size: 16px !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;

package/styles/query-builder/_layout.scss

@@ -311,8 +311,13 @@
         &.e-joined-rule {
           border-top-left-radius: 0;
           border-top-right-radius: 0;
-          border-top-style: $qrybldr-rule-list-border-style;
-          border-top-width: 2px;
+          @if $skin-name == 'Material3' {
+            border-top-style: $qrybldr-joined-rule-border-style;
+          }
+          @else {
+            border-top-style: $qrybldr-rule-list-border-style;
+          }
+          border-top-width: 1px;
           margin-top: 0;
         }
 
@@ -457,7 +462,12 @@
     }
 
     & .e-collapse-rule {
-      border: $qrybldr-brdr;
+      @if $skin-name == 'Material3' {
+        border: $qrybldr-collapse-brdr;
+      }
+      @else {
+        border: $qrybldr-brdr;
+      }
       border-right: 0;
       border-top: 0;
       box-shadow: $qrybldr-collapse-box-shadow;

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

@@ -78,14 +78,14 @@ $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-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: 14px !default;
-$qrybldr-bigger-smrytxt-font-size: 16px !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;

package/styles/query-builder/_theme.scss

@@ -1,6 +1,6 @@
 @include export-module('querybuilder-theme') {
   .e-query-builder {
-    background-color: $qrybldr-bg-color;
+    background: $qrybldr-bg-color;
     border-color: $qrybldr-brdr-color;
 
     & .e-group-header .e-btn-group {
@@ -10,12 +10,12 @@
     & .e-group-header .e-dropdown-btn.e-add-btn,
     .e-deletegroup {
       @if $skin-name == 'bootstrap5' {
-        background-color: $qrybldr-btngroup-bgcolor;
+        background: $qrybldr-btngroup-bgcolor;
         box-shadow: none;
         color: $qrybldr-icon-color;
       }
       @else if $skin-name == 'FluentUI' {
-        background-color: $qrybldr-btngroup-bgcolor;
+        background: $qrybldr-btngroup-bgcolor;
         border: 0 solid $qrybldr-btngroup-bgcolor;
       }
     }
@@ -59,7 +59,7 @@
     }
 
     & .e-rule-container {
-      background-color: $groupfill-bgcolor;
+      background: $groupfill-bgcolor;
       border-color: $groupborder-color;
     }
 
@@ -68,7 +68,7 @@
     }
 
     & .e-rule-list .e-group-container {
-      background-color: $qrybldr-bg-color;
+      background: $qrybldr-bg-color;
     }
 
     & .e-rule-list > ::after,
@@ -115,7 +115,7 @@
         border-left: 1px solid;
       }
       @else if $skin-name == 'FluentUI' {
-        background-color: $qrybldr-btngroup-bgcolor;
+        background: $qrybldr-btngroup-bgcolor;
         border: 0 solid $qrybldr-btngroup-bgcolor;
       }
     }
@@ -127,16 +127,16 @@
     }
 
     & .e-removerule.e-btn.e-round {
-      background-color: $groupfill-color;
+      background: $groupfill-color;
       @if $skin-name == 'bootstrap4' {
-        background-color: $qrybldr-btngroup-bgcolor;
+        background: $qrybldr-btngroup-bgcolor;
       }
       @else if $skin-name == 'bootstrap5' {
-        background-color: $qrybldr-btngroup-bgcolor;
+        background: $qrybldr-btngroup-bgcolor;
         color: $qrybldr-icon-color;
       }
       @else if $skin-name == 'FluentUI' {
-        background-color: $qrybldr-btngroup-bgcolor;
+        background: $qrybldr-btngroup-bgcolor;
         border: 0 solid $qrybldr-btngroup-bgcolor;
       }
 
@@ -146,19 +146,19 @@
     }
 
     & .e-summary-content textarea {
-      background-color: $qrybldr-bg-color;
+      background: $qrybldr-bg-color;
       color: $qrybldr-color;
     }
 
     & .e-collapse-rule {
-      background-color: $qrybldr-bg-color;
+      background: $qrybldr-bg-color;
       border-color: $qrybldr-collapse-brdr-color;
       color: $qrybldr-color;
 
       &:focus,
       &:active,
       &:hover {
-        background-color: $qrybldr-brdr-color;
+        background: $qrybldr-brdr-color;
       }
     }
   }
@@ -166,7 +166,7 @@
 
 .e-tooltip-wrap.e-querybuilder-error,
 .e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
-  background-color: $qrybldr-val-error-bg-color;
+  background: $qrybldr-val-error-bg-color;
   border-color: $qrybldr-val-error-bg-color;
 }