<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="5.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="form-input{{#if isDisabled}} disabled{{/if}}{{#if isError}} error{{/if}}{{#if isBGTransparent}} bgtransparent{{/if}}{{#if isBGAccentLight}} bgaccentlight{{/if}}" {{#if isHidden}} style="display:none"{{/if}}>
{{> @field-top field-top }}
<div class="form-input__fieldset {{#if disabled}}disabled{{/if}}">
<input
class="form-input__input {{extraClasses}}"
id="{{ inputId }}"
type="text"
name="{{name}}"
title="{{ inputTitle }}"
value="{{ inputValue }}"
{{#if disabled}} disabled{{/if}}
{{#if validationAttributes}}
{{{ validationAttributes }}}
{{/if}}
>
<div class="form-input__symbol" for="{{ inputId }}">
{{> @bodycopy-xs symbol }}
</div>
</div>
{{> @field-bottom field-bottom }}
{{#if date}} <!-- No sé para que sirve y sólo lo conservo para no romper nada (CA) -->
<div class="date" id="{{ idDate }}">
{{> @bodycopy-m date}}
</div>
{{/if}}
</div>
{
"field-top": {
"label": {
"text": "Field Text"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "5.000",
"symbol": {
"text": "€"
}
}
.form-input {
margin-bottom: 20px;
width: 100%;position: relative;
&__fieldset {
display: flex;flex-direction: row;justify-content: flex-end;align-items: flex-end;
position: relative;background-color: var(--color-white);
border: 1px solid var(--color-grey3);
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
&__input {
height: 48px;
width: 100%;
padding: 17px 5px 11px 14px;
text-align: right;
font-family: 'Jornada News Book';
font-size: 29px;
font-weight: 400;
line-height: 36px;
letter-spacing: 0;
border: 0;
color: var(--color-text);
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
&__symbol {
padding-bottom: 7px;
padding-right: 14px;
white-space: nowrap;
text-transform: uppercase;
.bodycopy-xs{
color: var(--color-grey2);
}
}
&.disabled{
.form-input__fieldset {
background-color: var(--color-grey-light);
border-color: var(--color-quinary);
color: var(--color-grey2);
}
.form-input__input {
color: var(--color-grey2);
}
.form-input__symbol .text-label-m{
color: var(--color-grey2);
}
}
&.bgtransparent{
.form-input__fieldset {
background: transparent;
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
}
&.bgaccentlight{
.form-input__fieldset {
background-color: var(--color-accent-light);
border-color: var(--color-accent-light);
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
}
&.error {
.form-input__fieldset {
border-color: var(--color-danger);
}
.field-bottom {
&__error-message {
display:block;
position: relative;
}
&__helper-text{display:none;}
}
}
.date{
.bodycopy-m{
margin-top:10px;
text-align: right;
}
}
}
Variantes: Disabled, Error, BG Transparent, BG AccentLight, Hidden, With lightbox. Permite configurar id del campo, id, title y value del input, for para el label e id para el date