VEGA-4499: адаптация UI главной страницы документации

2025-08-25 11:21:09 +00:00
parent 2ce47117e1
commit baca55494c
140 changed files with 2458 additions and 325 deletions
@@ -0,0 +1,104 @@
+@use '@beeline/design-tokens/scss/tokens/components/textarea' as *;
+@use '@beeline/design-tokens/scss/tokens/components/formfield';
+@use '@beeline/design-tokens/scss/tokens/themes';
+
+.textarea-field {
+  $px: 16px;
+
+  display: block;
+  width: 100%;
+  position: relative;
+  padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom;
+  height: $textarea-without-label-medium-height;
+  background: formfield.$formfield-background-color;
+  border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color;
+  border-radius: formfield.$formfield-border-radius;
+
+  & &__label {
+    position: absolute;
+    top: $textarea-with-label-text-margin-top;
+    left: $px;
+    transition: font-size 300ms ease-out;
+    color: formfield.$formfield-label-color;
+  }
+
+  & textarea {
+    height: $textarea-medium-text-height;
+    width: 100%;
+    outline: none;
+    border: none;
+    box-shadow: none;
+    resize: none;
+    background-color: transparent;
+    color: themes.$color-text-active;
+  }
+
+  & &__resizer {
+    position: absolute;
+    bottom: $textarea-resizer-margin-bottom;
+    right: $textarea-resizer-margin-right;
+    rotate: -45deg;
+    width: 1em;
+    height: 1em;
+
+    &:hover {
+      cursor: nwse-resize;
+    }
+
+    &::before {
+      content: '';
+      display: flex;
+      background-color: darkslategrey;
+      width: 10px;
+      height: 1px;
+    }
+
+    &::after {
+      content: '';
+      display: flex;
+      position: relative;
+      right: -3px;
+      bottom: -2px;
+      background-color: darkslategrey;
+      width: 4px;
+      height: 1px;
+    }
+  }
+
+  &.textarea-field--with-label {
+    height: $textarea-with-label-medium-height;
+    padding-top: $textarea-with-label-text-margin-top;
+
+    &.textarea-field--floated .textarea-field__label {
+      top: $textarea-medium-label-floated-margin-top;
+      line-height: $textarea-small-label-floated-font-line-height;
+      font-size: $textarea-small-label-floated-font-size;
+    }
+
+    &.textarea-field--small {
+      height: $textarea-with-label-small-height;
+      padding-top: $textarea-small-label-margin-top;
+      top: $textarea-small-label-floated-margin-top;
+
+      & .textarea-field__label {
+        font-size: $textarea-small-label-font-size;
+        font-weight: $textarea-small-label-font-weight;
+        letter-spacing: $textarea-small-label-font-letter-spacing;
+      }
+    }
+  }
+
+  &.textarea-field--focused {
+    border-color: formfield.$formfield-border-color-focus;
+    background-color: transparent;
+  }
+
+  &.textarea-field--small {
+    padding-top: $textarea-without-label-small-text-margin-top;
+    height: $textarea-without-label-small-height;
+
+    & textarea {
+      height: $textarea-small-text-height;
+    }
+  }
+}