search-box styled move to partial

FitzwilliamMuseum · Apr 16, 2024 · 4946f3e · 4946f3e
1 parent 2c0bbd1
commit 4946f3e
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 62 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/css/fitzwilliam.css b/public/css/fitzwilliam.css
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
     "/js/app.js": "/js/app.js?id=eecde85cfe44f6cc7f87cc11ead0e9ca",
-    "/css/app.css": "/css/app.css?id=15927874800c41f21165f2ea453f91aa",
-    "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=713936cbf33c1636377a80332ba87c3c"
+    "/css/app.css": "/css/app.css?id=236199c485cbdc8d4ecd50234e05d108",
+    "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=8bfefb0cfc5878b62bf1019b9d58f230"
 }
diff --git a/resources/css/site.css b/resources/css/site.css
@@ -1074,61 +1074,4 @@ a.text-center.btn.btn-outline-light.btn__book {
     background: transparent;
 }
 
-#main-search {
-    background: black;
-    border: none;
-    display: flex;
-    position: absolute;
-    left: 0;
-    margin: 0;
-    min-height: 100%;
-    padding: 40px 16px;
-    width: 100%;
-}
 
-.main-search-wrapper {
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    max-width: 1290px;
-    width: 100%;
-}
-
-.main-search-label {
-    font-size: 46px;
-    font-weight: 500;
-    color: white;
-    margin-bottom: 24px;
-}
-
-.main-search-label span {
-    display: none;
-
-    @media screen and (min-width: 500px) {
-        display: inline;
-    }
-}
-
-input#query.main-search-input {
-    padding: 26.5px 0 26.5px 20px;
-    border: 1px solid white;
-    background: transparent !important;
-    color: white !important;
-    font-size: 18px;
-    width: 100%;
-}
-
-input#query.main-search-input::placeholder {
-    color: white !important;
-}
-
-.main-search-btn {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-}
-
-.collapsing {
-    transition: none;
-}
diff --git a/resources/sass/_nav.scss b/resources/sass/_nav.scss
@@ -0,0 +1,58 @@
+#main-search {
+    background: black;
+    border: none;
+    display: flex;
+    position: absolute;
+    left: 0;
+    margin: 0;
+    min-height: 100%;
+    padding: 40px 16px;
+    width: 100%;
+}
+
+.main-search-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 1290px;
+    width: 100%;
+}
+
+.main-search-label {
+    font-size: 46px;
+    font-weight: 500;
+    color: white;
+    margin-bottom: 24px;
+}
+
+.main-search-label span {
+    display: none;
+
+    @media screen and (min-width: 500px) {
+        display: inline;
+    }
+}
+
+.main-search-input {
+    padding: 26.5px 0 26.5px 20px;
+    border: 1px solid white;
+    background: transparent !important;
+    color: white !important;
+    font-size: 18px;
+    width: 100%;
+}
+
+.main-search-input::placeholder {
+    color: white !important;
+}
+
+.main-search-btn {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+}
+
+.collapsing {
+    transition: none;
+}
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -6,6 +6,7 @@
 @import "~bootstrap/scss/utilities/api";
 @import "extend-bootstrap";
 @import "support";
+@import "_nav";
 
 @import 'support-us/_support-us';
 @import "exhibition/exhibition";
diff --git a/resources/views/includes/structure/nav.blade.php b/resources/views/includes/structure/nav.blade.php
@@ -135,7 +135,7 @@ class="visually-hidden">(current)</span></a>
                                 <span class="visually-hidden">Search the Fitzwilliam</span>
                                 <div class="main-search-wrapper">
                                     <label class="main-search-label" for="query">Search <span>the Fitzwilliam</span></label>
-                                    <div class="search-container" style="position: relative;">
+                                    <div style="position: relative;">
                                         <input id="query" name="query" type="text" class="main-search-input" placeholder="What are you looking for?"
                                         required value="{{ old('query') }}" aria-label="Your query">
                                         <button class="main-search-btn" type="submit" id="searchButton" aria-label="Submit your search" style="background: transparent; border: none;">