Aeroporto di Bologna - Design System

Messaggi di stato: Light Info 

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

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

    <p class="c-alert__message">
        Lorem ipsum dolor sit amet consectetur
    </p>

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

</div>
 
<div class="c-alert {{ modifier }}">
  
  {{#if icon}}
  <div class="c-alert__icon">
      {{> @icon icon }}
  </div>
  {{/if}}

  {{#if img}}
  <img src="{{ path img.src }}" alt="{{ img.alt }}" class="c-alert__image">
  {{/if}}

  <p class="c-alert__message">
    {{{ message }}}
  </p>

  {{#if close}}
    <button class="c-alert__close js-btn-close-alert" type="button" aria-hidden="true" value="close">
      {{> @icon close }}
      <span class="u-visuallyhidden">close</span>
    </button>
  {{/if}}

</div>
 
{
  "modifier": "c-alert--lightinfo",
  "icon": {
    "class": "c-icon c-icon--24",
    "symbol": "ic_info_black_24px"
  },
  "close": {
    "class": "c-icon c-icon--24",
    "symbol": "ic_close_black_24px"
  },
  "message": "Lorem ipsum dolor sit amet consectetur"
}
  • Content: 
    .c-alert {
  padding: remify(16px) remify(16px) remify(16px) remify(24px);
  display: flex;
  align-items: center;
  width: 95%;
  max-width: remify(800px);
  border-radius: remify(100px) remify(80px) remify(8px) remify(100px);
  background-color: primary(night, 100);
  color: #fff;
  @include shadow(high);
  z-index: $zIndex-alerts;

  @include min-screen (bp(tablet)) {
    padding: remify(16px);
  }

  svg * {
    fill: #fff;
  }

  main & {
    position: absolute;
    @include centerer-horizontal;
    margin-top: remify(-8px);
  }

  .c-alert__message {
    color: currentColor;
    text-align: left;

    @include min-screen (bp(tablet)) {
     @include font-scale(level-2);
    }

    .c-notifications & {
      font-size: 75%;
      line-height: 1.5;
      width: 65%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      @include min-screen (bp(phone-p)) {
        width: 75%;
      }

    }
    
    .c-convention--telepass & {
      color: currentColor;
      margin-bottom: 0;
    }

  }
  
  a {
    color: currentColor;
  }

  .c-notifications & {
    padding: remify(16px);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: remify(100px);
    z-index: 0;
    max-width: remify(375px);
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;

    main & {
      position: absolute;
      left: initial;
      margin-top: initial;
    }

  }
  
  &.is-underskin {
    z-index: -1;
  }

}

.c-alert.is {
  z-index: -1;
}

.c-alert__icon {
  display: none;
  width: remify(40px);
  height: remify(40px);
  border-radius: 50%;
  position: relative;
  margin-right: remify(16px);
  flex-shrink: 0;

  svg {
    @include centerer;
  }

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

  .c-notifications & {
    display: none;
  }

}

.c-alert__close {
  background: none;
  border: none;
  width: remify(40px);
  height: remify(40px);
  padding: 0;
  margin-left: auto;

  .c-notifications & {
    margin-left: remify(-8px);
    margin-top: remify(8px);
    width: remify(30px);
    height: remify(30px);
  }

  .c-alert--highlighted & {
    svg * {
      fill: #000;
    }
  }

  .c-convention--telepass &:not(.c-dialog__close) {    
    margin: 0 0 0 auto;
  }


}

.c-alert__image {
  width: remify(60px);
  margin-right: remify(16px);
}

/*------------------------------------*\
  Positive
\*------------------------------------*/

.c-alert--positive {
  background-color: status(positive);

  .c-alert__icon {
    background-color: darken( status(positive), 8% );
  }

}

/*------------------------------------*\
  Negative
\*------------------------------------*/

.c-alert--negative {
  background-color: status(negative);

  .c-alert__icon {
    background-color: darken( status(negative), 8% );
  }

}

/*------------------------------------*\
  Warning
\*------------------------------------*/

.c-alert--warning {
  background-color: #FB8001;

  .c-alert__icon {
    background-color: primary(sun, 120);
  }

}

/*------------------------------------*\
  Info
\*------------------------------------*/

.c-alert--info {
  background-color:primary(night, 80);

  .c-alert__icon {
    background-color:primary(night, 60);
  }

}

/*------------------------------------*\
 Light info
\*------------------------------------*/

.c-alert--lightinfo {
  background-color:primary(sky, 20);
  color: secondary(text, 100);

  .c-alert__close svg * {
    fill: primary(sky, 100);
  }

  .c-alert__icon {
    background-color: primary(sky, 100);
  }

}

/*------------------------------------*\
  highlighted
\*------------------------------------*/

.c-alert--highlighted {
  background-color: #fff;
  color: secondary(text, 100);

  .c-alert__icon {
    background-color:primary(night, 60);
  }

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

}

/*------------------------------------*
  Full rounded
*------------------------------------*/
.c-alert--full-rounded {
  border-radius: remify(100px);
}
  • URL: /components/raw/alert/_alert.scss
  • Filesystem Path: src/views/02-molecules/alert/_alert.scss
  • Size: 4 KB
  • Content: 
    (function() {

  var alert = $('.c-alert');
  var btnCloseAlert = $('.js-btn-close-alert');

  btnCloseAlert.click(function(){
    $(this).parent(alert).fadeOut(300);
  });

})(jQuery);
  • URL: /components/raw/alert/alert.js
  • Filesystem Path: src/views/02-molecules/alert/alert.js
  • Size: 185 Bytes

No notes defined.