0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Fixes #10399: Add hover styles to text emphasis classes

This commit is contained in:
Mark Otto 2013-09-04 13:56:32 -07:00
parent c0f6d722b0
commit 1c4bdb053b
4 changed files with 55 additions and 8 deletions

View File

@ -740,7 +740,7 @@ base_url: "../"
{% 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>

View File

@ -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;
}

File diff suppressed because one or more lines are too long

View File

@ -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; }