From 4ec734d28cbbd16d6d80358d6c45272ad1e5486f Mon Sep 17 00:00:00 2001
From: Simon Malesys <simon.malesys@pasteur.fr>
Date: Thu, 17 Oct 2024 16:54:05 +0200
Subject: [PATCH] Add a half-spacing CSS variable

---
 src/client/components/AdvancedSearch.vue  | 2 +-
 src/client/components/AntibodiesTable.vue | 2 +-
 src/client/components/AppHeader.vue       | 2 +-
 src/client/components/SearchBar.vue       | 4 ++--
 src/client/globals.css                    | 3 ++-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/client/components/AdvancedSearch.vue b/src/client/components/AdvancedSearch.vue
index 713ceb08..0461d0e8 100644
--- a/src/client/components/AdvancedSearch.vue
+++ b/src/client/components/AdvancedSearch.vue
@@ -345,7 +345,7 @@ function removeFilter(filterChip: FilterChip): void {
   border-radius: var(--big-radius);
   border: 1px solid var(--white);
   cursor: pointer;
-  padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2);
+  padding: calc(var(--spacing) / 3) var(--half-spacing);
   transition: all 0.2s;
 
   &:hover {
diff --git a/src/client/components/AntibodiesTable.vue b/src/client/components/AntibodiesTable.vue
index 4dbd9627..63e55f73 100644
--- a/src/client/components/AntibodiesTable.vue
+++ b/src/client/components/AntibodiesTable.vue
@@ -337,7 +337,7 @@ function download(): void {
   display: flex;
   padding: var(--button-padding);
   align-items: center;
-  gap: calc(var(--spacing) / 2);
+  gap: var(--half-spacing);
 }
 
 .download-format * {
diff --git a/src/client/components/AppHeader.vue b/src/client/components/AppHeader.vue
index 25c6fe4e..4564dd7a 100644
--- a/src/client/components/AppHeader.vue
+++ b/src/client/components/AppHeader.vue
@@ -137,6 +137,6 @@ function showDownloads(): void {
 
 .archive-link::before {
   content: url("/absd-y.svg");
-  margin-right: calc(var(--spacing) / 2);
+  margin-right: var(--half-spacing);
 }
 </style>
diff --git a/src/client/components/SearchBar.vue b/src/client/components/SearchBar.vue
index daa4ca57..19265fa5 100644
--- a/src/client/components/SearchBar.vue
+++ b/src/client/components/SearchBar.vue
@@ -105,7 +105,7 @@ function fetchAntibodies (): void {
   border-bottom: 1px var(--white) solid;
   display: flex;
   gap: var(--spacing);
-  padding-bottom: calc(var(--spacing) / 2);
+  padding-bottom: var(--half-spacing);
   transition: border-bottom-color .5s;
 }
 
@@ -124,7 +124,7 @@ function fetchAntibodies (): void {
   color: var(--white);
   flex-grow: 1;
   font-size: var(--spacing);
-  padding: 0 calc(var(--spacing) / 2);
+  padding: 0 var(--half-spacing);
   min-width: 0;
   transition: background-color 0.1s;
 
diff --git a/src/client/globals.css b/src/client/globals.css
index 5e545d08..bf666502 100644
--- a/src/client/globals.css
+++ b/src/client/globals.css
@@ -18,6 +18,7 @@
   --white: hsl(0, 0%, 100%);
 
   --spacing: 20px;
+  --half-spacing: 10px;
   --spacing-table: 16px;
   --radius: 5px;
   --big-radius: 24px;
@@ -100,7 +101,7 @@ i {
   border: 1px solid transparent;
   color: var(--black);
   font-weight: bold;
-  padding: calc(var(--spacing) / 2) var(--spacing);
+  padding: var(--half-spacing) var(--spacing);
 
   &:hover {
     background-color: transparent;
-- 
GitLab