Aeroporto di Bologna - Design System

Menù: Recognized User Toolbar 

<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_profile_man-white.svg" alt="" aria-hidden="true" width="24">
     </label>
     <div role="menu" data-menu-origin="right">
         <div class="c-menu__img">
             <img src="../../images/svgs/stk_profile_man.svg" alt="Bentornato" aria-hidden="true" width="80">
         </div>
         <p class="c-menu__title">Bentornato <strong>Mario</strong>, è sempre un piacere rivederti</p>
         <form class="c-form c-form--menu">
             <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="#" class="forgetful">Non ricordi la tua password?</a>
             <button type="button" class="c-button c-button--submit">

                 Accedi

             </button>
         </form>
         <a href="#" class="c-menu__invite">Non sei Mario Rossi? Esci</a>
     </div>
 </div>
 
<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="{{ path '/images/svgs/stk_profile_man-white.svg' }}" alt="" aria-hidden="true" width="24">
  </label>
  <div role="menu" data-menu-origin="right">
    <div class="c-menu__img">
      <img src="{{ path '/images/svgs/stk_profile_man.svg' }}" alt="Bentornato" aria-hidden="true" width="80">
    </div>
    <p class="c-menu__title">Bentornato <strong>Mario</strong>, è sempre un piacere rivederti</p>
    <form class="c-form c-form--menu">
      {{> @input password }}
      <a href="#" class="forgetful">Non ricordi la tua password?</a>
        {{> @button btn-login }}
    </form>
    <a href="#" class="c-menu__invite">Non sei Mario Rossi? Esci</a>
  </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>"
  }
}
  • 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

No notes defined.