@eclipse-scout/core/src/notification/Notification.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
 */

.notification-severity-marker(@color, @margin-left: 8px) {
  content: '';
  position: absolute;
  border: 2px solid @color;
  background-color: @color;
  margin: 7px 0 7px @margin-left;
  border-radius: 2px;
  top: 0;
  left: 0;
  width: 0;
  height: calc(~'100% - '(7px * 2));
}

.notification {
  position: relative;
  display: flex;
  align-items: center;
  margin: 10px 0 0 10px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: @border-radius-medium;
  color: @text-color;
  pointer-events: auto;
  font-weight: @font-weight-bold;
  --no-icon-marker-color: @notification-info-border-color;

  &.alternative {
    border: 0;

    & > .notification-icon.font-icon {
      --icon-background-color: var(--no-icon-marker-color);
    }
  }

  &.no-icon {
    padding: @notification-no-icon-padding-y @notification-no-icon-padding-right @notification-no-icon-padding-y @notification-no-icon-padding-left;

    &::before {
      .notification-severity-marker(var(--no-icon-marker-color), 9px);
    }
  }

  &.ok {
    border-color: @notification-ok-border-color;
    color: @ok-color;
    --no-icon-marker-color: @notification-ok-border-color;

    &.alternative {
      color: @notification-alternative-ok-color;
      background-color: @notification-alternative-ok-background-color;
      --no-icon-marker-color: @notification-alternative-ok-color;
    }
  }

  &.info {
    border-color: @notification-info-border-color;
    font-weight: @font-weight-normal;
    --no-icon-marker-color: @notification-info-border-color;

    &.alternative {
      color: @notification-alternative-info-color;
      font-weight: @font-weight-bold;
      background-color: @notification-alternative-info-background-color;
      --no-icon-marker-color: @notification-alternative-info-marker-color;
    }
  }

  &.warning {
    border-color: @notification-warning-border-color;
    color: @warning-color;
    --no-icon-marker-color: @notification-warning-border-color;

    &.alternative {
      color: @notification-alternative-warning-color;
      background-color: @notification-alternative-warning-background-color;
      --no-icon-marker-color: @notification-alternative-warning-color;
    }
  }

  &.error {
    border-color: @notification-error-border-color;
    color: @error-color;
    --no-icon-marker-color: @notification-error-border-color;

    &.alternative {
      color: @notification-alternative-error-color;
      background-color: @notification-alternative-error-background-color;
      --no-icon-marker-color: @notification-alternative-error-color;
    }
  }

  /* When notification is a direct child of the main group-box: use different margins */

  .root-group-box > & {
    margin-left: 10px + @root-group-box-padding-left;
    margin-right: @root-group-box-padding-right;
  }
}

.notification-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  --icon-background-color: @background-color;

  &.font-icon {
    color: @text-inverted-color;
    background-color: var(--icon-background-color);
    font-size: 14px;
    border-radius: 50%;

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

    .info > & {
      --icon-background-color: @info-color;
    }

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

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

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

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

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

  & > .closer {
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 6px;

    .has-icon > & {
      right: 9px;
      top: 9px;
    }

    .ok > &,
    .warning > &,
    .error > &,
    .alternative > & {
      color: inherit;
    }
  }
}

.notification-message {
  padding-right: 12px;
  #scout.user-select(text);
  #scout.overflow-ellipsis();

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