npm - @syncfusion/blazor-themes - Versions diffs - 22.1.34 → 22.1.37 - Mend

@syncfusion/blazor-themes 22.1.34 → 22.1.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap4.scss CHANGED Viewed

@@ -58,7 +58,7 @@ $field-list-toggle-border-color: #ccc !default;
 $field-list-border-type: solid !default;
 $field-list-border-size: 1px !default;
 $field-list-table-background-color: $white !default;
-$field-list-default-bg-color: #fff !default;
+$field-list-default-bg-color: $white !default;
 $field-list-default-padding-size: 8px !default;
 $field-list-title-padding-size: 20px !default;
 $field-list-title-font-size: 18px !default;
@@ -145,7 +145,7 @@ $field-list-sort-select-background-color: darken($gray-600, 10%) !default;
 $field-list-sort-select-border-color: darken($gray-600, 12.5%) !default;
 $field-list-sort-select-color: $white !default;
 $field-list-border: $field-list-default-border-color !default;
-$field-list-cal-button-text-color: #f8f9fa !default;
+$field-list-cal-button-text-color: $gray-100 !default;
 $field-list-calc-expand-icon-padding: 8px !default;
 $field-list-search-padding-size: 10px $field-list-title-padding-size !default;
 $field-list-member-prompt-padding-size: 25px 12px !default;

package/SCSS-Themes/pivotview/pivotfieldlist/fabric.scss CHANGED Viewed

@@ -66,7 +66,7 @@ $field-list-title-line-height: 0 !default;
 $field-list-content-font-size: $font-size !default;
 $field-list-button-font-weight: 500 !default;
 $field-list-font-family: $font-family !default;
-$field-list-toggle-bg-color: #f8f8f8 !default;
+$field-list-toggle-bg-color: $neutral-lighter-alt !default;
 $field-list-header-background-color: $neutral-light !default;
 $field-list-axis-header-color: $field-list-header-background-color !default;
 $field-list-default-fill-color: $neutral-white !default;
@@ -130,7 +130,7 @@ $field-list-button-active-color: $content-font-color !default;
 $field-list-default-header-icon-font-color: $neutral-secondary !default;
 $field-list-button-icon-color: $neutral-secondary !default;
 $field-list-icon-hover-color: $neutral-secondary !default;
-$error-font-color: #a80000 !default;
+$error-font-color: $error-font !default;
 $field-list-excel-member-filter-height: 120px !default;
 $field-list-excel-member-filter-node-limit-height: 115px !default;
 $field-list-excel-filter-height: 215px !default;

package/SCSS-Themes/pivotview/pivotfieldlist/highcontrast.scss CHANGED Viewed

@@ -78,7 +78,7 @@ $field-list-toggle-bg-color: $bg-base-0 !default;
 $field-list-toggle-font-color: $content-font !default;
 $field-list-button-font-color: $content-font !default;
 $field-list-button-border-color: $field-list-default-border-color !default;
-$field-list-button-back-color: #000 !default;
+$field-list-button-back-color: $invert-font !default;
 $field-list-drag-clone-text-color: $selection-font !default;
 $field-list-drag-clone-bg-color: $selection-bg !default;
 $field-list-drag-clone-border-radius: 0 !default;
@@ -118,7 +118,7 @@ $field-list-button-hover-color: $hover-bg !default;
 $field-list-button-focus-color: $selection-bg !default;
 $field-list-button-active-color: $selection-font !default;
 $field-list-drag-icon-color: $bg-base-100 !default;
-$error-font-color: #ff6161 !default;
+$error-font-color: $error-alt !default;
 $field-list-excel-member-filter-height: 118px !default;
 $field-list-excel-member-filter-node-limit-height: 115px !default;
 $field-list-excel-filter-height: 212px !default;

package/SCSS-Themes/pivotview/pivotfieldlist/material-dark.scss CHANGED Viewed

@@ -58,7 +58,7 @@ $field-list-toggle-border-color: rgba($grey-black, .12) !default;
 $field-list-border-type: $border-type !default;
 $field-list-border-size: $border-size !default;
 $field-list-table-background-color: rgba($grey-black, .42) !default;
