Skip to content

Commit 90fe114

Browse files
simeonoffsimeonoff
authored
Merge pull request #54 from IgniteUI/didimmova/grid-lite-filtering-input
feat(filtering-row-input): update styles and move common logic to another file
2 parents 83009fc + 314958d commit 90fe114

6 files changed

Lines changed: 58 additions & 106 deletions

File tree

‎src/styles/filter-row/filter-row.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,36 +16,36 @@ $border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-s
1616
z-index: var(--z-index-base);
1717
padding-inline-end: var(--scrollbar-offset);
1818
position: relative;
19-
19+
2020
&:has([part~='active-state']) {
2121
background: var-get($theme, 'filtering-row-background');
2222
box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'header-border-color');
2323
margin-block-start: calc(var-get($theme, 'header-border-width') * -1);
2424
}
25-
25+
2626
igc-chip {
2727
// TODO FIX ON COMPONENT LEVEL
2828
display: inline-flex;
2929
margin: rem(4px);
3030
}
31-
31+
3232
igc-input::part(input) {
3333
border-inline-start: none;
3434
padding-inline-start: 0;
3535
}
36-
36+
3737
igc-input:focus::part(prefix),
3838
igc-input:focus [slot="prefix"],
3939
igc-input:focus::part(suffix),
4040
igc-input:focus [slot="suffix"] {
4141
border-color: var(--focused-border-color);
4242
}
43-
43+
4444
igc-input [slot="prefix"],
4545
igc-input [slot="suffix"] {
4646
cursor: pointer;
4747
}
48-
48+
4949
igc-input:hover::part(input),
5050
igc-input:hover::part(prefix),
5151
igc-input:hover [slot="prefix"],
@@ -85,7 +85,7 @@ $border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-s
8585

