Merge pull request #12248 from twbs/bg-variant

refactoring: add & use .bg-variant() mixin

dist/css/bootstrap.css

@@ -492,31 +492,31 @@ cite {
 .text-primary {
   color: #428bca;
 }
-.text-primary:hover {
+a.text-primary:hover {
   color: #3071a9;
 }
 .text-success {
   color: #3c763d;
 }
-.text-success:hover {
+a.text-success:hover {
   color: #2b542c;
 }
 .text-info {
   color: #31708f;
 }
-.text-info:hover {
+a.text-info:hover {
   color: #245269;
 }
 .text-warning {
   color: #8a6d3b;
 }
-.text-warning:hover {
+a.text-warning:hover {
   color: #66512c;
 }
 .text-danger {
   color: #a94442;
 }
-.text-danger:hover {
+a.text-danger:hover {
   color: #843534;
 }
 .bg-primary {

less/mixins.less

@@ -577,11 +577,20 @@
   }
 }
 
+// Contextual backgrounds
+// -------------------------
+.bg-variant(@color) {
+  background-color: @color;
+  a&:hover {
+    background-color: darken(@color, 10%);
+  }
+}
+
 // Typography
 // -------------------------
 .text-emphasis-variant(@color) {
   color: @color;
-  &:hover {
+  a&:hover {
     color: darken(@color, 10%);
   }
 }

less/type.less

@@ -114,34 +114,19 @@ cite    { font-style: normal; }
   // Given the contrast here, this is the only class to have its color inverted
   // automatically.
   color: #fff;
-  background-color: @brand-primary;
-  a&:hover {
-    background-color: darken(@brand-primary, 10%);
-  }
+  .bg-variant(@brand-primary);
 }
 .bg-success {
-  background-color: @state-success-bg;
-  a&:hover {
-    background-color: darken(@state-success-bg, 10%);
-  }
+  .bg-variant(@state-success-bg);
 }
 .bg-info {
-  background-color: @state-info-bg;
-  a&:hover {
-    background-color: darken(@state-info-bg, 10%);
-  }
+  .bg-variant(@state-info-bg);
 }
 .bg-warning {
-  background-color: @state-warning-bg;
-  a&:hover {
-    background-color: darken(@state-warning-bg, 10%);
-  }
+  .bg-variant(@state-warning-bg);
 }
 .bg-danger {
-  background-color: @state-danger-bg;
-  a&:hover {
-    background-color: darken(@state-danger-bg, 10%);
-  }
+  .bg-variant(@state-danger-bg);
 }