GDL - Global Design Language

Subheader: Approfondimento 

<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">

                <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>

            </a>

        </div>

        <nav class="c-subheader__navbar u-flex u-items-center u-overflow-auto u-gap-medium">

            <a href="#" class="c-subheader__item c-subheader__item--active u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Ambiente
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Sanità
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Inquinamento
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Scuola
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Politica
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Economia
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Edilizia
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Lavoro
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Trasporti
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Servizi Sociali
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Musei e Cinema
            </a>

            <a href="#" class="c-subheader__item  u-nav-02  u-cursor-pointer u-whitespace u-no-underline u-relative">
                Immmigrazione
            </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": "Dossier",
  "approfondimento": true,
  "channel": "/approfondimento/",
  "logo": "https://citynews.stgy.ovh/~shared/images/v7/channel-custom/gossip-channel-logo.svg",
  "navigation": [
    {
      "item": "Ambiente",
      "status": "active"
    },
    {
      "item": "Sanità"
    },
    {
      "item": "Inquinamento"
    },
    {
      "item": "Scuola"
    },
    {
      "item": "Politica"
    },
    {
      "item": "Economia"
    },
    {
      "item": "Edilizia"
    },
    {
      "item": "Lavoro"
    },
    {
      "item": "Trasporti"
    },
    {
      "item": "Servizi Sociali"
    },
    {
      "item": "Musei e Cinema"
    },
    {
      "item": "Immmigrazione"
    }
  ]
}
  • Content: 
    // 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};
  // }
  
}
  • URL: /components/raw/subheader/subheader.scss
  • Filesystem Path: src/lib/components/subheader/subheader.scss
  • Size: 10.3 KB

Subheader

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.

Variations

Possible layout variations:

  • Default - only channel name is present
  • Navbar - there is the name of the channel and its navigation bar
  • Custom - there is the name of the channel, any avatar (in the case of a blog section), the navigation bar and a colored background based on the section it belongs to (eg Gossip)
  • Topic and People - there is the name of the channel, the optional navigation bar and any image (People), a label that points to the section it belongs to and a specific link that refers to the section indicated by the label.

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

Usage

Render subheader

In order to display a default subheader template use following syntax:

  {% render "@subheader" %}