Misago/misago/emberapp/app/styles/misago/flash-message.less

//
// Flash Message
// --------------------------------------------------


.flash-message-style(@color-bg, @color-border, @color-text) {
  background: @color-bg;
  border: 1px solid @color-border;
  border-top: none;
  .box-shadow(0px 2px 3px fadeOut(@gray-darker, 70%));
  padding: @alert-padding;

  color: @color-text;

  .fa {
    margin-right: @font-size-base / 2;
  }
}


.flash-message {
  position: fixed;
  top: -100%;
  width: 100%;
  z-index: @zindex-modal + 10;

  text-align: center;
  font-size: @font-size-large;

  transition: top 300ms ease;

  &.visible {
    top: 0px;
    transition: top 200ms ease;
  }

  .message-success {
    .flash-message-style(@alert-success-bg, @alert-success-border, @alert-success-text);
  }

  .message-info {
    .flash-message-style(@alert-info-bg, @alert-info-border, @alert-info-text);
  }

  .message-warning {
    .flash-message-style(@alert-warning-bg, @alert-warning-border, @alert-warning-text);
  }

  .message-danger {
    .flash-message-style(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
  }

  /* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm-min) {
    padding: 0px @padding-large-horizontal;
    pointer-events: none;

    p {
      border-left: none;
      border-right: none;
      border-radius: 0px 0px @alert-border-radius @alert-border-radius;
      display: inline-block;
      padding: @padding-large-vertical @padding-large-horizontal;

      font-size: @font-size-base;
    }
  }
}