Issue #2249995 by mgifford, Lukas von Blarer: Clean up hover/focus - In Seven.

core/themes/seven/css/base/elements.css

@@ -12,8 +12,11 @@ a,
   text-decoration: none;
 }
 a:hover,
-.link:hover {
+.link:hover,
+a:focus,
+.link:focus {
   text-decoration: underline;
+  outline: 0;
 }
 hr {
   margin: 0;

core/themes/seven/css/components/buttons.theme.css

@@ -28,8 +28,8 @@
           transition: all 0.1s;
   -webkit-font-smoothing: antialiased;  /* 3 */
 }
-.button:focus,
+.button:hover,
-.button:hover {
+.button:focus {
   background-color: #f9f8f6;
   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
   background-image:   linear-gradient(to bottom, #fcfcfa, #e9e9dd);
@@ -64,8 +64,8 @@
   font-weight: 700;
   -webkit-font-smoothing: antialiased;
 }
-.button--primary:focus,
+.button--primary:hover,
-.button--primary:hover {
+.button--primary:focus {
   background-color: #2369a6;
   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
   background-image:   linear-gradient(to bottom, #0c97ed, #1f86c7);
@@ -129,8 +129,8 @@
   color: #0074bd;
   text-decoration: none;
 }
-.link:focus,
+.link:hover,
-.link:hover {
+.link:focus {
   color: #008ee6;
   text-decoration: underline;
 }
@@ -155,8 +155,8 @@
   font-weight: 400;
   text-decoration: underline;
 }
-.button--danger:focus,
 .button--danger:hover,
+.button--danger:focus,
 .button--danger:active {
   color: #ff2a00;
   text-decoration: underline;

core/themes/seven/css/components/dropbutton.component.css

@@ -141,8 +141,8 @@
   -webkit-font-smoothing: antialiased;
   width: auto!important;
 }
-.dropbutton-single .dropbutton-action a:focus,
+.dropbutton-single .dropbutton-action a:hover,
-.dropbutton-single .dropbutton-action a:hover {
+.dropbutton-single .dropbutton-action a:focus {
   background-color: #f9f8f6;
   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
@@ -150,7 +150,8 @@
   text-decoration: none;
   outline: none;
 }
-.dropbutton-single .dropbutton-action a:hover {
+.dropbutton-single .dropbutton-action a:hover,
+.dropbutton-single .dropbutton-action a:focus {
   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
 }
 .dropbutton-single .dropbutton-action a:active {

core/themes/seven/css/components/pager.css

@@ -28,8 +28,8 @@
   color: #2a678c;
   font-weight: 700;
 }
-.pager__item a:focus,
+.pager__item a:hover,
-.pager__item a:hover {
+.pager__item a:focus {
   border-bottom-color: #3395d2;
   color: #3395d2;
 }

core/themes/seven/css/components/quickedit.css

@@ -30,10 +30,10 @@
   -webkit-font-smoothing: antialiased;
   margin-top: 2px;
 }
-.quickedit-button.action-save:focus,
 .quickedit-button.action-save:hover,
-.quickedit-button.action-saving:focus
+.quickedit-button.action-save:focus,
-.quickedit-button.action-saving:hover {
+.quickedit-button.action-saving:hover,
+.quickedit-button.action-saving:focus {
   background-color: #2369a6;
   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
   background-image:   linear-gradient(to bottom, #0c97ed, #1f86c7);
@@ -41,7 +41,9 @@
   color: #fff;
 }
 .quickedit-button.action-save:hover,
-.quickedit-button.action-saving:hover {
+.quickedit-button.action-save:focus,
+.quickedit-button.action-saving:hover,
+.quickedit-button.action-saving:focus {
   box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
 }
 .quickedit-button.action-save:active,

core/themes/seven/css/components/skip-link.css

@@ -34,9 +34,9 @@
 .skip-link:active {
   outline: 0;
 }
-.skip-link.visually-hidden.focusable:active,
+.skip-link.visually-hidden.focusable:hover,
 .skip-link.visually-hidden.focusable:focus,
-.skip-link.visually-hidden.focusable:hover
+.skip-link.visually-hidden.focusable:active
 {
   position: absolute !important;
 }

core/themes/seven/css/components/tables.css

@@ -33,7 +33,8 @@ tr {
 thead > tr {
   border-bottom: 1px solid #000;
 }
-tbody tr:hover {
+tbody tr:hover,
+tbody tr:focus {
   background: #f7fcff;
 }
 td,
@@ -80,17 +81,17 @@ th.active img {
 th.active > a:after {
   border-bottom-color: #004875;
 }
-th > a:focus,
 th > a:hover,
-th.active > a:focus,
+th > a:focus,
-th.active > a:hover {
+th.active > a:hover,
+th.active > a:focus {
   color: #008ee6;
   text-decoration: none;
 }
-th > a:focus:after,
 th > a:hover:after,
-th.active > a:focus:after,
+th > a:focus:after,
-th.active > a:hover:after {
+th.active > a:hover:after,
+th.active > a:focus:after {
   border-bottom-color: #008ee6;
 }
 td .item-list ul {

core/themes/seven/css/components/tabs.css

@@ -46,7 +46,8 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.tabs__tab:hover {
+.tabs__tab:hover,
+.tabs__tab:focus {
   color: #008ee6;
   background-color: #fafaf7;
 }
@@ -238,7 +239,8 @@ li.tabs__tab a {
   border-left: 2px solid #004f80;
   padding-left: 15px;
 }
-.tabs.secondary .tabs__tab:hover {
+.tabs.secondary .tabs__tab:hover,
+.tabs.secondary .tabs__tab:focus {
   color: #008ee6;
   border-left: 2px solid #008ee6;
   padding-left: 15px;
@@ -273,6 +275,7 @@ li.tabs__tab a {
 .is-horizontal .tabs.secondary .tabs__tab.active {
   border-bottom-color: #004f80;
 }
-.is-horizontal .tabs.secondary .tabs__tab:hover {
+.is-horizontal .tabs.secondary .tabs__tab:hover,
+.is-horizontal .tabs.secondary .tabs__tab:focus {
   border-bottom-color: #008ee6;
 }

core/themes/seven/css/components/tour.theme.css

@@ -71,7 +71,8 @@
   font-size: 1.4em;
   font-weight: bold;
 }
-.joyride-close-tip:hover {
+.joyride-close-tip:hover,
+.joyride-close-tip:focus {
   color: rgba(255,255,255, 0.9);
   text-decoration: none;
 }

core/themes/seven/css/components/views-ui.css

@@ -181,7 +181,8 @@ details.fieldset-no-legend {
   border-radius: 7px 7px 0 0;
 }
 
-.views-displays .secondary .open > a:hover {
+.views-displays .secondary .open > a:hover,
+.views-displays .secondary .open > a:focus {
   background-color: #f1f1f1;
   color: #008BCB;
 }