Aeroporto di Bologna - Design System

Main toolbar: Nomenu 

<div class="c-toolbar">

    <div class="c-toolbar__inner">
        <div class="c-toolbar__left">
            <a href="/components/preview/page-home-travel--default" class="c-toolbar__logo">
                <img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
            </a>
            <a href="/components/preview/page-home-travel--default" class="c-toolbar__logo c-toolbar__logo--innovability">
                <img src="../../images/svgs/logo-innovability.svg" class="c-logo c-logo--innovability" alt="Homepage aeroporto di Bologna">
            </a>
        </div>

        <div class="c-toolbar__center" aria-hidden="true">

        </div>

        <div class="c-toolbar__right">

            <a class="c-toolbar__assistance" href="../preview/page-home-assistenze.html">
                <span class="u-visuallyhidden">Assistenze speciali</span>
                <img src="../../images/svgs/icon_ special_assistance_24px.svg" class="prm-icon" alt="">
            </a>

            <div class="c-menu">
                <input type="checkbox" role="button" aria-haspopup="true" id="mtoggle" class="u-visuallyhidden">
                <label for="mtoggle" data-opens-menu>
                    <img src="../../images/svgs/stk_generic-user-white.svg" alt="" role="presentation" aria-hidden="true" width="24">
                </label>
                <div role="menu" data-menu-origin="right">
                    <div class="c-menu__img">
                        <img src="../../images/svgs/stk_generic-user.svg" alt="Accedi alla MyBLQ" aria-hidden="true" width="80">
                    </div>
                    <p class="c-menu__title">Accedi alla tua area MyBLQ</p>
                    <form action="" class="c-form c-form--menu">
                        <label for="login_email" class="" aria-label="">

                            e-mail

                            <input id="login_email" type="email" class="" placeholder="Inserisci il tuo indirizzo e-mail" value="" aria-describedby="email-login-note">

                            <p class="c-field__note u-visuallyhidden" id="email-login-note">
                                Compila il campo inserendo il tuo indirizzo e-mail
                            </p>

                        </label>

                        <label for="login-psw" class="has-password-button" aria-label="">

                            password

                            <input id="login-psw" type="password" class="" placeholder="Inserisci la tua password" value="" aria-describedby="psw-login-note" autocomplete="current-password">

                            <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>

                            <p class="c-field__note u-visuallyhidden" id="psw-login-note">
                                Compila il campo inserendo la password del tuo account
                            </p>

                        </label>

                        <a href="/components/preview/insert-email" class="forgetful">Non ricordi la tua password?</a>
                        <button type="button" class="c-button c-button--submit">

                            Accedi

                        </button>
                    </form>
                    <a href="/components/preview/page-choice-profile" class="c-menu__invite">Non hai un profilo MyBLQ? Registrati ora</a>
                </div>
            </div>
            <button type="button" class="c-button c-toolbar__icon is-clickable js-fr-dialogmodal-open" aria-label="Cerca nel sito" aria-controls="dialog-search">

                <svg class="c-icon c-icon--18">
                    <use xlink:href="#ic_search_black_24px"></use>
                </svg>
            </button>
            <div class="c-notifications ">

                <button type="button" class="c-notifications__button has-indicator js-toggleNotificationsBtn" aria-expanded="false" aria-label="Notifiche" aria-controls="aria-notifications">
                    <svg class="c-icon c-icon--24">
                        <use xlink:href="#ic_notifications_active_black_24px"></use>
                    </svg>
                    <p class="c-notifications__indicator" aria-hidden="true">2</p>
                </button>

                <div class="c-notifications__box is-narrow has-indicator js-notificationsBox" aria-live="polite" id="aria-notifications">

                    <div class="c-notifications__head">
                        <div class="c-notifications__title">
                            Centro notifiche
                        </div>
                        <button type="button" class="c-notifications__closeBtn js-toggleNotificationsBtn" aria-expanded="false" aria-label="Chiudi" aria-controls="aria-notifications">
                            Chiudi <svg class="c-icon c-icon--16">
                                <use xlink:href="#ic_close_black_24px"></use>
                            </svg>
                        </button>
                    </div>

                    <ul class="c-notifications__list">
                        <li class="important not-read">
                            <span class="c-notifications__title">Lorem ipsum dolor sit amet</span>
                            <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                            <a class="c-notifications__link" href="#">></a>
                        </li>
                        <li class="not-read">
                            <span class="c-notifications__title"></span>
                            <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                            <a class="c-notifications__link" href="#">></a>
                        </li>
                        <li class="">
                            <span class="c-notifications__title"></span>
                            <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                            <p>Prevista forte nevicata il 5 Dicembre dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                            <a class="c-notifications__link" href="#">></a>
                        </li>
                        <li class="">
                            <span class="c-notifications__title"></span>
                            <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                            <a class="c-notifications__link" href="#">></a>
                        </li>
                        <li class="">
                            <span class="c-notifications__title"></span>
                            <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                            <a class="c-notifications__link" href="#">></a>
                        </li>
                    </ul>

                </div>

            </div>
            <div class="c-header__switch c-toolbar__icon c-toolbar__switch is-clickable">
                <div data-menu-component class='c-navigation-switch'>
                    <input type='checkbox' role='button' aria-haspopup='true' id='toggle-extended-nav' class='u-visuallyhidden' aria-hidden='true' />
                    <label for='toggle-extended-nav' data-opens-menu aria-hidden='true'>
                        <span class='u-visuallyhidden expanded-text'>
                            Chiudi menù
                        </span>
                        <span class='u-visuallyhidden collapsed-text'>
                            Apri menù
                        </span>
                    </label>
                </div>
            </div>

        </div>
    </div>

