chowa/es/notification/style/notification.css

UI component library based on React

/**
 * @license chowa v1.1.3
 *
 * Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
.cw-notification-wrapper {
  position: fixed;
  margin: 0;
  padding: 0;
  max-height: 100vh; }

.cw-notification-wrapper-top-left {
  top: 0;
  left: 0; }

.cw-notification-wrapper-top-right {
  top: 0;
  right: 0; }

.cw-notification-wrapper-bottom-left {
  bottom: 0;
  left: 0; }

.cw-notification-wrapper-bottom-right {
  bottom: 0;
  right: 0; }

.cw-notification {
  margin: 16px;
  padding: 12px 18px;
  box-sizing: border-box;
  width: 360px;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  flex: none;
  transition: all 0.2s ease-in-out; }

.cw-notification-icon {
  font-size: 18px;
  flex: none;
  margin: 0 8px 0 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1; }

.cw-notification-icon-bigger {
  font-size: 26px;
  margin-right: 14px;
  padding-top: 6px; }

.cw-notification-info {
  color: #1890ff; }

.cw-notification-success {
  color: #52c41a; }

.cw-notification-error {
  color: #f5222d; }

.cw-notification-warning {
  color: #faad14; }

.cw-notification-inner {
  flex: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 18px; }

.cw-notification-title {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #414a63; }

.cw-notification-content {
  margin: 0;
  box-sizing: border-box;
  padding: 8px 0 0 0;
  color: #616a6e; }

.cw-notification-close {
  position: absolute;
  color: #888da8;
  cursor: pointer;
  transition: color 0.2s ease-in;
  font-size: 12px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  background: transparent;
  border: none;
  right: 8px;
  top: 12px;
  line-height: 1.5; }
  .cw-notification-close:hover {
    color: #414a63; }

@keyframes cw-notification-right-trans {
  0% {
    transform: translateX(100%);
    height: 0; }
  100% {
    transform: translateX(0); } }

@keyframes cw-notification-left-trans {
  0% {
    transform: translateX(-100%);
    height: 0; }
  100% {
    transform: translateX(0); } }

.cw-notification-appear {
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out; }

.cw-notification-left-enter {
  animation-name: cw-notification-left-trans; }

.cw-notification-left-leave {
  animation-name: cw-notification-left-trans;
  animation-direction: reverse; }

.cw-notification-right-enter {
  animation-name: cw-notification-right-trans; }

.cw-notification-right-leave {
  animation-name: cw-notification-right-trans;
  animation-direction: reverse; }

@media only screen and (max-width: 640px) {
  .cw-notification-wrapper {
    display: flex;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center; }
  .cw-notification {
    width: 300px;
    margin-left: 0;
    margin-right: 0; } }