other / mew-iview

  @message-prefix-cls: ~"@{css-prefix}message";
  @icon-prefix-cls: ~"@{css-prefix}icon";
  
  .@{message-prefix-cls} {

      font-size: @font-size-base;

      position: fixed;
      z-index: @zindex-message;
      width: 100%;
      top: 16px;
      left: 0;

      pointer-events: none;

  
      &-notice {

          padding: 8px;
          text-align: center;

          transition: height @animation-time @ease-in-out, padding @animation-time @ease-in-out;
  

          &:first-child {
            margin-top: -8px;
          }

  
          &-close {
              position: absolute;
              right: 4px;
              top: 9px;
              color: #999;
              outline: none;
  
              i.@{icon-prefix-cls}{
                  .close-base(-3px);
              }
          }

      }
  
      &-notice-content {

          display: inline-block;
          pointer-events: all;

          padding: 8px 16px;

          //border: 1px solid @border-color-split;

          border-radius: @border-radius-small;

          box-shadow: @shadow-base;
          background: #fff;

          position: relative;

          &-text{
              display: inline-block;
          }
      }
  
      &-notice-closable{
          .@{message-prefix-cls}-notice-content-text{
              padding-right: 32px;
          }

      }
  
      &-success .@{icon-prefix-cls} {
          color: @success-color;
      }
  
      &-error .@{icon-prefix-cls} {
          color: @error-color;
      }
  
      &-warning .@{icon-prefix-cls} {
          color: @warning-color;
      }
  
      &-info .@{icon-prefix-cls},
      &-loading .@{icon-prefix-cls} {
          color: @primary-color;
      }
  
      .@{icon-prefix-cls} {

          margin-right: 4px;
          font-size: @font-size-large;
          vertical-align: middle;
      }
      &-custom-content{
          span{
              vertical-align: middle;
          }

      }
  }