diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index bf077148fc2..31d41920020 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -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 // ============================== // diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 1f513442471..830cbc1bd9d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -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) { @@ -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, @@ -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 { @@ -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 { @@ -1025,9 +1037,9 @@ %form-group-bundle--search { background: var-get($theme, 'search-background'); box-shadow: var-get($theme, 'search-resting-shadow'); + border-radius: var-get($theme, 'search-border-radius'); @if $variant != 'bootstrap' { - border-radius: var-get($theme, 'search-border-radius'); overflow: hidden; } @@ -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; } } @@ -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 { @@ -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, @@ -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'); }; } } @@ -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'); }; } } @@ -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'); }