@syncfusion/ej2-querybuilder 21.2.3 → 22.1.34

package/styles/material3.scss

@@ -0,0 +1,3 @@
+
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'query-builder/material3.scss';

package/styles/query-builder/_layout.scss

@@ -14,8 +14,15 @@
 
       & .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small {
         &.e-not {
-          border-bottom-right-radius: 0;
-          border-top-right-radius: 0;
+          @if $skin-name == 'Material3' {
+            border: 1px solid $secondary-outline-border;
+            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
+            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          }
+          @else {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
         }
 
         &.e-readonly-and {
@@ -37,8 +44,15 @@
       }
 
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
+        @if $skin-name == 'Material3' {
+          border: 1px solid $secondary-outline-border;
+          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+        }
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
         border-top-right-radius: $qrybldr-btngrp-brdr-radius;
 
         &.e-not-readonly {
@@ -180,13 +194,29 @@
       }
 
       & .e-qb-toggle.e-btn.e-small {
-        border-bottom-right-radius: 0;
-        border-radius: $qrybldr-btngrp-brdr-radius;
-        border-top-right-radius: 0;
-
-        &.e-not-readonly {
+        @if $skin-name == 'Material3' {
+          border: 1px solid $secondary-outline-border;
+          border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-top-right-radius: $qrybldr-btngrp-brdr-radius;
+        }
+        @else {
           border-bottom-right-radius: 0;
+          border-radius: $qrybldr-btngrp-brdr-radius;
           border-top-right-radius: 0;
+        }
+
+        &.e-not-readonly {
+          @if $skin-name == 'Material3' {
+            border: 1px solid $secondary-outline-border;
+            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
+            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          }
+          @else {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
           pointer-events: none;
         }
 
@@ -201,8 +231,17 @@
         display: $qrybldr-btngroup-display;
       }
 
+      & .e-btn.e-btngroup-and-lbl.e-small {
+        @if $skin-name == 'Material3' {
+          border: 1px solid $secondary-outline-border;
+        }
+      }
+
       & .e-btn.e-btngroup-and-lbl.e-small {
         &.e-not {
+          @if $skin-name == 'Material3' {
+            border: 1px solid $secondary-outline-border;
+          }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
         }
@@ -218,6 +257,11 @@
       }
 
       & .e-btn.e-btngroup-or-lbl.e-small {
+        @if $skin-name == 'Material3' {
+          border: 1px solid $secondary-outline-border;
+          border-bottom-right-radius: 20px;
+          border-top-right-radius: 20px;
+        }
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
 
@@ -227,8 +271,15 @@
         }
 
         &.e-readonly-or {
-          border-bottom-left-radius: 0;
-          border-top-left-radius: 0;
+          @if $skin-name == 'Material3' {
+            border: 1px solid $secondary-outline-border;
+            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
+            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          }
+          @else {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
         }
 
         &.e-readonly {
@@ -244,6 +295,9 @@
       & .e-dropdown-btn.e-add-btn,
       .e-deletegroup {
         margin-bottom: $qrybldr-add-mrgn-btm;
+        @if $skin-name == 'Material3' {
+          box-shadow: none;
+        }
 
         &.e-readonly {
           display: none;
@@ -396,7 +450,9 @@
 
       & .e-rule-container.e-vertical-mode .e-rule-delete {
         margin-bottom: $grpcon-padding;
-        padding-right: $device-rulecon-right-padding;
+        @if $skin-name != 'Material3' {
+          padding-right: $device-rulecon-right-padding;
+        }
         right: 0;
       }
 
@@ -596,7 +652,9 @@
       & .e-rule-delete,
       & .e-rule-container.e-vertical-mode .e-rule-delete {
         margin-bottom: $device-rulecon-padding;
-        padding-right: $device-rulecon-right-padding;
+        @if $skin-name != 'Material3' {
+          padding-right: $device-rulecon-right-padding;
+        }
         right: 0;
       }
 

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

@@ -0,0 +1 @@
+@import './material3-definition.scss';

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

@@ -0,0 +1,110 @@
+//layout variables
+$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: 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: 20px !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;

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

@@ -0,0 +1 @@
+@import './material3.scss';