From 8e374bd010a6db00acf3cb51b14788d7bf9ba097 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Thu, 1 Jan 2015 01:05:01 -0800
Subject: [PATCH] put all :hover styles within @media (hover: hover)

---
 scss/_badge.scss                     |  3 +-
 scss/_button-group.scss              |  4 +-
 scss/_buttons.scss                   | 15 +++---
 scss/_card.scss                      | 13 +++--
 scss/_carousel.scss                  |  3 +-
 scss/_close.scss                     |  3 +-
 scss/_custom-forms.scss              | 19 ++++----
 scss/_dropdown.scss                  | 14 ++----
 scss/_input-group.scss               |  4 +-
 scss/_labels.scss                    |  3 +-
 scss/_list-group.scss                | 57 +++++++++++-----------
 scss/_mixins.scss                    |  1 +
 scss/_nav.scss                       | 22 +++------
 scss/_navbar.scss                    | 71 ++++++++++------------------
 scss/_normalize.scss                 | 10 ++--
 scss/_pager.scss                     | 19 +++++---
 scss/_pagination.scss                | 23 ++++-----
 scss/_scaffolding.scss               |  3 +-
 scss/_tables.scss                    |  6 ++-
 scss/mixins/_background-variant.scss |  6 ++-
 scss/mixins/_buttons.scss            | 18 +++++--
 scss/mixins/_hover.scss              | 28 +++++++++++
 scss/mixins/_label.scss              |  3 +-
 scss/mixins/_list-group.scss         | 15 +++---
 scss/mixins/_table-row.scss          | 26 +++++++---
 scss/mixins/_text-emphasis.scss      |  6 ++-
 26 files changed, 208 insertions(+), 187 deletions(-)
 create mode 100644 scss/mixins/_hover.scss

diff --git a/scss/_badge.scss b/scss/_badge.scss
index 2c70b59fc6..b3afccd797 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -47,8 +47,7 @@
 
 // Hover state, but only for links
 a.badge {
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $badge-link-hover-color;
     text-decoration: none;
     cursor: pointer;
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 839ce25878..6e8ae63ded 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -14,12 +14,14 @@
     float: left;
 
     // Bring the "active" button to the front
-    &:hover,
     &:focus,
     &:active,
     &.active {
       z-index: 2;
     }
+    @include hover {
+      z-index: 2;
+    }
   }
 }
 
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 41485acd3f..5f4b3bc426 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -29,8 +29,9 @@
     }
   }
 
-  &:hover,
-  &:focus,
+  @include hover-focus {
+    text-decoration: none;
+  }
   &.focus {
     text-decoration: none;
   }
@@ -94,21 +95,21 @@
     @include box-shadow(none);
   }
   &,
-  &:hover,
   &:focus,
   &:active {
     border-color: transparent;
   }
-  &:hover,
-  &:focus {
+  @include hover {
+    border-color: transparent;
+  }
+  @include hover-focus {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
     background-color: transparent;
   }
   &:disabled,
   fieldset[disabled] & {
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $btn-link-disabled-color;
       text-decoration: none;
     }
diff --git a/scss/_card.scss b/scss/_card.scss
index 9ff7850f7d..eda67b8acf 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -20,8 +20,10 @@
     margin-left: .75rem;
   }
 }
-.card-link:hover {
-  text-decoration: none;
+.card-link {
+  @include hover {
+    text-decoration: none;
+  }
 }
 
 
@@ -89,9 +91,10 @@
   .card-blockquote > footer {
     color: rgba(255,255,255,.65);
   }
-  .card-link:hover,
-  .card-link:focus {
-    color: #fff;
+  .card-link {
+    @include hover-focus {
+      color: #fff;
+    }
   }
 }
 
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 692ac938bb..90aee7ad95 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -115,8 +115,7 @@
   }
 
   // Hover/focus state
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $carousel-control-color;
     text-decoration: none;
     outline: 0;
diff --git a/scss/_close.scss b/scss/_close.scss
index 11815db27f..da86108d6f 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -12,8 +12,7 @@
   text-shadow: $close-text-shadow;
   opacity: .2;
 
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $close-color;
     text-decoration: none;
     cursor: pointer;
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 5b307f1283..b5043b4696 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -182,10 +182,11 @@
 }
 
 // Hover state
-// Uncomment if you need it, but be aware of the sticky iOS states.
-// .select select:hover {
-//   background-color: #ddd;
-// }
+.select select {
+  @include hover {
+    background-color: #ddd;
+  }
+}
 
 
 // Media query to target Firefox only
