Aeroporto di Bologna - Design System

Menù: Anonymous User 

<div class="c-menu">
    <input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="u-visuallyhidden">
    <label for="toggle" data-opens-menu>
        <span>Accedi a MyBLQ</span>
        <img src="../../images/svgs/stk_generic-user.svg" alt="" role="presentation" aria-hidden="true" width="24">

        <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__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>
 
<div class="c-menu">
  <input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="u-visuallyhidden">
  <label for="toggle" data-opens-menu>
    <span>Accedi a MyBLQ</span>
    <img src="{{ path '/images/svgs/stk_generic-user.svg' }}" alt="" role="presentation" aria-hidden="true" width="24">
    
    {{> @icon symbol="ic_arrow_drop_up_black_24px" class="expanded-text c-icon c-icon--24" }} 
    {{> @icon symbol="ic_arrow_drop_down_black_24px" class="collapsed-text c-icon c-icon--24" }}
    <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__img">
      <img src="{{ path '/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">
      {{> @input email }} {{> @input password }}
      <a href="{{ lost-password.url }}" class="forgetful">{{ lost-password.text }}</a>
      {{> @button btn-login }}
    </form>
    <a href="{{ new-blq.url }}" class="c-menu__invite">{{ new-blq.text }}</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.