1 files changed, 93 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss b/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss
new file mode 100644
index 00000000..e138c863
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss
@@ -0,0 +1,93 @@
+@import '../../shared/styles/jetpack-variables.scss';
+
+.simple-payments__loading {
+	animation: simple-payments-loading 1600ms ease-in-out infinite;
+}
+
+@keyframes simple-payments-loading {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 0.7;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+
+.jetpack-simple-payments-wrapper {
+	margin-bottom: $jetpack-block-margin-bottom;
+}
+
+/* Higher specificity in order to reset paragraph style */
+body .jetpack-simple-payments-wrapper .jetpack-simple-payments-details p {
+	margin: 0 0 $jetpack-block-margin-bottom;
+	padding: 0;
+}
+
+.jetpack-simple-payments-product {
+	display: flex;
+	flex-direction: column;
+}
+
+.jetpack-simple-payments-product-image {
+	flex: 0 0 30%;
+	margin-bottom: $jetpack-block-margin-bottom;
+}
+
+.jetpack-simple-payments-image {
+	box-sizing: border-box;
+	min-width: 70px;
+	padding-top: 100%;
+	position: relative;
+}
+
+.jetpack-simple-payments-image img {
+	border: 0;
+	border-radius: 0;
+	height: auto;
+	left: 50%;
+	margin: 0;
+	max-height: 100%;
+	max-width: 100%;
+	padding: 0;
+	position: absolute;
+	top: 50%;
+	transform: translate( -50%, -50% );
+	width: auto;
+}
+
+.jetpack-simple-payments-title p,
+.jetpack-simple-payments-price p {
+	font-weight: bold;
+}
+
+.jetpack-simple-payments-purchase-box {
+	align-items: flex-start;
+	display: flex;
+}
+
+.jetpack-simple-payments-items {
+	flex: 0 0 auto;
+	margin-right: 10px;
+}
+
+input[type='number'].jetpack-simple-payments-items-number {
+	background: var( --color-white );
+	font-size: 16px;
+	line-height: 1;
+	max-width: 60px;
+	padding: 4px 8px;
+}
+
+@media screen and ( min-width: 400px ) {
+	.jetpack-simple-payments-product {
+		flex-direction: row;
+	}
+
+	.jetpack-simple-payments-product-image + .jetpack-simple-payments-details {
+		flex-basis: 70%;
+		padding-left: 1em;
+	}
+}