Skip to content

Commit 5cbdf3a

Browse files
desig9steindesig9stein
committed
fix(query-builder): Fix for comments
- fix typography - make sure that creating a global button theme will not override the and and or buttons
1 parent 0307dfd commit 5cbdf3a

File tree

6 files changed

+132
-90
lines changed

6 files changed

+132
-90
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@
110110
@include e(expression-item-ghost) {
111111
@extend %filter-tree__expression-item-ghost !optional;
112112
}
113+
114+
@include e(expression-item-drop-ghost) {
115+
@extend %filter-tree__expression-drop-item-ghost !optional;
116+
}
113117

114118
@include e(expression-column) {
115119
@extend %filter-tree__expression-column !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss‎

Lines changed: 116 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -225,27 +225,7 @@
225225
padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
226226
padding-block: if($variant != 'bootstrap', rem(24px), rem(16px)) rem(16px);
227227
}
228-
229-
%advanced-filter__title {
230-
@if $variant == 'material' {
231-
@include type-style('h6');
232-
}
233-
234-
@if $variant == 'fluent' {
235-
@include type-style('h6');
236-
}
237-
238-
@if $variant == 'indigo' {
239-
@include type-style('h5');
240-
}
241-
242-
@if $variant == 'bootstrap' {
243-
@include type-style('h5');
244-
}
245-
246-
margin: 0;
247-
}
248-
228+
249229
%advanced-filter__main {
250230
display: grid;
251231
gap: rem(16px);
@@ -326,75 +306,105 @@
326306
%filter-tree__line--or {
327307
background: var-get($theme, 'color-expression-group-or');
328308
}
329-
330-
%filter-tree__button--and {
331-
@if $variant == 'material' {
332-
--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover});
333-
--focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
334-
--focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
335-
--active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
336-
--hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
337-
--background: transparent;
338-
}
339-
340-
@if $variant == 'bootstrap' {
341-
--shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5);
342-
}
343-
344-
--foreground: #{var-get($theme, 'color-expression-group-and')};
345-
--focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')};
346-
--icon-color: #{var-get($theme, 'color-expression-group-and')};
347-
348-
@if $variant != 'bootstrap' {
349-
--focus-foreground: #{var-get($theme, 'color-expression-group-and')};
350-
--hover-foreground: #{var-get($theme, 'color-expression-group-and')};
351-
--icon-color-hover: #{var-get($theme, 'color-expression-group-and')};
352-
--focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')};
353-
--active-foreground: #{var-get($theme, 'color-expression-group-and')};
354-
} @else {
355-
$bootstrap-foreground-lightness: if($theme-variant == 'light', 34%, 78% );
356-
357-
--icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
358-
--focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
359-
--hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
360-
--focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
361-
--active-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
362-
}
363-
}
364-
365-
%filter-tree__button--or {
366-
@if $variant == 'material' {
367-
--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover});
368-
--focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
369-
--focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
370-
--active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
371-
--hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
372-
--background: transparent;
373-
}
374-
375-
@if $variant == 'bootstrap' {
376-
--shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5);
377-
}
378-
379-
--foreground: #{var-get($theme, 'color-expression-group-or')};
380-
--focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')};
381-
--icon-color: #{var-get($theme, 'color-expression-group-or')};
382-
383-
@if $variant != 'bootstrap' {
384-
--focus-foreground: #{var-get($theme, 'color-expression-group-or')};
385-
--hover-foreground: #{var-get($theme, 'color-expression-group-or')};
386-
--icon-color-hover: #{var-get($theme, 'color-expression-group-or')};
387-
--focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')};
388-
--active-foreground: #{var-get($theme, 'color-expression-group-or')};
389-
} @else {
390-
$bootstrap-foreground-lightness: if($theme-variant == 'light', 14%, 47%);
391-
392-
--icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
393-
--focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
394-
--hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
395-
--focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
396-
--active-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
397-
}
309+
310+
%filter-tree__button--and {
311+
&[igxButton='flat'] {
312+
@if $variant == 'material' or $variant == 'indigo' {
313+
--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover});
314+
--focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
315+
--focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
316+
--active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
317+
--hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
318+
--background: transparent;
319+
}
320+
321+
@if $variant == 'fluent' {
322+
--background: transparent;
323+
--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
324+
--focus-visible-background: transparent;
325+
--focus-background: transparent;
326+
--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
327+
--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
328+
}
329+
330+
--foreground: #{var-get($theme, 'color-expression-group-and')};
331+
--focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')};
332+
--icon-color: #{var-get($theme, 'color-expression-group-and')};
333+
334+
@if $variant != 'bootstrap' {
335+
--focus-foreground: #{var-get($theme, 'color-expression-group-and')};
336+
--hover-foreground: #{var-get($theme, 'color-expression-group-and')};
337+
--icon-color-hover: #{var-get($theme, 'color-expression-group-and')};
338+
--focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')};
339+
--active-foreground: #{var-get($theme, 'color-expression-group-and')};
340+
} @else {
341+
$bootstrap-foreground-lightness: if($theme-variant == 'light', 34%, 78% );
342+
343+
--focus-hover-background: transparent;
344+
--focus-visible-background: transparent;
345+
--focus-background: transparent;
346+
--active-background: transparent;
347+
--hover-background: transparent;
348+
--background: transparent;
349+
--shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5);
350+
351+
--icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
352+
--focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
353+
--hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
354+
--focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
355+
--active-foreground: hsl(from #{var-get($theme, 'color-expression-group-and')} h s #{$bootstrap-foreground-lightness} / 1);
356+
}
357+
}
358+
}
359+
360+
%filter-tree__button--or {
361+
&[igxButton='flat'] {
362+
@if $variant == 'material' or $variant == 'indigo' {
363+
--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover});
364+
--focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
365+
--focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
366+
--active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
367+
--hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
368+
--background: transparent;
369+
}
370+
371+
@if $variant == 'fluent' {
372+
--background: transparent;
373+
--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
374+
--focus-visible-background: transparent;
375+
--focus-background: transparent;
376+
--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
377+
--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
378+
}
379+
380+
--foreground: #{var-get($theme, 'color-expression-group-or')};
381+
--focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')};
382+
--icon-color: #{var-get($theme, 'color-expression-group-or')};
383+
384+
@if $variant != 'bootstrap' {
385+
--focus-foreground: #{var-get($theme, 'color-expression-group-or')};
386+
--hover-foreground: #{var-get($theme, 'color-expression-group-or')};
387+
--icon-color-hover: #{var-get($theme, 'color-expression-group-or')};
388+
--focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')};
389+
--active-foreground: #{var-get($theme, 'color-expression-group-or')};
390+
} @else {
391+
$bootstrap-foreground-lightness: if($theme-variant == 'light', 14%, 47%);
392+
393+
--focus-hover-background: transparent;
394+
--focus-visible-background: transparent;
395+
--focus-background: transparent;
396+
--active-background: transparent;
397+
--hover-background: transparent;
398+
--background: transparent;
399+
--shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5);
400+
401+
--icon-color-hover: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
402+
--focus-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
403+
--hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
404+
--focus-hover-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
405+
--active-foreground: hsl(from #{var-get($theme, 'color-expression-group-or')} h s #{$bootstrap-foreground-lightness} / 1);
406+
}
407+
}
398408
}
399409

400410
%filter-tree__expressions {
@@ -596,3 +606,19 @@
596606
}
597607
}
598608
}
609+
610+
/// Adds typography styles for the igx-query-builder component.
611+
/// Uses the 'h6' category from the typographic scale.
612+
/// @group typography
613+
/// @param {Map} $categories [(title: 'h6')] - The categories from the typographic scale used for type styles.
614+
@mixin query-builder-typography(
615+
$categories: (title: 'h6')
616+
) {
617+
$title: map.get($categories, 'title');
618+
619+
%advanced-filter__title {
620+
@include type-style($title) {
621+
margin: 0;
622+
}
623+
}
624+
}

‎projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@use '../components/tooltip/tooltip-theme' as *;
3333
@use '../components/tree/tree-theme' as *;
3434
@use '../components/label/label-theme' as *;
35+
@use '../components/query-builder/query-builder-theme' as *;
3536

3637
@mixin typography($type-scale) {
3738
@include badge-typography();
@@ -113,4 +114,7 @@
113114
@include label-typography($categories: (
114115
label: 'body-1'
115116
));
117+
@include query-builder-typography($categories: (
118+
title: 'h5'
119+
));
116120
}

‎projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
@use '../components/tooltip/tooltip-theme' as *;
3232
@use '../components/tree/tree-theme' as *;
3333
@use '../components/label/label-theme' as *;
34+
@use '../components/query-builder/query-builder-theme' as *;
3435

3536
@mixin typography() {
3637
@include badge-typography();
@@ -119,4 +120,5 @@
119120
@include label-typography($categories: (
120121
label: 'subtitle-2'
121122
));
123+
@include query-builder-typography();
122124
}

‎projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
@use '../components/tooltip/tooltip-theme' as *;
3232
@use '../components/tree/tree-theme' as *;
3333
@use '../components/label/label-theme' as *;
34+
@use '../components/query-builder/query-builder-theme' as *;
3435

3536
@mixin typography($type-scale) {
3637
@include badge-typography($categories: (
@@ -125,4 +126,7 @@
125126
@include label-typography($categories: (
126127
label: 'caption'
127128
));
129+
@include query-builder-typography($categories: (
130+
title: 'h5'
131+
));
128132
}

‎projects/igniteui-angular/src/lib/core/styles/typography/_material.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
@use '../components/tooltip/tooltip-theme' as *;
3232
@use '../components/tree/tree-theme' as *;
3333
@use '../components/label/label-theme' as *;
34+
@use '../components/query-builder/query-builder-theme' as *;
3435

3536
@mixin typography() {
3637
@include badge-typography();
@@ -66,4 +67,5 @@
6667
@include tooltip-typography();
6768
@include tree-typography();
6869
@include label-typography();
70+
@include query-builder-typography();
6971
}

0 commit comments

Comments
 (0)