google/material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Re-add captions for snippets (Closes #972)

Browse Source
This commit is contained in:
Surma 2015-07-20 13:15:41 +01:00 committed by Addy Osmani
parent a58d3327c2
commit 62ff493131
2 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/_assets/main.css
View File

@ -546,21 +546,37 @@ body:not(.about) .mdl-navigation__link.download > button {
border-spacing: 0;
width: 100%;
}
.snippet-group .snippet-demos {
.snippet-group .snippet-demos,
.snippet-group .snippet-captions {
display: table-row;
}
.snippet-group .snippet-demo .snippet-demo-container {
text-align: left;
display: inline-block;
}
.snippet-group .snippet-captions {
background-color: white;
height: 48px;
}
.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;
text-align: center;
vertical-align: middle;
margin: 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 {
padding: 0px 40px 40px 40px;
}

9
docs/_templates/snippets.html vendored
View File

@ -20,6 +20,15 @@
{%- endfor %}
<div class="snippet-demo-padding"></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 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">&lt;style&gt;{% set extra_css_file = "../../src/" + component_name + "/snippets/" + snippet.extra_codepen_css %}{% include extra_css_file ignore missing %}&lt;/style&gt;</div>{%- endfor %}{% if snippet_group.length !== 1 || !snippet_group[0].full_width %}<div class="codepen-extra-css">&lt;style&gt;