search bar styles started

spearhead/assets/sass/_archive.scss

@@ -0,0 +1,11 @@
+.archive {
+
+    .page-header {
+        line-height: 56px;
+        margin-bottom: 16px;
+    }
+
+    .site-main > article:first-of-type {
+        margin-top: 0;
+    }
+}

spearhead/assets/sass/_block-extends.scss

@@ -1,3 +1,4 @@
 // Import the block extends
+@import "block-extends/search";
 @import "block-extends/latest-posts";
 @import "block-extends/related-posts";

spearhead/assets/sass/block-extends/_search.scss

@@ -0,0 +1,39 @@
+.wp-block-search {
+
+    &.wp-block-search__icon-button {
+
+        .wp-block-search__inside-wrapper{
+            flex-direction: row-reverse;
+        }
+
+        .wp-block-search__input {
+            padding: 0 0 0 21px;
+        }
+
+        .wp-block-search__button { 
+            &.has-icon {
+                margin-left: 0;
+                background: transparent;
+                border: none;
+            }
+        }
+    }
+
+    &.wp-block-search__button-inside {
+        .wp-block-search__inside-wrapper {
+            flex-direction: row-reverse;
+            border: none;
+            border-bottom: var(--form--border-width) solid var(--form--border-color);
+            @extend %input-search-style;
+        }
+    }
+
+    .wp-block-search__input {
+        @extend %input-search-style;
+    }
+}
+
+%input-search-style {
+    background: transparent;
+    color: var(--global--color-secondary);
+}

spearhead/assets/sass/style.scss

@@ -19,6 +19,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 @import "posts-and-pages";
 @import "text";
 @import "header";
+@import "archive";
 @import "block-extends";
 @import "search";
 @import "meta";

spearhead/style-rtl.css

@@ -287,6 +287,40 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.archive .page-header {
+	line-height: 56px;
+	margin-bottom: 16px;
+}
+
+.archive .site-main > article:first-of-type {
+	margin-top: 0;
+}
+
+.wp-block-search.wp-block-search__icon-button .wp-block-search__inside-wrapper {
+	flex-direction: row-reverse;
+}
+
+.wp-block-search.wp-block-search__icon-button .wp-block-search__input {
+	padding: 0 21px 0 0;
+}
+
+.wp-block-search.wp-block-search__icon-button .wp-block-search__button.has-icon {
+	margin-right: 0;
+	background: transparent;
+	border: none;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	flex-direction: row-reverse;
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__input {
+	background: transparent;
+	color: var(--global--color-secondary);
+}
+
 .wp-block-latest-posts > li > a {
 	color: var(--global--color-foreground);
 }

spearhead/style.css

@@ -287,6 +287,40 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.archive .page-header {
+	line-height: 56px;
+	margin-bottom: 16px;
+}
+
+.archive .site-main > article:first-of-type {
+	margin-top: 0;
+}
+
+.wp-block-search.wp-block-search__icon-button .wp-block-search__inside-wrapper {
+	flex-direction: row-reverse;
+}
+
+.wp-block-search.wp-block-search__icon-button .wp-block-search__input {
+	padding: 0 0 0 21px;
+}
+
+.wp-block-search.wp-block-search__icon-button .wp-block-search__button.has-icon {
+	margin-left: 0;
+	background: transparent;
+	border: none;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	flex-direction: row-reverse;
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__input {
+	background: transparent;
+	color: var(--global--color-secondary);
+}
+
 .wp-block-latest-posts > li > a {
 	color: var(--global--color-foreground);
 }