rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #18138 from bassjobsen/patch-12

Browse Source 
refactor blockqoutes to to avoid tag selectors & child selectors
This commit is contained in:
Mark Otto 2015-12-07 23:32:31 -08:00
commit 886bbe9bc0
2 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/content/typography.md
View File

@ -147,22 +147,22 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size.
## Blockquotes ## Blockquotes
For quoting blocks of content from another source within your document. Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p>`. For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p class="blockquote-text">` or list `<ul class="blockquote-list">` , `<ol class="blockquote-list">`.
{% example html %} {% example html %}
<blockquote> <blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote> </blockquote>
{% endexample %} {% endexample %}
### Naming a source ### Naming a source
Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`. Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
{% example html %} {% example html %}
<blockquote class="blockquote"> <blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p class="blockquote-text">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 class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
{% endexample %} {% endexample %}
@ -172,8 +172,8 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
{% example html %} {% example html %}
<blockquote class="blockquote blockquote-reverse"> <blockquote class="blockquote blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p class="blockquote-text">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 class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
{% endexample %} {% endexample %}

21
scss/_type.scss
View File

@ -125,16 +125,17 @@ mark,
margin-bottom: $spacer; margin-bottom: $spacer;
font-size: $blockquote-font-size; font-size: $blockquote-font-size;
border-left: .25rem solid $blockquote-border-color; border-left: .25rem solid $blockquote-border-color;
}
p, .blockquote-text,
ul, .blockquote-list // ul, ol
ol { {
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
footer { .blockquote-footer {
display: block; display: block;
font-size: 80%; // back to default font-size font-size: 80%; // back to default font-size
line-height: $line-height; line-height: $line-height;
@ -143,7 +144,6 @@ mark,
&::before { &::before {
content: "\2014 \00A0"; // em dash, nbsp content: "\2014 \00A0"; // em dash, nbsp
} }
}
} }
// Opposite alignment of blockquote // Opposite alignment of blockquote
@ -153,12 +153,13 @@ mark,
text-align: right; text-align: right;
border-right: .25rem solid $blockquote-border-color; border-right: .25rem solid $blockquote-border-color;
border-left: 0; border-left: 0;
}
// Account for citation .blockquote-reverse .blockquote-footer {
footer { &::before {
&::before { content: ""; } content: "";
}
&::after { &::after {
content: "\00A0 \2014"; // nbsp, em dash content: "\00A0 \2014"; // nbsp, em dash
} }
}
} }