rsuite/Message/styles/index.less

A suite of react components

@import '../../styles/common.less';
@import '../../toaster/styles/animation.less';
@import '../../internals/CloseButton/styles/index.less';
@import './mixin.less';

//
// Messages
// --------------------------------------------------

// Base styles
// -------------------------

.rs-message {
  border-radius: @message-border-radius;
  font-size: @font-size-base;
  line-height: @line-height-base;
  position: relative;
  animation-fill-mode: forwards;
  overflow: hidden;

  &-container {
    padding: @message-padding;
    padding-right: @message-padding + 8px;
    display: flex;
  }

  &-centered {
    .rs-message-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
    }

    .rs-message-icon {
      align-self: center !important;

      .rs-icon {
        font-size: 40px !important;
      }
    }

    &.rs-message-bordered {
      border-left-width: 1px !important;
      border-top-width: 4px !important;
    }
  }

  // Message icon
  &-icon {
    align-self: center;
    font-size: 0; // remove whitespace before svg
    margin-right: 10px;

    // Icon
    .rs-icon {
      font-size: @message-icon-size;
      align-items: center;
    }
  }

  &-content {
    flex-grow: 1;
  }

  // Header
  &-header {
    color: var(--rs-text-heading);
    line-height: unit((round((@message-icon-large-size / @message-title-size), 16)));
    font-weight: bold;
    .ellipsis();

    & + .rs-message-body {
      margin-top: 4px;
    }
  }

  // Description
  &-body {
    color: var(--rs-text-primary);
    ul,
    ol {
      margin: 0;
      padding: 0;
      padding-inline-start: 16px;
    }
  }

  // Message with a title
  &.rs-message-has-title {
    // Bigger icon
    .rs-message-icon {
      align-self: flex-start;

      .rs-icon {
        font-size: @message-icon-large-size;
        line-height: 1;
      }
    }
  }

  // Multiple messages should have spacing
  // Hiding Message haven't spacing.
  &:not(.rs-message-hiding) + & {
    margin-top: 10px;

    //The last message hiding haven't clearance.
    &.rs-message-hiding:last-child {
      transition: margin-top 0.1s linear 0.3s;
      margin-top: 0;
    }
  }

  &.rs-message-hiding {
    // The same with notification
    animation: notificationMoveOut 0.3s ease-in forwards;
  }

  // In dark mode, links inside Message body shows underline by default
  .dark-mode({
    .rs-btn-link,
    a {
      color: inherit;
      text-decoration: underline;
    }
  });
}

// Full the containers
.rs-message-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 0;
  z-index: @zindex-message-full;
}

// Alternate styles
// -------------------------
// Generate contextual modifier classes for colorizing the message.

.rs-message-success {
  // Don't write arguments in single line when using var()
  // it breaks stylelint
  .message-variant(
    var(--rs-message-success-bg);
    var(--rs-message-success-header);
    var(--rs-message-success-text);
    var(--rs-message-success-icon);
    var(--rs-message-success-border);
    var(--rs-message-success-icon-border);
  );

  .high-contrast-mode({
    border: 1px solid var(--rs-message-success-border);
  });
}

.rs-message-info {
  .message-variant(
    var(--rs-message-info-bg);
    var(--rs-message-info-header);
    var(--rs-message-info-text);
    var(--rs-message-info-icon);
    var(--rs-message-info-border);
    var(--rs-message-info-icon-border);
  );

  .high-contrast-mode({
    border: 1px solid var(--rs-message-info-border);
  });
}

.rs-message-warning {
  .message-variant(
    var(--rs-message-warning-bg);
    var(--rs-message-warning-header);
    var(--rs-message-warning-text);
    var(--rs-message-warning-icon);
    var(--rs-message-warning-border);
    var(--rs-message-warning-icon-border);
  );

  .high-contrast-mode({
    border: 1px solid var(--rs-message-warning-border);
  });
}

.rs-message-error {
  .message-variant(
    var(--rs-message-error-bg);
    var(--rs-message-error-header);
    var(--rs-message-error-text);
    var(--rs-message-error-icon);
    var(--rs-message-error-border);
    var(--rs-message-error-icon-border);
  );

  .high-contrast-mode({
    border: 1px solid var(--rs-message-error-border);
  });
}