Text-only template: Add drawer menu (Closes #477)
parent
d9084473cf
commit
c198c152d2
|
@ -64,6 +64,16 @@
|
|||
</button>
|
||||
</div>
|
||||
</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">
|
||||
<div class="mdl-layout__tab-panel is-active" id="overview">
|
||||
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
|
||||
|
|
|
@ -7,7 +7,10 @@ html, body {
|
|||
padding-left: 40px;
|
||||
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;
|
||||
}
|
||||
.mdl-demo .mdl-layout__tab-bar-container {
|
||||
|
@ -31,7 +34,7 @@ html, body {
|
|||
height: 4px;
|
||||
}
|
||||
.mdl-demo main > .mdl-layout__tab-panel {
|
||||
padding: 0;
|
||||
padding: 8px;
|
||||
padding-top: 48px;
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -137,6 +140,12 @@ html, body {
|
|||
border-radius: 50px;
|
||||
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 {
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue