Skip to content

Commit 95dd932

Browse files
LipataLipata
authored
Merge pull request #6606 from IgniteUI/igniteui-angular-6589
Fix color issues for advanced filtering in fluent and bootstrap themes
2 parents 9df51fc + e742aaf commit 95dd932

File tree

6 files changed

+147
-51
lines changed

6 files changed

+147
-51
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -785,6 +785,10 @@
785785
&%igx-button--fab,
786786
&%igx-button--icon {
787787
color: --var($theme, 'disabled-color');
788+
789+
igx-icon {
790+
color: inherit;
791+
}
788792
}
789793

790794
&%igx-button--raised,

‎projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,9 @@
105105
@mixin igx-grid-toolbar($theme) {
106106
@include igx-root-css-vars($theme);
107107

108+
$variant: map-get($theme, variant);
109+
$bootstrap-theme: $variant == 'bootstrap';
110+
108111
$left: if-ltr(left, right);
109112
$right: if-ltr(right, left);
110113

@@ -252,6 +255,17 @@
252255

253256
%igx-grid-toolbar__adv-filter--filtered {
254257
border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
258+
259+
@if $bootstrap-theme {
260+
border-width: 2px;
261+
border-color: igx-color(map-get($theme, 'palette'), 'primary', 800) !important;
262+
color: igx-color(map-get($theme, 'palette'), 'primary', 800);
263+
264+
&:hover,
265+
&:focus {
266+
background: igx-color(map-get($theme, 'palette'), 'primary', 800);
267+
}
268+
}
255269
}
256270

257271
%igx-grid-toolbar__dropdown {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-theme.scss‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
/// @requires rem
1212
/// @requires --var
1313
@mixin _advanced-filtering($theme, $palette) {
14+
$variant: map-get($theme, variant);
15+
$not-bootstrap-theme: $variant != 'bootstrap';
16+
$bootstrap-theme: $variant == 'bootstrap';
17+
1418
$vertical-space-comfortable: rem(16px);
1519
$vertical-space-cosy: rem(12px);
1620
$vertical-space-compact: rem(8px);
@@ -82,26 +86,27 @@
8286
}
8387

8488
%filter-tree__line--and {
85-
background-color: igx-color($palette, 'primary', 300);
89+
90+
background: --var($theme, 'filtering-background-and');
8691

8792
&-selected {
88-
background-color: igx-color($palette, 'primary', 700);
93+
background: --var($theme, 'filtering-background-and--focus');
8994
}
9095

9196
&:focus {
92-
box-shadow: inset 0 0 0 2px igx-color($palette, 'primary', 700);
97+
box-shadow: inset 0 0 0 2px --var($theme, 'filtering-background-and--focus');
9398
}
9499
}
95100

96101
%filter-tree__line--or {
97-
background-color: igx-color($palette, 'secondary', 300);
102+
background: --var($theme, 'filtering-background-or');
98103

99104
&-selected {
100-
background-color: igx-color($palette, 'secondary', 700);
105+
background-color: --var($theme, 'filtering-background-or--focus');
101106
}
102107

103108
&:focus {
104-
box-shadow: inset 0 0 0 2px igx-color($palette, 'secondary', 700);
109+
box-shadow: inset 0 0 0 2px --var($theme, 'filtering-background-or--focus');
105110
}
106111
}
107112

@@ -147,7 +152,7 @@
147152
}
148153

149154
%filter-tree__expression-condition {
150-
color: igx-color($palette, 'grays', 500);
155+
opacity: .7;
151156
}
152157

153158
%filter-tree__buttons {
@@ -217,11 +222,11 @@
217222
}
218223

219224
%filter-legend__item--and::before {
220-
background-color: igx-color($palette, 'primary', 300);
225+
background: --var($theme, 'filtering-background-and');
221226
}
222227

223228
%filter-legend__item--or::before {
224-
background-color: igx-color($palette, 'secondary', 300);
229+
background: --var($theme, 'filtering-background-or');
225230
}
226231

227232
%filter-con-menu {
@@ -257,10 +262,19 @@
257262

258263
%filter-con-menu__delete-btn {
259264
color: igx-color($palette, 'error');
265+
@if $bootstrap-theme {
266+
border-color: igx-color($palette, 'error');
267+
}
260268

261269
&:hover,
262270
&:focus {
263-
color: igx-color($palette, 'error');
271+
@if $bootstrap-theme {
272+
background: igx-color($palette, 'error');
273+
border-color: igx-color($palette, 'error');
274+
color: hexrgba(igx-color($palette, 'grays', 100));
275+
} @else {
276+
color: igx-color($palette, 'error');
277+
}
264278
}
265279
}
266280

@@ -273,7 +287,9 @@
273287

274288
&:hover,
275289
&:focus {
276-
background-color: --var($theme, 'filtering-row-background');
290+
@if $not-bootstrap-theme {
291+
background-color: --var($theme, 'filtering-row-background');
292+
}
277293
}
278294
}
279295

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@
8080
/// @param {Color} $drop-area-background [null] - The drop area background color.
8181
/// @param {Color} $drop-area-on-drop-background [null] - The drop area background on drop color.
8282
///
83+
/// @param {Color} $filtering-background-and [null] - The background color of advanced filtering "AND" condition.
84+
/// @param {Color} $filtering-background-and--focus [null] - The background color on focus/selected of advanced filtering "AND" condition.
85+
/// @param {Color} $filtering-background-or [null] - The background color of advanced filtering "OR" condition.
86+
/// @param {Color} $filtering-background-or--focus [null] - The background color on focus/selected of advanced filtering "OR" condition.
87+
///
8388
/// @param {Color} $filtering-header-background [null] - The background color of the filtered column header.
8489
/// @param {Color} $filtering-header-text-color [null] - The text color color of the filtered column header.
8590
/// @param {Color} $filtering-row-background [null] - The background color of the filtering row.
@@ -183,6 +188,10 @@
183188
$filtering-header-text-color: null,
184189
$filtering-row-background: null,
185190
$filtering-row-text-color: null,
191+
$filtering-background-and: null,
192+
$filtering-background-or: null,
193+
$filtering-background-and--focus: null,
194+
$filtering-background-or--focus: null,
186195
$tree-filtered-text-color: null,
187196
188197
$body-summaries-background: null,
@@ -197,7 +206,7 @@
197206
$row-drag-color: null,
198207
$drop-area-border-radius: null,
199208
$grid-border-color: null,
200-
$sortable-header-icon-hover-color: null
209+
$sortable-header-icon-hover-color: null,
201210
) {
202211
$name: 'igx-grid';
203212
$grid-schema: ();
@@ -488,6 +497,10 @@
488497
filtering-header-text-color: $filtering-header-text-color,
489498
filtering-row-background: $filtering-row-background,
490499
filtering-row-text-color: $filtering-row-text-color,
500+
filtering-background-and: $filtering-background-and,
501+
filtering-background-or: $filtering-background-or,
502+
filtering-background-and--focus: $filtering-background-and--focus,
503+
filtering-background-or--focus: $filtering-background-or--focus,
491504

492505
tree-filtered-text-color: $tree-filtered-text-color,
493506
tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color,
@@ -525,6 +538,7 @@
525538

526539
$variant: map-get($theme, variant);
527540
$bootstrap-theme: $variant == 'bootstrap';
541+
$not-bootstrap-theme: $variant != 'bootstrap';
528542

529543
$bootstrap-header-border-bottom-width: --var($theme, 'header-border-width') * 2;
530544
$cbx-size: map-get((

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid-toolbar.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
/// @see $default-palette
2323

2424
$_light-grid-toolbar: (
25+
variant: 'material',
26+
2527
background-color: (
2628
igx-color: ('grays', 50)
2729
),
@@ -63,6 +65,8 @@ $_light-grid-toolbar: (
6365
$_fluent-grid-toolbar: extend(
6466
$_light-grid-toolbar,
6567
(
68+
variant: 'fluent',
69+
6670
background-color: (
6771
igx-color: 'surface'
6872
),
@@ -73,5 +77,10 @@ $_fluent-grid-toolbar: extend(
7377
/// @type {Map}
7478
/// @requires {function} extend
7579
/// @requires {map} $_light-grid-toolbar
76-
$_bootstrap-grid-toolbar: extend($_light-grid-toolbar);
80+
$_bootstrap-grid-toolbar: extend(
81+
$_light-grid-toolbar,
82+
(
83+
variant: 'bootstrap'
84+
)
85+
);
7786

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss‎

Lines changed: 77 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@
6262
/// @prop {Map} tree-filtered-text-color [igx-color: ('grays', 500)] - grouping row background color on focus.
6363
/// @prop {Color} filtering-header-background [#fff] - The background color of the filtered column header.
6464
/// @prop {Map} filtering-header-text-color [igx-color: ('grays', 800)] - The text color color of the filtered column header.
65+
///
66+
/// @prop {Map} $filtering-background-and [igx-color: ('primary', 300)] - The background color of advanced filtering "AND" condition.
67+
/// @prop {Map} $filtering-background-and--focus [igx-color: ('primary', 700)] - The background color on focus/selected of advanced filtering "AND" condition.
68+
/// @prop {Map} $filtering-background-or [igx-color: ('secondary', 300)] - The background color of advanced filtering "OR" condition.
69+
/// @prop {Map} $filtering-background-or--focus [igx-color: ('secondary', 700)] - The background color on focus/selected of advanced filtering "OR" condition.
70+
///
6571
/// @prop {Color} filtering-row-background [#fff] - The background color of the filtering row.
6672
/// @prop {Map} filtering-row-text-color [igx-color: ('grays', 800)] - The text-color color of the filtering row.
6773
/// @prop {Map} body-summaries-background [igx-color: ('grays', 300), hexrgba: #fff] - The background color of the summary groups located the body.
@@ -84,6 +90,22 @@ $_light-grid: extend(
8490
(
8591
variant: 'material',
8692

93+
filtering-background-and: (
94+
igx-color: ('primary', 300)
95+
),
96+
97+
filtering-background-or: (
98+
igx-color: ('secondary', 300)
99+
),
100+
101+
filtering-background-and--focus: (
102+
igx-color: ('primary', 700)
103+
),
104+
105+
filtering-background-or--focus: (
106+
igx-color: ('secondary', 700)
107+
),
108+
87109
grid-border-color: transparent,
88110

89111
header-background: (
@@ -345,6 +367,8 @@ $_light-grid: extend(
345367
/// @prop {number} grid-elevation [0] - The elevation used for the grid.
346368
/// @prop {number} drag-elevation [1] - The elevation used for movable elements (ex. column header).
347369
/// @prop {Number} drop-area-border-radius [2px] - The border radius fraction, between 0-1 to be used drop-area.
370+
/// @prop {Map} $filtering-background-or [igx-color: ('error'), rgba: .5] - The background color of advanced filtering "OR" condition.
371+
/// @prop {Map} $filtering-background-or--focus [igx-color: ('error')] - The background color on focus/selected of advanced filtering "OR" condition.
348372
///
349373
/// @requires {function} extend
350374
/// @requires {map} $_light-grid
@@ -356,6 +380,15 @@ $_fluent-grid: extend(
356380
(
357381
variant: 'fluent',
358382

383+
filtering-background-or: (
384+
igx-color: ('error'),
385+
rgba: .5
386+
),
387+
388+
filtering-background-or--focus: (
389+
igx-color: ('error')
390+
),
391+
359392
grid-border-color: (
360393
igx-color: ('grays', 100)
361394
),
@@ -455,55 +488,61 @@ $_fluent-grid: extend(
455488
///
456489
/// @requires {function} extend
457490
/// @requires {map} $_light-grid
458-
$_bootstrap-grid: extend($_light-grid, $_bootstrap-shape-grid, (
459-
variant: 'bootstrap',
491+
/// @requires {map} $_bootstrap-shape-grid
492+
$_bootstrap-grid: extend(
493+
$_light-grid,
494+
$_bootstrap-shape-grid,
495+
(
496+
variant: 'bootstrap',
460497

461-
header-background: #fff,
462-
header-text-color: #000,
463498

464-
cell-active-border-color: (
465-
igx-color: ('primary', 500)
466-
),
499+
header-background: #fff,
500+
header-text-color: #000,
467501

468-
row-highlight: (
469-
igx-color: ('primary', 500)
470-
),
502+
cell-active-border-color: (
503+
igx-color: ('primary', 500)
504+
),
471505

472-
row-ghost-background: (
473-
igx-color: ('primary', 50)
474-
),
506+
row-highlight: (
507+
igx-color: ('primary', 500)
508+
),
475509

476-
sorted-header-icon-color: (
477-
igx-color: ('primary', 500)
478-
),
510+
row-ghost-background: (
511+
igx-color: ('primary', 50)
512+
),
479513

480-
sortable-header-icon-hover-color: (
481-
igx-color: ('primary', 500)
482-
),
514+
sorted-header-icon-color: (
515+
igx-color: ('primary', 500)
516+
),
483517

484-
row-selected-background: (
485-
igx-color: ('primary', 50),
486-
),
518+
sortable-header-icon-hover-color: (
519+
igx-color: ('primary', 500)
520+
),
487521

488-
row-selected-hover-background: (
489-
igx-color: ('primary', 100),
490-
),
522+
row-selected-background: (
523+
igx-color: ('primary', 50),
524+
),
491525

492-
pinned-border-color: (
493-
igx-color: ('grays', 400)
494-
),
526+
row-selected-hover-background: (
527+
igx-color: ('primary', 100),
528+
),
495529

496-
resize-line-color: (
497-
igx-color: ('primary', 500)
498-
),
530+
pinned-border-color: (
531+
igx-color: ('grays', 400)
532+
),
499533

500-
drop-indicator-color: (
501-
igx-color: ('primary', 500)
502-
),
534+
resize-line-color: (
535+
igx-color: ('primary', 500)
536+
),
537+
538+
drop-indicator-color: (
539+
igx-color: ('primary', 500)
540+
),
503541

504-
edit-mode-color: (
505-
igx-color: ('primary', 500)
506-
),
507-
));
542+
edit-mode-color: (
543+
igx-color: ('primary', 500)
544+
),
545+
)
546+
);
508547

509548

0 commit comments

Comments
 (0)