Re-add captions for snippets (Closes #972)
This commit is contained in:
parent
a58d3327c2
commit
62ff493131
@ -546,21 +546,37 @@ body:not(.about) .mdl-navigation__link.download > button {
|
|||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.snippet-group .snippet-demos {
|
.snippet-group .snippet-demos,
|
||||||
|
.snippet-group .snippet-captions {
|
||||||
display: table-row;
|
display: table-row;
|
||||||
}
|
}
|
||||||
.snippet-group .snippet-demo .snippet-demo-container {
|
.snippet-group .snippet-demo .snippet-demo-container {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
.snippet-group .snippet-captions {
|
||||||
|
background-color: white;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
.snippet-group .snippet-demo,
|
.snippet-group .snippet-demo,
|
||||||
.snippet-group .snippet-demo-padding {
|
.snippet-group .snippet-demo-padding,
|
||||||
|
.snippet-group .snippet-caption,
|
||||||
|
.snippet-group .snippet-caption-padding {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snippet-group .snippet-caption {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 0px 40px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.snippet-group .snippet-demo {
|
.snippet-group .snippet-demo {
|
||||||
padding: 0px 40px 40px 40px;
|
padding: 0px 40px 40px 40px;
|
||||||
}
|
}
|
||||||
|
9
docs/_templates/snippets.html
vendored
9
docs/_templates/snippets.html
vendored
@ -20,6 +20,15 @@
|
|||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
<div class="snippet-demo-padding"></div>
|
<div class="snippet-demo-padding"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="snippet-captions">
|
||||||
|
<div class="snippet-caption-padding"></div>
|
||||||
|
{% for snippet in snippet_group %}
|
||||||
|
<div class="snippet-caption">
|
||||||
|
{{ snippet.caption }}
|
||||||
|
</div>
|
||||||
|
{%- endfor %}
|
||||||
|
<div class="snippet-caption-padding"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="snippet-code">
|
<div class="snippet-code">
|
||||||
<pre class="language-markup codepen-button-enabled">{% for snippet in snippet_group %}{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}<code id="{{ component_name }}/{{ snippet.file }}">{% filter e('html') %}{% include snippet_file ignore missing %}{% endfilter %}</code><div class="codepen-extra-css"><style>{% set extra_css_file = "../../src/" + component_name + "/snippets/" + snippet.extra_codepen_css %}{% include extra_css_file ignore missing %}</style></div>{%- endfor %}{% if snippet_group.length !== 1 || !snippet_group[0].full_width %}<div class="codepen-extra-css"><style>
|
<pre class="language-markup codepen-button-enabled">{% for snippet in snippet_group %}{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}<code id="{{ component_name }}/{{ snippet.file }}">{% filter e('html') %}{% include snippet_file ignore missing %}{% endfilter %}</code><div class="codepen-extra-css"><style>{% set extra_css_file = "../../src/" + component_name + "/snippets/" + snippet.extra_codepen_css %}{% include extra_css_file ignore missing %}</style></div>{%- endfor %}{% if snippet_group.length !== 1 || !snippet_group[0].full_width %}<div class="codepen-extra-css"><style>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user