diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index b318f9c1f00..71be31fcc65 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -399,6 +399,7 @@ .sbb-form-field__input ::slotted(textarea) { @include sbb.scrollbar; + position: relative; resize: vertical; white-space: break-spaces; overflow-y: auto; @@ -422,6 +423,47 @@ } } +// Custom resize handle + +:host([data-input-type='textarea']) .sbb-form-field__input-container { + &::after { + content: ''; + pointer-events: none; + position: absolute; + display: block; + width: var(--sbb-spacing-fixed-4x); + height: var(--sbb-spacing-fixed-4x); + background-color: var(--sbb-form-field-background-color); + inset-inline-end: #{sbb.px-to-rem-build(-4)}; + inset-block-end: #{sbb.px-to-rem-build(5)}; + } +} + +:host([data-input-type='textarea']) .sbb-form-field__input { + &::before, + &::after { + content: ''; + pointer-events: none; + position: absolute; + width: #{sbb.px-to-rem-build(6)}; + height: #{sbb.px-to-rem-build(6)}; + border-block-end: var(--sbb-border-width-1x) solid var(--sbb-color-smoke); + border-inline-start: var(--sbb-border-width-1x) solid var(--sbb-color-smoke); + inset-inline-end: #{sbb.px-to-rem-build(2)}; + inset-block-end: #{sbb.px-to-rem-build(9)}; + z-index: 1; + } + + &::before { + margin-bottom: var(--sbb-spacing-fixed-1x); + transform: rotate(135deg); + } + + &::after { + transform: rotate(-45deg); + } +} + .sbb-form-field__error { display: flex; min-height: var(--form-field-error-min-height);