clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 10:37:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Drop .blockquote-reverse, replace with text utils, and redesign blockquote to not have a border

Browse Source
This commit is contained in:
Mark Otto 2017-06-30 14:22:11 -07:00 committed by Mark Otto
parent 4554d74221
commit 45722e94ac
3 changed files with 10 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/4.0/content/typography.md
View File

@ -202,12 +202,19 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the
</blockquote>
{% endexample %}
### Reverse layout
### Alignment
Add `.blockquote-reverse` for a blockquote with right-aligned content.
Use text utilities as needed to change the alignment of your blockquote.
{% example html %}
<blockquote class="blockquote blockquote-reverse">
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
{% endexample %}
{% example html %}
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

20
scss/_type.scss
View File

@ -108,10 +108,8 @@ mark,
// Blockquotes
.blockquote {
padding: ($spacer / 2) $spacer;
margin-bottom: $spacer;
font-size: $blockquote-font-size;
border-left: $blockquote-border-width solid $blockquote-border-color;
}
.blockquote-footer {
@ -123,21 +121,3 @@ mark,
content: "\2014 \00A0"; // em dash, nbsp
}
}
// Opposite alignment of blockquote
.blockquote-reverse {
padding-right: $spacer;
padding-left: 0;
text-align: right;
border-right: $blockquote-border-width solid $blockquote-border-color;
border-left: 0;
}
.blockquote-reverse .blockquote-footer {
&::before {
content: "";
}
&::after {
content: "\00A0 \2014"; // nbsp, em dash
}
}

2
scss/_variables.scss
View File

@ -279,8 +279,6 @@ $text-muted: $gray-600 !default;
$blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-200 !default;
$blockquote-border-width: .25rem !default;
$hr-border-color: rgba($black,.1) !default;
$hr-border-width: $border-width !default;