Aeroporto di Bologna - Design System

Slim Alert 

<div class="c-slim-alert">
    <div class="c-slim-alert__inner">
        <div class="c-slim-alert__content">
            <div class="c-slim-alert__label">
                <img src="../../images/svgs/stk_covid.svg" alt="Accedi alla MyBLQ" aria-hidden="true" width="24">
                <strong>Covid 19:</strong>
            </div>
            <div>
                <a href="#">
                    Ultimi aggiornamenti
                </a>
            </div>
            <div>
                <a href="#">
                    Approfondimenti
                </a>
            </div>
            <div class="c-slim-alert__notifications">
                <div class="c-notifications ">

                    <button type="button" class="c-notifications__button has-indicator js-toggleNotificationsBtn" aria-expanded="false" aria-label="Notifiche" aria-controls="aria-notifications">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_notifications_active_black_24px"></use>
                        </svg>
                        <p class="c-notifications__indicator" aria-hidden="true">2</p>
                    </button>

                    <div class="c-notifications__box is-narrow has-indicator js-notificationsBox" aria-live="polite" id="aria-notifications">

                        <div class="c-notifications__head">
                            <div class="c-notifications__title">
                                Centro notifiche
                            </div>
                            <button type="button" class="c-notifications__closeBtn js-toggleNotificationsBtn" aria-expanded="false" aria-label="Chiudi" aria-controls="aria-notifications">
                                Chiudi <svg class="c-icon c-icon--16">
                                    <use xlink:href="#ic_close_black_24px"></use>
                                </svg>
                            </button>
                        </div>

                        <ul class="c-notifications__list">
                            <li class="important not-read">
                                <span class="c-notifications__title">Lorem ipsum dolor sit amet</span>
                                <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                                <a class="c-notifications__link" href="#">></a>
                            </li>
                            <li class="not-read">
                                <span class="c-notifications__title"></span>
                                <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                                <a class="c-notifications__link" href="#">></a>
                            </li>
                            <li class="">
                                <span class="c-notifications__title"></span>
                                <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                                <p>Prevista forte nevicata il 5 Dicembre dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                                <a class="c-notifications__link" href="#">></a>
                            </li>
                            <li class="">
                                <span class="c-notifications__title"></span>
                                <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                                <a class="c-notifications__link" href="#">></a>
                            </li>
                            <li class="">
                                <span class="c-notifications__title"></span>
                                <p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
                                <a class="c-notifications__link" href="#">></a>
                            </li>
                        </ul>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="c-slim-alert">
  <div class="c-slim-alert__inner">
    <div class="c-slim-alert__content">
      <div class="c-slim-alert__label">
        <img src="{{ path '/images/svgs/stk_covid.svg' }}" alt="Accedi alla MyBLQ" aria-hidden="true" width="24">
        <strong>Covid 19:</strong>
      </div>
      <div>
        <a href="#">
          Ultimi aggiornamenti
        </a>
      </div>
      <div>
        <a href="#">
          Approfondimenti
        </a>
      </div>
      <div class="c-slim-alert__notifications">
        {{ render "@notifications" }}
      </div>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .c-slim-alert {
  position: relative;
  z-index: $zIndex-slim-alert;
}

.c-slim-alert__inner {
  position: relative;
  max-width: remify(1360px);
  margin: 0 auto;
}

.c-slim-alert__content {
  text-align: left;
  width: 100%;
  background-color: primary(sun, 40);
  padding: remify(8px) remify(16px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  
  @include min-screen(bp(tablet-p)) {
    border-radius: 0px 0px remify(16px) remify(16px);
    position: absolute;
    top: 0;
    // right: 0;
    z-index: $z-Index-slim-alert;
    width: auto;
  }
}

.c-slim-alert__content > div {
  display: inline-block;
  @include font-scale(level-1);
  color: secondary(text,100);
  margin-right: remify(8px);

  // &:not([class]) {
  //   overflow: hidden;
  //   white-space: nowrap;
  //   text-overflow: ellipsis;
  // }

  &:last-child {
    margin-right: 0;
  }

  & > *,
  a {
    color: primary(night,100);
  }

  a {
    font-weight: fw(bold);
  }

  &.c-slim-alert__label {
    // flex: 1 0 auto;

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

    img {
      display: none;
      @include min-screen(bp(phablet)) {
        display: inline-block;
      }
    }
  }

  &.c-slim-alert__notifications {
    margin-right: 0;
    margin-left: auto;
    display: block;

    @include min-screen(bp(tablet-p)) {
      display: none;
    }
  }
  
}

/*------------------------------------*
  Modifier: notifications
*------------------------------------*/
.c-slim-alert--notifications {
  @include min-screen(bp(tablet-p)) {
    display: none;
  }
}

/*------------------------------------*
  Modifier: generic
*------------------------------------*/
.c-slim-alert--generic {
  .c-slim-alert__label {
    display: none;

    @include min-screen(bp(tablet)) {
      display: inline-block;
    }
  }

  .c-slim-alert__text {
    @include font-scale(level-1);
  }
}

/*------------------------------------*
  Modifier: mid-size
*------------------------------------*/
.c-slim-alert--mid-size-text {
  .c-slim-alert__content > div {
    @include font-scale(level-1-5);
  }
}
  • URL: /components/raw/slim-alert/_slim-alert.scss
  • Filesystem Path: src/views/02-molecules/slim-alert/_slim-alert.scss
  • Size: 2.2 KB

No notes defined.