[UI] Text area new theme (#9873)

NuGet · May 16, 2024 · 0f19795 · 0f19795
1 parent d1b3cca
commit 0f19795
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 0 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
diff --git a/src/Bootstrap/less/forms.less b/src/Bootstrap/less/forms.less
@@ -189,6 +189,63 @@ output {
   }
 }
 
+textarea.textarea-brand {
+  color: var(--neutralForeground1Rest);
+  background-color: var(--neutralBackground1Rest);
+  border-radius: 4px;
+  border: 1px solid var(--neutralStroke1Rest);
+  border-bottom: 2px solid var(--neutralStrokeAccessibleRest);
+
+  outline: none !important;
+  box-shadow: none !important;
+
+  &:hover {
+    border: 1px solid var(--neutralStroke1Hover);
+    border-bottom: 2px solid var(--neutralStrokeAccessibleHover);
+  }
+
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    border: 1px solid var(--neutralStroke1Rest);
+    border-bottom: 2px solid var(--brandStrokeCompoundRest);
+  }
+
+  &[disabled] {
+    background-color: transparent;
+    color: var(--neutralForegroundDisabledRest);
+    border-color: var(--neutralStrokeDisabledRest);
+
+    // Firefox
+    &::-moz-placeholder {
+      color: var(--neutralForegroundDisabledRest);
+      opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+    }
+    &:-ms-input-placeholder { color: var(--neutralForegroundDisabledRest); } // Internet Explorer 10+
+    &::-webkit-input-placeholder  { color: var(--neutralForegroundDisabledRest); } // Safari and Chrome
+  }
+
+  &[readonly] {
+    background-color: transparent;
+    border-color: var(--neutralStrokeDisabledRest);
+
+    // Firefox
+    &::-moz-placeholder {
+      color: var(--neutralForeground1Rest);
+      opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+    }
+    &:-ms-input-placeholder { color: var(--neutralForeground1Rest); } // Internet Explorer 10+
+    &::-webkit-input-placeholder  { color: var(--neutralForeground1Rest); } // Safari and Chrome
+  }
+
+  // Firefox
+  &::-moz-placeholder {
+    color: var(--neutralForeground4Rest);
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
+  &:-ms-input-placeholder { color: var(--neutralForeground4Rest); } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: var(--neutralForeground4Rest); } // Safari and Chrome
+}
 
 // Special styles for iOS temporal inputs
 //