deer-ui/es/message/style.less

React.js UI components for PC Web

@import '../styles/themes.less';
@import '../styles/animate.less';
@import '../styles/mixins.less';

@prefixCls : deer-ui-message;

.@{prefixCls}{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    .text-center();
    box-sizing: content-box;
    z-index: @default-message-z-index;
    cursor: pointer;
    text-align: center;
    font-size: @default-message-font-size;
    padding: 4px;
    transform: translate3d(0,0,0);
    border-radius: @default-message-border-radius;
    width: @default-message-width;
    height: @default-message-height;
    &.message-open{
      pointer-events: none;
      animation: deer-fade-in @default-message-show-time @animation-type forwards;
    }
    &.message-close{
      animation: deer-fade-out @default-message-show-time @animation-type forwards;
      pointer-events: none;
    }
    &.@{prefixCls}-success {
      .deer-ui-message-color(@success-color);
  }
    &.@{prefixCls}-error {
      .deer-ui-message-color(@error-color);
    }
    &.@{prefixCls}-warning {
      .deer-ui-message-color(@warning-color);
    }
    &.@{prefixCls}-info {
      .deer-ui-message-color(@info-color);
    }
    &.@{prefixCls}-primary {
      .deer-ui-message-color(@primary-color);
      svg{
        animation: deer-ui-spin @loading-time linear infinite;
      }
    }
    &.@{prefixCls}-theme-dark{
      background: @default-message-dark-bg;
      color: @default-message-dark-font-color;
      border:none
    }
    &-icon{
      margin-right: 10px;
      font-size: @default-message-icon-font-size;
      vertical-align: middle;
      margin-top: 2px; //调节视差
    }
}