Aeroporto di Bologna - Design System

Notifiche: Highlighted 

<div class="c-notifications ">

    <div class="c-alert c-alert--highlighted">

        <div class="c-alert__icon">
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic_close_black_24px"></use>
            </svg>
        </div>

        <p class="c-alert__message">
            <strong>Prevista forte nevicata il 5 Dicembre dalle 10:00 alle ore 17:00</strong>.<br><a href="#">Scopri di più</a>
        </p>

        <button class="c-alert__close js-btn-close-alert" type="button" aria-hidden="true" value="close">
            <svg class="c-icon c-icon--18">
                <use xlink:href="#ic_close_black_24px"></use>
            </svg> <span class="u-visuallyhidden">close</span>
        </button>

    </div>
    <button type="button" class="c-notifications__button 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 js-notificationsBox" role="region" aria-live="polite" id="aria-notifications">
        <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--18">
                <use xlink:href="#ic_close_black_24px"></use>
            </svg>
        </button>
        <ul class="c-notifications__list">
            <li class="important not-read">
                <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>
            </li>
            <li class="not-read">
                <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>
            </li>
            <li class="">
                <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>
            </li>
            <li class="">
                <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>
            </li>
            <li class="">
                <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>
            </li>
        </ul>
    </div>

</div>
 
