yzsd/es/notification/style/index.less

a niubi UI component

@yzsnotification: yzs-notification;

.@{yzsnotification} {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0,0,0,.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
  position: fixed;
  z-index: 1050;
  &-notice {
    position: relative;
    width: 384px;
    max-width: calc(100vw - 48px);
    margin-bottom: 16px;
    margin-inline-start: auto;
    padding: 20px 24px;
    overflow: hidden;
    line-height: 1.5714285714285714;
    word-wrap: break-word;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05);
    &-close {
      position: absolute;
      top: 20px;
      inset-inline-end: 24px;
      color: rgba(0,0,0,.45);
      outline: none;
      width: 22px;
      height: 22px;
      border-radius: 4px;
      transition: background-color .2s,color .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  &-appear, &-enter {
    animation-duration: .2s;
    animation-timing-function: cubic-bezier(.645,.045,.355,1);
    animation-fill-mode: both;
    opacity: 0;
  }
  &-exit {
    animation-timing-function: cubic-bezier(.645,.045,.355,1);
    animation-fill-mode: both;
    animation-duration: .2s;
  }
  &-topRight {
    right: 0px;
    top: 24px;
    bottom: auto;
    margin-inline-end: 24px;
    .@{yzsnotification}-appear-active, .@{yzsnotification}-enter {
      animation-name: ysznotificationRightIn;
      animation-play-state: running;
    }
    .@{yzsnotification}-exit-active {
      animation-name: yzsnotificationOut;
      animation-play-state: running;
    }
  }
  &-topLeft {
    left: 0;
    top: 24px;
    bottom: auto;
    margin-inline-start: 24px;
    .@{yzsnotification}-appear-active, .@{yzsnotification}-enter {
      animation-name: ysznotificationLeftIn;
      animation-play-state: running;
    }
    .@{yzsnotification}-exit-active {
      animation-name: yzsnotificationOut;
      animation-play-state: running;
    }
  }
}

@keyframes ysznotificationRightIn {
  from {
    left: 384px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes ysznotificationLeftIn {
  from {
    left: -384px;
    opacity: 0;
  }
  to {
    left: 0px;
    opacity: 1;
  }
}

@keyframes yzsnotificationOut {
  form {
    max-height: 150px;
    margin-bottom: 16px;
    opacity: 1;
  }
  to {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
}