From 753ec498ba3b4e19ad4aa8dd0dab767529b0518d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Fri, 11 Jan 2019 18:45:06 +0100
Subject: [PATCH]  Update activity button focus styles 
 (https://github.com/woocommerce/woocommerce-admin/pull/1287)

* Update activity button focus styles

* Set overflow to 'auto' instead of 'scroll' in activity panels
---
 .../client/header/activity-panel/style.scss   | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/plugins/woocommerce-admin/client/header/activity-panel/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/style.scss
index 1eb46744867..651dd64771c 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/style.scss
+++ b/plugins/woocommerce-admin/client/header/activity-panel/style.scss
@@ -77,22 +77,26 @@
 		max-width: min-content;
 		min-width: 80px;
 		width: 100%;
+		font-size: 11px;
 		height: 60px;
-		border-bottom: 3px solid $white;
-
 		@include breakpoint( '>960px' ) {
+			font-size: 13px;
 			height: 80px;
 		}
 
 		&.is-active {
 			color: $core-grey-dark-700;
-			border-bottom: 3px solid $woocommerce;
 			box-shadow: none;
-		}
 
-		font-size: 11px;
-		@include breakpoint( '>960px' ) {
-			font-size: 13px;
+			&::before {
+				background-color: $woocommerce;
+				bottom: 0;
+				content: '';
+				height: 3px;
+				left: 0;
+				position: absolute;
+				right: 0;
+			}
 		}
 
 		&.has-unread::after,
@@ -125,9 +129,7 @@
 		}
 
 		&:hover,
-		&.components-button:not(:disabled):not([aria-disabled='true']):hover,
-		&:focus,
-		&.components-button:not(:disabled):not([aria-disabled='true']):focus {
+		&.components-button:not(:disabled):not([aria-disabled='true']):hover {
 			background-color: $core-grey-light-200;
 			box-shadow: none;
 
@@ -137,15 +139,9 @@
 			}
 		}
 
-		&:focus:not(.is-active),
-		&.components-button:not(.is-active):not(:disabled):not([aria-disabled='true']):focus,
-		&:hover:not(.is-active),
-		&.components-button:not(.is-active):not(:disabled):not([aria-disabled='true']):hover {
-			border-bottom: 3px solid $core-grey-light-200;
-			&.has-unread::after,
-			&.woocommerce-layout__activity-panel-tab-wordpress-notices::after {
-				border-color: $core-grey-light-200;
-			}
+		&:focus,
+		&.components-button:not(:disabled):not([aria-disabled='true']):focus {
+			box-shadow: inset -1px -1px 0 $core-grey-dark-300, inset 1px 1px 0 $core-grey-dark-300;
 		}
 	}
 }
@@ -205,7 +201,7 @@
 	top: 92px;
 	z-index: 1000;
 	overflow-x: hidden;
-	overflow-y: scroll;
+	overflow-y: auto;
 
 	// Extra padding is needed at the bottom of the wrapper because of our positioning, height, and overflow rules. Otherwise, some content can get cut off.
 	padding-bottom: $gap-small * 6;