Commit 78458976 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Better form-input-wrapper

parent 2d789138
Pipeline #2040 failed with stage
in 54 seconds
......@@ -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>
);
}
......
......@@ -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%;
}
}
......@@ -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>
);
}
......
......@@ -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 {
......
......@@ -14,7 +14,7 @@ input {
height: $grid-unit;
line-height: $grid-unit;
transition: all ease-in 100ms;
transition: all ease-in 180ms;
}
.input {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment