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) {
        path {
          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 {
      border-radius: 6px;
      position: relative;
      transition: background-color .3s $default-cubic-bezier;
      @include e(icon) {
        position: absolute;
        left: 10px;
        top: 11px;
        align-items: center;
        justify-content: center;
        width: 19px;
        height: 19px;
        @include b(icon) {
          transition: color .3s $default-cubic-bezier;
          font-size: 22px;
        }
      }
      @include b(alert-body) {
        padding: 12px 16px 16px 38px;
        @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 alert-type-mixin('default');
    @include alert-type-mixin('success');
    @include alert-type-mixin('info');
    @include alert-type-mixin('error');
    @include alert-type-mixin('warning');
  }
}