Misago/uiframework/misago/css/misago/alerts.less

//
// Alerts
// --------------------------------------------------


.misago-alert-close(@text, @bg) {
  background-color: @bg;
  box-shadow: 0px 0px 0px 2px fadeOut(@text, 25%);
  .opacity(1);

  color: fadeOut(@text, 10%);

  &:hover {
    background-color: @text;
    box-shadow: 0px 0px 0px 2px @text;

    color: darken(@bg, 35%);
  }

  &:active, &:focus {
    background-color: darken(@bg, 15%);
    outline: none;

    color: @text;
  }
}


.misago-alerts {
  text-align: center;

  .alert {
    border: none;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;

    .alert-icon {
      margin: -@alert-padding 0px;
      margin-right: @alert-padding / 2;
      position: relative;
      top: @font-size-large / 4;

      font-size: @font-size-large * 1.5;
    }

    .close {
      border-radius: @border-radius-small;
      float: none;
      margin-left: @alert-padding;
      padding: 6px 8px;

      font-size: @font-size-small;
      text-shadow: none;
    }

    &.alert-success {
      .close {
        .misago-alert-close(@alert-success-text, @alert-success-bg);
      }
    }

    &.alert-info {
      .close {
        .misago-alert-close(@alert-info-text, @alert-info-bg);
      }
    }

    &.alert-warning {
      .close {
        .misago-alert-close(@alert-warning-text, @alert-warning-bg);
      }
    }

    &.alert-danger {
      .close {
        .misago-alert-close(@alert-danger-text, @alert-danger-bg);
      }
    }
  }

  &.alerts-fixed {
    position: fixed;
    top: 0;
    z-index: @zindex-modal + 1;
    overflow: visible;
    width: 100%;

    &>div {
      width: 100%;
      overflow: hidden;

      .alert {
        box-shadow: 0px 0px 0px 6px fadeOut(#000, 85%);
        border-radius: 0px;
        display: block;
        padding: @line-height-computed 0px;

        font-size: @font-size-large;

        .alert-icon {
          position: relative;
          top: (@font-size-large - @font-size-base) / 2;
        }
      }
    }
  }
}