fixed text inputs

src/components/main/SidePane/index.tsx

@@ -12,8 +12,9 @@ export const SidePane: FC<IProps> = ({
   const [left, setLeft] = useState(0);
 
   const moveThis = useCallback(() => {
-    const shift = window.innerWidth > (content_width + 64 + 20)
-      ? ((window.innerWidth - content_width - 64 - 20) / 2) - 54 + 64 // + content_width + 74
+    const { width } = document.body.getBoundingClientRect();
+    const shift = width > (content_width + 64 + 20)
+      ? ((width - content_width - 64 - 20) / 2) - 54 + 64 // + content_width + 74
       : 10;
 
     setLeft(shift);

src/containers/examples/EditorExample/index.tsx

@@ -12,6 +12,7 @@ import { Grid } from "~/components/containers/Grid";
 import { Tags } from "~/components/node/Tags";
 import { Button } from "~/components/input/Button";
 import { Filler } from "~/components/containers/Filler";
+import { InputText } from "~/components/input/InputText";
 
 interface IProps {}
 
@@ -28,7 +29,11 @@ const EditorExample: FC<IProps> = () => (
         <Group horizontal className={styles.group} seamless>
           <div className={styles.editor}>
             <Panel>
-              <TextInput onChange={console.log} label="Название" />
+              <TextInput onChange={console.log} label="Название" value="Значение" />
+            </Panel>
+
+            <Panel>
+              <InputText title="Заголовок" />
             </Panel>
 
             <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>

src/styles/colors.scss

@@ -31,7 +31,7 @@ $text_small: 14px;
 $text_big: 20px;
 $text_sign: 22px;
 
-$input_bg_color: transparentize(black, 0.8);
+$input_bg_color: darken($content_bg, 2%);
 $button_bg_color: $red_gradient;
 
 $comment_bg: lighten($main_bg_color, 0%);

src/styles/inputs.scss

@@ -2,21 +2,24 @@
   position: relative;
   min-height: 40px;
   border-radius: $input_radius;
-  box-shadow: $input_shadow;
+  //box-shadow: $input_shadow;
   flex: 1;
   display: flex;
   opacity: 1;
   transition: opacity 0.25s;
   z-index: 1;
 
+  @include inner_shadow();
+  background: $input_bg_color;
+
   &::before {
     content: ' ';
-    background: linear-gradient(270deg, white $gap, transparentize(white, 1));
+    background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
     position: absolute;
     width: $gap * 2;
-    height: $input_height - 4px;
-    top: 2px;
-    right: 2px;
+    height: $input_height;
+    top: 0;
+    right: 1px;
     transform: translateX(0);
     transition: transform 0.25s;
     border-radius: 0 $input_radius $input_radius 0;
@@ -52,7 +55,7 @@
     }
 
     .title {
-      color: transparentize(black, 0.3);
+      color: transparentize(white, 0.3);
     }
   }
 
@@ -67,6 +70,7 @@
     padding: 0 18px;
     flex: 1 0 0;
     outline: none;
+    color: white;
   }
 
   &.required {
@@ -106,7 +110,7 @@
     &.focused {
       .title {
         padding-right: 16px;
-        color: black;
+        color: transparentize(white, 0.3);
       }
     }
   }
@@ -183,7 +187,7 @@
     font: inherit;
     box-sizing: border-box;
     background: transparent;
-    color: black;
+    color: white;
     flex: 1;
     resize: none;
   }
@@ -227,7 +231,7 @@
     width: 100%;
     top: 12px;
     bottom: auto;
-    padding: 0 14px;
+    padding: 0 16px;
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
@@ -235,34 +239,36 @@
     transition: top 0.25s, bottom 0.25s, font 0.25s, color 0.25s;
     pointer-events: none;
     touch-action: none;
-    color: transparentize(black, 0.3);
+    color: transparentize(white, 0.3);
     text-transform: capitalize;
 
     span {
-      background: white;
+      font: $font;
+      //background: $input_bg_color;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding: 0 5px;
+      padding: 0 2px;
+      text-transform: uppercase;
     }
   }
 
   &.focused .title, &.has_value .title {
-    font: $font_12_regular;
-    top: -10px;
+    font: $font_10_semibold;
+    top: -6px;
     bottom: auto;
   }
 
   &.has_value {
-    box-shadow: $input_shadow_filled;
+    //box-shadow: $input_shadow_filled;
 
     .title {
-      color: #C2C2C2;
+      color: transparentize(white, 0.3);
     }
 
     &.focused {
       .title {
-        color: transparentize(black, 0.3);
+        color: transparentize(white, 0.3);
       }
     }
   }

src/styles/variables.scss

@@ -58,7 +58,7 @@ $node_shadow:  transparentize(black, 0.8) 1px 2px;
 
 $tag_height: 22px;
 
-$input_shadow: inset white 0 0 0 1px;
+$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
 $input_shadow_error: inset $red 0 0 0 1px;
 $input_shadow_filled: $input_shadow;