@eclipse-scout/core/src/messagebox/MessageBox.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
 */
.messagebox {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 200px;
  max-width: @messagebox-max-width;
  #scout.popup-2();
  overflow: hidden;
  margin: 10px /* minimum padding to desktop */ 10px 15px;

  &.full-height.full-width {
    border-radius: 0;
  }

  &.full-width {
    & > .messagebox-buttons {
      padding-left: 10px;
      padding-right: 10px;

      & > .box-button {
        min-width: 70px; /* less min width for buttons on small screens */
        margin-right: 8px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .severity-button(@color, @hover-color: darken(@color, 6%), @active-color: darken(@color, 13%), @focus-color: @focus-box-shadow-color) {
    & > .box-buttons > .box-button {
      border-color: @color;
      color: @color;

      &:focus {
        box-shadow: none; /* remove default behavior of buttons. Here the keyboard-navigation class is used instead */
      }

      &.keyboard-navigation {
        #scout.focus-border(@box-shadow-color: @focus-color, @border-color: mix(@color, @focus-color, 25%));
      }

      &.disabled {
        color: @button-disabled-color;
        border-color: @button-disabled-border-color;
      }

      &.default {
        color: @default-button-color;
        background-color: @color;

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

        &.active, &:active {
          background-color: @active-color;
          border-color: @active-color;
        }

        &.keyboard-navigation {
          #scout.focus-border(@box-shadow-color: @focus-color, @border-color: mix(@color, @focus-color, 25%));
        }

        &.disabled {
          color: @button-disabled-color;
          border-color: @button-disabled-border-color;
          background-color: @button-disabled-background-color;
        }
      }
    }
  }

  &.info {
    & > .messagebox-content > .messagebox-header {
      color: @info-color;

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

    .severity-button(@info-color, @default-button-hover-background-color, @default-button-active-background-color);
  }

  &.error {
    & > .messagebox-content > .messagebox-header {
      color: @error-color;

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

    .severity-button(@error-color, @error-default-button-background-hover-color, @error-default-button-background-active-color, @error-focus-box-shadow-color);
  }

  &.warning {
    & > .messagebox-content > .messagebox-header {
      color: @warning-color;

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

    .severity-button(@warning-color, @warning-default-button-background-hover-color, @warning-default-button-background-active-color, @warning-focus-box-shadow-color);
  }

  &.ok {
    & > .messagebox-content > .messagebox-header {
      color: @ok-color;

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

    .severity-button(@ok-color, @ok-default-button-background-hover-color, @ok-default-button-background-active-color, @ok-focus-box-shadow-color);
  }

  &.animate-open {
    #scout.animation-name(short-drop);
    #scout.animation-duration(0.5s);
  }

  &.animate-modality-highlight {
    #scout.animation-shake();
  }
}

.messagebox-content {
  min-height: 30px;
  padding: @messagebox-label-padding 26px 17px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* add a bit of extra space to the scrollbar on the right */

  & > .scrollbar.y-axis {
    width: @scrollbar-size + 2;
  }
}

.messagebox-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  font-size: @font-size-smaller;
  justify-content: center;
  flex-shrink: 0;
}

.messagebox-label {
  word-wrap: break-word;
  word-break: break-word;

  &.copyable {
    #scout.user-select(text);
  }
}

.messagebox-header {
  font-size: @font-size-large;
  font-weight: @font-weight-bold;
  padding-bottom: 14px;
  text-align: center;

  & > .messagebox-icon {
    color: @text-inverted-color;
    font-size: 14px;
    border-radius: 50%;
  }

  &.has-text > .messagebox-icon {
    margin-right: 12px;
  }
}

.messagebox-html {
  .has-body > & {
    padding-top: 10px;
  }

  // Ensure top and bottom gaps are always the same for every message box even if the content starts with an element having a margin (e.g. p, ul, etc)
  // Small draw back: if there is a text node before a p element, the p element will lose its margin anyway.
  // If that is not desired, the text node has to be wrapped into a regular html node (span, div, p etc.)
  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  & > p {
    margin: 8px 0;

    & + ul {
      // Reduce gap slightly if ul follows a p so that it looks the same as without a p
      margin-top: -4px;
    }
  }

  & > ul {
    margin: 5px 0;
  }

  & > ul {
    padding-left: 26px;

    & > li {
      margin-top: 3px;

      &:first-child {
        margin-top: 0;
      }
    }
  }
}

.messagebox-buttons {
  display: flex;
  justify-content: center;
  padding: 4px 26px 25px 26px;
}

@media (max-width: @messagebox-max-width) {
  .messagebox {
    /* no need to have a margin on small screens */
    margin: 0;
  }
}