From 930a381e4a6beda611a87510e5b76a94d1c4c9af Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Tue, 11 Jul 2023 16:05:33 +0200
Subject: [PATCH 1/2] [DURACOM-177] gap-* classes

---
 src/styles/_global-styles.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 00fcb0f86f1..81d4fe0787a 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -268,6 +268,30 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
   vertical-align: middle;
 }
 
+/* Flexbox gap */
+
+.gap-0 { gap: 0; }
+.gap-1 { gap: calc(#{$spacer} * .25); }
+.gap-2 { gap: calc(#{$spacer} * .5); }
+.gap-3 { gap: #{$spacer}; }
+.gap-4 { gap: calc(#{$spacer} * 1.5); }
+.gap-5 { gap: calc(#{$spacer} * 3); }
+
+.gapx-0 { column-gap: 0; }
+.gapx-1 { column-gap: calc(#{$spacer} * .25); }
+.gapx-2 { column-gap: calc(#{$spacer} * .5); }
+.gapx-3 { column-gap: #{$spacer}; }
+.gapx-4 { column-gap: calc(#{$spacer} * 1.5); }
+.gapx-5 { column-gap: calc(#{$spacer} * 3); }
+
+.gapy-0 { row-gap: 0; }
+.gapy-1 { row-gap: calc(#{$spacer} * .25); }
+.gapy-2 { row-gap: calc(#{$spacer} * .5); }
+.gapy-3 { row-gap: #{$spacer}; }
+.gapy-4 { row-gap: calc(#{$spacer} * 1.5); }
+.gapy-5 { row-gap: calc(#{$spacer} * 3); }
+
+
 .pt-0\.5 {
   padding-top: 0.125rem !important;
 }

From a35629536e70f8d4b691fa95fd0b8342a8d717a1 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 6 Nov 2023 11:39:48 +0100
Subject: [PATCH 2/2] [DURACOM-177] Use gap-* classes on navbar buttons

---
 src/themes/dspace/app/header/header.component.html | 2 +-
 src/themes/dspace/app/header/header.component.scss | 6 ------
 src/themes/dspace/app/navbar/navbar.component.html | 2 +-
 src/themes/dspace/app/navbar/navbar.component.scss | 6 ------
 4 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 4b0046bc834..205abfd463a 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -5,7 +5,7 @@
         <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
     </div>
-    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
+    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center gapx-1">
       <ds-themed-search-navbar></ds-themed-search-navbar>
       <ds-themed-lang-switch></ds-themed-lang-switch>
       <ds-context-help-toggle></ds-context-help-toggle>
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
index 14c46a2316a..2fc857826f9 100644
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -24,9 +24,3 @@
     color: var(--ds-header-icon-color-hover);
   }
 }
-
-.navbar-buttons {
-  display: flex;
-  gap: calc(var(--bs-spacer) / 3);
-  align-items: center;
-}
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index c14671cf683..f2e231d46ce 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -15,7 +15,7 @@
         </li>
       </ul>
     </div>
-    <div class="navbar-buttons">
+    <div class="navbar-buttons d-flex align-items-center gapx-1">
       <ds-themed-search-navbar class="navbar-collapsed"></ds-themed-search-navbar>
       <ds-themed-lang-switch class="navbar-collapsed"></ds-themed-lang-switch>
       <ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index b4b7a02e502..300d1f419ad 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -59,9 +59,3 @@ a.navbar-brand img {
     }
   }
 }
-
-.navbar-buttons {
-  display: flex;
-  gap: calc(var(--bs-spacer) / 3);
-  align-items: center;
-}