<div tabindex="1" class="c-dropdown c-dropdown--filter u-cursor-pointer u-relative u-flex u-items-center u-justify-between u-p-xsmall">
<div class="u-size-4-5">
<span class="c-dropdown__label u-block">Quando</span>
<span class="u-label-04 u-truncate u-truncate-1">Prossima settimana</span>
</div>
<svg class="o-icon 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-absolute u-shadow">
<ul class="c-dropdown__list u-overflow-auto u-list-none u-m-none u-p-none">
<span class="c-dropdown__label u-block">Category</span>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline " href="http://www.today.it" title="">item: 1</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<label class="c-form-checkbox">
<span class="u-label-03 u-color-base">Label</span>
<input type="checkbox" checked="checked">
<span class="c-form-checkbox__mark"></span>
</label>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline " href="http://www.today.it" title="">item: 2</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<label class="c-form-checkbox">
<span class="u-label-03 u-color-base">Label</span>
<input type="checkbox" checked="checked">
<span class="c-form-checkbox__mark"></span>
</label>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline " href="http://www.today.it" title="">item: 3</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<label class="c-form-checkbox">
<span class="u-label-03 u-color-base">Label</span>
<input type="checkbox" checked="checked">
<span class="c-form-checkbox__mark"></span>
</label>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline " href="http://www.today.it" title="">item: 4</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<label class="c-form-checkbox">
<span class="u-label-03 u-color-base">Label</span>
<input type="checkbox" checked="checked">
<span class="c-form-checkbox__mark"></span>
</label>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall ">
<a class="u-label-07 u-color-base u-no-underline" href="http://www.today.it" title="">last item</a>
</li>
<span class="c-dropdown__label u-block">Category</span>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline" href="http://www.today.it" title="">item: 1</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<label class="c-form-checkbox">
<span class="u-label-03 u-color-base">Label</span>
<input type="checkbox" checked="checked">
<span class="c-form-checkbox__mark"></span>
</label>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline" href="http://www.today.it" title="">item: 2</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<label class="c-form-checkbox">
<span class="u-label-03 u-color-base">Label</span>
<input type="checkbox" checked="checked">
<span class="c-form-checkbox__mark"></span>
</label>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline" href="http://www.today.it" title="">item: 3</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<label class="c-form-checkbox">
<span class="u-label-03 u-color-base">Label</span>
<input type="checkbox" checked="checked">
<span class="c-form-checkbox__mark"></span>
</label>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline" href="http://www.today.it" title="">item: 4</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<label class="c-form-checkbox">
<span class="u-label-03 u-color-base">Label</span>
<input type="checkbox" checked="checked">
<span class="c-form-checkbox__mark"></span>
</label>
</li>
</ul>
<button class="c-btn c-btn--primary c-btn--large u-mt-small u-label-04 u-size-full u-cursor-pointer u-text-center">
Filtra
</button>
</div>
</div>
<div tabindex="1" class="c-dropdown {% if right %}c-dropdown--right{% endif %} {% if modifier %}c-dropdown--{{modifier}}{% endif %} u-cursor-pointer u-relative u-flex u-items-center u-justify-between u-p-xsmall">
<div class="u-size-4-5">
<span class="c-dropdown__label u-block">{{label}}</span>
{% if modifier=="filter" %}
<span class="u-label-04 u-truncate u-truncate-1">{{filter}}</span>
{% endif %}
</div>
<svg class="o-icon 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-absolute u-shadow">
<ul class="c-dropdown__list u-overflow-auto u-list-none u-m-none u-p-none">
<span class="c-dropdown__label u-block">Category</span>
{% for i in range(1, 5) %}
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline " href="http://www.today.it" title="">item: {{i}}</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
{% render "@checkbox",{small:true},true %}
</li>
{%- endfor %}
<li class="c-dropdown__item u-px-small u-py-xxsmall ">
<a class="u-label-07 u-color-base u-no-underline" href="http://www.today.it" title="">last item</a>
</li>
<span class="c-dropdown__label u-block">Category</span>
{% for i in range(1, 5) %}
<li class="c-dropdown__item u-px-small u-py-xxsmall">
<a class="u-label-07 u-color-base u-no-underline" href="http://www.today.it" title="">item: {{i}}</a>
</li>
<li class="c-dropdown__item u-px-small u-py-xxsmall">
{% render "@checkbox",{small:true},true %}
</li>
{%- endfor %}
</ul>
{% if action %}
<button class="c-btn c-btn--primary c-btn--large u-mt-small u-label-04 u-size-full u-cursor-pointer u-text-center">
Filtra
</button>
{% endif %}
</div>
</div>
{
"label": "Quando",
"item": "Dropdown Item",
"modifier": "filter",
"filter": "Prossima settimana",
"action": true
}
// 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" %}