</div>

<div class="c-dialog c-dialog--search js-fr-dialogmodal " id="dialog-search">
    <div class="js-fr-dialogmodal-modal">
        <div role="document">

            <div class="c-expanded-search ">

                <form class="c-expanded-search__searchWrapper c-form">

                    <label for="search-field" class="  has-button" aria-label="">
                        Cerca nel sito
                        <input id="search-field" type="text" class="js-combobox " placeholder="" value="" aria-describedby="search-field-note" list="search-destinations" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
                        <button type="submit" class="c-button c-button--submit c-button--searchIcon " aria-label="Avvia la ricerca">
                            <svg class="c-icon c-icon--18">
                                <use xlink:href="#ic_search_black_24px"></use>
                            </svg> </button>
                        <datalist id="search-destinations">
                            <option value="Check in A">
                            <option value="Check in B">
                            <option value="Check in C">
                            <option value="Accettazione">
                            <option value="Cafè">
                            <option value="Bagagli">
                            <option value="Bar centrale">
                        </datalist>
                        <p class="c-field__note " id="search-field-note">
                            Scrivi ciò che vuoi cercare es: <strong>arrivi</strong>, <strong>bagagli</strong>, <strong>VIP lounge</strong>, etc &hellip;
                        </p>
                    </label>
                    <p class="c-expanded-search__search-flight">
                        <a href="../preview/page-arrivals-departures--default.html">Stai cercando un volo?→</a>
                    </p>

                    <div class="c-search-suggestions">

                        <h3>Potrebbero esserti utili</h3>

                        <ul class="c-search-suggestions__list">

                            <li class="c-search-suggestions__item">
                                <a href="#">Ultimi aggiornamenti covid <span aria-hidden="true">&#8594;</span></a>
                            </li>
                            <li class="c-search-suggestions__item">
                                <a href="#">Parcheggia in aeroporto <span aria-hidden="true">&#8594;</span></a>
                            </li>
                            <li class="c-search-suggestions__item">
                                <a href="#">Contatti e supporto <span aria-hidden="true">&#8594;</span></a>
                            </li>
                            <li class="c-search-suggestions__item">
                                <a href="#">Fast track <span aria-hidden="true">&#8594;</span></a>
                            </li>
                        </ul>

                    </div>

                </form>

                <button type="button" class="c-expanded-search__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                    Chiudi
                    <svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_close_black_24px"></use>
                    </svg> </button>

            </div>

        </div>
    </div>
</div>
 
<div class="c-toolbar">

  <div class="c-toolbar__inner">
    <div class="c-toolbar__left">
      <a href="{{ home-url }}" class="c-toolbar__logo">
        {{ render "@logo" }}
      </a>
      <a href="{{ innovability-url }}" class="c-toolbar__logo c-toolbar__logo--innovability">
        {{ render "@logo--innovability" }}
      </a>
    </div>

    <div class="c-toolbar__center" aria-hidden="true">

    </div>

    <div class="c-toolbar__right">

      <a class="c-toolbar__assistance" href="{{ path '/components/preview/page-home-assistenze' }}">
        <span class="u-visuallyhidden">Assistenze speciali</span>
        <img src="{{ path '/images/svgs/icon_ special_assistance_24px.svg' }}" class="prm-icon" alt="">
      </a>
      
      {{ render "@menu--anonymous-user-toolbar" }}
      {{!-- <label for="adb-search" class="c-toolbar__icon c-toolbar__search is-clickable" aria-label="Cerca nel sito. Premi per iniziare la ricerca">
        {{> @icon class="c-icon c-icon--18" symbol="ic_search_black_24px" }}
      </label> --}}
      {{> @button search-button }}
      {{ render "@notifications" }}
      <div class="c-header__switch c-toolbar__icon c-toolbar__switch is-clickable">
        {{> @navigation-switch}}
      </div>

    </div>
  </div>

