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

Add mobile header to text-only template

master
Alexander Surma 2015-06-26 14:40:53 +01:00
parent 1e66399ee4
commit 5f37846112
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,16 +44,16 @@
</style>
</head>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout__header-row">
<div class="mdl-demo__mobile-hide mdl-layout__header-row">
</div>
<div class="mdl-layout__header-row">
<h3>Name &amp; Title</h3>
</div>
<div class="mdl-layout__header-row">
<div class="mdl-demo__mobile-hide mdl-layout__header-row">
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<div class="mdl-demo__mobile-hide 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>

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

@ -7,6 +7,16 @@ html, body {
padding-left: 40px;
height: 53px;
}
.mdl-demo .is-small-screen .mdl-demo__mobile-hide,
.mdl-demo .is-small-screen .mdl-layout__tab-bar-container {
display: none;
}
.mdl-demo .is-small-screen .mdl-layout__header-row {
padding-left: 60px;
}
.mdl-demo .is-small-screen .mdl-layout__header-row h3 {
font-size: inherit;
}
.mdl-demo .mdl-layout__tab-bar-button {
display: none;
}