8686
[part~='filter-row-actions'] {
8787
padding-inline-end: $ig-cells-padding;
88-
88+
8989
igc-icon {
9090
color: var-get($theme, 'sorted-header-icon-color');
9191
}

‎src/styles/themes/shared/filtering-row/filtering-row.bootstrap.scss‎

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
11
@use 'igniteui-theming' as *;
2-
@use '../../../themes/light/themes' as *;
3-
4-
$theme: $bootstrap;
5-
2+
@use './filtering-row.common';
63

74
[part~='filter-row-input'] {
85
igc-input {
96
--ig-input-size: #{sizable(rem(26px), rem(34px), rem(44px))};
10-
--border-border-radius: 0;
11-
--input-prefix-background: transparent;
12-
--input-prefix-background--filled: transparent;
13-
--input-prefix-background--focused: transparent;
14-
--input-suffix-background: transparent;
15-
--input-suffix-background--filled: transparent;
16-
--input-suffix-background--focused: transparent;
17-
--idle-bottom-line-color: transparent;
18-
--hover-bottom-line-color: transparent;
19-
--focused-bottom-line-color: transparent;
20-
--focused-secondary-color: transparent;
21-
--hover-border-color: var(--ig-primary-500);
22-
--focused-border-color: var(--ig-primary-500);
23-
--border-background: transparent;
24-
--search-background: var(--ig-input-search-background, transparent);
25-
--box-background: transparent;
26-
--box-background-hover: transparent;
27-
--box-background-focus: transparent;
28-
--box-border-radius: 0;
29-
--search-border-radius: 0;
30-
31-
&::part(container),
32-
&::part(input) {
33-
background: inherit;
34-
color: inherit;
35-
}
367
}
378
}

‎src/styles/themes/shared/filtering-row/filtering-row.common.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@use 'igniteui-theming' as *;
2+
3+
igc-input {
4+
--border-border-radius: 0;
5+
--input-prefix-background: transparent;
6+
--input-prefix-background--filled: transparent;
7+
--input-prefix-background--focused: transparent;
8+
--input-suffix-background: transparent;
9+
--input-suffix-background--filled: transparent;
10+
--input-suffix-background--focused: transparent;
11+
--idle-bottom-line-color: transparent;
12+
--hover-bottom-line-color: transparent;
13+
--focused-bottom-line-color: transparent;
14+
--focused-secondary-color: transparent;
15+
--hover-border-color: var(--ig-grid-accent-color, var(--ig-primary-500));
16+
--focused-border-color: var(--ig-grid-accent-color, var(--ig-primary-500));
17+
--border-background: transparent;
18+
--search-background: var(--ig-input-search-background, transparent);
19+
--box-background: transparent;
20+
--box-background-hover: transparent;
21+
--box-background-focus: transparent;
22+
--box-border-radius: 0;
23+
--search-border-radius: 0;
24+
25+
&::part(container),
26+
&::part(input) {
27+
background: inherit;
28+
color: inherit;
29+
}
30+
}
31+
32+
igc-input[aria-expanded="true"]::part(prefix),
33+
igc-input[aria-expanded="true"] [slot="prefix"] {
34+
color: var(--ig-grid-accent-color, var(--sorted-header-icon-color));
35+
}

‎src/styles/themes/shared/filtering-row/filtering-row.fluent.scss‎

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,16 @@
11
@use 'igniteui-theming' as *;
2-
@use '../../../themes/light/themes' as *;
3-
4-
$theme: $fluent;
5-
2+
@use './filtering-row.common';
63

74
[part~='filter-row-input'] {
85
igc-input {
96
--ig-input-size: #{sizable(rem(24px), rem(32px), rem(42px))};
10-
--border-border-radius: 0;
11-
--input-prefix-background: transparent;
12-
--input-prefix-background--filled: transparent;
13-
--input-prefix-background--focused: transparent;
14-
--input-suffix-background: transparent;
15-
--input-suffix-background--filled: transparent;
16-
--input-suffix-background--focused: transparent;
17-
--idle-bottom-line-color: transparent;
18-
--hover-bottom-line-color: transparent;
19-
--focused-bottom-line-color: transparent;
20-
--focused-secondary-color: transparent;
21-
--hover-border-color: var(--ig-primary-500);
22-
--focused-border-color: var(--ig-primary-500);
23-
--border-background: transparent;
24-
--search-background: var(--ig-input-search-background, transparent);
25-
--box-background: transparent;
26-
--box-background-hover: transparent;
27-
--box-background-focus: transparent;
28-
--box-border-radius: 0;
29-
--search-border-radius: 0;
30-
31-
&::part(container),
32-
&::part(input) {
33-
background: inherit;
34-
color: inherit;
35-
}
367
}
37-
38-
igc-input [slot="prefix"] {
8+
9+
igc-input [slot="prefix"] {
3910
padding-inline-start: sizable(rem(4px), rem(6px));
4011
}
41-
12+
4213
igc-input [slot="suffix"] {
43-
padding-inline-end: sizable(rem(4px), rem(6px));;
44-
}
14+
padding-inline-end: sizable(rem(4px), rem(6px));
15+
}
4516
}

‎src/styles/themes/shared/filtering-row/filtering-row.indigo.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ $theme: $indigo;
77
&:has([part~='active-state']) {
88
box-shadow: 0 rem(-1px) rem(5px) 0 rgb(0 0 0 / 12%);
99
}
10-
10+
1111
igc-chip {
1212
--ig-chip-size: #{sizable(rem(20px), rem(24px), rem(24px))};
1313
}
@@ -17,11 +17,11 @@ $theme: $indigo;
1717
igc-input {
1818
--size: #{sizable(rem(24px), rem(28px), rem(32px))};
1919
}
20-
20+
2121
igc-input [slot='prefix'] {
2222
padding-inline-start: sizable(rem(4px), rem(6px));
2323
}
24-
24+
2525
igc-input [slot='suffix'] {
2626
padding-inline-end: sizable(rem(4px), rem(6px));;
2727
}

‎src/styles/themes/shared/filtering-row/filtering-row.material.scss‎

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use 'igniteui-theming' as *;
2+
@use './filtering-row.common';
23

34
:host {
45
&:has([part~='active-state']) {
@@ -9,39 +10,13 @@
910
[part~='filter-row-input'] {
1011
igc-input {
1112
--ig-input-size: #{sizable(rem(26px), rem(34px), rem(44px))};
12-
--border-border-radius: 0;
13-
--input-prefix-background: transparent;
14-
--input-prefix-background--filled: transparent;
15-
--input-prefix-background--focused: transparent;
16-
--input-suffix-background: transparent;
17-
--input-suffix-background--filled: transparent;
18-
--input-suffix-background--focused: transparent;
19-
--idle-bottom-line-color: transparent;
20-
--hover-bottom-line-color: transparent;
21-
--focused-bottom-line-color: transparent;
22-
--focused-secondary-color: transparent;
23-
--hover-border-color: var(--ig-primary-500);
24-
--focused-border-color: var(--ig-primary-500);
25-
--border-background: transparent;
26-
--search-background: var(--ig-input-search-background, transparent);
27-
--box-background: transparent;
28-
--box-background-hover: transparent;
29-
--box-background-focus: transparent;
30-
--box-border-radius: 0;
31-
--search-border-radius: 0;
32-
33-
&::part(container),
34-
&::part(input) {
35-
background: inherit;
36-
color: inherit;
37-
}
3813
}
39-
40-
igc-input [slot="prefix"] {
14+
15+
igc-input [slot="prefix"] {
4116
padding-inline-start: sizable(rem(4px), rem(6px));
4217
}
43-
18+
4419
igc-input [slot="suffix"] {
45-
padding-inline-end: sizable(rem(4px), rem(6px));;
46-
}
20+
padding-inline-end: sizable(rem(4px), rem(6px));
21+
}
4722
}

0 commit comments

Comments
 (0)