flicker-alerts 1.0.8 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +2 -1
- package/package.json +1 -1
- package/style.css +11 -5
package/index.js
CHANGED
|
@@ -8,7 +8,8 @@ const FlickerAlerts = {
|
|
|
8
8
|
// Cria o container se ele não existir
|
|
9
9
|
container = document.createElement('div');
|
|
10
10
|
container.id = 'alerts-container';
|
|
11
|
-
|
|
11
|
+
container.className = 'top-right'; // Aplica a classe para posicionar no topo direito
|
|
12
|
+
document.body.appendChild(container); // Adiciona o container ao body
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
// Criação do alerta
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* Estilo geral para o alerta */
|
|
1
2
|
.alert-custom {
|
|
2
3
|
display: flex;
|
|
3
4
|
align-items: center;
|
|
@@ -6,6 +7,7 @@
|
|
|
6
7
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
7
8
|
margin-bottom: 1rem;
|
|
8
9
|
width: 100%;
|
|
10
|
+
min-width: 250px; /* Tamanho mínimo para o alerta */
|
|
9
11
|
max-width: 320px;
|
|
10
12
|
position: relative;
|
|
11
13
|
background-color: white;
|
|
@@ -15,18 +17,17 @@
|
|
|
15
17
|
font-size: 0.9rem;
|
|
16
18
|
}
|
|
17
19
|
|
|
20
|
+
/* Estilo do ícone dentro do alerta */
|
|
18
21
|
.alert-custom .icon {
|
|
19
22
|
text-align: center;
|
|
20
23
|
display: flex;
|
|
21
24
|
align-items: center;
|
|
22
25
|
justify-content: center;
|
|
23
|
-
width:
|
|
24
|
-
height:
|
|
26
|
+
width: 2.5rem; /* Ajusta o tamanho do ícone */
|
|
27
|
+
height: 2.5rem;
|
|
25
28
|
border-radius: 50%;
|
|
26
|
-
font-size: 1.
|
|
29
|
+
font-size: 1.3rem; /* Tamanho do ícone */
|
|
27
30
|
line-height: 0;
|
|
28
|
-
min-width: 2rem;
|
|
29
|
-
min-height: 2rem;
|
|
30
31
|
margin-right: 1rem; /* Espaço entre o ícone e o conteúdo */
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -34,6 +35,7 @@
|
|
|
34
35
|
font-size: inherit; /* Ajusta o ícone ao tamanho da div */
|
|
35
36
|
}
|
|
36
37
|
|
|
38
|
+
/* Estilo do conteúdo do alerta (título e mensagem) */
|
|
37
39
|
.alert-custom .content {
|
|
38
40
|
display: flex;
|
|
39
41
|
flex-direction: column; /* Conteúdo empilhado */
|
|
@@ -67,6 +69,7 @@
|
|
|
67
69
|
color: #777; /* Cor mais escura no hover */
|
|
68
70
|
}
|
|
69
71
|
|
|
72
|
+
/* Estilos para os tipos de alerta */
|
|
70
73
|
.alert-success {
|
|
71
74
|
border-left: 0.25rem solid #28a745;
|
|
72
75
|
}
|
|
@@ -103,6 +106,7 @@
|
|
|
103
106
|
color: white;
|
|
104
107
|
}
|
|
105
108
|
|
|
109
|
+
/* Classe para o container de alertas no topo direito */
|
|
106
110
|
.top-right {
|
|
107
111
|
position: fixed;
|
|
108
112
|
top: 1rem;
|
|
@@ -113,6 +117,7 @@
|
|
|
113
117
|
z-index: 1050;
|
|
114
118
|
}
|
|
115
119
|
|
|
120
|
+
/* Barra de progresso */
|
|
116
121
|
.progress-bar {
|
|
117
122
|
position: absolute;
|
|
118
123
|
bottom: 0;
|
|
@@ -138,6 +143,7 @@
|
|
|
138
143
|
background-color: #dc3545;
|
|
139
144
|
}
|
|
140
145
|
|
|
146
|
+
/* Animação de progresso */
|
|
141
147
|
@keyframes load {
|
|
142
148
|
from {
|
|
143
149
|
width: 0;
|