overleaf/services/web/frontend/stylesheets/components/notifications.less

.notification-body {
  // will be deprecated once notifications moved to use .notification (see below)
  flex-grow: 1;
  width: 90%;
  @media (min-width: @screen-sm-min) {
    width: auto;
  }
}

.notification-action {
  // will be deprecated once notifications moved to use .notification (see below)
  margin-top: (@line-height-computed / 2); // match paragraph padding
  order: 1;
  @media (min-width: @screen-sm-min) {
    margin-top: 0;
    order: 0;
    padding-left: @padding-sm;
  }
}

.notification-close {
  // will be deprecated once notifications moved to use .notification (see below)
  padding-left: @padding-sm;
  text-align: right;
  width: 10%;

  button {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    float: right;
    padding: 5.5px;
    cursor: pointer;
    background: transparent;
    border: 0;

    &:hover,
    &:focus {
      background-color: rgba(@neutral-90, 0.08);
      color: @text-color;
    }
  }

  @media (min-width: @screen-sm-min) {
    width: auto;
  }
}

.notification {
  border-radius: @border-radius-base-new;
  color: @content-primary;
  display: flex;
  padding: 0 16px 0 16px; // vertical padding added by elements within notification
  width: 100%;

  a:not(.btn) {
    text-decoration: underline;
  }

  p {
    margin-bottom: 4px;
  }

  .notification-icon {
    flex-grow: 0;
    padding: 18px 16px 0 0;
  }

  .notification-content-and-cta {
    // shared container to align cta with text on smaller screens
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;

    p:last-child {
      margin-bottom: 0;
    }
  }

  .notification-content {
    flex-grow: 1;
    padding: 16px 0 16px 0;
    width: 100%;
  }

  .notification-cta {
    padding-bottom: 16px;

    a {
      font-weight: 700;
    }

    a,
    button {
      white-space: nowrap;
    }
  }

  .notification-close-btn {
    height: 56px;
    align-items: center;
    display: flex;
  }

  .notification-close-btn {
    padding: 0 0 0 16px;

    button {
      aspect-ratio: 1;
      border-radius: 50%;
      display: flex;
      float: right;
      padding: 5.5px;
      cursor: pointer;
      background: transparent;
      border: 0;

      &:hover,
      &:focus {
        background-color: rgba(@neutral-90, 0.08);
        color: @text-color;
      }
    }
  }

  &.notification-type-info {
    background-color: @blue-10;
    border: 1px solid @blue-20;
    .notification-icon {
      color: @blue-50;
    }
  }
  &.notification-type-success {
    background-color: @green-10;
    border: 1px solid @green-20;
    .notification-icon {
      color: @green-50;
    }
  }
  &.notification-type-warning {
    background-color: @yellow-10;
    border: 1px solid @yellow-20;
    .notification-icon {
      color: @yellow-40;
    }
  }
  &.notification-type-error {
    background-color: @red-10;
    border: 1px solid @red-20;
    .notification-icon {
      color: @red-50;
    }
  }
  &.notification-type-offer {
    background-color: @white;
    border: 1px solid @neutral-20;
    .notification-icon {
      color: @neutral-50;
    }
  }

  @media (min-width: @screen-sm-min) {
    &:not(.notification-cta-below-content) {
      .notification-content-and-cta {
        flex-wrap: nowrap;
      }

      .notification-content {
        width: auto;
      }

      .notification-cta {
        height: 56px;
        padding-left: 16px;
        padding-bottom: 0;
        align-items: center;
        display: flex;
      }
    }
  }
}

.notification-list {
  .notification {
    margin-bottom: @margin-md;
  }
}

// Reconfirmation notification

.reconfirm-notification {
  display: flex;
  width: 100%;
  .fa-warning {
    margin-right: @margin-sm;
  }
  .btn-reconfirm {
    float: right;
    margin-left: @margin-sm;
    text-transform: capitalize;
  }
}

.group-invitation-cancel-subscription-notification-buttons {
  display: flex;
  align-items: center;
}

// Settings page
.affiliations-table {
  .reconfirm-notification {
    margin: 0px auto @margin-sm auto !important;
    padding: @padding-md;
  }

  .reconfirm-row {
    td {
      border: 0;

      .alert {
        border: 0;
        padding: 0;
      }

      :not(.alert) {
        .reconfirm-notification {
          background-color: @ol-blue-gray-0;
          border-radius: @border-radius-base;
          .fa-warning {
            color: @brand-warning;
          }
        }
      }
    }
  }
}