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