0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00

Fixes #11952: Refactor blockquote styles

* Deprecate .pull-right class for .blockquote-reverse
* Move font-size change to the parent, blockquote, instead of setting on the p element to allow more flexible content
This commit is contained in:
Mark Otto 2013-12-19 19:40:08 -08:00
parent 81b1e6801f
commit 2854c5c3fb
6 changed files with 54 additions and 43 deletions

View File

@ -872,15 +872,15 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h4>Alternate displays</h4> <h4>Alternate displays</h4>
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p> <p>Add <code>.blockquote-reverse</code> for blockquote with right-aligned content.</p>
<div class="bs-example" style="overflow: hidden;"> <div class="bs-example" style="overflow: hidden;">
<blockquote class="pull-right"> <blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
</div> </div>
{% highlight html %} {% highlight html %}
<blockquote class="pull-right"> <blockquote class="blockquote-reverse">
... ...
</blockquote> </blockquote>
{% endhighlight %} {% endhighlight %}

View File

@ -616,18 +616,19 @@ abbr[data-original-title] {
blockquote { blockquote {
padding: 10px 20px; padding: 10px 20px;
margin: 0 0 20px; margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee; border-left: 5px solid #eee;
} }
blockquote p { blockquote p:last-child,
font-size: 17.5px; blockquote ul:last-child,
} blockquote ol:last-child {
blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
blockquote footer, blockquote footer,
blockquote small, blockquote small,
blockquote .small { blockquote .small {
display: block; display: block;
font-size: 80%;
line-height: 1.428571429; line-height: 1.428571429;
color: #999; color: #999;
} }
@ -636,22 +637,27 @@ blockquote small:before,
blockquote .small:before { blockquote .small:before {
content: '\2014 \00A0'; content: '\2014 \00A0';
} }
.blockquote-reverse,
blockquote.pull-right { blockquote.pull-right {
padding-right: 15px; padding-right: 15px;
padding-left: 0; padding-left: 0;
text-align: right;
border-right: 5px solid #eee; border-right: 5px solid #eee;
border-left: 0; border-left: 0;
} }
blockquote.pull-right p, .blockquote-reverse footer:before,
blockquote.pull-right small, blockquote.pull-right footer:before,
blockquote.pull-right .small { .blockquote-reverse small:before,
text-align: right;
}
blockquote.pull-right small:before, blockquote.pull-right small:before,
.blockquote-reverse .small:before,
blockquote.pull-right .small:before { blockquote.pull-right .small:before {
content: ''; content: '';
} }
.blockquote-reverse footer:after,
blockquote.pull-right footer:after,
.blockquote-reverse small:after,
blockquote.pull-right small:after, blockquote.pull-right small:after,
.blockquote-reverse .small:after,
blockquote.pull-right .small:after { blockquote.pull-right .small:after {
content: '\00A0 \2014'; content: '\00A0 \2014';
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1573,15 +1573,15 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
.parents('.active') .parents('.active')
.removeClass('active') .removeClass('active')
var selector = this.selector var selector = this.selector +
+ '[data-target="' + target + '"],' '[data-target="' + target + '"],' +
+ this.selector + '[href="' + target + '"]' this.selector + '[href="' + target + '"]'
var active = $(selector) var active = $(selector)
.parents('li') .parents('li')
.addClass('active') .addClass('active')
if (active.parent('.dropdown-menu').length) { if (active.parent('.dropdown-menu').length) {
active = active active = active
.closest('li.dropdown') .closest('li.dropdown')
.addClass('active') .addClass('active')

View File

@ -263,12 +263,15 @@ abbr[data-original-title] {
blockquote { blockquote {
padding: (@line-height-computed / 2) @line-height-computed; padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed; margin: 0 0 @line-height-computed;
font-size: (@font-size-base * 1.25);
border-left: 5px solid @blockquote-border-color; border-left: 5px solid @blockquote-border-color;
p {
font-size: (@font-size-base * 1.25); p,
} ul,
p:last-child { ol {
margin-bottom: 0; &:last-child {
margin-bottom: 0;
}
} }
// Deprecating small and .small for v3.1 // Deprecating small and .small for v3.1
@ -277,32 +280,34 @@ blockquote {
small, small,
.small { .small {
display: block; display: block;
font-size: 80%; // back to default font-size
line-height: @line-height-base; line-height: @line-height-base;
color: @blockquote-small-color; color: @blockquote-small-color;
&:before { &:before {
content: '\2014 \00A0'; // EM DASH, NBSP content: '\2014 \00A0'; // em dash, nbsp
} }
} }
}
// Float right with text-align: right // Opposite alignment of blockquote
&.pull-right { //
padding-right: 15px; // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.
padding-left: 0; .blockquote-reverse,
border-right: 5px solid @blockquote-border-color; blockquote.pull-right {
border-left: 0; padding-right: 15px;
p, padding-left: 0;
small, border-right: 5px solid @blockquote-border-color;
.small { border-left: 0;
text-align: right; text-align: right;
}
small, // Account for citation
.small { footer,
&:before { small,
content: ''; .small {
} &:before { content: ''; }
&:after { &:after {
content: '\00A0 \2014'; // NBSP, EM DASH content: '\00A0 \2014'; // nbsp, em dash
}
} }
} }
} }