Add image and styling for the notification.

Yoast · Nov 14, 2017 · 7dc828e · 7dc828e
1 parent 02183d0
commit 7dc828e
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 0 deletions.
diff --git a/css/src/alerts.scss b/css/src/alerts.scss
@@ -1,3 +1,7 @@
+@import "../../node_modules/yoast-components/css/all.scss";
+
+$breakpoint_mobile: '768px';
+
 .yoast-alert {
 	padding: 0 12px;
 	border-left: 4px solid #fff;
@@ -149,3 +153,74 @@ h3 .dashicons-warning {
 		border-top: 1px solid #ddd;
 	}
 }
+
+.yoast-alerts {
+
+	.yoast-container {
+		&__configuration-wizard {
+			display: flex;
+			align-items: center;
+			box-shadow:       0 1px 2px rgba(0, 0, 0, 0.2);
+			background-color: $color_white;
+			min-height:       0;
+			padding-bottom: 20px;
+			margin-bottom: 15px;
+
+			img {
+				@media screen and (max-width: $breakpoint_mobile) {
+					display: none;
+				}
+			}
+
+			&--content {
+				flex: 1 1 auto;
+				margin: 12px;
+				padding: 0;
+
+				h3 {
+					border-bottom: 0;
+					font-size: 1.4em;
+					line-height: 1;
+					margin: 0 0 4px 0;
+					padding: 0;
+				}
+
+				p {
+					margin: 1em 0 0;
+
+					&:last-child {
+						margin: 0;
+					}
+				}
+
+				@media screen and ( max-width: $breakpoint_mobile ) {
+					display: block;
+					position: relative;
+					padding: 16px;
+				}
+			}
+
+			&--dismiss {
+				flex:       0 0 20px;
+				border:     0;
+				margin:     0 0 0 10px;
+				padding:    0;
+				background: transparent;
+				cursor:     pointer;
+
+				@media screen and ( max-width: $breakpoint_mobile ) {
+					width: 40px;
+					position: absolute;
+					top: 5px;
+					right: 5px;
+					margin: 0;
+				}
+
+				.dashicons {
+					font-size: 26px;
+					color: $color_black;
+				}
+			}
+		}
+	}
+}
diff --git a/images/new-to-configuration-notice.svg b/images/new-to-configuration-notice.svg