flicker-alerts 1.0.8 → 1.0.10

package/index.js

@@ -8,7 +8,8 @@ const FlickerAlerts = {
           // Cria o container se ele não existir
           container = document.createElement('div');
           container.id = 'alerts-container';
-          document.body.appendChild(container); // Adiciona o container ao body ou a outro elemento desejado
+          container.className = 'top-right';  // Aplica a classe para posicionar no topo direito
+          document.body.appendChild(container); // Adiciona o container ao body
         }
   
         // Criação do alerta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flicker-alerts",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Biblioteca para alertas animados",
   "main": "index.js",
   "types": "index.d.ts",

package/style.css

@@ -1,3 +1,4 @@
+/* Estilo geral para o alerta */
 .alert-custom {
     display: flex;
     align-items: center;
@@ -6,6 +7,7 @@
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
     margin-bottom: 1rem;
     width: 100%;
+    min-width: 250px; /* Tamanho mínimo para o alerta */
     max-width: 320px;
     position: relative;
     background-color: white;
@@ -15,18 +17,17 @@
     font-size: 0.9rem;
 }
 
+/* Estilo do ícone dentro do alerta */
 .alert-custom .icon {
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;  /* Ajuste o tamanho do ícone */
-    height: 2rem;
+    width: 2.5rem;  /* Ajusta o tamanho do ícone */
+    height: 2.5rem;
     border-radius: 50%;
-    font-size: 1.2rem; /* Ajusta o tamanho do ícone */
+    font-size: 1.3rem; /* Tamanho do ícone */
     line-height: 0;
-    min-width: 2rem;
-    min-height: 2rem;
     margin-right: 1rem;  /* Espaço entre o ícone e o conteúdo */
 }
 
@@ -34,6 +35,7 @@
     font-size: inherit; /* Ajusta o ícone ao tamanho da div */
 }
 
+/* Estilo do conteúdo do alerta (título e mensagem) */
 .alert-custom .content {
     display: flex;
     flex-direction: column; /* Conteúdo empilhado */
@@ -67,6 +69,7 @@
     color: #777; /* Cor mais escura no hover */
 }
 
+/* Estilos para os tipos de alerta */
 .alert-success {
     border-left: 0.25rem solid #28a745;
 }
@@ -103,6 +106,7 @@
     color: white;
 }
 
+/* Classe para o container de alertas no topo direito */
 .top-right {
     position: fixed;
     top: 1rem;
@@ -113,6 +117,7 @@
     z-index: 1050;
 }
 
+/* Barra de progresso */
 .progress-bar {
     position: absolute;
     bottom: 0;
@@ -138,6 +143,7 @@
     background-color: #dc3545;
 }
 
+/* Animação de progresso */
 @keyframes load {
     from {
         width: 0;