diff --git a/apps/doc/src/app/components/input/textarea/textarea-example.component.ts b/apps/doc/src/app/components/input/textarea/textarea-example.component.ts index f62fcf27a..739180a16 100644 --- a/apps/doc/src/app/components/input/textarea/textarea-example.component.ts +++ b/apps/doc/src/app/components/input/textarea/textarea-example.component.ts @@ -40,7 +40,7 @@ export class TextareaExampleComponent { public disabled = false; - height = null; + height = 100; testIdPostfix!: string; width = '20rem'; public inputPosition: PrizmInputPosition = 'left'; diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less index caf968375..3d26d47f9 100644 --- a/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less +++ b/libs/components/src/lib/components/input/common/input-layout/input-layout-textarea.component.less @@ -6,25 +6,10 @@ display: table; width: auto; } - - &:not(.disabled):hover, - &:not(.disabled):focus-within { - .label-container-textarea.label-container-outer { - .prizm-input-label-clear-btn { - display: block; - } - } - } } .label-container { display: flex; - - &-focused.label-container-textarea.label-container-outer { - .prizm-input-label-clear-btn { - display: block; - } - } } .prizm-input-label { @@ -87,49 +72,27 @@ align-items: flex-start; } + .prizm-input-form-status-button { + align-self: auto; + } + &.@{form}-inner { .prizm-input-button-default { - position: absolute; - right: 0; - } - &[data-size='m'] { - .prizm-input-button-default { - padding-top: 1px; - } + margin-top: 16px; } - &[data-size='l'] { - .prizm-input-button-default { - padding-top: 5px; - } - - .prizm-input-form-status-button { - padding-top: 8px; - } + .prizm-input-form-status-button { + margin-top: 14px; } } &.@{form}-outer { .prizm-input-button-default { - display: none; + margin-top: 12px; } - &[data-size='l'] { - .prizm-input-button-default { - padding-top: 11px; - } - } - - &[data-size='m'] { - .prizm-input-button-default { - padding-top: 7px; - } - } - - &[data-size='s'] { - .prizm-input-button-default { - padding-top: 4px; - } + .prizm-input-form-status-button { + margin-top: 8px; } } } diff --git a/libs/components/src/lib/components/input/common/styles/input.component.less b/libs/components/src/lib/components/input/common/styles/input.component.less index a4f01eb41..798b67d67 100644 --- a/libs/components/src/lib/components/input/common/styles/input.component.less +++ b/libs/components/src/lib/components/input/common/styles/input.component.less @@ -59,6 +59,11 @@ // In outer context :host-context(.prizm-input-form-outer) { padding: 7px 0px; + + &:host-context(.prizm-input-form-textarea) { + padding: 4px 0px; + line-height: 24px; + } } // need for optimization output selector in less @@ -70,7 +75,7 @@ padding: 7px 0px; } -:host-context(.prizm-input-form-outer[data-size='s']) { +:host-context(.prizm-input-form-outer[data-size='s']:not(.prizm-input-form-textarea)) { font-size: 12px; padding: 4px 0px; }