From 2d831d08d83990729f47010bfaa22971303c42e3 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 11 Jun 2025 17:30:46 +0300 Subject: [PATCH 1/4] fix(input-group): refine label positioning and transition logic in material theme --- .../input/themes/shared/input.material.scss | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 27341e344..1273d9a5b 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -8,9 +8,7 @@ $active-border-width: rem(2px) !default; $fs: rem(16px) !default; %label { - --label-position: #{sizable(18px, 22px, 26px)}; - - transform: translateY(calc(var(--label-position) * -1)); + translate: 0 calc(var(--label-position) * -1); } %floated-styles { @@ -43,6 +41,10 @@ $fs: rem(16px) !default; } } +:host([outlined]) { + --label-position: calc((#{var-get($theme, 'size')} / 2) - (#{$idle-border-width})); +} + [part='prefix'], [part='suffix'] { ::slotted(*) { @@ -70,11 +72,12 @@ input:placeholder-shown + [part='notch'] [part='label'], color: var-get($theme, 'idle-secondary-color'); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), + translate 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); text-overflow: ellipsis; overflow: hidden; - will-change: font-size, color, transform; + will-change: font-size, color, transform, translate; } [part^='container'] { @@ -149,7 +152,7 @@ input:placeholder-shown + [part='notch'] [part='label'], :host([readonly]:not([outlined]):focus-within) { :not([part~='filled']) { input:not(:placeholder-shown) + [part='notch'] [part='label'] { - transform: translate(0); + translate: 0; font-size: initial; } } @@ -201,7 +204,7 @@ input:placeholder-shown + [part='notch'] [part='label'], input:placeholder-shown + [part='notch'] [part='label'], [part~='filled'] + [part='notch'] [part='label'] { - transform: translateY(-73%); + translate: 0 -73%; } } @@ -247,7 +250,7 @@ input:placeholder-shown + [part='notch'] [part='label'], } [part='notch'] [part='label'] { - transform: translateY(-73%); + translate: 0 -73%; } } @@ -310,16 +313,11 @@ input:placeholder-shown + [part='notch'] [part='label'], padding-top: rem(20px); padding-bottom: rem(6px); } - - input:placeholder-shown + [part='notch'] [part='label'], - [part~='filled'] + [part='notch'] [part='label'] { - transform: translateY(-73%); - } } :host([outlined][type='search']:focus-within) { [part='notch'] [part='label'] { - transform: translateY(-73%); + translate: 0 -73%; } } @@ -436,7 +434,7 @@ input:placeholder-shown + [part='notch'] [part='label'], :host(:not([type='search'])[readonly][outlined]:focus-within) { :not([part~='filled']) { input:not(:placeholder-shown) + [part='notch'] [part='label'] { - transform: translate(0); + translate: 0; font-size: initial; } From e7fb48f8fabfe97e7eead322b1820e01f2ce8e0d Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 11 Jun 2025 17:39:35 +0300 Subject: [PATCH 2/4] fix(input): remove duplicated selector --- src/components/input/themes/shared/input.material.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 1273d9a5b..129988eb0 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -41,10 +41,6 @@ $fs: rem(16px) !default; } } -:host([outlined]) { - --label-position: calc((#{var-get($theme, 'size')} / 2) - (#{$idle-border-width})); -} - [part='prefix'], [part='suffix'] { ::slotted(*) { @@ -390,6 +386,8 @@ input:placeholder-shown + [part='notch'] [part='label'], } :host([outlined]) { + --label-position: calc((#{var-get($theme, 'size')} / 2) - (#{$idle-border-width})); + [part='notch'] { border: { width: $idle-border-width; From 49bb8b37176d8ad8b6fd4417b04819328babe88a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 12 Jun 2025 09:20:54 +0300 Subject: [PATCH 3/4] fix(textarea): update label and layout positioning in material theme --- .../textarea/themes/shared/textarea.material.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 2c496abc7..541132d16 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -25,7 +25,7 @@ textarea { border: none; padding: 0; overflow: auto; - margin-block-start: $input-top-padding; + padding-block-start: $input-top-padding; grid-area: 1 / 2 / span 1 / span 2; flex-grow: 1; position: relative; @@ -42,25 +42,25 @@ textarea { transform 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1), font-size 150ms cubic-bezier(.4, 0, .2, 1); - will-change: transform; + will-change: transform, translate; } %label-filled { @include type-style('caption'); - transform: translateY(0); + translate: 0; inset-block-start: calc(#{$input-top-padding} / 4); } %label-outlined-filled { @include type-style('caption') { - margin-block-end: auto; + margin-block-end: 0; }; display: inline-block; position: relative; inset-block: 0; - transform: translateY(-50%); + translate: 0 calc(var(--textarea-label-position) * -1); padding-inline-end: 0; } @@ -195,7 +195,7 @@ textarea { [part='notch'] { display: flex; - align-items: center; + align-items: flex-start; width: auto; min-width: 0; height: 100%; @@ -230,6 +230,8 @@ textarea { // Outlined Textarea :host([outlined]) { + --textarea-label-position: calc(50% + (#{rem(1px)})); + align-items: initial; padding: 0; box-shadow: none; From b85862fdc612f5387473653b470c3feb87022036 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 16 Jun 2025 17:13:06 +0300 Subject: [PATCH 4/4] fix(textarea): fix the height of the textarea --- src/components/textarea/themes/shared/textarea.material.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 541132d16..dc933b888 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -25,7 +25,7 @@ textarea { border: none; padding: 0; overflow: auto; - padding-block-start: $input-top-padding; + margin-block-start: $input-top-padding; grid-area: 1 / 2 / span 1 / span 2; flex-grow: 1; position: relative;