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..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,22 +13,6 @@ display: block; } - @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; - border-inline-start-color: inherit; - } - } - .igx-input-group { %igx-select__toggle-button { background: var-get($theme, 'toggle-button-background');