68 lines
2.1 KiB
CSS
68 lines
2.1 KiB
CSS
@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;
|
|
}
|
|
} |