1 files changed, 148 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss
new file mode 100644
index 00000000..7663d70c
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss
@@ -0,0 +1,148 @@
+@import './view.scss';
+@import './variables.scss';
+@import '../../shared/styles/gutenberg-colors.scss';
+
+// inspired by from assets/shared/_animations loading-fade
+@keyframes tiled-gallery-img-placeholder {
+	0% {
+		background-color: var( --color-neutral-0 );
+	}
+	50% {
+		background-color: rgba( var( --color-neutral-0-rgb ), 0.5 );
+	}
+	100% {
+		background-color: var( --color-neutral-0 );
+	}
+}
+
+.wp-block-jetpack-tiled-gallery {
+	// Ensure that selected image outlines are visibile
+	padding-left: 4px;
+	padding-right: 4px;
+
+	&.is-style-square,
+	&.is-style-circle {
+		.tiled-gallery__item.is-transient img {
+			// Transient images (no src attribute) occupy no vertical space.
+			// If on a row by themself, the row is hidden.
+			// By setting the bottom margin, ensure they occupy the correct vertical space.
+			margin-bottom: 100%;
+		}
+	}
+
+	.tiled-gallery__item {
+		// Hide the focus outline that otherwise briefly appears when selecting a block.
+		> img:focus {
+			outline: none;
+		}
+
+		> img {
+			// Inspired by Calypso's placeholder mixin
+			animation: tiled-gallery-img-placeholder 1.6s ease-in-out infinite;
+		}
+
+		&.is-selected {
+			outline: 4px solid $tiled-gallery-selection;
+
+			// Disable filters when selected
+			filter: none;
+			&::before,
+			&::after {
+				content: none;
+			}
+		}
+
+		&.is-transient {
+			height: 100%;
+			width: 100%;
+			img {
+				background-position: center;
+				background-size: cover;
+				height: 100%;
+				opacity: 0.3;
+				width: 100%;
+			}
+		}
+	}
+
+	.tiled-gallery__add-item {
+		margin-top: $tiled-gallery-gutter;
+		width: 100%;
+
+		.components-form-file-upload,
+		.components-button.tiled-gallery__add-item-button {
+			width: 100%;
+			height: 100%;
+		}
+
+		.components-button.tiled-gallery__add-item-button {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			box-shadow: none;
+			border: none;
+			border-radius: 0;
+			min-height: 100px;
+
+			.dashicon {
+				margin-top: 10px;
+			}
+
+			&:hover,
+			&:focus {
+				border: 1px solid $dark-gray-500;
+			}
+		}
+	}
+
+	.tiled-gallery__item__inline-menu {
+		background-color: $tiled-gallery-selection;
+		display: inline-flex;
+		padding: 0 0 2px 2px;
+		position: absolute;
+		right: 0;
+		top: 0;
+
+		.components-button {
+			color: var( --color-white );
+			&:hover,
+			&:focus {
+				color: var( --color-white );
+			}
+		}
+	}
+
+	.tiled-gallery__item__remove {
+		padding: 0;
+	}
+
+	.tiled-gallery__item .components-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin: 0;
+		transform: translate( -50%, -50% );
+	}
+
+	// Hide upload buttons in style picker preview
+	.editor-block-preview__content & {
+		.editor-media-placeholder {
+			display: none;
+		}
+	}
+}
+
+.tiled-gallery__filter-picker-menu {
+	$active-item-outline-width: 2px;
+	padding: 7px;
+
+	// Leave space between elements for active state styling
+	.components-menu-item__button + .components-menu-item__button {
+		margin-top: $active-item-outline-width;
+	}
+
+	.components-menu-item__button.is-active {
+		color: $dark-gray-900;
+		box-shadow: 0 0 0 $active-item-outline-width $dark-gray-500 !important;
+	}
+}