Skip to content

fix(input-group): fix borders and material focus line #16405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Nov 20, 2025
+30 −41
Merged

fix(input-group): fix borders and material focus line #16405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
39196d0
fix(input-group): fix borders and material focus line
didimmova Oct 30, 2025
235dfe4
Merge branch 'master' into didimmova/fix-input-theme
SisIvanova Nov 4, 2025
75f0982
fix(input): add border radius to bundle so the background doesn't ove…
didimmova Nov 12, 2025
7d25586
fix(input): address latest comments
didimmova Nov 13, 2025
c3c5e18
Merge branch 'master' into didimmova/fix-input-theme
didimmova Nov 13, 2025
5ceab26
Merge branch 'master' into didimmova/fix-input-theme
didimmova Nov 13, 2025
296f20d
Merge branch 'master' into didimmova/fix-input-theme
didimmova Nov 19, 2025
ddfc666
Merge branch 'master' into didimmova/fix-input-theme
simeonoff Nov 19, 2025
951c0c9
Merge branch 'master' into didimmova/fix-input-theme
simeonoff Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions projects/igniteui-angular/core/src/core/styles/components/input/_input-group-component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -754,12 +754,6 @@
@include mx(fluent, search, focused) {
@extend %igx-input-group-fluent-search--focused !optional;
}

@include mx(fluent, search, disabled) {
@include e(bundle) {
@extend %form-group-bundle-search--disabled !optional;
}
}
// FLUENT END

// ============================== //
Expand Down
65 changes: 30 additions & 35 deletions projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,7 @@
display: inline-flex;
width: max-content;
align-items: center;

@if $indigo-theme {
min-height: calc(100% - #{rem(1px)}) !important;
} @else {
min-height: 100% !important;
}

min-height: 100% !important;
transition: color $transition-timing, background $transition-timing;

&:not(:empty) {
Expand Down Expand Up @@ -155,12 +149,30 @@
[igxPrefix] {
@extend %form-group-prefix;
outline-style: none;

&:first-child {
@if $variant == 'fluent' {
border-start-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
border-end-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
} @else if $variant == "indigo" {
border-start-start-radius: var-get($theme, 'box-border-radius');
}
}
}

igx-suffix,
[igxSuffix] {
@extend %form-group-suffix;
outline-style: none;

&:last-child {
@if $variant == 'fluent' {
border-start-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
border-end-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
} @else if $variant == "indigo" {
border-start-end-radius: var-get($theme, 'box-border-radius');
}
}
}

input,
Expand Down Expand Up @@ -680,7 +692,7 @@
%bootstrap-file-warning,
%bootstrap-file-invalid {
%form-group-bundle {
border-radius: var-get($theme, 'box-border-radius');
border-radius: var-get($theme, 'border-border-radius');
transition: box-shadow .15s ease-out, border .15s ease-out;

&:hover {
Expand Down Expand Up @@ -793,7 +805,7 @@

.igx-input-group--bootstrap:not(.igx-input-group--prefixed) {
.igx-input-group__upload-button {
border-radius: var-get($theme, 'box-border-radius') 0 0 var-get($theme, 'box-border-radius');
border-radius: var-get($theme, 'border-border-radius') 0 0 var-get($theme, 'border-border-radius');
}

.igx-input-group__file-input {
Expand Down Expand Up @@ -1025,9 +1037,9 @@
%form-group-bundle--search {
background: var-get($theme, 'search-background');
box-shadow: var-get($theme, 'search-resting-elevation');
border-radius: var-get($theme, 'search-border-radius');

@if $variant != 'bootstrap' {
border-radius: var-get($theme, 'search-border-radius');
overflow: hidden;
}

Expand Down Expand Up @@ -1500,7 +1512,7 @@
align-self: end;
transform: scaleX(0);
transform-origin: center;
background: var-get($theme, 'focused-secondary-color');
background: var-get($theme, 'focused-bottom-line-color');
z-index: 1;
}
}
Expand Down Expand Up @@ -2053,11 +2065,11 @@
}

%fluent-label-success {
color: var-get($theme, 'idle-text-color');
color: var-get($theme, 'idle-secondary-color');
}

%fluent-label-error {
color: var-get($theme, 'idle-text-color');
color: var-get($theme, 'idle-secondary-color');
}

%fluent-label-disabled {
Expand Down Expand Up @@ -2087,23 +2099,6 @@
}
}

.igx-input-group--fluent [igxPrefix],
.igx-input-group--fluent igx-prefix {
&:first-child {
[igxButton]::after,
button::after {
border: {
start: {
start-radius: var-get($theme, 'border-border-radius');
};
end: {
start-radius: var-get($theme, 'border-border-radius');
};
}
}
}
}

%form-group-prefix-fluent,
%form-group-suffix-fluent,
%form-group-prefix-fluent-search,
Expand Down Expand Up @@ -2233,10 +2228,10 @@
end-width: rem(1px);
};
start: {
start-radius: var-get($theme, 'box-border-radius');
start-radius: var-get($theme, 'border-border-radius');
};
end: {
start-radius: var-get($theme, 'box-border-radius');
start-radius: var-get($theme, 'border-border-radius');
};
}
}
Expand All @@ -2253,10 +2248,10 @@
end-width: rem(1px);
};
start: {
end-radius: var-get($theme, 'box-border-radius');
end-radius: var-get($theme, 'border-border-radius');
};
end: {
end-radius: var-get($theme, 'box-border-radius');
end-radius: var-get($theme, 'border-border-radius');
};
}
}
Expand Down Expand Up @@ -2323,7 +2318,7 @@
map.get($bootstrap-inline-padding, 'cosy'),
map.get($bootstrap-inline-padding, 'comfortable')
);
border-radius: var-get($theme, 'box-border-radius');
border-radius: var-get($theme, 'border-border-radius');

}

Expand Down
Loading