diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss index 93a01662e..29c2baa3a 100644 --- a/src/components/input/themes/shared/input.fluent.scss +++ b/src/components/input/themes/shared/input.fluent.scss @@ -48,10 +48,13 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)}); } [part='label'] { - @include type-style('subtitle-2'); + @include type-style('subtitle-2') { + --ig-subtitle-2-line-height: #{rem(16px)}; + + margin-block: 0 rem(5px); + }; color: var-get($theme, 'idle-secondary-color'); - margin-block-end: rem(5px); } [part^='container'] { diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index a74c1a4b5..7d230fa9e 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -72,7 +72,6 @@ input:placeholder-shown + [part='notch'] [part='label'], transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1); - line-height: normal; text-overflow: ellipsis; overflow: hidden; will-change: font-size, color, transform; diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss index b1d9025e3..51b656fea 100644 --- a/src/components/textarea/themes/shared/textarea.bootstrap.scss +++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss @@ -21,7 +21,6 @@ $theme: $bootstrap; position: static; display: block; padding: 0; - line-height: rem(24px); transform: translateY(0); transform-origin: top left; margin-block: 0 rem(4px); diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss index 6e3752281..7b0460ce1 100644 --- a/src/components/textarea/themes/shared/textarea.fluent.scss +++ b/src/components/textarea/themes/shared/textarea.fluent.scss @@ -56,15 +56,19 @@ $theme: $fluent; } [part~='label'] { + @include type-style('subtitle-2') { + --ig-subtitle-2-line-height: #{rem(16px)}; + + margin-block: 0 rem(5px); + }; + display: block; - font-size: rem(14px); - font-weight: 600; position: static; transform: translateY(0); transform-origin: top left; - margin-top: 0; height: auto; - margin-block-end: rem(5px); + + } :host([invalid]) { diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss index c21f05ce0..9ecb9c306 100644 --- a/src/components/textarea/themes/shared/textarea.indigo.scss +++ b/src/components/textarea/themes/shared/textarea.indigo.scss @@ -76,8 +76,6 @@ $theme: $indigo; transition: background .25s $out-cubic; overflow: hidden; padding-inline-start: 0; - height: calc(100% - #{rem(2px)}); - top: rem(1px); &::after { content: ''; diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 2c0797bc2..2c496abc7 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -46,19 +46,22 @@ textarea { } %label-filled { + @include type-style('caption'); + transform: translateY(0); inset-block-start: calc(#{$input-top-padding} / 4); - font-size: rem(12px); } %label-outlined-filled { + @include type-style('caption') { + margin-block-end: auto; + }; + display: inline-block; position: relative; inset-block: 0; transform: translateY(-50%); - margin-block-end: auto; padding-inline-end: 0; - font-size: rem(12px); } :host(:not([outlined])) { diff --git a/src/components/textarea/themes/textarea.base.scss b/src/components/textarea/themes/textarea.base.scss index 77cdeafb6..c73db56b4 100644 --- a/src/components/textarea/themes/textarea.base.scss +++ b/src/components/textarea/themes/textarea.base.scss @@ -22,8 +22,6 @@ $base-scale-size: ( [part~='label'] { @include ellipsis(); - - line-height: normal; } } @@ -69,7 +67,7 @@ textarea { &:not([type='*']) { /* resets typography styles */ - line-height: normal; + line-height: normal; } }