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

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

		select {
			margin-left: 1em;
		}
	}

	.product-category-select,
	.product-attribute-select {
		margin: 0 auto;
		position: relative;
		overflow: hidden;

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

		.product-categories-list,
		.product-attributes-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;

							ul {
								padding: 0px 0 0 25px;
							}
						}
					}
				}
			}

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

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

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

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

						&:not(:first-child) {
							margin-top: 5px;
						}

						ul {
							display: block;
						}
					}
				}
			}

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

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

			.product-attribute {
				border: 1px solid #e9e9e9;

				.product-attribute-name {
					padding: .5em;
					background: #FFFFFF;
					border-bottom: 1px solid #e9e9e9;

					.product-attribute-count {
						float: right;
					}
				}
			}
		}

		input[type="radio"] {
			border-radius: 10px;
		}

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

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

		input[type=text] {
			width: 100%;
			padding-right: 3em;
		}

		.cancel {
			position: absolute;
			top: 0.5em;
			right: 1em;
			cursor: pointer;
		}

		button {
			display: flex;
			justify-content: space-between;
			width: 100%;
			background-color: #FFFFFF;
			border: 1px solid #e6eaee;
			text-align: left;
			padding: .5em;

			img {
				padding-top: .5em;
			}

			a {
				line-height: 3em;
				margin-right: .5em;
			}

			.product-name {
				line-height: 3em;
				width: 300px;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		ul {
			list-style-type: none;
		}

		li {
			margin: 0;
		}

		.product-search-results {
			position: absolute;
			width: 100%;
			z-index: 999;
		}

		.selected-products {
			margin-top: 1em;
			margin-bottom: 1em;
		}
	}

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

	input[type="checkbox"] {
		&:indeterminate {
			&:before {
				content: '';
				display: inline-block;
				margin: 6px 0 0 0px;
				width: 8px;
				height: 2px;
				background: #1e8cbe;
			}
		}
	}
}

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

		.product-specific-select {
			width: 400px;
		}

		.product-category-select {
			width: 400px;

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

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

$font__sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
$color__link: #0073aa;
$color__link--hover: #00a0d2;
$color__border: #e6eaee;
$color__option-description: #86909b;
$color__option-icon: #b9bcc2;

/* Block title */
.wc-products-block-title {
	margin-bottom: 1.66em;
	text-align: center;
}

p.wc-products-block-description {
	margin: 0 0 2em;
	font-family: $font__sans-serif;
	font-size: 1em;
	text-align: center;
}

/* Select option */
.wc-products-display-options {
	margin: 0 0 2.5em;
}

.wc-products-display-options__option {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 1.25em 1.5em;
	max-width: 80%;
	background: #fff;
	border-width: 1px 1px 0;
	border-style: solid;
	border-color: $color__border;
	cursor: pointer;

	&:last-of-type {
		border-bottom-width: 1px;
	}

	&--featured,
	&--best_sellers,
	&--best_rated,
	&--on_sale,
	&--attribute {
		display: none;
		background-color: #fdfdfd;
		padding-top: 1em;
		padding-bottom: 1em;

		.wc-products-display-options__option-title {
			font-size: 1.15em;
		}

		.wc-products-display-options__icon {
			.dashicon {
				height: 20px;
				width: 20px;
			}
		}
	}
}

.wc-products-display-options__option-content {
	width: 85%;
	align-self: center;
}

.wc-products-display-options__option-title {
	display: block;
	font-size: 1.25em;
}

p.wc-products-display-options__option-description {
	margin: 0;
	font-family: $font__sans-serif;
	font-size: 1em;
	color: $color__option-description;
}

.wc-products-display-options__icon {
	align-self: center;
	margin-left: auto;
	color: $color__option-icon;

	.dashicon {
		height: 25px;
		width: 25px;
	}
}

/* Select options popover */
.wc-products-display-options--popover {
	position: absolute;
	right: -2em;
	max-width: 60%;
	margin: 0;
	z-index: 999;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
	margin-top: -36px;

	.wc-products-display-options__option {
		margin: 0;
		max-width: none;
	}
}

.wc-products-display-options--popover__arrow {
    width: 2em;
    height: 1.25em;
	position: absolute;
	top: -1.15em;
	right: 30%;
	overflow: hidden;

	&:after {
		content: '';
		position: absolute;
		width: 1.25em;
		height: 1.25em;
		background: #fff;
		transform: rotate(45deg);
		top: .625em;
		left: .3125em;
		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
		border: 1px solid $color__border;
	}
}

/* Select options extended */
.wc-products-display-options--extended {
	.wc-products-display-options__option {
		&--featured,
		&--best_sellers,
		&--best_rated,
		&--on_sale,
		&--attribute {
			display: flex;
		}
	}

	&:not(.wc-products-display-options--popover) {
		.wc-products-display-options__option {
			&--category {
				border-bottom-width: 1px;
			}

			&--filter {
				margin-top: .5em;
			}

			&--attribute {
				margin-bottom: .5em;
				border-bottom-width: 1px;
			}
		}
	}
}

/* Settings heading */
.wc-products-settings-heading {
	display: flex;
	justify-content: space-between;
	margin: 0 -1em 35px -1em;
	padding: 1em 2em;
	border-width: 1px 0;
	border-style: solid;
	border-color: $color__border;
}

.wc-products-settings-heading__current {

}

.wc-products-settings-heading__change {

}

.wc-products-settings-heading__change-button {

}

.wc-products-settings-heading__change-button--cancel {

}