@@ -223,11 +224,11 @@
     content: "";
     background-color: #eee;
   }
-  .select select:hover,
-  .select select:focus,
-  .select select:active {
-    color: #555;
-    background-color: #eee;
+  .select select {
+    @include hover-focus-active {
+      color: #555;
+      background-color: #eee;
+    }
   }
 }
 
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 8abea3c417..469aa561a0 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -67,8 +67,7 @@
 
 // Hover/Focus state
 .dropdown-menu > li > a {
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $dropdown-link-hover-color;
     text-decoration: none;
     background-color: $dropdown-link-hover-bg;
@@ -77,9 +76,7 @@
 
 // Active state
 .dropdown-menu > .active > a {
-  &,
-  &:hover,
-  &:focus {
+  @include plain-hover-focus {
     color: $dropdown-link-active-color;
     text-decoration: none;
     background-color: $dropdown-link-active-bg;
@@ -92,15 +89,12 @@
 // Gray out text and ensure the hover/focus state remains gray
 
 .dropdown-menu > .disabled > a {
-  &,
-  &:hover,
-  &:focus {
+  @include plain-hover-focus {
     color: $dropdown-link-disabled-color;
   }
 
   // Nuke hover/focus effects
-  &:hover,
-  &:focus {
+  @include hover-focus {
     text-decoration: none;
     cursor: $cursor-disabled;
     background-color: transparent;
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index dbc36c08e0..ec6e385e94 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -143,9 +143,7 @@
       margin-left: -1px;
     }
     // Bring the "active" button to the front
-    &:hover,
-    &:focus,
-    &:active {
+    @include hover-focus-active {
       z-index: 2;
     }
   }
diff --git a/scss/_labels.scss b/scss/_labels.scss
index 8503d23291..5c4a29afa1 100644
--- a/scss/_labels.scss
+++ b/scss/_labels.scss
@@ -28,8 +28,7 @@
 
 // Add hover effects, but only for links
 a.label {
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $label-link-hover-color;
     text-decoration: none;
     cursor: pointer;
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 58767105d1..f1af67640d 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -51,8 +51,7 @@ a.list-group-item {
   }
 
   // Hover state
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $list-group-link-hover-color;
     text-decoration: none;
     background-color: $list-group-hover-bg;
@@ -61,39 +60,39 @@ a.list-group-item {
 
 .list-group-item {
   // Disabled state
-  &.disabled,
-  &.disabled:hover,
-  &.disabled:focus {
-    color: $list-group-disabled-color;
-    cursor: $cursor-disabled;
-    background-color: $list-group-disabled-bg;
+  &.disabled {
+    @include plain-hover-focus {
+      color: $list-group-disabled-color;
+      cursor: $cursor-disabled;
+      background-color: $list-group-disabled-bg;
 
-    // Force color to inherit for custom content
-    .list-group-item-heading {
-      color: inherit;
-    }
-    .list-group-item-text {
-      color: $list-group-disabled-text-color;
+      // Force color to inherit for custom content
+      .list-group-item-heading {
+        color: inherit;
+      }
+      .list-group-item-text {
+        color: $list-group-disabled-text-color;
+      }
     }
   }
 
   // Active class on item itself, not parent
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    z-index: 2; // Place active items above their siblings for proper border styling
-    color: $list-group-active-color;
-    background-color: $list-group-active-bg;
-    border-color: $list-group-active-border;
+  &.active {
+    @include plain-hover-focus {
+      z-index: 2; // Place active items above their siblings for proper border styling
+      color: $list-group-active-color;
+      background-color: $list-group-active-bg;
+      border-color: $list-group-active-border;
 
-    // Force color to inherit for custom content
-    .list-group-item-heading,
-    .list-group-item-heading > small,
-    .list-group-item-heading > .small {
-      color: inherit;
-    }
-    .list-group-item-text {
-      color: $list-group-active-text-color;
+      // Force color to inherit for custom content
+      .list-group-item-heading,
+      .list-group-item-heading > small,
+      .list-group-item-heading > .small {
+        color: inherit;
+      }
+      .list-group-item-text {
+        color: $list-group-active-text-color;
+      }
     }
   }
 }
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 36f52a8932..944ff669c6 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -26,6 +26,7 @@
 // Utilities
 @import "mixins/breakpoints";
 @import "mixins/hide-text";
+@import "mixins/hover";
 @import "mixins/image";
 @import "mixins/label";
 @import "mixins/reset-filter";
diff --git a/scss/_nav.scss b/scss/_nav.scss
index e989a40c1b..3d27891be7 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -18,8 +18,7 @@
   padding: $nav-link-padding;
   line-height: $line-height-base;
 
-  &:hover,
-  &:focus {
+  @include hover-focus {
     text-decoration: none;
     background-color: $nav-link-hover-bg;
   }
@@ -29,9 +28,7 @@
   &.disabled {
     color: $nav-disabled-link-color;
 
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       color: $nav-disabled-link-hover-color;
       cursor: $cursor-disabled;
       background-color: transparent;
@@ -62,8 +59,7 @@
     border: 1px solid transparent;
     @include border-radius($border-radius-base $border-radius-base 0 0);
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
     }
   }
@@ -72,9 +68,7 @@
   .active > .nav-link,
   .nav-link.open,
   .nav-link.active {
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       color: $nav-tabs-active-link-hover-color;
       background-color: $nav-tabs-active-link-hover-bg;
       border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
@@ -83,9 +77,7 @@
 
   .disabled > .nav-link,
   .nav-link.disabled {
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       color: $nav-disabled-link-color;
       background-color: transparent;
       border-color: transparent;
@@ -116,9 +108,7 @@
   .active > .nav-link,
   .nav-link.open,
   .nav-link.active {
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       color: $component-active-color;
       cursor: default;
       background-color: $component-active-bg;
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 2c12049a01..6907ae7249 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -69,9 +69,10 @@
   font-size: $font-size-lg;
   line-height: $line-height-computed;
 
-  > a:hover,
-  > a:focus {
-    text-decoration: none;
+  > a {
+    @include hover-focus {
+      text-decoration: none;
+    }
   }
 
   > img {
@@ -95,8 +96,7 @@
   background: none;
   border: 0;
 
-  &:hover,
-  &:focus {
+  @include hover-focus {
     text-decoration: none;
   }
 }
@@ -223,8 +223,7 @@
   .navbar-brand {
     color: $navbar-default-brand-color;
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-default-brand-hover-color;
       background-color: $navbar-default-brand-hover-bg;
     }
@@ -238,24 +237,19 @@
     > li > a {
       color: $navbar-default-link-color;
 
-      &:hover,
-      &:focus {
+      @include hover-focus {
         color: $navbar-default-link-hover-color;
         background-color: $navbar-default-link-hover-bg;
       }
     }
     > .active > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-default-link-active-color;
         background-color: $navbar-default-link-active-bg;
       }
     }
     > .disabled > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-default-link-disabled-color;
         background-color: $navbar-default-link-disabled-bg;
       }
@@ -264,8 +258,7 @@
 
   .navbar-toggle {
     border-color: $navbar-default-toggle-border-color;
-    &:hover,
-    &:focus {
+    @include hover-focus {
       background-color: $navbar-default-toggle-hover-bg;
     }
     .icon-bar {
@@ -282,9 +275,7 @@
   .navbar-nav {
     // Remove background color from open dropdown
     > .open > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-default-link-active-color;
         background-color: $navbar-default-link-active-bg;
       }
@@ -298,21 +289,19 @@
 
   .navbar-link {
     color: $navbar-default-link-color;
-    &:hover {
+    @include hover {
       color: $navbar-default-link-hover-color;
     }
   }
 
   .btn-link {
     color: $navbar-default-link-color;
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-default-link-hover-color;
     }
     &:disabled,
     fieldset[disabled] & {
-      &:hover,
-      &:focus {
+      @include hover-focus {
         color: $navbar-default-link-disabled-color;
       }
     }
@@ -330,14 +319,12 @@
   .nav-pills > .nav-item > .nav-link {
     color: $navbar-inverse-link-color;
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-inverse-link-hover-color;
     }
   }
   .nav-pills > .nav-item > .nav-link {
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-inverse-link-active-color;
       background-color: $navbar-inverse-link-active-bg;
     }
@@ -351,8 +338,7 @@
 
   .navbar-brand {
     color: $navbar-inverse-brand-color;
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-inverse-brand-hover-color;
       background-color: $navbar-inverse-brand-hover-bg;
     }
@@ -366,24 +352,19 @@
     > li > a {
       color: $navbar-inverse-link-color;
 
-      &:hover,
-      &:focus {
+      @include hover-focus {
         color: $navbar-inverse-link-hover-color;
         background-color: $navbar-inverse-link-hover-bg;
       }
     }
     > .active > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-inverse-link-active-color;
         background-color: $navbar-inverse-link-active-bg;
       }
     }
     > .disabled > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-inverse-link-disabled-color;
         background-color: $navbar-inverse-link-disabled-bg;
       }
@@ -398,9 +379,7 @@
   // Dropdowns
   .navbar-nav {
     > .open > a {
-      &,
-      &:hover,
-      &:focus {
+      @include plain-hover-focus {
         color: $navbar-inverse-link-active-color;
         background-color: $navbar-inverse-link-active-bg;
       }
@@ -409,7 +388,7 @@
 
   .navbar-link {
     color: $navbar-inverse-link-color;
-    &:hover {
+    @include hover {
       color: $navbar-inverse-link-hover-color;
     }
   }
@@ -417,15 +396,13 @@
   .btn-link {
     color: $navbar-inverse-link-color;
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $navbar-inverse-link-hover-color;
     }
 
     &:disabled,
     fieldset[disabled] & {
-      &:hover,
-      &:focus {
+      @include hover-focus {
         color: $navbar-inverse-link-disabled-color;
       }
     }
diff --git a/scss/_normalize.scss b/scss/_normalize.scss
index 62a085a484..135fe2a3ad 100644
--- a/scss/_normalize.scss
+++ b/scss/_normalize.scss
@@ -94,9 +94,13 @@ a {
 // Improve readability when focused and also mouse hovered in all browsers.
 //
 
-a:active,
-a:hover {
-  outline: 0;
+a {
+  &:active {
+    outline: 0;
+  }
+  @include hover {
+    outline: 0;
+  }
 }
 
 // Text-level semantics
diff --git a/scss/_pager.scss b/scss/_pager.scss
index 4009c0946e..cb4ccfb354 100644
--- a/scss/_pager.scss
+++ b/scss/_pager.scss
@@ -22,17 +22,22 @@
       border-radius: $pager-border-radius;
     }
 
-    > a:hover,
-    > a:focus {
-      text-decoration: none;
-      background-color: $pager-hover-bg;
+    > a {
+      @include hover-focus {
+        text-decoration: none;
+        background-color: $pager-hover-bg;
+      }
     }
   }
 
   .disabled {
-    > a,
-    > a:hover,
-    > a:focus,
+    > a {
+      @include plain-hover-focus {
+        color: $pager-disabled-color;
+        cursor: $cursor-disabled;
+        background-color: $pager-bg;
+      }
+    }
     > span {
       color: $pager-disabled-color;
       cursor: $cursor-disabled;
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 6af0308a7d..55814b94a1 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -39,8 +39,7 @@
 
   > li > a,
   > li > span {
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $pagination-hover-color;
       background-color: $pagination-hover-bg;
       border-color: $pagination-hover-border;
@@ -49,9 +48,7 @@
 
   > .active > a,
   > .active > span {
-    &,
-    &:hover,
-    &:focus {
+    @include plain-hover-focus {
       z-index: 2;
       color: $pagination-active-color;
       cursor: default;
@@ -62,15 +59,13 @@
 
   > .disabled {
     > span,
-    > span:hover,
-    > span:focus,
-    > a,
-    > a:hover,
-    > a:focus {
-      color: $pagination-disabled-color;
-      cursor: $cursor-disabled;
-      background-color: $pagination-disabled-bg;
-      border-color: $pagination-disabled-border;
+    > a {
+      @include plain-hover-focus {
+        color: $pagination-disabled-color;
+        cursor: $cursor-disabled;
+        background-color: $pagination-disabled-bg;
+        border-color: $pagination-disabled-border;
+      }
     }
   }
 }
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index 038ee020b7..a6abc862d1 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -72,8 +72,7 @@ a {
   color: $link-color;
   text-decoration: none;
 
-  &:hover,
-  &:focus {
+  @include hover-focus {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 43f50c5bea..0156b0fccb 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -99,8 +99,10 @@ th {
 // Placed here since it has to come after the potential zebra striping
 
 .table-hover {
-  tbody tr:hover {
-    background-color: $table-bg-hover;
+  tbody tr {
+    @include hover {
+      background-color: $table-bg-hover;
+    }
   }
 }
 
diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
index 4993bd2b80..577f019ca2 100644
--- a/scss/mixins/_background-variant.scss
+++ b/scss/mixins/_background-variant.scss
@@ -5,7 +5,9 @@
   #{$parent} {
     background-color: $color;
   }
-  a#{$parent}:hover {
-    background-color: darken($color, 10%);
+  a#{$parent} {
+    @include hover {
+      background-color: darken($color, 10%);
+    }
   }
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index b043d60de3..f18b9c253c 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -10,15 +10,22 @@
 //  $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
 //  .box-shadow($shadow);
 
-  &:hover,
+  $active-background: darken($background, 10%);
+  $active-border: darken($border, 12%);
+
   &:focus,
   &.focus,
   &:active,
   &.active,
   .open > &.dropdown-toggle {
     color: $color;
-    background-color: darken($background, 10%);
-        border-color: darken($border, 12%);
+    background-color: $active-background;
+        border-color: $active-border;
+  }
+  @include hover {
+    color: $color;
+    background-color: $active-background;
+        border-color: $active-border;
   }
   &:active,
   &.active,
@@ -31,7 +38,6 @@
   &:disabled,
   fieldset[disabled] & {
     &,
-    &:hover,
     &:focus,
     &.focus,
     &:active,
@@ -39,6 +45,10 @@
       background-color: $background;
           border-color: $border;
     }
+    @include hover {
+      background-color: $background;
+          border-color: $border;
+    }
   }
 
   .badge {
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
new file mode 100644
index 0000000000..4c415e9b44
--- /dev/null
+++ b/scss/mixins/_hover.scss
@@ -0,0 +1,28 @@
+@mixin hover {
+  // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+  // Currently shimmed by https://github.com/cvrebert/mq4-hover-hover-shim
+  @media (hover: hover) {
+    &:hover { @content }
+  }
+}
+
+@mixin hover-focus {
+  &:focus { @content }
+  @include hover { @content }
+}
+
+@mixin plain-hover-focus {
+  &,
+  &:focus {
+    @content
+  }
+  @include hover { @content }
+}
+
+@mixin hover-focus-active {
+  &:focus,
+  &:active {
+    @content
+  }
+  @include hover { @content }
+}
diff --git a/scss/mixins/_label.scss b/scss/mixins/_label.scss
index eda6dfd29e..4bc48c60dd 100644
--- a/scss/mixins/_label.scss
+++ b/scss/mixins/_label.scss
@@ -4,8 +4,7 @@
   background-color: $color;
 
   &[href] {
-    &:hover,
-    &:focus {
+    @include hover-focus {
       background-color: darken($color, 10%);
     }
   }
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index 0683d340c0..1f17729b03 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -13,18 +13,17 @@
       color: inherit;
     }
 
-    &:hover,
-    &:focus {
+    @include hover-focus {
       color: $color;
       background-color: darken($background, 5%);
     }
 
-    &.active,
-    &.active:hover,
-    &.active:focus {
-      color: #fff;
-      background-color: $color;
-      border-color: $color;
+    &.active {
+      @include plain-hover-focus {
+        color: #fff;
+        background-color: $color;
+        border-color: $color;
+      }
     }
   }
 }
diff --git a/scss/mixins/_table-row.scss b/scss/mixins/_table-row.scss
index 136795081e..1a48e92630 100644
--- a/scss/mixins/_table-row.scss
+++ b/scss/mixins/_table-row.scss
@@ -17,12 +17,26 @@
   // Hover states for `.table-hover`
   // Note: this is not available for cells or rows within `thead` or `tfoot`.
   .table-hover > tbody > tr {
-    > td.#{$state}:hover,
-    > th.#{$state}:hover,
-    &.#{$state}:hover > td,
-    &:hover > .#{$state},
-    &.#{$state}:hover > th {
-      background-color: darken($background, 5%);
+    $hover-background: darken($background, 5%);
+
+    > td.#{$state},
+    > th.#{$state} {
+      @include hover {
+        background-color: $hover-background;
+      }
+    }
+    &.#{$state} {
+      @include hover {
+        > td,
+        > th {
+          background-color: $hover-background;
+        }
+      }
+    }
+    @include hover {
+      > .#{$state} {
+        background-color: $hover-background;
+      }
     }
   }
 }
diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss
index 4424a38d44..ab3869d31e 100644
--- a/scss/mixins/_text-emphasis.scss
+++ b/scss/mixins/_text-emphasis.scss
@@ -4,7 +4,9 @@
   #{$parent} {
     color: $color;
   }
-  a#{$parent}:hover {
-    color: darken($color, 10%);
+  a#{$parent} {
+    @include hover {
+      color: darken($color, 10%);
+    }
   }
 }