Aeroporto di Bologna - Design System

Menù: Download app toolbar 

<div class='c-menu c-menu--download-app'>
    <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.svg" alt='' role='presentation' aria-hidden='true' width='32' />
    </label>
    <div role='menu' data-menu-origin='right'>
        <p class='c-menu__title'>
            Accedi alla tua area riservata
        </p>
        <p class='c-menu__paragraph'>
            Ci scusiamo, in questo momento l'Aeroporto di Bologna è in stato di emergenza e non è possibile accedere alla MyBLQ dal sito web
        </p>
        <strong class='c-menu__invite'>
            Accedi a MyBLQ scaricando l'app ufficiale
        </strong>
        <div class='c-menu__img'>
            <a href='#'>
                <img src="../../images/svgs/badge_appstore_it.svg" height='40' alt='Scarica su App Store' />
            </a>
            <a href='#'>
                <img src="../../images/svgs/Google_Play_Store_badge_IT.svg" height='40' alt='Disponibile su Google Play' />
            </a>
        </div>
        <p class='c-menu__notice'>
            <strong>Stai cercando una prenotazione?</strong>Se non puoi scaricare l'app ufficiale, prova a controllare nella tua casella di posta, tra le mail in entrata troverai sicuramente la mail di conferma prenotazione che ti abbiamo inviato il giorno in cui hai effettuato la prenotazione.
        </p>
    </div>
</div>
 
<div class='c-menu c-menu--download-app'>
  <input
    type='checkbox'
    role='button'
    aria-haspopup='true'
    id='mtoggle'
    class='u-visuallyhidden'
  />
  <label for='mtoggle' data-opens-menu>
    <img
      src="{{path '/images/svgs/stk_generic-user.svg'}}"
      alt=''
      role='presentation'
      aria-hidden='true'
      width='32'
    />
  </label>
  <div role='menu' data-menu-origin='right'>
    <p class='c-menu__title'>
      {{{title}}}
    </p>
    <p class='c-menu__paragraph'>
      {{{text}}}
    </p>
    <strong class='c-menu__invite'>
      {{{invite}}}
    </strong>
    <div class='c-menu__img'>
      <a href='#'>
        <img
          src="{{path '/images/svgs/badge_appstore_it.svg'}}"
          height='40'
          alt='Scarica su App Store'
        />
      </a>
      <a href='#'>
        <img
          src="{{path '/images/svgs/Google_Play_Store_badge_IT.svg'}}"
          height='40'
          alt='Disponibile su Google Play'
        />
      </a>
    </div>
    <p class='c-menu__notice'>
      {{{notice}}}
    </p>
  </div>
</div>
 
