diff --git a/static/css/components.css b/static/css/components.css new file mode 100644 index 0000000..0e3ef01 --- /dev/null +++ b/static/css/components.css @@ -0,0 +1,164 @@ +/* Variáveis globais */ +:root { + --table-header-bg: #d8dde2; + --table-hover-bg: rgba(0, 0, 0, 0.02); + --border-color: #dee2e6; +} + +/* Tabelas */ +.table-container { + background: #fff; + border-radius: 0.5rem; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + margin-bottom: 1.5rem; +} + +.table { + margin-bottom: 0; +} + +.table thead { + background-color: var(--table-header-bg) !important; +} + +.table thead th { + border-bottom: none; + font-weight: 600; + padding: 1rem; + white-space: nowrap; +} + +.table tbody td { + padding: 1rem; + vertical-align: middle; +} + +.table-hover tbody tr:hover { + background-color: var(--table-hover-bg); +} + +/* Botões de ação */ +.btn-group-actions { + display: flex; + gap: 0.5rem; + justify-content: flex-end; +} + +.btn-group-actions .btn { + padding: 0.375rem 0.75rem; + font-size: 0.875rem; +} + +/* Botões padrão */ +.btn-outline-primary { + color: #0d6efd; + border-color: #0d6efd; + background-color: transparent; +} + +.btn-outline-primary:hover { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} + +/* Cabeçalho de listagem */ +.list-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; +} + +.list-title { + font-size: 1.5rem; + font-weight: 600; + margin: 0; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.list-actions { + display: flex; + gap: 0.5rem; +} + +/* Barra de pesquisa e filtros */ +.search-bar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; + gap: 1rem; +} + +.search-input-group { + flex: 1; + max-width: 500px; +} + +.search-input-group .input-group-text { + background-color: #f8f9fa; + border-right: none; +} + +.search-input-group .form-control { + border-left: none; +} + +.search-input-group .form-control:focus { + box-shadow: none; + border-color: #dee2e6; +} + +/* Badges */ +.badge { + padding: 0.5em 0.75em; + font-weight: 500; +} + +.badge.bg-success { + background-color: #198754 !important; +} + +.badge.bg-secondary { + background-color: #6c757d !important; +} + +/* Paginação */ +.pagination-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + border-top: 1px solid var(--border-color); +} + +.pagination { + margin: 0; +} + +.page-link { + padding: 0.375rem 0.75rem; +} + +/* Responsividade */ +@media (max-width: 768px) { + .search-bar { + flex-direction: column; + align-items: stretch; + } + + .search-input-group { + max-width: 100%; + } + + .list-actions { + flex-wrap: wrap; + } + + .btn-group-actions { + justify-content: center; + } +} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 1bd0516..f3d5b7c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,6 +9,8 @@ + + {% block extra_css %}{% endblock %} diff --git a/templates/listar_militantes.html b/templates/listar_militantes.html index b0e911b..5ee67a5 100644 --- a/templates/listar_militantes.html +++ b/templates/listar_militantes.html @@ -3,6 +3,7 @@ {% block title %}Militantes{% endblock %} {% block content %} +<<<<<<< HEAD