diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md index 338c413aebfdd86e327c4bf6db2e9099be337fbd..9ae27f0c47cae4ff3e7fbc1827a5f6feada48889 100644 --- a/docs/4.0/content/typography.md +++ b/docs/4.0/content/typography.md @@ -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> diff --git a/scss/_type.scss b/scss/_type.scss index 5ecc336aef61dbfba2a4b23dad584b23e76c7011..8928341da88ed953e020b08be851d8ca403ccaa6 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -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 - } -} diff --git a/scss/_variables.scss b/scss/_variables.scss index f788c7cb5931f353c532fdaa137c1e9d32f1def2..1184fc6c4febc978347eb79631d957067237e99c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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;