Aeroporto di Bologna - Design System

Main toolbar: Clean 

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

{{!-- {{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.