custom styles for Alves

alves/sass/_extra-child-theme.scss

@@ -575,3 +575,22 @@ body:not(.fse-enabled) {
 
 // Updates the Mobile Navigation to be next to the site title.
 @import "../../varia/sass/components/header/_site-mobile-nav-side";
+
+/**
+ * Search block
+ */
+
+.wp-block-search {
+	&.wp-block-search__button-inside {
+		.wp-block-search__inside-wrapper{
+			border-radius: #{map-deep-get($config-button, "border-radius")};
+		}
+		.wp-block-search__input {
+			background: transparent;
+		}
+	}
+	.wp-block-search__input {
+		margin-right: calc( .1 * #{map-deep-get($config-button, "padding", "horizontal")} );
+		border-radius: #{map-deep-get($config-button, "border-radius")};
+	}
+} 

alves/style-editor.css

@@ -948,7 +948,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
-	padding: 16px 16px;
+	padding: 16px 48px;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
@@ -965,7 +965,7 @@ p.has-background:not(.has-background-background-color) a {
 	border-radius: 3px;
 	padding: 16px;
 	font-size: 1.25rem;
-	line-height: 1.25;
+	line-height: 1.25rem;
 	font-family: "Karla", Arial, sans-serif;
 	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	max-width: inherit;
@@ -983,15 +983,11 @@ p.has-background:not(.has-background-background-color) a {
 	box-shadow: none;
 }
 
-.wp-block-search .wp-block-search__button.wp-block-search__button.wp-block-search__button {
-	padding: 16px 48px;
-}
-
 .wp-block-search .wp-block-search__button.has-icon {
 	transform: scaleX(-1);
 	padding: 0;
-	min-width: calc(2* 16px + 1.25rem);
-	min-height: calc(2* 16px + 1.25rem);
+	min-width: calc(2* 16px + 1.25rem + 4px);
+	min-height: calc(2* 16px + 1.25rem + 4px);
 }
 
 .wp-block-search .wp-block-search__button.has-icon svg {

alves/style-rtl.css

@@ -2245,7 +2245,7 @@ p.has-background {
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
-	padding: 16px 16px;
+	padding: 16px 48px;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
@@ -2262,7 +2262,7 @@ p.has-background {
 	border-radius: 3px;
 	padding: 16px;
 	font-size: 1.25rem;
-	line-height: 1.25;
+	line-height: 1.25rem;
 	font-family: "Karla", Arial, sans-serif;
 	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	max-width: inherit;
@@ -2280,15 +2280,11 @@ p.has-background {
 	box-shadow: none;
 }
 
-.wp-block-search .wp-block-search__button.wp-block-search__button.wp-block-search__button {
-	padding: 16px 48px;
-}
-
 .wp-block-search .wp-block-search__button.has-icon {
 	transform: scaleX(-1);
 	padding: 0;
-	min-width: calc(2* 16px + 1.25rem);
-	min-height: calc(2* 16px + 1.25rem);
+	min-width: calc(2* 16px + 1.25rem + 4px);
+	min-height: calc(2* 16px + 1.25rem + 4px);
 }
 
 .wp-block-search .wp-block-search__button.has-icon svg {
@@ -4669,6 +4665,22 @@ body:not(.fse-enabled) #masthead {
 	}
 }
 
+/**
+ * Search block
+ */
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	border-radius: 160px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
+	background: transparent;
+}
+
+.wp-block-search .wp-block-search__input {
+	margin-left: calc( .1 * 48px);
+	border-radius: 160px;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

alves/style.css

@@ -2245,7 +2245,7 @@ p.has-background {
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
-	padding: 16px 16px;
+	padding: 16px 48px;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
@@ -2262,7 +2262,7 @@ p.has-background {
 	border-radius: 3px;
 	padding: 16px;
 	font-size: 1.25rem;
-	line-height: 1.25;
+	line-height: 1.25rem;
 	font-family: "Karla", Arial, sans-serif;
 	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	max-width: inherit;
@@ -2280,15 +2280,11 @@ p.has-background {
 	box-shadow: none;
 }
 
-.wp-block-search .wp-block-search__button.wp-block-search__button.wp-block-search__button {
-	padding: 16px 48px;
-}
-
 .wp-block-search .wp-block-search__button.has-icon {
 	transform: scaleX(-1);
 	padding: 0;
-	min-width: calc(2* 16px + 1.25rem);
-	min-height: calc(2* 16px + 1.25rem);
+	min-width: calc(2* 16px + 1.25rem + 4px);
+	min-height: calc(2* 16px + 1.25rem + 4px);
 }
 
 .wp-block-search .wp-block-search__button.has-icon svg {
@@ -4698,6 +4694,22 @@ body:not(.fse-enabled) #masthead {
 	}
 }
 
+/**
+ * Search block
+ */
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	border-radius: 160px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
+	background: transparent;
+}
+
+.wp-block-search .wp-block-search__input {
+	margin-right: calc( .1 * 48px);
+	border-radius: 160px;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

varia/sass/blocks/search/_style.scss

@@ -10,7 +10,7 @@
 				padding: #{map-deep-get($config-elements, "form", "padding")};
 			}
 			.wp-block-search__button {
-				padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "vertical")};
+				padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
 				&.has-icon {
 					padding: 0;
 				}
@@ -28,7 +28,7 @@
 		border-radius: #{map-deep-get($config-elements, "form", "border", "radius")};
 		padding: #{map-deep-get($config-elements, "form", "padding")};
 		font-size: #{map-deep-get($config-global, "font", "size", "base")};
-		line-height: #{map-deep-get($config-global, "font", "line-height", "base")};
+		line-height: #{map-deep-get($config-global, "font", "size", "base")};
 		@include font-family( map-deep-get($config-button, "font", "family") );
 		max-width: inherit;
 		margin-right: calc( .66 * #{map-deep-get($config-button, "padding", "horizontal")} );
@@ -42,14 +42,11 @@
 		@extend %button-style;
 		border: none;
 		box-shadow: none;
-		&.wp-block-search__button.wp-block-search__button { //editor specificity :S
-			padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
-		}
 		&.has-icon {
 			transform: scaleX(-1);	
 			padding: 0;		
-			min-width: calc(2* #{map-deep-get($config-button, "padding", "vertical")} + #{map-deep-get($config-global, "font", "size", "base")});
-			min-height: calc(2* #{map-deep-get($config-button, "padding", "vertical")} + #{map-deep-get($config-global, "font", "size", "base")});
+			min-width: calc(2* #{map-deep-get($config-button, "padding", "vertical")} + #{map-deep-get($config-global, "font", "size", "base")} + 4px);
+			min-height: calc(2* #{map-deep-get($config-button, "padding", "vertical")} + #{map-deep-get($config-global, "font", "size", "base")} + 4px);
 			svg {
 				fill: currentColor;
 				width: 29px;

varia/style-editor.css

@@ -979,7 +979,7 @@ p.has-background:not(.has-background-background-color) a {
 	border-radius: 3px;
 	padding: 16px;
 	font-size: 1rem;
-	line-height: 1;
+	line-height: 1rem;
 	font-family: sans-serif;
 	font-family: var(--font-headings, sans-serif);
 	max-width: inherit;
@@ -997,15 +997,11 @@ p.has-background:not(.has-background-background-color) a {
 	box-shadow: none;
 }
 
-.wp-block-search .wp-block-search__button.wp-block-search__button.wp-block-search__button {
-	padding: 16px 16px;
-}
-
 .wp-block-search .wp-block-search__button.has-icon {
 	transform: scaleX(-1);
 	padding: 0;
-	min-width: calc(2* 16px + 1rem);
-	min-height: calc(2* 16px + 1rem);
+	min-width: calc(2* 16px + 1rem + 4px);
+	min-height: calc(2* 16px + 1rem + 4px);
 }
 
 .wp-block-search .wp-block-search__button.has-icon svg {

varia/style-rtl.css

@@ -2295,7 +2295,7 @@ p.has-background {
 	border-radius: 3px;
 	padding: 16px;
 	font-size: 1rem;
-	line-height: 1;
+	line-height: 1rem;
 	font-family: sans-serif;
 	font-family: var(--font-headings, sans-serif);
 	max-width: inherit;
@@ -2313,15 +2313,11 @@ p.has-background {
 	box-shadow: none;
 }
 
-.wp-block-search .wp-block-search__button.wp-block-search__button.wp-block-search__button {
-	padding: 16px 16px;
-}
-
 .wp-block-search .wp-block-search__button.has-icon {
 	transform: scaleX(-1);
 	padding: 0;
-	min-width: calc(2* 16px + 1rem);
-	min-height: calc(2* 16px + 1rem);
+	min-width: calc(2* 16px + 1rem + 4px);
+	min-height: calc(2* 16px + 1rem + 4px);
 }
 
 .wp-block-search .wp-block-search__button.has-icon svg {

varia/style.css

@@ -2295,7 +2295,7 @@ p.has-background {
 	border-radius: 3px;
 	padding: 16px;
 	font-size: 1rem;
-	line-height: 1;
+	line-height: 1rem;
 	font-family: sans-serif;
 	font-family: var(--font-headings, sans-serif);
 	max-width: inherit;
@@ -2313,15 +2313,11 @@ p.has-background {
 	box-shadow: none;
 }
 
-.wp-block-search .wp-block-search__button.wp-block-search__button.wp-block-search__button {
-	padding: 16px 16px;
-}
-
 .wp-block-search .wp-block-search__button.has-icon {
 	transform: scaleX(-1);
 	padding: 0;
-	min-width: calc(2* 16px + 1rem);
-	min-height: calc(2* 16px + 1rem);
+	min-width: calc(2* 16px + 1rem + 4px);
+	min-height: calc(2* 16px + 1rem + 4px);
 }
 
 .wp-block-search .wp-block-search__button.has-icon svg {