<div class="form-select " id="where">
<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="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Placeholder</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where1" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where2" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where3" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="where3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
<div class="form-select {{#if distinguisher}}form-select-distinguisher_{{ distinguisher }}{{/if}}{{#if isDisabled}} disabled{{/if}}{{#if isError}} error{{/if}}{{#if isBGTransparent}} bgtransparent{{/if}}{{#if isBGAccentLight}} bgaccentlight{{/if}}"
id="{{ id }}">
{{> @field-top field-top }}
{{#if net}}
{{> @access-select-net select }}
{{else}}
{{> @access-select select }}
{{/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"
}
}
},
"extraclass": "caption-placeholder-m",
"id": "where",
"select": {
"chosen-placeholder": "Placeholder",
"option": [
{
"id": "where1",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where2",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "where3",
"select-name": "where",
"text": "Provincia 3"
}
]
}
}
.form-select {
margin-bottom: 20px;
position: relative;
.access-select {background-color: var(--color-white);
.list-is-open + .access-select__list {
max-height: 350px;
overflow-y: auto;
}
}
&.disabled {
.access-select {
background-color: var(--color-grey-light);
border-color: var(--color-quinary);
&__chosen-option {
border-color: var(--color-quinary);
}
}
}
&.bgtransparent {
.access-select {
background: transparent;
}
}
&.bgaccentlight {
.access-select {
background-color: var(--color-accent-light);
&__chosen-option {
border-color: var(--color-accent-light);
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
.list-is-open + .access-select__list {
background-color: var(--color-accent-light);
border-color: var(--color-accent-light);
}
.access-select__item:last-child {
border-color: var(--color-accent-light);
}
.access-select__option {
border-color: var(--color-accent-light);
&:hover,
&:focus {
border-color: var(--color-secondary);
}
}
}
}
&.error {
.access-select {
border-color: var(--color-danger);
color: var(--color-danger);
&__chosen-option {
border-color: var(--color-danger);
}
}
.field-bottom {
&__error-message {
display:block;
position:relative;
}
&__helper-text{display:none;}
}
}
}
No notes defined.