Merge pull request #598 from google/issue-573

Implement components scaffolding review (fixes #573)
master
Surma 2015-07-02 11:11:23 +01:00
commit 10823c4f14
3 changed files with 50 additions and 5 deletions

View File

@ -47,6 +47,7 @@ mdl-components-dd {
box-sizing: border-box; box-sizing: border-box;
padding: 24px 0; padding: 24px 0;
flex-shrink: 0; flex-shrink: 0;
z-index: 1;
} }
.mdl-components .mdl-components__pages { .mdl-components .mdl-components__pages {
@ -88,6 +89,13 @@ mdl-components-dd {
margin-top: 30px; margin-top: 30px;
} }
.mdl-components .component-title h3 {
font-size: 16px;
font-weight: 500;
margin-top: 80px;
text-transform: uppercase;
}
.mdl-components .mdl-components__page.is-active { .mdl-components .mdl-components__page.is-active {
display: block; display: block;
} }
@ -113,7 +121,34 @@ mdl-components-dd {
0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 3px -2px rgba(0, 0, 0, 0.2),
0 1px 8px 0 rgba(0, 0, 0, 0.12); 0 1px 8px 0 rgba(0, 0, 0, 0.12);
} }
.docs-readme {
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.docs-readme h2, h3, h4 {
font-size: 16px;
color: rgba(0, 0, 0, 0.54);
font-weight: 500;
text-transform: uppercase;
}
.docs-readme .language-markup {
width: 100%;
}
.docs-readme ul {
list-style-type: none;
}
.docs-readme li {
position: relative;
}
.docs-readme li:before {
position: absolute;
top: 2px;
left: -28px;
content: '•';
font-size: 32px;
}
@media (max-width: 850px) { @media (max-width: 850px) {
.docs-layout-content { .docs-layout-content {
position: relative; position: relative;

View File

@ -513,6 +513,7 @@ body:not(.about) .mdl-navigation__link.download > button {
} }
.snippet-group .snippet-captions { .snippet-group .snippet-captions {
background-color: white; background-color: white;
height: 48px;
} }
.snippet-group .snippet-demo .snippet-demo-container { .snippet-group .snippet-demo .snippet-demo-container {
text-align: left; text-align: left;
@ -530,7 +531,7 @@ body:not(.about) .mdl-navigation__link.download > button {
} }
.snippet-group .snippet-caption { .snippet-group .snippet-caption {
font-size: 13px; font-size: 13px;
padding: 20px 40px; padding: 0px 40px;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
position: relative; position: relative;
@ -1181,3 +1182,12 @@ code[class*=language-], pre[class*=language-] {
.docs-navigation .spacer { .docs-navigation .spacer {
flex-grow: 1; flex-grow: 1;
} }
.docs-layout.is-small-screen .docs-text-styling pre {
margin: 0 -16px;
width: 100vw;
max-width: 640px;
}
.docs-text-styling p {
margin-top: 16px;
margin-bottom: 16px;
}

View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="{{page.include_prefix}}components/demos.css"> <link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col"> <div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
<aside class="mdl-components__nav docs-text-styling"> <aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
{% for category in page.categories %} {% for category in page.categories %}
<a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }}"> <a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }}">
<div class="mdl-components__link-image" <div class="mdl-components__link-image"
@ -37,7 +37,7 @@
<section id="{{ category.name }}-section" class="mdl-components__page mdl-grid"> <section id="{{ category.name }}-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col"> <div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title"> <div class="docs-text-styling component-title">
<div class="mdl-typography--display-2">{{ category.title }}</div> <h3>{{ category.title }}</h3>
<p>{{ category.description }}</p> <p>{{ category.description }}</p>
</div> </div>
@ -76,10 +76,10 @@
</script> </script>
{% set demo = "../../src/" + component.name + "/demo.html" %} {% set demo = "../../src/" + component.name + "/demo.html" %}
{% include demo ignore missing %} {% include demo ignore missing %}
<span class="docs-text-styling"> <div class="docs-text-styling docs-readme">
{% set doc = "../../dist/components/" + component.name + "/index.html" %} {% set doc = "../../dist/components/" + component.name + "/index.html" %}
{% include doc ignore missing %} {% include doc ignore missing %}
</span> </div>
{%- endfor %} {%- endfor %}
<img class="mdl-components-img" src="{{page.include_prefix}}/assets/compindex_2x.png"> <img class="mdl-components-img" src="{{page.include_prefix}}/assets/compindex_2x.png">
</div> </div>