1 files changed, 147 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/organisms/_banners.scss b/plugins/jetpack/scss/organisms/_banners.scss
index 89416073..e93b0579 100644
--- a/plugins/jetpack/scss/organisms/_banners.scss
+++ b/plugins/jetpack/scss/organisms/_banners.scss
@@ -30,6 +30,153 @@
 	padding: rem( 16px );
 }
 
+// Full Page Connection Banner
+// only show when Jetpack is disconnected
+.jetpack-disconnected {
+
+	.jp-connect-full__container {
+		box-sizing: border-box;
+		position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 999; // to sit over other elements
+		background: rgba($gray-light, .95);
+		text-align: center;
+		padding: rem( 32px );
+
+		@include minbreakpoint(tablet) {
+			left: -20px; // fill gap of wp-admin sidebar right margin on large screens
+		};
+	}
+}
+
+// Planet + star svgs for decoration only
+.jp-connect-full__svg-jupiter {
+	position: absolute;
+		right: 0;
+		top: rem( 80px );
+		opacity: .90;
+
+		@include breakpoint(tablet) {
+			display: none;
+		};
+}
+
+.jp-connect-full__svg-stars {
+	position: absolute;
+		left: rem( 100px );
+		top: rem( 100px );
+		opacity: .90;
+
+		@include breakpoint(tablet) {
+			display: none;
+		};
+}
+
+// dismiss 
+.jp-connect-full__svg-dismiss {
+	position: absolute;
+		right: 0;
+		top: 0;
+	fill: $gray;
+	padding: rem( 16px );
+	height: rem( 24px );
+	width: rem( 24px );
+
+	@include breakpoint(phablet) {
+		top: rem( 50px );
+	};
+}
+
+.jp-connect-full__step-header-logos {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	justify-content: center;
+
+	.jp-connect-full__svg-jetpack,
+	.jp-connect-full__svg-jetpack {
+		fill: $gray;
+	}
+
+	.jp-connect-full__svg-sync {
+		fill: $gray-dark;
+		margin: 0 rem( 16px );
+	}
+
+	@include breakpoint(phablet) {
+			padding-top: rem( 32px );
+	};
+}
+
+.jp-connect-full__step-header-title {
+	padding: rem( 16px );
+	font-size: rem( 24px );
+	line-height: 1.25;
+	color: $gray-dark;
+	font-weight: 400;
+}
+
+.jp-connect-full__card {
+	padding: 0;
+	margin: 0 auto;
+	box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
+	background: $white;
+	max-width: rem( 550px );
+}
+
+.jp-connect-full__card-inner {
+	padding: rem( 16px );
+}
+
+.jp-connect-full__card-description {
+	font-size: rem( 14px );
+	color: $gray-dark;
+}
+
+.jp-connect-full__card-footer {
+	background: $gray-light;
+	padding: rem( 16px );
+	box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
+}
+
+.jp-connect-full__tos-blurb {
+	font-size: rem( 11px );
+	margin: 0 auto rem( 16px );
+	max-width: rem( 385px );
+	color: $gray-dark;
+}
+
+.jp-connect-full__tos-a {
+	text-decoration: none;
+	color: $blue-wordpress;
+}
+
+.jp-connect-full__button-container {
+	margin: 0;
+}
+
+.jp-connect-full__help-button {
+	display: inline-block;
+	text-decoration: none;
+	color: $gray;
+	padding: rem( 16px );
+
+	.gridicon {
+		width: rem( 18px );
+		height: rem( 18px );
+		position: relative;
+		top: 4px;
+	}
+}
+
+.jp-connect-full__dismiss {
+	cursor: pointer;
+}
+
+
 // Plugin List Connection Banners
 // Written in the style of React to stay consistent with the Jetpack interior