google/material-design-lite
1
1
Fork 0
mirror of https://github.com/google/material-design-lite.git synced 2024-10-26 21:25:51 +03:00
Code Issues Projects Releases Wiki Activity

Make tabs in text-only template behave in mobile (fixes #835)

Browse Source
This commit is contained in:
Surma 2015-07-08 12:57:17 +01:00
parent 0b6dd0d3fc
commit d53dceb349
2 changed files with 8 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,12 +64,12 @@
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
</div>
<div class="mdl-layout__header-row">
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
<h3>Name &amp; Title</h3>
</div>
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
</div>
<div class="mdl-layout--large-screen-only mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<a href="#overview" class="mdl-layout__tab is-active">Overview</a>
<a href="#features" class="mdl-layout__tab">Features</a>
<a href="#features" class="mdl-layout__tab">Details</a>
@ -80,16 +80,6 @@
</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">

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

@ -21,13 +21,6 @@ html, body {
}
.mdl-demo .mdl-layout__header-row {
padding-left: 40px;
height: 53px;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar-container {
display: none;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row {
padding-left: 60px;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {
font-size: inherit;
@ -35,18 +28,20 @@ html, body {
.mdl-demo .mdl-layout__tab-bar-button {
display: none;
}
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__drawer-button {
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button {
display: none;
}
.mdl-demo .mdl-layout__tab-bar-container {
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {
overflow: visible;
}
.mdl-demo .mdl-layout__tab-bar-container {
height: 64px;
}
.mdl-demo .mdl-layout__tab-bar {
overflow: visible;
position: relative;
padding: 0;
padding-left: 16px;
box-sizing: border-box;
height: 100%;
width: 100%;
}