put all :hover styles within @media (hover: hover)

diff --git a/scss/_badge.scss b/scss/_badge.scss
index 2c70b59fc683160b389711d0a7bd4123b921bcae..b3afccd7970cf0fa346e5a7398a8e9b436645a1f 100644 (file)
--- 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 839ce2587875b2063690ba8a28b40e268e761ec0..6e8ae63ded4d8d98d01d56d1ee0e80325ef160b4 100644 (file)
--- 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 41485acd3f762bfbba5149b8f9f2c74edb29ea55..5f4b3bc4261747cbd950d96ccd094979d7f9168a 100644 (file)
--- 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 9ff7850f7de9621c91477c2030e3d682c30e0475..eda67b8acf07c8452836c9c3d9d1bd5142e4f6c7 100644 (file)
--- 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 692ac938bb7321fea69c6b6fb048f68daba9ae14..90aee7ad959d0d604bfa4aea8489feab14340484 100644 (file)
--- 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 11815db27ff35e7f1f3cf7604ef4922cf0228020..da86108d6faab5e2e5644d1ea13e0c380c3f4577 100644 (file)
--- 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 5b307f12830389e2a8630efac9b18f446027f930..b5043b469620e95da88b3d7166c22fd8d6fea05b 100644 (file)
--- 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 8abea3c417561c88a8e3979d7acd1118ee64ccd1..469aa561a055beda34be4ac5f42f30b116f39738 100644 (file)
--- 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 dbc36c08e0d93a74664393d66b0213267ac2a488..ec6e385e94f17e917b5c8a129a736656e68fe870 100644 (file)
--- 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 8503d232918612cf47058b3683a754383d1cbe91..5c4a29afa1d92691b7603771ee2a4364ce8d2f8d 100644 (file)
--- 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 58767105d1a4a55f7db1056edaab1ceaae2e5bcf..f1af67640d6a9a45564a9cb8700bdd9d21941b76 100644 (file)
--- 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;
-
-    // Force color to inherit for custom content
-    .list-group-item-heading {
-      color: inherit;
-    }
-    .list-group-item-text {
-      color: $list-group-disabled-text-color;
+  &.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;
+      }
     }
   }
 
   // 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;
-
-    // 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;
+  &.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;
+      }
     }
   }
 }

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 36f52a8932d0479e952fde921b9bc3977af49f8a..944ff669c62d3cfc101ba75753a1a8bc08f09019 100644 (file)
--- 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 e989a40c1b8b408292255448d5042f8bd94cc5aa..3d27891be77ee98e8cf539fa5d98059e0a4bf024 100644 (file)
--- 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 2c12049a01fe94f54a2ae77f502186d9c077e4e0..6907ae724930f800efe212ba9f90ec18833ef519 100644 (file)
--- 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 62a085a4841a536094f22943c9557240e2d8c19d..135fe2a3ade90ea8192268ec9ed9cbffb2b7babc 100644 (file)
--- 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 4009c0946e1426f55bb859776e9ea191aa30a9eb..cb4ccfb354011a3b763b6dcda589258d3839d9f2 100644 (file)
--- 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 6af0308a7d6dd00e265572f2d7a70e506e6b9e6c..55814b94a1eca381696ba6787252004fa45371a5 100644 (file)
--- 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 038ee020b76a0973f2ba70df8c4174441d5b0f10..a6abc862d114e568939ce4247b7456bcb3d1b98e 100644 (file)
--- 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 43f50c5bea3fea87369712bfea6f3629a3f870df..0156b0fccbb05e1c863258477f2bb9e1f1b29b67 100644 (file)
--- 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 4993bd2b80126aa0523cd506f649d033ba1d07dd..577f019ca269ed4c4a12775de107696af213f387 100644 (file)
--- 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 b043d60de34bb24b2484c528871357d3b31ceb27..f18b9c253c488875dff712cc962430b43bf5f71e 100644 (file)
--- 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 (file)
index 0000000..4c415e9
--- /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 eda6dfd29ea1709380b27748ef5d082fed20903a..4bc48c60dd5a51fdad2365a1b1c2548ef30a1f8e 100644 (file)
--- 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 0683d340c0800afe6454f47d8cc7feb694baff41..1f17729b03c76308a639671448888946e5edd94f 100644 (file)
--- 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 136795081eb992d71b7a72dae19795bf71135316..1a48e92630fd77b8de9375123d79d846905db55e 100644 (file)
--- 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 4424a38d44380066f7987742ffd9b6b7d621d6d0..ab3869d31e63f07c78fa1856449d3381a5325edf 100644 (file)
--- 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%);
+    }
   }
 }