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

Text-only template: Add drawer menu (Closes #477)

master
Alexander Surma 2015-06-25 16:41:39 +01:00 committed by Addy Osmani
parent d9084473cf
commit c198c152d2
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
templates/text-only/index.html
View File

@ -64,6 +64,16 @@
</button> </button>
</div> </div>
</header> </header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Lite</span>
<nav class="mdl-navigation">
<a href="#overview" class="mdl-navigation__link">Overview</a>
<a href="#features" class="mdl-navigation__link">Features</a>
<a href="#features" class="mdl-navigation__link">Details</a>
<a href="#features" class="mdl-navigation__link">Technology</a>
<a href="#features" class="mdl-navigation__link">FAQ</a>
</nav>
</div>
<main class="mdl-layout__content"> <main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview"> <div class="mdl-layout__tab-panel is-active" id="overview">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"> <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">

13
templates/text-only/styles.css
View File

@ -7,7 +7,10 @@ html, body {
padding-left: 40px; padding-left: 40px;
height: 53px; height: 53px;
} }
.mdl-demo .mdl-layout__tab-bar-button, .mdl-layout__drawer-button { .mdl-demo .mdl-layout__tab-bar-button {
display: none;
}
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__drawer-button {
display: none; display: none;
} }
.mdl-demo .mdl-layout__tab-bar-container { .mdl-demo .mdl-layout__tab-bar-container {
@ -31,7 +34,7 @@ html, body {
height: 4px; height: 4px;
} }
.mdl-demo main > .mdl-layout__tab-panel { .mdl-demo main > .mdl-layout__tab-panel {
padding: 0; padding: 8px;
padding-top: 48px; padding-top: 48px;
height: 100%; height: 100%;
} }
@ -137,6 +140,12 @@ html, body {
border-radius: 50px; border-radius: 50px;
margin: 8px 32px; margin: 8px 32px;
} }
.mdl-demo .is-small-screen section.section--footer .section__circle--big {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 8px 16px;
}
.mdl-demo section.section--footer { .mdl-demo section.section--footer {
padding: 64px 0; padding: 64px 0;
} }