naive-ui/styles/Alert.scss

@import './mixins/mixins.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);
        stroke: 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 {
      line-height: 1.75;
      @include fade-in-height-expand-transition($original-transition: (transform .3s $--n-ease-in-out-cubic-bezier));
      &.#{block(fade-in-height-expand-transition)}-leave, &.#{block(fade-in-height-expand-transition)}-enter-to {
        transform: scale(1);
      }
      &.#{block(fade-in-height-expand-transition)}-leave-to, &.#{block(fade-in-height-expand-transition)}-enter {
        transform: scale(.9);
      }
      border-radius: $--n-alert-border-radius;
      position: relative;
      transition: background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-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 $--n-ease-in-out-cubic-bezier;
          font-size: 16px;
          line-height: 19px;
          font-weight: $--n-strong-weight;
          & + {
            @include e(content) {
              margin-top: 9px;
            }
          }
        }
        @include e(content) {
          transition: color .3s $--n-ease-in-out-cubic-bezier;
          font-size: 14px;
        }
      }
      @include m(no-icon) {
        @include b(alert-body) {
          padding-left: 19px;
        }
      }
    }
    @include e(close) {
      @include b(icon) {
        fill: map-get($--alert-close-color, 'default');
        stroke: map-get($--alert-close-color, 'default');
      }
      &:hover {
        @include b(icon) {
          fill: map-get($--alert-close-color, 'hover');
          stroke: map-get($--alert-close-color, 'hover');
        }
      }
      &:active {
        @include b(icon) {
          fill: map-get($--alert-close-color, 'active');
          stroke: map-get($--alert-close-color, 'active');
        }
      }
    }
    @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');
  }
}