Skip to content

Commit c033849

Browse files
SisIvanovadidimmovarkaraivanovsimeonoff
authored
fix(combo): style component using sass theme (#1920)
--------- Co-authored-by: Dilyana Yarabanova <[email protected]> Co-authored-by: Radoslav Karaivanov <[email protected]> Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent 48a8180 commit c033849

File tree

5 files changed

+14
-146
lines changed

5 files changed

+14
-146
lines changed

‎src/components/combo/themes/shared/combo.bootstrap.scss‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -96,53 +96,11 @@ $dropdown-theme: dropdown-theme.$bootstrap;
9696
color: color(primary, 500);
9797
}
9898

99-
:host(:focus-within) {
100-
[part~='toggle-icon'] {
101-
background: var-get($theme, 'toggle-button-background-focus--border');
102-
color: var-get($theme, 'toggle-button-foreground-focus');
103-
104-
igc-icon {
105-
color: inherit;
106-
}
107-
}
108-
109-
[part~='clear-icon'] {
110-
background: var-get($theme, 'clear-button-background-focus');
111-
color: var-get($theme, 'clear-button-foreground-focus');
112-
113-
igc-icon {
114-
color: inherit;
115-
}
116-
}
117-
}
118-
11999
:host(:disabled),
120100
:host([disabled]) {
121-
::slotted([slot='prefix']),
122-
::slotted([slot='suffix']),
123-
igc-input::part(label),
124-
igc-input::part(input)::placeholder {
125-
color: var-get($theme, 'disabled-text-color');
126-
}
127-
128101
[part~='clear-icon'] {
129102
border-inline-end: rem(1px) solid
130103
var-get($input-theme, 'disabled-border-color');
131-
background: inherit;
132-
color: var-get($theme, 'disabled-text-color');
133-
134-
igc-icon {
135-
color: inherit;
136-
}
137-
}
138-
139-
[part~='toggle-icon'] {
140-
background: var-get($theme, 'toggle-button-background-disabled');
141-
color: var-get($theme, 'toggle-button-foreground-disabled');
142-
143-
igc-icon {
144-
color: inherit;
145-
}
146104
}
147105

148106
::slotted([slot='suffix']),

‎src/components/combo/themes/shared/combo.common.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,13 @@ $dropdown-theme: dropdown-theme.$material;
1717
}
1818
}
1919

20+
[part='filter-input'] {
21+
border-bottom: rem(1px) dashed var-get($theme, 'search-separator-border-color');
22+
}
23+
2024
[part='empty'] {
2125
color: var-get($theme, 'empty-list-placeholder-color');
26+
background: var-get($theme, 'empty-list-background');
2227
}
2328

2429
[part~='toggle-icon'] {
@@ -30,6 +35,10 @@ $dropdown-theme: dropdown-theme.$material;
3035
}
3136
}
3237

