LukiBeg
/
Nexus-InglineSystems
mirror of https://github.com/Lukibeg/Nexus-InglineSystems.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: refatora app.css o dividindo em arquivos menores.

This commit is contained in:
lukibeg 2025-11-08 19:50:38 -03:00
parent aecaef1509
commit dcb9d796d1
6 changed files with 879 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
resources/css/app.css
View File

@ -5,6 +5,12 @@
@source '../**/*.blade.php';
@source '../**/*.js';
@import './toast.css';
@import './client-form.css';
@import './user-form-modal.css';
@import './header.css';
@import './client-cards.css';
@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
@ -43,125 +49,6 @@ @layer components {
/*End body */
/* Header - Navbar */
.nav-bar {
@apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10;
/* REMOVIDO: @apply relative; */
/* 1. ADICIONADO: 'top-0 left-0' para "colar" no topo */
@apply fixed top-0 left-0 z-50 w-full;
@apply bg-transparent text-black;
@apply border-b border-transparent;
@apply transition-colors duration-700 ease-in-out;
}
.nav-bar::before {
content: '';
@apply absolute top-0 left-0 w-full h-full;
/* 2. ESTADO BASE (Topo): Fundo e Sombra */
@apply bg-white;
@apply shadow-md shadow-blue-400;
/* 4. REMOVIDO: As classes 'border-b border-white' saíram daqui */
/* 3. TRANSIÇÃO (Correto) */
@apply transition-all duration-700 ease-in-out;
@apply -z-10;
}
.navbar-scrolled {
@apply border-white shadow-md;
}
.navbar-scrolled::before {
@apply opacity-0;
@apply shadow-none;
}
.nav-bar>.navbar-items>a:hover,
.nav-bar>.navbar-items>a {
@apply transition-all duration-300 transform hover:scale-105;
@apply mr-7;
@apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
}
.nav-bar-logo {
/* Garante que a largura não ultrapasse 100% */
@apply rounded-md max-w-25 mr-10;
height: auto;
/* Altura proporcional à largura */
}
.navbar-items {
@apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10;
}
.profile-menu {
@apply absolute right-5;
@apply rounded-xl;
@apply max-w-7 max-h-7;
}
.profile-list-items {
/* 1. Posicionamento (Correto) */
@apply absolute top-full right-0 ml-4 mt-2;
@apply block w-full;
/* Adicionei mt-2 para descolar do ícone */
/* 2. Largura Fixa (Mais limpo) */
@apply w-56;
/* 3. Estilos do Contêiner (Profissional) */
@apply bg-white p-2 rounded-md shadow-xl;
/* Sombra mais forte */
@apply border border-gray-200;
/* 4. Divisórias Sutis entre os <li> */
@apply divide-y divide-gray-100;
}
.profile-link {
/* Você pode aplicar isso direto no <a> */
/* 1. FAZ O LINK PREENCHER O <li> */
@apply block w-full;
}
.profile-items {
/* 1. Limpeza (Classes antigas removidas) */
/* 2. Espaçamento Interno (Respiro) */
@apply px-4 py-2;
/* 3. Estilos de Texto */
@apply text-sm text-gray-700;
/* 4. Interatividade */
@apply hover:bg-blue-100 cursor-pointer;
/* 5. Transição Suave */
@apply transition-colors duration-150 ease-in-out;
/* 6. Cantos do Hover */
@apply rounded-md;
}
.nav-bar-logo img {
@apply w-full;
/* Largura 100% para se ajustar ao container */
height: auto;
/* Mantém a proporção original da imagem */
}
.nav-bar>.navbar-items>form>button {
@apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
}
/*End Header - Navbar */
/* Container */
.container-title {
@ -207,70 +94,3 @@ @layer components {
.container h1 {
@apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
}
/* Estilos para o card do cliente */
/* CONTAINER PRINCIPAL DO CARD */
.client-card {
/* Layout: Flex-col (vertical) */
@apply flex flex-col justify-between;
@apply hover:transition duration-150 ease-in-out hover:scale-110;
/* Estilo: Sombra, borda, fundo branco */
@apply bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out;
@apply border border-gray-100;
/* Garante que o conteúdo não vaze */
@apply overflow-hidden;
}
/* O "RETÂNGULO" SUPERIOR (Avatar + Opções) */
.client-card-header {
/* 1. POSIÇÃO: 'relative' para ancorar o menu de opções */
@apply relative;
/* 2. LAYOUT: Centraliza o avatar */
@apply flex justify-center items-center;
/* 3. ESPAÇAMENTO: Padding interno */
@apply p-6;
/* 4. (Opcional) Fundo sutil para o retângulo */
@apply bg-gray-50;
}
/* AVATAR DO CLIENTE */
.client-avatar {
/* A imagem <img> interna já tem as classes de tamanho (w-32 h-32) */
}
/* MENU DE OPÇÕES (Três Pontinhos) */
.client-options-menu {
/* 1. POSIÇÃO: Flutua sobre o header */
@apply absolute top-4 right-4;
}
.client-options-button {
@apply p-2 rounded-full hover:bg-gray-200 transition-colors;
@apply focus:outline-none focus:ring-2 focus:ring-blue-500;
}
/* LISTA DE OPÇÕES (Dropdown) */
.client-options-list {
@apply absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg py-1 z-10;
@apply divide-y divide-gray-100;
}
.client-option-item {
@apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-100 hover:text-blue-800 transition-colors;
@apply cursor-pointer;
}
/* NOME DO CLIENTE (Área inferior) */
.client-card-name {
@apply text-lg font-semibold text-gray-800 text-center;
/* Espaçamento e uma borda sutil no topo */
@apply p-4 border-t border-gray-100;
}
}

69
resources/css/client-cards.css Normal file
View File

@ -0,0 +1,69 @@
@layer components {
/* Estilos para o card do cliente */
/* CONTAINER PRINCIPAL DO CARD */
.client-card {
/* Layout: Flex-col (vertical) */
@apply flex flex-col justify-between;
@apply hover:transition duration-150 ease-in-out hover:scale-110;
/* Estilo: Sombra, borda, fundo branco */
@apply bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out;
@apply border border-gray-100;
/* Garante que o conteúdo não vaze */
@apply overflow-hidden;
}
/* O "RETÂNGULO" SUPERIOR (Avatar + Opções) */
.client-card-header {
/* 1. POSIÇÃO: 'relative' para ancorar o menu de opções */
@apply relative;
/* 2. LAYOUT: Centraliza o avatar */
@apply flex justify-center items-center;
/* 3. ESPAÇAMENTO: Padding interno */
@apply p-6;
/* 4. (Opcional) Fundo sutil para o retângulo */
@apply bg-gray-50;
}
/* AVATAR DO CLIENTE */
.client-avatar {
/* A imagem <img> interna já tem as classes de tamanho (w-32 h-32) */
}
/* MENU DE OPÇÕES (Três Pontinhos) */
.client-options-menu {
/* 1. POSIÇÃO: Flutua sobre o header */
@apply absolute top-4 right-4;
}
.client-options-button {
@apply p-2 rounded-full hover:bg-gray-200 transition-colors;
@apply focus:outline-none focus:ring-2 focus:ring-blue-500;
}
/* LISTA DE OPÇÕES (Dropdown) */
.client-options-list {
@apply absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg py-1 z-10;
@apply divide-y divide-gray-100;
}
.client-option-item {
@apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-100 hover:text-blue-800 transition-colors;
@apply cursor-pointer;
}
/* NOME DO CLIENTE (Área inferior) */
.client-card-name {
@apply text-lg font-semibold text-gray-800 text-center;
/* Espaçamento e uma borda sutil no topo */
@apply p-4 border-t border-gray-100;
}
}
}

375
resources/css/client-form.css Normal file
View File

@ -0,0 +1,375 @@
@layer components {
/* ================================================================== */
/* Estilos do Formulário do Modal (Slide-Over) - Versão Aprimorada */
/* ================================================================== */
/* Define o layout de duas colunas com gap responsivo */
.form-grid-container {
@apply lg:grid lg:grid-cols-3 lg:gap-8;
animation: fadeIn 0.3s ease-out;
}
/* Coluna principal que ocupa 2/3 do espaço */
.form-main-panel-modal {
@apply lg:col-span-2;
}
/* Coluna da sidebar que ocupa 1/3 do espaço */
.form-sidebar-column {
@apply lg:col-span-1;
}
/* Faz a sidebar "grudar" no topo ao rolar a página com transição suave */
.form-sticky-sidebar-modal {
@apply lg:sticky lg:top-6;
transition: top 0.2s ease-out;
}
/* Wrapper principal dentro do modal com padding otimizado */
.form-wrapper-modal {
@apply flex-1 px-4 py-6 sm:px-6;
}
/* Bloco de um grupo de campos com espaçamento melhorado */
.form-group {
@apply py-5;
animation: slideInUp 0.4s ease-out;
}
/* Título de uma seção com melhor hierarquia visual */
.form-section-title {
@apply text-base font-semibold leading-6 text-gray-900 text-gray-100;
letter-spacing: -0.01em;
}
/* Divisor com gradiente azul-roxo inspirado na imagem */
.form-divider {
@apply my-4;
background: linear-gradient(to right, transparent, #5bb5f0, #a8a3e8, transparent);
height: 1px;
border: none;
opacity: 0.3;
}
/* Card com borda azul suave */
.form-section-card {
@apply rounded-lg p-4;
border: 1px solid #e3f2fd;
background: linear-gradient(135deg, #f8fbff 0%, #f5f8ff 100%);
backdrop-filter: blur(8px);
transition: all 0.2s ease;
}
.form-section-card:hover {
border-color: #bbdefb;
box-shadow: 0 2px 8px rgba(91, 181, 240, 0.1);
}
/* Dark mode para card */
@media (prefers-color-scheme: dark) {
.form-section-card {
background: linear-gradient(135deg, rgba(91, 181, 240, 0.05) 0%, rgba(168, 163, 232, 0.05) 100%);
border-color: rgba(91, 181, 240, 0.2);
}
.form-section-card:hover {
border-color: rgba(91, 181, 240, 0.3);
}
}
/* ================================================================== */
/* Estilos dos Campos de Formulário */
/* ================================================================== */
/* Rótulo (Label) padrão dos campos com melhor contraste */
.form-label {
/* Ajustado para texto mais escuro e melhor contraste */
@apply block text-sm font-medium leading-6 text-gray-700 text-gray-300 mb-2;
transition: color 0.15s ease;
}
/* Input com cores do tema azul-roxo */
.form-input {
/* Campos agora são brancos/claros com texto escuro para melhor contraste */
@apply block w-full rounded-md border-0 py-2 px-3 text-gray-900 text-gray-400 shadow-sm placeholder:text-gray-400 placeholder:text-gray-500 sm:text-sm sm:leading-6;
background-color: #ffffff;
ring-color: #bbdefb;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
input[type="date"] {
outline: none;
border: none;
color: black;
}
.form-input:focus {
outline: none;
ring-width: 2px;
ring-color: #5bb5f0;
box-shadow: 0 0 0 3px rgba(91, 181, 240, 0.15);
}
.form-input:hover:not(:focus) {
ring-color: #90caf9;
}
@media (prefers-color-scheme: dark) {
.form-input {
background-color: rgba(255, 255, 255, 0.05);
ring-color: rgba(91, 181, 240, 0.3);
}
.form-input:focus {
ring-color: #5bb5f0;
}
.form-input:hover:not(:focus) {
ring-color: rgba(91, 181, 240, 0.4);
}
}
/* Input de arquivo com tema azul-roxo */
.form-file-input {
@apply block w-full text-sm text-gray-900 rounded-lg cursor-pointer bg-gray-50;
border: 1px solid #bbdefb;
transition: all 0.2s ease;
}
.form-file-input::file-selector-button {
margin-right: 1rem;
padding: 0.5rem 1rem;
border: none;
border-radius: 0.5rem 0 0 0.5rem;
font-size: 0.875rem;
font-weight: 600;
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
color: #1976d2;
transition: all 0.2s ease;
}
.form-file-input:hover::file-selector-button {
background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%);
}
.form-file-input:focus {
outline: none;
border-color: #5bb5f0;
box-shadow: 0 0 0 2px rgba(91, 181, 240, 0.2);
}
@media (prefers-color-scheme: dark) {
.form-file-input {
border-color: rgba(91, 181, 240, 0.3);
}
.form-file-input::file-selector-button {
background: linear-gradient(135deg, rgba(91, 181, 240, 0.15) 0%, rgba(168, 163, 232, 0.15) 100%);
color: #90caf9;
}
.form-file-input:hover::file-selector-button {
background: linear-gradient(135deg, rgba(91, 181, 240, 0.25) 0%, rgba(168, 163, 232, 0.25) 100%);
}
}
/* Grupo de checkboxes com melhor espaçamento */
.form-checkbox-group {
@apply space-y-3 mt-2;
}
/* Item individual do checkbox com hover suave */
.form-checkbox-item {
@apply flex items-center gap-x-3 p-2 rounded-md;
transition: background-color 0.15s ease;
}
.form-checkbox-item:hover {
background-color: rgba(91, 181, 240, 0.05);
}
@media (prefers-color-scheme: dark) {
.form-checkbox-item:hover {
background-color: rgba(91, 181, 240, 0.1);
}
}
/* Checkbox com cores azul-roxo */
.form-checkbox {
@apply h-4 w-4 rounded cursor-pointer;
border: 2px solid #90caf9;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
accent-color: #5bb5f0;
}
.form-checkbox:checked {
background-color: #5bb5f0;
border-color: #5bb5f0;
animation: checkboxPop 0.2s ease;
}
.form-checkbox:hover {
border-color: #5bb5f0;
}
.form-checkbox:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(91, 181, 240, 0.2);
}
@media (prefers-color-scheme: dark) {
.form-checkbox {
border-color: rgba(91, 181, 240, 0.4);
}
}
/* ================================================================== */
/* Estilos dos Botões do Modal */
/* ================================================================== */
/* Botão Primário com gradiente azul-roxo */
.form-button-primary {
@apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold text-white shadow-sm;
background: linear-gradient(135deg, #5bb5f0 0%, #2e9ae5 50%, #a8a3e8 100%);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.form-button-primary::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
opacity: 0;
transition: opacity 0.2s ease;
}
.form-button-primary:hover {
box-shadow: 0 4px 12px rgba(91, 181, 240, 0.4);
transform: translateY(-1px);
}
.form-button-primary:hover::before {
opacity: 1;
}
.form-button-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(91, 181, 240, 0.3);
}
.form-button-primary:focus-visible {
outline: 2px solid #5bb5f0;
outline-offset: 2px;
}
.form-button-primary:disabled {
background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%);
cursor: not-allowed;
transform: none;
opacity: 0.6;
}
/* Botão Secundário com borda azul */
.form-button-secondary {
@apply rounded-md bg-white bg-gray-800 px-4 py-2 text-sm font-semibold text-gray-900 text-gray-100 shadow-sm;
border: 1px solid #bbdefb;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.form-button-secondary:hover {
background: linear-gradient(135deg, #f8fbff 0%, #f5f8ff 100%);
border-color: #5bb5f0;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(91, 181, 240, 0.15);
}
.form-button-secondary:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(91, 181, 240, 0.1);
}
.form-button-secondary:focus-visible {
outline: 2px solid #5bb5f0;
outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
.form-button-secondary {
border-color: rgba(91, 181, 240, 0.3);
}
.form-button-secondary:hover {
background: linear-gradient(135deg, rgba(91, 181, 240, 0.05) 0%, rgba(168, 163, 232, 0.05) 100%);
border-color: #5bb5f0;
}
}
/* ================================================================== */
/* Animações */
/* ================================================================== */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes checkboxPop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
/* ================================================================== */
/* Estados de Validação */
/* ================================================================== */
.form-input.is-invalid {
ring-color: #ef5350;
}
.form-input.is-valid {
ring-color: #66bb6a;
}
.form-error-message {
@apply mt-2 text-sm;
color: #ef5350;
animation: slideInUp 0.2s ease-out;
}
.form-helper-text {
@apply mt-2 text-sm text-gray-500 text-gray-400;
}
}

122
resources/css/header.css Normal file
View File

@ -0,0 +1,122 @@
@layer components {
/* Header - Navbar */
.nav-bar {
@apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10;
/* REMOVIDO: @apply relative; */
/* 1. ADICIONADO: 'top-0 left-0' para "colar" no topo */
@apply fixed top-0 left-0 z-50 w-full;
@apply bg-transparent text-black;
@apply border-b border-transparent;
@apply transition-colors duration-700 ease-in-out;
}
.nav-bar::before {
content: '';
@apply absolute top-0 left-0 w-full h-full;
/* 2. ESTADO BASE (Topo): Fundo e Sombra */
@apply bg-white;
@apply shadow-md shadow-blue-400;
/* 4. REMOVIDO: As classes 'border-b border-white' saíram daqui */
/* 3. TRANSIÇÃO (Correto) */
@apply transition-all duration-700 ease-in-out;
@apply -z-10;
}
.navbar-scrolled {
@apply border-white shadow-md;
}
.navbar-scrolled::before {
@apply opacity-0;
@apply shadow-none;
}
.nav-bar>.navbar-items>a:hover,
.nav-bar>.navbar-items>a {
@apply transition-all duration-300 transform hover:scale-105;
@apply mr-7;
@apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
}
.nav-bar-logo {
/* Garante que a largura não ultrapasse 100% */
@apply rounded-md max-w-25 mr-10;
height: auto;
/* Altura proporcional à largura */
}
.navbar-items {
@apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10;
}
.profile-menu {
@apply absolute right-5;
@apply rounded-xl;
@apply max-w-7 max-h-7;
}
.profile-list-items {
/* 1. Posicionamento (Correto) */
@apply absolute top-full right-0 ml-4 mt-2;
@apply block w-full;
/* Adicionei mt-2 para descolar do ícone */
/* 2. Largura Fixa (Mais limpo) */
@apply w-56;
/* 3. Estilos do Contêiner (Profissional) */
@apply bg-white p-2 rounded-md shadow-xl;
/* Sombra mais forte */
@apply border border-gray-200;
/* 4. Divisórias Sutis entre os <li> */
@apply divide-y divide-gray-100;
}
.profile-link {
/* Você pode aplicar isso direto no <a> */
/* 1. FAZ O LINK PREENCHER O <li> */
@apply block w-full;
}
.profile-items {
/* 1. Limpeza (Classes antigas removidas) */
/* 2. Espaçamento Interno (Respiro) */
@apply px-4 py-2;
/* 3. Estilos de Texto */
@apply text-sm text-gray-700;
/* 4. Interatividade */
@apply hover:bg-blue-100 cursor-pointer;
/* 5. Transição Suave */
@apply transition-colors duration-150 ease-in-out;
/* 6. Cantos do Hover */
@apply rounded-md;
}
.nav-bar-logo img {
@apply w-full;
/* Largura 100% para se ajustar ao container */
height: auto;
/* Mantém a proporção original da imagem */
}
.nav-bar>.navbar-items>form>button {
@apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
}
/*End Header - Navbar */
}

149
resources/css/toast.css Normal file
View File

@ -0,0 +1,149 @@
@layer components {
/* ================================================================== */
/* Estilos Aprimorados do Componente TOAST */
/* resources/css/toast.css */
/* ================================================================== */
.toast-card {
@apply pointer-events-auto flex w-full max-w-sm items-start gap-x-3.5 rounded-xl bg-white shadow-xl ring-1 ring-black/5;
animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
backdrop-filter: blur(8px);
transition: all 0.2s ease;
}
.toast-card:hover {
@apply shadow-2xl ring-black/10;
transform: translateY(-2px);
}
@keyframes toast-slide-in {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Estilo do Toast de Sucesso (Verde) */
.toast-success {
@apply p-4 relative overflow-hidden;
}
.toast-success::before {
content: "";
@apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-green-400 to-green-600;
}
.toast-success .toast-icon-success {
@apply flex-shrink-0 text-green-600 transition-transform duration-200;
filter: drop-shadow(0 2px 4px rgb(34 197 94 / 0.2));
}
.toast-success:hover .toast-icon-success {
transform: scale(1.1) rotate(5deg);
}
.toast-success .toast-message {
@apply w-0 flex-1 text-sm font-semibold text-gray-900 leading-relaxed;
}
.toast-success .toast-close-button {
@apply inline-flex flex-shrink-0 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-200;
padding: 0.375rem;
}
.toast-success .toast-close-button:active {
transform: scale(0.95);
}
/* Estilo do Toast de Erro (Vermelho) */
.toast-error {
@apply p-4 relative overflow-hidden;
}
.toast-error::before {
content: "";
@apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-red-400 to-red-600;
}
.toast-error .toast-icon-error {
@apply flex-shrink-0 text-red-600 transition-transform duration-200;
filter: drop-shadow(0 2px 4px rgb(239 68 68 / 0.2));
}
.toast-error:hover .toast-icon-error {
transform: scale(1.1) rotate(-5deg);
}
.toast-error .toast-message {
@apply w-0 flex-1 text-sm font-semibold text-gray-900 leading-relaxed;
}
.toast-error .toast-close-button {
@apply inline-flex flex-shrink-0 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200;
padding: 0.375rem;
}
.toast-error .toast-close-button:active {
transform: scale(0.95);
}
/* Animação de saída */
.toast-exit {
animation: toast-slide-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes toast-slide-out {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}
/* Variantes Adicionais (Opcional) */
.toast-info {
@apply p-4 relative overflow-hidden;
}
.toast-info::before {
content: "";
@apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-400 to-blue-600;
}
.toast-warning {
@apply p-4 relative overflow-hidden;
}
.toast-warning::before {
content: "";
@apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-amber-400 to-amber-600;
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.toast-card {
@apply bg-white ring-black/2;
}
.toast-success .toast-message,
.toast-error .toast-message {
@apply text-black;
}
.toast-success .toast-close-button {
@apply bg-blue-900/30 text-blue-400 hover:bg-blue-900/50;
}
.toast-error .toast-close-button {
@apply bg-red-900/30 text-red-400 hover:bg-red-900/50;
}
}
}

157
resources/css/user-form-modal.css Normal file
View File

@ -0,0 +1,157 @@
@layer components {
/* Modal Overlay */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.35);
}
/* Modal Container */
.modal-container {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 32rem;
padding: 1.5rem;
}
/* Titles */
.modal-title {
font-size: 1.125rem;
font-weight: 500;
color: #111827;
}
/* Forms */
.form-wrapper {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Inputs */
.form-input {
display: block;
width: 100%;
border: 2px solid #e5e7eb;
border-radius: 0.375rem;
outline: none;
transition: all 0.3s ease-in-out;
}
.form-input:hover,
.form-input:focus {
border-color: #93c5fd;
}
/* Labels */
.form-label {
display: block;
font-size: 0.875rem;
color: #374151;
}
/* Errors */
.error-text {
color: #ef4444;
font-size: 0.75rem;
}
.error-box {
padding: 0.75rem;
background-color: #fee2e2;
color: #b91c1c;
border-radius: 0.375rem;
}
/* Buttons */
.btn-cancel {
background-color: #e5e7eb;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
}
.btn-submit {
background-color: #2563eb;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
}
.loading {
cursor: progress;
}
/* Select Component */
.select-wrapper {
position: relative;
margin-top: 0.25rem;
}
.select-button {
height: 2.5rem;
width: 10rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
padding: 0.5rem 2.5rem 0.5rem 0.75rem;
text-align: left;
position: relative;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.select-icon {
position: absolute;
right: 0.5rem;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
.select-svg {
width: 1.25rem;
height: 1.25rem;
color: #9ca3af;
}
.select-options {
position: absolute;
z-index: 10;
margin-top: 0.25rem;
width: 100%;
max-height: 15rem;
overflow-y: auto;
background-color: white;
border-radius: 0.375rem;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.select-option {
padding: 0.5rem 2.5rem;
cursor: pointer;
}
.select-option:hover {
background-color: #dbeafe;
}
.selected-option {
background-color: #eff6ff;
}
.form-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding-top: 1rem;
}
}