@eclipse-scout/core/src/desktop/notification/DesktopNotification.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
@desktop-notification-width: 300px;
@desktop-notification-margin-bottom: 10px;

.desktop-notifications {
  @desktop-notifications-margin-top: @desktop-header-height + 8px;

  position: fixed;
  right: 10px;
  top: 0;
  height: calc(~'100% - ' @desktop-notifications-margin-top);
  width: @desktop-notification-width;
  margin-top: @desktop-notifications-margin-top;
  pointer-events: none; /* Don't block access to the elements in the background */
}

/*** Animation: slide-in ***/

@-webkit-keyframes desktop-notification-slide-in {
  .keyframes-desktop-notification-slide-in();
}

@keyframes desktop-notification-slide-in {
  .keyframes-desktop-notification-slide-in();
}

/**
 * Slides in the notification from the right end of the screen
 * and increases the size of the bottom margin to move down existing
 * notifications.
 */
.keyframes-desktop-notification-slide-in() {
  0% {
    left: @desktop-notification-width;
    margin-bottom: 0;
  }
  80% {
    left: 15px;
  }
  100% {
    left: 0;
    margin-bottom: @desktop-notification-margin-bottom;
  }
}

.animation-desktop-notification-slide-in() {
  #scout.animation-name(desktop-notification-slide-in);
  #scout.animation-duration(0.3s);
  #scout.animation-iteration-count(1);
  #scout.animation-timing-function(ease-out);
}

.desktop-notification-slide-in {
  .animation-desktop-notification-slide-in();
}

/*** Animation: fade-out ***/

@-webkit-keyframes desktop-notification-fade-out {
  .keyframes-desktop-notification-fade-out();
}

@keyframes desktop-notification-fade-out {
  .keyframes-desktop-notification-fade-out();
}

.keyframes-desktop-notification-fade-out() {
  0% {
    opacity: 1.0;
  }
  100% {
    opacity: 0;
  }
}

.animation-desktop-notification-fade-out() {
  #scout.animation-name(desktop-notification-fade-out);
  #scout.animation-duration(0.3s);
  #scout.animation-iteration-count(1);
  #scout.animation-timing-function(ease-out);
}

.desktop-notification-fade-out {
  .animation-desktop-notification-fade-out();
}

.desktop-notification {
  position: relative;
  width: @desktop-notification-width;
  display: flex;
  align-items: center;
  background-color: @desktop-notification-background-color;
  margin-bottom: @desktop-notification-margin-bottom;
  padding: 8px 10px;
  border-radius: @border-radius-medium;
  pointer-events: auto;
  #scout.drop-shadow-large();

  &.no-icon {
    padding: @desktop-notification-no-icon-padding-y 12px @desktop-notification-no-icon-padding-y 23px;
  }

  /* Prevent overlay of text/loader and close icon */

  &.closable {
    padding-right: 35px;
  }
}

.desktop-notification-content {
  max-width: 100%;

  .has-icon > & {
    max-width: calc(~'100% - 40px');
    margin-left: 10px;
  }

  .ok > & {
    color: @ok-color;
    font-weight: @font-weight-bold;

    .no-icon& {
      &::before {
        .notification-severity-marker(@desktop-notification-ok-border-color);
      }
    }
  }

  .info > & {
    // info uses default font weight and color

    .no-icon& {
      &::before {
        .notification-severity-marker(@desktop-notification-info-border-color);
      }
    }
  }

  .warning > & {
    color: @warning-color;
    font-weight: @font-weight-bold;

    .no-icon& {
      &::before {
        .notification-severity-marker(@desktop-notification-warning-border-color);
      }
    }
  }

  .error > & {
    color: @error-color;
    font-weight: @font-weight-bold;

    .no-icon& {
      &::before {
        .notification-severity-marker(@desktop-notification-error-border-color);
      }
    }
  }

  & > .closer {
    position: absolute;
    padding: 4px;
    margin: 2px;
    right: 9px;
    top: 9px;

    &:hover {
      background-color: @hover-background-color;
    }

    .ok > & {
      color: @ok-color;
    }

    .warning > & {
      color: @warning-color;
    }

    .error > & {
      color: @error-color;
    }
  }
}

.desktop-notification-message {
  #scout.overflow-ellipsis();

  .desktop-notification.loading > .desktop-notification-content.offline-message > &.offline-message-text {
    #scout.font-text-normal();
    color: @text-color;
  }

  // Prevent empty div from collapsing (without  )
  &:empty::after {
    content: '\200b'; // U+200B ZERO WIDTH SPACE
  }
}

.desktop-notification-loader {
  flex-grow: 0;
  flex-shrink: 0;
}

.desktop-notification-loader.animated::after {
  #scout.animation(pulsate 2s cubic-bezier(0.5, 0.1, 0.1, 0.5) infinite);
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  margin-left: 16px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px fade(@busyindicator-color, 80%) solid;
  width: 14px;
  height: 14px;
}