naive-ui/styles/Alert.scss

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

@mixin alert-type-mixin ($type) {
  @include m($type + '-type') {
    background-color: map-get($--alert-background-color, $type);
    box-shadow: inset 0 0 0 1.2px map-get($--alert-border-color, $type);
    text-align: left;
    @include e(icon) {
      @include b(icon) {
        fill: map-get($--alert-icon-color, $type);
      }
    }
    @include b(alert-body) {
      @include e(title) {
        color: map-get($--alert-title-text-color, $type);
      }
      @include e(content) {
        color: map-get($--alert-content-text-color, $type);
      }
    }
  }
}

@include themes-mixin {
  @include b(alert) {
    @include once {
      $duration: .3s;
      &.n-fade-in-height-expand-leave, &.n-fade-in-height-expand-enter-to {
        opacity: 1;
        transform: scale(1);
      }
      &.n-fade-in-height-expand-leave-to, &.n-fade-in-height-expand-enter {
        opacity: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: scale(.9);
      }
      &.n-fade-in-height-expand-leave-active {
        overflow: hidden;
        transform: top center;
        transition:
          transform $duration $default-cubic-bezier,
          max-height $duration $default-cubic-bezier,
          opacity $duration $fast-in-cubic-bezier,
          margin-top $duration $default-cubic-bezier,
          margin-bottom $duration $default-cubic-bezier;
      }
      &.n-fade-in-height-expand-enter-active {
        overflow: hidden;
        transition: max-height $duration $default-cubic-bezier,
          opacity $duration $slow-out-cubic-bezier,
          margin-top $duration $default-cubic-bezier,
          margin-bottom $duration $default-cubic-bezier;
      }
      border-radius: 6px;
      position: relative;
      transition: background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
      @include e(icon) {
        position: absolute;
        left: 12px;
        top: 14px;
        align-items: center;
        justify-content: center;
        width: 19px;
        height: 19px;
        @include b(icon) {
          font-size: 26px;
        }
      }
      @include e(close) {
        position: absolute;
        right: 16px;
        top: 14px;
        width: 19px;
        height: 19px;
        @include b(icon) {
          cursor: pointer;
          font-size: 19px;
        }
      }
      @include b(alert-body) {
        padding: 16px 16px 16px 48px;
        @include e(title) {
          transition: color .3s $default-cubic-bezier;
          font-size: 16px;
          line-height: 19px;
          font-weight: 700;
          & + {
            @include e(content) {
              margin-top: 9px;
            }
          }
        }
        @include e(content) {
          transition: color .3s $default-cubic-bezier;
          font-size: 14px;
        }
      }
      @include m(no-icon) {
        @include b(alert-body) {
          padding-left: 19px;
        }
      }
    }
    @include e(close) {
      @include b(icon) {
        fill: $--alert-color-fill;
      }
    }
    @include alert-type-mixin('default');
    @include alert-type-mixin('success');
    @include alert-type-mixin('info');
    @include alert-type-mixin('error');
    @include alert-type-mixin('warning');
  }
}