Toolkit: Add search bar styles

toolkit/scss/toolkit.scss

@@ -48,6 +48,38 @@ img {
     object-fit: contain;
 }
 
+.toolkit-search {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    border-radius: 3px;
+
+    .toolkit-input {
+        width: 100%;
+        height: 40px;
+        padding: 0;
+
+        .toolkit-input--input {
+            height: 40px;
+            border-radius: 3px 0 0 3px;
+            border-right: 0;
+
+            &:hover,
+            &:active,
+            &:focus {
+                border-right: 0;
+            }
+        }
+    }
+
+    .toolkit-button {
+        border-radius: 0 3px 3px 0;
+        height: 40px;
+        border-left: 0;
+        box-shadow: 0;
+    }
+}
+
 .toolkit-thumbnails {
     display: flex;
     flex-wrap: wrap;
@@ -560,10 +592,18 @@ img {
     margin-bottom: 32px;
     overflow: hidden;
 
+    > div:first-child {
+        border-top: 0;
+    }
+
     &.toolkit-dark {
         background-color: $dark-body;
         color: $dark-text;
 
+        > div:first-child {
+            border-top: 0;
+        }
+
         .toolkit-card--title {
             background-color: $dark-heading;
         }
@@ -638,7 +678,7 @@ img {
         color: $white;
 
         &:hover {
-            border-color: $primary-border-hover;
+            border-color: $primary-border;
             background-color: $primary-hover;
         }
     }
@@ -860,6 +900,10 @@ img {
         justify-content: space-around;
         align-items: center;
     }
+
+    .toolkit-search .toolkit-button {
+        min-width: 90px;
+    }
 }
 
 @media(max-width: 700px) {

toolkit/templates/search.rs.html

@@ -0,0 +1,9 @@
+@use crate::templates::{text_input, button_group};
+@use crate::{TextInput, Button};
+
+@(text: TextInput, btn: Button)
+
+<div class="toolkit-search">
+    @:text_input(&text)
+    @:button_group(&[btn])
+</div>