8000 Merge pull request #18138 from bassjobsen/patch-12 · liuwenye2010/bootstrap@886bbe9 · GitHub
[go: up one dir, main page]
Skip to content

Commit 886bbe9

Browse files
mdomdo
committed
Merge pull request twbs#18138 from bassjobsen/patch-12
 refactor blockqoutes to to avoid tag selectors & child selectors
2 parents 7303977 + 0fdfde7 commit 886bbe9

File tree

2 files changed

+29
-28
lines changed

2 files changed

+29
-28
lines changed

‎docs/content/typography.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -147,22 +147,22 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size.
147147

148148
## Blockquotes
149149

150-
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>`.
150+
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">`.
151151

152152
{% example html %}
153-
<blockquote>
154-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
153+
<blockquote class="blockquote">
154+
<p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
155155
</blockquote>
156156
{% endexample %}
157157

158158
### Naming a source
159159

160-
Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`.
160+
Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
161161

162162
{% example html %}
163163
<blockquote class="blockquote">
164-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
165-
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
164+
<p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
165+
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
166166
</blockquote>
167167
{% endexample %}
168168

@@ -172,8 +172,8 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
172172

173173
{% example html %}
174174
<blockquote class="blockquote blockquote-reverse">
175-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
176-
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
175+
<p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
176+
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
177177
</blockquote>
178178
{% endexample %}
179179

‎scss/_type.scss

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -125,24 +125,24 @@ mark,
125125
margin-bottom: $spacer;
126126
font-size: $blockquote-font-size;
127127
border-left: .25rem solid $blockquote-border-color;
128+
}
128129

129-
p,
130-
ul,
131-
ol {
132-
&:last-child {
133-
margin-bottom: 0;
134-
}
130+
.blockquote-text,
131+
.blockquote-list // ul, ol
132+
{
133+
&:last-child {
134+
margin-bottom: 0;
135135
}
136+
}
136137

137-
footer {
138-
display: block;
139-
font-size: 80%; // back to default font-size
140-
line-height: $line-height;
141-
color: $blockquote-small-color;
138+
.blockquote-footer {
139+
display: block;
140+
font-size: 80%; // back to default font-size
141+
line-height: $line-height;
142+
color: $blockquote-small-color;
142143

143-
&::before {
144-
content: "\2014 \00A0"; // em dash, nbsp
145-
}
144+
&::before {
145+
content: "\2014 \00A0"; // em dash, nbsp
146146
}
147147
}
148148

@@ -153,12 +153,13 @@ mark,
153153
text-align: right;
154154
border-right: .25rem solid $blockquote-border-color;
155155
border-left: 0;
156+
}
156157

157-
// Account for citation
158-
footer {
159-
&::before { content: ""; }
160-
&::after {
161-
content: "\00A0 \2014"; // nbsp, em dash
162-
}
158+
.blockquote-reverse .blockquote-footer {
159+
&::before {
160+
content: "";
161+
}
162+
&::after {
163+
content: "\00A0 \2014"; // nbsp, em dash
163164
}
164165
}

0 commit comments

Comments
 (0)
0