mirror of
https://github.com/google/material-design-lite.git
synced 2024-10-26 21:25:51 +03:00
Make tabs in text-only template behave in mobile (fixes #835)
This commit is contained in:
parent
0b6dd0d3fc
commit
d53dceb349
@ -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 & 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">
|
||||
|
@ -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%;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user