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 259dd6e0b8e..26005cd60db 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 @@ -137,6 +137,10 @@ @extend %textarea-group--outlined !optional; } + @include mx(textarea-group, box) { + @extend %textarea-group--box !optional; + } + @include mx(textarea-group, focused) { @include e(label) { @extend %textarea-group-label--focused !optional; 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 8a3b597c3f4..91cf154a234 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 @@ -1014,11 +1014,24 @@ } } - %form-group-textarea-label { - transition-duration: 0ms; - } - @if $material-theme { + %form-group-textarea-label { + top: calc($input-top-padding - #{rem(1px)}); + margin-block-end: auto; + } + + %textarea-group--outlined { + %form-group-textarea-label { + top: calc($input-top-padding - #{rem(3px)}); + } + } + + %textarea-group--box { + %form-group-textarea-label { + top: calc($input-top-padding - #{rem(2px)}); + } + } + %textarea-group-label--focused { transform: translateY(0); top: calc(#{$input-top-padding} / 4);