Merge pull request #273 from MITLibraries/use-61-morelink

Added more search options link below search box

Author: djanelle-mit

app/assets/stylesheets/partials/_search.scss

@@ -2,6 +2,19 @@
 // #SEARCH BITS
 // ------------------------
 
+/* Shared link styling */
+@mixin searchUnderlinedLinks {
+  color: $color-text-oncolor;
+  font-weight: $fw-medium;
+  text-decoration: underline;
+  text-decoration-color: $color-red-500;
+  text-underline-offset: 0.5rem;  
+
+  &:hover {
+    color: $color-red-400;
+  }
+}
+
 /* New USE UI search styles */
 #search-form {
   margin: 0;
@@ -219,20 +232,16 @@
   a {
     padding: 12px 20px 16px;
     background-color: transparent;
-    color: $color-text-oncolor;
     display: inline-block;
-    font-weight: $fw-medium;
-
     border: 2px solid transparent;
-    border-bottom: 0;    
+    border-bottom: 0;  
 
-    text-decoration: underline;
-    text-decoration-color: $color-red-500;
-    text-underline-offset: 0.5rem;
+    @include searchUnderlinedLinks;
 
     &:hover {
       border-color: $color-gray-700;
       background-color: $color-gray-900;
+      color: $color-text-oncolor;
     }
 
     &.active {
@@ -249,4 +258,19 @@
 
   }
 
+}
+
+/* ============== */
+/* Search Actions */
+/* ============== */
+
+.search-actions {
+  padding-top: 16px;
+  padding-bottom: 8px;
+  display: flex;
+  gap: 24px;
+
+  a {
+    @include searchUnderlinedLinks();
+  }
 }

app/assets/stylesheets/partials/_variables.scss

@@ -16,6 +16,8 @@ $color-gray-950: #1a1a1a;
 $color-gray-975: #191919;
 
 // RED
+$color-red-300: #FF6666;
+$color-red-400: #FF3333;
 $color-red-500: #ff0000;
 $color-red-600: #e50000;
 

app/views/search/_form.html.erb

@@ -5,6 +5,9 @@
     <input id="tab-to-target" type="hidden" name="tab" value="<%= @active_tab %>">
     <button type="submit" class="btn button-primary">Search</button>
   </div>
+  <div class="search-actions">
+    <a href="https://libraries.mit.edu/search/">More search options</a>
+  </div>
 </form>
 
 <% if Feature.enabled?(:boolean_picker) %>