1 files changed, 100 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/publicize/editor.scss b/plugins/jetpack/extensions/blocks/publicize/editor.scss
new file mode 100644
index 00000000..0704a5fa
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/publicize/editor.scss
@@ -0,0 +1,100 @@
+@import '../../shared/styles/gutenberg-colors.scss';
+
+.jetpack-publicize-message-box {
+	background-color: $light-gray-300;
+	border-radius: 4px;
+}
+
+.jetpack-publicize-message-box textarea {
+	width: 100%;
+}
+
+.jetpack-publicize-character-count {
+	padding-bottom: 5px;
+	padding-left: 5px;
+}
+
+.jetpack-publicize__connections-list {
+	list-style-type: none;
+	margin: 13px 0;
+}
+
+.publicize-jetpack-connection-container {
+	display: flex;
+}
+
+.jetpack-publicize-gutenberg-social-icon {
+	fill: $dark-gray-500;
+	margin-right: 5px;
+
+	&.is-facebook {
+		fill: var( --color-facebook );
+	}
+	&.is-twitter {
+		fill: var( --color-twitter );
+	}
+	&.is-linkedin {
+		fill: var( --color-linkedin );
+	}
+	&.is-tumblr {
+		fill: var( --color-tumblr );
+	}
+}
+
+.jetpack-publicize-connection-label {
+	flex: 1;
+	margin-right: 5px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	.jetpack-publicize-gutenberg-social-icon,
+	.jetpack-publicize-connection-label-copy {
+		display: inline-block;
+		vertical-align: middle;
+	}
+}
+
+.jetpack-publicize-connection-toggle {
+	margin-top: 3px;
+}
+
+.jetpack-publicize-notice {
+	&.components-notice {
+		margin-left: 0;
+		margin-right: 0;
+		margin-bottom: 13px;
+	}
+
+	.components-button + .components-button {
+		margin-top: 5px;
+	}
+}
+
+.jetpack-publicize-message-note {
+	display: inline-block;
+	margin-bottom: 4px;
+	margin-top: 13px;
+}
+
+.jetpack-publicize-add-connection-wrapper {
+	margin: 15px 0;
+}
+
+.jetpack-publicize-add-connection-container {
+	display: flex;
+
+	a {
+		cursor: pointer;
+	}
+
+	span {
+		vertical-align: middle;
+	}
+}
+
+.jetpack-publicize__connections-list {
+	.components-notice {
+		margin: 5px 0 10px;
+	}
+}