Implements the layout module.
This module combines the old 'navigation' and 'header-panel' modules into a single, configurable component. - Added new layout module, with demo. - Rewrote material-styleguide.html and index.html to use the layout module. - Removed 'navigation' and 'header-panel'. - Added README.md explaining usage of the module. We'll need a better place for these docs at some point.master
Sérgio Gomes
parent
c25d0604ad
commit
c215814570
|
|
@ -31,32 +31,31 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<button class="nav-button">Show navigation</button>
|
||||
<div class="Layout Layout--fixedHeader">
|
||||
<div class="Layout-header">
|
||||
<span class="Layout-title">Web <strong>Starter Kit</strong></span>
|
||||
<div class="Layout-spacer"></div>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="#hello">Hello</a></li>
|
||||
<li><a href="#get-started">Get Started</a></li>
|
||||
<li><a href="material-styleguide.html">Style Guide</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidenav sidenav-horizontal">
|
||||
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||
<nav class="sidenav-nav">
|
||||
<ul>
|
||||
<li><a href="#hello">Hello</a></li>
|
||||
<li><a href="#get-started">Get Started</a></li>
|
||||
<li><a href="material-styleguide.html">Style Guide</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main class="Layout-content">
|
||||
<h2 id="hello">Welcome to Web Starter Kit!</h2>
|
||||
<p>Good luck with your amazing new project.</p>
|
||||
|
||||
<h2 id="get-started">Get Started.</h2>
|
||||
<p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or
|
||||
check out the <a href="material-styleguide.html">Style Guide</a>.</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<h2 id="hello">Welcome to Web Starter Kit!</h2>
|
||||
<p>Good luck with your amazing new project.</p>
|
||||
|
||||
<h2 id="get-started">Get Started.</h2>
|
||||
<p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or
|
||||
check out the <a href="material-styleguide.html">Style Guide</a>.</p>
|
||||
</main>
|
||||
|
||||
<div class="sidenav-modal-bg"></div>
|
||||
|
||||
<!-- build:remove -->
|
||||
<script src="styleguide/navigation/sidenav.js"></script>
|
||||
<script src="styleguide/layout/layout.js"></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- build:js(app/) ../../scripts/main.min.js -->
|
||||
|
|
|
|||
|
|
@ -32,127 +32,120 @@
|
|||
<link rel="stylesheet" href="styleguide/styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="Layout Layout--fixedDrawer">
|
||||
|
||||
<button class="nav-button">Show navigation</button>
|
||||
|
||||
<div class="sidenav sidenav-static">
|
||||
<h1 class="logo">WSK <strong>Style Guide</strong></h1>
|
||||
<nav class="sidenav-nav">
|
||||
<ul>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-modal-bg"></div>
|
||||
|
||||
<div class="content-container sidenav-static-content">
|
||||
<div class="styleguide-demo">
|
||||
<h1>Typography</h1>
|
||||
<iframe src="./styleguide/typography/demo.html" scrolling="no"></iframe>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">WSK <strong>Style Guide</strong></span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>List</h1>
|
||||
<iframe src="./styleguide/list/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="styleguide-demo">
|
||||
<h1>Typography</h1>
|
||||
<iframe src="./styleguide/typography/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Palette</h1>
|
||||
<iframe src="./styleguide/palette/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>List</h1>
|
||||
<iframe src="./styleguide/list/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Shadows</h1>
|
||||
<iframe src="./styleguide/shadow/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Palette</h1>
|
||||
<iframe src="./styleguide/palette/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Cards</h1>
|
||||
<iframe src="./styleguide/card/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Shadows</h1>
|
||||
<iframe src="./styleguide/shadow/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Animation</h1>
|
||||
<iframe src="./styleguide/animation/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Cards</h1>
|
||||
<iframe src="./styleguide/card/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Button</h1>
|
||||
<iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Animation</h1>
|
||||
<iframe src="./styleguide/animation/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Floating Action Button</h1>
|
||||
<iframe src="./styleguide/fab/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Button</h1>
|
||||
<iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Dropdown Menu</h1>
|
||||
<iframe src="./styleguide/dropdown-menu/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Floating Action Button</h1>
|
||||
<iframe src="./styleguide/fab/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Item</h1>
|
||||
<iframe src="./styleguide/item/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Dropdown Menu</h1>
|
||||
<iframe src="./styleguide/dropdown-menu/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Text Field</h1>
|
||||
<iframe src="./styleguide/textfield/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Item</h1>
|
||||
<iframe src="./styleguide/item/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Radio Buttons</h1>
|
||||
<iframe src="./styleguide/radio/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Text Field</h1>
|
||||
<iframe src="./styleguide/textfield/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Checkbox</h1>
|
||||
<iframe src="./styleguide/checkbox/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Radio Buttons</h1>
|
||||
<iframe src="./styleguide/radio/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Slider</h1>
|
||||
<iframe src="./styleguide/slider/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Checkbox</h1>
|
||||
<iframe src="./styleguide/checkbox/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Navigation</h1>
|
||||
<iframe src="./styleguide/navigation/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Slider</h1>
|
||||
<iframe src="./styleguide/slider/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Icons</h1>
|
||||
<p>See the material-design-icons pack that can be installed in your node_modules directory
|
||||
after running <code>npm install</code></p>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Layout</h1>
|
||||
<iframe src="./styleguide/layout/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Header panel</h1>
|
||||
<iframe src="./styleguide/header-panel/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Icons</h1>
|
||||
<p>See the material-design-icons pack that can be installed in your node_modules directory
|
||||
after running <code>npm install</code></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Tooltip</h1>
|
||||
<iframe src="./styleguide/tooltip/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Tooltip</h1>
|
||||
<iframe src="./styleguide/tooltip/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Column Layout</h1>
|
||||
<iframe src="./styleguide/column-layout/demo.html"></iframe>
|
||||
<div class="styleguide-demo">
|
||||
<h1>Column Layout</h1>
|
||||
<iframe src="./styleguide/column-layout/demo.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- build:js ../../scripts/main.min.js -->
|
||||
<script src="styleguide/navigation/sidenav.js" async defer></script>
|
||||
<script src="styleguide/layout/layout.js" async defer></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- Script to handle sizing the iFrames -->
|
||||
<script>
|
||||
'use strict';
|
||||
var sideNavList = document.querySelector('.sidenav-nav > ul');
|
||||
var navList = document.querySelector('.Layout-navigation > ul');
|
||||
var totalDemosPendingLoading = 0;
|
||||
sizeDemos();
|
||||
|
||||
|
|
@ -170,7 +163,7 @@
|
|||
|
||||
var listItem = document.createElement('li');
|
||||
listItem.appendChild(navAnchor);
|
||||
sideNavList.appendChild(listItem);
|
||||
navList.appendChild(listItem);
|
||||
|
||||
var anchor = document.createElement('a');
|
||||
anchor.id = anchorLink;
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
@import '../palette/palette';
|
||||
@import '../shadow/shadow';
|
||||
@import '../typography/typography';
|
||||
@import '../animation/animation';
|
||||
|
||||
/* Colors */
|
||||
$panel-bg-color: nth($primaryPalette, 6);
|
||||
$panel-text-color: nth($pagePalette, 3);
|
||||
|
||||
/* Sizes */
|
||||
$panel-small-height: 60px;
|
||||
$panel-medium-tall-height: 120px;
|
||||
$panel-tall-height: 180px;
|
||||
$panel-default-height: $panel-small-height;
|
||||
|
||||
.header-panel {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-panel > .header-panel-header {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
height: 60px;
|
||||
min-height: $panel-default-height;
|
||||
padding: 0 10px;
|
||||
background-color: $panel-bg-color;
|
||||
color: $panel-text-color;
|
||||
z-index: 100;
|
||||
transition-property: min-height;
|
||||
@include material-animation-default();
|
||||
@include typo-title();
|
||||
line-height: $panel-default-height;
|
||||
}
|
||||
|
||||
.header-panel.header-panel-tall > .header-panel-header {
|
||||
min-height: $panel-tall-height;
|
||||
}
|
||||
|
||||
.header-panel.header-panel-medium-tall > .header-panel-header {
|
||||
min-height: $panel-medium-tall-height;
|
||||
}
|
||||
|
||||
.header-panel > .header-panel-header.header-panel-compact {
|
||||
min-height: $panel-default-height;
|
||||
}
|
||||
|
||||
.header-panel.header-panel-scroll {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.header-panel > .header-panel-header.header-panel-shadow {
|
||||
@include shadow-z2();
|
||||
}
|
||||
|
||||
.header-panel > .header-panel-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-panel.header-panel-scroll > .header-panel-content {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Buttons</title>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel='stylesheet'>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-standard">
|
||||
<div class="header-panel-header">Standard</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-seamed">
|
||||
<div class="header-panel-header">Seamed</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-waterfall">
|
||||
<div class="header-panel-header">Waterfall</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-tall header-panel-waterfall">
|
||||
<div class="header-panel-header">Waterfall-tall</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-medium-tall header-panel-waterfall">
|
||||
<div class="header-panel-header">Waterfall-medium-tall</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-scroll">
|
||||
<div class="header-panel-header">Scroll</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- build:js(app/styleguide/header-panel/) ../../scripts/main.min.js -->
|
||||
<script src="header-panel.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
@import '../styleguide_demo_bp';
|
||||
@import '_header_panel';
|
||||
|
||||
.demo-container {
|
||||
width: 400px;
|
||||
float: left;
|
||||
margin: 0 40px 40px 0;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
height: 2000px;
|
||||
background: linear-gradient(rgb(214, 227, 231), lightblue);
|
||||
}
|
||||
|
||||
.header-panel {
|
||||
height: 500px;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
(function() {
|
||||
window.addEventListener('load', function() {
|
||||
var panels = document.querySelectorAll('.header-panel');
|
||||
var MODE = {
|
||||
STANDARD: 0,
|
||||
SEAMED: 1,
|
||||
WATERFALL: 2,
|
||||
SCROLL: 3
|
||||
};
|
||||
var SHADOW_CLASS = 'header-panel-shadow';
|
||||
var COMPACT_CLASS = 'header-panel-compact';
|
||||
|
||||
var scrollHandler = function(mode, header, content) {
|
||||
return function() {
|
||||
if (mode === MODE.WATERFALL) {
|
||||
if (content.scrollTop > 0) {
|
||||
header.classList.add(SHADOW_CLASS);
|
||||
header.classList.add(COMPACT_CLASS);
|
||||
} else {
|
||||
header.classList.remove(SHADOW_CLASS);
|
||||
header.classList.remove(COMPACT_CLASS);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
for (var i = 0; i < panels.length; i++) {
|
||||
var panel = panels[i];
|
||||
var header = panel.querySelector('.header-panel-header');
|
||||
var content = panel.querySelector('.header-panel-content');
|
||||
var mode = MODE.STANDARD;
|
||||
if (panel.classList.contains('header-panel-seamed')) {
|
||||
mode = MODE.SEAMED;
|
||||
} else if (panel.classList.contains('header-panel-waterfall')) {
|
||||
mode = MODE.WATERFALL;
|
||||
} else if (panel.classList.contains('header-panel-scroll')) {
|
||||
mode = MODE.SCROLL;
|
||||
}
|
||||
|
||||
if (mode === MODE.STANDARD) {
|
||||
header.classList.add(SHADOW_CLASS);
|
||||
} else if (mode === MODE.SEAMED || mode === MODE.SCROLL) {
|
||||
header.classList.remove(SHADOW_CLASS);
|
||||
} else if (mode === MODE.WATERFALL) {
|
||||
var handler = scrollHandler(mode, header, content);
|
||||
content.addEventListener('scroll', handler);
|
||||
handler();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
# Layout module
|
||||
|
||||
The layout module allows you to build layouts easily, simply by adding a few CSS classes. Everybody loves CSS classes.
|
||||
|
||||
## Basic Example
|
||||
|
||||
```html
|
||||
<div class="Layout">
|
||||
<div class="Layout-header">
|
||||
<!-- Title -->
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="Layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
(...)
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
(...)
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Layout
|
||||
|
||||
The container element.
|
||||
|
||||
### Options
|
||||
|
||||
- `Layout--fixedHeader`:
|
||||
By default, headers are only shown in larger screens. Using this option makes them visible in smaller screens as well.
|
||||
|
||||
- `Layout--fixedDrawer`:
|
||||
By default, drawers are only shown in smaller screens. Using this option makes them always visible and open in larger screens, effectively functioning as side navigation. They still open and close normally in smaller screens, to save screen real estate.
|
||||
|
||||
### State
|
||||
|
||||
- `is-small-screen`:
|
||||
Utility class that gets added to the layout when in a small screen size.
|
||||
|
||||
|
||||
## Layout-header
|
||||
|
||||
The header element (optional). By default, it's only shown in large screens.
|
||||
|
||||
### Options
|
||||
|
||||
- `Layout-header--transparent`:
|
||||
Makes the background transparent, instead of the default main palette color.
|
||||
|
||||
- `Layout-header--mediumTall`:
|
||||
Makes the header twice the height of a default header.
|
||||
|
||||
- `Layout-header--tall`:
|
||||
Makes the header three times the height of a default header.
|
||||
|
||||
- `Layout-header--multiRow`:
|
||||
Allows stacking of multiple rows inside the header (by default, it only has one). Example:
|
||||
```html
|
||||
<div class="Layout-header Layout-header--multiRow Layout-header--tall">
|
||||
<!-- Top row -->
|
||||
<div class="Layout-header-row">
|
||||
<span>Upper row</span>
|
||||
</div>
|
||||
<div class="Layout-header-row">
|
||||
<span>Middle row</span>
|
||||
</div>
|
||||
<div class="Layout-header-row">
|
||||
<span>Bottom row</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- `Layout-header--seamed`:
|
||||
By default, the header casts a shadow onto the content. This option removes the shadow altogether.
|
||||
|
||||
- `Layout-header--waterfall`:
|
||||
By default, the header casts a shadow onto the content. This option removes the shadow when the page is at the top of the content, and only shows the shadow if the user has scrolled down.
|
||||
|
||||
- `Layout-header--scroll`:
|
||||
By default, the header stays fixed at the top. This option makes it scroll with the content, so it's only visible at the top of the page.
|
||||
|
||||
### State
|
||||
|
||||
- `is-compact`:
|
||||
Utility class that gets added to the header when in waterfall mode the user has scrolled down, and thus the header has collapsed to a single row.
|
||||
|
||||
|
||||
### Sub-elements
|
||||
|
||||
- `Layout-header-row`:
|
||||
Used when stacking multiple rows inside the header (by default, it only has one). Example:
|
||||
|
||||
```html
|
||||
<div class="Layout-header Layout-header--multiRow Layout-header--tall">
|
||||
<div class="Layout-header-row">
|
||||
<span>Upper row</span>
|
||||
</div>
|
||||
<div class="Layout-header-row">
|
||||
<span>Middle row</span>
|
||||
</div>
|
||||
<div class="Layout-header-row">
|
||||
<span>Bottom row</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Layout-drawer
|
||||
|
||||
The drawer element (optional). By default, it's only shown in small screens, as a collapsible panel.
|
||||
|
||||
### Options
|
||||
|
||||
None.
|
||||
|
||||
### State
|
||||
|
||||
- `is-visible`:
|
||||
This class is added to the drawer when it is currently visible.
|
||||
|
||||
|
||||
## Layout-content
|
||||
|
||||
Your content goes here :)
|
||||
|
||||
|
||||
## Other Elements
|
||||
|
||||
- `Layout-spacer`:
|
||||
Used to align elements inside a header or drawer. `Layout-spacer` is a class set to flex grow, so you can use it to align elements to the right in a header, for example:
|
||||
```html
|
||||
<div class="Layout-header">
|
||||
<span>Left-aligned text</span>
|
||||
<div class="Layout-spacer"></div>
|
||||
<span>Right-aligned text</span>
|
||||
</div>
|
||||
```
|
||||
or to the center:
|
||||
```html
|
||||
<div class="Layout-header">
|
||||
<div class="Layout-spacer"></div>
|
||||
<span>Center-aligned text</span>
|
||||
<div class="Layout-spacer"></div>
|
||||
</div>
|
||||
```
|
||||
You can also use it to align to bottom in a drawer:
|
||||
```html
|
||||
<div class="Layout-drawer">
|
||||
<span>Top-aligned text</span>
|
||||
<div class="Layout-spacer"></div>
|
||||
<span>Bottom-aligned text</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
- `Layout-title`:
|
||||
Styles the text inside to look like a title (slightly different styling depending on container).
|
||||
```html
|
||||
<div class="Layout-header">
|
||||
<div class="Layout-title">My Awesome Site</div>
|
||||
</div>
|
||||
```
|
||||
```html
|
||||
<div class="Layout-drawer">
|
||||
<div class="Layout-title">My Awesome Site</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -0,0 +1,358 @@
|
|||
@import '../palette/palette';
|
||||
@import '../shadow/shadow';
|
||||
@import '../typography/typography';
|
||||
@import '../animation/animation';
|
||||
|
||||
// Colors
|
||||
$sidenav-bg-color: nth($pagePalette, 1);
|
||||
$sidenav-border-color: nth($pagePalette, 4);
|
||||
$text-color: nth($pagePalette, 9);
|
||||
|
||||
$panel-bg-color: nth($primaryPalette, 6);
|
||||
$panel-text-color: nth($pagePalette, 3);
|
||||
|
||||
// Dimensions
|
||||
$nav-narrow: 240px;
|
||||
$nav-wide: 456px;
|
||||
$nav-width: $nav-narrow;
|
||||
|
||||
$horizontal-padding: 24px;
|
||||
|
||||
$panel-row-height: 60px;
|
||||
$panel-default-height: $panel-row-height;
|
||||
$screen-size-threshold: 850px;
|
||||
|
||||
.Layout {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Layout-drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
width: $nav-width;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
@include shadow-z1();
|
||||
|
||||
// With this, we get a huge paint before it runs.
|
||||
box-sizing: border-box;
|
||||
|
||||
border-right: 1px solid $sidenav-border-color;
|
||||
background: $sidenav-bg-color;
|
||||
|
||||
// Transform offscreen.
|
||||
transform: translateX(-$nav-width - 10px);
|
||||
transform-style: preserve-3d;
|
||||
|
||||
will-change: transform;
|
||||
|
||||
transition-property: transform;
|
||||
@include material-animation-default();
|
||||
|
||||
color: nth($pagePalette, 9);
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.Layout-drawer > .Layout-title {
|
||||
display: block;
|
||||
@include typo-title();
|
||||
box-sizing: border-box;
|
||||
line-height: $panel-default-height;
|
||||
padding-left: $horizontal-padding;
|
||||
border-bottom: 1px solid $sidenav-border-color;
|
||||
}
|
||||
|
||||
.Layout-drawer > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.Layout-drawer.is-visible {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
.Layout-drawer .Layout-navigation {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
color: $text-color;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
padding: 16px $horizontal-padding;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: nth($pagePalette, 4);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO(sgomes): Replace with an icon button when we have that component.
|
||||
.Layout-drawerButton {
|
||||
display: inline;
|
||||
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
border: 0;
|
||||
|
||||
overflow: hidden;
|
||||
font-size: 26px;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
margin: 8px;
|
||||
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.Layout-drawerButton:after {
|
||||
// TODO(sgomes): Replace with proper menu icon once we have an icon font.
|
||||
content: '☰';
|
||||
}
|
||||
|
||||
.Layout-header .Layout-drawerButton {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0 16px 0 0;
|
||||
color: $panel-text-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-size-threshold + 1px) {
|
||||
.Layout-drawerButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Layout--fixedDrawer > .Layout-drawer {
|
||||
transform: translateX(0px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.Layout--fixedDrawer > .Layout-content {
|
||||
margin-left: $nav-width;
|
||||
}
|
||||
|
||||
.Layout--fixedDrawer > .Layout-header {
|
||||
margin-left: $nav-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Header
|
||||
|
||||
.Layout-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
height: 60px;
|
||||
min-height: $panel-default-height;
|
||||
background-color: $panel-bg-color;
|
||||
color: $panel-text-color;
|
||||
z-index: 3;
|
||||
transition-property: min-height, box-shadow;
|
||||
@include material-animation-default();
|
||||
padding-left: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Layout-header--transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.Layout-header--multiRow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.Layout-header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
min-height: $panel-row-height;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Layout-header > *,
|
||||
.Layout-header-row > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Add a margin to the last entry...
|
||||
.Layout-header > *:last-child,
|
||||
.Layout-header-row > *:last-child {
|
||||
margin-right: $horizontal-padding;
|
||||
}
|
||||
|
||||
// ...unless it's a navigation area.
|
||||
.Layout-header > .Layout-navigation:last-child,
|
||||
.Layout-header-row > .Layout-navigation:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// No margins on header rows, either.
|
||||
.Layout-header.Layout-header--multiRow > .Layout-header-row {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.Layout-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Layout-header .Layout-title {
|
||||
display: block;
|
||||
@include typo-title();
|
||||
}
|
||||
|
||||
.Layout-header .Layout-navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: $panel-row-height;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
ul {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
color: $panel-text-color;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: rgba(nth($paletteGrey, 8), 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.Layout-header.Layout-header--mediumTall {
|
||||
min-height: 2 * $panel-row-height;
|
||||
}
|
||||
|
||||
.Layout-header.Layout-header--tall {
|
||||
min-height: 3 * $panel-row-height;
|
||||
}
|
||||
|
||||
.Layout-header.is-compact {
|
||||
min-height: $panel-row-height;
|
||||
}
|
||||
|
||||
.Layout-header.is-casting-shadow {
|
||||
@include shadow-z1();
|
||||
}
|
||||
|
||||
.Layout-header.Layout-header--transparent.is-casting-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.Layout-content {
|
||||
// Fix IE10 bug.
|
||||
-ms-flex: 0 1 auto;
|
||||
|
||||
display: inline-block;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex-grow: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Layout-header.Layout-header--scroll ~ .Layout-content {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.Layout-drawer.is-visible ~ .Layout-obfuscator {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $screen-size-threshold) {
|
||||
.Layout-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Layout--fixedHeader > .Layout-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Layout-header.Layout-header--scroll ~ .Layout-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.Layout-obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
transition-property: background-color;
|
||||
@include material-animation-default();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,341 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Layout</title>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel='stylesheet'>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<h3>Default layout</h3>
|
||||
<p>Uses a header for large screen sizes and a collapsible drawer for smaller
|
||||
screens.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="Layout">
|
||||
<div class="Layout-header">
|
||||
<!-- Title -->
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="Layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Scrolling header</h3>
|
||||
<p>Same as the standard layout, but the header scrolls with the content.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="Layout">
|
||||
<div class="Layout-header Layout-header--scroll">
|
||||
<!-- Title -->
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="Layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fixed drawer with header</h3>
|
||||
<p>The drawer is always open in large screen sizes, functioning as side
|
||||
navigation.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="Layout Layout--fixedDrawer">
|
||||
<div class="Layout-header">
|
||||
<span class="Layout-title">Fixed drawer layout demo</span>
|
||||
<div class="Layout-spacer"></div>
|
||||
<div class="input-container right large">
|
||||
<label class="ExpandableIcon" for="sample-expclean">
|
||||
<span class="IconSearch"></span>
|
||||
</label>
|
||||
<div class="ExpandableHolder">
|
||||
<input class="TextField TextField-expandable" type="text"
|
||||
name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fixed drawer (no header)</h3>
|
||||
<p>Same as the previous layout, but with no header.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="Layout Layout--fixedDrawer">
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fixed header</h3>
|
||||
<p>Always shows a header, even in smaller screens.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="Layout Layout--fixedHeader">
|
||||
<div class="Layout-header">
|
||||
<!-- Title -->
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="Layout-spacer"></div>
|
||||
<!-- Navigation. We use CSS to hide it in small screens. -->
|
||||
<nav class="Layout-navigation" id="fixed_header_nav">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fixed drawer and fixed header</h3>
|
||||
<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="Layout Layout--fixedDrawer Layout--fixedHeader">
|
||||
<div class="Layout-header">
|
||||
<span class="Layout-title">Fixed drawer and header</span>
|
||||
<div class="Layout-spacer"></div>
|
||||
<div class="input-container right large">
|
||||
<label class="ExpandableIcon" for="sample-expclean2">
|
||||
<span class="IconSearch"></span>
|
||||
</label>
|
||||
<div class="ExpandableHolder">
|
||||
<input class="TextField TextField-expandable" type="text"
|
||||
name="sample" id="sample-expclean2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Multi-row layout</h3>
|
||||
<p>Example of a more complex waterfall header, with multiple rows.</p>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="Layout">
|
||||
<div class="Layout-header Layout-header--multiRow Layout-header--waterfall Layout-header--tall">
|
||||
<!-- Top row -->
|
||||
<div class="Layout-header-row">
|
||||
<span id="my_text_changes">Web Starter Kit</span>
|
||||
<div class="Layout-spacer"></div>
|
||||
<!-- Only show when compact, check CSS -->
|
||||
<nav class="Layout-navigation" id="compact_navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Middle row, subtitle -->
|
||||
<div class="Layout-header-row">
|
||||
<span class="Typography--title">
|
||||
Multi-row layout demo
|
||||
</span>
|
||||
</div>
|
||||
<!-- Bottom row -->
|
||||
<div class="Layout-header-row">
|
||||
<div class="Layout-spacer"></div>
|
||||
<!-- Only show when expanded, check CSS -->
|
||||
<nav class="Layout-navigation" id="expanded_navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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="Layout" id="transparent_demo">
|
||||
<div class="Layout-header Layout-header--transparent">
|
||||
<!-- Title -->
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="Layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-drawer">
|
||||
<span class="Layout-title">Web Starter Kit</span>
|
||||
<nav class="Layout-navigation">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="Layout-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- build:js(app/styleguide/layout/) ../../scripts/main.min.js -->
|
||||
<script src="layout.js"></script>
|
||||
<script src="../textfield/textfield.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
@import '../styleguide_demo_bp';
|
||||
@import '_layout';
|
||||
@import '../textfield/_textfield';
|
||||
@import '../animation/animation';
|
||||
@import '../palette/palette';
|
||||
|
||||
.demo-container {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0 40px 40px 0;
|
||||
border: 1px solid #888888;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
height: 1000px;
|
||||
background: linear-gradient(rgb(214, 227, 231), lightblue);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.Layout {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
// Styles for fixed drawer demos.
|
||||
.Layout-header .ExpandableIcon {
|
||||
border-color: nth($pagePalette, 3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.Layout-header .ExpandableIcon:hover {
|
||||
background-color: rgba(nth($paletteGrey, 8), 0.6);
|
||||
}
|
||||
|
||||
.Layout-header .TextField {
|
||||
color: nth($pagePalette, 3);
|
||||
}
|
||||
|
||||
// Styles for fixed header demo.
|
||||
.Layout.is-small-screen .Layout-header #fixed_header_nav {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Styles for multi-row layout demo.
|
||||
.Layout-header #my_text_changes {
|
||||
@include typo-display-1;
|
||||
transition-property: font-size;
|
||||
@include material-animation-default();
|
||||
}
|
||||
|
||||
.Layout-header #compact_navigation {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.Layout-header #expanded_navigation {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.Layout-header.is-compact #my_text_changes {
|
||||
@include typo-title;
|
||||
}
|
||||
|
||||
.Layout-header.is-compact #compact_navigation {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.Layout-header.is-compact #expanded_navigation {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.Layout-header.is-compact #my_text_changes:after {
|
||||
content: " \0000a0 > \0000a0 Multi-row layout demo";
|
||||
}
|
||||
|
||||
// Styles for transparent header demo.
|
||||
#transparent_demo {
|
||||
background-color: #948d85;
|
||||
background-image: url('images/desktop-handsfree-hero.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
|
||||
background-position: center 0%;
|
||||
}
|
||||
0
app/styleguide/navigation/images/desktop-handsfree-hero.jpg → app/styleguide/layout/images/desktop-handsfree-hero.jpg
Normal file → Executable file
0
app/styleguide/navigation/images/desktop-handsfree-hero.jpg → app/styleguide/layout/images/desktop-handsfree-hero.jpg
Normal file → Executable file
|
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 227 KiB |
|
|
@ -0,0 +1,112 @@
|
|||
window.addEventListener('load', function() {
|
||||
'use strict';
|
||||
|
||||
var layouts = document.querySelectorAll('.Layout');
|
||||
var MODE = {
|
||||
STANDARD: 0,
|
||||
SEAMED: 1,
|
||||
WATERFALL: 2,
|
||||
SCROLL: 3
|
||||
};
|
||||
|
||||
var DRAWER_BUTTON_CLASS = 'Layout-drawerButton';
|
||||
|
||||
var SHADOW_CLASS = 'is-casting-shadow';
|
||||
var COMPACT_CLASS = 'is-compact';
|
||||
var SMALL_SCREEN_CLASS = 'is-small-screen';
|
||||
var DRAWER_OPEN_CLASS = 'is-visible';
|
||||
|
||||
var scrollHandlerGenerator = function(header, content) {
|
||||
return function() {
|
||||
if (content.scrollTop > 0) {
|
||||
header.classList.add(SHADOW_CLASS);
|
||||
header.classList.add(COMPACT_CLASS);
|
||||
} else {
|
||||
header.classList.remove(SHADOW_CLASS);
|
||||
header.classList.remove(COMPACT_CLASS);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var screenSizeHandlerGenerator = function(mediaQuery, layout, drawer) {
|
||||
return function() {
|
||||
if (mediaQuery.matches) {
|
||||
layout.classList.add(SMALL_SCREEN_CLASS);
|
||||
}
|
||||
else {
|
||||
layout.classList.remove(SMALL_SCREEN_CLASS);
|
||||
// Collapse drawer (if any) when moving to a large screen size.
|
||||
if (drawer) {
|
||||
drawer.classList.remove(DRAWER_OPEN_CLASS);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var drawerToggleHandlerGenerator = function(drawer) {
|
||||
return function() {
|
||||
drawer.classList.toggle(DRAWER_OPEN_CLASS);
|
||||
};
|
||||
};
|
||||
|
||||
for (var i = 0; i < layouts.length; i++) {
|
||||
var layout = layouts[i];
|
||||
var header = layout.querySelector('.Layout-header');
|
||||
var drawer = layout.querySelector('.Layout-drawer');
|
||||
var content = layout.querySelector('.Layout-content');
|
||||
var mode = MODE.STANDARD;
|
||||
|
||||
// Keep an eye on screen size, and add/remove auxiliary class for styling
|
||||
// of small screens.
|
||||
var mediaQuery = window.matchMedia('(max-width: 850px)');
|
||||
var screenSizeHandler =
|
||||
screenSizeHandlerGenerator(mediaQuery, layout, drawer);
|
||||
mediaQuery.addListener(screenSizeHandler);
|
||||
screenSizeHandler();
|
||||
|
||||
if (header) {
|
||||
if (header.classList.contains('Layout-header--seamed')) {
|
||||
mode = MODE.SEAMED;
|
||||
} else if (header.classList.contains('Layout-header--waterfall')) {
|
||||
mode = MODE.WATERFALL;
|
||||
} else if (layout.classList.contains('Layout-header--scroll')) {
|
||||
mode = MODE.SCROLL;
|
||||
}
|
||||
|
||||
if (mode === MODE.STANDARD) {
|
||||
header.classList.add(SHADOW_CLASS);
|
||||
} else if (mode === MODE.SEAMED || mode === MODE.SCROLL) {
|
||||
header.classList.remove(SHADOW_CLASS);
|
||||
} else if (mode === MODE.WATERFALL) {
|
||||
// Add and remove shadows depending on scroll position.
|
||||
// Also add/remove auxiliary class for styling of the compact version of
|
||||
// the header.
|
||||
var scrollHandler = scrollHandlerGenerator(header, content);
|
||||
content.addEventListener('scroll', scrollHandler);
|
||||
scrollHandler();
|
||||
}
|
||||
}
|
||||
|
||||
// Add drawer toggling button to our layout, if we have an openable drawer.
|
||||
if (drawer) {
|
||||
var drawerButton = document.createElement('div');
|
||||
drawerButton.classList.add(DRAWER_BUTTON_CLASS);
|
||||
var clickHandler = drawerToggleHandlerGenerator(drawer);
|
||||
drawerButton.addEventListener('click', clickHandler);
|
||||
|
||||
// If we have a fixed header, add the button to the header rather than
|
||||
// the layout.
|
||||
if (layout.classList.contains('Layout--fixedHeader')) {
|
||||
header.insertBefore(drawerButton, header.firstChild);
|
||||
} else {
|
||||
layout.appendChild(drawerButton);
|
||||
}
|
||||
|
||||
var obfuscator = document.createElement('div');
|
||||
obfuscator.classList.add('Layout-obfuscator');
|
||||
layout.appendChild(obfuscator);
|
||||
obfuscator.addEventListener('click', clickHandler);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
@import "../palette/palette";
|
||||
@import "sidenav-shared";
|
||||
|
||||
$toolbar-bg-color: nth($primaryPalette, 6);
|
||||
$nav-link-color: nth($paletteGrey, 3);
|
||||
$nav-link-color-light: nth($paletteGrey, 1);
|
||||
|
||||
$nav-centered-side-width: 128px;
|
||||
|
||||
.sidenav-horizontal {
|
||||
|
||||
}
|
||||
|
||||
.sidenav-centered-content {
|
||||
@extend .sidenav-content;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px) {
|
||||
.sidenav-horizontal {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
position: initial;
|
||||
|
||||
transform: translateX(0px);
|
||||
|
||||
background: $toolbar-bg-color;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.sidenav-horizontal h1, .sidenav-horizontal .logo {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.sidenav-horizontal.transparent {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sidenav-horizontal.centered {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sidenav-horizontal::after {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.sidenav-horizontal h1 {
|
||||
float: left;
|
||||
|
||||
color: $nav-link-color-light;
|
||||
}
|
||||
|
||||
.sidenav-horizontal.centered h1 {
|
||||
float: none;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.sidenav-horizontal .sidenav-nav ul {
|
||||
float: right;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
li a {
|
||||
color: $nav-link-color;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
background-color: nth($primaryPalette, 14);
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-horizontal.transparent .sidenav-nav ul {
|
||||
li a:hover {
|
||||
background-color: rgba(nth($paletteGrey, 8), 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-horizontal.centered .sidenav-nav ul {
|
||||
float: none;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-centered-content {
|
||||
border-width: 0 $nav-centered-side-width;
|
||||
border-style: solid;
|
||||
border-color: $toolbar-bg-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
@import "../palette/palette";
|
||||
@import "../typography/typography";
|
||||
@import "../animation/animation";
|
||||
|
||||
/* Colors */
|
||||
$sidenav-bg-color: nth($pagePalette, 1);
|
||||
$sidenav-border-color: nth($pagePalette, 4);
|
||||
$sidenav-modal-bg-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
$sidenav-container-h1-color: nth($primaryPalette, 1);
|
||||
$sidenav-container-shadow: 0 2px 5px rgba(0,0,0,.26);
|
||||
|
||||
$nav-link-color: nth($primaryPalette, 3);
|
||||
|
||||
$logo-border-color: nth($pagePalette, 4); /*#e0e0e0;*/
|
||||
|
||||
$text-color: nth($pagePalette, 9);
|
||||
|
||||
/* Positions */
|
||||
/* Set menu button position (left or right) to 0px */
|
||||
$nav-button-right: 0px;
|
||||
$nav-button-left: auto;
|
||||
|
||||
/* Navigation Top */
|
||||
$nav-padding-top: 0%; /* Try 30%*/
|
||||
|
||||
/* Dimensions */
|
||||
$nav-narrow: 240px;
|
||||
$nav-wide: 456px;
|
||||
$nav-width: $nav-narrow;
|
||||
|
||||
$vertical-padding: 16px;
|
||||
$horizontal-padding: 24px;
|
||||
|
||||
.sidenav {
|
||||
display: block;
|
||||
|
||||
width: $nav-width;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
box-shadow: $sidenav-container-shadow;
|
||||
// With this, we get a huge paint before it runs.
|
||||
box-sizing: border-box;
|
||||
|
||||
border-right: 1px solid $sidenav-border-color;
|
||||
background: $sidenav-bg-color;
|
||||
|
||||
// Transform offscreen
|
||||
transform: translateX(-$nav-width);
|
||||
transform-style: preserve-3d;
|
||||
|
||||
will-change: transform;
|
||||
|
||||
color: nth($pagePalette, 9);
|
||||
|
||||
z-index: 4;
|
||||
|
||||
.logo {
|
||||
padding: 18px $horizontal-padding 18px $horizontal-padding;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid $logo-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav.visible {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
.sidenav.animatable {
|
||||
transition-delay: 0.1s;
|
||||
@include material-animation-default();
|
||||
}
|
||||
|
||||
.sidenav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
|
||||
}
|
||||
|
||||
li > a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
|
||||
color: $text-color;
|
||||
font-weight: 700;
|
||||
padding: 1.6em 1.6em;
|
||||
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
background-color: nth($pagePalette, 4);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
display: block;
|
||||
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
position: fixed;
|
||||
left: $nav-button-left;
|
||||
right: $nav-button-right;
|
||||
top: 0;
|
||||
|
||||
background-image: url(/styleguide/navigation/images/hamburger.svg);
|
||||
background-position:center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 24px 24px;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidenav-modal-bg {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
will-change: opacity;
|
||||
|
||||
// This is an unfortunate hack to prevent large paints in Chrome
|
||||
opacity: 0.000001;
|
||||
|
||||
background-color: $sidenav-modal-bg-color;
|
||||
pointer-events: none;
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.sidenav-modal-bg.animatable {
|
||||
transition: visibility 0 linear .4s,opacity .4s $animation-curve-default;
|
||||
}
|
||||
|
||||
.sidenav-modal-bg.visible {
|
||||
opacity: 1;
|
||||
|
||||
pointer-events: all;
|
||||
|
||||
transition-delay: 0;
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
padding: $vertical-padding $horizontal-padding;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px) {
|
||||
.nav-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidenav-modal-bg.visible {
|
||||
opacity: 0.1;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
@import "../palette/palette";
|
||||
@import "sidenav-shared";
|
||||
|
||||
$nav-link-color: nth($paletteGrey, 3);
|
||||
$nav-link-color-light: nth($paletteGrey, 1);
|
||||
|
||||
.sidenav-static {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
.sidenav-nav {
|
||||
flex: 1;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-static-content {
|
||||
@extend .sidenav-content;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px) {
|
||||
.sidenav-static {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
ul li a {
|
||||
padding: 1.1em 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-static.transparent {
|
||||
background:none;
|
||||
box-shadow: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.sidenav-static.transparent h1 {
|
||||
color: $nav-link-color-light;
|
||||
}
|
||||
|
||||
.sidenav-static.transparent .sidenav-nav ul {
|
||||
li a {
|
||||
color: $nav-link-color;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
background-color: rgba(nth($paletteGrey, 8), 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-static-content {
|
||||
padding: $vertical-padding $horizontal-padding $vertical-padding ($nav-width + $horizontal-padding);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Navigation Bar</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="demo-horizontal.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="nav-button">Show navigation</button>
|
||||
|
||||
<div class="sidenav sidenav-horizontal centered">
|
||||
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||
<nav class="sidenav-nav">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-centered-content">
|
||||
<p>Content goes here.</p>
|
||||
<p>Content goes here.</p>
|
||||
<p>Content goes here.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-modal-bg"></div>
|
||||
<!-- build:js(app/styleguide/navigation/) ../../scripts/main.min.js -->
|
||||
<script src="sidenav.js" async defer></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Navigation Bar</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="demo-horizontal.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="nav-button">Show navigation</button>
|
||||
|
||||
<div class="sidenav sidenav-horizontal">
|
||||
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||
<nav class="sidenav-nav">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-content">
|
||||
<p>Content goes here.</p>
|
||||
<p>Content goes here.</p>
|
||||
<p>Content goes here.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-modal-bg"></div>
|
||||
|
||||
<!-- build:js(app/styleguide/navigation/) ../../scripts/main.min.js -->
|
||||
<script src="sidenav.js" async defer></script>
|
||||
<!-- enduild -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import 'sidenav-horizontal';
|
||||
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Navigation Bar</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="demo-static.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="nav-button">Show navigation</button>
|
||||
|
||||
<div class="sidenav sidenav-static">
|
||||
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||
<nav class="sidenav-nav">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-static-content">
|
||||
<p>Content goes here.</p>
|
||||
<p>Content goes here.</p>
|
||||
<p>Content goes here.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-modal-bg"></div>
|
||||
<!-- build:js(app/styleguide/navigation/) ../../scripts/main.min.js -->
|
||||
<script src="sidenav.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import 'sidenav-static';
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Navigation Bar</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="demo-transparent.css">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('images/desktop-handsfree-hero.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button class="nav-button" style="fill: white;">Show navigation</button>
|
||||
|
||||
<div class="sidenav sidenav-horizontal transparent">
|
||||
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||
<nav class="sidenav-nav">
|
||||
<ul>
|
||||
<li><a href="">Hello</a></li>
|
||||
<li><a href="">World.</a></li>
|
||||
<li><a href="">How</a></li>
|
||||
<li><a href="">Are</a></li>
|
||||
<li><a href="">You?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidenav-modal-bg"></div>
|
||||
<!-- build:js(app/styleguide/navigation/) ../../scripts/main.min.js -->
|
||||
<script src="sidenav.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import 'sidenav-horizontal';
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Navigation Bar</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Horizontal Navigation</h2>
|
||||
<iframe src="demo-horizontal.html"></iframe>
|
||||
|
||||
<h2>Centered Horizontal Navigation</h2>
|
||||
<iframe src="demo-centered-horizontal.html"></iframe>
|
||||
|
||||
<h2>Static Navigation</h2>
|
||||
<iframe src="demo-static.html"></iframe>
|
||||
|
||||
<h2>Transparent Navigation</h2>
|
||||
<iframe src="demo-transparent.html"></iframe>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 188 KiB |
|
|
@ -1,54 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g display="none" opacity="0.5">
|
||||
<defs>
|
||||
<rect id="SVGID_1_" opacity="0.5" width="24" height="24"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_" display="inline">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<g display="inline" clip-path="url(#SVGID_2_)">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_3_" width="24" height="24"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_4_">
|
||||
<use xlink:href="#SVGID_3_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<path clip-path="url(#SVGID_4_)" fill="#010101" d="M15.502,14h-0.794l-0.274-0.273c0.976-1.138,1.565-2.61,1.565-4.227
|
||||
C15.999,5.91,13.09,3,9.5,3S3,5.91,3,9.5S5.91,16,9.5,16c1.615,0,3.088-0.592,4.225-1.566l0.276,0.274V15.5l4.998,4.991
|
||||
L20.49,19L15.502,14z M9.5,14C7.015,14,5,11.985,5,9.5S7.015,5,9.5,5S14,7.015,14,9.5S11.985,14,9.5,14"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g opacity="0.5">
|
||||
<defs>
|
||||
<rect id="SVGID_5_" opacity="0.5" width="24" height="24"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_6_">
|
||||
<use xlink:href="#SVGID_5_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#SVGID_6_)">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_7_" width="24" height="24"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_8_">
|
||||
<use xlink:href="#SVGID_7_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<path clip-path="url(#SVGID_8_)" fill="#010101" d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,8h18V6H3V8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,118 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
(function() {
|
||||
/**
|
||||
* SideNav Prototype Start
|
||||
*/
|
||||
function SideNav(sidenavElement) {
|
||||
|
||||
if (sidenavElement === undefined || sidenavElement.nodeType === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.STATE_OPEN = 0;
|
||||
this.STATE_CLOSE = 1;
|
||||
|
||||
var currentState = null;
|
||||
sidenavElement.addEventListener('transitionend', function() {
|
||||
sidenavElement.classList.remove('animatable');
|
||||
});
|
||||
|
||||
this.changeState = function(newState) {
|
||||
switch (newState) {
|
||||
case this.STATE_OPEN:
|
||||
sidenavElement.classList.add('animatable');
|
||||
sidenavElement.classList.add('visible');
|
||||
this.sendEvent('onSideNavOpen');
|
||||
break;
|
||||
case this.STATE_CLOSE:
|
||||
sidenavElement.classList.add('animatable');
|
||||
sidenavElement.classList.remove('visible');
|
||||
this.sendEvent('onSideNavClose');
|
||||
break;
|
||||
}
|
||||
|
||||
currentState = newState;
|
||||
};
|
||||
|
||||
this.isOpen = function() {
|
||||
return currentState === this.STATE_OPEN;
|
||||
};
|
||||
|
||||
this.sendEvent = function(evtName, data) {
|
||||
var evt = document.createEvent('Event');
|
||||
evt.initEvent(evtName, true, true);
|
||||
if (!!data) {
|
||||
evt.data = data;
|
||||
}
|
||||
sidenavElement.dispatchEvent(evt);
|
||||
};
|
||||
|
||||
this.addEventListener = function(eventName, cb) {
|
||||
sidenavElement.addEventListener(eventName, cb);
|
||||
};
|
||||
}
|
||||
|
||||
SideNav.prototype.open = function() {
|
||||
this.changeState(this.STATE_OPEN);
|
||||
};
|
||||
|
||||
SideNav.prototype.close = function() {
|
||||
this.changeState(this.STATE_CLOSE);
|
||||
};
|
||||
|
||||
SideNav.prototype.toggle = function() {
|
||||
if (this.isOpen()) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* SideNav Prototype End
|
||||
*/
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
|
||||
var modalBg = document.querySelector('.sidenav-modal-bg');
|
||||
var menuButton = document.querySelector('.nav-button');
|
||||
var sidenavs = document.querySelectorAll('.sidenav');
|
||||
var sidenav = new SideNav(sidenavs[0]);
|
||||
|
||||
if (sidenav === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
sidenav.addEventListener('onSideNavOpen', function() {
|
||||
if (!modalBg) {
|
||||
// No modal dialog - nothing to do
|
||||
return;
|
||||
}
|
||||
|
||||
modalBg.classList.add('animatable');
|
||||
modalBg.classList.add('visible');
|
||||
});
|
||||
|
||||
sidenav.addEventListener('onSideNavClose', function() {
|
||||
if (!modalBg) {
|
||||
// No modal dialog - nothing to do
|
||||
return;
|
||||
}
|
||||
|
||||
modalBg.classList.add('animatable');
|
||||
modalBg.classList.remove('visible');
|
||||
});
|
||||
|
||||
modalBg.addEventListener('transitionend', function() {
|
||||
modalBg.classList.remove('animatable');
|
||||
});
|
||||
|
||||
modalBg.addEventListener('click', function(evt) {
|
||||
sidenav.close();
|
||||
});
|
||||
|
||||
menuButton.addEventListener('click', function(evt) {
|
||||
sidenav.toggle();
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@import 'typography/typography';
|
||||
@import "palette/palette";
|
||||
@import "navigation/sidenav-static";
|
||||
@import "layout/layout";
|
||||
|
||||
$padding: 24px;
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
* Visual Style Guide styles
|
||||
* Remove if you prefer to use a CSS library, like Bootstrap
|
||||
*/
|
||||
@import '../styleguide/navigation/demo-horizontal';
|
||||
|
||||
@import "../styleguide/layout/layout";
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue