<div class="form-fieldset bgtransparent" id="">
<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> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
</div>
</div>
<div class="form-fieldset{{#if isValid}} valid{{/if}}{{#if textarea}} textarea{{/if}}{{#if isDisabled}} disabled{{/if}}{{#if isError}} error{{/if}}{{#if isBGTransparent}} bgtransparent{{/if}}{{#if isBGAccentLight}} bgaccentlight{{/if}}{{#if password}} password{{/if}}" {{password}} id="{{ id }}">
{{> @field-top field-top }}
{{#if textarea}}
{{> @input textarea }}
{{else}}
{{> @input input }}
{{/if}}
{{#if password}}
<div class="form-fieldset__show-password {{show}}">
{{#if show}}
{{ render '@icon--16-eye-on' }}
{{else}}
{{ render '@icon--16-eye-off' }}
{{/if}}
</div>
<div class="form-fieldset__show-close {{show}}">
{{ render '@icon--16-close' }}
</div>
{{else}}
<div class="form-fieldset__valid-indicator">
{{ render '@icon--icon-check' }}
</div>
{{/if}}
{{> @field-bottom field-bottom }}
</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"
}
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"password": "",
"show": "",
"isBGTransparent": true
}
.form-fieldset {
margin-bottom: 20px;
position: relative;
.input {
background-color: var(--color-white);
padding-right: 41px;
}
&.password{
.input{
padding-right: 67px;
}
}
&__valid-indicator {
opacity: 0;
position: absolute;
right: 15px;
top: 57px;
.icon {
fill: var(--color-valid);
height: 16px;
width: 16px;
}
}
&__show-password {
position: absolute;
right: 41px;
top: 57px;
.icon {
fill: var(--color-icon);
height: 16px;
width: 16px;
}
}
&__show-close {
position: absolute;
right: 15px;
top: 57px;
.icon {
fill: var(--color-icon);
height: 16px;
width: 16px;
}
}
&.valid {
.form-fieldset__valid-indicator {
opacity: 1;
}
/*.input{
border-color: var(--color-valid);
}*/
}
.icon-eye {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
left: initial;
right: 12px;
}
&.disabled {
.input {
background-color: var(--color-grey-light);
border-color: var(--color-quinary);
color: var(--color-grey2);
padding-right: 15px;
&:focus {
color: var(--color-text);
}
}
}
&.bgtransparent {
.input {
background: transparent;
&:focus {
color: var(--color-text);
}
}
}
&.bgaccentlight {
.input {
background-color: var(--color-accent-light);
border-color: var(--color-accent-light);
&:hover,
&:focus {
border-color: var(--color-secondary);
}
&:focus {
color: var(--color-text);
}
}
}
&.password {
.field-text__show-password.hide {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
left: initial;
right: 15px;
opacity: 1;
display: block;
.icon-eye {
width: 15px;
height: 15px
}
&.show {
opacity: .3;
}
}
}
&.error {
.input {
border-color: var(--color-danger);
color: var(--color-danger);
&:focus {
color: var(--color-text);
}
}
.field-bottom {
&__error-message {
display: block;
position: relative;
}
&__helper-text {
display: none;
}
}
}
}
No notes defined.