fix(query-builder): fix jumping and indigo border-radius for legend i…

…tems
IgniteUI · Oct 4, 2024 · 5e52300 · 5e52300
1 parent 9e69a73
commit 5e52300
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/...s/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/...s/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
@@ -322,7 +322,10 @@
     %filter-tree__expression-actions {
         display: inline-flex;
         gap: $gap;
-        box-sizing: border-box;
+
+        span {
+            display: inline-flex;
+        }
 
         igx-icon {
             cursor: pointer;
@@ -396,8 +399,8 @@
             width: rem(24px);
             height: rem(24px);
             background: white;
-            border-radius: $border-radius;
             margin-inline-end: rem(8px);
+            border-radius: if($variant != 'indigo', $border-radius, #{rem(4px)});
         }
 
         + %filter-legend__item {

diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html
@@ -152,7 +152,7 @@ <h6 class="igx-filter-empty__title">
                     (click)="enterExpressionEdit(expressionItem)">
                     <igx-icon
                         family="default"
-                        name="edit"                        
+                        name="edit"
                     >
                     </igx-icon>
                 </span>
@@ -161,7 +161,7 @@ <h6 class="igx-filter-empty__title">
                     (click)="enterExpressionAdd(expressionItem)">
                     <igx-icon
                         family="default"
-                        name="add"                        
+                        name="add"
                         *ngIf="
                             !expressionItem.inAddMode &&
                             (expressionItem.parent !== currentGroup ||
@@ -177,8 +177,8 @@ <h6 class="igx-filter-empty__title">
             <div igxButton class="igx-filter-tree__details-button" *ngIf="!expressionItem.inEditMode && expressionItem.expression.searchTree"
                 (click)="expanderClick($event, expressionItem)">
                 <span>{{this.resourceStrings.igx_query_builder_details}}</span>
-                <igx-icon *ngIf="!expressionItem.expanded" family="default" name="unfold_less" role="button"></igx-icon>
-                <igx-icon *ngIf="expressionItem.expanded" family="default" name="unfold_more" role="button"></igx-icon>
+                <igx-icon *ngIf="expressionItem.expanded" family="default" name="unfold_less" role="button"></igx-icon>
+                <igx-icon *ngIf="!expressionItem.expanded" family="default" name="unfold_more" role="button"></igx-icon>
             </div>
 
         </div>

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -1,10 +1,10 @@
 @use 'sass:map';
 @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *;
 
-$palette: $light-material-palette;
-$schema: $light-material-schema;
-$typeface: $material-typeface;
-$type-scale: $material-type-scale;
+$palette: $light-indigo-palette;
+$schema: $light-indigo-schema;
+$typeface: $indigo-typeface;
+$type-scale: $indigo-type-scale;
 $variant: map.get($schema, '_meta', 'variant');
 
 $background-color: var(--ig-gray-900-contrast);