Main toolbar: Progress

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class='c-toolbar  c-toolbar--minimal c-toolbar--progress'>
    <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>
        </div>

        <div class='c-toolbar__center'>
            <ol class="c-progress" tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="Step 3 di 5: ">

                <li class="c-progress__step " data-step-complete>
                    <a href="" data-extra-text="">Risultati</a>
                </li>
                <li class="c-progress__step " data-step-complete>
                    <a href="" data-extra-text="">I tuoi dati</a>
                </li>
                <li class="c-progress__step " data-step-current>
                    <a href="" data-extra-text="">Riepilogo</a>
                </li>
                <li class="c-progress__step " data-step-incomplete>
                    <a href="" data-extra-text="">Paga</a>
                </li>
                <li class="c-progress__step " data-step-incomplete>
                    <a href="" data-extra-text="">Pagato</a>
                </li>

            </ol>
        </div>

        <div class='c-toolbar__right'>
            <div class="c-menu">
                <input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="u-visuallyhidden">
                <label for="toggle" data-opens-menu>

                    <span>Ciao</span><strong>Mario Rossi</strong>
                    <div class="c-menu__icon">
                        <img src="../../images/svgs/stk_profile_man.svg" alt="" aria-hidden="true" width="24">

                        <p class="c-menu__notify" aria-hidden="true">2</p>
                    </div>

                    <svg class="expanded-text c-icon c-icon--24">
                        <use xlink:href="#ic_arrow_drop_up_black_24px"></use>
                    </svg> <svg class="collapsed-text c-icon c-icon--24">
                        <use xlink:href="#ic_arrow_drop_down_black_24px"></use>
                    </svg> <span class="u-visuallyhidden expanded-text">Menù aperto</span>
                    <span class="u-visuallyhidden collapsed-text">Menù chiuso</span>
                </label>
                <div role="menu" data-menu-origin="right">

                    <div class="c-menu__booked-item c-menu__booked-item--multiple ">
                        <a href="../preview/page-reservation-detail.html" class="clickable-item">
                            <div class="c-media o-media c-media--booked-item">
                                <img class="c-media__figure o-media__figure" src="../../images/svgs/p1-2.svg" alt="Parcheggio P1 P2" height="" width="40">
                                <div class="c-media__body o-media__body">
                                    Oggi hai un parcheggio prenotato al P1-2 <strong>alle ore 13:45</strong>
                                </div>
                            </div>
                        </a>
                        <a href="../preview/page-reservations-list.html">Vedi le altre prenotazioni di oggi</a>
                    </div>

                    <div class="c-menu__section">
                        <div class="image">
                            <img src="../../images/svgs/stk_prenotazioni.svg" alt="Prenotazioni" aria-hidden="true" width="60">
                        </div>
                        <ul aria-label="Prenotazioni">
                            <strong aria-hidden="true" class="title">Prenotazioni</strong>
                            <li><a href="../preview/page-dashboard.html">Dashboard</a></li>
                            <li><a href="../preview/page-reservations-list.html">Le tue prenotazioni</a></li>
                            <li><a href="../preview/page-orders-list.html">I tuoi ordini</a></li>
                            <li><a href="#">I tuoi voucher digitali (130 €)</a></li>
                        </ul>
                    </div>

                    <div class="c-menu__section">
                        <div class="image">
                            <img src="../../images/svgs/stk_avatar.svg" alt="Profilo" aria-hidden="true" width="60">
                        </div>
                        <ul aria-label="Profilo">
                            <strong aria-hidden="true" class="title">Profilo</strong>
                            <li><a href="../preview/page-profile--default.html">Il tuo account</a></li>
                            <li><a href="../preview/page-billing-info.html">I tuoi dati di fatturazione</a></li>
                            <li><a href="../preview/page-privacy-settings.html">Le tue impostazioni privacy</a></li>
                            <li><a href="../preview/page-newsletter-sub.html">Le tue impostazioni newsletter</a></li>
                        </ul>
                    </div>

                    <div class="c-menu__section">
                        <div class="image">
                            <img src="../../images/svgs/stk_assistenza.svg" alt="Supporto" aria-hidden="true" width="60">
                        </div>
                        <ul aria-label="Supporto">
                            <strong aria-hidden="true" class="title">Supporto</strong>
                            <li><a href="#">Richiedi assistenza</a></li>
                            <li><a href="../preview/page-reclaims-list.html">I tuoi suggerimenti e reclami</a></li>
                            <li><a href="#">Richiedi assistenza</a></li>
                        </ul>
                    </div>

                    <a href="#" class="c-menu__invite">Esci</a>

                </div>
            </div>
        </div>
    </div>
</div>


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

    <div class='c-toolbar__center'>
      {{render '@progress' moleculeProgress merge=true}}
    </div>

    <div class='c-toolbar__right'>
      {{#if showUser}}
        {{render '@menu--anonymous-user'}}
      {{else if showLogged}}
        {{render '@menu--existing-user'}}
      {{/if}}
    </div>
  </div>
</div>


        
            
            {
  "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"
    }
  },
  "showUser": false,
  "showLogged": true,
  "moleculeProgress": {
    "current-step": 3,
    "steps": [
      {
        "text": "Risultati",
        "status": "data-step-complete"
      },
      {
        "text": "I tuoi dati",
        "status": "data-step-complete"
      },
      {
        "text": "Riepilogo",
        "status": "data-step-current"
      },
      {
        "text": "Paga",
        "status": "data-step-incomplete"
      },
      {
        "text": "Pagato",
        "status": "data-step-incomplete"
      }
    ]
  }
}

File:

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

Handle: @toolbar--progress
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/toolbar/toolbar--progress.hbs
References (4): @logo, @progress, @menu--anonymous-user, @menu--existing-user
Referenced by (2): @header--host-progress, @header--progress

No notes defined.