-$field-list-default-bg-color: #424242 !default;
+$field-list-default-bg-color: $grey-800 !default;
 $field-list-default-padding-size: 8px !default;
 $field-list-title-padding-size: 20px !default;
 $field-list-title-font-size: 18px !default;
@@ -68,7 +68,7 @@ $field-list-button-font-weight: 500 !default;
 $field-list-font-family: $font-family !default;
 $field-list-header-background-color: $grey-900 !default;
 $field-list-axis-header-color: $field-list-header-background-color !default;
-$field-list-toggle-bg-color: #424242 !default;
+$field-list-toggle-bg-color: $grey-800 !default;
 $field-list-default-fill-color: $grey-white !default;
 $field-list-default-border-radius: 4px !default;
 $field-list-drop-hover-color: $grey-600 !default;
@@ -212,7 +212,7 @@ $field-list-header-padding-size: 14px !default;
 $field-list-axis-header-padding-size: 5px !default;
 $field-list-selected-color: rgba($header-bg-color, .87) !default;
 $field-list-button-color: $grey-700 !default;
-$field-list-button-back-color: #f5f5f5 !default;
+$field-list-button-back-color: $grey-100 !default;
 $field-list-header-text-transform: none !default;
 $field-list-icon-size: 14px !default;
 $field-list-toggle-icon-size: 17px !default;

package/SCSS-Themes/pivotview/pivotfieldlist/material.scss CHANGED Viewed

@@ -68,10 +68,10 @@ $field-list-button-font-weight: 500 !default;
 $field-list-font-family: $font-family !default;
 $field-list-header-background-color: $grey-100 !default;
 $field-list-axis-header-color: $field-list-header-background-color !default;
-$field-list-toggle-bg-color: #fafafa !default;
+$field-list-toggle-bg-color: $grey-50 !default;
 $field-list-default-fill-color: $grey-white !default;
 $field-list-default-border-radius: 4px !default;
-$field-list-drop-hover-color: #9e9e9e !default;
+$field-list-drop-hover-color: $grey-500 !default;
 $field-list-button-font-color: $grey-light-font !default;
 $field-list-button-border-color: rgba($grey-light-font, .12) !default;
 $field-list-button-hover-color: $grey-200 !default;
@@ -131,7 +131,7 @@ $field-list-static-bigger-header-icon-wrapper-padding: 7px !default;
 $field-list-toggle-font-color: rgba($grey-light-font, .54) !default;
 $pivot-calculated-icon-opacity: .87 !default;
 $field-list-bigger-button-line-height: 1.1em !default;
-$error-font-color: #f44336 !default;
+$error-font-color: $error-font !default;
 $field-list-excel-member-filter-height: 150px !default;
 $field-list-excel-member-filter-node-limit-height: 145px !default;
 $field-list-excel-filter-height: 248px !default;
@@ -212,7 +212,7 @@ $field-list-header-padding-size: 14px !default;
 $field-list-axis-header-padding-size: 5px !default;
 $field-list-selected-color: rgba($header-bg-color, .87) !default;
 $field-list-button-color: $grey-50 !default;
-$field-list-button-back-color: #f5f5f5 !default;
+$field-list-button-back-color: $grey-100 !default;
 $field-list-header-text-transform: none !default;
 $field-list-icon-size: 14px !default;
 $field-list-toggle-icon-size: 17px !default;

package/SCSS-Themes/pivotview/pivotview/bootstrap.scss CHANGED Viewed

@@ -100,7 +100,7 @@ $pivotgrid-vsort-column-parent-margin: -11px 0 !default;
 $pivotgrid-vsort-row-margin: -20px 0 !default;
 $pivotgrid-vsort-row-parent-margin: -12px 0 !default;
 $pivotgrid-tooltip-padding: 3px 2px !default;
-$pivotgrid-tooltip-fontcolor: #fff !default;
+$pivotgrid-tooltip-fontcolor: $grey-light-font !default;
 $pivotgrid-tooltip-fontsize: 14px !default;
 $pivotgrid-tooltip-fontfamily: Helvetica !default;
 $pivotgrid-member-filter-list-bigger-height: 121px !default;

package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss CHANGED Viewed

@@ -100,7 +100,7 @@ $pivotgrid-vsort-column-parent-margin: -11px 0 !default;
 $pivotgrid-vsort-row-margin: -20px 0 !default;
 $pivotgrid-vsort-row-parent-margin: -12px 0 !default;
 $pivotgrid-tooltip-padding: 3px 2px !default;
