/** * DENSITY MODES - PharmData Design System v3.0 * * Modos de densidade para diferentes perfis de usuário: * - Default: Espaçamento padrão, boa legibilidade * - Compact: Menos espaçamento, mais dados na tela (power users) * - Comfortable: Mais espaçamento, melhor para touch/mobile * * USO: * - Adicione classe .density-compact ou .density-comfortable ao ou container * - Ou use data-density="compact" | "comfortable" */ /* =================== CSS CUSTOM PROPERTIES =================== */ :root { /* Default density */ --density-scale: 1; /* Spacing multipliers */ --density-spacing-xs: calc(0.25rem * var(--density-scale)); --density-spacing-sm: calc(0.5rem * var(--density-scale)); --density-spacing-md: calc(0.75rem * var(--density-scale)); --density-spacing-lg: calc(1rem * var(--density-scale)); --density-spacing-xl: calc(1.5rem * var(--density-scale)); /* Component sizes */ --density-input-height: calc(2.75rem * var(--density-scale)); --density-button-height: calc(2.5rem * var(--density-scale)); --density-row-height: calc(3rem * var(--density-scale)); --density-card-padding: calc(1.25rem * var(--density-scale)); /* Typography scale */ --density-font-base: 1rem; --density-line-height: 1.5; } /* =================== COMPACT MODE Para power users que preferem densidade alta =================== */ .density-compact, [data-density="compact"] { --density-scale: 0.85; --density-font-base: 0.875rem; --density-line-height: 1.4; } /* Compact adjustments */ .density-compact, [data-density="compact"] { font-size: var(--density-font-base); line-height: var(--density-line-height); } /* Forms in compact mode */ .density-compact .form-input, .density-compact .form-select, .density-compact .form-textarea, [data-density="compact"] .form-input, [data-density="compact"] .form-select, [data-density="compact"] .form-textarea { padding: 0.4rem 0.65rem; font-size: 0.8125rem; min-height: 2rem; } .density-compact .form-label, [data-density="compact"] .form-label { font-size: 0.75rem; margin-bottom: 0.25rem; } .density-compact .form-group, [data-density="compact"] .form-group { margin-bottom: 0.75rem; } /* Buttons in compact mode */ .density-compact .btn, .density-compact button, [data-density="compact"] .btn, [data-density="compact"] button { padding: 0.35rem 0.75rem; font-size: 0.8125rem; min-height: 1.875rem; } .density-compact .btn-sm, [data-density="compact"] .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* Drops in compact mode */ .density-compact .drop, [data-density="compact"] .drop { padding: 0.25rem 0.5rem; font-size: 0.6875rem; gap: 0.25rem; } .density-compact .drop::before, [data-density="compact"] .drop::before { font-size: 0.75em; margin-right: 0.2rem; } .density-compact .drop-md, [data-density="compact"] .drop-md { padding: 0.3rem 0.6rem; font-size: 0.75rem; } /* Tables in compact mode */ .density-compact table th, .density-compact table td, [data-density="compact"] table th, [data-density="compact"] table td { padding: 0.4rem 0.6rem; font-size: 0.8125rem; } .density-compact .ds-table th, .density-compact .ds-table td, [data-density="compact"] .ds-table th, [data-density="compact"] .ds-table td { padding: 0.4rem 0.6rem; } /* Cards in compact mode */ .density-compact .ds-card, .density-compact .card, [data-density="compact"] .ds-card, [data-density="compact"] .card { padding: 0.75rem; } .density-compact .card-header, [data-density="compact"] .card-header { padding: 0.5rem 0.75rem; } .density-compact .card-body, [data-density="compact"] .card-body { padding: 0.75rem; } /* Modals in compact mode */ .density-compact .modal-content, [data-density="compact"] .modal-content { padding: 1rem; } .density-compact .modal-header, [data-density="compact"] .modal-header { padding: 0.75rem 1rem; } .density-compact .modal-body, [data-density="compact"] .modal-body { padding: 0.75rem 1rem; } /* Alerts in compact mode */ .density-compact .alert, [data-density="compact"] .alert { padding: 0.5rem 0.75rem; font-size: 0.8125rem; } /* Breadcrumbs in compact mode */ .density-compact .breadcrumb, [data-density="compact"] .breadcrumb { font-size: 0.75rem; gap: 0.35rem; min-height: 1.75rem; } /* Tabs in compact mode */ .density-compact .tab-item, [data-density="compact"] .tab-item { padding: 0.35rem 0.75rem; font-size: 0.8125rem; } /* Pagination in compact mode */ .density-compact .pagination-item, [data-density="compact"] .pagination-item { padding: 0.25rem 0.5rem; font-size: 0.75rem; min-width: 1.75rem; min-height: 1.75rem; } /* Lists in compact mode */ .density-compact .list-item, .density-compact li, [data-density="compact"] .list-item, [data-density="compact"] li { padding: 0.35rem 0; } /* Section spacing */ .density-compact section, .density-compact .section, [data-density="compact"] section, [data-density="compact"] .section { margin-bottom: 1rem; } .density-compact h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .density-compact h2 { font-size: 1.25rem; margin-bottom: 0.4rem; } .density-compact h3 { font-size: 1rem; margin-bottom: 0.35rem; } .density-compact h4 { font-size: 0.875rem; margin-bottom: 0.3rem; } [data-density="compact"] h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } [data-density="compact"] h2 { font-size: 1.25rem; margin-bottom: 0.4rem; } [data-density="compact"] h3 { font-size: 1rem; margin-bottom: 0.35rem; } [data-density="compact"] h4 { font-size: 0.875rem; margin-bottom: 0.3rem; } /* =================== COMFORTABLE MODE Para melhor legibilidade/touch =================== */ .density-comfortable, [data-density="comfortable"] { --density-scale: 1.15; --density-font-base: 1.0625rem; --density-line-height: 1.6; } .density-comfortable, [data-density="comfortable"] { font-size: var(--density-font-base); line-height: var(--density-line-height); } /* Forms in comfortable mode */ .density-comfortable .form-input, .density-comfortable .form-select, [data-density="comfortable"] .form-input, [data-density="comfortable"] .form-select { padding: 0.75rem 1rem; font-size: 1rem; min-height: 3rem; } .density-comfortable .form-label, [data-density="comfortable"] .form-label { font-size: 0.9375rem; margin-bottom: 0.5rem; } /* Buttons in comfortable mode */ .density-comfortable .btn, .density-comfortable button, [data-density="comfortable"] .btn, [data-density="comfortable"] button { padding: 0.75rem 1.25rem; font-size: 1rem; min-height: 3rem; } /* =================== DENSITY TOGGLE COMPONENT =================== */ .density-toggle { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--arctic-mist); border-radius: 0.5rem; border: 1px solid var(--soft-arctic); } .density-toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 0.625rem; font-size: 0.75rem; font-weight: 500; color: var(--soft-steel); background: transparent; border: none; border-radius: 0.375rem; cursor: pointer; transition: all 0.15s ease; } .density-toggle-btn:hover { color: var(--graphite-depth); background: rgba(183, 228, 213, 0.2); } .density-toggle-btn.active { color: var(--cloud); background: var(--teal-intense); } .density-toggle-btn[data-density="compact"]::before { content: '▪'; margin-right: 0.25rem; } .density-toggle-btn[data-density="default"]::before { content: '◼'; margin-right: 0.25rem; } .density-toggle-btn[data-density="comfortable"]::before { content: '⬛'; margin-right: 0.25rem; } /* Dark mode */ :root.dark-mode .density-toggle, [data-theme="dark"] .density-toggle { background: var(--soft-arctic); border-color: rgba(183, 228, 213, 0.1); } :root.dark-mode .density-toggle-btn:hover, [data-theme="dark"] .density-toggle-btn:hover { background: rgba(183, 228, 213, 0.1); } /* =================== KEYBOARD INDICATOR Mostra atalho de teclado ativo =================== */ .density-compact .kbd-indicator, [data-density="compact"] .kbd-indicator { font-size: 0.625rem; padding: 0.125rem 0.25rem; }