skatepark search block styles

skatepark/assets/theme.css

@@ -57,6 +57,7 @@
 
 .wp-block-file .wp-block-file__button {
 	text-transform: uppercase;
+	letter-spacing: 0.1em;
 }
 
 .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
@@ -72,6 +73,7 @@
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
 .wp-block-search .wp-block-search__button.wp-block-search__button {
 	text-transform: uppercase;
+	letter-spacing: 0.1em;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
@@ -89,6 +91,7 @@
 
 .wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
 	text-transform: uppercase;
+	letter-spacing: 0.1em;
 }
 
 .wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
@@ -109,6 +112,57 @@
 	background-color: var(--wp--custom--button--color--text);
 }
 
+.wp-block-search .wp-block-search__button:active, .wp-block-search .wp-block-search__button:focus {
+	outline-offset: -0.25em;
+}
+
+.wp-block-search .wp-block-search__button svg {
+	min-width: 2em;
+	min-height: 2em;
+}
+
+.wp-block-search .wp-block-search__button.has-icon {
+	--wp--custom--button--spacing--padding--left: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
+	--wp--custom--button--spacing--padding--right: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: 0;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	--wp--custom--button--color--text: var(--wp--custom--color--primary);
+	--wp--custom--button--color--background: var(--wp--custom--color--background);
+	position: relative;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button::before {
+	content: "";
+	height: 80%;
+	width: 1px;
+	background: var(--wp--custom--color--primary);
+	position: absolute;
+	left: 0;
+	top: 10%;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover {
+	--wp--custom--button--color--text: var(--wp--custom--color--background);
+	--wp--custom--button--color--background: var(--wp--custom--color--primary);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover.has-focus {
+	outline-color: var(--wp--custom--color--background);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
+	border-color: transparent;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus::before, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus::before {
+	left: calc( -1 * var(--wp--custom--button--border--width));
+}
+
 .pre-footer h3 {
 	text-transform: uppercase;
 }
@@ -172,7 +226,9 @@ h6 a,
 	        text-decoration-line: underline;
 }
 
-a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
+.wp-block-search__button:active, .wp-block-search__button:focus,
+a:not(.ab-item):not(.screen-reader-shortcut):active,
+a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	outline: 1px dotted var(--wp--custom--color--primary);
 	outline-offset: 0.1em;
 	text-decoration: none;

skatepark/sass/blocks/_buttons.scss

@@ -21,6 +21,7 @@
 }
 .wp-block-file .wp-block-file__button {
 	text-transform: uppercase;
+	letter-spacing: 0.1em;
 	@include skatepark_button_hover_styles;
 }	
 
@@ -28,6 +29,7 @@
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
 	.wp-block-search__button.wp-block-search__button {
 		text-transform: uppercase;
+		letter-spacing: 0.1em;
 		@include skatepark_button_hover_styles;
 	}
 }
@@ -35,6 +37,7 @@
 .wp-block-post-comments {
 	input[type="submit"], .reply a {
 		text-transform: uppercase;
+		letter-spacing: 0.1em;
 		@include skatepark_button_hover_styles;
 	}
 }

skatepark/sass/blocks/_search.scss

@@ -0,0 +1,52 @@
+.wp-block-search {
+	.wp-block-search__button {
+		&:active,
+		&:focus {
+			outline-offset: -0.25em;
+		}
+		svg {
+			min-width: 2em;
+			min-height: 2em;
+		}
+		&.has-icon {
+			--wp--custom--button--spacing--padding--left: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
+			--wp--custom--button--spacing--padding--right: calc( 1.75 * var(--wp--custom--button--spacing--padding--top) );
+		}
+	}
+	&.wp-block-search__button-inside {
+		.wp-block-search__inside-wrapper{
+			padding: 0;
+			.wp-block-search__button {
+				--wp--custom--button--color--text: var(--wp--custom--color--primary);
+				--wp--custom--button--color--background: var(--wp--custom--color--background);
+				position: relative;
+				&::before {
+					content: "";
+					height: 80%;
+					width: 1px;
+					background: var(--wp--custom--color--primary);
+					position: absolute;
+					left: 0;
+					top: 10%;
+				}
+				&:not(.has-background):not(.has-text-color) {
+					&:hover {
+						--wp--custom--button--color--text: var(--wp--custom--color--background);
+						--wp--custom--button--color--background: var(--wp--custom--color--primary);
+						&:focus,
+						&.has-focus {
+							outline-color: var(--wp--custom--color--background);
+						}
+					}
+					&:focus,
+					&.has-focus {
+						border-color: transparent;
+						&::before {
+							left: calc( -1 * var(--wp--custom--button--border--width) );
+						}
+					}
+				}
+			}
+		}
+	}
+}

skatepark/sass/elements/_links.scss

@@ -42,6 +42,7 @@ h6 a,
 }
 
 // Select the focus states of all non-wpadmin and screen reader links
+.wp-block-search__button,
 a:not(.ab-item):not(.screen-reader-shortcut) {
 	&:active,
 	&:focus {

skatepark/sass/theme.scss

@@ -2,5 +2,6 @@
 @import "../../blockbase/sass/base/mixins";
 @import "base/text";
 @import "blocks/buttons";
+@import "blocks/search";
 @import "block-patterns/pre-footer";
 @import "elements/links";