ticket-message/build/Message.css

Message ui component for react

@charset "UTF-8";
/* FormGroup */
/*  Navlayout  */
.u-message {
  font-size: 12px;
  position: fixed;
  z-index: 1550;
  width: 100%; }
  .u-message-notice {
    position: absolute;
    padding: 0;
    box-shadow: 0 0.3rem 0.4rem 0 rgba(0, 0, 0, 0.14), 0 0.3rem 0.3rem -0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.12);
    background: rgb(66,66,66);
    line-height: 1.5;
    overflow: hidden;
    color: #fff; }
    .u-message-notice-description {
      font-size: 12px;
      word-wrap: break-word;
      vertical-align: middle; }
      .u-message-notice-description-content {
        padding: 15px;
        margin-left: 45px; }
      .u-message-notice-description-icon {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 45px;
        text-align: center;
        background-color: #000; }
        .u-message-notice-description-icon .uf {
          font-size: 30px; }
    .u-message-notice-closable {
      padding-right: 20px; }
    .u-message-notice-close {
      position: absolute;
      right: 24px;
      top: 8px;
      cursor: pointer;
      outline: none;
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
      text-shadow: 0 1px 0 #fff;
      filter: alpha(opacity=80);
      opacity: .8;
      text-decoration: none; }
      .u-message-notice-close-x:after {
        content: '×'; }
      .u-message-notice-close:hover {
        opacity: 1;
        filter: alpha(opacity=100);
        text-decoration: none; }
  .u-message-notice-light {
    background-color: #fff;
    color: rgb(66,66,66); }
    .u-message-notice-light .u-message-notice-description-icon {
      background-color: rgb(224,224,224); }
  .u-message-notice-success {
    background-color: rgb(76,175,80);
    color: #fff; }
    .u-message-notice-success .u-message-notice-description-icon {
      background-color: rgb(56,142,60); }
  .u-message-notice-danger {
    background-color: rgb(244,67,54);
    color: #fff; }
    .u-message-notice-danger .u-message-notice-description-icon {
      background-color: rgb(211,47,47); }
  .u-message-notice-info {
    background-color: rgb(0,188,212);
    color: #fff; }
    .u-message-notice-info .u-message-notice-description-icon {
      background-color: rgb(0,151,167); }
  .u-message-notice-warning {
    background-color: rgb(255,152,0);
    color: #fff; }
    .u-message-notice-warning .u-message-notice-description-icon {
      background-color: rgb(245,124,0); }
  .u-message-notice-successlight {
    background-color: rgb(200,230,201);
    color: #000; }
    .u-message-notice-successlight .u-message-notice-description-icon {
      background-color: rgb(76,175,80);
      color: #fff; }
  .u-message-notice-dangerlight {
    background-color: rgb(255,205,210);
    color: #000; }
    .u-message-notice-dangerlight .u-message-notice-description-icon {
      background-color: rgb(244,67,54);
      color: #fff; }
  .u-message-notice-infolight {
    background-color: rgb(178,235,242);
    color: #000; }
    .u-message-notice-infolight .u-message-notice-description-icon {
      background-color: rgb(0,188,212);
      color: #fff; }
  .u-message-notice-warninglight {
    background-color: rgb(255,224,178);
    color: #000; }
    .u-message-notice-warninglight .u-message-notice-description-icon {
      background-color: rgb(255,152,0);
      color: #fff; }

.message-fade-effect, .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, .u-message-left-leave,
.u-message-right-leave,
.u-message-top-leave,
.u-message-bottom-leave {
  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;
  animation-play-state: paused; }

.u-message-left-leave,
.u-message-right-leave,
.u-message-top-leave,
.u-message-bottom-leave {
  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: -48px;
    opacity: 1; } }

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