feat: ui components

src/shared/ui/text-area/text-area.module.scss

@@ -0,0 +1,103 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: max-content;
+  /* Allows the `resize` property to work on the div */
+  overflow: hidden;
+
+  &_fullWidth{
+    width: 100%;
+  }
+}
+
+.Area {
+  background: $color-white;
+  border: 1px solid $color-darkgray;
+  border-radius: 20px;
+  padding: 10px 24px;
+  transition: border ease .5s;
+
+  font-family: $font-open-sans;
+  font-weight: $font-regular;
+  font-size: 24px;
+  line-height: 100%;
+  color: $color-text;
+
+  resize: none;
+  display: block;
+  width: 100%;
+  flex-grow: 1;
+
+  /* scrollbar */
+  & {
+    /* Arrow mouse cursor over the scrollbar */
+    cursor: auto;
+  }
+  &::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    background-clip: content-box;
+    border: 4px solid transparent;
+    border-radius: 12px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: #333; // цвет дорожки
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #999; // цвет указателя
+  }
+  @media (hover: hover) {
+    :where(&:not(:disabled))::-webkit-scrollbar-thumb:hover {
+      background-color: #999;
+    }
+  }
+  &:where(:autofill) {
+    /* Reliably removes native autofill colors */
+    background-clip: text;
+    -webkit-text-fill-color: #999;
+  }
+
+
+  &:focus {
+    border-color: $color-orange;
+    transition: border-color ease .5s;
+  }
+
+  &:hover {
+    border-color: $color-text;
+    transition: border-color ease .5s;
+  }
+
+  &:focus:hover {
+    border-color: $color-orange;
+    transition: border-color ease .5s;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &_ghost {
+    background: transparent;
+    color: $color-white;
+
+    &:focus {
+      border-color: $color-orange;
+      transition: border-color ease .5s;
+    }
+
+    &:hover {
+      border-color: $color-white;
+      transition: border-color ease .5s;
+    }
+
+    &:focus:hover {
+      border-color: $color-orange;
+      transition: border-color ease .5s;
+    }
+  }
+}