beyond-components/lib/Notification/index.css

react prototype components

.beyond_p-notification {
  position: fixed;
  top: 20px;
  left: 50%;
}
.beyond_p-notification .beyond_p-notification-content {
  border-radius: 3px;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.95);
  position: relative;
  right: 50%;
  vertical-align: middle;
  padding: 7px 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border: 1px solid #d9d9d9;
  line-height: 1.5;
  margin-bottom: 10px;
}
.beyond_p-notification .beyond_p-notification-content.beyond_p-notification-content-reverse {
  color: white;
  background: #000000;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  border-color: black;
}
.beyond_p-notification-left {
  left: 20px;
  right: auto;
}
.beyond_p-notification-left .beyond_p-notification-content {
  right: 0;
}
.beyond_p-notification-right {
  left: auto;
  right: 20px;
}
.beyond_p-notification-right .beyond_p-notification-content {
  right: 0;
}
.beyond_p-notification-middle {
  top: 33.3%;
  bottom: auto;
}
.beyond_p-notification-bottom {
  top: auto;
  bottom: 20px;
}
.beyond_p-notification-animation-entering {
  opacity: 0.01;
  -webkit-transform: translate(0, -20px);
          transform: translate(0, -20px);
}
.beyond_p-notification-animation-entering.beyond_p-notification-animation-entered {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  transition: opacity 300ms ease-in, -webkit-transform 300ms ease-in;
  transition: opacity 300ms ease-in, transform 300ms ease-in;
  transition: opacity 300ms ease-in, transform 300ms ease-in, -webkit-transform 300ms ease-in;
}
.beyond_p-notification-animation-leaving {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
}
.beyond_p-notification-animation-leaving.beyond_p-notification-animation-leaved {
  opacity: 0.01;
  -webkit-transform: translate(0, -20px);
          transform: translate(0, -20px);
  transition: opacity 300ms ease-in, -webkit-transform 300ms ease-in;
  transition: opacity 300ms ease-in, transform 300ms ease-in;
  transition: opacity 300ms ease-in, transform 300ms ease-in, -webkit-transform 300ms ease-in;
}