naive-ui/styles/Notification.scss

@import './mixins/mixins.scss';

@import './themes/vars.scss';

@include themes-mixin {
  @include b(notification) {
    &.n-notification__container {
      .n-notification__cell {
        background: linear-gradient(
          225deg,
          $--notification-background-start-color 0%,
          $--notification-background-end-color 100%
        );
        color: $--notification-text-color;
        @include once {
          position: relative;
          display: flex;
          overflow: hidden;
          flex-shrink: 0;
          box-sizing: border-box;
          margin-bottom: 9px;
          padding: 15px;
          max-height: 400px;
          width: 365px;
          border-radius: 6px;
          box-shadow:  0px 2px 8px 0px rgba(0,0,0,0.12);
          font-weight: 700;
          opacity: 1;
          transition: opacity 0.3s $default-cubic-bezier,
            transform 0.3s $default-cubic-bezier,
            max-height 0.3s $default-cubic-bezier, margin-bottom 0.3s linear,
            padding-top 0.3s $default-cubic-bezier,
            padding-bottom 0.3s $default-cubic-bezier;
          transform: translateX(0);
        }
        @include once {
          &.is-going-to-emerge {
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
            max-height: 0;
            opacity: 0;
            transform: translateX(calc(100% + 15px));

            .n-notification-cell__avator {
              top: 0;
            }

            .n-notification-cell__close-mark {
              top: 0;
            }
          }

          &.is-vanishing {
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
            max-height: 0;
            opacity: 0;
            transform: translateX(calc(100% + 15px));
          }
        }

        .n-notification-cell__wrapper {
          position: relative;
          width: 100%;

          .n-notification-cell__deactivator {
            @include once {
              position: absolute;
              top: 0;
              right: 0;
              width: 15px;
              height: 15px;
              cursor: pointer;
              transition: top 0.3s $default-cubic-bezier;
            }

            &::before {
              position: absolute;
              top: -2px;
              box-sizing: content-box;
              width: 6px;
              height: 6px;
              border-right: 2px solid $--notification-cell_deactive-color;
              border-bottom: 2px solid $--notification-cell_deactive-color;
              content: '';
              transform: rotate(45deg);
            }

            &::after {
              position: absolute;
              top: 7px;
              box-sizing: content-box;
              width: 6px;
              height: 6px;
              border-top: 2px solid $--notification-cell_deactive-color;
              border-left: 2px solid $--notification-cell_deactive-color;
              content: '';
              transform: rotate(45deg);
            }
          }

          .n-notification-cell__avator {
            position: absolute;
            top: 0;
            left: 0;
            width: 28px;
            height: 28px;
            border-radius: 14px;
            background-color: $--notification-cell__avator-background-color;
            color: $--notification-cell__avator-color;
            text-align: center;
            font-size: 18px;
            line-height: 28px;
            transition: top 0.3s $default-cubic-bezier;
          }

          .n-notification-cell__body {
            @include once {
              display: flex;
              flex-direction: column;
              margin-left: 41px;
              width: calc(100% - 41px);
              font-size: 14px;
            }
            @include once {
              .n-notification-cell__title-meta {
                margin-bottom: 8px;
              }
            }
            @include once {
              .n-notification-cell__footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 8px;
              }
            }

            .n-notification-cell__header {
              margin-bottom: 8px;
              color: $--notification-cell__header-color;
              font-weight: 700;
              font-size: 16px;
            }

            .n-notification-cell__title-meta,
            .n-notification-cell__meta {
              color: $--notification-cell__title-meta-color;
              font-size: 12px;
            }

            .n-notification-cell__content {
              color: $--notification-cell__content-color;
              white-space: wrap;
            }

            .n-notification-cell__action {
              color: $--notification-cell__action-color;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}