Rewriting headers and updating all content to match.
This implementation should be much saner and less buggy. Changes: - Using header rows is now mandatory - Headers now stretch to fit their content, rather than needing to specify a header height - Tabs should now be inside the headermaster
Sérgio Gomes
parent
47a6ad7065
commit
99a84c6dc8
|
|
@ -4,6 +4,7 @@
|
|||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mdl-gen--light-text {
|
||||
|
|
@ -18,7 +19,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 300px;
|
||||
height: 350px;
|
||||
margin: 16px auto 16px auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,19 @@ html > body {
|
|||
}
|
||||
.mdl-layout__header {
|
||||
height: 50vh;
|
||||
align-items: flex-start;
|
||||
padding: 32px;
|
||||
flex-shrink: 0;
|
||||
background-size: auto 30%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.mdl-layout__header .mdl-textfield {
|
||||
padding-top: 0;
|
||||
}
|
||||
.mdl-layout__header-row {
|
||||
padding: 40px;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
}
|
||||
.mdl-layout-title {
|
||||
font-weight: 300;
|
||||
|
|
@ -16,12 +26,6 @@ html > body {
|
|||
.mdl-layout-title a {
|
||||
font-weight: inherit;
|
||||
}
|
||||
.mdl-layout__header {
|
||||
background-size: auto 30%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.about .mdl-layout__header {
|
||||
background-color: #37474f;
|
||||
background-image: url('logo.svg');
|
||||
|
|
@ -60,7 +64,7 @@ html > body {
|
|||
.mdl-navigation {
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
padding: 0;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -81,7 +85,6 @@ html > body {
|
|||
}
|
||||
.mdl-navigation a.download {
|
||||
text-decoration: none;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.mdl-navigation a.download button {
|
||||
margin-left: 8px;
|
||||
|
|
|
|||
|
|
@ -38,14 +38,16 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="mdl-layout-title">Theme Preview</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Theme Preview</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -40,15 +40,17 @@
|
|||
<body class="{{page.bodyclass}}">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header">
|
||||
<span class="mdl-layout-title"><a href="/">Material<br>Design<br>Lite</a></span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title"><a href="/">Material<br>Design<br>Lite</a></span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -359,10 +359,11 @@ $layout-header-mobile-row-height: 56px;
|
|||
$layout-mobile-header-height: $layout-header-mobile-row-height;
|
||||
$layout-header-desktop-row-height: 64px;
|
||||
$layout-desktop-header-height: $layout-header-desktop-row-height;
|
||||
$layout-header-mobile-indent: 56px;
|
||||
$layout-header-desktop-indent: 72px;
|
||||
$layout-header-basic-mobile-indent: 16px;
|
||||
$layout-header-basic-desktop-indent: 24px;
|
||||
|
||||
$layout-header-desktop-baseline: 80px;
|
||||
$layout-header-mobile-baseline: 72px;
|
||||
$layout-header-mobile-indent: 16px;
|
||||
$layout-header-desktop-indent: 24px;
|
||||
|
||||
$layout-tab-bar-height: 48px;
|
||||
$layout-tab-mobile-padding: 12px;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,17 @@ The layout module allows you to build layouts easily, simply by adding a few CSS
|
|||
```html
|
||||
<div class="mdl-layout">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Hello</a>
|
||||
(...)
|
||||
</nav>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Hello</a>
|
||||
(...)
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -60,29 +62,6 @@ The header element (optional). By default, it's only shown in large screens.
|
|||
- `mdl-layout__header--transparent`:
|
||||
Makes the background transparent, instead of the default main palette color.
|
||||
|
||||
- `mdl-layout__header--medium-tall`:
|
||||
Makes the header twice the height of a default header.
|
||||
|
||||
- `mdl-layout__header--tall`:
|
||||
Makes the header three times the height of a default header.
|
||||
|
||||
- `mdl-layout__header--multi-row`:
|
||||
Allows stacking of multiple rows inside the header (by default, it only has one). Example:
|
||||
```html
|
||||
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--tall">
|
||||
<!-- Top row -->
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Upper row</span>
|
||||
</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Middle row</span>
|
||||
</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Bottom row</span>
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
|
||||
- `mdl-layout__header--seamed`:
|
||||
By default, the header casts a shadow onto the content. This option removes the shadow altogether.
|
||||
|
||||
|
|
@ -101,10 +80,10 @@ The header element (optional). By default, it's only shown in large screens.
|
|||
### Sub-elements
|
||||
|
||||
- `mdl-layout__header-row`:
|
||||
Used when stacking multiple rows inside the header (by default, it only has one). Example:
|
||||
Used inside the header for adding a new row. Headers need at least one of these. Example:
|
||||
|
||||
```html
|
||||
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--tall">
|
||||
<header class="mdl-layout__header mdl-layout__header--tall">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Upper row</span>
|
||||
</div>
|
||||
|
|
@ -133,7 +112,7 @@ None.
|
|||
|
||||
## mdl-layout__tab-bar
|
||||
|
||||
Tabs (optional). Used for tabbing the entire layout.
|
||||
Tabs (optional). Used for tabbing the entire layout. Tabs live inside the header.
|
||||
|
||||
### Example
|
||||
|
||||
|
|
@ -143,15 +122,17 @@ Tabs (optional). Used for tabbing the entire layout.
|
|||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</div>
|
||||
<!-- Tab bar -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Tab bar -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<!-- Panels -->
|
||||
<div class="mdl-layout__tab-panel is-active" id="blue-panel">
|
||||
|
|
@ -204,25 +185,31 @@ Your content goes here :)
|
|||
example:
|
||||
```html
|
||||
<header class="mdl-layout__header">
|
||||
<span>Left-aligned text</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Right-aligned text</span>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Left-aligned text</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Right-aligned text</span>
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
or to the center:
|
||||
```html
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Center-aligned text</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Center-aligned text</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
You can also use it to align to bottom in a drawer:
|
||||
```html
|
||||
<div class="mdl-layout__drawer">
|
||||
<span>Top-aligned text</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Bottom-aligned text</span>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Top-aligned text</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Bottom-aligned text</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
|
@ -231,6 +218,7 @@ Your content goes here :)
|
|||
```html
|
||||
<header class="mdl-layout__header">
|
||||
<img class="mdl-layout-icon" src="app-icon.svg">My Awesome Site</div>
|
||||
<div class="mdl-layout__header-row">...</div>
|
||||
</header>
|
||||
```
|
||||
|
||||
|
|
@ -239,7 +227,9 @@ Your content goes here :)
|
|||
depending on container).
|
||||
```html
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout-title">My Awesome Site</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<div class="mdl-layout-title">My Awesome Site</div>
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
```html
|
||||
|
|
@ -254,10 +244,12 @@ Your content goes here :)
|
|||
drawer.
|
||||
```html
|
||||
<header class="mdl-layout__header">
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Hello</a>
|
||||
(...)
|
||||
</nav>
|
||||
<div class="mdl-layout__header-row">
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="">Hello</a>
|
||||
(...)
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
.mdl-navigation {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mdl-navigation__link {
|
||||
|
|
@ -112,11 +113,11 @@
|
|||
|
||||
& > .mdl-layout-title {
|
||||
line-height: $layout-desktop-header-height;
|
||||
padding-left: $layout-header-basic-desktop-indent;
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
line-height: $layout-mobile-header-height;
|
||||
padding-left: $layout-header-basic-mobile-indent;
|
||||
padding-left: $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,11 +127,11 @@
|
|||
}
|
||||
|
||||
& .mdl-navigation__link {
|
||||
padding: 16px $layout-header-basic-desktop-indent;
|
||||
padding: 16px $layout-header-desktop-indent;
|
||||
margin: 0;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
padding: 16px $layout-header-basic-mobile-indent;
|
||||
padding: 16px $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -195,47 +196,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Header.
|
||||
.mdl-layout__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
height: $layout-desktop-header-height;
|
||||
min-height: $layout-desktop-header-height;
|
||||
max-height: 1000px;
|
||||
z-index: 3;
|
||||
|
||||
background-color: $layout-header-bg-color;
|
||||
color: $layout-header-text-color;
|
||||
z-index: 3;
|
||||
@include material-animation-default();
|
||||
@include shadow-2dp();
|
||||
transition-property: min-height, box-shadow;
|
||||
padding-left: $layout-header-basic-desktop-indent;
|
||||
overflow: visible;
|
||||
|
||||
.mdl-layout.has-drawer & {
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
}
|
||||
@include shadow-2dp();
|
||||
@include material-animation-default();
|
||||
transition-property: max-height, box-shadow;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
height: $layout-mobile-header-height;
|
||||
min-height: $layout-mobile-header-height;
|
||||
padding-left: $layout-header-basic-mobile-indent;
|
||||
|
||||
.mdl-layout.has-drawer & {
|
||||
padding-left: $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-drawer:not(.is-small-screen) > & {
|
||||
padding-left: $layout-header-basic-desktop-indent;
|
||||
margin-left: $layout-drawer-width;
|
||||
}
|
||||
|
||||
& > .mdl-layout-icon {
|
||||
margin-right: $layout-header-icon-margin;
|
||||
left: $layout-header-basic-desktop-indent;
|
||||
position: absolute;
|
||||
left: $layout-header-desktop-indent;
|
||||
top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
|
||||
height: $layout-header-icon-size;
|
||||
width: $layout-header-icon-size;
|
||||
|
|
@ -244,8 +238,7 @@
|
|||
display: block;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
margin-right: $layout-header-basic-mobile-indent;
|
||||
left: $layout-header-basic-mobile-indent;
|
||||
left: $layout-header-mobile-indent;
|
||||
top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
|
||||
}
|
||||
}
|
||||
|
|
@ -255,99 +248,22 @@
|
|||
}
|
||||
|
||||
&.is-compact {
|
||||
min-height: $layout-header-desktop-row-height;
|
||||
max-height: $layout-desktop-header-height;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
min-height: $layout-header-mobile-row-height;
|
||||
max-height: $layout-mobile-header-height;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Add a margin to the last entry...
|
||||
& > *:last-child {
|
||||
margin-right: $layout-header-basic-desktop-indent;
|
||||
&.is-compact.has-tabs {
|
||||
height: $layout-desktop-header-height + $layout-tab-bar-height;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
margin-right: $layout-header-basic-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
// ...unless it's a navigation area.
|
||||
& > .mdl-navigation:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
& .mdl-layout-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .mdl-navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: $layout-header-desktop-row-height;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
height: $layout-header-mobile-row-height;
|
||||
}
|
||||
}
|
||||
|
||||
& .mdl-navigation__link {
|
||||
color: $layout-header-text-color;
|
||||
line-height: $layout-header-desktop-row-height;
|
||||
padding: 0 $layout-header-basic-desktop-indent;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
line-height: $layout-header-mobile-row-height;
|
||||
padding: 0 $layout-header-basic-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
& .mdl-navigation__link:hover {
|
||||
background-color: $layout-header-nav-hover-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
margin-left: $layout-drawer-width;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
& {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-header > & {
|
||||
display: flex;
|
||||
min-height: $layout-mobile-header-height + $layout-tab-bar-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__header--multi-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mdl-layout__header--medium-tall {
|
||||
min-height: 2 * $layout-header-desktop-row-height;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
min-height: 2 * $layout-header-mobile-row-height;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__header--tall {
|
||||
min-height: 3 * $layout-header-desktop-row-height;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
min-height: 3 * $layout-header-mobile-row-height;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__header--transparent.mdl-layout__header--transparent {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
|
@ -363,60 +279,58 @@
|
|||
|
||||
.mdl-layout__header--waterfall {
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
|
||||
&.is-casting-shadow {
|
||||
@include shadow-2dp();
|
||||
}
|
||||
}
|
||||
|
||||
// Declared twice to bump rule priority.
|
||||
.mdl-layout__header-row.mdl-layout__header-row {
|
||||
.mdl-layout__header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
min-height: $layout-header-desktop-row-height;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
height: $layout-header-desktop-row-height;
|
||||
margin: 0;
|
||||
padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
min-height: $layout-header-mobile-row-height;
|
||||
}
|
||||
|
||||
& > .mdl-layout-icon {
|
||||
margin-right: $layout-header-icon-margin;
|
||||
height: $layout-header-icon-size;
|
||||
width: $layout-header-icon-size;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
left: $layout-header-basic-mobile-indent;
|
||||
top: ($layout-header-mobile-row-height - $layout-header-icon-size) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout.has-drawer & > .mdl-layout-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Add a margin to the last entry...
|
||||
& > *:last-child {
|
||||
margin-right: $layout-header-basic-desktop-indent;
|
||||
& .mdl-navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: $layout-header-desktop-row-height;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
margin-right: $layout-header-basic-mobile-indent;
|
||||
height: $layout-header-mobile-row-height;
|
||||
}
|
||||
}
|
||||
|
||||
// ...unless it's a navigation area.
|
||||
& > .mdl-navigation:last-child {
|
||||
margin-right: 0;
|
||||
& .mdl-navigation__link {
|
||||
color: $layout-header-text-color;
|
||||
line-height: $layout-header-desktop-row-height;
|
||||
padding: 0 $layout-header-desktop-indent;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
line-height: $layout-header-mobile-row-height;
|
||||
padding: 0 $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
& .mdl-navigation__link:hover {
|
||||
background-color: $layout-header-nav-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -473,12 +387,12 @@
|
|||
|
||||
// Tabs.
|
||||
.mdl-layout__tab-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: $layout-tab-bar-height * 2;
|
||||
height: $layout-tab-bar-height;
|
||||
margin: 0;
|
||||
width: calc(100% -
|
||||
#{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
|
||||
padding: 0 0 0 $layout-header-desktop-indent;
|
||||
#{(($layout-header-desktop-baseline - $layout-tab-desktop-padding) * 2)});
|
||||
padding: 0 0 0
|
||||
($layout-header-desktop-baseline - $layout-tab-desktop-padding);
|
||||
display: flex;
|
||||
background-color: $layout-header-bg-color;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -490,8 +404,9 @@
|
|||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
width: calc(100% -
|
||||
#{($layout-header-mobile-indent - $layout-tab-mobile-padding)});
|
||||
padding: 0 0 0 $layout-header-mobile-indent;
|
||||
#{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
|
||||
padding: 0 0 0
|
||||
($layout-header-mobile-baseline - $layout-tab-mobile-padding);
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-tabs & {
|
||||
|
|
@ -499,23 +414,17 @@
|
|||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.is-casting-shadow {
|
||||
@include shadow-2dp();
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-layout__tab-bar-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: $layout-tab-bar-height;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
z-index: 3;
|
||||
z-index: 2;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
@include shadow-2dp();
|
||||
|
||||
.mdl-layout__container > & {
|
||||
position: absolute;
|
||||
|
|
@ -527,9 +436,10 @@
|
|||
.mdl-layout__tab-bar-button {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: $layout-tab-bar-height;
|
||||
line-height: $layout-tab-bar-height;
|
||||
width: $layout-header-desktop-indent;
|
||||
width: $layout-header-desktop-baseline - $layout-tab-desktop-padding;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
background-color: $layout-header-bg-color;
|
||||
|
|
@ -539,7 +449,7 @@
|
|||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
display: none;
|
||||
width: $layout-header-mobile-indent - $layout-tab-mobile-padding;
|
||||
width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-tabs & {
|
||||
|
|
|
|||
|
|
@ -20,19 +20,21 @@
|
|||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -58,19 +60,21 @@
|
|||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -96,14 +100,16 @@
|
|||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<span class="mdl-layout-title">Fixed drawer layout demo</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Fixed drawer layout demo</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -153,19 +159,21 @@
|
|||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation. We use CSS to hide it in small screens. -->
|
||||
<nav class="mdl-navigation" id="fixed_header_nav">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation. We use CSS to hide it in small screens. -->
|
||||
<nav class="mdl-navigation" id="fixed_header_nav">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -191,15 +199,8 @@
|
|||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<span class="mdl-layout-title">Fixed drawer and header</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean2">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean2" />
|
||||
</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Fixed drawer and header</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
|
|
@ -225,11 +226,11 @@
|
|||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--waterfall mdl-layout__header--tall">
|
||||
<header class="mdl-layout__header mdl-layout__header--waterfall">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<!-- Top row -->
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span id="my_text_changes">Material Design Lite</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
|
|
@ -285,19 +286,21 @@
|
|||
<div class="mdl-layout mdl-js-layout" id="transparent_demo">
|
||||
<header class="mdl-layout__header mdl-layout__header--transparent">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -321,30 +324,33 @@
|
|||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Two</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Two</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Two</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Three</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Three</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Three</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Four</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Four</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Four</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Five</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Five</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Five</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Six</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Six</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Six</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Two</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Two</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Two</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Three</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Three</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Three</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Four</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Four</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Four</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Five</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Five</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Five</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Six</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Six</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Six</a>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-scroll">
|
||||
<div class="demo-layout__content-blue"></div>
|
||||
|
|
@ -366,15 +372,18 @@
|
|||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-fixed" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-fixed" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-fixed" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-fixed" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-fixed" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-fixed" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-fixed">
|
||||
<div class="demo-layout__content-blue"></div>
|
||||
|
|
|
|||
|
|
@ -94,3 +94,8 @@
|
|||
|
||||
background-position: center 0%;
|
||||
}
|
||||
|
||||
.demo-page--layout .demo-app-icon {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAIP0lEQVR42u1be4iUVRR3vpndVTMzXaVUrCTMTMy00sows+wdVpTaU7GywNxCtECt/iiNsj9ciFKMqJCwrMSyhz3sQWmUmJGCPbXUHlspaevs7jw6l86JX6dz78yu3+gszIUf3zez893vnnPPPY/fvduhQ6VVWqVVWkwtn88jIkIyRiTkHWWvhPbYd9wW4GZsFOF8wnkx4BxCT35HopwVkHCmz/dfE7KE5gNEC6HBKYL7jcrdAqr4/qv8Py17gHDtV8KwslcAD7CGr1/k42u/EAa0Fwuo5vsPY1TADkK3svcBPEBRwCpDkByv6RByxnPbZPYPiQLEuxczCPABj4PQeY9gvpZVn7+Vvq1QCHlHVJJwicKDt6+2XggKmM9C50D4TwgXEcZweBsLcJ9HEt4wFLZZ/ItKtiTkVmMkKpUSpOMRhN4oMGtfBpTi72cSMkoB7xG6FHjPs4YC1qrlZQk+gHAiTFBJzL8z4VUe1DMu2cH4z1dRwGRY0yLMp4R+OEjVfxX4DnxupSgAcw3+7lrCR/y7+bBMSzb7O9QMbSBMJByB/oGul3Mik4XfbiYM1N4cFNDdzbahgMX8d6kLerGF7VM+4203jliXAM+QCDVdJTfNYKZ7CQsIp/BMuVS4STm0bYThAQX0JqxTCnDPP8h/P5OwBPrTkeMvwrhYwyUMzs3wy4aXzrKgGfjuFcLd/D2uZZfRnW0oQBR8AuFLQwGr2X9IkzQ5Z0SOObEWT6CAwYQ9gZCWg9zd15zJXhBQwDDC94HnmwK5gny3ntAnFgWo8HYrmF2hllEWge2agALOIvzsyQuyAaG1FYyOVQF0PZywHITDF6YDs2INdrIOVaCAcexL8kX0ZS0DmZz7Yk2KXOgCgXPKJH0OyZfd3RawgKuKFDxT4B2uEu0Vp/e/CZwPavohQl/CE4TdylxzxrJwbbZBn8l7rgsIjstgF2EGR5sGSLhwUkYdsAVwXE+B9xch0nx1IS8JMXoqYYtnhuS7BwwGSRQwzVMLiPLfB2JEMMczOYuQS2yrBbgOuinNyuC+4xlIspKq4NnTCSsIOw2nuSiggJnqty2ceLnC6niVfqfYjwxS4xNr2c2Za+uzQqmu+P5q9QLR9FzN1vLnGuinpzN5wgeE3/i55wkddZrNnxfwbxr4mdnIBXIxFKnKNMXZKE6OWOgYfi7RFiVIVfeO6lwUcKqKFJoSr1b9XcL1w0JMV5UC6ggvEC7WHINS9L+Ww++qU2OT5bYCZWktuZni8IcdixLcOu9RRPiUfrB46Q7K1TxDN8P/eMtbeHagkaNItKjx8QjBtc/3N6uO5ToHOvYOUllHpGbby/crMw9tvKQY3YFHyKqxTgEn3Wpic52qyqTTO40Bi0NM6MFby8SwgGI+i9B6ebnvHlPmL+NehzIVa/4OtYRGT0hq4rz+NcLtUuMrbiCyav42bLFhf/ib4YRZTL6mVVKGiVEjy5IoKiQCoVEXyLhyxt9+YC9+GoefVFu2tozlIH6kK9NpT3FVqceSC9Qld6FsBZMfvo5lemorh6WsR8MtRjnsrONFwiRCf16jHUNKUObehXAUx/gZbGkZJZRUnr6kqYHH7mQ4t1V7CtpUXMgjzGNHswXKYovyThvW4cz05NAglPOdyomWTorSgdnew1zCSuejZCfJJ1NRDLB4efX3PoTxhEcIb3Lh0exZIvv58zLuK1GAUo+AGPkGKj5L6DQzTK+79JpwhSRNyjlWtaky9IUc9ZtOhAkenkCsYL2PstbJjfJBQ1n4Jk/Ft5mXSFdD6JRiqmPjBdArd2Ks99BkDtuBnYmMJOk/3yM7zNcp3N9+w7qcYiYotjhh5Q+l2CARh7baU7018ewN1cKr4qePxzLQH9SrbBRjfAtXpBHOeElPZ8Ds1HtoKTHZyywz51lyCVNH9tQDdM6grM1Z2ceGonPANNeAjymZ4DiT06Distbn9EAfosBlbMobrX0/dd+vACG7Rqe7cW+M4Ey64yq/B2irJ92sedLZJHB/f4KzrFMO0MoNxgXI0AzsHUSxKcHw1v04D/CxNi7e1xbw+Fi/S/uJcKzHX+B45gUU7zZFxsd6iMLIztYGqPFtsDmZtMpdvs71CLAcZ1AJngBv/1Jg6W0X5ijWcwS8thYHhG8UEgNrfUOAwUxoWmbsPt8YUGASrHBrgHN0u1KHxb0ELgQPnzHY2nvBSnylsPPUSz3LR5SxCXePDUV2ho3XfUYf4phviTsCdOadof0eK/iRcIOPvuL78wyBcR9BlHJ/gdNnbvtsY2DnqF4ot1LkAkM4BfU5wXo8RQLP1XqeazSU4qzsDE8UuUM9g8/tlczQ4hvjED6C/H9pIPf/3ClKPTtbZXNyHaiiiihnDc4i3R9JeC7gg9w7+6OviHV3WOXvQpdNYt4/b+zN5TiPd8o6zkOrP8rJzxD1bFrtIY7kJYZ/w/MAT4OjTpVk9o3kRGoBR3a8ZaxFEdZtmb1rzPBOYZW5v3lKSRk26VmKeEF+civ4nZqDcprcKlthQ+MPj5njupdlMlH12yPgW1oMCs6Fur6YQpe0ECrA+3cACm2DMWgt/HI87QV9XqoUkDPoeKfUe8DUkwddeGtfD8yvFmK9NZvu8MOIQJxfYpxBaIZMc7QiSw/t/xDo0hUGdiUcdEBhFlrn+ODZQXDKPAfCr8KdqLI6L2yVsCzg0YTPQPhNQl95CJBIhcwMm/71njOF5fcfJHpPkO8f5tL3f3m+x7lW8YmwXVDYJMtW6AJkqqSvx/jWvadkPgn5x5KHtxIrIWWRoiE6HniDqF3MehGKKIqlsY7kt1vhK63SKq1dtL8BS9s94Tb5OfwAAAAASUVORK5CYII=');
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@ function MaterialLayout(element) {
|
|||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.Constant_ = {
|
||||
MAX_WIDTH: '(max-width: 850px)'
|
||||
MAX_WIDTH: '(max-width: 850px)',
|
||||
TAB_SCROLL_PIXELS: 100
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -83,14 +84,15 @@ MaterialLayout.prototype.CssClasses_ = {
|
|||
TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
|
||||
PANEL: 'mdl-layout__tab-panel',
|
||||
|
||||
HAS_DRAWER_CLASS: 'has-drawer',
|
||||
SHADOW_CLASS: 'is-casting-shadow',
|
||||
COMPACT_CLASS: 'is-compact',
|
||||
SMALL_SCREEN_CLASS: 'is-small-screen',
|
||||
DRAWER_OPEN_CLASS: 'is-visible',
|
||||
ACTIVE_CLASS: 'is-active',
|
||||
UPGRADED_CLASS: 'is-upgraded',
|
||||
ANIMATING_CLASS: 'is-animating'
|
||||
HAS_DRAWER: 'has-drawer',
|
||||
HAS_TABS: 'has-tabs',
|
||||
CASTING_SHADOW: 'is-casting-shadow',
|
||||
IS_COMPACT: 'is-compact',
|
||||
IS_SMALL_SCREEN: 'is-small-screen',
|
||||
IS_DRAWER_OPEN: 'is-visible',
|
||||
IS_ACTIVE: 'is-active',
|
||||
IS_UPGRADED: 'is-upgraded',
|
||||
IS_ANIMATING: 'is-animating'
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -100,18 +102,18 @@ MaterialLayout.prototype.CssClasses_ = {
|
|||
MaterialLayout.prototype.contentScrollHandler_ = function() {
|
||||
'use strict';
|
||||
|
||||
if(this.header_.classList.contains(this.CssClasses_.ANIMATING_CLASS)) {
|
||||
if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.COMPACT_CLASS)) {
|
||||
this.header_.classList.add(this.CssClasses_.SHADOW_CLASS);
|
||||
this.header_.classList.add(this.CssClasses_.COMPACT_CLASS);
|
||||
this.header_.classList.add(this.CssClasses_.ANIMATING_CLASS);
|
||||
} else if (this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.COMPACT_CLASS)) {
|
||||
this.header_.classList.remove(this.CssClasses_.SHADOW_CLASS);
|
||||
this.header_.classList.remove(this.CssClasses_.COMPACT_CLASS);
|
||||
this.header_.classList.add(this.CssClasses_.ANIMATING_CLASS);
|
||||
if (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
||||
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
|
||||
this.header_.classList.add(this.CssClasses_.IS_COMPACT);
|
||||
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
||||
} else if (this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
||||
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
|
||||
this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
|
||||
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -123,12 +125,12 @@ MaterialLayout.prototype.screenSizeHandler_ = function() {
|
|||
'use strict';
|
||||
|
||||
if (this.screenSizeMediaQuery_.matches) {
|
||||
this.element_.classList.add(this.CssClasses_.SMALL_SCREEN_CLASS);
|
||||
this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.SMALL_SCREEN_CLASS);
|
||||
this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
|
||||
// Collapse drawer (if any) when moving to a large screen size.
|
||||
if (this.drawer_) {
|
||||
this.drawer_.classList.remove(this.CssClasses_.DRAWER_OPEN_CLASS);
|
||||
this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -141,7 +143,7 @@ MaterialLayout.prototype.screenSizeHandler_ = function() {
|
|||
MaterialLayout.prototype.drawerToggleHandler_ = function() {
|
||||
'use strict';
|
||||
|
||||
this.drawer_.classList.toggle(this.CssClasses_.DRAWER_OPEN_CLASS);
|
||||
this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -150,7 +152,7 @@ MaterialLayout.prototype.drawerToggleHandler_ = function() {
|
|||
MaterialLayout.prototype.headerTransitionEndHandler = function() {
|
||||
'use strict';
|
||||
|
||||
this.header_.classList.remove(this.CssClasses_.ANIMATING_CLASS);
|
||||
this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -159,9 +161,9 @@ MaterialLayout.prototype.headerTransitionEndHandler = function() {
|
|||
MaterialLayout.prototype.headerClickHandler = function() {
|
||||
'use strict';
|
||||
|
||||
if (this.header_.classList.contains(this.CssClasses_.COMPACT_CLASS)) {
|
||||
this.header_.classList.remove(this.CssClasses_.COMPACT_CLASS);
|
||||
this.header_.classList.add(this.CssClasses_.ANIMATING_CLASS);
|
||||
if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
|
||||
this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
|
||||
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -173,7 +175,7 @@ MaterialLayout.prototype.resetTabState_ = function(tabBar) {
|
|||
'use strict';
|
||||
|
||||
for (var k = 0; k < tabBar.length; k++) {
|
||||
tabBar[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
|
||||
tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -185,7 +187,7 @@ MaterialLayout.prototype.resetPanelState_ = function(panels) {
|
|||
'use strict';
|
||||
|
||||
for (var j = 0; j < panels.length; j++) {
|
||||
panels[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
|
||||
panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -231,14 +233,14 @@ MaterialLayout.prototype.init = function() {
|
|||
}
|
||||
|
||||
if (mode === this.Mode_.STANDARD) {
|
||||
this.header_.classList.add(this.CssClasses_.SHADOW_CLASS);
|
||||
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
|
||||
if (this.tabBar_) {
|
||||
this.tabBar_.classList.add(this.CssClasses_.SHADOW_CLASS);
|
||||
this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
|
||||
}
|
||||
} else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
|
||||
this.header_.classList.remove(this.CssClasses_.SHADOW_CLASS);
|
||||
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
|
||||
if (this.tabBar_) {
|
||||
this.tabBar_.classList.remove(this.CssClasses_.SHADOW_CLASS);
|
||||
this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
|
||||
}
|
||||
} else if (mode === this.Mode_.WATERFALL) {
|
||||
// Add and remove shadows depending on scroll position.
|
||||
|
|
@ -258,9 +260,9 @@ MaterialLayout.prototype.init = function() {
|
|||
this.drawerToggleHandler_.bind(this));
|
||||
|
||||
// Add a class if the layout has a drawer, for altering the left padding.
|
||||
// Adds the HAS_DRAWER_CLASS to the elements since this.header_ may or may
|
||||
// Adds the HAS_DRAWER to the elements since this.header_ may or may
|
||||
// not be present.
|
||||
this.element_.classList.add(this.CssClasses_.HAS_DRAWER_CLASS);
|
||||
this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
|
||||
|
||||
// If we have a fixed header, add the button to the header rather than
|
||||
// the layout.
|
||||
|
|
@ -278,24 +280,26 @@ MaterialLayout.prototype.init = function() {
|
|||
}
|
||||
|
||||
// Initialize tabs, if any.
|
||||
if (this.tabBar_) {
|
||||
if (this.header_ && this.tabBar_) {
|
||||
this.element_.classList.add(this.CssClasses_.HAS_TABS);
|
||||
|
||||
var tabContainer = document.createElement('div');
|
||||
tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
|
||||
this.element_.insertBefore(tabContainer, this.tabBar_);
|
||||
this.element_.removeChild(this.tabBar_);
|
||||
this.header_.insertBefore(tabContainer, this.tabBar_);
|
||||
this.header_.removeChild(this.tabBar_);
|
||||
|
||||
var leftButton = document.createElement('div');
|
||||
leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
|
||||
leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
|
||||
leftButton.addEventListener('click', function() {
|
||||
this.tabBar_.scrollLeft -= 100;
|
||||
this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
|
||||
}.bind(this));
|
||||
|
||||
var rightButton = document.createElement('div');
|
||||
rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
|
||||
rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
|
||||
rightButton.addEventListener('click', function() {
|
||||
this.tabBar_.scrollLeft += 100;
|
||||
this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
|
||||
}.bind(this));
|
||||
|
||||
tabContainer.appendChild(leftButton);
|
||||
|
|
@ -305,16 +309,16 @@ MaterialLayout.prototype.init = function() {
|
|||
// Add and remove buttons depending on scroll position.
|
||||
var tabScrollHandler = function() {
|
||||
if (this.tabBar_.scrollLeft > 0) {
|
||||
leftButton.classList.add(this.CssClasses_.ACTIVE_CLASS);
|
||||
leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
|
||||
} else {
|
||||
leftButton.classList.remove(this.CssClasses_.ACTIVE_CLASS);
|
||||
leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
|
||||
if (this.tabBar_.scrollLeft <
|
||||
this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
|
||||
rightButton.classList.add(this.CssClasses_.ACTIVE_CLASS);
|
||||
rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
|
||||
} else {
|
||||
rightButton.classList.remove(this.CssClasses_.ACTIVE_CLASS);
|
||||
rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
|
|
@ -335,7 +339,7 @@ MaterialLayout.prototype.init = function() {
|
|||
}
|
||||
}
|
||||
|
||||
this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
|
||||
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -360,8 +364,8 @@ function MaterialLayoutTab(tab, tabs, panels, layout) {
|
|||
var panel = layout.content_.querySelector('#' + href);
|
||||
layout.resetTabState_(tabs);
|
||||
layout.resetPanelState_(panels);
|
||||
tab.classList.add(layout.CssClasses_.ACTIVE_CLASS);
|
||||
panel.classList.add(layout.CssClasses_.ACTIVE_CLASS);
|
||||
tab.classList.add(layout.CssClasses_.IS_ACTIVE);
|
||||
panel.classList.add(layout.CssClasses_.IS_ACTIVE);
|
||||
});
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,15 +44,17 @@
|
|||
<body>
|
||||
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll mdl-layout--fixed-header mdl-color--grey-100 mdl-color-text--grey-800">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -45,16 +45,18 @@
|
|||
<body class="blogpost">
|
||||
<div class="mdl-layout mdl-js-layout has-drawer is-upgraded">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll mdl-layout__header--transparent is-casting-shadow mdl-color-text--white">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">The Newist</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">The Newist</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -44,16 +44,18 @@
|
|||
<body>
|
||||
<div class="mdl-layout mdl-js-layout has-drawer is-upgraded">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll mdl-layout__header--transparent is-casting-shadow mdl-color-text--white">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">The Newist</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">The Newist</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -44,23 +44,25 @@
|
|||
<body>
|
||||
<div class="mdl-layout mdl-layout--fixed-drawer">
|
||||
<header class="mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
||||
<div class="mdl-layout__header-row">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mdl-layout-title">Home</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn"><span class="mdl-icon mdl-icon--more-vert"></span></button>
|
||||
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
|
||||
<button class="mdl-menu__item">What is </button>
|
||||
<button class="mdl-menu__item">supposed to </button>
|
||||
<button class="mdl-menu__item">be here?</button>
|
||||
</ul>
|
||||
</div>
|
||||
<span class="mdl-layout-title">Home</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn"><span class="mdl-icon mdl-icon--more-vert"></span></button>
|
||||
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
|
||||
<button class="mdl-menu__item">What is </button>
|
||||
<button class="mdl-menu__item">supposed to </button>
|
||||
<button class="mdl-menu__item">be here?</button>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -44,14 +44,14 @@
|
|||
<body class="mdl-color--primary-dark">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary">
|
||||
<a href="#about-panel" class="mdl-layout__tab is-active">About</a>
|
||||
<a href="#experience-panel" class="mdl-layout__tab">Experience</a>
|
||||
<a href="#contact-panel" class="mdl-layout__tab">Contact Us</a>
|
||||
<a href="#blog-panel" class="mdl-layout__tab">Our Blog</a>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="mail"><span class="mdl-icon mdl-icon--email"></span></button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary">
|
||||
<a href="#about-panel" class="mdl-layout__tab is-active">About</a>
|
||||
<a href="#experience-panel" class="mdl-layout__tab">Experience</a>
|
||||
<a href="#contact-panel" class="mdl-layout__tab">Contact Us</a>
|
||||
<a href="#blog-panel" class="mdl-layout__tab">Our Blog</a>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="mail"><span class="mdl-icon mdl-icon--email"></span></button>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="mdl-layout__tab-panel is-active mdl-grid mdl-grid--no-spacing" id="about-panel">
|
||||
<header class="mdl-cell mdl-cell--12-col">
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ header.mdl-layout__header {
|
|||
#mail {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: -28px;
|
||||
top: 64px;
|
||||
z-index: 999;
|
||||
}
|
||||
main > .mdl-layout__tab-panel > header {
|
||||
|
|
|
|||
|
|
@ -45,15 +45,17 @@
|
|||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--scroll">
|
||||
<a href="/" id="logo"><img src="images/logo.svg"></a>
|
||||
<a href="/" id="title" class="mdl-color-text--white">Your Product Site</a>
|
||||
<div class="menu">
|
||||
<nav class="mdl-navigation">
|
||||
<a href="#about" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect active">About</a>
|
||||
<a href="#products" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Products</a>
|
||||
<a href="#faqs" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">FAQ</a>
|
||||
<a href="#support" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Support</a>
|
||||
<a href="#blog" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Blog</a>
|
||||
</nav>
|
||||
<div class="mdl-layout__header-row">
|
||||
<a href="/" id="title" class="mdl-color-text--white">Your Product Site</a>
|
||||
<div class="menu">
|
||||
<nav class="mdl-navigation">
|
||||
<a href="#about" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect active">About</a>
|
||||
<a href="#products" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Products</a>
|
||||
<a href="#faqs" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">FAQ</a>
|
||||
<a href="#support" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Support</a>
|
||||
<a href="#blog" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Blog</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mdl-layout__content">
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</head>
|
||||
<body class="mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--scroll mdl-layout__header--tall mdl-color--primary">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
|
||||
<div class="mdl-layout__header-row">
|
||||
</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
|
|
|
|||
|
|
@ -31,23 +31,25 @@
|
|||
<p>Uses a header for large screen sizes and a collapsible drawer for smaller
|
||||
screens.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -69,23 +71,25 @@
|
|||
<h3>Scrolling header</h3>
|
||||
<p>Same as the standard layout, but the header scrolls with the content.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -108,17 +112,19 @@
|
|||
<p>The drawer is always open in large screen sizes, functioning as side
|
||||
navigation.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<span class="mdl-layout-title">Fixed drawer layout demo</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Fixed drawer layout demo</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -142,7 +148,7 @@
|
|||
<h3>Fixed drawer (no header)</h3>
|
||||
<p>Same as the previous layout, but with no header.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -164,23 +170,25 @@
|
|||
<h3>Fixed header</h3>
|
||||
<p>Always shows a header, even in smaller screens.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation. We use CSS to hide it in small screens. -->
|
||||
<nav class="mdl-navigation" id="fixed_header_nav">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation. We use CSS to hide it in small screens. -->
|
||||
<nav class="mdl-navigation" id="fixed_header_nav">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -203,18 +211,11 @@
|
|||
<p>The drawer is always open in large screens. The header is always shown,
|
||||
even in small screens.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<span class="mdl-layout-title">Fixed drawer and header</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean2">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean2" />
|
||||
</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Fixed drawer and header</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
|
|
@ -238,13 +239,13 @@
|
|||
<p>Example of a more complex waterfall header, with multiple rows (on large
|
||||
screens only).</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--waterfall mdl-layout__header--tall">
|
||||
<header class="mdl-layout__header mdl-layout__header--waterfall">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<!-- Top row -->
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span id="my_text_changes">Material Design Lite</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
|
|
@ -296,23 +297,25 @@
|
|||
<h3>Transparent header</h3>
|
||||
<p>Uses a transparent header that draws on top of the layout's background.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout" id="transparent_demo">
|
||||
<header class="mdl-layout__header mdl-layout__header--transparent">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
|
|
@ -332,34 +335,37 @@
|
|||
<h3>Scrollable tabs</h3>
|
||||
<p>Simple header with scrollable tabs.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Two</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Two</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Two</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Three</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Three</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Three</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Four</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Four</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Four</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Five</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Five</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Five</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Six</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Six</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Six</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Two</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Two</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Two</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Three</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Three</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Three</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Four</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Four</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Four</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Five</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Five</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Five</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Six</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Six</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Six</a>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-scroll">
|
||||
<div class="demo-layout__content-blue"></div>
|
||||
|
|
@ -377,19 +383,22 @@
|
|||
<h3>Fixed tabs</h3>
|
||||
<p>Simple header with fixed tabs.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="../images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-fixed" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-fixed" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-fixed" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-fixed" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-fixed" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-fixed" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-fixed">
|
||||
<div class="demo-layout__content-blue"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue