rsuite/Message/styles/mixin.less

A suite of react components

// Messages

.message-variant(@background; @header-color; @text-color; @icon-color; @border-color; @icon-border-color;) {
  background-color: #fff;

  &.rs-message-bordered {
    border: 1px solid @border-color;
    border-left-width: 4px;

    .rs-message-icon {
      box-sizing: content-box;
      border: 4px solid @icon-border-color;
      border-radius: 50%;
    }
  }

  .rs-message-container {
    background-color: @background;
  }

  .rs-message-header {
    color: @header-color;
  }

  .rs-message-body {
    color: @text-color;
  }

  .rs-btn-close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 8px;
    font-size: 12px;
  }

  .rs-message-icon > .rs-icon,
  .rs-btn-close {
    color: @icon-color;
  }
}