<div tabindex="1" class="c-dropdown c-dropdown--reset c-dropdown--network u-cursor-pointer u-flex u-items-center u-justify-center u-label-05 u-p-small" data-dd-controller>
Edizioni locali
<svg class="o-icon o-icon--animated o-icon--md" data-dd-icon>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
<div class="c-dropdown__panel u-fixed u-bottom u-size-full" data-dd-panel>
<div class="u-flex u-p-medium u-overflow-auto u-size-full">
<div class="u-flex">
<a href="http://www.romatoday.it" title="romatoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-romatoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="milanotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-milanotoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="torinotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-torinotoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="firenzetoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-firenzetoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="padovaoggi">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-padovaoggi.png" alt="">
</a>
<a href="http://www.romatoday.it" title="chietitoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-chietitoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="palermotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-palermotoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="arezzonotizie">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-arezzonotizie.png" alt="">
</a>
<a href="http://www.romatoday.it" title="baritoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-baritoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="lecceprima">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-lecceprima.png" alt="">
</a>
<a href="http://www.romatoday.it" title="ilpiacenza">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-ilpiacenza.png" alt="">
</a>
<a href="http://www.romatoday.it" title="veneziatoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-veneziatoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="trevisotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-trevisotoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="trentotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-trentotoday.png" alt="">
</a>
</div>
<div class="u-flex">
<a href="http://www.romatoday.it" title="romatoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-romatoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="milanotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-milanotoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="torinotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-torinotoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="firenzetoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-firenzetoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="padovaoggi">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-padovaoggi.png" alt="">
</a>
<a href="http://www.romatoday.it" title="chietitoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-chietitoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="palermotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-palermotoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="arezzonotizie">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-arezzonotizie.png" alt="">
</a>
<a href="http://www.romatoday.it" title="baritoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-baritoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="lecceprima">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-lecceprima.png" alt="">
</a>
<a href="http://www.romatoday.it" title="ilpiacenza">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-ilpiacenza.png" alt="">
</a>
<a href="http://www.romatoday.it" title="veneziatoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-veneziatoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="trevisotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-trevisotoday.png" alt="">
</a>
<a href="http://www.romatoday.it" title="trentotoday">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-trentotoday.png" alt="">
</a>
</div>
</div>
</div>
</div>
<div tabindex="1" class="c-dropdown c-dropdown--reset c-dropdown--network u-cursor-pointer u-flex u-items-center u-justify-center u-label-05 u-p-small" data-dd-controller>
{{label}}
<svg class="o-icon o-icon--animated o-icon--md" data-dd-icon>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
<div class="c-dropdown__panel u-fixed u-bottom u-size-full" data-dd-panel>
<div class="u-flex u-p-medium u-overflow-auto u-size-full">
<div class="u-flex">
{% for brand in brands %}
<a href="http://www.romatoday.it" title="{{brand.name}}">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="{{brand.image}}" alt="">
</a>
{%- endfor %}
</div>
<div class="u-flex">
{% for brand in brands %}
<a href="http://www.romatoday.it" title="{{brand.name}}">
<img loading="lazy" preload="none" decoding="async" referrerpolicy="no-referrer" class="c-dropdown__brand u-mr-medium" src="{{brand.image}}" alt="">
</a>
{%- endfor %}
</div>
</div>
</div>
</div>
{
"label": "Edizioni locali",
"item": "Dropdown Item",
"brands": [
{
"name": "romatoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-romatoday.png"
},
{
"name": "milanotoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-milanotoday.png"
},
{
"name": "torinotoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-torinotoday.png"
},
{
"name": "firenzetoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-firenzetoday.png"
},
{
"name": "padovaoggi",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-padovaoggi.png"
},
{
"name": "chietitoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-chietitoday.png"
},
{
"name": "palermotoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-palermotoday.png"
},
{
"name": "arezzonotizie",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-arezzonotizie.png"
},
{
"name": "baritoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-baritoday.png"
},
{
"name": "lecceprima",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-lecceprima.png"
},
{
"name": "ilpiacenza",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-ilpiacenza.png"
},
{
"name": "veneziatoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-veneziatoday.png"
},
{
"name": "trevisotoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-trevisotoday.png"
},
{
"name": "trentotoday",
"image": "https://citynews.stgy.ovh/~shared/images/v2015/brands/citynews-trentotoday.png"
}
]
}
// Name: Dropdown
// Description: Display a list of items in a dropdown menu
//
// Component: `c-dropdown`
//
// Variants: `.c-dropdown--network`
//
// States: `.is-open`
//
//
// ========================================================================
// Variables
// ========================================================================
$dropdown-network-background: var(--theme-color);
$dropdown-brand-size: 50px;
$dropdown-position: 0;
$dropdown-user-panel-size: 200px;
$dropdown-user-panel-top: 46px;
$dropdown-panel-size: 264px;
$dropdown-panel-top: 3rem;
$dropdown-filter-panel-top: 4rem;
// ========================================================================
.c-dropdown {
--dropdown-width: auto;
--dropdown-border-color: var(--form-input-border);
--dropdown-border-radius: #{$global-radius};
--dropdown-background-color: var(--form-input-bg);
width: var(--dropdown-width);
border-width: 1px;
border-style: solid;
border-radius: var(--dropdown-border-radius);
border-color: var(--dropdown-border-color);
background-color: var(--dropdown-background-color);
transition: $global-interactive-transition;
@include bp(md){
--dropdown-width: #{$dropdown-panel-size};
}
//
// States
//
&:hover {
--dropdown-border-color: var(--form-control-hover);
}
&:active,
&:focus {
--dropdown-border-color: #{$active-01};
}
&:focus {
--dropdown-background-color: var(--form-control-bg);
outline: none;
outline-offset: 0;
box-shadow: 0 0 0 .2rem $focus-01;
[data-dd-icon] {
transform: rotate(180deg);
transition: $global-interactive-transition;
}
}
&__item {
cursor: auto;
&:hover {
background-color: var(--background-color-gray);
}
}
&__list {
height: auto;
max-height: 50vh;
}
&__panel {
top: $dropdown-panel-top;
left: 0;
display: none;
width: 140%;
border-width: 1px;
border-style: solid;
border-radius: $global-radius;
border-color: var(--form-input-border);
background-color: var(--background-color);
transition: $global-interactive-transition;
animation: showitem .3s ease-in-out;
@include z(cover);
@include bp(md){
width: 100%;
}
.c-dropdown--right & {
right: 0;
left: auto;
}
.c-dropdown--network & {
top: auto;
background-color: $dropdown-network-background;
}
.c-dropdown--user & {
top: $dropdown-user-panel-top;
left: auto;
width: $dropdown-user-panel-size;
}
.c-dropdown--filter & {
top: $dropdown-filter-panel-top;
}
.c-dropdown:focus-within & {
display: block;
}
.c-dropdown--network:focus-within & {
display: flex;
}
}
&__brand {
width: auto;
min-width: $dropdown-brand-size;
height: $dropdown-brand-size;
transition: transform .35s ease-in-out;
&:hover {
transform: scale(1.3);
}
}
&__label {
cursor: auto;
color: var(--body-secondary-color);
@include type(label-07);
.c-dropdown__panel & {
padding: $padding-small $padding-xsmall;
border-width: 0;
border-top-width: 1px;
border-style: solid;
border-color: var(--divider-color);
&:not(:first-child){
margin-top: $margin-xsmall;
}
}
}
&--network {
--dropdown-width: 100%;
}
&--user {
--dropdown-width: auto;
}
&--reset {
--dropdown-background-color: transparent;
--dropdown-border-color: transparent;
--dropdown-border-radius: 0;
&:hover,
&:focus {
--dropdown-border-color: transparent;
--dropdown-background-color: transparent;
box-shadow: none;
}
& ~ .c-dropdown__panel {
border: transparent;
background-color: transparent;
}
}
}
It comes along with 3 different templates:
dropdown.njk - default layout used for list itemsdropdown--network.njk the list of all the newspapers of the Citynews editorial group, with horizontal layout. This variant, being included in the toolbar component, will be visible only in the desktop versiondropdown--footer.njk the list of all the newspapers of the Citynews editorial group, with a bottom-up view. This variant is called within the footer componentIn order to display a default story template use following syntax:
{% render "@dropdown--network" %}