kui-vue/components/alert/styles/index.less

A lightweight desktop UI component library suitable for Vue.js 2.

@import "../../styles/var.less";

.k-alert {
  border-radius: var(--kui-border-radius);
  margin-bottom: 16px;
  padding: 8px 12px;
  box-sizing: border-box;
  position: relative;
  line-height: 1.5;
  font-size: 14px;
  transition: all 0.3s;
  overflow: hidden;
  background: var(--kui-color-warning-90);
  border: 1px solid var(--kui-color-warning-80);
  display: flex;
  align-items: center;

  &-icon {
    color: var(--kui-color-warning);
    font-size: 16px;
    margin-right: 8px;
  }

  &-content {
    flex: 1;
    min-width: 0;
  }

  &-message {
    color: var(--kui-color-font);
    line-height: 1;
  }

  &-has-description {
    padding: 15px;
    align-items: flex-start;

    .k-alert-icon {
      font-size: 24px;
      top: 15px;
    }

    .k-alert-close {
      font-size: 18px;
    }

    .k-alert-message {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 5px;
      color: var(--kui-color-font);
    }

    .k-alert-description {
      font-size: 14px;
      color: var(--kui-color-font);
    }
  }

  &-close {
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    color: var(--kui-color-font);

    &:hover {
      text-decoration: none;
      color: var(--kui-color-danger);
    }
  }

  &-success {
    background: var(--kui-color-success-90);
    border-color: var(--kui-color-success-80);

    .k-alert-icon {
      color: var(--kui-color-success);
    }
  }

  &-error {
    background: var(--kui-color-danger-90);
    border-color: var(--kui-color-danger-80);

    .k-alert-icon {
      color: var(--kui-color-danger);
    }
  }

  &-info {
    background: var(--kui-color-main-90);
    border-color: var(--kui-color-main-80);

    .k-alert-icon {
      color: var(--kui-color-main);
    }
  }

  &-slide-leave-to {
    animation: k-alert-slide 0.3s ease-in-out;
    animation-fill-mode: both;
  }

  @keyframes k-alert-slide {
    0% {
      transform: scaleY(1);
      transform-origin: 0% 0%;
      opacity: 1;
    }

    100% {
      transform: scaleY(0);
      transform-origin: 0% 0%;
      opacity: 0;
    }
  }
}