From c1c683f01e4e5bf4eeefb6b74a938d8d901b2aac Mon Sep 17 00:00:00 2001 From: Simon Malesys <simon.malesys@pasteur.fr> Date: Tue, 15 Oct 2024 11:50:35 +0200 Subject: [PATCH] Turn checkboxes into chips --- src/client/components/AdvancedSearch.vue | 18 ++++++++++++++---- src/client/components/AntibodiesTable.vue | 2 +- src/client/components/TheAntibodyPage.vue | 2 +- src/client/globals.css | 1 + 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/client/components/AdvancedSearch.vue b/src/client/components/AdvancedSearch.vue index 773248e4..8b59449f 100644 --- a/src/client/components/AdvancedSearch.vue +++ b/src/client/components/AdvancedSearch.vue @@ -227,7 +227,7 @@ function removeFilter (filterChip: FilterChip): void { } .filter-chip { - border-radius: 16px; + border-radius: var(--big-radius); border: 1px solid var(--primary); color: var(--primary); padding-left: 8px; @@ -260,25 +260,35 @@ function removeFilter (filterChip: FilterChip): void { flex-flow: row wrap; gap: var(--spacing); padding-left: var(--spacing); + padding-bottom: var(--spacing); max-width: 800px; } .checkbox { display: flex; - gap: calc(var(--spacing) / 2); + transition: color 0.1s; &:hover { color: var(--primary); } } -.checkbox input, +.checkbox input { + display: none; +} + .checkbox label { cursor: pointer; + border: 1px solid inherit; + border-radius: var(--big-radius); + padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2); + transition: all 0.2s; } .checkbox input:checked+label { - color: var(--primary); + background-color: var(--primary); + border-color: var(--primary); + color: var(--black); } .advanced-search-dialog footer { diff --git a/src/client/components/AntibodiesTable.vue b/src/client/components/AntibodiesTable.vue index 79e33d4d..4dbd9627 100644 --- a/src/client/components/AntibodiesTable.vue +++ b/src/client/components/AntibodiesTable.vue @@ -351,7 +351,7 @@ function download(): void { .loader { height: 23px; width: 23px; - border-radius: 50%; + border-radius: var(--big-radius); display: inline-block; border-top: 3px solid #FFF; border-right: 3px solid transparent; diff --git a/src/client/components/TheAntibodyPage.vue b/src/client/components/TheAntibodyPage.vue index 3425fc9d..a03e5772 100644 --- a/src/client/components/TheAntibodyPage.vue +++ b/src/client/components/TheAntibodyPage.vue @@ -140,7 +140,7 @@ nav { .doc-link { border: 1px solid; border-color: inherit; - border-radius: 50%; + border-radius: var(--big-radius); margin-left: 7px; padding: 0 7px; } diff --git a/src/client/globals.css b/src/client/globals.css index c8a7d569..3383f5f0 100644 --- a/src/client/globals.css +++ b/src/client/globals.css @@ -20,6 +20,7 @@ --spacing: 20px; --spacing-table: 16px; --radius: 5px; + --big-radius: 24px; --button-padding: 0.5em 0.75em; -- GitLab