-$pivotgrid-tooltip-fontcolor: #fff !default;
+$pivotgrid-tooltip-fontcolor: $white !default;
 $pivotgrid-tooltip-fontsize: 14px !default;
 $pivotgrid-tooltip-fontfamily: Helvetica !default;
 $pivotgrid-member-filter-list-bigger-height: 128px !default;

package/SCSS-Themes/pivotview/pivotview/fabric.scss CHANGED Viewed

@@ -99,7 +99,7 @@ $pivotgrid-vsort-column-parent-margin: 2px 0 !default;
 $pivotgrid-vsort-row-margin: -5px 0 !default;
 $pivotgrid-vsort-row-parent-margin: 2px 0 !default;
 $pivotgrid-tooltip-padding: 3px 3px !default;
-$pivotgrid-tooltip-fontcolor: #333 !default;
+$pivotgrid-tooltip-fontcolor: $neutral-primary !default;
 $pivotgrid-tooltip-fontsize: 13px !default;
 $pivotgrid-tooltip-fontfamily: Segoe UI !default;
 $pivotgrid-member-filter-list-bigger-height: 107px !default;

package/SCSS-Themes/pivotview/pivotview/material-dark.scss CHANGED Viewed

@@ -85,7 +85,7 @@ $pivotgrid-default-border-radius: 4px !default;
 $pivotgrid-button-icon-size: 12px !default;
 $pivotgrid-bigger-button-icon-size: 14px !default;
 $pivotgrid-button-border-radius: 25px !default;
-$pivotgrid-button-background-color: #424242 !default;
+$pivotgrid-button-background-color: $grey-800 !default;
 $pivotgrid-editor-dialog-footer-padding: 10px !default;
 $pivotgrid-button-drag-color: $accent !default;
 $pivotgrid-expand-icon-fontsize: 10px !default;
@@ -207,8 +207,8 @@ $pivotpager-single-title-font-size: 14px !default;
 $pivotpager-touch-single-title-font-size: 16px !default;
 $pivotpager-single-title-line-height: 2.4em !default;
 $pivotpager-touch-single-title-line-height: 2.8em !default;
-$pivotpager-axis-title-font-color: #9e9e9e !default;
-$pivotpager-size-title-font-color: #424242 !default;
+$pivotpager-axis-title-font-color: $grey-500 !default;
+$pivotpager-size-title-font-color: $grey-800 !default;
 $pivotpager-string-font-touch-size: 14px !default;
 $pivotpager-pager-number-font-weight: 400 !default;
 $pivotpager-v-separator-margin: 8px 16px !default;

package/SCSS-Themes/pivotview/pivotview/material.scss CHANGED Viewed

@@ -66,7 +66,7 @@ $pivotgrid-grp-bg-color: $grey-100 !default;
 $pivotgrid-grp-bg-hover-color: rgba(0, 0, 0, .12) !default;
 $pivotgrid-cell-hover-color: rgba(0, 0, 0, 0) !default;
 $pivotgrid-drag-clone-color: $grey-200 !default;
-$pivotgrid-drop-hover-color: #9e9e9e !default;
+$pivotgrid-drop-hover-color: $grey-500 !default;
 $pivotview-grid-content-opacity: .87 !default;
 $pivotview-grid-header-font-size: 13px !default;
 $pivotview-bigger-grid-header-font-size: 13px !default;
@@ -95,7 +95,7 @@ $pivotgrid-bigger-drill-margintop: $pivotgrid-drill-margintop !default;
 $pivotgrid-rtl-expand-icon-font-size: 10px !default;
 $pivotgrid-collapse-icon-fonsize: 10px !default;
 $pivotgrid-hover-color: $grey-400 !default;
-$pivotgrid-focus-color: #9e9e9e !default;
+$pivotgrid-focus-color: $grey-500 !default;
 $pivotgrid-button-icon-color: rgba($grey-black, .54) !default;
 $pivotgrid-button-active-icon-color: $pivotgrid-button-icon-color !default;
 $pivotgrid-icon-hover-color: rgba($grey-black, .87) !default;
