Provide visual focus feedback for notification badges

Provide visual feedback when focus is set on notification badges.
Also removing outdated `-moz-outline-style` property, which is applied
only in Firefox <= 3.6.

Bug: T186553
Change-Id: Ia523be0f74beb8fc52f8f04a9a7f59d88c7d2082
This commit is contained in:
manoj 2018-04-22 12:09:39 -06:00 committed by Volker E
parent 70a56e2814
commit 0db743477d

View file

@ -14,6 +14,7 @@
// Hide the text, but keep accessible for screen-readers
// Later we put the counter back onscreen with a zero text-indent
top: -5px;
border-radius: 2px;
text-indent: -9999px;
cursor: pointer;
text-decoration: none;
@ -25,11 +26,15 @@
&:active,
&:focus {
outline: 0;
-moz-outline-style: 0;
}
&-dimmed {
opacity: 0.4;
&:focus {
.box-shadow( ~'0 0 0 1px #fff, 0 0 0 3px #36c' );
opacity: 1;
&:after {
border-color: #36c;
}
}
// Counter
@ -51,6 +56,10 @@
color: #fff;
}
&-dimmed {
opacity: 0.4;
}
&.mw-echo-notifications-badge-long-label {
margin-right: 0.5em;