<div class="c-subheader u-relative">
<div class="o-container u-flex u-column u-row@md u-items-center@md ">
<div class="c-subheader__head u-py-small u-flex u-column u-row@md ">
<a href="#" class="u-no-underline c-subheader__title u-size-fit">
<img decoding="async" referrerpolicy="no-referrer" src="https://citynews.stgy.ovh/~shared/images/v7/channel-custom/vision-logo.svg" class="c-subheader__logo" height="40">
</a>
</div>
<nav class="c-subheader__navbar u-flex u-items-center u-overflow-auto u-gap-medium">
<a href="#" class="c-subheader__item u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Televisione
</a>
<a href="#" class="c-subheader__item c-subheader__item--active u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Streaming
</a>
<a href="#" class="c-subheader__item u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Cinema
</a>
</nav>
</div>
<nav class="c-subheader__subnavbar">
<div class="o-container u-flex u-items-center u-overflow-auto u-gap-small">
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Netflix
</a>
<a href="#" class="c-subheader__item c-subheader__item--active u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Prime
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Disney+
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Sky
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Apple
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Migliori SerieTv
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Al Cinema
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Programmi TV
</a>
</nav>
</div>
</div>
<div class="c-subheader {% if sticky %} u-sticky u-top u-z-cover {% endif %} {% if modifier %} c-subheader--branded {% endif %} u-relative" >
<div class="{% if not wide %}o-container{% else %}u-px-large{% endif %} u-flex {% if not modifier %}u-column u-row@md u-items-center@md {% elif modifier=="sponsor" or modifier %} u-items-center{% endif %} ">
{% if logo %}
<div class="c-subheader__head u-py-small u-flex {% if not modifier %} u-column u-row@md {% else %} u-row u-items-center {% endif %} {% if avatar %}u-items-center{% endif %}">
<a href="#" class="u-no-underline c-subheader__title u-size-fit">
{% if approfondimento %}
<svg viewBox="0 0 146 25" class="c-dossier-logo" xmlns="http://www.w3.org/2000/svg" width="0%" height="auto" fill="none">
<g clip-path="url(#a)">
<path fill="currentColor" d="M43.3 3.7c4.7 0 7.3 3.8 7.3 9.6 0 5.5-2.3 9-5.7 9h-.3c-1.4 0-2-.4-2-2.2V3.7h.7Zm1.8 20c7 0 11.7-4 11.7-11 0-5.9-4-10.4-12.4-10.4h-10v1.3c2 .2 2.2.5 2.2 2v14.8c0 1.6-.2 1.8-2.3 2v1.3h10.8Zm22-1c-2 0-2.6-3.2-2.6-8.2 0-3.9.5-6.2 2.4-6.2 2 0 2.6 3.2 2.6 8.2 0 3.9-.5 6.2-2.4 6.2ZM67 24c5 0 8.5-3.7 8.5-8.8 0-5-3.5-8.2-8.5-8.2s-8.5 3.7-8.5 8.8c0 5 3.5 8.2 8.5 8.2Zm16.2 0c4.1 0 6.8-2 6.8-5.6 0-3.3-2-4.5-5.7-5.8-2-.7-2.9-1.2-2.9-2.5 0-1.1.9-1.8 2.2-1.8 2.1 0 3.5 1.7 3.8 3.7h1.3V8.4A9.7 9.7 0 0 0 83.5 7c-3.6 0-6.3 1.9-6.3 5.3 0 3.1 1.9 4.5 5.3 5.6 2.1.7 3.3 1.2 3.3 2.7 0 1.4-1.2 2.1-2.6 2.1-2.4 0-4-1.9-4.6-4.4h-1.4l.2 4.1c1.3 1 3.3 1.6 5.8 1.6Zm14.5 0c4.1 0 6.8-2 6.8-5.6 0-3.3-2-4.5-5.7-5.8-2-.7-2.9-1.2-2.9-2.5 0-1.1.9-1.8 2.2-1.8 2.1 0 3.5 1.7 3.9 3.7h1.3V8.4A9.7 9.7 0 0 0 98 7c-3.6 0-6.3 1.9-6.3 5.3 0 3.1 2 4.5 5.3 5.6 2.1.7 3.3 1.2 3.3 2.7 0 1.4-1.2 2.1-2.6 2.1-2.4 0-4-1.9-4.6-4.4h-1.4l.2 4.1c1.3 1 3.3 1.6 5.8 1.6Zm15.6-17h-1L106 8.7v.9l1.7 1v10.7c0 1-.5 1.1-1.7 1.2v1.2h9v-1.2c-1.2 0-1.7-.2-1.7-1.2V7Zm-2.7-1.4c1.8 0 3-1.3 3-2.8 0-1.5-1.2-2.8-3-2.8-2 0-3 1.3-3 2.8 0 1.5 1 2.8 3 2.8ZM124.3 7c-4.4 0-8.2 3.4-8.2 8.9 0 5 3.4 8.1 8 8.1 3.8 0 6.1-2.2 7-5.6l-.6-.3a5.3 5.3 0 0 1-4.6 2.2c-2.7 0-4.7-2.3-4.7-5.9h9.7v-.8c0-3.8-2.2-6.6-6.6-6.6Zm-.4 1.3c1.6 0 2.2 1.8 2.2 4.7h-4.9c.2-2.8 1-4.7 2.7-4.7Zm15.6 4.5c1.4-1 3.1-1 5-1h.8V7.4c-.3-.3-.9-.5-1.6-.5-1.9 0-3 1.1-4.2 4.7l.1-4.7h-1l-6.4 1.7v.9l1.7 1v10.7c0 1-.5 1.1-1.7 1.2v1.2h9.7v-1.2c-1.7-.2-2.4-.3-2.4-1.6v-8Z"></path>
<path fill="#C84A04" d="m29.8 11.6-6.2-6a12 12 0 0 0-17 0l-6 6a2 2 0 0 0 0 2.8l5 5L7 18c.2-.2.4-.3.7-.3l.5.1 1-1A7.4 7.4 0 0 1 8 10.6 7.5 7.5 0 0 1 20.7 7a7.5 7.5 0 0 1-5.5 12.6c-1.6 0-3.2-.6-4.4-1.5l-1 1a1 1 0 0 1-.2 1.1L8 21.7a12 12 0 0 0 15.6-1.2l6-6a2 2 0 0 0 0-2.9Z"></path>
<path fill="#C84A04" d="M20.5 10a5.7 5.7 0 0 0-5.2-3.6 5.7 5.7 0 0 0-2.2 11c.7.3 1.5.4 2.2.4a5.7 5.7 0 0 0 5.2-7.9Zm-1.9 3a.7.7 0 0 1-.5.6H18c-.2 0-.4 0-.5-.2a.7.7 0 0 1-.1-.5V12a3.2 3.2 0 0 0-2-2.7h-.1a.7.7 0 0 1-.4-.5.6.6 0 0 1 .2-.5.7.7 0 0 1 .5-.2h.4l.1.1.9.5c.8.6 1.3 1.5 1.6 2.4.2.7.2 1.3.1 2Z"></path>
</g>
</svg>
{% elif cibo %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.4 50">
<path fill="#fff" d="M0 50V0h105.4v50Z"/>
<path d="M58.5 27.3h-3.9v9.3h4.1c2.8 0 4.1-1.6 4.1-4.6 0-3-1.7-4.7-4.3-4.7Zm27-14.1c-4 0-6 3-6 11.7s2 12 6 12 6.1-3 6.1-12-2-11.7-6-11.7Zm-23.8 4.1c0-2.5-1.3-4-3.7-4h-3.4v8h3.5c2 0 3.6-1.4 3.6-4Z" fill="#e31d57"/>
<path d="M0 0v50h105.4V0Zm19.8 36.8c3.2 0 4.5-2.1 5.4-5.3l6.7 1.9c-1.6 6.2-4.7 10.4-12.2 10.4-8.2 0-13.5-5.2-13.5-19S11.3 6.2 19.7 6.2c6.5 0 11 3 12.3 11.1l-6.7 1.8c-.5-2.5-1.5-6-5.5-6-4.2 0-6 3.6-6 11.5 0 9.1 2 12.2 6 12.2ZM42.7 43h-7.4V6.9h7.4ZM59 43H47.4V6.9h11.3c6.2 0 10 3.5 10 9.4 0 4.5-2.8 7-5.1 7.5v.2c3 .7 6.5 3 6.5 8.8C70.1 39.5 66.8 43 59 43Zm26.5.8c-8.5 0-13.6-5.4-13.6-19S77 6.3 85.5 6.3s13.7 5 13.7 18.7S94 43.8 85.5 43.8Z" fill="#e31d57"/>
</svg>
{% else %}
<img decoding="async" referrerpolicy="no-referrer" src="{{ logo }}" class="c-subheader__logo" height="40">
{% endif %}
</a>
{% if channetitle %}
<a class="c-header__channel o-link-inverse u-ml-xsmall" href="#">
{{ channetitle }}
</a>
{% endif %}
</div>
{% else%}
{% if title %}
<div class="c-subheader__head u-py-small u-flex {% if not modifier %} u-column u-row@md {% else %} u-row u-items-center {% endif %} {% if avatar %}u-items-center{% endif %}">
<h1 class="u-title-01 u-m-none">
<a href="#" class="u-no-underline c-subheader__title ">
{{ title }}
</a>
</h1>
</div>
{% endif %}
{% endif %}
{% if navigation and not modifier %}
<nav class="c-subheader__navbar u-flex u-items-center u-overflow-auto u-gap-medium">
{% for nav in navigation %}
<a href="#" class="c-subheader__item {% if nav.status=='active' %}c-subheader__item--active{% endif %} u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
{{ nav.item }}
</a>
{% endfor %}
</nav>
{% endif %}
{% if cta %}
<div class="u-ml-auto u-px-xlarge">
{% render "@button--approfondimento",{label:'Abbonati', size: 'small'},true %}
</div>
{% endif%}
{% if sponsor %}
<img decoding="async" referrerpolicy="no-referrer" src="{{ sponsor }}" class="u-ml-auto">
{% endif%}
{% if modifier=="large" %}
<span class="c-subheader__menu u-label-02 u-cursor-pointer {% if logo %}u-color-inverse{% else%}o-link-text{% endif %} u-none@lg u-ml-auto u-mr-small u-my-small" onclick="this.classList && document.querySelectorAll('[data-subheader-nav]').forEach( function(oNode){ oNode.classList.toggle('is-open');})">
MENU
</span>
{% endif %}
</div>
{% if children and not modifier %}
<nav class="c-subheader__subnavbar">
<div class="o-container u-flex u-items-center u-overflow-auto u-gap-small">
{% for child in children %}
<a href="#" class="c-subheader__item {% if child.status=='active' %}c-subheader__item--active{% endif %} u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
{{ child.item }}
</a>
{% endfor %}
</nav>
</div>
{% endif %}
{% if modifier %}
<nav class="c-subheader__navbar c-subheader__navbar--lg u-m-none" data-subheader-nav>
<div class="o-container">
<ul class="c-subheader__main-list u-list-none u-list-reset u-flex u-column u-row@lg u-items-center">
{% for nav in navigation %}
<li tabindex="1" class="c-subheader__item {% if nav.status %}c-subheader__item--active{% endif %} u-relative u-py-base u-cursor-pointer" data-subheader-item>
<div class="u-flex u-justify-between u-justify-center">
<a href="#" class="u-no-underline {% if logo %}u-color-inverse{% else%}o-link-text{% endif %}">
{{ nav.item }}
</a>
{% if nav.list %}
<svg class="o-icon o-icon--sm u-ml-xxsmall u-cursor-pointer u-block" data-subheader-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
{% endif %}
</div>
{% if nav.list %}
<ul class="c-subheader__list u-justify-between u-wrap u-row u-column@lg u-list-none" data-subheader-list>
{% for a in nav.list %}
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline {% if logo %}u-color-inverse{% else%}o-link-text{% endif %}">
{{ a.item }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
</div>
{
"media": "https://via.placeholder.com/56",
"title": "Cronaca",
"logo": "https://citynews.stgy.ovh/~shared/images/v7/channel-custom/vision-logo.svg",
"navigation": [
{
"item": "Televisione"
},
{
"item": "Streaming",
"status": "active"
},
{
"item": "Cinema"
}
],
"children": [
{
"item": "Netflix"
},
{
"item": "Prime",
"status": "active"
},
{
"item": "Disney+"
},
{
"item": "Sky"
},
{
"item": "Apple"
},
{
"item": "Migliori SerieTv"
},
{
"item": "Al Cinema"
},
{
"item": "Programmi TV"
}
]
}
// Name: Subheader
// Description: Subheader of website
//
// Component: `c-subheader`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.mode`
// `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;
@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
// Variables
// ========================================================================
$subheader-nav-line-height: 3px;
$subheader-nav-line-active: var(--nav-active-bg);
$subheader-nav-line-hover: var(--nav-active-bg-hover);
$subheader-height-logo: 40px;
$subheader-width-logo: 200px;
$subheader-custom-spacing: 26px;
// ========================================================================
.c-subheader {
// Custom properties
// ======================================================================
--subheader-border: transparent;
--subheader-navbar-spacing: 0;
--subheader-item-spacing: #{$padding-base};
// Category color variations
// Default colors are applied to 'notizie' or '/' data-channel
--subheader-border: var(--divider-color);
--subheader-text: var(--body-color);
--subheader-title: var(--body-color);
--subheader-text-hover: var(--hover-02, #{$hover-04});
// ======================================================================
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--subheader-border);
background-color: var(--subheader-background, --background-color); //var(--subheader-background);
background-image: var(--subheader-background-image);
background-repeat: no-repeat;
background-position: center center;
background-size: var(--subheader-background-size);
transition: $global-interactive-transition;
@each $category, $name in $categories {
@if ($category!="notizie"){
@if $layout!=amp {
@media (prefers-color-scheme: dark) {
[data-theme="today"][data-channel*="#{$category}"]:not([data-color-scheme*="light"]) & {
--subheader-background: #{rgba(grabcolor($categories, $category, darker), .25)};
--subheader-text: #{$inverse-01};
--subheader-border: #{grabcolor($categories, $category, darker)};
}
}
[data-color-scheme*="dark"][data-theme="today"][data-channel*="#{$category}"] & {
--subheader-background: #{rgba(grabcolor($categories, $category, darker), .25)};
--subheader-text: #{$inverse-01};
--subheader-border: #{grabcolor($categories, $category, darker)};
}
}
[data-theme="today"][data-channel*="#{$category}"] & {
--subheader-border: #{grabcolor($categories, $category, base)};
--subheader-background: #{grabcolor($categories, $category, lighter)};
--subheader-text: #{grabcolor($categories, $category, darker)};
--subheader-text-hover: #{grabcolor($categories, $category, base)};
}
[data-theme="today"][data-channel*="/gossip"] & {
--subheader-background: #8947a3;
--subheader-text: #fff;
}
}
}
@if $layout!=amp {
// @media (prefers-color-scheme: dark) {
// body[data-channel*="dossier"]:not([data-color-scheme*="light"]) & {
// --subheader-background: #{$approfondimento-gray-darker};
// --subheader-text-hover: #{$inverse-01};
// --subheader-title: #{$inverse-01};
// }
// }
// [data-color-scheme*="dark"][data-channel*="dossier"] & {
// --subheader-background: #{$approfondimento-gray-darker};
// --subheader-text-hover: #{$inverse-01};
// --subheader-title: #{$inverse-01};
// }
.c-btn {
position: absolute;
top: 1.2rem;
right: $padding-base;
@include bp(lg){
position: relative;
top: auto;
right: auto;
}
}
}
&::after {
position: absolute;
right: 0;
bottom: -5px;
content: '';
width: 100%;
height: 1px;
background-color: var(--subheader-border);
[data-channel*="dossier"] & {
display: none;
}
}
> div:first-child {
@include bp(md){
gap: #{$padding-small};
}
}
// Hide ::after border when modifier is branded
&.c-subheader--branded::after{
display: none;
}
//
// Subheader List
//
&__list {
display: none;
position: relative;
width: 100%;
margin-top: $margin-xxsmall;
margin-left: 0;
padding-left: 0;
@if $responsive-breakpoints {
@include bp(lg) {
position: absolute;
left: 0;
width: auto;
min-width: 100%;
margin-top: 0;
}
}
[data-subheader-item]:focus &,
[data-subheader-item]:hover & {
display: flex;
top: 100%;
background-color: var(--subheader-background-active, var(--background-color));
}
}
//
// Subheader Main List
//
&__main-list {
margin-right: -$padding-small;
margin-left: -$padding-small;
@if $responsive-breakpoints {
@include bp(lg) {
margin: 0;
}
}
}
//
// Subheader Title
//
&__title {
color: var(--subheader-title);
}
//
// Subheader Navbar
//
&__navbar {
// padding-top: var(--subheader-navbar-spacing);
// Custom Firefox scrollbar style
scrollbar-width: thin;
@if $layout!=amp {
// Navbar Large Variant
&--lg {
--subheader-navbar-spacing: 0;
display: none;
@include bp(lg) {
display: block;
border-top: 1px solid var(--subheader-light-line);
}
&.is-open {
display: block;
}
}
}
// Webkit scrollbar style
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 8px;
}
&::-webkit-scrollbar-track {
background: var(--background-color-light);
}
&::-webkit-scrollbar-thumb {
background: var(--theme-color-light);
}
.c-subheader__head ~ & {
// Remove padding top when adiacent to subheader head
--subheader-navbar-spacing: 0;
@if $responsive-breakpoints {
// Restore padding top on medium devices
@include bp(md) {
--subheader-navbar-spacing: #{$subheader-custom-spacing};
}
}
}
}
&__subnavbar {
backdrop-filter: brightness(90%);
&::after {
position: absolute;
top: 0;
right: 0;
content: '';
height: 1px;
background-color: var(--subheader-border);
}
}
//
// Subheader Item
//
&__item {
padding-top: var(--subheader-item-spacing);
padding-bottom: var(--subheader-item-spacing );
color: var(--subheader-text);
@include z(cover);
&:hover {
color: var(--subheader-text-hover);
}
// Subheader item children of Main List
.c-subheader__main-list > & {
padding-right: $padding-base;
padding-left: $padding-base;
@include bp(lg) {
padding-right: $padding-xsmall;
padding-left: $padding-xsmall;
}
}
.c-subheader__head ~ .c-subheader__navbar & {
// Remove padding top when adiacent to subheader head
//padding-top: 0;
// Change item spacing from medium devices
@include bp(md) {
--subheader-item-spacing : #{$subheader-custom-spacing};
}
}
// Active state modifier
&--active {
&::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: $subheader-nav-line-height;
background-color: var(--subheader-text);
.c-subheader__navbar--lg & {
width: $subheader-nav-line-height;
height: 100%;
@include bp(lg) {
width: 100% ;
height: $subheader-nav-line-height;
}
}
}
}
// Small modifier
&--small {
width: 50%;
padding-right: $padding-small;
padding-left: 0;
@include bp(lg) {
width: 100%;
padding-left: $padding-small;
}
}
// Subheader item children of Navbar Large
.c-subheader__navbar--lg & {
width: 100%;
@include type(nav-02);
@include bp(lg) {
font-size: type-size("brevier", base);
width: auto;
}
&:focus,
&:hover {
outline: none;
background-color: var(--subheader-background-active, var(--background-color));
color: var(--subheader-text);
&::after {
display: none;
}
[data-subheader-arrow] {
transform: rotate(180deg);
}
}
&:first-child {
margin-left: 0;
}
}
}
//
// Subheader Avatar
//
&__avatar {
margin-bottom: $margin-xsmall;
@include bp(md) {
margin-right: $margin-xsmall;
margin-bottom: 0;
}
}
//
// Subheader Logo
//
&__logo {
max-height: $subheader-height-logo;
// min-width: $subheader-width-logo;
}
// approfondimento custom values
// body[data-channel*="dossier"] & {
// --subheader-background: #{$approfondimento-gray-light};
// --subheader-title: #{$approfondimento-gray-darker};
// }
}
The peculiarity of this is to provide more navigation information on the page or channel you are visiting.
The Subheader component snaps into place as the header– slim component.
Possible layout variations:
In order to generate a variation you must set parameter declaration in it’s config file. If the evaluation of parameter will result true, because present a value in it’s configuration, it will be rendered in the component
In order to display a default subheader template use following syntax:
{% render "@subheader" %}