Browse Source

more work on search block css

Maggie Cabrera 4 years ago
parent
commit
fd4b53ab27

+ 13 - 5
blank-canvas-blocks/assets/ponyfill.css

@@ -354,6 +354,10 @@ p.has-drop-cap:not(:focus):first-letter {
 	padding: var(--wp--custom--form--padding);
 }
 
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	padding: var(--wp--custom--search--button--padding);
+}
+
 .wp-block-search .wp-block-search__input {
 	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);
@@ -362,14 +366,18 @@ p.has-drop-cap:not(:focus):first-letter {
 	background: var(--wp--custom--form--color--background);
 	font-size: var(--wp--custom--form--font-size);
 	line-height: var(--wp--custom--typography--line-height);
+	margin: var(--wp--custom--search--input--margin);
 }
 
 .wp-block-search .wp-block-search__button {
-	font-weight: var(--wp--custom--button--font-weight);
-	font-family: var(--wp--custom--button--font-family);
-	font-size: var(--wp--custom--button--font-size);
-	line-height: var(--wp--custom--button--line-height);
-	border-radius: var(--wp--custom--button--border-radius);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	border-radius: var(--wp--custom--button--border--radius);
+	line-height: var(--wp--custom--button--border--line-height);
+	text-decoration: none;
+	padding: var(--wp--custom--search--button--padding);
+	line-height: var(--wp--custom--search--button--line-height);
 }
 
 .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 {

+ 9 - 0
blank-canvas-blocks/experimental-theme.json

@@ -170,6 +170,15 @@
 					"thickness": "2px",
 					"width": "150px"
 				},
+				"search": {
+					"button": {
+						"lineHeight": "27px",
+						"padding": "calc( .9 * var(--wp--custom--padding--horizontal) )"
+					},
+					"input": {
+						"margin": "0 calc( .66 * var(--wp--custom--padding--horizontal)) 0 0"
+					}
+				},
 				"video": {
 					"caption": {
 						"margin": "var(--wp--custom--margin--vertical) auto",

+ 1 - 0
blank-canvas-blocks/sass/blocks/_button.scss

@@ -8,6 +8,7 @@
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
 	border-radius: var(--wp--custom--button--border--radius);
+	//border-width: var(--wp--custom--button--border--width); //TODO: <---- that
 	line-height: var(--wp--custom--button--border--line-height);
 	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
 }

+ 6 - 0
blank-canvas-blocks/sass/blocks/_search.scss

@@ -6,6 +6,9 @@
 			.wp-block-search__input {
 				padding: var(--wp--custom--form--padding);
 			}
+			.wp-block-search__button {
+				padding: var(--wp--custom--search--button--padding);
+			}
 		}
 	}
 
@@ -17,10 +20,13 @@
 		background: var(--wp--custom--form--color--background);	
 		font-size: var(--wp--custom--form--font-size);
 		line-height: var(--wp--custom--typography--line-height);
+		margin: var(--wp--custom--search--input--margin);
 	}
 
 	.wp-block-search__button {
 		@include button-main-styles;
 		@include button-hover-styles;
+		padding: var(--wp--custom--search--button--padding);
+		line-height: var(--wp--custom--search--button--line-height);
 	}
 }