oui-kit/lib/basic/oui-alert.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-alert {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: rex(4);
  border-radius: var(--input-radius, 4px);
  font-size: 0.9rem;
  line-height: 1.5;

  &:before {
    content: "";
    position: absolute;
    left: rex(10);
    top: rex(8);
    width: rex(4);
    height: unquote("calc(100% - 1rem);");
    border-radius: rex(2);
  }

  &._info {
    color: -blue-800;
    background: -blue-50;

    &:before {
      background: -blue-400;
    }
  }

  &._success {
    color: -green-800;
    background: -green-50;

    &:before {
      background: -green-400;
    }
  }

  &._warn {
    color: -yellow-900;
    background: -yellow-50;

    &:before {
      background: -yellow-400;
    }
  }

  &._error {
    color: -red-800;
    background: -red-50;

    &:before {
      background: -red-400;
    }
  }

  &-content {
    padding: rex(8) rex(40) rex(8) rex(24);
  }

  &-title {
    font-weight: 600;
  }

  &-body {
    flex: 1;
  }

  &-close {
    position: absolute;
    top: rex(8);
    right: rex(8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: rex(2);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--input-radius, 4px);
    color: inherit;
    opacity: 0.6;

    &:hover {
      opacity: 1;
    }

    svg {
      width: rex(16);
      height: rex(16);
    }
  }
}

/* Dark mode */
.dark .oui-alert {
  &._info {
    color: -blue-200;
    background: -blue-900;

    &:before {
      background: -blue-600;
    }
  }

  &._success {
    color: -green-200;
    background: -green-900;

    &:before {
      background: -green-600;
    }
  }

  &._warn {
    color: -yellow-200;
    background: -yellow-900;

    &:before {
      background: -yellow-600;
    }
  }

  &._error {
    color: -red-200;
    background: -red-900;

    &:before {
      background: -red-600;
    }
  }
}

/* Dismiss transition */
.oui-alert-enter-active, .oui-alert-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.oui-alert-enter-from, .oui-alert-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}