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;
	}

	.wc-products-display-option {
		background-color: #FFFFFF;
		padding: 1.5em;
		box-sizing: border-box;
		border: 1px solid gray; // @todo remove this when doing real styles.
		width: 80%;
		margin-left: auto;
		margin-right: auto;

		h4 {
			margin: 0;
			font-size: 1.25em;
		}

		p {
			margin: 0;
		}

		/**
		 * These settings are only shown when the parent group is expanded.
		 */
		&.value-featured,
		&.value-best_sellers,
		&.value-best_rated,
		&.value-on_sale,
		&.value-attribute {
			display: none;
		}
	}

	/**
	 * Show options when the Filter group is expanded.
	 */
	&.expanded-group-filter {
		.wc-products-display-option {
			&.value-featured,
			&.value-best_sellers,
			&.value-best_rated,
			&.value-on_sale,
			&.value-attribute {
				display: block;
			}
		}
	}

	.display-settings-container {
		&.existing {
			right: 0;
			position: absolute;
			width: 80%;
			z-index: 999;

			.wc-products-display-option {
				margin-right: 0;
			}
		}
	}

	.settings-heading {
		display: flex;
		justify-content: space-between;
	}

	.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;
		overflow: hidden;

		#product-category-search {
			width: 100%;
			margin: 0 0 10px;
			padding: 10px 15px;
			border-radius: 0;
			border-color: #E6EAEE;
		}

		.product-categories-list {
			height: 200px;
			overflow-y: scroll;

			ul {
				list-style-type: none;

				li {
					margin: 0;

					label {
						display: flex;
						align-items: center;
						flex-direction: row;
					}

					input[type="checkbox"] {
						margin-top: 0;
						margin-right: 8px;
						border-radius: 0;
					}

					ul {
						display: none;
						padding: 8px 45px 8px 40px;
						border-top: 1px solid #E6EAEE;

						li {
							margin: 5px 0;
						}
					}
				}
			}

			/* First in list */
			> ul {
				margin-top: 1px;
				padding: 0 0 15px;

				> li {
					background: #FDFDFD;
					border: 1px solid #E6EAEE;
					margin-top: -1px;

					> label {
						padding: 10px 15px;
						background: #fff;

						.product-category-count {
							margin-right: 10px;
						}
					}

					&.product-category-accordion-open {
						margin: 5px 0;
						border-bottom-width: 1px;

						&:first-child {
							margin-top: 0;
						}

						ul {
							display: block;
						}
					}
				}
			}

			.product-category-accordion-toggle {
				cursor: pointer;
				color: #666;
				margin: 0;
				padding: 0;
				border: none;
				border-radius: 0;
				background: none;
				outline: none;
				text-decoration: none;
			}

			.product-category-count {
				padding: 0 10px;
				border: 1px solid #e9e9e9;
				border-radius: 15px;
				color: #aaa;
				font-size: .8em;
				margin-left: auto;
			}
		}

		&: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;

		.button {
			padding-left: 25px;
			padding-right: 25px;
		}
	}

	.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;

			.product-categories-list {
				width: 440px;

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