Commit 46bd211d authored by Dominique Feyer's avatar Dominique Feyer

TASK: Extract input-label from form-input

parent 52e1215d
import {Component, Prop} from '@stencil/core';
@Component({
tag: 'neos-form-input-label',
styleUrl: 'styles/form-input-label.dark.scss',
shadow: true
})
export class FormInputLabel {
@Prop() label: string;
render() {
return (
<div class="label">
<neos-label label={this.label}></neos-label>
<div class="metadata">
<slot/>
</div>
</div>
);
}
}
@import "./form-input-label";
@import "./form-input-label.dark.vars";
:host {
color: $text-dark-color-value;
font-family: $font-family-dark-base;
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
.metadata {
margin-left: auto;
}
}
@import "./form-input-label.vars";
:host {
@include font-smoothing();
}
.label {
display: flex;
align-items: flex-end;
}
......@@ -249,12 +249,9 @@ export class FormInput {
render() {
return (
<label>
<div class="label">
<neos-label label={this.label}></neos-label>
<div class="metadata">
<slot name="metadata"/>
</div>
</div>
<neos-form-input-label label={this.label}>
<slot name="metadata"/>
</neos-form-input-label>
<div class="input">
<slot name="before"/>
<input
......
......@@ -57,12 +57,3 @@ input {
opacity: .85;
}
}
.label {
display: flex;
align-items: center;
}
.metadata {
margin-left: auto;
}
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