TASK: Better form-input-wrapper

src/components/form-input-wrapper/form-input-wrapper.tsx

@@ -18,6 +18,11 @@ export class FormInputWrapper {
         <div class="metadata">
           <slot name="metadata"/>
         </div>
+        <div class="content">
+          <slot name="before"/>
+          <slot/>
+          <slot name="after"/>
+        </div>
       </div>
     );
   }

src/components/form-input-wrapper/styles/form-input-wrapper.dark.scss

@@ -11,9 +11,16 @@
 
   .label-wrapper {
     flex: 1;
+    flex-wrap: wrap;
   }
 
   .metadata {
     margin-left: auto;
   }
+
+  .content {
+    display: flex;
+    align-items: center;
+    flex: 1 0 100%;
+  }
 }

src/components/form-input/form-input.tsx

@@ -250,9 +250,7 @@ export class FormInput {
     return (
       <label>
         <neos-form-input-wrapper label={this.label}>
-          <slot name="metadata"/>
-        </neos-form-input-wrapper>
-        <div class="input">
+          <slot name="metadata" slot="metadata"/>
           <slot name="before"/>
           <input
             ref={input => this.nativeInput = input as any}
@@ -286,7 +284,7 @@ export class FormInput {
             onKeyDown={this.inputKeydown.bind(this)}
           />
           <slot name="after"/>
-        </div>
+        </neos-form-input-wrapper>
       </label>
     );
   }

src/components/form-input/styles/form-input.dark.scss

@@ -34,7 +34,8 @@
 input {
   background-color: $background-dark-color;
   border: 0;
-  outline: 1px solid neos-color($colors-dark, 'darker');
+  outline: 1px solid transparent;
+  outline-offset: 0;
   box-sizing: content-box;
   color: inherit;
 
@@ -43,7 +44,8 @@ input {
 
   &:focus:enabled,
   &:hover:enabled {
-    outline: 1px solid neos-color($colors-dark, 'primary');
+    outline: 2px solid neos-color($colors-dark, 'primary');
+    outline-offset: -2px;
   }
 
   &:focus:enabled {

src/components/form-input/styles/form-input.scss

@@ -14,7 +14,7 @@ input {
   height: $grid-unit;
   line-height: $grid-unit;
 
-  transition: all ease-in 100ms;
+  transition: all ease-in 180ms;
 }
 
 .input {