Add layout CSS for product results (#14017)

Automattic · Dec 2, 2019 · a0fbe31 · a0fbe31
1 parent c2d1c45
commit a0fbe31
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/modules/search/instant-search/components/search-result-product.scss b/modules/search/instant-search/components/search-result-product.scss
@@ -2,19 +2,28 @@
 	display: flex;
 	flex-wrap: wrap;
 	padding: 0;
-	margin-top: 1em;
 }
 
 .jetpack-instant-search__search-result-product {
-	flex: 0 1 calc( 25% - 1em );
-	margin-bottom: 1em;
-	border: 1px solid #eee;
-	margin-right: 1em;
-	min-width: 200px;
-	padding: 0 1em 1em 1em;
+	margin: 0 $grid-size-large $grid-size-large 0;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+	// On mobile and responsive viewports, we allow only a single column.
+	width: calc( 100% - #{$grid-size-large} );
+
+	&:last-child {
+		margin-right: 0;
+	}
+
+	@include break-small {
+		// More columns on wider viewports
+		width: calc( ( 100% - ( #{$grid-size-large} * 6 ) ) / 3 );
+		margin-right: 32px;
+	}
 }
 
 .jetpack-instant-search__search-result-product-img {
-	margin-top: 0.5em;
-	margin-bottom: 0.5em;
+	margin: 0.5em 0.5em 0.5em 0;
 }
diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss
@@ -1,3 +1,11 @@
+$break-small: 600px;
+$grid-size-large: 16px;
+
+@mixin break-small() {
+	@media ( min-width: #{ ( $break-small ) } ) {
+		@content;
+	}
+}
 @import './components/gridicon/style.scss';
 @import './components/search-results.scss';
 @import './components/search-filters.scss';
@@ -9,3 +17,5 @@
 .jetpack-instant-search__is-loading {
 	opacity: 0.2;
 }
+
+