Skip to content
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,6 @@ $theme: $fluent;
min-height: #{sizable(rem(40px), rem(48px), rem(54px))};
}

:host(:focus-within) {
[part='label'] {
color: color(gray, 800);
}
}

:host([required]) {
[part='label']::after {
color: var-get($theme, 'error-secondary-color');
Expand Down
20 changes: 16 additions & 4 deletions src/components/input/themes/shared/input.fluent.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,6 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
}

:host(:focus-within) {
[part='label'] {
color: color(gray, 800);
}

[part^='container'] {
border-color: var-get($theme, 'focused-border-color');
border-width: #{$focused-border-width};
Expand All @@ -110,10 +106,26 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
}
}

:host([type='search']) {
[part='prefix'] {
background: var(--ig-input-group-input-prefix-background, transparent);
color: var(--ig-input-group-input-prefix-color, var(--ig-primary-500));
}

[part='suffix'] {
background: var(--ig-input-group-input-suffix-background, transparent);
color: var(--ig-input-group-input-suffix-color, var(--ig-primary-500));
}
}

:host([type='search']:focus-within) {
[part='prefix'] {
display: none;
}

[part='suffix'] {
color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900));
}
}

:host([required]) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/textarea/themes/shared/textarea.common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $theme: $base;

[part~='filled'] {
[part~='input'] {
color: var-get($theme, 'input-prefix-color--filled');
color: var-get($theme, 'filled-text-color');
}

[part~='prefix'] {
Expand Down
2 changes: 1 addition & 1 deletion src/components/textarea/themes/shared/textarea.fluent.scss
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ $theme: $fluent;
transform-origin: top left;
margin-top: 0;
height: auto;
margin-block-end: rem(4px);
margin-block-end: rem(5px);
}

:host([invalid]) {
Expand Down