</div>

{{ render "@dialog--search" }}

{{!-- {{ render "@expanded-search" }} --}}
 
{
  "name": "default",
  "home-url": "/components/preview/page-home-travel--default",
  "innovability-url": "/components/preview/page-home-travel--default",
  "prm-url": "/components/preview/page-routes-prm",
  "ccare-url": "",
  "dropdown-toolbar": {
    "dropdown-orientation": {
      "main-language": {
        "text": "ita",
        "url": "#",
        "aria-label": "Italiano"
      },
      "sub-languages": [
        {
          "text": "eng",
          "url": "#",
          "aria-label": "Inglese"
        },
        {
          "text": "zh",
          "url": "#",
          "aria-label": "Cinese"
        }
      ]
    }
  },
  "search-button": {
    "type": "button",
    "modifier": "c-toolbar__icon is-clickable js-fr-dialogmodal-open",
    "opens-dialog": "dialog-search",
    "aria-label": "Cerca nel sito",
    "svg": {
      "class": "c-icon c-icon--18",
      "symbol": "ic_search_black_24px"
    }
  }
}
  • Content: 
    $toolbar-bg: secondary(soft, 100);
$toolbar-color: secondary(text, 100);

.c-toolbar {
  // color: $toolbar-color;
  background-color: $toolbar-bg;
  padding: remify(16px) remify(16px);

  .c-header--emergency & {
    background-color: primary(emergency, 120);
  }
}

.c-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: remify(1360px);
  margin: 0 auto;
}

.c-toolbar a:focus {
  @include outline;
}

