diff --git a/src/components/combo/themes/light/combo.material.scss b/src/components/combo/themes/light/combo.material.scss index ab9027d70..014caaf09 100644 --- a/src/components/combo/themes/light/combo.material.scss +++ b/src/components/combo/themes/light/combo.material.scss @@ -1,18 +1,6 @@ @use '../../../../styles/utilities' as *; @use '../../../select/themes/light/select.material'; -[part='toggle-icon'] { - background: color(gray, 300); -} - -igc-input#target:not([outlined]) { - &:focus-within { - [part='toggle-icon'] { - background: color(gray, 400, .3); - } - } -} - :host([outlined]:focus-within) { igc-input::part(suffix) { margin-inline-end: -1px; diff --git a/src/components/input/themes/light/input.indigo.scss b/src/components/input/themes/light/input.indigo.scss index f8535a740..8ce44a2a0 100644 --- a/src/components/input/themes/light/input.indigo.scss +++ b/src/components/input/themes/light/input.indigo.scss @@ -6,7 +6,7 @@ $label-focus-color: var(--label-focus-color, color(primary, 500)) !default; display: inline-flex; align-items: center; width: max-content; - height: 100%; + height: calc(100% - #{rem(2px)}); padding-inline: pad-inline(8px, 12px, 16px); } diff --git a/src/components/select/themes/light/select.indigo.scss b/src/components/select/themes/light/select.indigo.scss index cf1f5d7f7..3551a0cd0 100644 --- a/src/components/select/themes/light/select.indigo.scss +++ b/src/components/select/themes/light/select.indigo.scss @@ -1,16 +1,20 @@ -@use '../../../../styles/utilities' as utils; +@use '../../../../styles/utilities' as *; -$label-focus-color: var(--label-focus-color, utils.color(primary, 500)) !default; +$label-focus-color: var(--label-focus-color, color(primary, 500)) !default; + +[part~='toggle-icon'] { + background: color(gray, 300); +} :host { ::slotted([slot='helper-text']) { - color: utils.color(gray, 600); + color: color(gray, 600); } } :host([disabled]) { ::slotted([slot='helper-text']) { - color: utils.color(gray, 300); + color: color(gray, 300); } } @@ -24,7 +28,7 @@ $label-focus-color: var(--label-focus-color, utils.color(primary, 500)) !default :host(:not([invalid]):focus-within) { igc-input[readonly]:not([disabled])::part(container) { - background: utils.color(gray, 100); + background: color(gray, 100); } igc-input[readonly]:not([disabled])::part(label) { diff --git a/src/components/select/themes/light/select.material.scss b/src/components/select/themes/light/select.material.scss index 1ffa4cbb0..d9531d0f6 100644 --- a/src/components/select/themes/light/select.material.scss +++ b/src/components/select/themes/light/select.material.scss @@ -102,3 +102,15 @@ $active-border-width: rem(2px) !default; color: $error-color; } } + +[part~='toggle-icon'] { + background: color(gray, 300); +} + +igc-input:not([outlined]) { + &:focus-within { + [part~='toggle-icon'] { + background: color(gray, 400, .3); + } + } +}