bee-message/src/Message.scss

@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
@import "../node_modules/bee-icon/src/Icon.scss";

$zIndex-message: 2000;
$message-background: #f7f9fb;
$message-content-padding: 11px 64px 11px 4px;
.u-message {
    font-size: $message-font-size;
    position: fixed;
    z-index: $zIndex-message;
    &-topLeft, &-topRight, &-bottomLeft, &-bottomRight {
      .u-message-notice-description-content{
        min-width: 132px;
      }
    }

    &-notice {
      position: relative;
      padding: $message-padding;
      // @include shadow-3dp();
      box-shadow:0 4px 12px rgba(20, 27, 53, .2);
      border: 1px solid #DFE1E6;
      border-radius: $border-radius-base;
      box-sizing: border-box;
      background: $message-background;
      line-height: 1.5;
      overflow: hidden;
      color: $font-color-base;
      &-description {
        font-size: 12px;
        word-wrap: break-word;
        vertical-align: middle;
        &-content {
            min-width: 250px;
            max-width: 610px;
            display: inline-block;
            padding: $message-content-padding;
            margin-left: 40px;
        }
        &-icon{
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            padding-left: 12px;
            padding-right: 4px;
            text-align: center;
            background-color: #000;
            .uf {
                font-size: 24px;
                line-height: 40px;
                padding: 0;
            }
        }
      }

      &-close {
        position: absolute;
        right: 14px;
        top: 14px;
        cursor: pointer;
        outline: none;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        text-shadow: 0 1px 0 #fff;
        text-decoration: none;

        &-x .uf {
          font-size: 12px;
          padding: 0;
        }

        &:hover {
          opacity: 1;
          filter: alpha(opacity=100);
          text-decoration: none;
        }

      }
    }

    &-notice-dark {
      background-color: #344563;
      border-color: #344563;
      color: #fff;
      .u-message-notice-description-icon{
          background-color: #344563;
      }
    }

    &-notice-light {
          background-color: #f7f9fb;
          border-color: #DFE1E6;
          color: #54698D;
          .u-message-notice-description-icon{
              background-color: #f7f9fb;
          }
          .u-message-notice-description-content{
              color: $font-color-base;
          }
     }
    &-notice-success {
           background-color: $brand-success;
           color: #fff;
           border-color: $brand-success;
           .u-message-notice-description-icon{
               background-color: $brand-success;
           }
    }
    &-notice-danger {
            background-color: $brand-danger;
            color: #fff;
            border-color: $brand-danger;
            .u-message-notice-description-icon{
                background-color: $brand-danger;
            }
    }
     &-notice-info {
             background-color: $brand-info;
             color: #fff;
             border-color: $brand-info;
             .u-message-notice-description-icon{
                 background-color: $brand-info;
             }
    }
    &-notice-warning {
             background-color:$brand-warning;
             color: #fff;
             border-color: $brand-warning;
             .u-message-notice-description-icon{
                 background-color: $brand-warning;
             }
    }
    &-notice-successlight {
           background-color: $brand-light-success;
           color: #000;
           border-color: #42C556;
           .u-message-notice-description-icon{
               background-color: $brand-light-success;
               color: $brand-success;
           }
    }
    &-notice-dangerlight {
            background-color: $brand-light-danger;
            color: #000;
            border-color: #FE8196;
            .u-message-notice-description-icon{
                background-color: $brand-light-danger;
                color: $brand-danger;
            }
    }
     &-notice-infolight {
             background-color: $brand-light-info;
             color: #000;
             border-color: #4DD0E1;
             .u-message-notice-description-icon{
                 background-color: $brand-light-info;
                 color: $brand-info;
             }
    }
    &-notice-warninglight {
             background-color: $brand-light-warning;
             color: #000;
             border-color: #FA9B36;
             .u-message-notice-description-icon{
                 background-color: $brand-light-warning;
                 color: $brand-warning;
             }
    }

}
    .message-fade-effect {
       animation-duration: 0.24s;
       animation-fill-mode: both;
       animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
     }

     .u-message-left-enter,
     .u-message-left-appear,.u-message-right-enter,
     .u-message-right-appear,.u-message-top-enter,
     .u-message-top-appear,.u-message-bottom-enter,
     .u-message-bottom-appear {
       opacity: 0;
       @extend .message-fade-effect;
       animation-play-state: paused;
     }

     .u-message-left-leave,
     .u-message-right-leave,
     .u-message-top-leave,
     .u-message-bottom-leave {
       @extend .message-fade-effect;
       animation-duration: 0.2s;
       animation-play-state: paused;
     }


     .u-message-left-enter.u-message-left-enter-active,
     .u-message-left-appear.u-message-left-appear-active {
       animation-name: uMessageLeftIn;
       animation-play-state: running;
     }

     .u-message-left-leave.u-message-left-leave-active {
       animation-name: uMessageFadeOut;
       animation-play-state: running;
     }
     .u-message-right-enter.u-message-right-enter-active,
     .u-message-right-appear.u-message-right-appear-active {
       animation-name: uMessageRightIn;
       animation-play-state: running;
     }

     .u-message-right-leave.u-message-right-leave-active {
       animation-name: uMessageFadeOut;
       animation-play-state: running;
     }
     .u-message-top-enter.u-message-top-enter-active,
     .u-message-top-appear.u-message-top-appear-active {
       animation-name: uMessageMoveUp;
       animation-play-state: running;
     }

     .u-message-top-leave.u-message-top-leave-active {
       animation-name: uMessageFadeOut;
       animation-play-state: running;
     }
     .u-message-bottom-enter.u-message-bottom-enter-active,
     .u-message-bottom-appear.u-message-bottom-appear-active {
       animation-name: uMessageMoveDown;
       animation-play-state: running;
     }

     .u-message-bottom-leave.u-message-bottom-leave-active {
       animation-name: uMessageFadeOut;
       animation-play-state: running;
     }
    @keyframes uMessageLeftIn {
      0% {
        opacity: 0;
        right: 30px;
      }
      100% {
        right: 0;
        opacity: 1;
      }
    }
    @keyframes uMessageRightIn {
      0% {
        opacity: 0;
        left:30px;
      }
      100% {
        left: 0;
        opacity: 1;
      }
    }
    @keyframes uMessageMoveUp {
      0% {
        opacity: 0;
        top: -30px;
      }
      100% {
        top: 0;
        opacity: 1;
      }
    }
    @keyframes uMessageMoveDown {
      0% {
        opacity: 0;
        bottom: -78px;
      }
      100% {
        bottom: 0;
        opacity: 1;
      }
    }


    @keyframes uMessageFadeOut {
      0% {
        opacity: 1;
        padding-top: $message-padding;
        padding-bottom: $message-padding;
        max-height: 150px;
      }
      100% {
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        max-height: 0;
      }
    }