瀏覽代碼

initial styles fro search block

Maggie Cabrera 4 年之前
父節點
當前提交
c1afa90061

+ 11 - 0
varia/sass/base/_editor.scss

@@ -36,3 +36,14 @@ button,
 a {
 	cursor: pointer;
 }
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit;
+	font-size: 100%;
+	line-height: 1.15;
+	margin: 0;
+}

+ 1 - 0
varia/sass/blocks/_editor.scss

@@ -24,6 +24,7 @@
 @import "paragraph/editor";
 @import "pullquote/editor";
 @import "quote/editor";
+@import "search/editor";
 @import "separator/editor";
 @import "table/editor";
 @import "verse/editor";

+ 1 - 0
varia/sass/blocks/_imports.scss

@@ -27,6 +27,7 @@
 @import "premium-content/style";
 @import "pullquote/style";
 @import "quote/style";
+@import "search/style";
 @import "separator/style";
 @import "slideshow/style";
 @import "spacer/style";

+ 1 - 0
varia/sass/blocks/search/_editor.scss

@@ -0,0 +1 @@
+@import "style";

+ 65 - 0
varia/sass/blocks/search/_style.scss

@@ -0,0 +1,65 @@
+.wp-block-search {
+	flex-wrap: wrap;
+	&.wp-block-search__button-inside {
+		.wp-block-search__inside-wrapper{
+			background: transparent;
+			color: #{map-deep-get($config-elements, "form", "color", "text")};
+			border: #{map-deep-get($config-elements, "form", "border", "width")} solid #{map-deep-get($config-elements, "form", "color", "border")};
+			border-radius: #{map-deep-get($config-elements, "form", "border", "radius")};
+			.wp-block-search__input {
+				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", "horizontal")};
+				&.has-icon {
+					padding: 0;
+				}
+			}
+		}
+	}
+
+	.wp-block-search__label {
+		font-weight: normal;
+	}
+
+	.wp-block-search__input {
+		color: #{map-deep-get($config-elements, "form", "color", "text")};
+		border: #{map-deep-get($config-elements, "form", "border", "width")} solid #{map-deep-get($config-elements, "form", "color", "border")};
+		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")};
+		@include font-family( map-deep-get($config-button, "font", "family") );
+		max-width: inherit;
+		margin-right: calc( .66 * #{map-deep-get($config-button, "padding", "horizontal")} );
+		background: transparent;
+		&:focus {
+			color: #{map-deep-get($config-elements, "form", "color", "text")};
+			border-color: #{map-deep-get($config-elements, "form", "color", "border")};
+		}
+	}
+	.wp-block-search__button {
+		@extend %button-style;
+		padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")} !important;
+		border: none;
+		box-shadow: none;
+		&.has-icon {
+			transform: scaleX(-1);	
+			padding: 0;		
+			min-width: calc(2* #{map-deep-get($config-button, "padding", "horizontal")} + 16px);
+			min-height: calc(2* #{map-deep-get($config-button, "padding", "horizontal")} + 16px);
+			svg {
+				fill: currentColor;
+				width: 29px;
+				height: 29px;
+			}
+		}
+	}
+
+	::-webkit-input-placeholder,
+	:-moz-placeholder,
+	:-ms-input-placeholder {
+		color: #{map-deep-get($config-elements, "form", "color", "text")};
+	}
+
+}

+ 106 - 24
varia/style-editor.css

@@ -126,7 +126,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  *   in-sync
  */
 .wp-block-a8c-blog-posts + .button, .wp-block-button__link,
-.wp-block-file__button, .fse-template-part .main-navigation .button {
+.wp-block-file__button, .wp-block-search .wp-block-search__button, .fse-template-part .main-navigation .button {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -142,8 +142,8 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 }
 
 .wp-block-a8c-blog-posts + .button:before, .wp-block-button__link:before,
-.wp-block-file__button:before, .fse-template-part .main-navigation .button:before, .wp-block-a8c-blog-posts + .button:after, .wp-block-button__link:after,
-.wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
+.wp-block-file__button:before, .wp-block-search .wp-block-search__button:before, .fse-template-part .main-navigation .button:before, .wp-block-a8c-blog-posts + .button:after, .wp-block-button__link:after,
+.wp-block-file__button:after, .wp-block-search .wp-block-search__button:after, .fse-template-part .main-navigation .button:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -151,19 +151,19 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 }
 
 .wp-block-a8c-blog-posts + .button:before, .wp-block-button__link:before,
-.wp-block-file__button:before, .fse-template-part .main-navigation .button:before {
+.wp-block-file__button:before, .wp-block-search .wp-block-search__button:before, .fse-template-part .main-navigation .button:before {
 	margin-bottom: -0.12em;
 }
 
 .wp-block-a8c-blog-posts + .button:after, .wp-block-button__link:after,
-.wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
+.wp-block-file__button:after, .wp-block-search .wp-block-search__button:after, .fse-template-part .main-navigation .button:after {
 	margin-top: -0.11em;
 }
 
 .wp-block-a8c-blog-posts + .button:not(.has-background):hover, .wp-block-button__link:not(.has-background):hover,
-.wp-block-file__button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-button__link:focus,
-.wp-block-file__button:focus, .fse-template-part .main-navigation .button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .fse-template-part .main-navigation .has-focus.button {
+.wp-block-file__button:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-button__link:focus,
+.wp-block-file__button:focus, .wp-block-search .wp-block-search__button:focus, .fse-template-part .main-navigation .button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .wp-block-search .has-focus.wp-block-search__button, .fse-template-part .main-navigation .has-focus.button {
 	color: white;
 	background-color: indigo;
 }
@@ -216,6 +216,17 @@ a {
 	cursor: pointer;
 }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit;
+	font-size: 100%;
+	line-height: 1.15;
+	margin: 0;
+}
+
 /**
  * Elements
  * - Styles for basic HTML elemants
@@ -483,7 +494,7 @@ object {
  *   in-sync
  */
 .wp-block-a8c-blog-posts + .button, .wp-block-button__link,
-.wp-block-file__button, .fse-template-part .main-navigation .button {
+.wp-block-file__button, .wp-block-search .wp-block-search__button, .fse-template-part .main-navigation .button {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -499,8 +510,8 @@ object {
 }
 
 .wp-block-a8c-blog-posts + .button:before, .wp-block-button__link:before,
-.wp-block-file__button:before, .fse-template-part .main-navigation .button:before, .wp-block-a8c-blog-posts + .button:after, .wp-block-button__link:after,
-.wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
+.wp-block-file__button:before, .wp-block-search .wp-block-search__button:before, .fse-template-part .main-navigation .button:before, .wp-block-a8c-blog-posts + .button:after, .wp-block-button__link:after,
+.wp-block-file__button:after, .wp-block-search .wp-block-search__button:after, .fse-template-part .main-navigation .button:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -508,19 +519,19 @@ object {
 }
 
 .wp-block-a8c-blog-posts + .button:before, .wp-block-button__link:before,
-.wp-block-file__button:before, .fse-template-part .main-navigation .button:before {
+.wp-block-file__button:before, .wp-block-search .wp-block-search__button:before, .fse-template-part .main-navigation .button:before {
 	margin-bottom: -0.12em;
 }
 
 .wp-block-a8c-blog-posts + .button:after, .wp-block-button__link:after,
-.wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
+.wp-block-file__button:after, .wp-block-search .wp-block-search__button:after, .fse-template-part .main-navigation .button:after {
 	margin-top: -0.11em;
 }
 
 .wp-block-a8c-blog-posts + .button:not(.has-background):hover, .wp-block-button__link:not(.has-background):hover,
-.wp-block-file__button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-button__link:focus,
-.wp-block-file__button:focus, .fse-template-part .main-navigation .button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .fse-template-part .main-navigation .has-focus.button {
+.wp-block-file__button:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-button__link:focus,
+.wp-block-file__button:focus, .wp-block-search .wp-block-search__button:focus, .fse-template-part .main-navigation .button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .wp-block-search .has-focus.wp-block-search__button, .fse-template-part .main-navigation .has-focus.button {
 	color: white;
 	background-color: indigo;
 }
@@ -935,6 +946,77 @@ p.has-background:not(.has-background-background-color) a {
 	color: currentColor;
 }
 
+.wp-block-search {
+	flex-wrap: wrap;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	background: transparent;
+	color: black;
+	border: 1px solid #DDDDDD;
+	border-radius: 3px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding: 16px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	padding: 16px 16px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
+	padding: 0;
+}
+
+.wp-block-search .wp-block-search__label {
+	font-weight: normal;
+}
+
+.wp-block-search .wp-block-search__input {
+	color: black;
+	border: 1px solid #DDDDDD;
+	border-radius: 3px;
+	padding: 16px;
+	font-size: 1rem;
+	line-height: 1;
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
+	max-width: inherit;
+	margin-right: calc( .66 * 16px);
+	background: transparent;
+}
+
+.wp-block-search .wp-block-search__input:focus {
+	color: black;
+	border-color: #DDDDDD;
+}
+
+.wp-block-search .wp-block-search__button {
+	padding: 16px 16px !important;
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button.has-icon {
+	transform: scaleX(-1);
+	padding: 0;
+	min-width: calc(2* 16px + 16px);
+	min-height: calc(2* 16px + 16px);
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	fill: currentColor;
+	width: 29px;
+	height: 29px;
+}
+
+.wp-block-search ::-webkit-input-placeholder,
+.wp-block-search :-moz-placeholder,
+.wp-block-search :-ms-input-placeholder {
+	color: black;
+}
+
 .wp-block-separator,
 hr {
 	border-bottom: 2px solid #DDDDDD;
@@ -1613,7 +1695,7 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation .wp-block-button__link,
-.fse-template-part .main-navigation .wp-block-file__button, .fse-template-part .main-navigation .button {
+.fse-template-part .main-navigation .wp-block-file__button, .fse-template-part .main-navigation .wp-block-search .wp-block-search__button, .wp-block-search .fse-template-part .main-navigation .wp-block-search__button, .fse-template-part .main-navigation .button {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1629,8 +1711,8 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation .wp-block-button__link:before,
-.fse-template-part .main-navigation .wp-block-file__button:before, .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-button__link:after,
-.fse-template-part .main-navigation .wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
+.fse-template-part .main-navigation .wp-block-file__button:before, .fse-template-part .main-navigation .wp-block-search .wp-block-search__button:before, .wp-block-search .fse-template-part .main-navigation .wp-block-search__button:before, .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-button__link:after,
+.fse-template-part .main-navigation .wp-block-file__button:after, .fse-template-part .main-navigation .wp-block-search .wp-block-search__button:after, .wp-block-search .fse-template-part .main-navigation .wp-block-search__button:after, .fse-template-part .main-navigation .button:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1638,19 +1720,19 @@ pre.wp-block-verse {
 }
 
 .fse-template-part .main-navigation .wp-block-button__link:before,
-.fse-template-part .main-navigation .wp-block-file__button:before, .fse-template-part .main-navigation .button:before {
+.fse-template-part .main-navigation .wp-block-file__button:before, .fse-template-part .main-navigation .wp-block-search .wp-block-search__button:before, .wp-block-search .fse-template-part .main-navigation .wp-block-search__button:before, .fse-template-part .main-navigation .button:before {
 	margin-bottom: -0.12em;
 }
 
 .fse-template-part .main-navigation .wp-block-button__link:after,
-.fse-template-part .main-navigation .wp-block-file__button:after, .fse-template-part .main-navigation .button:after {
+.fse-template-part .main-navigation .wp-block-file__button:after, .fse-template-part .main-navigation .wp-block-search .wp-block-search__button:after, .wp-block-search .fse-template-part .main-navigation .wp-block-search__button:after, .fse-template-part .main-navigation .button:after {
 	margin-top: -0.11em;
 }
 
 .fse-template-part .main-navigation .wp-block-button__link:not(.has-background):hover,
-.fse-template-part .main-navigation .wp-block-file__button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):hover, .fse-template-part .main-navigation .wp-block-button__link:focus,
-.fse-template-part .main-navigation .wp-block-file__button:focus, .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .has-focus.wp-block-button__link,
-.fse-template-part .main-navigation .has-focus.wp-block-file__button, .fse-template-part .main-navigation .has-focus.button {
+.fse-template-part .main-navigation .wp-block-file__button:not(.has-background):hover, .fse-template-part .main-navigation .wp-block-search .wp-block-search__button:not(.has-background):hover, .wp-block-search .fse-template-part .main-navigation .wp-block-search__button:not(.has-background):hover, .fse-template-part .main-navigation .button:not(.has-background):hover, .fse-template-part .main-navigation .wp-block-button__link:focus,
+.fse-template-part .main-navigation .wp-block-file__button:focus, .fse-template-part .main-navigation .wp-block-search .wp-block-search__button:focus, .wp-block-search .fse-template-part .main-navigation .wp-block-search__button:focus, .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .has-focus.wp-block-button__link,
+.fse-template-part .main-navigation .has-focus.wp-block-file__button, .fse-template-part .main-navigation .wp-block-search .has-focus.wp-block-search__button, .wp-block-search .fse-template-part .main-navigation .has-focus.wp-block-search__button, .fse-template-part .main-navigation .has-focus.button {
 	color: white;
 	background-color: indigo;
 }

+ 95 - 24
varia/style-rtl.css

@@ -152,7 +152,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+.wp-block-file__button, .a8c-posts-list__view-all, .wp-block-search .wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -170,10 +170,10 @@ input[type="submit"],
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -183,27 +183,27 @@ input[type="submit"]:after,
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
 button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
 .button:not(.has-background):hover, button:not(.has-background):hover,
 input:not(.has-background):hover[type="submit"],
 .wp-block-button__link:not(.has-background):hover,
-.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
+.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, .wp-block-search .wp-block-search__button:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, .wp-block-search .has-focus.wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
 	background-color: indigo;
 }
@@ -231,7 +231,7 @@ input.has-focus[type="submit"],
 button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+.wp-block-file__button, .a8c-posts-list__view-all, .wp-block-search .wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -249,10 +249,10 @@ input[type="submit"],
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -262,27 +262,27 @@ input[type="submit"]:after,
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
 button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
 .button:not(.has-background):hover, button:not(.has-background):hover,
 input:not(.has-background):hover[type="submit"],
 .wp-block-button__link:not(.has-background):hover,
-.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
+.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, .wp-block-search .wp-block-search__button:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, .wp-block-search .has-focus.wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
 	background-color: indigo;
 }
@@ -1375,7 +1375,7 @@ object {
 button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+.wp-block-file__button, .a8c-posts-list__view-all, .wp-block-search .wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1393,10 +1393,10 @@ input[type="submit"],
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1406,27 +1406,27 @@ input[type="submit"]:after,
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
 button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
 .button:not(.has-background):hover, button:not(.has-background):hover,
 input:not(.has-background):hover[type="submit"],
 .wp-block-button__link:not(.has-background):hover,
-.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
+.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, .wp-block-search .wp-block-search__button:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, .wp-block-search .has-focus.wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
 	background-color: indigo;
 }
@@ -2262,6 +2262,77 @@ p.has-background {
 	border-color: currentColor;
 }
 
+.wp-block-search {
+	flex-wrap: wrap;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	background: transparent;
+	color: black;
+	border: 1px solid #DDDDDD;
+	border-radius: 3px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding: 16px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	padding: 16px 16px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
+	padding: 0;
+}
+
+.wp-block-search .wp-block-search__label {
+	font-weight: normal;
+}
+
+.wp-block-search .wp-block-search__input {
+	color: black;
+	border: 1px solid #DDDDDD;
+	border-radius: 3px;
+	padding: 16px;
+	font-size: 1rem;
+	line-height: 1;
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
+	max-width: inherit;
+	margin-left: calc( .66 * 16px);
+	background: transparent;
+}
+
+.wp-block-search .wp-block-search__input:focus {
+	color: black;
+	border-color: #DDDDDD;
+}
+
+.wp-block-search .wp-block-search__button {
+	padding: 16px 16px !important;
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button.has-icon {
+	transform: scaleX(-1);
+	padding: 0;
+	min-width: calc(2* 16px + 16px);
+	min-height: calc(2* 16px + 16px);
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	fill: currentColor;
+	width: 29px;
+	height: 29px;
+}
+
+.wp-block-search ::-webkit-input-placeholder,
+.wp-block-search :-moz-placeholder,
+.wp-block-search :-ms-input-placeholder {
+	color: black;
+}
+
 hr {
 	border-bottom: 2px solid #DDDDDD;
 	clear: both;

+ 95 - 24
varia/style.css

@@ -152,7 +152,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+.wp-block-file__button, .a8c-posts-list__view-all, .wp-block-search .wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -170,10 +170,10 @@ input[type="submit"],
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -183,27 +183,27 @@ input[type="submit"]:after,
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
 button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
 .button:not(.has-background):hover, button:not(.has-background):hover,
 input:not(.has-background):hover[type="submit"],
 .wp-block-button__link:not(.has-background):hover,
-.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
+.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, .wp-block-search .wp-block-search__button:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, .wp-block-search .has-focus.wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
 	background-color: indigo;
 }
@@ -231,7 +231,7 @@ input.has-focus[type="submit"],
 button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+.wp-block-file__button, .a8c-posts-list__view-all, .wp-block-search .wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -249,10 +249,10 @@ input[type="submit"],
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -262,27 +262,27 @@ input[type="submit"]:after,
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
 button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
 .button:not(.has-background):hover, button:not(.has-background):hover,
 input:not(.has-background):hover[type="submit"],
 .wp-block-button__link:not(.has-background):hover,
-.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
+.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, .wp-block-search .wp-block-search__button:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, .wp-block-search .has-focus.wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
 	background-color: indigo;
 }
@@ -1375,7 +1375,7 @@ object {
 button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+.wp-block-file__button, .a8c-posts-list__view-all, .wp-block-search .wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1393,10 +1393,10 @@ input[type="submit"],
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1406,27 +1406,27 @@ input[type="submit"]:after,
 button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, .wp-block-search .wp-block-search__button:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
 button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, .wp-block-search .wp-block-search__button:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
 .button:not(.has-background):hover, button:not(.has-background):hover,
 input:not(.has-background):hover[type="submit"],
 .wp-block-button__link:not(.has-background):hover,
-.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
+.wp-block-file__button:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:not(.has-background):hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, .wp-block-search .wp-block-search__button:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, .wp-block-search .has-focus.wp-block-search__button, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
 	background-color: indigo;
 }
@@ -2262,6 +2262,77 @@ p.has-background {
 	border-color: currentColor;
 }
 
+.wp-block-search {
+	flex-wrap: wrap;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	background: transparent;
+	color: black;
+	border: 1px solid #DDDDDD;
+	border-radius: 3px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding: 16px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	padding: 16px 16px;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon {
+	padding: 0;
+}
+
+.wp-block-search .wp-block-search__label {
+	font-weight: normal;
+}
+
+.wp-block-search .wp-block-search__input {
+	color: black;
+	border: 1px solid #DDDDDD;
+	border-radius: 3px;
+	padding: 16px;
+	font-size: 1rem;
+	line-height: 1;
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
+	max-width: inherit;
+	margin-right: calc( .66 * 16px);
+	background: transparent;
+}
+
+.wp-block-search .wp-block-search__input:focus {
+	color: black;
+	border-color: #DDDDDD;
+}
+
+.wp-block-search .wp-block-search__button {
+	padding: 16px 16px !important;
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button.has-icon {
+	transform: scaleX(-1);
+	padding: 0;
+	min-width: calc(2* 16px + 16px);
+	min-height: calc(2* 16px + 16px);
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	fill: currentColor;
+	width: 29px;
+	height: 29px;
+}
+
+.wp-block-search ::-webkit-input-placeholder,
+.wp-block-search :-moz-placeholder,
+.wp-block-search :-ms-input-placeholder {
+	color: black;
+}
+
 hr {
 	border-bottom: 2px solid #DDDDDD;
 	clear: both;