style search component on desktop

Co-authored-by: Steve Smodish <[email protected]>
grammerjam · Jan 13, 2025 · 616dd28 · 616dd28
1 parent fd9a0a1
commit 616dd28
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/base-client/src/app/app.component.scss b/base-client/src/app/app.component.scss
@@ -34,7 +34,7 @@ main {
   }
 
   @media (min-width: $breakpoint-desktop) {
-    margin-top: 64px;
+    margin-top: 32px;
     max-width: calc(100vw - 191px);
   }
 }
diff --git a/base-client/src/app/components/search/search.component.scss b/base-client/src/app/components/search/search.component.scss
@@ -2,13 +2,17 @@
 
 .search-container {
   background-color: $mango-semi-dark-blue;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
+  box-shadow: 1px 0px 3px rgba(0, 0, 0, .2);
   border-radius: 5px;
   padding: 2px;
   margin-bottom: 24px;
 
   @media (min-width: $breakpoint-tablet) {
-    box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
+    box-shadow: 3px 0px 3px rgba(0, 0, 0, .2);
+  }
+
+  @media (min-width: $breakpoint-desktop) {
+    padding: 4px;
   }
 }
 
@@ -23,16 +27,27 @@
     margin-left: 2px;
     margin-bottom: 2px;
   }
+
+  @media (min-width: $breakpoint-desktop) {
+    height: 32px;
+    width: 32px;
+  }
 }
 
 .search-box {
   all: unset;
   width: calc(100% - 28px);
   text-align: center;
   font-size: 16px;
+  margin-top: 2px;
 
   @media (min-width: $breakpoint-tablet) {
     font-size: 24px;
     width: calc(100% - 34px);
   }
+
+  @media (min-width: $breakpoint-desktop) {
+    width: calc(100% - 42px);
+    margin-top: 4px;
+  }
 }