38+
[part='toggle-icon filled'] {
39+
color: var-get($theme, 'toggle-button-foreground-filled');
40+
}
41+
3342
[part~='clear-icon'] {
3443
background: var-get($theme, 'clear-button-background');
3544
color: var-get($theme, 'clear-button-foreground');
@@ -41,7 +50,7 @@ $dropdown-theme: dropdown-theme.$material;
4150

4251
:host(:focus-within) {
4352
[part~='toggle-icon'] {
44-
background: var-get($theme, 'toggle-button-background-focus--border');
53+
background: var-get($theme, 'toggle-button-background-focus');
4554
color: var-get($theme, 'toggle-button-foreground-focus');
4655

4756
igc-icon {

‎src/components/combo/themes/shared/combo.fluent.scss‎

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -70,55 +70,3 @@ $dropdown-theme: dropdown-theme.$fluent;
7070
background: transparent;
7171
}
7272
}
73-
74-
[part='empty'] {
75-
color: var-get($theme, 'empty-list-placeholder-color');
76-
}
77-
78-
:host(:focus-within) {
79-
[part~='toggle-icon'] {
80-
background: var-get($theme, 'toggle-button-background-focus');
81-
color: var-get($theme, 'toggle-button-foreground-focus');
82-
83-
igc-icon {
84-
color: inherit;
85-
}
86-
}
87-
88-
[part~='clear-icon'] {
89-
background: var-get($theme, 'clear-button-background-focus');
90-
color: var-get($theme, 'clear-button-foreground-focus');
91-
92-
igc-icon {
93-
color: inherit;
94-
}
95-
}
96-
}
97-
98-
:host(:disabled),
99-
:host([disabled]) {
100-
::slotted([slot='prefix']),
101-
::slotted([slot='suffix']),
102-
igc-input::part(label),
103-
igc-input::part(input)::placeholder {
104-
color: var-get($theme, 'disabled-text-color');
105-
}
106-
107-
[part~='clear-icon'] {
108-
background: inherit;
109-
color: var-get($theme, 'disabled-text-color');
110-
111-
igc-icon {
112-
color: inherit;
113-
}
114-
}
115-
116-
[part~='toggle-icon'] {
117-
background: var-get($theme, 'toggle-button-background-disabled');
118-
color: var-get($theme, 'toggle-button-foreground-disabled');
119-
120-
igc-icon {
121-
color: inherit;
122-
}
123-
}
124-
}

‎src/components/combo/themes/shared/combo.indigo.scss‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ $dropdown-theme: dropdown-theme.$indigo;
8383
:host(:hover),
8484
:host(:focus-within) {
8585
[part~='toggle-icon'] {
86-
background: var-get($theme, 'toggle-button-background-focus--border');
86+
background: var-get($theme, 'toggle-button-background-focus');
8787
color: var-get($theme, 'toggle-button-foreground-focus');
8888

8989
igc-icon {
@@ -112,26 +112,7 @@ $dropdown-theme: dropdown-theme.$indigo;
112112
:host([disabled]) {
113113
::slotted([slot='prefix']),
114114
::slotted([slot='suffix']),
115-
116115
igc-input::part(input)::selection {
117116
background: transparent;
118117
}
119-
120-
[part~='clear-icon'] {
121-
background: inherit;
122-
color: var-get($theme, 'disabled-text-color');
123-
124-
igc-icon {
125-
color: inherit;
126-
}
127-
}
128-
129-
[part~='toggle-icon'] {
130-
background: var-get($theme, 'toggle-button-background-disabled');
131-
color: var-get($theme, 'toggle-button-foreground-disabled');
132-
133-
igc-icon {
134-
color: inherit;
135-
}
136-
}
137118
}

‎src/components/combo/themes/shared/combo.material.scss‎

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -75,18 +75,14 @@ $dropdown-theme: dropdown-theme.$material;
7575
}
7676
}
7777

78-
[part='toggle-icon filled'] {
79-
color: var-get($theme, 'toggle-button-foreground-filled');
80-
}
81-
8278
:host(:not([outlined]):focus-within) {
8379
igc-input::part(container) {
8480
--_toggle-focus-background: #{var-get($theme, 'toggle-button-background')};
8581
--_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground')};
8682

8783
&:focus-within {
8884
--_toggle-focus-background: #{var-get($theme, 'toggle-button-background-focus')};
89-
--_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground-filled')};
85+
--_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground-focus')};
9086
}
9187
}
9288

@@ -104,33 +100,9 @@ $dropdown-theme: dropdown-theme.$material;
104100
[part~='toggle-icon'] {
105101
background: var-get($theme, 'toggle-button-background-focus--border');
106102
}
107-
}
108-
109-
:host(:disabled),
110-
:host([disabled]) {
111-
::slotted([slot='prefix']),
112-
::slotted([slot='suffix']),
113-
igc-input::part(label),
114-
igc-input::part(input)::placeholder {
115-
color: var-get($theme, 'disabled-text-color');
116-
}
117103

118-
[part~='clear-icon'] {
119-
background: inherit;
120-
color: var-get($theme, 'disabled-text-color');
121-
122-
igc-icon {
123-
color: inherit;
124-
}
125-
}
126-
127-
[part~='toggle-icon'] {
128-
background: var-get($theme, 'toggle-button-background-disabled');
129-
color: var-get($theme, 'toggle-button-foreground-disabled');
130-
131-
igc-icon {
132-
color: inherit;
133-
}
104+
[part='toggle-icon filled'] {
105+
color: var-get($theme, 'toggle-button-foreground-filled');
134106
}
135107
}
136108

0 commit comments

Comments
 (0)