Переглянути джерело

improved search block on blockbase, settings for skatepark

Maggie 4 роки тому
батько
коміт
e71091f473

+ 14 - 10
blockbase/assets/ponyfill.css

@@ -565,8 +565,12 @@ p.has-background {
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }
 
+.wp-block-search {
+	margin-top: var(--wp--custom--margin--baseline);
+}
+
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-	padding: var(--wp--custom--form--padding);
+	padding: var(--wp--custom--form--border--width);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 	border-radius: var(--wp--custom--form--border--radius);
 }
@@ -581,7 +585,7 @@ p.has-background {
 }
 
 .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 .wp-block-search__button.wp-block-search__button {
 	border-width: 0;
 	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
 	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
@@ -600,14 +604,14 @@ p.has-background {
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg,
-.wp-block-search .wp-block-search__button svg {
+.wp-block-search .wp-block-search__button.wp-block-search__button svg {
 	fill: var(--wp--custom--button--color--text);
 }
 
 .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-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,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color):hover,
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color):focus,
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
 	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
 	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
 	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
@@ -619,14 +623,14 @@ p.has-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):hover svg, .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 svg, .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 svg,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg,
-.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg {
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-search .wp-block-search__button.wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg {
 	fill: var(--wp--custom--button--color--text);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon,
-.wp-block-search .wp-block-search__button.has-icon {
+.wp-block-search .wp-block-search__button.wp-block-search__button.has-icon {
 	line-height: 0;
 }
 

+ 3 - 2
blockbase/sass/blocks/_search.scss

@@ -1,10 +1,11 @@
 @import 'button-mixins';
 
 .wp-block-search {
+	margin-top: var(--wp--custom--margin--baseline);
 
 	&.wp-block-search__button-inside {
 		.wp-block-search__inside-wrapper{
-			padding: var(--wp--custom--form--padding);
+			padding: var(--wp--custom--form--border--width);
 			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 			border-radius: var(--wp--custom--form--border--radius);
 			.wp-block-search__input {
@@ -19,7 +20,7 @@
 	}
 
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-	.wp-block-search__button {
+	.wp-block-search__button.wp-block-search__button {
 		@include button-main-styles;
 		@include button-hover-styles;
 		&.has-icon {

+ 8 - 13
skatepark/assets/theme.css

@@ -42,7 +42,6 @@
 	color: var(--wp--preset--color--background);
 }
 
-<<<<<<< HEAD
 .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@@ -71,14 +70,14 @@
 }
 
 .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 .wp-block-search__button.wp-block-search__button {
 	text-transform: uppercase;
 }
 
 .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,
-.wp-block-search .wp-block-search__button:hover,
-.wp-block-search .wp-block-search__button:focus,
-.wp-block-search .wp-block-search__button.has-focus {
+.wp-block-search .wp-block-search__button.wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button.wp-block-search__button:focus,
+.wp-block-search .wp-block-search__button.wp-block-search__button.has-focus {
 	border-style: var(--wp--custom--button--border--style);
 	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
@@ -114,6 +113,10 @@
 	text-transform: uppercase;
 }
 
+.pre-footer .wp-block-social-links.is-style-logos-only {
+	margin-left: calc( -1 * ( 8px + 0.25em ));
+}
+
 a {
 	text-decoration-thickness: 0.07em;
 	text-underline-offset: 0.46ex;
@@ -173,14 +176,6 @@ a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen
 	outline: 1px dotted var(--wp--custom--color--primary);
 	outline-offset: 0.1em;
 	text-decoration: none;
-=======
-.pre-footer h3 {
-	text-transform: uppercase;
->>>>>>> 5f27bc46 (removed links css)
-}
-
-.pre-footer .wp-block-social-links.is-style-logos-only {
-	margin-left: calc( -1 * ( 8px + 0.25em ));
 }
 
 /*# sourceMappingURL=theme.css.map */

+ 13 - 0
skatepark/child-theme.json

@@ -101,6 +101,19 @@
 					}
 				}
 			],
+			"form": {
+				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+				"border": {
+					"color": "var(--wp--custom--color--primary)",
+					"width": "2px"
+				},
+				"color": {
+					"background": "transparent"
+				},
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)"
+				}
+			},
 			"fontsToLoadFromGoogle": [
 				"family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
 			],

+ 1 - 1
skatepark/sass/blocks/_buttons.scss

@@ -26,7 +26,7 @@
 
 .wp-block-search {
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-	.wp-block-search__button {
+	.wp-block-search__button.wp-block-search__button {
 		text-transform: uppercase;
 		@include skatepark_button_hover_styles;
 	}

+ 2 - 2
skatepark/theme.json

@@ -146,7 +146,7 @@
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 				"border": {
-					"color": "#EFEFEF",
+					"color": "var(--wp--custom--color--primary)",
 					"radius": "0",
 					"style": "solid",
 					"width": "2px"
@@ -162,7 +162,7 @@
 					}
 				},
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--normal)"
+					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
 			"gallery": {