<div class="c-notifications {{ modifier }}">

  {{> @alert highlighted }}

  <button type="button" class="c-notifications__button js-toggleNotificationsBtn" aria-expanded="false" aria-label="{{ aria-label }}"
    aria-controls="aria-notifications">
    {{> @icon class="c-icon c-icon--24" symbol="ic_notifications_active_black_24px" }}
    <p class="c-notifications__indicator" aria-hidden="true">2</p>
  </button>

  <div class="c-notifications__box js-notificationsBox" role="region" aria-live="polite" id="aria-notifications">
    <button type="button" class="c-notifications__closeBtn js-toggleNotificationsBtn" aria-expanded="false" aria-label="Chiudi" aria-controls="aria-notifications">
      Chiudi {{> @icon class="c-icon c-icon--18" symbol="ic_close_black_24px" }}
    </button>
    <ul class="c-notifications__list">
      {{#each notifications}}
        <li class="{{this.modifier}}">{{{ this.content }}}</li>
      {{/each}}
    </ul>
  </div>

</div>
 
{
  "aria-label": "Notifiche",
  "alert": {
    "modifier": "c-alert--negative",
    "icon": {
      "class": "c-icon c-icon--24",
      "symbol": "ic_close_black_24px"
    },
    "close": {
      "class": "c-icon c-icon--18",
      "symbol": "ic_close_black_24px"
    },
    "message": "<strong>Prevista forte nevicata il 5 Dicembre dalle 10:00 alle ore 17:00</strong>.<br><a href=\"#\">Scopri di più</a>"
  },
  "highlighted": {
    "modifier": "c-alert--highlighted",
    "icon": {
      "class": "c-icon c-icon--24",
      "symbol": "ic_close_black_24px"
    },
    "close": {
      "class": "c-icon c-icon--18",
      "symbol": "ic_close_black_24px"
    },
    "message": "<strong>Prevista forte nevicata il 5 Dicembre dalle 10:00 alle ore 17:00</strong>.<br><a href=\"#\">Scopri di più</a>"
  },
  "notifications": [
    {
      "modifier": "important not-read",
      "title": "Lorem ipsum dolor sit amet",
      "content": "<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>"
    },
    {
      "modifier": "not-read",
      "content": "<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>"
    },
    {
      "content": "<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>"
    },
    {
      "content": "<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>"
    },
    {
      "content": "<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>"
    }
  ]
}
  • Content: 
    .c-notifications {
  position: relative;
  text-align: right;

  .c-toolbar & {
    display: none;
    @include min-screen(bp(tablet-p)) {
      display: block;
    }
  }
}

.c-notifications__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: underline;
  position: relative;
  z-index: 121;
  min-width: remify(48px);
  height: remify(30px);
  border-radius: remify(12px);
  padding: remify(4px);
  background-color: primary(sun, 100);
  border: transparent;
  text-decoration: none;
  z-index: $z-Index-notifications-btn;

  @include min-screen(bp(tablet-p)) {
    min-width: remify(40px);
    height: remify(40px);
    padding: remify(12px) remify(8px);
    border-radius: remify(12px);
    margin-left: remify(6px);
  }
  
  @include min-screen(bp(tablet-l)) {
    min-width: remify(48px);
    height: remify(48px);
    padding: remify(12px);
    margin-left: remify(8px);
  }

  &:focus {
    @include outline;
  }

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

.c-notifications__indicator {
  width: remify(24px);
  height: remify(24px);
  background-color: #fff;
  color: primary(night, 100);
  font-weight: fw(bold);
  font-size: remify(12px);
  text-align: center;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  margin-left: remify(4px);
  @include min-screen(bp(tablet-p)) {}

  .has-indicator & {
    display: inline-flex;
  }
}

.c-notifications__box {
  display: none;
  width: 100%;
  min-width: remify(320px);
  max-width: remify(800px);
  background-color: primary(sun, 100);
  border-radius: remify(12px) remify(0px) remify(12px) remify(12px);
  position: absolute;
  right: 0;
  top: remify(30px);
  padding: remify(12px) remify(8px) remify(8px);
  box-shadow: 0px 33px 50px -12px rgba(15, 47, 77, 0.25);

  @include min-screen(bp(phone-p)) {
    min-width: remify(340px);
  }
  @include min-screen(bp(tablet-p)) {
    padding: remify(12px);
    top: remify(48px);
  }
  @include min-screen(bp(tablet-l)) {
    top: remify(60px);
  }



  &.is-visible {
    display: block;
    z-index: $z-Index-notifications;
  }

  &.is-narrow {
    max-width: remify(500px);
  }

  & > * {
    display: block;
    width: 100%;
  }

  &:before {
    content: '';
    background-color: primary(sun, 100);
    position: absolute;
    height: remify(16px);
    top: remify(-16px);
    right: 0;
    z-index: -1;
    
    width: remify(48px);
    @include min-screen(bp(tablet-p)) {
      height: remify(16px);
      top: remify(-16px);
      width: remify(40px);
    }
    @include min-screen(bp(tablet-l)) {
      height: remify(24px);
      top: remify(-24px);
      width: remify(48px);
    }
  }

  &.has-indicator:before {
    width: remify(60px);
    @include min-screen(bp(tablet-p)) {
      width: remify(68px);
    }
    @include min-screen(bp(tablet-l)) {
      width: remify(76px);
    }
  }

}


.c-notifications__list {
  text-align: left;
  max-height: remify(360px);
  overflow-y: auto;
  border-radius: remify(8px);
  
  li {
    color: secondary(text, 100);
    background: #fff;
    padding: remify(8px) remify(54px) remify(8px) remify(12px);
    border-bottom: 1px solid primary(sun, 60);
    position: relative;
    font-size: remify(12px);
    @include min-screen(bp(tablet-p)) {
      padding: remify(12px) remify(54px) remify(12px) remify(12px);
    }

    .c-notifications__title {
      font-size: remify(14px);
      line-height: remify(21px);
      font-weight: fw(bold);
      color: primary(night, 120);
      display: block;
    }

    .c-notifications__link {
      color: #fff;
      text-decoration: none;
      background-color: primary(night, 120);
      width: 30px;
      height: 30px;
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: center;

      position: absolute;
      top: remify(24px);
      right: remify(8px);
      @include min-screen(bp(tablet-p)) {
        right: remify(12px);
      }

    }

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

  li.important {
    background-color: primary(sun, 20);
  }

  li.not-read {
    position: relative;
    border-left: 2px solid primary(night, 100);
  }

  p {
    margin-bottom: remify(4px);
  }

  p+p {
    margin-top: remify(16px);
  }
  
}

.c-notifications__head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 0 remify(8px) 0;
 @include min-screen(bp(tablet-p)) {
  padding: 0 0 remify(12px) 0;
}
}

.c-notifications__closeBtn {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: secondary(text, 100);
  cursor: pointer;
  width: auto;
  font-size: remify(12px);
  font-weight: fw(bold);

  svg {
    vertical-align: text-bottom;
    * {
      fill: secondary(text, 100);
    }
  }

}
  • URL: /components/raw/notifications/_notifications.scss
  • Filesystem Path: src/views/02-molecules/notifications/_notifications.scss
  • Size: 4.8 KB
  • Content: 
    (function($){
  'use strict';

  if(!$.tangible){
    $.tangible = new Object();
  };

  $.tangible.notifications = function(el, options){
    var base = this;

    base.$el = $(el);
    base.el = el;

    base.init = function(){

      base.$btnToggle = $('.js-toggleNotificationsBtn');
      base.$receiver = $('.js-notificationsBox');
      base.$alert = $('.c-notifications .c-alert');

      // Opens the box of options
      base.$btnToggle.click(function(e){
        e.preventDefault();
        base.$receiver.toggleClass('is-visible');
        base.$alert.toggleClass('is-underskin');
        // Switches the state of aria-expanded
        var expanded = $(this).attr('aria-expanded') === 'true' || false;
        $(this).attr('aria-expanded', !expanded);
        // base.removesOverlay();
      });
      
      // Closes the box when click outside of it
      // $(document).mouseup(function(e) {
      //   if (!base.$receiver.is(e.target) && base.$receiver.has(e.target).length === 0) {
      //     base.$receiver.removeClass('is-visible');
      //     base.$btnToggle.attr('aria-expanded', false);
      //   }
      // });

    };


    base.init();

    base.addsOverlay = function() {
      
    }

  };

  $.fn.tangible_notifications = function(options){
    return this.each(function(){
      (new $.tangible.notifications(this, options));
    });
  };

})(jQuery);
  • URL: /components/raw/notifications/notifications.js
  • Filesystem Path: src/views/02-molecules/notifications/notifications.js
  • Size: 1.4 KB

No notes defined.