Merge pull request #3122 from Automattic/fix/global-notice-action-shadow

Global Notices: fixed notice__action for global notices
Automattic · Feb 5, 2016 · e702bbe · e702bbe
2 parents 327a8ef + a0e918a
commit e702bbe
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 57 deletions.
diff --git a/client/components/global-notices/style.scss b/client/components/global-notices/style.scss
@@ -35,6 +35,7 @@
 	@include breakpoint( ">660px" ) {
 		border-radius: 20px;
 		display: inline-flex;
+		overflow: hidden;
 		margin-bottom: 24px;
 	}
 }
@@ -54,6 +55,13 @@
 	}
 }
 
+.global-notices .notice a.notice__action {
+	@include breakpoint( ">660px" ) {
+		font-size: 14px;
+		padding: 9px 16px;
+	}
+}
+
 .global-notices .notice__dismiss {
 
 	@include breakpoint( ">660px" ) {

diff --git a/client/components/notice/style.scss b/client/components/notice/style.scss
@@ -58,6 +58,64 @@
 	}
 }
 
+.notice__button {
+	cursor: pointer;
+	margin-left: 0.428em;
+}
+
+// "X" for dismissing a notice
+.notice__dismiss {
+	display: flex;
+	padding: 11px 16px;
+	cursor: pointer;
+	color: $gray;
+
+	@include breakpoint( ">660px" ) {
+		padding: 13px 16px;
+	}
+
+	&:hover,
+	&:focus {
+		color: $gray-dark;
+	}
+
+	.notice & {
+		color: $gray;
+		opacity: 0.85;
+
+		&:hover,
+		&:focus {
+			opacity: 1;
+		}
+	}
+}
+
+// specificity for general `a` elements within notice is too great
+.notice a.notice__action {
+	background: rgba( 0, 0, 0, 0.2 );
+	box-sizing: border-box;
+	color: $white;
+	cursor: pointer;
+	display: flex;
+		align-items: center;
+	font-size: 15px;
+	font-weight: 400;
+	margin-left: auto; // forces the element to the right;
+	padding: 13px 16px;
+	text-decoration: none;
+	white-space: nowrap;
+
+	.gridicon {
+		margin-left: 8px;
+		opacity: 0.7;
+	}
+
+	&:hover,
+	&:focus {
+		background: rgba( 255, 255, 255, 0.2 );
+	}
+}
+
 // General styles for html elements
 // rendered inside a notice
 .notice {
@@ -119,38 +177,6 @@
 	}
 }
 
-.notice__button {
-	cursor: pointer;
-	margin-left: 0.428em;
-}
-
-// "X" for dismissing a notice
-.notice__dismiss {
-	display: flex;
-	padding: 11px 16px;
-	cursor: pointer;
-	color: $gray;
-
-	@include breakpoint( ">660px" ) {
-		padding: 13px 16px;
-	}
-
-	&:hover,
-	&:focus {
-		color: $gray-dark;
-	}
-
-	.notice & {
-		color: $gray;
-		opacity: 0.85;
-
-		&:hover,
-		&:focus {
-			opacity: 1;
-		}
-	}
-}
-
 // Compact notices
 .notice.is-compact {
 	border-radius: 2px;
@@ -211,29 +237,4 @@
 	}
 }
 
-// ArrowLink sub-component
-// specificity for general `a` elements within notice is too great
-.notice a.notice__action {
-	background: rgba( 0, 0, 0, 0.2 );
-	box-sizing: border-box;
-	color: $white;
-	cursor: pointer;
-	display: flex;
-		align-items: center;
-	font-size: 15px;
-	font-weight: 400;
-	margin-left: auto; // forces the element to the right;
-	padding: 13px 16px;
-	text-decoration: none;
-	white-space: nowrap;
-
-	.gridicon {
-		margin-left: 8px;
-		opacity: 0.7;
-	}
 
-	&:hover,
-	&:focus {
-		background: rgba( 255, 255, 255, 0.2 );
-	}
-}