{
  "email": {
    "label_id": "login_email",
    "label_message": "e-mail",
    "label_class": null,
    "atom-input": {
      "id": "login_email",
      "type": "email",
      "class": null,
      "placeholder": "Inserisci il tuo indirizzo e-mail",
      "required": null,
      "hasNote": true,
      "describedby": "email-login-note"
    },
    "note_id": "email-login-note",
    "note_message": "Compila il campo inserendo il tuo indirizzo e-mail",
    "note_class": "u-visuallyhidden"
  },
  "password": {
    "label_id": "login-psw",
    "label_message": "password",
    "label_class": "has-password-button",
    "hasPasswordButton": true,
    "atom-input": {
      "id": "login-psw",
      "type": "password",
      "class": null,
      "placeholder": "Inserisci la tua password",
      "required": null,
      "hasNote": true,
      "autocomplete": "current-password",
      "describedby": "psw-login-note"
    },
    "note_id": "psw-login-note",
    "note_message": "Compila il campo inserendo la password del tuo account",
    "note_class": "u-visuallyhidden"
  },
  "lost-password": {
    "text": "Non ricordi la tua password?",
    "url": "/components/preview/insert-email"
  },
  "new-blq": {
    "text": "Non hai un profilo MyBLQ? Registrati ora",
    "url": "/components/preview/page-choice-profile"
  },
  "btn-login": {
    "name": "submit",
    "type": "button",
    "text": "Accedi",
    "modifier": "c-button--submit"
  },
  "booked-item": {
    "modifier": "c-media--booked-item",
    "img-src": "/images/svgs/p1-2.svg",
    "img-alt": "Parcheggio P1 P2",
    "img-width": "40",
    "body": "Oggi hai un parcheggio prenotato al P1-2 <strong>alle ore 13:45</strong>"
  },
  "title": "Accedi alla tua area riservata",
  "text": "Ci scusiamo, in questo momento l'Aeroporto di Bologna è in stato di emergenza e non è possibile accedere alla MyBLQ dal sito web",
  "invite": "Accedi a MyBLQ scaricando l'app ufficiale",
  "notice": "<strong>Stai cercando una prenotazione?</strong>Se non puoi scaricare l'app ufficiale, prova a controllare nella tua casella di posta, tra le mail in entrata troverai sicuramente la mail di conferma prenotazione che ti abbiamo inviato il giorno in cui hai effettuato la prenotazione."
}
  • Content: 
    .c-menu {
  position: static;
  display: inline-block;
  font-size: remify(12px);

  a {
    color: primary(night, 120);
  }

  label[data-opens-menu] {
    display: flex;
    align-items: center;
    position: relative;

    &:focus {
      @include outline;
    }

    &:before {
      display: none;
      content: "";
      position: absolute;
      @include css-triangle("up", remify(8px), #f4f6f7);
      bottom: remify(-12px);
      left: 50%;
      transform: translateX(-50%);
    }

    span,
    strong {
      display: none;
      @include min-screen(bp(tablet-p)) {
        display: inline-block;
      }
    }

    span {
      @include min-screen(bp(tablet-p)) {
        margin-left: remify(8px);
        margin-right: remify(4px);
      }
    }

    strong {
      // width: remify(100px);
      margin-right: remify(8px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  svg {
    * {
      fill: primary(night, 120);
    }
  }

  [role="menu"] {
    width: 95vw;
    max-width: remify(400px);
    background-color: #f4f6f7;
    padding: remify(16px);
    border-radius: remify(4px);
    margin-top: remify(16px);
    @include shadow(medium);
    text-align: left;
    border: remify(1px) solid primary(night, 20);

    li {
      line-height: 1.5;
       font-size: remify(14px);

    }
  }

  [data-opens-menu] {
    text-align: left;
    // background-color: primary(sky, 120);
    // border-radius: remify(4px);
    // border: remify(1px) solid primary(night, 80);
    // color: #fff;
    // padding: 0.33rem 0.5rem;
    text-decoration: none;
    height: 100%;
  }

  [type="checkbox"]:focus + [data-opens-menu],
  [role="menu"] a:focus {
    //outline: none;
    // background-color: primary(night, 60);
  }

  :checked + label[data-opens-menu] .expanded-text {
    display: inline;
  }

  :checked + label[data-opens-menu]::before {
    display: block;
  }

  :checked + label[data-opens-menu] .collapsed-text {
    display: none;
  }

  [type="checkbox"]:not(:checked) + label[data-opens-menu] .expanded-text {
    display: none;
  }

  [type="checkbox"]:not(:checked) + label[data-opens-menu] .collapsed-text {
    display: inline;
  }

  [role="menu"] {
    position: absolute;
    left: 0;
    display: none;
    z-index: $zIndex-atomMenuMyBLQ;
  }

  :checked ~ [role="menu"] {
    display: block;
  }

  [data-menu-origin="right"] {
    left: auto;
    right: 0;
  }

  [data-menu-origin="center"] {
    left: 50%;
    transform: translateX(-50%);
  }

  [role="menu"] a {
    display: block;
    min-width: 100%;
    margin-top: 0.125rem;
    // white-space: nowrap;
  }

  .c-menu__img {
    text-align: center;
    margin-bottom: remify(16px);
    display: none;
    @include min-screen(bp(tablet)) {
      display: block;
    }
  }

  .c-menu__title {
    color: primary(night, 100);
    text-align: center;
    font-weight: fw(light);
    margin-bottom: remify(24px);
    font-size: 150%;
    line-height: 1.333;
  }

  .c-menu__paragraph {
    color: primary(night, 100);
    text-align: center;
    margin-bottom: remify(24px);
    font-size: 100%;
  }

  .c-menu__notice {
    color: primary(night, 100);
    text-align: center;
    margin-top: remify(24px);
    padding-top: remify(24px);
    font-size: 75%;
    border-top: 1px solid primary(night, 20);

    strong {
      display: block;
    }
  }

  form {
    .forgetful {
      font-size: 100%;
      line-height: 1.5;
      text-align: center;
    }
  }

  .c-menu__invite {
    text-align: center;
    display: block;
  }

  .c-menu__section {
    border-bottom: remify(1px) solid primary(sky, 20);
    padding-bottom: remify(16px);
    margin-bottom: remify(16px);

    @include min-screen(bp(tablet)) {
      display: flex;
      align-items: center;
    }

    .image {
      display: none;

      @include min-screen(bp(tablet)) {
        display: block;
        margin-right: remify(24px);
      }
    }

    .title {
      text-transform: uppercase;
      margin-bottom: remify(16px);
      color: secondary(text, 100);
    }
  }

  .c-menu__booked-item {
    margin-bottom: remify(32px);
    border-bottom: remify(1px) solid primary(sky, 20);
    padding-bottom: remify(16px);

    a {
      text-align: center;
      margin-top: remify(16px);
    }

    .clickable-item {
      text-align: left;
      color: secondary(text, 100);
      text-decoration: none;
      margin-top: 0;
    }
  }

  .c-menu__booked-item--multiple {
    .clickable-item::after {
      content: "";
      display: block;
      width: 95%;
      height: remify(10px);
      border-radius: 0 0 remify(4px) remify(4px);
      background-color: #f4f6f7;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0.8;
    }
  }

  .c-menu__icon {
    position: relative;
    margin-left: remify(6px);
    margin-right: remify(6px);
    display: flex;

    img {
      display: inline-block;
      position: relative;
      z-index: 3;
      width: remify(16px);

      @include min-screen(bp(tablet-p)) {
        width: remify(24px);
        margin-right: 0;
      }
    }
    .c-menu__notify {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: remify(16px);
      height: remify(16px);
      border-radius: remify(12px);
      background-color: #fff;
      color: primary(night, 100);
      font-size: remify(12px);
      font-weight: fw(bold);
      margin-left: remify(4px);
      
      @include min-screen(bp(tablet-p)) {
        width: remify(41px);
        height: remify(24px);
        border-radius: remify(12px);
        position: relative;
        z-index: 2;
        left: 0;
        margin-left: remify(-22px);
        justify-content: right;
        padding-right: remify(7px);
        // padding: remify(4px) remify(6px) 0 0;
        // width: remify(40px);
        // height: remify(26px);
        // top: remify(0px);
        // right: remify(-16px);
      }
    }
    
  }
  
}

.c-menu:has(input[type="checkbox"]:focus) {
  @include outline;
}


.c-orientation__utilities .c-menu__link {
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;

    span {
      padding-right: remify(6px);
      padding-left: 0;
      border: none;
      display: none;
      @include min-screen(bp(tablet-p)) {
        display: inline-block;
      }
    }

    svg {
      padding-right: remify(6px);
      padding-left: 0;
      border: none;
    }

    img {
      padding: 0;
      border: none;
    }

}

.c-toolbar__right .c-menu__link {
  display: flex;
  align-items: center;
  justify-content: center;
  
  span,
  svg {
      padding-right: remify(6px);
      padding-left: 0;
      border: none;
      display: none;
      @include min-screen(bp(tablet-p)) {
        display: inline-block;
      }
    }
}

/*=============================================
          Menu apps download modifier
 =============================================*/

.c-menu--download-app {
  // margin-top: remify(16px);
  [data-opens-menu] {
    border-color: secondary(text, 100);
  }
  .c-menu__img {
    display: flex;
    justify-content: space-evenly;
    margin-top: remify(16px);

    a {
      min-width: auto;
    }
  }

  .c-menu__title {
    margin-top: remify(16px);
    margin-bottom: remify(16px);
  }

  p + p {
    margin-top: 0;
  }
}
  • URL: /components/raw/menu/_menu.scss
  • Filesystem Path: src/views/01-atoms/menu/_menu.scss
  • Size: 7.4 KB
  • Content: 
    (function () {

  var $container = $(".c-menu");
  var $label = $('*[data-opens-menu]');
  var $checkbox = $container.find($('input[type="checkbox"]'));

  // Functions that closes everything when clicking outside
  $(document).click(function (e) {
    // if the target of the click isn't the container nor a descendant of the container
    if (!$container.is(e.target) && $container.has(e.target).length === 0 && $checkbox.is(':checked')) {
      $container.find($label).trigger('click');
      $checkbox.prop("checked", false);
      //console.log($checkbox[0].checked);
    }
  });

})();
  • URL: /components/raw/menu/menu.js
  • Filesystem Path: src/views/01-atoms/menu/menu.js
  • Size: 592 Bytes
  • Handle: @menu--download-app-toolbar
  • Preview:
  • Filesystem Path: src/views/01-atoms/menu/menu--download-app-toolbar.hbs

No notes defined.