From d00e5a83d19865d8743b153358bb7b075e5af252 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 17 Nov 2022 12:48:57 -0500
Subject: [PATCH] ISTWCMS-5945: css to match textarea background to other text
input background and add matching focus behaviour
---
src/patterns/01-core/elements/_textarea.scss | 12 ++++++++++--
1 file changed, 10 insertions(+), 2 deletions(-)
diff --git a/src/patterns/01-core/elements/_textarea.scss b/src/patterns/01-core/elements/_textarea.scss
index be552fc1..0272cfc2 100644
--- a/src/patterns/01-core/elements/_textarea.scss
+++ b/src/patterns/01-core/elements/_textarea.scss
@@ -2,14 +2,22 @@
// Textarea element styles.
:where(textarea) {
- background-color: var(--gray-2);
+ border: var(--size-xs) solid var(--gray-3);
+ box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
+ box-sizing: border-box;
color: inherit;
cursor: pointer;
- font-size: inherit;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
letter-spacing: inherit;
overflow: auto;
padding-block: var(--size-1);
padding-inline: var(--size-2);
resize: block;
touch-action: manipulation;
+ &:focus {
+ border: var(--size-xs) solid var(--gray-5) !important;
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(104, 104, 104, 0.7);
+ outline: var(--gray-5);
+ }
}
--
GitLab