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,70 @@
+@use '@beeline/design-tokens/scss/tokens/components/textfield' as *;
+@use '@beeline/design-tokens/scss/tokens/globals';
+@use '@beeline/design-tokens/scss/tokens/themes' as theme;
+
+.textfield {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: globals.$size-control-height-medium;
+  border: globals.$size-border-width-regular solid transparent;
+  padding-top: $textfield-without-label-medium-text-margin-vertical;
+  padding-bottom: $textfield-without-label-medium-text-margin-vertical;
+  background-color: theme.$color-control-background;
+  border-radius: 12px; // globals.$size-border-radius-x6;
+
+  &:hover {
+    background-color: theme.$color-control-background-hover;
+  }
+
+  // input
+  input {
+    outline: none;
+    box-shadow: none;
+  }
+
+  // label
+  &--with-label {
+    // padding-top: $textfield-with-label-medium-text-margin-top;
+    // padding-bottom: $textfield-with-label-medium-text-margin-bottom;
+  }
+
+  &__label {
+    // padding-top: $textfield-medium-label-margin-top;
+
+    &.textfield__label--floated {
+      // padding-top: $textfield-medium-label-margin-top-floated;
+    }
+  }
+
+  // small
+  &--small {
+    height: globals.$size-control-height-small;
+  }
+
+  // large
+  &--large {
+    height: globals.$size-control-height-large;
+    padding-top: $textfield-without-label-large-text-margin-vertical;
+    padding-bottom: $textfield-without-label-large-text-margin-vertical;
+
+    &.textfield--with-label {
+      padding-top: $textfield-with-label-large-text-margin-top;
+      padding-bottom: $textfield-with-label-large-text-margin-bottom;
+    }
+
+    .textfield__label {
+      padding-top: $textfield-large-label-margin-top;
+
+      &.textfield__label--floated {
+        padding-top: $textfield-large-label-margin-top-floated;
+      }
+    }
+  }
+
+  // states
+  &--focused {
+    border-color: theme.$color-border-focus;
+    background-color: theme.$color-background-base;
+  }
+}