diff --git a/.changeset/fair-peas-build.md b/.changeset/fair-peas-build.md new file mode 100644 index 0000000000..0608a482e3 --- /dev/null +++ b/.changeset/fair-peas-build.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Added custom resizer for textarea elements. diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss index 94eab73597..623c73b462 100644 --- a/packages/styles/src/components/_index.scss +++ b/packages/styles/src/components/_index.scss @@ -14,6 +14,7 @@ @use 'elevation'; @use 'form-range'; @use 'form-select'; +@use 'form-textarea'; @use 'datatable'; @use 'form-check'; @use 'forms'; diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss new file mode 100644 index 0000000000..f03786d930 --- /dev/null +++ b/packages/styles/src/components/form-textarea.scss @@ -0,0 +1,12 @@ +@use './../variables/spacing'; +@use './../variables/components/forms'; + +textarea { + &.form-control { + &::-webkit-resizer { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-size: 75%; + } + } +}