<div class="functionality-bar">
<ul>
<li>
<div class="wrap"><a href=""><span class="bodycopy-s">Ordenar por: <span>Ninguno</span></span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --><svg class="icon icon-16_sort ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_sort"></use>
</svg>
</a></div>
<div class="dropdown-menu__wrap">
<div class="dropdown-menu__overlay dropdown-menu--open"></div>
<div class="dropdown-menu dropdown-menu--open" tabindex="-1">
<div class="dropdown-menu__close">
<button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<nav class="dropdown-menu__list">
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="caption"></span>
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Fecha: más reciente</span>
</a>
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Fecha: más lejana</span>
</a>
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Fondos: menor a mayor</span>
</a>
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Fondos: mayor a menor</span>
</a>
</nav>
</div>
</div>
</li>
<li>
<div class="wrap"><a href=""><span class="bodycopy-s">Compartir resultados</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --><svg class="icon icon-16_share ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_share"></use>
</svg>
</a></div>
</li>
<li>
<div class="wrap"><a href=""><span class="bodycopy-s">Descargar listado (.pdf)</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --><svg class="icon icon-16_download ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_download"></use>
</svg>
</a></div>
</li>
</ul>
</div>
<div class="functionality-bar{{#if item-data}} withData{{/if}}">
{{#if item-data}}
<ul>
{{#each item-data}}
<li>
<div class="wrap">{{> @icon icon}}{{>@caption label}}</div>
</li>
{{/each}}
</ul>
{{/if}}
<ul>
{{#each item}}
<li>
<div class="wrap"><a href="{{link}}">{{>@bodycopy bodycopy}}{{> @icon icon}}</a></div>
{{#if options}}{{> @dropdown-menu options}}{{/if}}
</li>
{{/each}}
</ul>
</div>
{
"item": [
{
"bodycopy": {
"text": "Ordenar por: <span>Ninguno</span>",
"type": "-s"
},
"icon": {
"name": "16_sort"
},
"options": {
"isOpen": "dropdown-menu--open",
"menuList": [
{
"date": true,
"state": "active",
"text": "Fecha: más reciente"
},
{
"date": false,
"state": "active",
"text": "Fecha: más lejana"
},
{
"date": false,
"state": "active",
"text": "Fondos: menor a mayor"
},
{
"date": false,
"state": "active",
"text": "Fondos: mayor a menor"
}
]
}
},
{
"bodycopy": {
"text": "Compartir resultados",
"type": "-s"
},
"icon": {
"name": "16_share"
}
},
{
"bodycopy": {
"text": "Descargar listado (.pdf)",
"type": "-s"
},
"icon": {
"name": "16_download"
}
}
]
}
.functionality-bar {
display: flex;
justify-content: flex-end;
padding: 16px 0;
border-bottom: solid 1px var(--color-border);
ul {
display: flex;
justify-content: flex-end;
gap: 24px;
@media (--viewport-ms-max) {
width: 100%;
}
li {
position: relative;
width: fit-content;
.wrap {
display: flex;
align-items: center;
gap: 8px;
a {
display: flex;
align-items: center;
gap: 8px;
}
.icon {
fill: var(--color-icon-accent);
}
}
.dropdown-menu--open {
right: 0;
top: unset;
}
}
@media (--viewport-ms-max) {
li {
.wrap {
a {
span {
display: none;
}
}
}
&:first-child {
flex-grow: 1;
.wrap {
a {
span {
display: inline;
}
}
}
align-self: start;
}
}
}
}
&.withData {
justify-content: space-between;
align-items: center;
ul:first-of-type {
li {
.wrap {
.icon {
fill: var(--color-icon);
}
}
}
}
@media (--viewport-sm-max) {
ul:last-of-type {
li {
.wrap {
.bodycopy-s{display: none;}
}
}
}
}
@media (--viewport-ms-max) {
flex-direction: column;
gap: 32px;
ul:first-of-type {flex-wrap: wrap;justify-content: flex-start;gap:16px;
li {
.wrap {
white-space: nowrap;
}
&:first-child{
flex-grow: unset;
}
}
}
ul:last-of-type {justify-content: flex-start;
li {
&:first-child{
flex-grow: unset;
}
}
}
}
}
}
No notes defined.