Skip to content

Commit

Permalink
Drop .blockquote-reverse, replace with text utils, and redesign block…
Browse files Browse the repository at this point in the history
…quote to not have a border
  • Loading branch information
mdo committed Jun 30, 2017
1 parent 4554d74 commit 45722e9
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 25 deletions.
13 changes: 10 additions & 3 deletions docs/4.0/content/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
20 changes: 0 additions & 20 deletions scss/_type.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 changes: 0 additions & 2 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 45722e9

Please sign in to comment.