.c-toolbar__center {
  display: none;

  @include min-screen(bp(tablet-p)) {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

.c-toolbar__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.c-toolbar__right {
  justify-self: flex-end;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  position: relative;

  .c-toolbar__bell {
    display: none;
  }


  @include min-screen(bp(tablet-p)) {

    .c-toolbar__user,
    .c-toolbar__switch,
    .c-toolbar__assistance {
      display: none;
    }

    .c-toolbar__bell {
      display: flex;
    }
  }

  .c-toolbar__icon,
  .c-menu {
    min-width: remify(36px);
    height: remify(36px);

    @include min-screen(bp(tablet-p)) {
      width: auto;
      min-width: remify(40px);
      height: remify(40px);
    }

    @include min-screen(bp(tablet-l)) {
      width: auto;
      min-width: remify(48px);
      height: remify(48px);
    }

  }

  .c-toolbar__user {
    background-color: primary(night, 120);
  }

  .c-toolbar__search {
    background-color: primary(night, 100);
  }

  .c-toolbar__switch {
    background-color: primary(night, 80);

    &.is-nav-open {
      background-color: primary(sun, 100);
    }
  }

  .c-menu {
    background-color: primary(night, 120);
    border-radius: remify(12px);
    text-align: center;
    justify-content: center;
    display: flex;

    @include min-screen(bp(tablet-p)) {
      display: none;
    }

    .c-menu__section {
      text-align: left;
    }

  }

  & div[role="menu"] {
    top: remify(32px);
  }
}

.c-toolbar__assistance {
  margin: 0 remify(8px) 0 0;
  padding: 0 remify(8px) 0 0;
  border-right: remify(1px) solid primary(night, 40);
  display: flex;
  justify-content: center;
  align-items: center;

  svg {
    vertical-align: middle;
    fill: primary(night, 120);
  }
  
  .prm-icon {
    width: remify(36px);
  }
}

.c-toolbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: primary(night, 100);
  border-radius: remify(12px);
  position: relative; // min-width: remify(40px);
  height: remify(40px);
  color: #fff;
  text-decoration: none;
  padding: remify(8px);
  margin-left: remify(8px);

  &:last-of-type {
    margin-right: 0;
  }

  &:focus {
     @include outline;
  }
  
  span {
    display: none;

    @include min-screen(remify(1100px)) {
      display: inline-block;
      margin-left: remify(8px);
    }
  }
}

.c-toolbar .is-clickable svg {
  * {
    fill: currentColor;
  }
}

.c-toolbar__bell {
  background-color: primary(sun, 120);
  color: currentColor;
}

.c-toolbar__bell svg {
  * {
    fill: currentColor;
  }
}

.c-toolbar__search.is-open {
  @include max-screen(bp(tablet-p)) {
    background-color: primary(sun, 120);
  }
}

/*------------------------------------*\
  Modifier c-toolbar--minimal
\*------------------------------------*/

.c-toolbar--minimal {
  .c-toolbar__left .back-to-results {
    display: none;

    @include min-screen(bp(tablet)) {
      display: block;
    }
  }

  .c-toolbar__right .textual {
    display: none;

    @include min-screen(bp(tablet)) {
      display: block;
    }
  }

  .c-toolbar__right .iconographic {
    @include min-screen(bp(tablet)) {
      display: none;
    }
  }
}

/*------------------------------------*\
  Modifier c-toolbar--progress
\*------------------------------------*/

.c-toolbar--progress {
  .c-toolbar__inner {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .c-toolbar__left {
    order: 1
  }

  .c-toolbar__center {
    display: block;
    order: 3;
    flex-basis: 100%;

    @include min-screen(bp(tablet-p)) {
      order: 2;
      flex-basis: 45%;
    }
  }

  .c-toolbar__right {
    order: 2;

    @include min-screen(bp(tablet-p)) {
      order: 3;
    }
    .c-menu {
      display: flex;
      background-color: transparent;
    }
  }

  .c-toolbar__left,
  .c-toolbar__right {
    flex-basis: auto;
  }
}

/*------------------------------------*\
  Modifier c-toolbar--clean
\*------------------------------------*/

.c-toolbar--clean {
  .c-toolbar__inner {
    justify-content: center;
  }
}

/*------------------------------------*\
  Modifier c-toolbar--language
\*------------------------------------*/

.c-toolbar--language {
  .c-toolbar__right {
    flex-direction: column;
    align-items: flex-end;
  }
}

/*------------------------------------*\
  EMERGENCY NAV
\*------------------------------------*/

.c-toolbar__emergency-nav {
  background-color: primary(sky, 20);
  padding: remify(12px);
  text-align: center;
  
  @include min-screen(bp(tablet-p)) {
      display: none;
  }

  ul {
    li {
      display: inline-block;
      padding: 0 remify(6px);

      a { font-weight: fw(bold);}
    }
  }

}
  • URL: /components/raw/toolbar/_toolbar.scss
  • Filesystem Path: src/views/03-organisms/toolbar/_toolbar.scss
  • Size: 5.3 KB
  • Content: 
    (function ($) {
  'use strict';

  if (!$.tangible) {
    $.tangible = new Object();
  };

  $.tangible.navToolbar = function (el, options) {
    var base = this;

    base.$el = $(el);
    base.el = el;

    base.init = function () {

      base.$InputSearch = $('.c-toolbar__search');
      base.$ExpandedSearch = $('.c-expanded-search');
      base.$closeBtn = $('.js-closeExpandedSearch');

      // Generates an array of all the focusable elements within the dialog
      base.focusableEls = base.$ExpandedSearch.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
      base.focusableEls = Array.prototype.slice.call(base.focusableEls);

      // Gets the first of these focusable elements
      base.firstFocusableEl = base.focusableEls[0];

      // Gets the last of these focusable elements
      base.lastFocusableEl = base.focusableEls[base.focusableEls.length - 1];

      // Focus event on input search
      base.$InputSearch.click(function () {
        base.showExpandedSearch(base.$ExpandedSearch);
      });

      // Event once you press TAB with search input focused
      base.$InputSearch.keydown(function (e) {
        var code = e.keyCode || e.which;
        // 9 TAB button
        // 27 ESC button
        if (code == '9' || code == '27') {
          base.closeExpandedSearch();
        }
      });

      // Click event on close button
      base.$closeBtn.click(function () {
        base.closeExpandedSearch();
      });

    };

    // Opens the search dialog
    base.showExpandedSearch = function (el) {
      el.toggleClass('is-visible');
      base.$InputSearch.toggleClass('is-open');
      // When the dialog is first opened, it can determines which element opened it
      this.focusedElBeforeOpen = document.activeElement;
    };

    // Closes the search dialog
    base.closeExpandedSearch = function () {
      base.$ExpandedSearch.removeClass('is-visible');
      base.$InputSearch.removeClass('is-open');
      // When the dialog is then closed, it resets the focus
      this.focusedElBeforeOpen.blur();
    };

    // Sets focus on dialogs elements
    base.focusOnDialogEls = function () {
      base.firstFocusableEl.focus();
    };

    base.init();

  };

  $.fn.tangible_navToolbar = function (options) {
    return this.each(function () {
      (new $.tangible.navToolbar(this, options));
    });
  };

})(jQuery);
  • URL: /components/raw/toolbar/toolbar.js
  • Filesystem Path: src/views/03-organisms/toolbar/toolbar.js
  • Size: 2.5 KB

No notes defined.