feat(search): Add search suggestions style #296 from eea/search-sugge…

…stions
eea · Feb 9, 2023 · 3b0c956 · 3b0c956
2 parents 2561c42 + 190c9f5
commit 3b0c956
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less
@@ -333,22 +333,42 @@
 #search-box {
   position: @searchBoxPosition;
   z-index: 99999;
+  display: flex;
   overflow: auto;
   width: 100%;
   height: @mobilePopUpHeight;
+  align-items: @searchBoxAlignItems;
   background: @searchBoxBackgroundGradient;
 
   .ui.container {
-    height: 100%;
-    align-items: baseline;
+    height: auto;
+  }
+
+  .search-suggestions {
+    margin-top: @searchBoxSuggestionsMarginTop;
+    color: @searchBoxSuggestionsTextColor;
+
+    .ui.list {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: @searchBoxSuggestionsMarginTop;
+      column-gap: @searchBoxSuggestionsColumnGap;
+      row-gap: @searchBoxSuggestionsRowGap;
+
+      .item {
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+      }
+    }
   }
 
   .wrapper {
     position: relative;
     display: flex;
     width: 100%;
     flex-direction: column;
-    margin: @mobilePopupMarginTop 0;
+    margin: @searchBoxMobilePopupMarginTop 0;
     gap: @searchBoxWrapperGap;
 
     .action {
@@ -368,9 +388,14 @@
 
     .ui.container {
       display: flex;
+      align-items: @searchBoxFullSearchAlignItems;
       justify-content: @searchBoxFullSearchJustifyContent;
       gap: @searchBoxFullSearchGap;
 
+      .ui.button {
+        margin: 0;
+      }
+
       @media only screen and (max-width: @tabletBreakpoint) {
         flex-direction: @tabletSearchBoxFullSearchFlexDirection;
         align-items: @tabletSearchBoxFullSearchAlignItems;
@@ -546,7 +571,7 @@
     height: @tabletPopUpHeight;
 
     .wrapper {
-      margin: @tabletPopupMarginTop 0;
+      margin: @searchBoxTabletPopupMarginTop 0;
     }
   }
 }
@@ -658,7 +683,7 @@
     height: @computerPopUpHeight;
 
     .wrapper {
-      margin: @computerPopupMarginTop 0;
+      margin: @searchBoxComputerPopupMarginTop 0;
 
       .action {
         justify-content: flex-end;

diff --git a/theme/themes/eea/extras/header.variables b/theme/themes/eea/extras/header.variables
@@ -221,6 +221,7 @@
 @searchBoxPosition: absolute;
 @searchBoxBackgroundGradient : linear-gradient(13.69deg, @blue-5 1.17%, @secondaryColor 80%);
 @searchBoxWrapperGap : 75px;
+@searchBoxAlignItems: center;
 @searchBoxFullSearchBackground: rgba(255, 255, 255, 0.1);
 @searchBoxFullSearchBoxShadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
 @searchBoxFullSearchBorder: 1px solid @white;
@@ -229,9 +230,17 @@
 @searchBoxFullSearchJustifyContent: center;
 @searchBoxFullSearchGap: 1.5rem;
 @searchBoxFullSearchPadding: 2em 0;
+@searchBoxFullSearchAlignItems: center;
 @tabletSearchBoxFullSearchFlexDirection: column;
 @tabletSearchBoxFullSearchAlignItems: center;
 @tabletSearchBoxFullSearchTextAlign: center;
+@searchBoxSuggestionsMarginTop: 2em;
+@searchBoxSuggestionsTextColor: @white;
+@searchBoxSuggestionsColumnGap: 2em; 
+@searchBoxSuggestionsRowGap: 1em;
+@searchBoxMobilePopupMarginTop: 0.5em;
+@searchBoxTabletPopupMarginTop: 1em;
+@searchBoxComputerPopupMarginTop: 1.5em;
 
 /* Custom shadows for dropdowns */
 @shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));