CSS tidy ups

cultureamp · Oct 22, 2024 · 01881f0 · 01881f0
1 parent edfe2c3
commit 01881f0
Showing 1 changed file with 9 additions and 32 deletions.
diff --git a/packages/components/src/TextArea/TextArea.module.css b/packages/components/src/TextArea/TextArea.module.css
@@ -17,7 +17,8 @@
   visibility: hidden;
 }
 
-.textareaAutogrow,
+/* these properties need to be set on both for autogrow to work properly */
+.textarea,
 .wrapperAutogrow::after {
   border: var(--border-solid-border-width) var(--border-solid-border-style)
     var(--color-gray-500);
@@ -26,11 +27,18 @@
   box-sizing: border-box;
   width: 100%;
   font: inherit;
+}
+
+.textAreaAutogrow,
+.wrapperAutogrow::after {
   grid-area: 2 / 1;
 }
 
 .textarea {
   display: block;
+  border: var(--border-solid-border-width) var(--border-solid-border-style);
+  border-radius: var(--border-solid-border-radius);
+  padding: var(--spacing-sm);
   resize: vertical;
 
   &:focus {
@@ -42,19 +50,6 @@
   &:disabled {
     resize: none;
   }
-
-  &::-webkit-input-placeholder,
-  &:-moz-placeholder,
-  &:-ms-input-placeholder {
-    font-family: var(--typography-paragraph-body-font-family);
-    font-size: var(--typography-paragraph-body-font-size);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    line-height: var(--typography-paragraph-body-line-height);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
-    position: static;
-    line-height: 1.5;
-    color: rgba(var(--color-purple-800-rgb), 0.7);
-  }
 }
 
 .textareaAutogrow {
@@ -102,12 +97,6 @@
     background-color: var(--color-white);
     border-color: rgba(var(--color-gray-500-rgb), 0.3);
     color: rgba(var(--color-purple-800-rgb), 0.3);
-
-    &::-webkit-input-placeholder,
-    &:-moz-placeholder,
-    &:-ms-input-placeholder {
-      opacity: 0.3;
-    }
   }
 }
 
@@ -123,12 +112,6 @@
     border-color: var(--color-white);
   }
 
-  &::-webkit-input-placeholder,
-  &:-moz-placeholder,
-  &:-ms-input-placeholder {
-    color: var(--color-white);
-  }
-
   &:focus {
     outline-color: var(--color-blue-300);
   }
@@ -157,11 +140,5 @@
     background: transparent;
     border-color: rgba(var(--color-white-rgb), 0.3);
     color: rgba(var(--color-white-rgb), 0.3);
-
-    &::-webkit-input-placeholder,
-    &:-moz-placeholder,
-    &:-ms-input-placeholder {
-      opacity: 0.3;
-    }
   }
 }