Fixes #10399: Add hover styles to text emphasis classes

twbs · Sep 4, 2013 · 1c4bdb0 · 1c4bdb0
1 parent c0f6d72
commit 1c4bdb0
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/css.html b/css.html
@@ -740,7 +740,7 @@ <h3>Alignment classes</h3>
 {% endhighlight %}
 
     <h3>Emphasis classes</h3>
-    <p>Convey meaning through color with a handful of emphasis utility classes.</p>
+    <p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
     <div class="bs-example">
       <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
       <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
@@ -416,22 +416,42 @@ cite {
   color: #428bca;
 }
 
+.text-primary:hover {
+  color: #3071a9;
+}
+
 .text-warning {
   color: #c09853;
 }
 
+.text-warning:hover {
+  color: #a47e3c;
+}
+
 .text-danger {
   color: #b94a48;
 }
 
+.text-danger:hover {
+  color: #953b39;
+}
+
 .text-success {
   color: #468847;
 }
 
+.text-success:hover {
+  color: #356635;
+}
+
 .text-info {
   color: #3a87ad;
 }
 
+.text-info:hover {
+  color: #2d6987;
+}
+
 .text-left {
   text-align: left;
 }

diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/less/type.less b/less/type.less
@@ -32,12 +32,39 @@ small,
 cite    { font-style: normal; }
 
 // Contextual emphasis
-.text-muted          { color: @text-muted; }
-.text-primary        { color: @brand-primary; }
-.text-warning        { color: @state-warning-text; }
-.text-danger         { color: @state-danger-text; }
-.text-success        { color: @state-success-text; }
-.text-info           { color: @state-info-text; }
+.text-muted {
+  color: @text-muted;
+}
+.text-primary {
+  color: @brand-primary;
+  &:hover {
+    color: darken(@brand-primary, 10%);
+  }
+}
+.text-warning {
+  color: @state-warning-text;
+  &:hover {
+    color: darken(@state-warning-text, 10%);
+  }
+}
+.text-danger {
+  color: @state-danger-text;
+  &:hover {
+    color: darken(@state-danger-text, 10%);
+  }
+}
+.text-success {
+  color: @state-success-text;
+  &:hover {
+    color: darken(@state-success-text, 10%);
+  }
+}
+.text-info {
+  color: @state-info-text;
+  &:hover {
+    color: darken(@state-info-text, 10%);
+  }
+}
 
 // Alignment
 .text-left           { text-align: left; }