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

Improve hitbox simulation areas on sliders 

* firefox-slider:
  Simulate larger hitbox on slider element (fixes #281)
  Improvements to large/small screen handling in layout.
  Fixes for IE bugs
  Fixing bug with tabs in Firefox and IE
  Rewriting headers and updating all content to match. This implementation should be much saner and less buggy.
master
Addy Osmani 2015-05-12 20:02:23 +01:00
parent 47a6ad7065 1f086d0f45
commit 252260a463
20 changed files with 579 additions and 565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_assets/customizer.css
View File

@ -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;
}

23
docs/_assets/main.css
View File

@ -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;

18
docs/_templates/embedded_customizer.html vendored
View File

@ -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>

20
docs/_templates/layout.html vendored
View File

@ -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>

9
src/_variables.scss
View File

@ -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;

123
src/layout/README.md
View File

@ -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">
@ -198,31 +179,54 @@ Your content goes here :)
## Other options
- `mdl-layout--large-screen-only`:
Displays the element in large screens, and hides it in small screens. Example:
```html
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout--large-screen-only">
Some long text that only fits in larger screens.
</span>
<span class="mdl-layout--small-screen-only">Short text</span>
</div>
</header>
```
- `mdl-layout--small-screen-only`:
Displays the element in small screens, and hides it in large screens.
- `mdl-layout-spacer`:
Used to align elements inside a header or drawer. This is a class set to flex
grow, so you can use it to align elements to the right in a header, for
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 +235,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 +244,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 +261,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

228
src/layout/_layout.scss
View File

@ -21,6 +21,7 @@
.mdl-navigation {
display: flex;
flex-wrap: nowrap;
box-sizing: border-box;
}
.mdl-navigation__link {
@ -47,6 +48,15 @@
position: relative;
}
// Utility classes for screen sizes.
.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
display: none;
}
.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
display: none;
}
.mdl-layout__container {
position: absolute;
width: 100%;
@ -112,11 +122,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,18 +136,17 @@
}
& .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;
}
}
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
.mdl-layout--fixed-drawer > & {
transform: translateX(0);
z-index: 3;
}
}
}
@ -195,47 +204,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 +246,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,65 +256,18 @@
}
&.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;
min-height: $layout-mobile-header-height + $layout-tab-bar-height;
}
}
@ -328,26 +282,6 @@
}
}
.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 +297,63 @@
.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;
height: $layout-header-mobile-row-height;
padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
}
& > * {
flex-shrink: 0;
}
// Add a margin to the last entry...
& > *:last-child {
margin-right: $layout-header-basic-desktop-indent;
.mdl-layout__header--scroll & {
width: 100%;
}
& .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 +410,12 @@
// Tabs.
.mdl-layout__tab-bar {
position: absolute;
top: 0;
height: $layout-tab-bar-height * 2;
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 +427,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 +437,18 @@
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();
overflow: hidden;
.mdl-layout__container > & {
position: absolute;
@ -527,9 +460,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 +473,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 & {

215
src/layout/demo.html
View File

@ -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 hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<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>

10
src/layout/demo.scss
View File

@ -49,11 +49,6 @@
padding: 8px;
}
// Styles for fixed header demo.
.demo-page--layout .mdl-layout.is-small-screen #fixed_header_nav {
visibility: hidden;
}
// Styles for multi-row layout demo.
.demo-page--layout #my_text_changes {
@include typo-display-1;
@ -94,3 +89,8 @@
background-position: center 0%;
}
.demo-page--layout .demo-app-icon {
background-image: url('data:image/png;base64,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');
background-size: contain;
}

96
src/layout/layout.js
View File

@ -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);
});
}

30
src/slider/slider.js
View File

@ -89,6 +89,35 @@ MaterialSlider.prototype.onMouseUp_ = function(event) {
event.target.blur();
};
/**
* Handle mousedown on container element.
* This handler is purpose is to not require the use to click
* exactly on the 2px slider element, as FireFox seems to be very
* strict about this.
* @param {Event} event The event that fired.
* @private
*/
MaterialSlider.prototype.onContainerMouseDown_ = function(event) {
'use strict';
// If this click is not on the parent element (but rather some child)
// ignore. It may still bubble up.
if(event.target !== this.element_.parentElement) {
return;
}
// Discard the original event and create a new event that
// is on the slider element.
event.preventDefault();
var newEvent = new MouseEvent("mousedown", {
target: event.target,
buttons: event.buttons,
clientX: event.clientX,
clientY: this.element_.getBoundingClientRect().y
});
this.element_.dispatchEvent(newEvent);
};
/**
* Handle updating of values.
* @param {Event} event The event that fired.
@ -190,6 +219,7 @@ MaterialSlider.prototype.init = function() {
this.element_.addEventListener('input', this.onInput_.bind(this));
this.element_.addEventListener('change', this.onChange_.bind(this));
this.element_.addEventListener('mouseup', this.onMouseUp_.bind(this));
this.element_.parentElement.addEventListener('mousedown', this.onContainerMouseDown_.bind(this));
this.updateValueStyles_();
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);

20
templates/article/index.html
View File

@ -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>

22
templates/blog/entry.html
View File

@ -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>

22
templates/blog/index.html
View File

@ -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>

32
templates/dashboard/index.html
View File

@ -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>

14
templates/general/index.html
View File

@ -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">

2
templates/general/styles.css
View File

@ -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 {

20
templates/product/index.html
View File

@ -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">

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

@ -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">

235
test/visual/layout.html
View File

@ -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>