woocommerce/plugins/woocommerce-blocks/assets/css/gutenberg-products-block.scss

/**
 * Right now these are basic layout/placeholder styles for dev + testing.
 * @todo Refine these to final styles.
 */

/**
 * Products block preview mode.
 */
.wc-products-block-preview {
	&.grid {
		overflow: hidden;

		.product-preview {
			float: left;
			text-align: center;
			margin-right: 3.8%;
		}

		&.cols-1 .product-preview {
			float: none;
			margin-right: 0;
		}

		&.cols-2 .product-preview {
			width: 48%;

			&:nth-of-type(2n) {
				margin-right: 0;
			}
		}

		&.cols-3 .product-preview {
			width: 30.75%;

			&:nth-of-type(3n) {
				margin-right: 0;
			}
		}

		&.cols-4 .product-preview {
			width: 22.05%;

			&:nth-of-type(4n) {
				margin-right: 0;
			}
		}

		&.cols-5 .product-preview {
			width: 16.9%;

			&:nth-of-type(5n) {
				margin-right: 0;
			}
		}
	}

	&.list {
		.product-preview {
			overflow: hidden;
		}

		img {
			float: left;
			width: 50%;
			margin-right: 2em;
			margin-bottom: 2em;
		}
	}

	.product-add-to-cart {
		background: gray;
		border-radius: 10px;
		color: white;
		cursor: pointer;
		padding: .5em 1em;
		line-height: 3em;
	}
}

/**
 * Products block edit mode.
 */
.wc-product-display-settings {
	background-color: #f8f9f9;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	font-size: 13px;
	padding: 1em;
	min-height: 200px;
	position: relative;

	> h4 {
		text-align: center;
	}

	.display-settings-container {
		background-color: #ffffff;

		&.existing {
			position: absolute;
			width: 100%;
			z-index: 999;
		}
	}

	.wc-products-display-option {
		border: 1px solid gray; // @todo remove this when doing real styles.
	}

	.display-select {
		margin: 0 -1em 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid #e6eaee;
		text-align: center;

		select {
			margin-left: 1em;
		}
	}

	.product-specific-select {
		.add-new {
			background: #ddd;
			display: inline-block;
			margin-bottom: 20px;
			padding: 60px 30px;
		}
	}

	.product-category-select {
		margin: 0 auto;
		position: relative;

		div + div {
			> ul {
				height: 100px;
				overflow-y: scroll;
				padding: 0 0 15px;
			}
		}

		#product-category-search {
			width: 100%;
			margin: 0 0 10px;
		}

		ul {
			list-style-type: none;

			li {
				margin: 3px 0;

				input[type="checkbox"] {
					margin-right: 5px;
				}

				ul {
					li {
						input[type="checkbox"] {
							margin-right: 20px;
						}
					}
				}
			}
		}

		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 1.5em;
			background: linear-gradient( rgba( 255, 255, 255, .1 ) 0, #f8f9f9 100% );
		}
	}

	.block-footer {
		margin: 0 -1em;
		padding-top: 1em;
		border-top: 1px solid #e6eaee;
		text-align: center;
	}

	.display-select + .block-footer {
		padding-top: 0;
		border: 0;
	}
}

@media only screen and (min-width: 700px) {
	.wc-product-display-settings {
		.product-category-select {
			width: 400px;

			div + div {
				overflow: hidden;

				> ul {
					width: 440px;
				}
			}
		}
	}
}