flicker-alerts 1.0.27 → 1.0.28
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.d.ts +17 -4
- package/index.js +180 -36
- package/package.json +2 -2
- package/readme.md +74 -85
- package/style.css +288 -125
package/index.d.ts
CHANGED
@@ -1,15 +1,28 @@
|
|
1
1
|
declare module 'flicker-alerts' {
|
2
|
-
//
|
2
|
+
// Definição das opções para os alertas
|
3
3
|
interface AlertOptions {
|
4
4
|
type: 'success' | 'info' | 'warning' | 'danger';
|
5
5
|
title: string;
|
6
6
|
message: string;
|
7
|
-
duration?: number; // Duração do alerta
|
8
|
-
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center';
|
7
|
+
duration?: number; // Duração opcional do alerta
|
8
|
+
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center'; // Posições possíveis do alerta
|
9
9
|
}
|
10
10
|
|
11
|
+
// Definição das opções para os modais
|
12
|
+
interface ModalOptions {
|
13
|
+
type: 'warning' | 'danger' | 'info' | 'success'; // Tipos de modais disponíveis
|
14
|
+
title: string;
|
15
|
+
message: string;
|
16
|
+
onConfirm?: () => void; // Função executada no botão de confirmação
|
17
|
+
onCancel?: () => void; // Função executada no botão de cancelamento
|
18
|
+
}
|
19
|
+
|
20
|
+
// Classe principal para a biblioteca FlickerAlerts
|
11
21
|
export default class FlickerAlerts {
|
12
|
-
// Método para
|
22
|
+
// Método estático para mostrar um alerta
|
13
23
|
static showAlert(options: AlertOptions): void;
|
24
|
+
|
25
|
+
// Método estático para mostrar um modal
|
26
|
+
static showModal(options: ModalOptions): void;
|
14
27
|
}
|
15
28
|
}
|
package/index.js
CHANGED
@@ -1,86 +1,230 @@
|
|
1
|
-
|
2
|
-
import './style.css';
|
3
|
-
|
4
|
-
|
5
1
|
const FlickerAlerts = {
|
6
2
|
showAlert: function ({ type, title, message, timer = 3000, position = 'top-right' }) {
|
7
|
-
// Verifique se está no ambiente do navegador (client-side) antes de tentar manipular o DOM
|
8
3
|
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
9
|
-
// Garantir que o container de alertas exista, se não, criá-lo
|
10
4
|
let container = document.getElementById('alerts-container');
|
11
5
|
if (!container) {
|
12
|
-
// Cria o container se ele não existir
|
13
6
|
container = document.createElement('div');
|
14
7
|
container.id = 'alerts-container';
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
container.
|
8
|
+
container.style.position = 'fixed';
|
9
|
+
container.style.top = 0;
|
10
|
+
container.style.left = 0;
|
11
|
+
container.style.width = '100vw';
|
12
|
+
container.style.height = '100vh';
|
13
|
+
container.style.pointerEvents = 'none';
|
14
|
+
document.body.appendChild(container);
|
19
15
|
}
|
20
16
|
|
21
|
-
// Aplica a nova classe de posição
|
22
|
-
container.classList.add(position);
|
23
|
-
|
24
|
-
// Criação do alerta
|
25
17
|
const alertBox = document.createElement('div');
|
26
|
-
alertBox.className = `
|
18
|
+
alertBox.className = `notification ${type}`;
|
19
|
+
alertBox.classList.add(position);
|
27
20
|
|
28
21
|
// Ícone
|
29
22
|
const icon = document.createElement('div');
|
30
23
|
icon.className = 'icon';
|
31
24
|
const iconClass = {
|
32
25
|
success: 'fa-check',
|
33
|
-
info: 'fa-info',
|
34
|
-
warning: 'fa-exclamation',
|
35
|
-
danger: 'fa-times'
|
26
|
+
info: 'fa-info-circle',
|
27
|
+
warning: 'fa-exclamation-triangle',
|
28
|
+
danger: 'fa-times-circle',
|
36
29
|
}[type];
|
37
|
-
icon.innerHTML = `<i class="fas ${iconClass}"></i>`;
|
30
|
+
icon.innerHTML = `<i class="fas ${iconClass}" style="font-size: 24px;"></i>`;
|
38
31
|
alertBox.appendChild(icon);
|
39
32
|
|
33
|
+
// Divisor
|
34
|
+
const divider = document.createElement('div');
|
35
|
+
divider.className = 'divider';
|
36
|
+
console.log(`Created divider for ${type}`); // Para depuração
|
37
|
+
alertBox.appendChild(divider);
|
38
|
+
|
40
39
|
// Conteúdo
|
41
40
|
const content = document.createElement('div');
|
42
|
-
content.innerHTML = `<
|
41
|
+
content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
|
43
42
|
alertBox.appendChild(content);
|
44
43
|
|
45
|
-
//
|
44
|
+
// Barra de carregamento
|
45
|
+
const progressBar = document.createElement('div');
|
46
|
+
progressBar.className = 'progress-bar';
|
47
|
+
progressBar.style.animationDuration = `${timer}ms`;
|
48
|
+
alertBox.appendChild(progressBar);
|
49
|
+
|
50
|
+
// Botão de Fechamento
|
46
51
|
const closeButton = document.createElement('div');
|
47
52
|
closeButton.className = 'close';
|
48
53
|
closeButton.innerHTML = '<i class="fas fa-times"></i>';
|
49
|
-
closeButton.onclick = () => alertBox.remove();
|
50
|
-
alertBox.appendChild(closeButton);
|
51
54
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
55
|
+
const removeAlert = () => {
|
56
|
+
alertBox.style.opacity = '0';
|
57
|
+
setTimeout(() => alertBox.remove(), 300);
|
58
|
+
};
|
59
|
+
|
60
|
+
closeButton.addEventListener('click', () => {
|
61
|
+
removeAlert();
|
62
|
+
clearTimeout(timeoutId);
|
63
|
+
});
|
56
64
|
|
57
|
-
|
65
|
+
alertBox.appendChild(closeButton);
|
58
66
|
container.appendChild(alertBox);
|
59
67
|
|
60
|
-
|
61
|
-
|
68
|
+
const timeoutId = setTimeout(() => {
|
69
|
+
removeAlert();
|
70
|
+
}, timer);
|
62
71
|
}
|
63
|
-
}
|
72
|
+
},
|
64
73
|
};
|
65
74
|
|
75
|
+
|
76
|
+
|
77
|
+
|
66
78
|
// Botões de teste - Eles podem ser removidos se não forem necessários
|
67
79
|
if (typeof document !== 'undefined') {
|
68
80
|
document.getElementById('success-btn')?.addEventListener('click', () => {
|
69
|
-
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso', message: '
|
81
|
+
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso!', message: 'Essa mensagem é personalizável.' });
|
70
82
|
});
|
71
83
|
|
72
84
|
document.getElementById('info-btn')?.addEventListener('click', () => {
|
73
|
-
FlickerAlerts.showAlert({ type: 'info', title: 'Informação', message: '
|
85
|
+
FlickerAlerts.showAlert({ type: 'info', title: 'Informação!', message: 'Essa mensagem é personalizável.' });
|
74
86
|
});
|
75
87
|
|
76
88
|
document.getElementById('warning-btn')?.addEventListener('click', () => {
|
77
|
-
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta', message: '
|
89
|
+
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta!', message: 'Essa mensagem é personalizável.' });
|
78
90
|
});
|
79
91
|
|
80
92
|
document.getElementById('error-btn')?.addEventListener('click', () => {
|
81
|
-
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro', message: '
|
93
|
+
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro!', message: 'Essa mensagem é personalizável.' });
|
82
94
|
});
|
83
95
|
}
|
84
96
|
|
85
97
|
// Exportação
|
86
98
|
export default FlickerAlerts;
|
99
|
+
|
100
|
+
|
101
|
+
const FlickerModals = {
|
102
|
+
showModal: function ({ type, title, message, onConfirm, onCancel }) {
|
103
|
+
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
104
|
+
let container = document.getElementById('modals-container');
|
105
|
+
if (!container) {
|
106
|
+
container = document.createElement('div');
|
107
|
+
container.id = 'modals-container';
|
108
|
+
container.style.position = 'fixed';
|
109
|
+
container.style.top = 0;
|
110
|
+
container.style.left = 0;
|
111
|
+
container.style.width = '100vw';
|
112
|
+
container.style.height = '100vh';
|
113
|
+
container.style.pointerEvents = 'none';
|
114
|
+
document.body.appendChild(container);
|
115
|
+
}
|
116
|
+
|
117
|
+
const modalContainer = document.createElement('div');
|
118
|
+
modalContainer.className = 'modal-container';
|
119
|
+
|
120
|
+
// Criar a estrutura para o modal
|
121
|
+
const modalDialog = document.createElement('div');
|
122
|
+
modalDialog.className = 'modal-dialog';
|
123
|
+
modalDialog.setAttribute('role', 'document');
|
124
|
+
|
125
|
+
const modalContent = document.createElement('div');
|
126
|
+
modalContent.className = 'modal-content';
|
127
|
+
|
128
|
+
// Header
|
129
|
+
const modalHeader = document.createElement('div');
|
130
|
+
modalHeader.className = 'modal-header';
|
131
|
+
const closeButton = document.createElement('button');
|
132
|
+
closeButton.type = 'button';
|
133
|
+
closeButton.className = 'close';
|
134
|
+
closeButton.setAttribute('aria-label', 'Close');
|
135
|
+
closeButton.innerHTML = `<div><i class="fas fa-times"></i></div>`;
|
136
|
+
closeButton.addEventListener('click', () => {
|
137
|
+
removeModal();
|
138
|
+
if (onCancel) onCancel();
|
139
|
+
});
|
140
|
+
modalHeader.appendChild(closeButton);
|
141
|
+
|
142
|
+
// Body
|
143
|
+
const modalBody = document.createElement('div');
|
144
|
+
modalBody.className = 'modal-body';
|
145
|
+
const icon = document.createElement('div');
|
146
|
+
icon.className = type === 'delete' ? 'icon-delete' : 'icon-check';
|
147
|
+
icon.innerHTML = `<i class="fas ${type === 'delete' ? 'fa-trash-alt' : 'fa-exclamation-triangle'}"></i>`;
|
148
|
+
modalBody.appendChild(icon);
|
149
|
+
|
150
|
+
const divider = document.createElement('div');
|
151
|
+
divider.className = 'divider';
|
152
|
+
modalBody.appendChild(divider);
|
153
|
+
|
154
|
+
const bodyContent = document.createElement('div');
|
155
|
+
bodyContent.innerHTML = `
|
156
|
+
<h5 class="modal-title-${type}">${title}</h5>
|
157
|
+
<p>${message}</p>
|
158
|
+
`;
|
159
|
+
modalBody.appendChild(bodyContent);
|
160
|
+
|
161
|
+
// Footer
|
162
|
+
const modalFooter = document.createElement('div');
|
163
|
+
modalFooter.className = 'modal-footer';
|
164
|
+
|
165
|
+
const cancelButton = document.createElement('button');
|
166
|
+
cancelButton.type = 'button';
|
167
|
+
cancelButton.className = 'btn btn-cancel';
|
168
|
+
cancelButton.innerText = 'Não, cancelar';
|
169
|
+
cancelButton.addEventListener('click', () => {
|
170
|
+
removeModal();
|
171
|
+
if (onCancel) onCancel();
|
172
|
+
});
|
173
|
+
modalFooter.appendChild(cancelButton);
|
174
|
+
|
175
|
+
const confirmButton = document.createElement('button');
|
176
|
+
confirmButton.type = 'button';
|
177
|
+
confirmButton.className = type === 'delete' ? 'btn btn-confirm-delete' : 'btn btn-confirm-warning';
|
178
|
+
confirmButton.innerText = type === 'delete' ? 'Sim, deletar' : 'Sim, confirmar';
|
179
|
+
confirmButton.addEventListener('click', () => {
|
180
|
+
removeModal();
|
181
|
+
if (onConfirm) onConfirm();
|
182
|
+
});
|
183
|
+
modalFooter.appendChild(confirmButton);
|
184
|
+
|
185
|
+
modalContent.appendChild(modalHeader);
|
186
|
+
modalContent.appendChild(modalBody);
|
187
|
+
modalContent.appendChild(modalFooter);
|
188
|
+
modalDialog.appendChild(modalContent);
|
189
|
+
modalContainer.appendChild(modalDialog);
|
190
|
+
container.appendChild(modalContainer);
|
191
|
+
|
192
|
+
// Remove o modal após o tempo especificado
|
193
|
+
const timeoutId = setTimeout(() => {
|
194
|
+
removeModal();
|
195
|
+
}, timer);
|
196
|
+
|
197
|
+
// Função para remover o modal
|
198
|
+
function removeModal() {
|
199
|
+
modalContainer.style.opacity = '0';
|
200
|
+
setTimeout(() => modalContainer.remove(), 300);
|
201
|
+
clearTimeout(timeoutId);
|
202
|
+
}
|
203
|
+
}
|
204
|
+
}
|
205
|
+
};
|
206
|
+
|
207
|
+
// Botões de teste - Eles podem ser removidos se não forem necessários
|
208
|
+
if (typeof document !== 'undefined') {
|
209
|
+
document.getElementById('modal-warning-btn')?.addEventListener('click', () => {
|
210
|
+
FlickerModals.showModal({
|
211
|
+
type: 'warning',
|
212
|
+
title: 'Tem certeza que deseja aceitar?',
|
213
|
+
message: 'Você tem certeza que deseja aceitar isso?',
|
214
|
+
onConfirm: () => { console.log('Confirmado!'); },
|
215
|
+
onCancel: () => { console.log('Cancelado!'); }
|
216
|
+
});
|
217
|
+
});
|
218
|
+
|
219
|
+
document.getElementById('modal-delete-btn')?.addEventListener('click', () => {
|
220
|
+
FlickerModals.showModal({
|
221
|
+
type: 'delete',
|
222
|
+
title: 'Tem certeza que deseja deletar?',
|
223
|
+
message: 'Você tem certeza que deseja deletar isso?',
|
224
|
+
onConfirm: () => { console.log('Deletado com sucesso!'); },
|
225
|
+
onCancel: () => { console.log('Cancelado!'); }
|
226
|
+
});
|
227
|
+
});
|
228
|
+
}
|
229
|
+
|
230
|
+
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "flicker-alerts",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.28",
|
4
4
|
"description": "Biblioteca para alertas animados",
|
5
5
|
"main": "index.js",
|
6
6
|
"types": "index.d.ts",
|
@@ -16,6 +16,6 @@
|
|
16
16
|
"author": "https://www.linkedin.com/in/bruno-carneiro-9a51aa190/",
|
17
17
|
"license": "MIT",
|
18
18
|
"dependencies": {
|
19
|
-
"flicker-alerts": "^1.0.
|
19
|
+
"flicker-alerts": "^1.0.28"
|
20
20
|
}
|
21
21
|
}
|
package/readme.md
CHANGED
@@ -15,6 +15,16 @@ npm install flicker-alerts
|
|
15
15
|
|
16
16
|
**FlickerAlerts** é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações. Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.
|
17
17
|
|
18
|
+
<h4>Importação</h4>
|
19
|
+
<p>Esses links são essenciais para o funcionamento adequado dos estilos do Bootstrap e dos ícones do Font Awesome.</p>
|
20
|
+
<p class="text-import"> <!-- Importação do Bootstrap -->
|
21
|
+
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
22
|
+
|
23
|
+
<!-- Importação do Font Awesome -->
|
24
|
+
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
25
|
+
</p>
|
26
|
+
|
27
|
+
|
18
28
|
### Instalação
|
19
29
|
|
20
30
|
Instale via `npm`:
|
@@ -34,51 +44,16 @@ Com o **FlickerAlerts** instalado, importe-o no seu componente Angular e utilize
|
|
34
44
|
```typescript
|
35
45
|
import FlickerAlerts from 'flicker-alerts';
|
36
46
|
|
37
|
-
export class AppComponent {
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
}
|
48
|
-
|
49
|
-
showInfoAlert() {
|
50
|
-
FlickerAlerts.showAlert({
|
51
|
-
type: 'info',
|
52
|
-
title: 'Informação',
|
53
|
-
message: 'Aqui está uma informação importante.'
|
54
|
-
position: 'top-righ'
|
55
|
-
// Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
|
56
|
-
});
|
57
|
-
}
|
58
|
-
|
59
|
-
showWarningAlert() {
|
60
|
-
FlickerAlerts.showAlert({
|
61
|
-
type: 'warning',
|
62
|
-
title: 'Alerta',
|
63
|
-
message: 'Por favor, preste atenção nisso!'
|
64
|
-
position: 'top-righ'
|
65
|
-
// Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
|
66
|
-
});
|
67
|
-
}
|
68
|
-
|
69
|
-
showErrorAlert() {
|
70
|
-
FlickerAlerts.showAlert({
|
71
|
-
type: 'danger',
|
72
|
-
title: 'Erro',
|
73
|
-
message: 'Ocorreu um erro inesperado!'
|
74
|
-
position: 'top-righ'
|
75
|
-
// Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
|
76
|
-
});
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
|
81
|
-
|
47
|
+
export class AppComponent {
|
48
|
+
showAlert() {
|
49
|
+
FlickerAlerts.showAlert({
|
50
|
+
type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
|
51
|
+
title: 'Título',
|
52
|
+
message: 'Mensagem personalizada',
|
53
|
+
position: 'top-right' // Opções: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'
|
54
|
+
});
|
55
|
+
}
|
56
|
+
}
|
82
57
|
|
83
58
|
```
|
84
59
|
# Caso o Estilo Não Esteja Sendo Aplicado no Angular
|
@@ -99,47 +74,61 @@ Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React as
|
|
99
74
|
```javascript
|
100
75
|
import FlickerAlerts from 'flicker-alerts';
|
101
76
|
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
};
|
77
|
+
import FlickerAlerts from 'flicker-alerts';
|
78
|
+
|
79
|
+
const showAlert = () => {
|
80
|
+
FlickerAlerts.showAlert({
|
81
|
+
type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
|
82
|
+
title: 'Título',
|
83
|
+
message: 'Mensagem personalizada',
|
84
|
+
position: 'top-right' // Opções: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'
|
85
|
+
});
|
86
|
+
};
|
87
|
+
|
88
|
+
```
|
89
|
+
|
90
|
+
|
91
|
+
|
92
|
+
### Modais
|
93
|
+
### Uso no Angular
|
94
|
+
|
95
|
+
Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
|
96
|
+
|
97
|
+
```javascript
|
98
|
+
import FlickerAlerts from 'flicker-alerts';
|
99
|
+
|
100
|
+
export class AppComponent {
|
101
|
+
showModal() {
|
102
|
+
FlickerAlerts.showModal({
|
103
|
+
type: 'warning', // Tipos: 'warning', 'delete'
|
104
|
+
title: 'Título do Modal',
|
105
|
+
message: 'Mensagem personalizada para o modal.',
|
106
|
+
onConfirm: () => { console.log('Confirmado!'); },
|
107
|
+
onCancel: () => { console.log('Cancelado!'); }
|
108
|
+
});
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
|
113
|
+
```
|
114
|
+
|
115
|
+
### Uso no React
|
142
116
|
|
117
|
+
Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
|
118
|
+
|
119
|
+
```javascript
|
120
|
+
import FlickerAlerts from 'flicker-alerts';
|
121
|
+
|
122
|
+
const showModal = () => {
|
123
|
+
FlickerAlerts.showModal({
|
124
|
+
type: 'delete', // Tipos: 'warning', 'delete'
|
125
|
+
title: 'Título do Modal',
|
126
|
+
message: 'Mensagem personalizada para o modal.',
|
127
|
+
onConfirm: () => { console.log('Deletado com sucesso!'); },
|
128
|
+
onCancel: () => { console.log('Cancelado!'); }
|
129
|
+
});
|
130
|
+
};
|
131
|
+
|
143
132
|
|
144
133
|
```
|
145
134
|
|
package/style.css
CHANGED
@@ -1,191 +1,354 @@
|
|
1
|
-
|
2
|
-
.alert-custom {
|
3
|
-
display: flex;
|
4
|
-
align-items: center;
|
5
|
-
padding: 1rem;
|
6
|
-
border-radius: 0.5rem;
|
7
|
-
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
8
|
-
margin-bottom: 1rem;
|
9
|
-
width: 100%;
|
10
|
-
min-width: 250px; /* Tamanho mínimo para o alerta */
|
11
|
-
max-width: 320px;
|
12
|
-
position: relative;
|
13
|
-
background-color: white;
|
14
|
-
color: #000;
|
15
|
-
z-index: 1050;
|
16
|
-
font-family: Arial, sans-serif;
|
17
|
-
font-size: 0.9rem;
|
18
|
-
}
|
1
|
+
@import '@fortawesome/fontawesome-free/css/all.min.css';
|
19
2
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
border-radius: 50%;
|
29
|
-
font-size: 1rem; /* Diminui o tamanho do ícone */
|
30
|
-
line-height: 0;
|
31
|
-
margin-right: 1rem; /* Espaço entre o ícone e o conteúdo */
|
3
|
+
#alerts-container {
|
4
|
+
position: fixed;
|
5
|
+
top: 0;
|
6
|
+
left: 0;
|
7
|
+
width: 100vw;
|
8
|
+
height: 100vh;
|
9
|
+
pointer-events: none; /* Impede que o contêiner interfira nos cliques */
|
10
|
+
padding-right: 20px;
|
32
11
|
}
|
33
12
|
|
34
|
-
.
|
35
|
-
|
13
|
+
.notification {
|
14
|
+
margin: 20px;
|
15
|
+
background-color: #ffffff;
|
16
|
+
border-radius: 10px;
|
17
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
18
|
+
padding: 20px;
|
19
|
+
min-width: 300px;
|
20
|
+
max-width: 500px;
|
21
|
+
display: flex;
|
22
|
+
align-items: center;
|
23
|
+
position: absolute;
|
24
|
+
z-index: 9999; /* Garante que as notificações fiquem acima de outros elementos */
|
25
|
+
opacity: 1;
|
26
|
+
transition: opacity 0.3s ease-out;
|
27
|
+
pointer-events: auto; /* Permite interagir com o conteúdo da notificação */
|
36
28
|
}
|
37
|
-
|
38
|
-
|
39
|
-
.alert-custom .content {
|
40
|
-
display: flex;
|
41
|
-
flex-direction: column; /* Conteúdo empilhado */
|
42
|
-
justify-content: center; /* Centraliza verticalmente o título e a mensagem */
|
43
|
-
flex-grow: 1;
|
29
|
+
.text-import{
|
30
|
+
color: rgb(255, 0, 85);
|
44
31
|
}
|
45
32
|
|
46
|
-
.
|
47
|
-
|
48
|
-
|
49
|
-
|
33
|
+
.text-comment{
|
34
|
+
color: #28a745;
|
35
|
+
}
|
36
|
+
.notification .close {
|
37
|
+
position: absolute;
|
38
|
+
top: 10px;
|
39
|
+
right: 10px;
|
40
|
+
font-size: 14px;
|
41
|
+
color: #6c757d;
|
42
|
+
background-color: #e9ecef;
|
43
|
+
width: 24px;
|
44
|
+
height: 24px;
|
45
|
+
display: flex;
|
46
|
+
justify-content: center;
|
47
|
+
align-items: center;
|
48
|
+
border-radius: 8px;
|
49
|
+
cursor: pointer;
|
50
|
+
z-index: 10000;
|
50
51
|
}
|
51
52
|
|
52
|
-
.
|
53
|
-
|
54
|
-
|
53
|
+
.notification .icon {
|
54
|
+
font-size: 24px;
|
55
|
+
color: #ffffff;
|
56
|
+
margin-right: 15px;
|
57
|
+
width: 40px;
|
58
|
+
height: 40px;
|
59
|
+
display: flex;
|
60
|
+
justify-content: center;
|
61
|
+
align-items: center;
|
62
|
+
border-radius: 8px;
|
55
63
|
}
|
56
64
|
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
cursor: pointer;
|
63
|
-
color: #999; /* Cor mais clara para o X */
|
64
|
-
font-size: 1rem; /* Tamanho menor do X */
|
65
|
-
padding: 0.25rem;
|
65
|
+
.notification .divider {
|
66
|
+
width: 1px;
|
67
|
+
height: 50px;
|
68
|
+
background-color: #b8bdc3;
|
69
|
+
margin-right: 15px;
|
66
70
|
}
|
67
71
|
|
68
|
-
.
|
69
|
-
|
72
|
+
.notification .title {
|
73
|
+
font-weight: bold;
|
74
|
+
font-size: 18px;
|
75
|
+
margin-bottom: 5px;
|
70
76
|
}
|
71
77
|
|
72
|
-
|
73
|
-
|
74
|
-
|
78
|
+
.notification .message {
|
79
|
+
color: #6c757d;
|
80
|
+
font-size: 16px;
|
75
81
|
}
|
76
82
|
|
77
|
-
|
78
|
-
|
79
|
-
|
83
|
+
/* Tipos de alerta */
|
84
|
+
.success .icon {
|
85
|
+
background-color: #28a745;
|
80
86
|
}
|
81
87
|
|
82
|
-
.
|
83
|
-
|
88
|
+
.success .title {
|
89
|
+
color: #28a745;
|
84
90
|
}
|
85
91
|
|
86
|
-
.
|
87
|
-
|
88
|
-
color: white;
|
92
|
+
.danger .icon {
|
93
|
+
background-color: #dc3545;
|
89
94
|
}
|
90
95
|
|
91
|
-
.
|
92
|
-
|
96
|
+
.error .title {
|
97
|
+
color: #dc3545;
|
93
98
|
}
|
94
99
|
|
95
|
-
.
|
96
|
-
|
97
|
-
color: white;
|
100
|
+
.info .icon {
|
101
|
+
background-color: #17a2b8;
|
98
102
|
}
|
99
103
|
|
100
|
-
.
|
101
|
-
|
104
|
+
.info .title {
|
105
|
+
color: #17a2b8;
|
102
106
|
}
|
103
107
|
|
104
|
-
.
|
105
|
-
|
106
|
-
color: white;
|
108
|
+
.warning .icon {
|
109
|
+
background-color: #ffc107;
|
107
110
|
}
|
108
111
|
|
109
|
-
|
110
|
-
|
111
|
-
position: fixed;
|
112
|
-
display: flex;
|
113
|
-
flex-direction: column;
|
114
|
-
gap: 0.5rem;
|
115
|
-
z-index: 1050;
|
112
|
+
.warning .title {
|
113
|
+
color: #ffc107;
|
116
114
|
}
|
117
115
|
|
118
|
-
/* Posicionamento
|
116
|
+
/* Posicionamento das notificações */
|
119
117
|
.top-right {
|
120
|
-
|
121
|
-
|
118
|
+
top: 1rem;
|
119
|
+
right: 1rem;
|
122
120
|
}
|
123
121
|
|
124
122
|
.top-left {
|
125
|
-
|
126
|
-
|
123
|
+
top: 1rem;
|
124
|
+
left: 1rem;
|
127
125
|
}
|
128
126
|
|
129
127
|
.bottom-right {
|
130
|
-
|
131
|
-
|
128
|
+
bottom: 1rem;
|
129
|
+
right: 1rem;
|
132
130
|
}
|
133
131
|
|
134
132
|
.bottom-left {
|
135
|
-
|
136
|
-
|
133
|
+
bottom: 1rem;
|
134
|
+
left: 1rem;
|
137
135
|
}
|
138
136
|
|
139
137
|
.center {
|
140
|
-
|
141
|
-
|
142
|
-
|
138
|
+
top: 50%;
|
139
|
+
left: 50%;
|
140
|
+
transform: translate(-50%, -50%);
|
143
141
|
}
|
144
142
|
|
145
143
|
.top-center {
|
146
|
-
|
147
|
-
|
148
|
-
|
144
|
+
top: 1rem;
|
145
|
+
left: 50%;
|
146
|
+
transform: translateX(-50%);
|
149
147
|
}
|
150
148
|
|
151
|
-
.bottom-center {
|
152
|
-
|
153
|
-
|
154
|
-
|
149
|
+
.bottom-center {
|
150
|
+
bottom: 1rem;
|
151
|
+
left: 50%;
|
152
|
+
transform: translateX(-50%);
|
155
153
|
}
|
156
154
|
|
157
|
-
|
158
|
-
|
155
|
+
|
156
|
+
|
157
|
+
|
158
|
+
/* Barra de carregamento */
|
159
|
+
.notification .progress-bar {
|
159
160
|
position: absolute;
|
160
161
|
bottom: 0;
|
161
162
|
left: 0;
|
162
|
-
height:
|
163
|
-
|
164
|
-
|
163
|
+
height: 4px;
|
164
|
+
width: 0%;
|
165
|
+
background-color: transparent;
|
166
|
+
animation: progress-animation 1 linear forwards;
|
167
|
+
border-bottom-left-radius: 10px;
|
168
|
+
border-bottom-right-radius: 10px;
|
169
|
+
}
|
170
|
+
|
171
|
+
/* Animação da barra de carregamento */
|
172
|
+
@keyframes progress-animation {
|
173
|
+
from {
|
174
|
+
width: 0%;
|
175
|
+
}
|
176
|
+
to {
|
177
|
+
width: 100%;
|
178
|
+
}
|
179
|
+
}
|
180
|
+
|
181
|
+
/* Cores específicas para cada tipo */
|
182
|
+
.success .progress-bar {
|
183
|
+
background-color: #28a745;
|
184
|
+
}
|
185
|
+
|
186
|
+
.info .progress-bar {
|
187
|
+
background-color: #17a2b8;
|
188
|
+
}
|
189
|
+
|
190
|
+
.warning .progress-bar {
|
191
|
+
background-color: #ffc107;
|
192
|
+
}
|
193
|
+
|
194
|
+
.danger .progress-bar {
|
195
|
+
background-color: #dc3545;
|
196
|
+
}
|
197
|
+
|
198
|
+
|
199
|
+
|
200
|
+
|
201
|
+
/* Modal */
|
202
|
+
|
203
|
+
.modal-container {
|
204
|
+
|
205
|
+
display: flex;
|
206
|
+
justify-content: center; /* Alinha o modal horizontalmente */
|
207
|
+
align-items: center; /* Alinha o modal verticalmente */
|
208
|
+
position: fixed; /* Fixa o modal na tela */
|
209
|
+
top: 0; /* Alinha o topo */
|
210
|
+
left: 0; /* Alinha o lado esquerdo */
|
211
|
+
width: 100vw; /* Ocupa toda a largura da tela */
|
212
|
+
height: 100vh; /* Ocupa toda a altura da tela */
|
213
|
+
margin: 0;
|
214
|
+
z-index: 9999; /* Garante que o modal ficará acima de outros elementos */
|
215
|
+
}
|
216
|
+
|
217
|
+
.modal-dialog {
|
218
|
+
max-width: 545px;
|
219
|
+
}
|
220
|
+
.modal-content {
|
221
|
+
|
222
|
+
background-color: white;
|
223
|
+
border-radius: 10px;
|
224
|
+
padding: 20px;
|
225
|
+
border: none;
|
226
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
165
227
|
}
|
228
|
+
.modal-header {
|
229
|
+
border-bottom: none;
|
230
|
+
display: flex;
|
231
|
+
justify-content: flex-end;
|
232
|
+
padding: 20px;
|
233
|
+
}
|
234
|
+
.modal-header .close {
|
235
|
+
font-size: 16px;
|
236
|
+
font-weight: bold;
|
237
|
+
color: #6c757d;
|
238
|
+
width: 20px;
|
239
|
+
height: 20px;
|
240
|
+
display: flex;
|
241
|
+
justify-content: center;
|
242
|
+
align-items: center;
|
243
|
+
border-radius: 8px;
|
244
|
+
background-color: #E9ECEF;
|
245
|
+
border: none;
|
246
|
+
}
|
247
|
+
.modal-body {
|
166
248
|
|
167
|
-
|
168
|
-
|
249
|
+
text-align: center;
|
250
|
+
display: flex;
|
251
|
+
align-items: center;
|
252
|
+
justify-content: center;
|
253
|
+
gap: 15px;
|
254
|
+
padding: 20px;
|
255
|
+
}
|
256
|
+
.modal-body .icon-check {
|
257
|
+
font-size: 24px;
|
258
|
+
color: #ffffff;
|
259
|
+
width: 40px;
|
260
|
+
height: 40px;
|
261
|
+
display: flex;
|
262
|
+
justify-content: center;
|
263
|
+
align-items: center;
|
264
|
+
border-radius: 8px;
|
265
|
+
background-color: #ffc107;
|
266
|
+
}
|
267
|
+
.modal-body .icon-delete {
|
268
|
+
font-size: 24px;
|
269
|
+
color: #ffffff;
|
270
|
+
width: 40px;
|
271
|
+
height: 40px;
|
272
|
+
display: flex;
|
273
|
+
justify-content: center;
|
274
|
+
align-items: center;
|
275
|
+
border-radius: 8px;
|
276
|
+
background-color: #dc3545;
|
277
|
+
}
|
278
|
+
.modal-body .divider {
|
279
|
+
width: 1px;
|
280
|
+
height: 50px;
|
281
|
+
background-color: #b8bdc3;
|
282
|
+
margin-right: 15px;
|
283
|
+
}
|
284
|
+
.modal-body .modal-title-warning {
|
285
|
+
color: #ffc107;
|
286
|
+
}
|
287
|
+
.modal-body .modal-title-delete {
|
288
|
+
color: #dc3545;
|
289
|
+
}
|
290
|
+
.modal-footer {
|
291
|
+
border-top: none;
|
292
|
+
justify-content: center;
|
293
|
+
gap: 20px;
|
294
|
+
margin-top: 20px;
|
295
|
+
}
|
296
|
+
.btn-cancel {
|
297
|
+
width: 200px !important;
|
298
|
+
width: 200px;
|
299
|
+
border: 1px solid #ced4da;
|
300
|
+
color: #495057;
|
301
|
+
background-color: white;
|
302
|
+
padding: 5px 15px;
|
303
|
+
border-radius: 5px;
|
304
|
+
}
|
305
|
+
.btn-confirm-warning {
|
306
|
+
width: 200px !important;
|
307
|
+
background-color: #ffc107;
|
308
|
+
color: white;
|
309
|
+
padding: 5px 15px;
|
310
|
+
border-radius: 5px;
|
311
|
+
border: none;
|
312
|
+
}
|
313
|
+
.btn-confirm-delete {
|
314
|
+
width: 200px !important;
|
315
|
+
background-color: #dc3545;
|
316
|
+
color: white;
|
317
|
+
padding: 5px 15px;
|
318
|
+
border-radius: 5px;
|
319
|
+
border: none;
|
169
320
|
}
|
170
321
|
|
171
|
-
|
172
|
-
|
322
|
+
|
323
|
+
|
324
|
+
/* Botão Cancelar */
|
325
|
+
.btn-cancel {
|
326
|
+
width: 200px !important;
|
327
|
+
border: 1px solid #ced4da;
|
328
|
+
color: #495057;
|
329
|
+
background-color: white;
|
330
|
+
padding: 5px 15px;
|
331
|
+
border-radius: 5px;
|
332
|
+
transition: background-color 0.3s, color 0.3s;
|
173
333
|
}
|
174
334
|
|
175
|
-
.
|
176
|
-
|
335
|
+
.btn-cancel:hover {
|
336
|
+
background-color: #f8f9fa;
|
337
|
+
color: #495057;
|
338
|
+
cursor: pointer;
|
177
339
|
}
|
178
340
|
|
179
|
-
|
180
|
-
|
341
|
+
|
342
|
+
.btn-confirm-warning:hover {
|
343
|
+
background-color: #e0a800;
|
344
|
+
transform: scale(1.05);
|
345
|
+
cursor: pointer;
|
181
346
|
}
|
182
347
|
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
width: 100%;
|
190
|
-
}
|
348
|
+
|
349
|
+
|
350
|
+
.btn-confirm-delete:hover {
|
351
|
+
background-color: #c82333;
|
352
|
+
transform: scale(1.05);
|
353
|
+
cursor: pointer;
|
191
354
|
}
|