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.
Files changed (5) hide show
  1. package/index.d.ts +17 -4
  2. package/index.js +180 -36
  3. package/package.json +2 -2
  4. package/readme.md +74 -85
  5. package/style.css +288 -125
package/index.d.ts CHANGED
@@ -1,15 +1,28 @@
1
1
  declare module 'flicker-alerts' {
2
- // Interface de opções de alerta, incluindo a propriedade 'position'
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 (opcional)
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 exibir o alerta, agora aceitando 'position' como parte das opções
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
- document.body.appendChild(container); // Adiciona o container ao body
16
- } else {
17
- // Limpar as classes anteriores de posição
18
- container.className = '';
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 = `alert-custom alert-${type}`;
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 = `<strong>${title}</strong><div>${message}</div>`;
41
+ content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
43
42
  alertBox.appendChild(content);
44
43
 
45
- // Botão de fechamento
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
- // Barra de progresso
53
- const progressBar = document.createElement('div');
54
- progressBar.className = `progress-bar progress-bar-${type}`;
55
- alertBox.appendChild(progressBar);
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
- // Adicionar ao container
65
+ alertBox.appendChild(closeButton);
58
66
  container.appendChild(alertBox);
59
67
 
60
- // Remoção automática após o tempo especificado
61
- setTimeout(() => alertBox.remove(), timer);
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: 'A operação foi concluída com êxito!' });
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: 'Aqui está uma informação importante.' });
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: 'Por favor, preste atenção nisso!' });
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: 'Ocorreu um erro inesperado!' });
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.27",
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.27"
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
- showSuccessAlert() {
39
- FlickerAlerts.showAlert({
40
- type: 'success',
41
- title: 'Sucesso',
42
- message: 'Operação concluída com sucesso!'
43
- position: 'top-righ'
44
- // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
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
- const showSucessAlert = () => {
103
- FlickerAlerts.showAlert({
104
- type: 'success',
105
- title: 'Sucesso',
106
- message: 'Operação concluída com sucesso!',
107
- position: 'top-right'
108
- // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
109
- });
110
- };
111
-
112
-
113
- const showInfoAlert = () => {
114
- FlickerAlerts.showAlert({
115
- type: 'info',
116
- title: 'Informação',
117
- message: 'Aqui está uma informação importante.',
118
- position: 'top-right'
119
- // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
120
- });
121
- };
122
-
123
- const showWarningAlert = () => {
124
- FlickerAlerts.showAlert({
125
- type: 'warning',
126
- title: 'Alerta',
127
- message: 'Por favor, preste atenção nisso!',
128
- position: 'top-right'
129
- // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
130
- });
131
- };
132
-
133
- const showErrorAlert = () => {
134
- FlickerAlerts.showAlert({
135
- type: 'danger',
136
- title: 'Erro',
137
- message: 'Ocorreu um erro inesperado!',
138
- position: 'top-right'
139
- // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
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
- /* Estilo geral para o alerta */
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
- /* Estilo do ícone dentro do alerta */
21
- .alert-custom .icon {
22
- text-align: center;
23
- display: flex;
24
- align-items: center;
25
- justify-content: center;
26
- width: 2rem; /* Diminui o tamanho do círculo */
27
- height: 2rem; /* Diminui o tamanho do círculo */
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
- .alert-custom .icon i {
35
- font-size: inherit; /* Ajusta o ícone ao tamanho da div */
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
- /* Estilo do conteúdo do alerta (título e mensagem) */
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
- .alert-custom .content strong {
47
- font-weight: bold;
48
- font-size: 1rem;
49
- margin-bottom: 0.25rem; /* Espaçamento entre título e mensagem */
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
- .alert-custom .content div {
53
- font-size: 0.9rem;
54
- color: #555;
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
- /* Botão de Fechar no topo */
58
- .alert-custom .close {
59
- position: absolute; /* Posiciona o X no topo da caixa */
60
- top: 5px; /* Ajusta a distância do topo */
61
- right: 5px; /* Ajusta a distância da borda direita */
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
- .alert-custom .close:hover {
69
- color: #777; /* Cor mais escura no hover */
72
+ .notification .title {
73
+ font-weight: bold;
74
+ font-size: 18px;
75
+ margin-bottom: 5px;
70
76
  }
71
77
 
72
- /* Estilos para os tipos de alerta */
73
- .alert-success {
74
- border-left: 0.25rem solid #28a745;
78
+ .notification .message {
79
+ color: #6c757d;
80
+ font-size: 16px;
75
81
  }
76
82
 
77
- .alert-success .icon {
78
- background-color: #28a745;
79
- color: white;
83
+ /* Tipos de alerta */
84
+ .success .icon {
85
+ background-color: #28a745;
80
86
  }
81
87
 
82
- .alert-info {
83
- border-left: 0.25rem solid #17a2b8;
88
+ .success .title {
89
+ color: #28a745;
84
90
  }
85
91
 
86
- .alert-info .icon {
87
- background-color: #17a2b8;
88
- color: white;
92
+ .danger .icon {
93
+ background-color: #dc3545;
89
94
  }
90
95
 
91
- .alert-warning {
92
- border-left: 0.25rem solid #ffc107;
96
+ .error .title {
97
+ color: #dc3545;
93
98
  }
94
99
 
95
- .alert-warning .icon {
96
- background-color: #ffc107;
97
- color: white;
100
+ .info .icon {
101
+ background-color: #17a2b8;
98
102
  }
99
103
 
100
- .alert-danger {
101
- border-left: 0.25rem solid #dc3545;
104
+ .info .title {
105
+ color: #17a2b8;
102
106
  }
103
107
 
104
- .alert-danger .icon {
105
- background-color: #dc3545;
106
- color: white;
108
+ .warning .icon {
109
+ background-color: #ffc107;
107
110
  }
108
111
 
109
- /* Classes para o container de alertas */
110
- .top-right, .top-left, .bottom-right, .bottom-left, .center, .top-center, .bottom-center {
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 específico para cada caso */
116
+ /* Posicionamento das notificações */
119
117
  .top-right {
120
- top: 1rem;
121
- right: 1rem;
118
+ top: 1rem;
119
+ right: 1rem;
122
120
  }
123
121
 
124
122
  .top-left {
125
- top: 1rem;
126
- left: 1rem;
123
+ top: 1rem;
124
+ left: 1rem;
127
125
  }
128
126
 
129
127
  .bottom-right {
130
- bottom: 1rem;
131
- right: 1rem;
128
+ bottom: 1rem;
129
+ right: 1rem;
132
130
  }
133
131
 
134
132
  .bottom-left {
135
- bottom: 1rem;
136
- left: 1rem;
133
+ bottom: 1rem;
134
+ left: 1rem;
137
135
  }
138
136
 
139
137
  .center {
140
- top: 50%;
141
- left: 50%;
142
- transform: translate(-50%, -50%);
138
+ top: 50%;
139
+ left: 50%;
140
+ transform: translate(-50%, -50%);
143
141
  }
144
142
 
145
143
  .top-center {
146
- top: 1rem;
147
- left: 50%;
148
- transform: translateX(-50%);
144
+ top: 1rem;
145
+ left: 50%;
146
+ transform: translateX(-50%);
149
147
  }
150
148
 
151
- .bottom-center {
152
- bottom: 1rem;
153
- left: 50%;
154
- transform: translateX(-50%);
149
+ .bottom-center {
150
+ bottom: 1rem;
151
+ left: 50%;
152
+ transform: translateX(-50%);
155
153
  }
156
154
 
157
- /* Barra de progresso */
158
- .progress-bar {
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: 0.25rem;
163
- animation: load 3s linear forwards;
164
- border-radius: 0 0 0.5rem 0.5rem;
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
- .progress-bar-success {
168
- background-color: #28a745;
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
- .progress-bar-info {
172
- background-color: #17a2b8;
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
- .progress-bar-warning {
176
- background-color: #ffc107;
335
+ .btn-cancel:hover {
336
+ background-color: #f8f9fa;
337
+ color: #495057;
338
+ cursor: pointer;
177
339
  }
178
340
 
179
- .progress-bar-danger {
180
- background-color: #dc3545;
341
+
342
+ .btn-confirm-warning:hover {
343
+ background-color: #e0a800;
344
+ transform: scale(1.05);
345
+ cursor: pointer;
181
346
  }
182
347
 
183
- /* Animação de progresso */
184
- @keyframes load {
185
- from {
186
- width: 0;
187
- }
188
- to {
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
  }