birdpaper-ui/es/alert/src/style/alert.less

一个通用的 vue3 UI组件库。A common vue3 UI component library.

@import "./token.less";

@alert-cls: ~"@{prefix}-alert";

.@{alert-cls} {
  position: relative;
  display: flex;
  align-items: center;
  outline: none;
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  opacity: 1;
  border-radius: 4px;
  padding: 4px 12px;

  &-with-title {
    align-items: flex-start;

    .@{alert-cls}-icon,
    .@{alert-cls}-option {
      line-height: 38px;
    }
  }

  &-icon {
    display: flex;
    margin-right: 8px;
  }

  &-body {
    position: relative;
    flex: 1;

    .@{alert-cls}-title {
      color: @gary-11;
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
      margin-bottom: 8px;
    }

    .@{alert-cls}-content {
      font-size: 14px;
      color: @gary-9;
      text-align: left;
      font-weight: normal;
      word-break: break-all;
      overflow: hidden;
    }
  }

  &-option {
    .@{alert-cls}-close-inner {
      display: flex;

      .close-inner {
        fill: @gary-6;
        color: @gary-6;
        font-size: 14px;
        cursor: pointer;
      }

      span {
        .close-inner;
        transition: all 0.2s ease;

        &:hover {
          fill: @gary-7;
          color: @gary-7;
          transition: all 0.2s ease;
        }
      }

      .bp-icon {
        .close-inner;
        padding: 1px;
        border-radius: 10px;
        transition: all 0.2s ease;

        &:hover {
          fill: @gary-7;
          background-color: @gary-1;
          transition: all 0.2s ease;
        }
      }
    }
  }
}

.alert-type(@type) {
  .@{alert-cls}-@{type} {
    background-color: ~"@{alert-@{type}-background}";
    border: 1px solid ~"@{alert-@{type}-border}";

    .@{alert-cls}-icon {
      .bp-icon {
        fill: ~"@{alert-@{type}-icon-color}";
      }
    }
  }
}

.alert-type(info);
.alert-type(warning);
.alert-type(success);
.alert-type(error);