From ecc2dc89f6f53833c88de394c1765f9133068425 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Mon, 18 Aug 2025 19:27:59 +0300 Subject: [PATCH 1/2] fix(input-group): prefix & suffix bootrstrap borders --- .../styles/components/combo/_combo-theme.scss | 14 ----- .../components/input/_input-group-theme.scss | 57 +++++++++++++++++-- .../components/select/_select-theme.scss | 8 --- 3 files changed, 51 insertions(+), 28 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 6b0f7cf4657..00cfd1f7185 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -136,20 +136,6 @@ } @if $variant == 'bootstrap' { - .igx-input-group--disabled { - %igx-combo__toggle-button { - border-inline-start-width: rem(1px); - border-inline-start-style: solid; - border-inline-start-color: inherit; - } - } - - igx-suffix:not(.igx-combo__clear-button) + %igx-combo__toggle-button { - border-inline-start-width: rem(1px); - border-inline-start-style: solid; - border-inline-start-color: inherit; - } - .igx-input-group__bundle::after { height: rem(1px) !important; } 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 1b036517f8e..66643c96e65 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 @@ -612,7 +612,7 @@ %bootstrap-file-focused, %bootstrap-file-valid, %bootstrap-file-warning, - %bootstrap-file-invalid, + %bootstrap-file-invalid { %form-group-bundle { border-radius: var-get($theme, 'box-border-radius'); @@ -670,11 +670,27 @@ %form-group-bundle { box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color'); } + + %form-group-prefix:not(:first-child) { + border-inline-start-color: var-get($theme, 'success-secondary-color'); + } + + %form-group-suffix:not(:last-child) { + border-inline-end-color: var-get($theme, 'success-secondary-color'); + } } %bootstrap-file-warning-focused { %form-group-bundle { box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38); + + %form-group-prefix:not(:first-child) { + border-inline-start-color: var-get($theme, 'warning-secondary-color'); + } + + %form-group-suffix:not(:last-child) { + border-inline-end-color: var-get($theme, 'warning-secondary-color'); + } } } @@ -682,6 +698,14 @@ %form-group-bundle { box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color'); } + + %form-group-prefix:not(:first-child) { + border-inline-start-color: var-get($theme, 'error-secondary-color'); + } + + %form-group-suffix:not(:last-child) { + border-inline-end-color: var-get($theme, 'error-secondary-color'); + } } @if $variant == 'bootstrap' { @@ -691,6 +715,14 @@ %upload-button { border-color: var-get($theme, 'focused-border-color'); } + + %form-group-prefix:not(:first-child) { + border-inline-start-color: var-get($theme, 'focused-border-color'); + } + + %form-group-suffix:not(:last-child) { + border-inline-end-color: var-get($theme, 'focused-border-color'); + } } } @@ -2015,11 +2047,6 @@ }; } } - - .igx-input-group__clear-icon + igx-suffix, - .igx-input-group__clear-icon + [igxPrefix] { - border-inline-start: rem(1px) solid var-get($theme, 'border-color'); - } } %form-group-display--bootstrap-suffixed-focused { @@ -2284,6 +2311,24 @@ border-color: var-get($theme, 'disabled-border-color'); color: var-get($theme, 'disabled-text-color'); } + + %form-group-prefix--disabled-bootstrap:not(:first-child) { + border-inline-start-color: var-get($theme, 'disabled-border-color'); + } + + %form-group-suffix--disabled-bootstrap:not(:last-child) { + border-inline-end-color: var-get($theme, 'disabled-border-color'); + } + + @if $variant == 'bootstrap' { + %form-group-prefix:not(:first-child) { + border-inline-start: rem(1px) solid var-get($theme, 'border-color'); + } + + %form-group-suffix:not(:last-child) { + border-inline-end: rem(1px) solid var-get($theme, 'border-color'); + } + } } /// Adds typography styles for the igx-input-group component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss index 07a5faf511b..ce20ea0d437 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss @@ -14,14 +14,6 @@ } @if $variant == 'bootstrap' { - .igx-input-group--disabled { - %igx-select__toggle-button { - border-inline-start-width: rem(1px); - border-inline-start-style: solid; - border-inline-start-color: inherit; - } - } - igx-suffix + %igx-select__toggle-button { border-inline-start-width: rem(1px); border-inline-start-style: solid; From 6f6668a876a0209c03da0ccc42075dc483d69a45 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 19 Aug 2025 10:28:05 +0300 Subject: [PATCH 2/2] fix(select): suffix border --- .../lib/core/styles/components/select/_select-theme.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss index ce20ea0d437..388d18940f6 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss @@ -13,14 +13,6 @@ display: block; } - @if $variant == 'bootstrap' { - igx-suffix + %igx-select__toggle-button { - border-inline-start-width: rem(1px); - border-inline-start-style: solid; - border-inline-start-color: inherit; - } - } - .igx-input-group { %igx-select__toggle-button { background: var-get($theme, 'toggle-button-background');