@@ -105,7 +105,7 @@ $pivotgrid-vsort-column-parent-margin: 0 !default;
 $pivotgrid-vsort-row-margin: -8px 0 !default;
 $pivotgrid-vsort-row-parent-margin: 0 !default;
 $pivotgrid-tooltip-padding: 3px 4px !default;
-$pivotgrid-tooltip-fontcolor: #fff !default;
+$pivotgrid-tooltip-fontcolor: $accent-font !default;
 $pivotgrid-tooltip-fontsize: 14px !default;
 $pivotgrid-tooltip-fontfamily: Roboto !default;
 $pivotgrid-member-filter-list-height: 150px !default;
@@ -203,8 +203,8 @@ $pivotpager-single-title-font-size: 14px !default;
 $pivotpager-touch-single-title-font-size: 16px !default;
 $pivotpager-single-title-line-height: 2.4em !default;
 $pivotpager-touch-single-title-line-height: 2.8em !default;
-$pivotpager-axis-title-font-color: #9e9e9e !default;
-$pivotpager-size-title-font-color: #424242 !default;
+$pivotpager-axis-title-font-color: $grey-500 !default;
+$pivotpager-size-title-font-color: $grey-800 !default;
 $pivotpager-string-font-touch-size: 14px !default;
 $pivotpager-pager-number-font-weight: 400 !default;
 $pivotpager-v-separator-margin: 8px 16px !default;

package/SCSS-Themes/querybuilder/query-builder/bootstrap-dark.scss CHANGED Viewed

@@ -138,8 +138,6 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         &.e-not {
           @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;
@@ -168,14 +166,16 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @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;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -319,8 +319,8 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         @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-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -363,6 +363,8 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -381,11 +383,11 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
       & .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;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;

package/SCSS-Themes/querybuilder/query-builder/bootstrap.scss CHANGED Viewed

@@ -138,8 +138,6 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         &.e-not {
           @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;
@@ -168,14 +166,16 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @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;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -319,8 +319,8 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         @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-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -363,6 +363,8 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -381,11 +383,11 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
       & .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;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;

package/SCSS-Themes/querybuilder/query-builder/bootstrap4.scss CHANGED Viewed

@@ -140,8 +140,6 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         &.e-not {
           @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;
@@ -170,14 +168,16 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @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;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -321,8 +321,8 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         @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-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -365,6 +365,8 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -383,11 +385,11 @@ $qrybldr-btngrp-brdr-radius: 4px !default;
       & .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;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;

package/SCSS-Themes/querybuilder/query-builder/bootstrap5-dark.scss CHANGED Viewed

@@ -142,8 +142,6 @@ $qrybldr-icon-color: $icon-color !default;
         &.e-not {
           @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;
@@ -172,14 +170,16 @@ $qrybldr-icon-color: $icon-color !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @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;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -323,8 +323,8 @@ $qrybldr-icon-color: $icon-color !default;
         @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-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -367,6 +367,8 @@ $qrybldr-icon-color: $icon-color !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -385,11 +387,11 @@ $qrybldr-icon-color: $icon-color !default;
       & .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;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;

package/SCSS-Themes/querybuilder/query-builder/bootstrap5.scss CHANGED Viewed

@@ -142,8 +142,6 @@ $qrybldr-icon-color: $icon-color !default;
         &.e-not {
           @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;
@@ -172,14 +170,16 @@ $qrybldr-icon-color: $icon-color !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @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;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -323,8 +323,8 @@ $qrybldr-icon-color: $icon-color !default;
         @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-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -367,6 +367,8 @@ $qrybldr-icon-color: $icon-color !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -385,11 +387,11 @@ $qrybldr-icon-color: $icon-color !default;
       & .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;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;

package/SCSS-Themes/querybuilder/query-builder/fabric-dark.scss CHANGED Viewed

@@ -138,8 +138,6 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         &.e-not {
           @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;
@@ -168,14 +166,16 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @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;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -319,8 +319,8 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         @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-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -363,6 +363,8 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -381,11 +383,11 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
       & .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;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;

package/SCSS-Themes/querybuilder/query-builder/fabric.scss CHANGED Viewed

@@ -138,8 +138,6 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         &.e-not {
           @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;
@@ -168,14 +166,16 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @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;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -319,8 +319,8 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         @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-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -363,6 +363,8 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -381,11 +383,11 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
       & .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;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;