mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-19 16:18:04 +03:00
Merge pull request #22 from yeoman/remove-samples
Remove samples, replace with alt-layout.html
This commit is contained in:
Ian Barber
commit
7d6d283762
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 215 B |
@ -1,70 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>Images: Compressive Image Technique Comparison</title>
|
||||
<style>
|
||||
.ada {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div role="main" class="container">
|
||||
<figure>
|
||||
<h2>1x Image</h2>
|
||||
<a href="ada_lovelace-300-q90.jpg">
|
||||
<img class="ada" src="ada_lovelace-300-q90.jpg">
|
||||
</a>
|
||||
<figcaption>
|
||||
1x image (300×300px) @ quality 90<br>
|
||||
File size 88kB
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<h2>2x Image</h2>
|
||||
<a href="ada_lovelace-600-q30.jpg">
|
||||
<img class="ada" src="ada_lovelace-600-q30.jpg">
|
||||
</a>
|
||||
<figcaption>
|
||||
2x image (600×600px) @ quality 30<br>
|
||||
File size 47kB
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>Images: Using media queries for conditional loading</title>
|
||||
<style>
|
||||
|
||||
.example {
|
||||
height: 400px;
|
||||
background-image: url(small.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position-x: center;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
body {
|
||||
background-image: url(body.png);
|
||||
}
|
||||
.example {
|
||||
background-image: url(large.png);
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body role="main">
|
||||
<div class="example"></div>
|
||||
<div class="desc">
|
||||
On viewports less than 500px, only the image of a phone will appear,
|
||||
while on viewports larger than 500px, a tablet will be visible with
|
||||
a checkboard background.
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 500px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("Images-Conditional");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,159 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>Images: Replacing images with icon fonts</title>
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
||||
<style>
|
||||
.awesome {
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
td {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tr.font {
|
||||
font-family: FontAwesome;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
tr.class {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div role="main">
|
||||
<h1>Icon Fonts Rock</h1>
|
||||
<p>
|
||||
<a href="http://fontawesome.io"><span class="awesome"></span> Font Awesome</a>
|
||||
is an icon font with more than 350 different icons that can be easily customized,
|
||||
including size, color, shadow, etc.
|
||||
|
||||
With Font Awesome, you can either add icons by using a unicode
|
||||
entity, like this HTML5 logo (<span class="awesome"></span>)
|
||||
or by adding special classes to an <i> element like the CSS3
|
||||
logo (<i class="fa fa-css3"></i>).
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div>
|
||||
<table>
|
||||
<tr class="font">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>&#xf083;</td>
|
||||
<td>&#xf0c2;</td>
|
||||
<td>&#xf0f4;</td>
|
||||
<td>&#xf0e7;</td>
|
||||
</tr>
|
||||
<tr class="class">
|
||||
<td>.fa-camera-retro</td>
|
||||
<td>.fa-cloud</td>
|
||||
<td>.fa-coffee</td>
|
||||
<td>.fa-bolt</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr class="font">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>&#xf108</td>
|
||||
<td>&#xf10a;</td>
|
||||
<td>&#xf10b;</td>
|
||||
<td>&#xf002;</td>
|
||||
|
||||
</tr>
|
||||
<tr class="class">
|
||||
<td>.fa-desktop</td>
|
||||
<td>.fa-tablet</td>
|
||||
<td>.fa-mobile</td>
|
||||
<td>.fa-search</td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr class="font">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>&#xf0ac;</td>
|
||||
<td>&#xf13b;</td>
|
||||
<td>&#xf00c;</td>
|
||||
<td>&#xf09d;</td>
|
||||
</tr>
|
||||
<tr class="class">
|
||||
<td>.fa-globe</td>
|
||||
<td>.fa-html5</td>
|
||||
<td>.fa-check</td>
|
||||
<td>.fa-credit-card</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
<b>Font Awesome</b> by Dave Gandy -
|
||||
<a href="http://fontawesome.io">http://fontawesome.io</a>.
|
||||
<br>
|
||||
<small>
|
||||
Font Awesome is fully open source and is GPL compatible. You can
|
||||
use it for commercial projects, open source projects, or really
|
||||
just about whatever you want.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
@ -1,55 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>Images: Using CSS image-set to provide high res images</title>
|
||||
<style>
|
||||
|
||||
.sample {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background-image: url(icon1x.png);
|
||||
background-image: -webkit-image-set(
|
||||
url(icon1x.png) 1x,
|
||||
url(icon2x.png) 2x
|
||||
);
|
||||
background-image: image-set(
|
||||
url(icon1x.png) 1x,
|
||||
url(icon2x.png) 2x
|
||||
);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body role="main">
|
||||
<div class="sample"></div>
|
||||
<div class="desc">
|
||||
On a 1x display, a <a href="icon1x.png">monochrome 128x128px icon</a> will be shown.<br>
|
||||
On a 2x display, a <a href="icon2x.png">color 256x256px icon</a> will be shown.
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>Images: Reducing http requests with sprite sheets</title>
|
||||
<style>
|
||||
span.sprite-sheet {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sprite-sheet {
|
||||
background-image: url(sprite-sheet.png);
|
||||
width: 40px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.google-logo {
|
||||
width: 125px;
|
||||
height: 45px;
|
||||
background-position: -190px -170px;
|
||||
}
|
||||
|
||||
.gmail {
|
||||
background-position: -150px -210px;
|
||||
}
|
||||
|
||||
.maps {
|
||||
height: 40px;
|
||||
background-position: -120px -165px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div role="main">
|
||||
<h1>Sprite Sheet Sample</h1>
|
||||
<p>
|
||||
<img src="sprite-sheet.png">
|
||||
</p>
|
||||
<p>
|
||||
The Google logo <span class="sprite-sheet google-logo"></span>
|
||||
</p>
|
||||
<p>
|
||||
The GMail logo <span class="sprite-sheet gmail"></span>
|
||||
</p>
|
||||
<p>
|
||||
The Google Maps logo <span class="sprite-sheet maps"></span>
|
||||
</p>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
@ -1,56 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>Images: Using media queries for high res images</title>
|
||||
<style>
|
||||
|
||||
.sample {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background-image: url(icon1x.png);
|
||||
}
|
||||
|
||||
@media (min-resolution: 2dppx), /* Standard syntax */
|
||||
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
|
||||
{
|
||||
.sample {
|
||||
background-size: contain;
|
||||
background-image: url(icon2x.png);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body role="main">
|
||||
<div class="sample"></div>
|
||||
<div class="desc">
|
||||
On a 1x display, a <a href="icon1x.png">monochrome 128x128px icon</a> will be shown.<br>
|
||||
On a 2x display, a <a href="icon2x.png">color 256x256px icon</a> will be shown.
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 882 B |
Binary file not shown.
|
Before Width: | Height: | Size: 869 B |
@ -1,518 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>Nav Drawer Sample 2</title>
|
||||
|
||||
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
background-image: url('unsplash-img-1.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
background-color: #0095b7;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
.app-bar.open {
|
||||
-webkit-transform: translate(250px,0);
|
||||
transform: translate(250px,0);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
|
||||
margin: 0 16px;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.app-bar .logo a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.app-bar button, .bottom-bar button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
border-style: solid;
|
||||
border-radius: 100%;
|
||||
border-color: rgb(254, 254, 254);
|
||||
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
|
||||
-webkit-transition: border 300ms ease-in,background 300ms ease-in;
|
||||
transition: border 300ms ease-in,background 300ms ease-in;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.app-bar button img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.app-bar button.menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-bar button.menu img {
|
||||
position: absolute;
|
||||
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.app-bar button.menu .menu-icon {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.app-bar button.menu .close-icon {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
.app-bar.open button.menu .menu-icon {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
.app-bar.open button.menu .close-icon {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.app-bar button:hover, .bottom-bar button:hover {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.4);
|
||||
}
|
||||
|
||||
.app-bar button:focus, .bottom-bar button:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
background-color: rgba(254, 254, 254, 0.4);
|
||||
}
|
||||
|
||||
.app-bar button:active, .bottom-bar button:active {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.6);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
|
||||
position: fixed;
|
||||
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: block;
|
||||
|
||||
position: initial;
|
||||
|
||||
height: 130px;
|
||||
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.app-bar.open {
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
float: right;
|
||||
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.app-bar:after {
|
||||
content: ' ';
|
||||
|
||||
display:block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: block;
|
||||
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
button.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
|
||||
position: initial;
|
||||
|
||||
float: left;
|
||||
|
||||
margin-top: 16px;
|
||||
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.navdrawer-container {
|
||||
position: fixed;
|
||||
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
|
||||
background-color: #0095b7;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
-webkit-transform: translate(-250px,0);
|
||||
transform: translate(-250px,0);
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.navdrawer-container.open {
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.navdrawer-bg {
|
||||
position: fixed;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
background-color: black;
|
||||
|
||||
/** Unfortunately this is the best way
|
||||
to get no paints in Chrome **/
|
||||
opacity: 0.0000001;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navdrawer-bg.open {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.app-bar, .navdrawer-container {
|
||||
-webkit-transition: -webkit-transform 0.3s ease-out;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.navdrawer-bg {
|
||||
-webkit-transition: opacity 0.3s ease-out;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a {
|
||||
display: block;
|
||||
|
||||
height: 60px;
|
||||
|
||||
padding: 0 20px;
|
||||
|
||||
line-height: 60px;
|
||||
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
.navdrawer-container {
|
||||
position: initial;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.navdrawer-bg, .navdrawer-bg.open {
|
||||
opacity: 0;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.promote-layer {
|
||||
/*
|
||||
This may promote the layer to a composited
|
||||
layer.
|
||||
|
||||
Replace with will-change when available
|
||||
|
||||
#perfmatters
|
||||
*/
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="app-bar promote-layer">
|
||||
<button class="menu">
|
||||
<img class="menu-icon" src="./hamburger.png" />
|
||||
<img class="close-icon" src="./close-icon-light.png" />
|
||||
</button>
|
||||
<h1 class="logo"><a href="#">Logo</a></h1>
|
||||
<section class="app-bar-actions">
|
||||
<input class="search" placeholder="Search" />
|
||||
<button><img src="./search.png" /></button>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<nav class="navdrawer-container">
|
||||
<ul class="promote-layer">
|
||||
<li><a href="#">Item 1</a></li>
|
||||
<li><a href="#">Item 2</a></li>
|
||||
<li><a href="#">Item 3</a></li>
|
||||
<li><a href="#">Item 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="navdrawer-bg promote-layer"></div>
|
||||
|
||||
<section class="main-content">
|
||||
</section>
|
||||
|
||||
<section class="bottom-bar">
|
||||
<button><img src="./favorite-icon-white.png" /></button>
|
||||
<button><img src="./share-icon-white.png" /></button>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var navdrawerContainer = document.querySelector('.navdrawer-container');
|
||||
var appbarElement = document.querySelector('.app-bar');
|
||||
var darkbgElement = document.querySelector('.navdrawer-bg');
|
||||
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
var isOpen = navdrawerContainer.classList.contains('open');
|
||||
if(isOpen) {
|
||||
appbarElement.classList.remove('open');
|
||||
navdrawerContainer.classList.remove('open');
|
||||
darkbgElement.classList.remove('open');
|
||||
} else {
|
||||
appbarElement.classList.add('open');
|
||||
navdrawerContainer.classList.add('open');
|
||||
darkbgElement.classList.add('open');
|
||||
}
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
sampleCompleted('appbar-navdrawer-bottombar-sample.html-menuclick');
|
||||
}, true);
|
||||
|
||||
var bottomBtns = document.querySelectorAll('.bottom-bar > button');
|
||||
for(var i = 0; i < bottomBtns.length; i++) {
|
||||
bottomBtns[i].addEventListener('click', bottomBarBtnClick, true);
|
||||
}
|
||||
|
||||
function bottomBarBtnClick() {
|
||||
sampleCompleted('appbar-navdrawer-bottombar-sample.html-bottombarbtnclick');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,411 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>Nav Drawer Sample 3</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
background-image: url('unsplash-img-2.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
background-color: black;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
border: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: rgba(17, 17, 17, 0.8);
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.app-bar.open {
|
||||
-webkit-transform: translate(250px,0);
|
||||
transform: translate(250px,0);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
-ms-flex: 1 1;
|
||||
-webkit-flex: 1 1;
|
||||
flex: 1 1;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
|
||||
margin: 0 16px;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.app-bar .logo a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.app-bar button, .app-bar a.btn {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
height: 44px;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
padding: 4px;
|
||||
margin: 8px 8px 8px 0px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 24px;
|
||||
font-weight: inherit;
|
||||
line-height: 32px;
|
||||
color: rgb(254, 254, 254);
|
||||
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
border-width: 2px;
|
||||
border-color: rgba(254, 254, 254, 0.5);
|
||||
|
||||
-webkit-transition: border 300ms ease-in,background 300ms ease-in;
|
||||
transition: border 300ms ease-in,background 300ms ease-in;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.app-bar button:hover, .app-bar a.btn:hover {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.2);
|
||||
}
|
||||
|
||||
.app-bar button:focus, .app-bar a.btn:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
background-color: rgba(254, 254, 254, 0.2);
|
||||
}
|
||||
|
||||
.app-bar button:active, .app-bar a.btn:active {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.4);
|
||||
}
|
||||
|
||||
.app-bar button img, .app-bar a.btn img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0 8px 0 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: block;
|
||||
|
||||
position: initial;
|
||||
|
||||
height: 130px;
|
||||
|
||||
padding: 0 16px 16px 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-bar.open {
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
float: right;
|
||||
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.app-bar:after {
|
||||
content: ' ';
|
||||
|
||||
display:block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: block;
|
||||
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
a.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navdrawer-container {
|
||||
position: fixed;
|
||||
|
||||
top: 60px;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
background-color: rgba(17, 17, 17, 0.8);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
z-index:1;
|
||||
|
||||
-webkit-transition: height 0.4s ease-out, background-color 0.4s ease-out;
|
||||
transition: height 0.4s ease-out, background-color 0.4s ease-out;
|
||||
}
|
||||
|
||||
.navdrawer-container.open {
|
||||
height: 244px;
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a {
|
||||
display: block;
|
||||
|
||||
height: 60px;
|
||||
|
||||
padding: 0 20px;
|
||||
|
||||
line-height: 60px;
|
||||
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border-bottom-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
.navdrawer-container, .navdrawer-container.open {
|
||||
position: initial;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
|
||||
-webkit-transform: none;
|
||||
tranform: none;
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.promote-layer {
|
||||
/*
|
||||
This may promote the layer to a composited
|
||||
layer.
|
||||
|
||||
Replace with will-change when available
|
||||
|
||||
#perfmatters
|
||||
*/
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="app-bar">
|
||||
<h1 class="logo"><a href="#">Logo</a></h1>
|
||||
<section class="app-bar-actions">
|
||||
<input class="search" placeholder="Search" />
|
||||
<button><img src="./search.png" /></button>
|
||||
</section>
|
||||
<a class="menu btn"><img src="./hamburger.png" /> Menu</a>
|
||||
</header>
|
||||
|
||||
<nav class="navdrawer-container">
|
||||
<ul>
|
||||
<li><a href="#">Item 1</a></li>
|
||||
<li><a href="#">Item 2</a></li>
|
||||
<li><a href="#">Item 3</a></li>
|
||||
<li><a href="#">Item 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
var navdrawerContainer = document.querySelector('.navdrawer-container');
|
||||
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
var isOpen = document.body.classList.contains('open');
|
||||
if(isOpen) {
|
||||
document.body.classList.remove('open');
|
||||
navdrawerContainer.classList.remove('open');
|
||||
} else {
|
||||
document.body.classList.add('open');
|
||||
navdrawerContainer.classList.add('open');
|
||||
}
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
sampleCompleted('appbar-navdrawer-sample.html-menubtnclick');
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,385 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>App Bar & Nav Drawer Sample</title>
|
||||
|
||||
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
background-color: #C9DAF8;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: #3C78D8;
|
||||
}
|
||||
|
||||
.app-bar.open {
|
||||
-webkit-transform: translate(250px,0);
|
||||
transform: translate(250px,0);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
|
||||
margin: 0 16px;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.app-bar .logo a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.app-bar button {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
border: none;
|
||||
|
||||
padding: 0;
|
||||
|
||||
-webkit-transition: background-color 0.2s ease-out;
|
||||
transition: background-color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.app-bar button img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.app-bar button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.app-bar button:focus {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.app-bar button:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.promote-layer {
|
||||
/*
|
||||
This may promote the layer to a composited
|
||||
layer.
|
||||
|
||||
Replace with will-change when available
|
||||
|
||||
#perfmatters
|
||||
*/
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: block;
|
||||
|
||||
height: 130px;
|
||||
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
float: right;
|
||||
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.app-bar:after {
|
||||
content: ' ';
|
||||
|
||||
display:block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: block;
|
||||
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
button.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
|
||||
margin-top: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.navdrawer-container {
|
||||
position: fixed;
|
||||
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
|
||||
background-color: #3C78D8;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
-webkit-transform: translate(-250px,0);
|
||||
transform: translate(-250px,0);
|
||||
}
|
||||
|
||||
.navdrawer-container.open {
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
|
||||
.app-bar, .navdrawer-container {
|
||||
-webkit-transition: -webkit-transform 0.3s ease-out;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a {
|
||||
display: block;
|
||||
|
||||
height: 60px;
|
||||
|
||||
padding: 0 20px;
|
||||
|
||||
line-height: 60px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
color: white;
|
||||
|
||||
-webkit-transition: background-color 0.2s ease-out;
|
||||
transition: background-color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border-bottom-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
.navdrawer-container {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
margin-top: 130px;
|
||||
|
||||
-webkit-transform: none;
|
||||
tranform: none;
|
||||
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="app-bar promote-layer">
|
||||
<button class="menu"><img src="./hamburger.png" /></button>
|
||||
|
||||
<h1 class="logo">Logo</h1>
|
||||
|
||||
<section class="app-bar-actions">
|
||||
<input class="search" placeholder="Search" />
|
||||
<button><img src="./search.png" /></button>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<nav class="navdrawer-container promote-layer">
|
||||
<ul>
|
||||
<li><a href="#">Item 1</a></li>
|
||||
<li><a href="#">Item 2</a></li>
|
||||
<li><a href="#">Item 3</a></li>
|
||||
<li><a href="#">Item 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="main-content">
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var navdrawerContainer = document.querySelector('.navdrawer-container');
|
||||
var appbarElement = document.querySelector('.app-bar');
|
||||
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
var isOpen = navdrawerContainer.classList.contains('open');
|
||||
if(isOpen) {
|
||||
appbarElement.classList.remove('open');
|
||||
navdrawerContainer.classList.remove('open');
|
||||
} else {
|
||||
appbarElement.classList.add('open');
|
||||
navdrawerContainer.classList.add('open');
|
||||
}
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
sampleCompleted('appbar-navdrawer-sample1.html-menubtnclick');
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,381 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<title>App Bar & Nav Drawer Sample</title>
|
||||
|
||||
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
|
||||
background-color: #C9DAF8;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: #3C78D8;
|
||||
}
|
||||
|
||||
.app-bar.open {
|
||||
-webkit-transform: translate(-250px,0);
|
||||
transform: translate(-250px,0);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
|
||||
margin: 0 16px;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.app-bar .logo a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.app-bar button {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
border: none;
|
||||
|
||||
padding: 0;
|
||||
|
||||
-webkit-transition: background-color 0.2s ease-out;
|
||||
transition: background-color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.app-bar button img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.app-bar button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.app-bar button:focus {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.app-bar button:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.promote-layer {
|
||||
/*
|
||||
This is a trick to improve performance on newer versions of Chrome
|
||||
#perfmatters
|
||||
*/
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: block;
|
||||
|
||||
height: 130px;
|
||||
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
float: right;
|
||||
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.app-bar:after {
|
||||
content: ' ';
|
||||
|
||||
display:block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: block;
|
||||
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
button.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
|
||||
margin-top: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.navdrawer-container {
|
||||
position: fixed;
|
||||
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
|
||||
right: 0;
|
||||
|
||||
background-color: #3C78D8;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
-webkit-transform: translate(250px,0);
|
||||
transform: translate(250px,0);
|
||||
}
|
||||
|
||||
.navdrawer-container.open {
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
|
||||
.app-bar, .navdrawer-container {
|
||||
-webkit-transition: -webkit-transform 0.3s ease-out;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a {
|
||||
display: block;
|
||||
|
||||
height: 60px;
|
||||
|
||||
padding: 0 20px;
|
||||
|
||||
line-height: 60px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
color: white;
|
||||
|
||||
-webkit-transition: background-color 0.2s ease-out;
|
||||
transition: background-color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border-bottom-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
.navdrawer-container {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
margin-top: 130px;
|
||||
|
||||
-webkit-transform: none;
|
||||
tranform: none;
|
||||
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
.navdrawer-container ul {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="app-bar promote-layer">
|
||||
<h1 class="logo">Logo</h1>
|
||||
|
||||
<section class="app-bar-actions">
|
||||
<input class="search" placeholder="Search" />
|
||||
<button><img src="./search.png" /></button>
|
||||
</section>
|
||||
<button class="menu"><img src="./hamburger.png" /></button>
|
||||
</header>
|
||||
|
||||
<nav class="navdrawer-container promote-layer">
|
||||
<ul>
|
||||
<li><a href="#">Item 1</a></li>
|
||||
<li><a href="#">Item 2</a></li>
|
||||
<li><a href="#">Item 3</a></li>
|
||||
<li><a href="#">Item 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="main-content">
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var navdrawerContainer = document.querySelector('.navdrawer-container');
|
||||
var appbarElement = document.querySelector('.app-bar');
|
||||
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
var isOpen = navdrawerContainer.classList.contains('open');
|
||||
if(isOpen) {
|
||||
appbarElement.classList.remove('open');
|
||||
navdrawerContainer.classList.remove('open');
|
||||
} else {
|
||||
appbarElement.classList.add('open');
|
||||
navdrawerContainer.classList.add('open');
|
||||
}
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
sampleCompleted('appbar-navdrawer-sample2.html-menubtnclick');
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,231 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>App Bar Sample 3</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
background-image: url('https://s3.amazonaws.com/ooomf-com-files/TIDqBLgQw6IUt5ZHKS0f_11891558035_eafdf53bf0_o.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: flex;
|
||||
|
||||
position: fixed;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
flex: 1;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
|
||||
margin: 0 16px;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.app-bar .logo a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.app-bar button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
border-style: solid;
|
||||
border-radius: 100%;
|
||||
border-color: rgb(254, 254, 254);
|
||||
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
|
||||
-webkit-transition: border 300ms ease-in,background 300ms ease-in;
|
||||
transition: border 300ms ease-in,background 300ms ease-in
|
||||
}
|
||||
|
||||
.app-bar button:hover {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.4);
|
||||
}
|
||||
|
||||
.app-bar button:active {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.6);
|
||||
}
|
||||
|
||||
.app-bar button:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
background-color: rgba(254, 254, 254, 0.4);
|
||||
}
|
||||
|
||||
.app-bar button:active:focus {
|
||||
background-color: rgba(254, 254, 254, 0.6);
|
||||
}
|
||||
|
||||
.app-bar button img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: block;
|
||||
|
||||
height: 130px;
|
||||
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
float: right;
|
||||
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.app-bar:after {
|
||||
content: ' ';
|
||||
|
||||
display:block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: block;
|
||||
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
button.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
|
||||
margin-top: 130px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="app-bar">
|
||||
<button class="menu"><img src="./hamburger.png" /></button>
|
||||
<h1 class="logo"><a href="#">Logo</a></h1>
|
||||
<section class="app-bar-actions">
|
||||
<input class="search" placeholder="Search" />
|
||||
<button><img src="./search.png" /></button>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<nav>Navigation Placeholder</nav>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,245 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>App Bar Sample 3</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
background-image: url('https://s3.amazonaws.com/ooomf-com-files/OwfYyiJXQ6qddLgTOBGX_Ariana%20Prestes%20photos%20(4).jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
.app-bar {
|
||||
display: flex;
|
||||
|
||||
position: fixed;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
background-color: rgba(17, 17, 17, 0.8);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
flex: 1;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
|
||||
margin: 0 16px;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.app-bar .logo a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.app-bar button {
|
||||
display: flex;
|
||||
|
||||
height: 44px;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
border: none;
|
||||
|
||||
padding: 4px;
|
||||
margin: 8px 8px 8px 0px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: rgb(254, 254, 254);
|
||||
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
border-width: 2px;
|
||||
|
||||
-webkit-transition: border 300ms ease-in,background 300ms ease-in;
|
||||
transition: border 300ms ease-in,background 300ms ease-in
|
||||
}
|
||||
|
||||
.app-bar button:hover {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.2);
|
||||
}
|
||||
|
||||
.app-bar button:active {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.4);
|
||||
}
|
||||
|
||||
.app-bar button:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
background-color: rgba(254, 254, 254, 0.2);
|
||||
}
|
||||
|
||||
.app-bar button:active:focus {
|
||||
background-color: rgba(254, 254, 254, 0.4);
|
||||
}
|
||||
|
||||
.app-bar button img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: block;
|
||||
|
||||
height: 130px;
|
||||
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
float: right;
|
||||
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.app-bar:after {
|
||||
content: ' ';
|
||||
|
||||
display:block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: block;
|
||||
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
button.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
|
||||
margin-top: 130px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="app-bar">
|
||||
<h1 class="logo"><a href="#">Logo</a></h1>
|
||||
<section class="app-bar-actions">
|
||||
<input class="search" placeholder="Search" />
|
||||
<button><img src="./search.png" /></button>
|
||||
</section>
|
||||
<button class="menu"><img src="./hamburger.png" /> Menu</button>
|
||||
</header>
|
||||
|
||||
<nav>Navigation Placeholder</nav>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1,123 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>Bottom Bar Sample 1</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background-color: #C9DAF8;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
position: fixed;
|
||||
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.bottom-bar button {
|
||||
width: 40px;
|
||||
height:40px;
|
||||
|
||||
margin: 8px;
|
||||
|
||||
border: none;
|
||||
|
||||
background-color: rgba(60, 120, 216, 0.4);
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
-webkit-transition: background-color 0.1s ease-out;
|
||||
transition: background-color 0.1s ease-out;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.bottom-bar button:hover {
|
||||
background-color: rgba(60, 120, 216, 0.8);
|
||||
}
|
||||
|
||||
.bottom-bar button:focus {
|
||||
background-color: rgba(60, 120, 216, 0.8);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.bottom-bar button:active {
|
||||
background-color: rgba(60, 120, 216, 1.0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="bottom-bar">
|
||||
<button class="bottom-btn"></button>
|
||||
<button class="bottom-btn"></button>
|
||||
<button class="bottom-btn"></button>
|
||||
<button class="bottom-btn"></button>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
var bottomBtns = document.querySelectorAll('.bottom-bar > button');
|
||||
|
||||
for(var i = 0; i < bottomBtns.length; i++) {
|
||||
bottomBtns[i].addEventListener('click', bottomBarBtnClick, true);
|
||||
}
|
||||
|
||||
function bottomBarBtnClick() {
|
||||
sampleCompleted('appbar-navdrawer-bottombar-sample.html-bottombarbtnclick');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 355 B |
Binary file not shown.
|
Before Width: | Height: | Size: 355 B |
Binary file not shown.
|
Before Width: | Height: | Size: 470 B |
Binary file not shown.
|
Before Width: | Height: | Size: 472 B |
Binary file not shown.
|
Before Width: | Height: | Size: 381 B |
Binary file not shown.
|
Before Width: | Height: | Size: 357 B |
Binary file not shown.
|
Before Width: | Height: | Size: 387 B |
Binary file not shown.
|
Before Width: | Height: | Size: 344 B |
@ -1,488 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>Nav Drawer Sample 4</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-transition: -webkit-transform 0.4s ease-out;
|
||||
transition: transform 0.4s ease-out;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
background-image: url('unsplash-img-4.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.app-bar.open {
|
||||
-webkit-transform: translate(-250px,0);
|
||||
transform: translate(-250px,0);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
|
||||
margin: 0 16px;
|
||||
|
||||
color: rgba(254, 254, 254, 0.8);
|
||||
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.app-bar .logo a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.app-bar button {
|
||||
display: flex;
|
||||
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
border: none;
|
||||
|
||||
padding: 4px;
|
||||
margin: 8px 8px 8px 0px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: rgb(254, 254, 254);
|
||||
|
||||
border-style: none;
|
||||
border-radius: 4px;
|
||||
|
||||
-webkit-transition: border 300ms ease-in,background 300ms ease-in;
|
||||
transition: border 300ms ease-in,background 300ms ease-in
|
||||
}
|
||||
|
||||
.app-bar button.menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-bar button.menu img {
|
||||
position: absolute;
|
||||
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
body.open .app-bar button .menu-icon {
|
||||
-webkit-transition: opacity 300ms ease-out;
|
||||
transition: opacity 300ms ease-out;
|
||||
}
|
||||
|
||||
body.open .app-bar button .close-icon {
|
||||
-webkit-transition: opacity 300ms ease-in 300ms;
|
||||
transition: opacity 300ms ease-in 300ms;
|
||||
}
|
||||
|
||||
.app-bar button .menu-icon {
|
||||
-webkit-transition: opacity 300ms ease-in 300ms;
|
||||
transition: opacity 300ms ease-in 300ms;
|
||||
}
|
||||
|
||||
.app-bar button .close-icon {
|
||||
-webkit-transition: opacity 300ms ease-out;
|
||||
transition: opacity 300ms ease-out;
|
||||
}
|
||||
|
||||
.app-bar button:hover {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.2);
|
||||
}
|
||||
|
||||
.app-bar button:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
background-color: rgba(254, 254, 254, 0.2);
|
||||
}
|
||||
|
||||
.app-bar button:active {
|
||||
border-color: transparent;
|
||||
background-color: rgba(254, 254, 254, 0.4);
|
||||
}
|
||||
|
||||
.app-bar button img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
body .menu-icon {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
body .close-icon {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: block;
|
||||
|
||||
height: 130px;
|
||||
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.app-bar.open {
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
float: right;
|
||||
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.app-bar:after {
|
||||
content: ' ';
|
||||
|
||||
display:block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: block;
|
||||
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
button.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navdrawer-container {
|
||||
position: fixed;
|
||||
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
background-color: #0095b7;
|
||||
|
||||
color: #fefefe;
|
||||
|
||||
-webkit-transform: translate(250px,0);
|
||||
transform: translate(250px,0);
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
body.open .menu-icon {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
body.open .close-icon {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.navdrawer-container.open {
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
|
||||
.navdrawer-bg {
|
||||
position: fixed;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
background-color: black;
|
||||
|
||||
/** Unfortunately this is the best way
|
||||
to get no paints in Chrome **/
|
||||
opacity: 0.0000001;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navdrawer-bg.open {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.app-bar, .navdrawer-container {
|
||||
-webkit-transition: -webkit-transform 0.3s ease-out;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a {
|
||||
display: block;
|
||||
|
||||
height: 60px;
|
||||
|
||||
padding: 0 20px;
|
||||
|
||||
line-height: 60px;
|
||||
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border-bottom-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li a:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
.navdrawer-container {
|
||||
position: initial;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.navdrawer-container ul {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navdrawer-container ul li {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.navdrawer-bg, .navdrawer-bg.open {
|
||||
opacity: 0;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.promote-layer {
|
||||
/*
|
||||
This may promote the layer to a composited
|
||||
layer.
|
||||
|
||||
Replace with will-change when available
|
||||
|
||||
#perfmatters
|
||||
*/
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="app-bar promote-layer">
|
||||
<h1 class="logo"><a href="#">Logo</a></h1>
|
||||
<section class="app-bar-actions">
|
||||
|
||||
</section>
|
||||
<button class="menu">
|
||||
<img class="menu-icon" src="./hamburger-icon-light.png" />
|
||||
<img class="close-icon" src="./close-icon-light.png" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<nav class="navdrawer-container promote-layer">
|
||||
<ul>
|
||||
<li><a href="#">Item 1</a></li>
|
||||
<li><a href="#">Item 2</a></li>
|
||||
<li><a href="#">Item 3</a></li>
|
||||
<li><a href="#">Item 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="navdrawer-bg promote-layer"></div>
|
||||
|
||||
<script>
|
||||
var navdrawerContainer = document.querySelector('.navdrawer-container');
|
||||
var appbarElement = document.querySelector('.app-bar');
|
||||
var darkbgElement = document.querySelector('.navdrawer-bg');
|
||||
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
var isOpen = navdrawerContainer.classList.contains('open');
|
||||
if(isOpen) {
|
||||
appbarElement.classList.remove('open');
|
||||
navdrawerContainer.classList.remove('open');
|
||||
darkbgElement.classList.remove('open');
|
||||
} else {
|
||||
appbarElement.classList.add('open');
|
||||
navdrawerContainer.classList.add('open');
|
||||
darkbgElement.classList.add('open');
|
||||
}
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var menuBtn = document.querySelector('.menu');
|
||||
menuBtn.addEventListener('click', function() {
|
||||
sampleCompleted('navdrawer-sample4.html-menubtnclick');
|
||||
}, true);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 496 B |
Binary file not shown.
|
Before Width: | Height: | Size: 509 B |
Binary file not shown.
|
Before Width: | Height: | Size: 784 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 390 B |
@ -1,144 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>Tab Bar Sample 1</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #C9DAF8;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
position: fixed;
|
||||
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
|
||||
background: #3C78D8;
|
||||
}
|
||||
|
||||
.tab-bar button {
|
||||
width: 40px;
|
||||
height:40px;
|
||||
|
||||
margin: 8px;
|
||||
|
||||
border: none;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease-out;
|
||||
transition: background-color 0.4s ease-out;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.tab-bar button:hover{
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.tab-bar button:focus {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.tab-bar button:active {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.tab-bar button.selected {
|
||||
background-color: rgba(255, 255, 255, 1.0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="tab-bar">
|
||||
<button class="tab-btn tab-1 selected"></button>
|
||||
<button class="tab-btn tab-2"></button>
|
||||
<button class="tab-btn tab-3"></button>
|
||||
<button class="tab-btn tab-4"></button>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
var tabBtns = document.querySelectorAll('.tab-bar > .tab-btn');
|
||||
|
||||
for(var i = 0; i < tabBtns.length; i++) { tabBtns[i].addEventListener('click', onTabClick, true);
|
||||
}
|
||||
|
||||
function onTabClick(e) {
|
||||
var currentTab = document.querySelector('.tab-bar > .tab-btn.selected');
|
||||
if(currentTab) {
|
||||
currentTab.classList.remove('selected');
|
||||
}
|
||||
var btn = e.target;
|
||||
btn.classList.add('selected');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var tabBtns = document.querySelectorAll('.tab-bar > button');
|
||||
for(var i = 0; i < tabBtns.length; i++) {
|
||||
tabBtns[i].addEventListener('click', tabBarBtnClick, true);
|
||||
}
|
||||
|
||||
function tabBarBtnClick() {
|
||||
sampleCompleted('tabbar-sample1.html-tabbtnclick');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,329 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>Tab Bar Sample 2</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: block;
|
||||
|
||||
padding-bottom: 72px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-image: url('unsplash-img-3.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
position: fixed;
|
||||
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
|
||||
background-image: -o-linear-gradient(top, #000 0%, transparent 100%);
|
||||
background-image: -moz-linear-gradient(top, #000 0%, transparent 100%);
|
||||
background-image: -webkit-linear-gradient(top, #000 0%, transparent 100%);
|
||||
background-image: -ms-linear-gradient(top, #000 0%, transparent 100%);
|
||||
background-image: linear-gradient(to top, #000 0%, transparent 100%);
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tab-bar button {
|
||||
width: 40px;
|
||||
height:40px;
|
||||
|
||||
margin: 16px;
|
||||
|
||||
border: none;
|
||||
|
||||
background-color: rgba(254, 254, 254, 0.7);
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
padding: 0;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease-out;
|
||||
transition: background-color 0.4s ease-out;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tab-bar button img {
|
||||
width: 32px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tab-selected-bg {
|
||||
position: absolute;
|
||||
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
border-style: solid;
|
||||
border-radius: 100%;
|
||||
border-width: 2px;
|
||||
border-color: rgb(254, 254, 254);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
left: 0;
|
||||
|
||||
-webkit-transform: translateX(-10px) translateY(6px);
|
||||
transform: translateX(-10px) translateY(6px);
|
||||
|
||||
opacity: 1;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-selected-bg.initialised {
|
||||
-webkit-transition: -webkit-transform 0.4s ease-out;
|
||||
transition: transform 0.4s ease-out;
|
||||
}
|
||||
|
||||
.tab-bar button:hover {
|
||||
background-color: rgba(254, 254, 254, 0.8);
|
||||
}
|
||||
|
||||
.tab-bar button:focus {
|
||||
background-color: rgba(254, 254, 254, 0.9);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.tab-bar button:active {
|
||||
background-color: rgba(255, 255, 255, 1.0);
|
||||
}
|
||||
|
||||
.tab-bar button.selected {
|
||||
background-color: rgba(254, 254, 254, 1.0);
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin-bottom: 72px;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
position: absolute;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 16px 16px 16px 16px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transition: opacity 0.2s ease-out;
|
||||
transition: opacity 0.2s ease-out;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-content.selected {
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transition: opacity 0.2s ease-out 0.2s;
|
||||
transition: opacity 0.2s ease-out 0.2s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="tab-bar">
|
||||
<div class="tab-selected-bg"></div>
|
||||
<button class="tab-btn tab-1" data-tabsection="info-tab-content"><img src="about-icon.png" /></button>
|
||||
<button class="tab-btn tab-2" data-tabsection="blog-tab-content"><img src="blog-icon.png" /></button>
|
||||
<button class="tab-btn tab-3" data-tabsection="photo-tab-content"><img src="photo-icon.png" /></button>
|
||||
<button class="tab-btn tab-4" data-tabsection="contact-tab-content"><img src="contact-icon.png" /></button>
|
||||
</nav>
|
||||
|
||||
<div class="content-container">
|
||||
<section class="info-tab-content tab-content">
|
||||
<h1>About</h1>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
</section>
|
||||
|
||||
<section class="blog-tab-content tab-content">
|
||||
<h1>Blog</h1>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
</section>
|
||||
|
||||
<section class="photo-tab-content tab-content">
|
||||
<h1>Photo</h1>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
</section>
|
||||
|
||||
<section class="contact-tab-content tab-content">
|
||||
<h1>Contact</h1>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var currentSelectedTab = 0;
|
||||
var tabSelectionBg = document.querySelector('.tab-selected-bg');
|
||||
var bgRect = tabSelectionBg.getBoundingClientRect();
|
||||
var tabBtns = document.querySelectorAll('.tab-bar > .tab-btn');
|
||||
|
||||
for(var i = 0; i < tabBtns.length; i++) {
|
||||
tabBtns[i].addEventListener('click', onTabClick(i, tabBtns[i]), true);
|
||||
}
|
||||
|
||||
function onTabClick(index, btn) {
|
||||
return function(e) {
|
||||
currentSelectedTab = index;
|
||||
selectTab(btn);
|
||||
};
|
||||
}
|
||||
|
||||
function selectTab(tabBtn) {
|
||||
var currentTab = document.querySelector('.tab-bar > .tab-btn.selected');
|
||||
if(currentTab) {
|
||||
currentTab.classList.remove('selected');
|
||||
var contentClassName = getContentClassname(currentTab);
|
||||
var sectionClass = document.querySelector('.'+contentClassName);
|
||||
sectionClass.classList.remove('selected');
|
||||
}
|
||||
tabBtn.classList.add('selected');
|
||||
|
||||
var clientRect = tabBtn.getBoundingClientRect();
|
||||
|
||||
var center = {
|
||||
x: clientRect.left + (clientRect.width / 2),
|
||||
y: clientRect.top + (clientRect.height / 2)
|
||||
};
|
||||
|
||||
var translateX = 'translateX('+(center.x - (bgRect.width / 2))+'px) translateY(6px)';
|
||||
|
||||
tabSelectionBg.style.msTransform = translateX;
|
||||
tabSelectionBg.style.MozTransform = translateX;
|
||||
|
||||
tabSelectionBg.style.webkitTransform = translateX;
|
||||
tabSelectionBg.style.tranform = translateX;
|
||||
|
||||
var contentClassName = getContentClassname(tabBtn);
|
||||
|
||||
var sectionClass = document.querySelector('.'+contentClassName);
|
||||
sectionClass.classList.add('selected');
|
||||
}
|
||||
|
||||
function getContentClassname(tabBtn) {
|
||||
if(tabBtn.dataset) {
|
||||
return tabBtn.dataset.tabsection;
|
||||
} else {
|
||||
return tabBtn.getAttribute('data-tabsection');
|
||||
}
|
||||
}
|
||||
|
||||
selectTab(tabBtns[currentSelectedTab]);
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
tabSelectionBg.classList.add('initialised');
|
||||
});
|
||||
|
||||
window.onresize = function() {
|
||||
selectTab(tabBtns[currentSelectedTab]);
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var tabBtns = document.querySelectorAll('.tab-bar > button');
|
||||
for(var i = 0; i < tabBtns.length; i++) {
|
||||
tabBtns[i].addEventListener('click', tabBarBtnClick, true);
|
||||
}
|
||||
|
||||
function tabBarBtnClick() {
|
||||
sampleCompleted('tabbar-sample2.html-tabbtnclick');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,283 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>Tab Bar Sample 3</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #21212b;
|
||||
}
|
||||
|
||||
.tab-bar-container{
|
||||
width: 100%;
|
||||
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: #e65050;
|
||||
background-image: -o-linear-gradient(bottom, #e25d5e 0%, #d44040 100%);
|
||||
background-image: -moz-linear-gradient(bottom, #e25d5e 0%, #d44040 100%);
|
||||
background-image: -webkit-linear-gradient(bottom, #e25d5e 0%, #d44040 100%);
|
||||
background-image: -ms-linear-gradient(bottom, #e25d5e 0%, #d44040 100%);
|
||||
background-image: linear-gradient(to bottom, #e25d5e 0%, #d44040 100%);
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
border-bottom-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.app-bar .logo {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 48px;
|
||||
|
||||
margin: 0 16px;
|
||||
|
||||
color: #fdf1f1;
|
||||
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.app-bar .logo a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.app-bar button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
border: none;
|
||||
|
||||
padding: 0;
|
||||
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.app-bar button img {
|
||||
width: 32;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.app-bar-actions {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: none;
|
||||
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.tab-bar button {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
padding: 4px;
|
||||
|
||||
border: none;
|
||||
border-right-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
color: #fdf1f1;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease-out;
|
||||
transition: background-color 0.4s ease-out;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.tab-bar button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tab-bar button:focus {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.tab-bar button:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.tab-bar button.selected {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.tab-bar button:last-child {
|
||||
border-right-style: none;
|
||||
}
|
||||
|
||||
.tab-bar button img {
|
||||
width: 32px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tab-bar button span {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tab-bar-container">
|
||||
<header class="app-bar">
|
||||
<h1 class="logo"><a href="#">Logo</a></h1>
|
||||
<section class="app-bar-actions">
|
||||
<input class="search" placeholder="Search" />
|
||||
<button><img src="./search-icon-light.png" /></button>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<nav class="tab-bar">
|
||||
<button class="tab-btn tab-1" data-tabsection="info-tab-content">
|
||||
<img src="about-icon-light.png" /><br />
|
||||
<span>About</span>
|
||||
</button>
|
||||
<button class="tab-btn tab-2" data-tabsection="blog-tab-content">
|
||||
<img src="blog-icon-light.png" /><br />
|
||||
<span>Blog</span>
|
||||
</button>
|
||||
<button class="tab-btn tab-3" data-tabsection="photo-tab-content">
|
||||
<img src="photo-icon-light.png" /><br />
|
||||
<span>Photos</span>
|
||||
</button>
|
||||
<button class="tab-btn tab-4" data-tabsection="contact-tab-content">
|
||||
<img src="contact-icon-light.png" /><br />
|
||||
<span>Contact</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var currentSelectedTab = 0;
|
||||
var tabBtns = document.querySelectorAll('.tab-bar > .tab-btn');
|
||||
|
||||
for(var i = 0; i < tabBtns.length; i++) {
|
||||
tabBtns[i].addEventListener('click', onTabClick(i, tabBtns[i]), true);
|
||||
}
|
||||
|
||||
function onTabClick(index, btn) {
|
||||
return function(e) {
|
||||
currentSelectedTab = index;
|
||||
selectTab(btn);
|
||||
};
|
||||
}
|
||||
|
||||
function selectTab(btn) {
|
||||
var currentTab = document.querySelector('.tab-bar > .tab-btn.selected');
|
||||
if(currentTab) {
|
||||
currentTab.classList.remove('selected');
|
||||
}
|
||||
btn.classList.add('selected');
|
||||
}
|
||||
|
||||
selectTab(tabBtns[currentSelectedTab]);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var tabBtns = document.querySelectorAll('.tab-bar > button');
|
||||
for(var i = 0; i < tabBtns.length; i++) {
|
||||
tabBtns[i].addEventListener('click', tabBarBtnClick, true);
|
||||
}
|
||||
|
||||
function tabBarBtnClick() {
|
||||
sampleCompleted('tabbar-sample3.html-tabbtnclick');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 422 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 578 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 229 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 215 B |
Binary file not shown.
|
Before Width: | Height: | Size: 577 B |
@ -1,3 +0,0 @@
|
||||
.orientation:after {
|
||||
content: " Landscape";
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.desc:before {
|
||||
content: "This browser window is smaller than 640px wide.";
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<link rel="stylesheet" href="vpdemo.css">
|
||||
|
||||
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css" />
|
||||
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css" />
|
||||
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css" />
|
||||
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css" />
|
||||
<style>
|
||||
@media (min-width: 500px) and (max-width: 600px) {
|
||||
h1 {
|
||||
color: fuchsia;
|
||||
}
|
||||
|
||||
.desc:after {
|
||||
content:" In fact, it's between 500px and 600px wide.";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>RWD Fundamentals: Experimenting with media queries</title>
|
||||
</head>
|
||||
<body>
|
||||
<article role="main">
|
||||
<h1>Media Queries</h1>
|
||||
|
||||
<p class="desc"></p>
|
||||
|
||||
<p class="orientation">Orientation:</p>
|
||||
|
||||
<p>
|
||||
This is a test to show how the <code>media</code> queries
|
||||
affects a page.
|
||||
</p>
|
||||
|
||||
</article>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 640px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDFundamentals-MediaQueries");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,8 +0,0 @@
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.desc:before {
|
||||
content: "This browser window is at least 640px wide!";
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 624 B |
@ -1,3 +0,0 @@
|
||||
.orientation:after {
|
||||
content: " Portrait";
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 520 B |
Binary file not shown.
|
Before Width: | Height: | Size: 659 B |
@ -1,112 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<style>
|
||||
|
||||
@media (min-width: 575px) {
|
||||
article {
|
||||
width: 550px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>RWD Fundamentals: Optimized reading example</title>
|
||||
</head>
|
||||
<body>
|
||||
<article role="main">
|
||||
<h1>Bacon Ipsum</h1>
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet pancetta salami beef ribs ribeye ham. Ribeye
|
||||
strip steak boudin t-bone chuck tri-tip kielbasa sirloin frankfurter
|
||||
shankle ball tip ham short loin hamburger pork chop. Doner jowl tail,
|
||||
shoulder chicken beef ribs ribeye leberkas. Tongue corned beef fatback
|
||||
turkey pork chop bacon. Pork meatloaf andouille doner. Swine biltong ham
|
||||
pork chop tongue, shankle shank sausage jowl landjaeger bresaola boudin
|
||||
pork. Porchetta shank beef tongue cow, pork flank shankle rump pig.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ground round shankle tongue chicken kevin fatback pancetta boudin strip
|
||||
steak doner shank drumstick pork loin ball tip short ribs. Kevin rump
|
||||
chicken ribeye salami tail andouille. Tenderloin shoulder drumstick
|
||||
biltong jowl short ribs capicola. Ham hock pastrami spare ribs tail
|
||||
doner frankfurter.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pancetta ground round hamburger, tenderloin tail porchetta filet mignon
|
||||
prosciutto bacon. Prosciutto rump spare ribs boudin meatloaf doner flank
|
||||
chuck. Prosciutto leberkas ground round, sirloin tail flank filet mignon
|
||||
spare ribs ham turducken jowl swine pork loin shankle. Tri-tip rump doner
|
||||
andouille tail, bacon ham jerky. Rump shank pastrami, sausage brisket
|
||||
chicken ribeye frankfurter andouille pork chop pork pancetta. Jowl
|
||||
tongue filet mignon jerky, prosciutto strip steak pastrami rump.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Bresaola pork kielbasa ham hock, tail cow short ribs sirloin kevin
|
||||
fatback ground round hamburger chuck pork belly prosciutto. Corned beef
|
||||
swine hamburger, porchetta prosciutto chicken ball tip pork loin. Ham
|
||||
ground round meatloaf bresaola swine, shoulder filet mignon porchetta
|
||||
drumstick beef pork. Cow kielbasa pork chop kevin landjaeger meatball
|
||||
jowl, frankfurter biltong shoulder tail.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Meatloaf landjaeger ground round brisket t-bone cow biltong pork belly
|
||||
andouille pancetta capicola sirloin. Kielbasa short loin meatloaf pig,
|
||||
ham flank strip steak pancetta bacon beef. Corned beef brisket rump
|
||||
t-bone pork. Ribeye leberkas sirloin kevin jowl. Andouille ground round
|
||||
meatball turkey hamburger, strip steak ham hock filet mignon tail short
|
||||
loin bacon chuck sausage. Bresaola fatback pancetta ball tip brisket
|
||||
jerky pastrami sirloin drumstick kevin t-bone.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tongue hamburger pork loin, rump kielbasa salami capicola spare ribs
|
||||
pork chop landjaeger t-bone porchetta. Beef ribs jerky ribeye bacon
|
||||
t-bone hamburger meatloaf shankle frankfurter pork belly. Meatball
|
||||
sausage beef, pork loin hamburger andouille meatloaf flank chicken
|
||||
venison pastrami porchetta ribeye. Cow rump tail, filet mignon sausage
|
||||
leberkas venison shankle short loin shoulder flank swine shank biltong.
|
||||
</p>
|
||||
</article>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 575px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDFundamentals-Reading");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 385 B |
Binary file not shown.
|
Before Width: | Height: | Size: 810 B |
@ -1,49 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="/layout/vpdemo.css">
|
||||
<style>
|
||||
article {
|
||||
width: 344px;
|
||||
}
|
||||
</style>
|
||||
<title>RWD Fundamentals: Viewport (3 - "width=device-width, initial-scale=1.0" with fixed with element)</title>
|
||||
</head>
|
||||
<body>
|
||||
<article role="main">
|
||||
<h1>Fixed width element</h1>
|
||||
|
||||
<p>
|
||||
This is a test to show what happens when using fixed width on
|
||||
an element. The width of this element is set to <b>344px</b>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This page <b>DOES</b> have the <code>meta
|
||||
viewport</code> set.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Note:</b> each box on the background is 50px wide.
|
||||
</p>
|
||||
</article>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="vpdemo.css">
|
||||
<title>RWD Fundamentals: Viewport (1 - not set)</title>
|
||||
</head>
|
||||
<body>
|
||||
<article role="main">
|
||||
<h1><code>viewport</code> <b>not</b> set</h1>
|
||||
|
||||
<p>
|
||||
This page does <b>NOT</b> have the <code>meta
|
||||
viewport</code> set.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This is a test to show how the <code>meta viewport</code> tag
|
||||
affects a page. To simplify this example as much as possible,
|
||||
font boosting has been disabled.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Note:</b> each box on the background is 50px wide.
|
||||
</p>
|
||||
</article>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,50 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<link rel="stylesheet" href="vpdemo.css">
|
||||
<title>RWD Fundamentals: Viewport (2 - "width=device-width, initial-scale=1.0")</title>
|
||||
</head>
|
||||
<body>
|
||||
<article role="main">
|
||||
<h1><code>viewport</code> set</h1>
|
||||
|
||||
<p>
|
||||
This page <b>DOES</b> have the <code>meta
|
||||
viewport</code> set.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This is a test to show how the <code>meta viewport</code> tag
|
||||
affects a page. To simplify this example as much as possible,
|
||||
font boosting has been disabled.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Note:</b> each box on the background is 50px wide.
|
||||
</p>
|
||||
</article>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,24 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
/* Disable font boosting */
|
||||
max-height: 1000000px;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url('checker.png');
|
||||
}
|
||||
|
||||
article {
|
||||
width: 100%;
|
||||
color: #ccc;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
b {
|
||||
color: #fff;
|
||||
}
|
||||
@ -1,177 +0,0 @@
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, Arial;
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon.rain {
|
||||
background-image: url('rain.png');
|
||||
}
|
||||
|
||||
.icon.sunny {
|
||||
background-image: url('sunny.png');
|
||||
}
|
||||
|
||||
.icon.pc {
|
||||
background-image: url('partly_cloudy.png');
|
||||
}
|
||||
|
||||
.icon.sshowers {
|
||||
background-image: url('rain_s_cloudy.png');
|
||||
}
|
||||
|
||||
.icon.cloudy {
|
||||
background-image: url('cloudy.png');
|
||||
}
|
||||
|
||||
.icon.thunder {
|
||||
background-image: url('thunderstorms.png');
|
||||
}
|
||||
|
||||
.weather-forecast {
|
||||
width: 100%;
|
||||
padding: 10px 10px 0 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Header row */
|
||||
|
||||
.location {
|
||||
font-size: 3em;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* Current Weather Summary */
|
||||
.current {
|
||||
overflow: auto;
|
||||
width:100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.current .visual {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.current .description {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Current Weather - Visual */
|
||||
|
||||
.visual .icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.temp {
|
||||
font-size: 2.5em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.scale {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* General Labels */
|
||||
|
||||
.wind:before {
|
||||
content: "Wind: ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.precip:before {
|
||||
content: "Precipitation: ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.humidity:before {
|
||||
content: "Humidity: ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.pollen:before {
|
||||
content: "Pollen Count: ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.pcount:before {
|
||||
content: "Pollen ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
/* Seven Day Forecast */
|
||||
|
||||
.seven-day div {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.seven-day-fc {
|
||||
border-top: 1px solid rgba(0,0,0,0.2);
|
||||
margin: 0 -11px -1px -11px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.seven-day-fc:last-of-type {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.seven-day-fc div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.seven-day-fc .date {
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.seven-day-fc .icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.seven-day-fc .seven-day-temp {
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.seven-day-fc .temp-high {
|
||||
color: #444;
|
||||
|
||||
}
|
||||
|
||||
.seven-day-fc .temp-low {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.seven-day-fc .temp-low,
|
||||
.seven-day-fc .temp-high {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.seven-day-fc .pcount {
|
||||
text-align: center;
|
||||
width: 16%;
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="weather-1.css">
|
||||
<title>RWD Fundamentals: Weather (1 - non-responsive mobile)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="weather-forecast" role="main">
|
||||
<div class="location">New York, NY</div>
|
||||
<div class="date">Tuesday, April 15th</div>
|
||||
<div class="desc">Overcast</div>
|
||||
<div class="current">
|
||||
<div class="visual">
|
||||
<div class="icon cloudy"></div>
|
||||
<div class="temp">58</div>
|
||||
<div class="scale">°F</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="precip">100%</div>
|
||||
<div class="humidity">97%</div>
|
||||
<div class="wind">4 mph SW</div>
|
||||
<div class="pollen">36</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven-day">
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Today</div>
|
||||
<div class="icon thunder"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">68°</div>
|
||||
<div class="temp-low">36°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Wednesday</div>
|
||||
<div class="icon sunny"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">50°</div>
|
||||
<div class="temp-low">39°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Thursday</div>
|
||||
<div class="icon sunny"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">55°</div>
|
||||
<div class="temp-low">39°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Friday</div>
|
||||
<div class="icon pc"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">54°</div>
|
||||
<div class="temp-low">43°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Saturday</div>
|
||||
<div class="icon sshowers"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">64°</div>
|
||||
<div class="temp-low">46°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Sunday</div>
|
||||
<div class="icon sshowers"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">64°</div>
|
||||
<div class="temp-low">50°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Monday</div>
|
||||
<div class="icon pc"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">61°</div>
|
||||
<div class="temp-low">50°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
|
||||
body {
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.weather-forecast {
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
|
||||
.seven-day-fc {
|
||||
display: inline-block;
|
||||
width: 13.5%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.seven-day-fc div {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seven-day-fc .date {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seven-day-fc .temp-low,
|
||||
.seven-day-fc .temp-high {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.seven-day-fc .seven-day-temp {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.seven-day-fc .icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
|
||||
|
||||
.weather-forecast {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.seven-day-fc {
|
||||
border-top: 1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.seven-day-fc:last-of-type {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.seven-day-fc .date {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.seven-day-fc .seven-day-temp {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.seven-day-fc .pcount {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
@ -1,126 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'>
|
||||
|
||||
<link rel="stylesheet" href="weather.css">
|
||||
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
|
||||
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">
|
||||
|
||||
<title>RWD Fundamentals: Weather (2 - responsive)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="weather-forecast" role="main">
|
||||
<div class="location">New York, NY</div>
|
||||
<div class="date">Tuesday, April 15th</div>
|
||||
<div class="desc">Overcast</div>
|
||||
<div class="current">
|
||||
<div class="visual">
|
||||
<div class="icon cloudy"></div>
|
||||
<div class="temp">58</div>
|
||||
<div class="scale">°F</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="precip">100%</div>
|
||||
<div class="humidity">97%</div>
|
||||
<div class="wind">4 mph SW</div>
|
||||
<div class="pollen">36</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven-day">
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Today</div>
|
||||
<div class="icon thunder"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">68°</div>
|
||||
<div class="temp-low">36°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Wednesday</div>
|
||||
<div class="icon sunny"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">50°</div>
|
||||
<div class="temp-low">39°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Thursday</div>
|
||||
<div class="icon sunny"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">55°</div>
|
||||
<div class="temp-low">39°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Friday</div>
|
||||
<div class="icon pc"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">54°</div>
|
||||
<div class="temp-low">43°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Saturday</div>
|
||||
<div class="icon sshowers"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">64°</div>
|
||||
<div class="temp-low">46°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Sunday</div>
|
||||
<div class="icon sshowers"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">64°</div>
|
||||
<div class="temp-low">50°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Monday</div>
|
||||
<div class="icon pc"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">61°</div>
|
||||
<div class="temp-low">50°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 600px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDFundamentals-Weather2");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
|
||||
body {
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.weather-forecast {
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
|
||||
.seven-day-fc {
|
||||
display: inline-block;
|
||||
width: 13.5%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.seven-day-fc div {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seven-day-fc .date {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seven-day-fc .temp-low,
|
||||
.seven-day-fc .temp-high {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.seven-day-fc .seven-day-temp {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.seven-day-fc .icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.weather-forecast {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
|
||||
|
||||
.weather-forecast {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.seven-day-fc {
|
||||
border-top: 1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.seven-day-fc:last-of-type {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.seven-day-fc .date {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.seven-day-fc .seven-day-temp {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.seven-day-fc .pcount {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 360px) {
|
||||
body {
|
||||
font-size: 1.0em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.seven-day-fc .temp-low,
|
||||
.seven-day-fc .temp-high {
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.seven-day-fc .seven-day-temp {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.seven-day-fc .icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,179 +0,0 @@
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/*border: 1px solid #999;*/
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, Arial;
|
||||
font-size: 0.8em;
|
||||
color: #666;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon.rain {
|
||||
background-image: url('rain.png');
|
||||
}
|
||||
|
||||
.icon.sunny {
|
||||
background-image: url('sunny.png');
|
||||
}
|
||||
|
||||
.icon.pc {
|
||||
background-image: url('partly_cloudy.png');
|
||||
}
|
||||
|
||||
.icon.sshowers {
|
||||
background-image: url('rain_s_cloudy.png');
|
||||
}
|
||||
|
||||
.icon.cloudy {
|
||||
background-image: url('cloudy.png');
|
||||
}
|
||||
|
||||
.icon.thunder {
|
||||
background-image: url('thunderstorms.png');
|
||||
}
|
||||
|
||||
.weather-forecast {
|
||||
padding: 10px 10px 0 10px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
/* Header row */
|
||||
|
||||
.location {
|
||||
font-size: 3em;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.date {
|
||||
|
||||
}
|
||||
|
||||
.desc {
|
||||
|
||||
}
|
||||
|
||||
/* Current Weather Summary */
|
||||
.current {
|
||||
overflow: auto;
|
||||
width:100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.current .visual {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.current .description {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Current Weather - Visual */
|
||||
|
||||
.visual .icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.temp {
|
||||
font-size: 2.5em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.scale {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* General Labels */
|
||||
|
||||
.wind:before {
|
||||
content: "Wind: ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.precip:before {
|
||||
content: "Precipitation: ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.humidity:before {
|
||||
content: "Humidity: ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.pollen:before {
|
||||
content: "Pollen Count: ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.pcount:before {
|
||||
content: "Pollen ";
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
/* Seven Day Forecast */
|
||||
|
||||
.seven-day div {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.seven-day-fc {
|
||||
|
||||
margin: 0 -11px -1px -11px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.seven-day-fc div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.seven-day-fc .date {
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.seven-day-fc .icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.seven-day-fc .seven-day-temp {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seven-day-fc .temp-high {
|
||||
color: #444;
|
||||
|
||||
}
|
||||
|
||||
.seven-day-fc .temp-low {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.seven-day-fc .temp-low,
|
||||
.seven-day-fc .temp-high {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.seven-day-fc .pcount {
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,124 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:400,700,900' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="weather.css">
|
||||
<link rel="stylesheet" media="(max-width:600px)" href="weather-small.css">
|
||||
<link rel="stylesheet" media="(min-width:601px)" href="weather-large.css">
|
||||
<title>RWD Fundamentals: Weather (3 - final)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="weather-forecast" role="main">
|
||||
<div class="location">New York, NY</div>
|
||||
<div class="date">Tuesday, April 15th</div>
|
||||
<div class="desc">Overcast</div>
|
||||
<div class="current">
|
||||
<div class="visual">
|
||||
<div class="icon cloudy"></div>
|
||||
<div class="temp">58</div>
|
||||
<div class="scale">°F</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="precip">100%</div>
|
||||
<div class="humidity">97%</div>
|
||||
<div class="wind">4 mph SW</div>
|
||||
<div class="pollen">36</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven-day">
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Today</div>
|
||||
<div class="icon thunder"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">68°</div>
|
||||
<div class="temp-low">36°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Wednesday</div>
|
||||
<div class="icon sunny"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">50°</div>
|
||||
<div class="temp-low">39°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Thursday</div>
|
||||
<div class="icon sunny"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">55°</div>
|
||||
<div class="temp-low">39°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Friday</div>
|
||||
<div class="icon pc"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">54°</div>
|
||||
<div class="temp-low">43°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Saturday</div>
|
||||
<div class="icon sshowers"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">64°</div>
|
||||
<div class="temp-low">46°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Sunday</div>
|
||||
<div class="icon sshowers"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">64°</div>
|
||||
<div class="temp-low">50°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
<div class="seven-day-fc">
|
||||
<div class="date">Monday</div>
|
||||
<div class="icon pc"></div>
|
||||
<div class="seven-day-temp">
|
||||
<div class="temp-high">61°</div>
|
||||
<div class="temp-low">50°</div>
|
||||
</div>
|
||||
<div class="pcount">36</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 600px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDFundamentals-Weather");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="layouts-common.css">
|
||||
<style>
|
||||
|
||||
|
||||
.container {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.c1, .c2, .c3 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.c1 {
|
||||
width: 60%;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
width: 40%;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
width: 100%;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.c2 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>Responsive Web Design Pattern: Column Drop</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" role="main">
|
||||
<div class="c1"></div>
|
||||
<div class="c2"></div>
|
||||
<div class="c3"></div>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 800px)").addListener(hitMQ);
|
||||
window.matchMedia("(min-width: 600px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDPatterns-ColumnDrop");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,84 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="layouts-common.css">
|
||||
<style>
|
||||
|
||||
|
||||
.container {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.c1, .c2, .c3, .c4 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.c1 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.container {
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>Responsive Web Design Pattern: Layout Shifter</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" role="main">
|
||||
<div class="c1"></div>
|
||||
<div class="c4">
|
||||
<div class="c2"></div>
|
||||
<div class="c3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 800px)").addListener(hitMQ);
|
||||
window.matchMedia("(min-width: 600px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDPatterns-LayoutShifter");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container div {
|
||||
box-sizing: border-box;
|
||||
min-height: 150px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #ddd;
|
||||
background-color: #003476;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: #ddd;
|
||||
background-color: #0062d2;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
color: #333;
|
||||
background-color: #b4d2f7;
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="layouts-common.css">
|
||||
<style>
|
||||
|
||||
|
||||
.container {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.c1, .c2, .c3 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.c2, .c3 {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.container {
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>Responsive Web Design Pattern: Mostly Fluid</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" role="main">
|
||||
<div class="c1">
|
||||
</div>
|
||||
<div class="c2">
|
||||
</div>
|
||||
<div class="c3">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 800px)").addListener(hitMQ);
|
||||
window.matchMedia("(min-width: 600px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDPatterns-MostlyFluid");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,171 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="layouts-common.css">
|
||||
<style>
|
||||
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c1, .c3 {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
|
||||
/*
|
||||
This is a trick to improve performance on newer versions of Chrome
|
||||
#perfmatters
|
||||
*/
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
-webkit-transition: -webkit-transform 0.4s ease-out;
|
||||
transition: transform 0.4s ease-out;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
/*
|
||||
Using translate3d as a trick to improve performance on older versions of Chrome
|
||||
See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
|
||||
#perfmatters
|
||||
*/
|
||||
-webkit-transform: translate(-250px,0);
|
||||
transform: translate(-250px,0);
|
||||
}
|
||||
|
||||
.c2 {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.c1.open {
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
|
||||
.c3.open {
|
||||
-webkit-transform: translate(-250px,0);
|
||||
transform: translate(-250px,0);
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
/* If the screen is wider then 500px, use Flexbox */
|
||||
.container {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.c1 {
|
||||
position: relative;
|
||||
-webkit-transition: none 0s ease-out;
|
||||
transition: none 0s ease-out;
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
.c2 {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
body {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.c3 {
|
||||
position: relative;
|
||||
left: auto;
|
||||
-webkit-transition: none 0s ease-out;
|
||||
transition: none 0s ease-out;
|
||||
-webkit-transform: translate(0,0);
|
||||
transform: translate(0,0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>Responsive Web Design Pattern: Off Canvas</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" role="main">
|
||||
<div class="c1" id="leftDrawer">
|
||||
</div>
|
||||
<div class="c2" id="mainPanel">
|
||||
Click the <code>div</code>'s to change views
|
||||
</div>
|
||||
<div class="c3" id="rightDrawer">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var position = 0;
|
||||
var mainPanel = document.getElementById("mainPanel");
|
||||
var leftDrawer = document.getElementById("leftDrawer");
|
||||
var rightDrawer = document.getElementById("rightDrawer");
|
||||
|
||||
function toggle(evt) {
|
||||
position++;
|
||||
if (position % 3 == 0) {
|
||||
leftDrawer.classList.remove("open");
|
||||
rightDrawer.classList.remove("open");
|
||||
} else if (position % 3 == 1) {
|
||||
leftDrawer.classList.add("open");
|
||||
rightDrawer.classList.remove("open");
|
||||
} else {
|
||||
leftDrawer.classList.remove("open");
|
||||
rightDrawer.classList.add("open");
|
||||
}
|
||||
}
|
||||
|
||||
mainPanel.addEventListener("click", toggle);
|
||||
leftDrawer.addEventListener("click", toggle);
|
||||
rightDrawer.addEventListener("click", toggle);
|
||||
|
||||
</script>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 800px)").addListener(hitMQ);
|
||||
window.matchMedia("(min-width: 500px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDPatterns-OffCanvas");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,97 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="layouts-common.css">
|
||||
<style>
|
||||
|
||||
|
||||
.c1 {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.c1 {
|
||||
padding: 20px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.c1 {
|
||||
padding: 40px;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>Responsive Web Design Pattern: Tiny Tweaks</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" role="main">
|
||||
<div class="c1">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet pancetta salami beef ribs ribeye ham. Ribeye
|
||||
strip steak boudin t-bone chuck tri-tip kielbasa sirloin frankfurter
|
||||
shankle ball tip ham short loin hamburger pork chop. Doner jowl tail,
|
||||
shoulder chicken beef ribs ribeye leberkas. Tongue corned beef fatback
|
||||
turkey pork chop bacon. Pork meatloaf andouille doner. Swine biltong ham
|
||||
pork chop tongue, shankle shank sausage jowl landjaeger bresaola boudin
|
||||
pork. Porchetta shank beef tongue cow, pork flank shankle rump pig.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ground round shankle tongue chicken kevin fatback pancetta boudin strip
|
||||
steak doner shank drumstick pork loin ball tip short ribs. Kevin rump
|
||||
chicken ribeye salami tail andouille. Tenderloin shoulder drumstick
|
||||
biltong jowl short ribs capicola. Ham hock pastrami spare ribs tail
|
||||
doner frankfurter.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pancetta ground round hamburger, tenderloin tail porchetta filet mignon
|
||||
prosciutto bacon. Prosciutto rump spare ribs boudin meatloaf doner flank
|
||||
chuck. Prosciutto leberkas ground round, sirloin tail flank filet mignon
|
||||
spare ribs ham turducken jowl swine pork loin shankle. Tri-tip rump doner
|
||||
andouille tail, bacon ham jerky. Rump shank pastrami, sausage brisket
|
||||
chicken ribeye frankfurter andouille pork chop pork pancetta. Jowl
|
||||
tongue filet mignon jerky, prosciutto strip steak pastrami rump.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> <script type="text/javascript">
|
||||
function init() {
|
||||
window.matchMedia("(min-width: 800px)").addListener(hitMQ);
|
||||
window.matchMedia("(min-width: 500px)").addListener(hitMQ);
|
||||
}
|
||||
|
||||
function hitMQ(evt) {
|
||||
sampleCompleted("RWDPatterns-TinyTweaks");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,228 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<style>
|
||||
|
||||
|
||||
input.dirty:not(:focus):invalid {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>Creating Amazing Forms: Sample order form</title>
|
||||
</head>
|
||||
<body>
|
||||
<div role="main">
|
||||
<form method="post" id="usrForm">
|
||||
<fieldset>
|
||||
<legend>Contact Info</legend>
|
||||
|
||||
<label for="frmNameA">Name</label>
|
||||
<input type="text" name="name" id="frmName"
|
||||
placeholder="Full name" required autocomplete="name" />
|
||||
|
||||
<label for="frmEmailA">Email</label>
|
||||
<input type="email" name="email" id="frmEmailA"
|
||||
placeholder="name@example.com" required autocomplete="email" />
|
||||
|
||||
<label for="frmEmailC">Confirm Email</label>
|
||||
<input type="email" name="emailC" id="frmEmailC"
|
||||
placeholder="name@example.com" required autocomplete="email" />
|
||||
|
||||
<label for="frmPhoneNumA">Phone</label>
|
||||
<input type="tel" name="phone" id="frmPhoneNumA"
|
||||
placeholder="+1-555-555-1212" required autocomplete="tel" />
|
||||
|
||||
<label for="frmShoeSize">Shoe Size</label>
|
||||
<input type="number" name="shoe-size" id="frmShoeSize"
|
||||
min="1" max="18" step="0.5" />
|
||||
|
||||
|
||||
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
|
||||
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
|
||||
<datalist id="chocType">
|
||||
<option value="white" />
|
||||
<option value="milk" />
|
||||
<option value="dark" />
|
||||
</datalist>
|
||||
|
||||
</fieldset>
|
||||
|
||||
|
||||
<fieldset>
|
||||
<legend>Shipping</legend>
|
||||
|
||||
<label for="frmAddressS">Address</label>
|
||||
<input type="text" name="ship-address" required id="frmAddressS"
|
||||
placeholder="123 Any Street" autocomplete="shipping street-address" />
|
||||
|
||||
<label for="frmCityS">City</label>
|
||||
<input type="text" name="ship-city" required id="frmCityS"
|
||||
placeholder="New York" autocomplete="shipping locality" />
|
||||
|
||||
<label for="frmStateS">State</label>
|
||||
<input type="text" name="ship-state" required id="frmStateS"
|
||||
placeholder="NY" autocomplete="shipping region" />
|
||||
|
||||
<label for="frmZipS">Zip</label>
|
||||
<input type="text" name="ship-zip" required id="frmZipS"
|
||||
placeholder="10011" autocomplete="shipping postal-code" />
|
||||
|
||||
<label for="frmCountryS">Country</label>
|
||||
<input type="text" name="ship-country" required id="frmCountryS"
|
||||
placeholder="USA" autocomplete="shipping country" />
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
|
||||
Bill to this address.
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Billing</legend>
|
||||
|
||||
<label for="frmAddressB">Address</label>
|
||||
<input type="text" name="bill-address" id="frmAddressB" required
|
||||
placeholder="123 Any Street" autocomplete="billing street-address" />
|
||||
|
||||
<label for="frmCityB">City</label>
|
||||
<input type="text" name="bill-city" id="frmCityB" required
|
||||
placeholder="New York" autocomplete="billing locality" />
|
||||
|
||||
<label for="frmStateB">State</label>
|
||||
<input type="text" name="bill-state" id="frmStateB" required
|
||||
placeholder="NY" autocomplete="billing region" />
|
||||
|
||||
<label for="frmZipB">Zip</label>
|
||||
<input type="text" name="bill-zip" id="frmZipB" required
|
||||
placeholder="10011" autocomplete="billing postal-code" />
|
||||
|
||||
<label for="frmCountryB">Country</label>
|
||||
<input type="text" name="bill-country" id="frmCountryB"
|
||||
required placeholder="USA" autocomplete="billing country" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Payment</legend>
|
||||
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
|
||||
<label for="frmNameCC">Name on card</label>
|
||||
<input type="text" name="ccname" id="frmNameCC"
|
||||
required placeholder="Full Name" autocomplete="cc-name" />
|
||||
|
||||
<label for="frmCCNum">Card Number</label>
|
||||
<input type="text" name="cardnumber" id="frmCCNum"
|
||||
required autocomplete="cc-number" />
|
||||
|
||||
<label for="frmCCCVC">CVC</label>
|
||||
<input type="text" name="cvc" id="frmCCCVC" required
|
||||
autocomplete="cc-csc" />
|
||||
|
||||
<label for="frmCCExp">Expiry</label>
|
||||
|
||||
<input type="text" name="cc-exp" id="frmCCExp" required
|
||||
placeholder="MM-YYYY" autocomplete="cc-exp" />
|
||||
|
||||
</fieldset>
|
||||
<div>
|
||||
<button class="btn" id="butCheckout">Check Out</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var form;
|
||||
|
||||
function initForm() {
|
||||
form = document.getElementById("usrForm")
|
||||
|
||||
form.addEventListener("submit", function(evt) {
|
||||
if (form.checkValidity() === false) {
|
||||
evt.preventDefault();
|
||||
alert("Form is invalid - submission prevented!");
|
||||
return false;
|
||||
} else {
|
||||
// To prevent data from being sent, we've prevented submission
|
||||
// here, but normally this code block would not exist.
|
||||
evt.preventDefault();
|
||||
alert("Form is valid - submission prevented to protect privacy.");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function initConfirmEmail() {
|
||||
var elem = document.getElementById("frmEmailC");
|
||||
elem.addEventListener("blur", verifyEmail);
|
||||
function verifyEmail(input) {
|
||||
input = input.srcElement;
|
||||
sampleCompleted("Forms-orderConfirm");
|
||||
var primaryEmail = document.getElementById('frmEmailA').value
|
||||
|
||||
if (input.value != primaryEmail) {
|
||||
// the provided value doesn't match the primary email address
|
||||
input.setCustomValidity('The two email addresses must match.');
|
||||
console.log("E-mail addresses do not match", primaryEmail, input.value);
|
||||
} else {
|
||||
// input is valid -- reset the error message
|
||||
input.setCustomValidity('');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function initInputs() {
|
||||
|
||||
var inputs = document.getElementsByTagName("input");
|
||||
var inputs_len = inputs.length;
|
||||
var addDirtyClass = function(evt) {
|
||||
sampleCompleted("Forms-order-dirty");
|
||||
evt.srcElement.classList.toggle("dirty", true);
|
||||
};
|
||||
for (var i = 0; i < inputs_len; i++) {
|
||||
var input = inputs[i];
|
||||
input.addEventListener("blur", addDirtyClass);
|
||||
input.addEventListener("invalid", addDirtyClass);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function initNoSubmit() {
|
||||
form.addEventListener("submit", function(evt) {
|
||||
evt.preventDefault();
|
||||
alert("Submission of this form is prevented.");
|
||||
});
|
||||
}
|
||||
|
||||
initForm();
|
||||
initInputs();
|
||||
initConfirmEmail();
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,213 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<style>
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
input.dirty:not(:focus):invalid {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>Creating Amazing Forms: Sample order form with requestAutocomplete</title>
|
||||
</head>
|
||||
<body>
|
||||
<div role="main">
|
||||
<p>Do not provide real credit card data on this form.</p>
|
||||
<div id="racStatus">
|
||||
<p id="racSubject"></p>
|
||||
<p id="racMessage"></p>
|
||||
<button id="doRAC" type="button">Check Out with requestAutocomplete</button>
|
||||
</div>
|
||||
<form method="post" id="usrForm" class="hidden">
|
||||
<fieldset>
|
||||
<legend>Contact Info</legend>
|
||||
<label for="frmNameA">Name</label>
|
||||
<input type="text" name="name" id="frmName"
|
||||
placeholder="Full name" required autocomplete="name" />
|
||||
|
||||
<label for="frmEmailA">E-mail</label>
|
||||
<input type="email" name="e-mail" id="frmEmailA"
|
||||
placeholder="name@example.com" required autocomplete="email" />
|
||||
|
||||
<label for="frmEmailC">Confirm E-mail</label>
|
||||
<input type="email" name="e-mailC" id="frmEmailC"
|
||||
placeholder="name@example.com" autocomplete="email" />
|
||||
|
||||
<label for="frmPhoneNumA">Phone</label>
|
||||
<input type="tel" name="phone" id="frmPhoneNumA"
|
||||
placeholder="+1-555-555-1212" required autocomplete="tel" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Shipping</legend>
|
||||
|
||||
<label for="frmAddressS">Address</label>
|
||||
<input type="text" name="ship-address" required id="frmAddressS"
|
||||
placeholder="123 Any Street" autocomplete="shipping street-address" />
|
||||
|
||||
<label for="frmCityS">City</label>
|
||||
<input type="text" name="ship-city" required id="frmCityS"
|
||||
placeholder="New York" autocomplete="shipping locality" />
|
||||
|
||||
<label for="frmStateS">State</label>
|
||||
<input type="text" name="ship-state" required id="frmStateS"
|
||||
placeholder="NY" autocomplete="shipping region" />
|
||||
|
||||
<label for="frmZipS">Zip</label>
|
||||
<input type="text" name="ship-zip" required id="frmZipS"
|
||||
placeholder="10011" autocomplete="shipping postal-code" />
|
||||
|
||||
<label for="frmCountryS">Country</label>
|
||||
<input type="text" name="ship-country" required id="frmCountryS"
|
||||
placeholder="USA" autocomplete="shipping country" />
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
|
||||
Bill to this address.
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Billing</legend>
|
||||
|
||||
<label for="frmAddressB">Address</label>
|
||||
<input type="text" name="bill-address" id="frmAddressB" required
|
||||
placeholder="123 Any Street" autocomplete="billing street-address" />
|
||||
|
||||
<label for="frmCityB">City</label>
|
||||
<input type="text" name="bill-city" id="frmCityB" required
|
||||
placeholder="New York" autocomplete="billing locality" />
|
||||
|
||||
<label for="frmStateB">State</label>
|
||||
<input type="text" name="bill-state" id="frmStateB" required
|
||||
placeholder="NY" autocomplete="billing region" />
|
||||
|
||||
<label for="frmZipB">Zip</label>
|
||||
<input type="text" name="bill-zip" id="frmZipB" required
|
||||
placeholder="10011" autocomplete="billing postal-code" />
|
||||
|
||||
<label for="frmCountryB">Country</label>
|
||||
<input type="text" name="bill-country" id="frmCountryB"
|
||||
required placeholder="USA" autocomplete="billing country" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Payment</legend>
|
||||
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
|
||||
<label for="frmNameCC">Name on card</label>
|
||||
<input type="text" name="ccname" id="frmNameCC"
|
||||
required placeholder="Full Name" autocomplete="cc-name" />
|
||||
|
||||
<label for="frmCCNum">Card Number</label>
|
||||
<input type="text" name="cardnumber" id="frmCCNum"
|
||||
required autocomplete="cc-number" />
|
||||
|
||||
<label for="frmCCCVC">CVC</label>
|
||||
<input type="text" name="cvc" id="frmCCCVC" required
|
||||
autocomplete="cc-csc" />
|
||||
|
||||
<label for="frmCCExp">Expiry</label>
|
||||
<input type="text" name="cc-exp" id="frmCCExp" required
|
||||
placeholder="MM-YYYY" autocomplete="cc-exp" />
|
||||
</fieldset>
|
||||
|
||||
<button class="btn" id="butCheckout">Check Out</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var form, racSubject, racMessage;
|
||||
|
||||
function initForm() {
|
||||
racSubject = document.getElementById("racSubject");
|
||||
racMessage = document.getElementById("racMessage");
|
||||
|
||||
|
||||
var doRAC = document.getElementById("doRAC");
|
||||
doRAC.addEventListener("click", doRequestAutocomplete);
|
||||
|
||||
form = document.getElementById("usrForm");
|
||||
form.addEventListener("autocompleteerror", requestAutocompleteError);
|
||||
form.addEventListener("autocomplete", requestAutocompleteCompleted);
|
||||
|
||||
if (form.requestAutocomplete) {
|
||||
isRACSupported(true, "");
|
||||
} else {
|
||||
isRACSupported(false, "Please complete the form manually.");
|
||||
}
|
||||
|
||||
// To prevent data from being sent, we've prevented submission
|
||||
// here, but normally this code block would not exist.
|
||||
form.addEventListener("submit", function(evt) {
|
||||
evt.preventDefault();
|
||||
alert("Submission prevented to protect privacy.");
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
function isRACSupported(supported, message) {
|
||||
if (supported === true) {
|
||||
racSubject.textContent = "requestAutocomplete is supported!";
|
||||
form.classList.toggle("hidden", true);
|
||||
doRAC.classList.toggle("hidden", false);
|
||||
} else {
|
||||
racSubject.textContent = "Sorry, requestAutocomplete isn't supported.";
|
||||
form.classList.toggle("hidden", false);
|
||||
doRAC.classList.toggle("hidden", true);
|
||||
sampleCompleted("Forms-rAc-unsupported");
|
||||
}
|
||||
racMessage.textContent = message;
|
||||
}
|
||||
|
||||
function doRequestAutocomplete(evt) {
|
||||
console.log("doRequestAutocomplete", evt);
|
||||
sampleCompleted("Forms-rAc");
|
||||
form.requestAutocomplete();
|
||||
}
|
||||
|
||||
|
||||
function requestAutocompleteCompleted(evt) {
|
||||
console.log("requestAutocomplete Completed", evt);
|
||||
form.classList.toggle("hidden", false);
|
||||
}
|
||||
|
||||
function requestAutocompleteError(evt) {
|
||||
console.log("requestAutocomplete Error", evt);
|
||||
isRACSupported(false, "An error occured attempting to autocomplete the form.");
|
||||
}
|
||||
|
||||
initForm();
|
||||
|
||||
</script>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no"/>
|
||||
|
||||
<title>Touch Example 2</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<button>Button</button>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,79 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Forced Button States</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #d3e2fc;
|
||||
|
||||
margin: 32px;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0 auto 16px auto;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border-style: none;
|
||||
border-radius: 6px;
|
||||
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
text-align:center;
|
||||
text-decoration: none;
|
||||
|
||||
background-color: #4285f4;
|
||||
|
||||
/* background-image: none; used to surpress changes in style on FF OS */
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button.hover {
|
||||
background-color: #296CDB;
|
||||
}
|
||||
|
||||
button.focus {
|
||||
background-color: #0F52C1;
|
||||
|
||||
/* The outline parameter surpresses the border color / outline when focused */
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: #0039A8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button class="btn" tabindex="1">Default State</button>
|
||||
|
||||
<button class="hover" tabindex="2">Hover State</button>
|
||||
|
||||
<button class="focus" tabindex="4">Focus State</button>
|
||||
|
||||
<button class="active" tabindex="3">Active State</button>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,125 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<title>Web Essential: States Example</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #d3e2fc;
|
||||
|
||||
margin: 32px;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0 auto 16px auto;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border-style: none;
|
||||
border-radius: 6px;
|
||||
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
text-align:center;
|
||||
text-decoration: none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #296CDB;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
background-color: #0F52C1;
|
||||
|
||||
/* The outline parameter surpresses the border
|
||||
color / outline when focused */
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background-color: #0039A8;
|
||||
}
|
||||
|
||||
|
||||
/* Webkit / Chrome Specific CSS to remove tap
|
||||
highlight color */
|
||||
.btn {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* Firefox Specific CSS to remove button
|
||||
differences and focus ring */
|
||||
.btn {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button class="btn" tabindex="1">Button 1</button>
|
||||
|
||||
<button class="btn hover" tabindex="2">Button 2</button>
|
||||
|
||||
<button class="btn active" tabindex="3">Button 3</button>
|
||||
|
||||
<button class="btn focus" tabindex="4">Button 4</button>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,422 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no"/>
|
||||
|
||||
<title>Touch Example 1</title>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #d3e2fc;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swipe-element {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.swipe-front {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: #ecf0f1;
|
||||
line-height: 44px;
|
||||
vertical-align: center;
|
||||
|
||||
background-color: #4285f4;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
|
||||
/* Pass all touches to javascript */
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
|
||||
}
|
||||
|
||||
.swipe-back {
|
||||
position: absolute;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.swipe-back button {
|
||||
display: inline-block;
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
background-color: #4285f4;
|
||||
|
||||
border-radius: 100%;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.swipe-back button:nth-child(2) {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
|
||||
.swipe-back button:nth-child(3) {
|
||||
background-color: #cb4437;
|
||||
}
|
||||
|
||||
.swipe-back button:nth-child(4) {
|
||||
background-color: #f4b400;
|
||||
}
|
||||
|
||||
.promote-layer {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section class="content">
|
||||
<div class="swipe-element">
|
||||
<div class="swipe-back">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
<p class="swipe-front promote-layer">Swipe Me</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="swipe-element">
|
||||
<div class="swipe-back">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
<p class="swipe-front promote-layer">Swipe Me Too</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Shim for requestAnimationFrame from Paul Irishpaul ir
|
||||
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
window.requestAnimFrame = (function(){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
function( callback ){
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
function SwipeRevealItem(element) {
|
||||
// Gloabl state variables
|
||||
var STATE_DEFAULT = 1;
|
||||
var STATE_LEFT_SIDE = 2;
|
||||
var STATE_RIGHT_SIDE = 3;
|
||||
|
||||
var swipeFrontElement = element.querySelector('.swipe-front');
|
||||
var swipeBack = element.querySelector('.swipe-back');
|
||||
var isAnimating = false;
|
||||
var initialTouchPos = null;
|
||||
var lastTouchPos = null;
|
||||
var currentXPosition = 0;
|
||||
var currentState = STATE_DEFAULT;
|
||||
var handleSize = 10;
|
||||
|
||||
// Perform client width here as this can be expensive and doens't
|
||||
// change until window.onresize
|
||||
var itemWidth = swipeFrontElement.clientWidth;
|
||||
var slopValue = itemWidth * (1/4);
|
||||
|
||||
// On resize, change the slop value
|
||||
this.resize = function() {
|
||||
itemWidth = swipeFrontElement.clientWidth;
|
||||
slopValue = itemWidth * (1/4);
|
||||
}
|
||||
|
||||
|
||||
// Handle the start of gestures
|
||||
this.handleGestureStart = function(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
if(evt.touches && evt.touches.length > 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Add the move and end listeners
|
||||
if (window.navigator.msPointerEnabled) {
|
||||
// Pointer events are supported.
|
||||
document.addEventListener('MSPointerMove', this.handleGestureMove, true);
|
||||
document.addEventListener('MSPointerUp', this.handleGestureEnd, true);
|
||||
} else {
|
||||
// Add Touch Listeners
|
||||
document.addEventListener('touchmove', this.handleGestureMove, true);
|
||||
document.addEventListener('touchend', this.handleGestureEnd, true);
|
||||
document.addEventListener('touchcancel', this.handleGestureEnd, true);
|
||||
|
||||
// Add Mouse Listeners
|
||||
document.addEventListener('mousemove', this.handleGestureMove, true);
|
||||
document.addEventListener('mouseup', this.handleGestureEnd, true);
|
||||
}
|
||||
|
||||
initialTouchPos = getGesturePointFromEvent(evt);
|
||||
|
||||
swipeFrontElement.style.transition = 'initial';
|
||||
}.bind(this);
|
||||
|
||||
// Handle move gestures
|
||||
this.handleGestureMove = function (evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
console.log('handleGestureMove');
|
||||
|
||||
lastTouchPos = getGesturePointFromEvent(evt);
|
||||
|
||||
if(isAnimating) {
|
||||
return;
|
||||
}
|
||||
|
||||
isAnimating = true;
|
||||
|
||||
window.requestAnimFrame(onAnimFrame);
|
||||
}.bind(this);
|
||||
|
||||
|
||||
// Handle end gestures
|
||||
this.handleGestureEnd = function(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
if(evt.touches && evt.touches.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
isAnimating = false;
|
||||
|
||||
// Remove Event Listeners
|
||||
if (window.navigator.msPointerEnabled) {
|
||||
// Remove Pointer Event Listeners
|
||||
document.removeEventListener('MSPointerMove', this.handleGestureMove, true);
|
||||
document.removeEventListener('MSPointerUp', this.handleGestureEnd, true);
|
||||
} else {
|
||||
// Remove Touch Listeners
|
||||
document.removeEventListener('touchmove', this.handleGestureMove, true);
|
||||
document.removeEventListener('touchend', this.handleGestureEnd, true);
|
||||
document.removeEventListener('touchcancel', this.handleGestureEnd, true);
|
||||
|
||||
// Remove Mouse Listeners
|
||||
document.removeEventListener('mousemove', this.handleGestureMove, true);
|
||||
document.removeEventListener('mouseup', this.handleGestureEnd, true);
|
||||
}
|
||||
|
||||
updateSwipeRestPosition();
|
||||
}.bind(this);
|
||||
|
||||
function updateSwipeRestPosition() {
|
||||
var differenceInX = initialTouchPos.x - lastTouchPos.x;
|
||||
currentXPosition = currentXPosition - differenceInX;
|
||||
|
||||
// Go to the default state and change
|
||||
var newState = STATE_DEFAULT;
|
||||
|
||||
// Check if we need to change state to left or right based on slop value
|
||||
if(Math.abs(differenceInX) > slopValue) {
|
||||
if(currentState == STATE_DEFAULT) {
|
||||
if(differenceInX > 0) {
|
||||
newState = STATE_LEFT_SIDE;
|
||||
} else {
|
||||
newState = STATE_RIGHT_SIDE;
|
||||
}
|
||||
} else {
|
||||
if(currentState == STATE_LEFT_SIDE && differenceInX > 0) {
|
||||
newState = STATE_DEFAULT;
|
||||
} else if(currentState == STATE_RIGHT_SIDE && differenceInX < 0) {
|
||||
newState = STATE_DEFAULT;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
newState = currentState;
|
||||
}
|
||||
|
||||
changeState(newState);
|
||||
|
||||
swipeFrontElement.style.transition = 'all 150ms ease-out';
|
||||
}
|
||||
|
||||
function changeState(newState) {
|
||||
var transformStyle;
|
||||
switch(newState) {
|
||||
case STATE_DEFAULT:
|
||||
currentXPosition = 0;
|
||||
break;
|
||||
case STATE_LEFT_SIDE:
|
||||
currentXPosition = -(itemWidth - handleSize);
|
||||
break;
|
||||
case STATE_RIGHT_SIDE:
|
||||
currentXPosition = itemWidth - handleSize;
|
||||
break;
|
||||
}
|
||||
|
||||
transformStyle = 'translateX('+currentXPosition+'px)';
|
||||
|
||||
swipeFrontElement.style.msTransform = transformStyle;
|
||||
swipeFrontElement.style.MozTransform = transformStyle;
|
||||
swipeFrontElement.style.webkitTransform = transformStyle;
|
||||
swipeFrontElement.style.transform = transformStyle;
|
||||
|
||||
currentState = newState;
|
||||
}
|
||||
|
||||
function getGesturePointFromEvent(evt) {
|
||||
var point = {};
|
||||
|
||||
if(evt.targetTouches) {
|
||||
point.x = evt.targetTouches[0].clientX;
|
||||
point.y = evt.targetTouches[0].clientY;
|
||||
} else {
|
||||
// Either Mouse event or Pointer Event
|
||||
point.x = evt.clientX;
|
||||
point.y = evt.clientY;
|
||||
}
|
||||
|
||||
return point;
|
||||
}
|
||||
|
||||
function onAnimFrame() {
|
||||
if(!isAnimating) {
|
||||
return;
|
||||
}
|
||||
|
||||
var differenceInX = initialTouchPos.x - lastTouchPos.x;
|
||||
|
||||
var newXTransform = (currentXPosition - differenceInX)+'px';
|
||||
var transformStyle = 'translateX('+newXTransform+')';
|
||||
swipeFrontElement.style['-webkit-transform'] = transformStyle;
|
||||
swipeFrontElement.style['-moz-transform'] = transformStyle;
|
||||
swipeFrontElement.style.transform = transformStyle;
|
||||
|
||||
isAnimating = false;
|
||||
}
|
||||
|
||||
|
||||
// Check if pointer events are supported.
|
||||
if (window.navigator.msPointerEnabled) {
|
||||
// Add Pointer Event Listener
|
||||
swipeFrontElement.addEventListener('MSPointerDown', this.handleGestureStart, true);
|
||||
} else {
|
||||
// Add Touch Listener
|
||||
swipeFrontElement.addEventListener('touchstart', this.handleGestureStart, true);
|
||||
|
||||
// Add Mouse Listener
|
||||
swipeFrontElement.addEventListener('mousedown', this.handleGestureStart, true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var swipeRevealItems = [];
|
||||
|
||||
window.onload = function () {
|
||||
var swipeRevealItemElements = document.querySelectorAll('.swipe-element');
|
||||
for(var i = 0; i < swipeRevealItemElements.length; i++) {
|
||||
swipeRevealItems.push(new SwipeRevealItem(swipeRevealItemElements[i]));
|
||||
}
|
||||
};
|
||||
|
||||
window.onresize = function () {
|
||||
for(var i = 0; i < swipeRevealItems.length; i++) {
|
||||
swipeRevealItems[i].resize();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var swipeFronts = document.querySelectorAll('.swipe-front');
|
||||
for(var i = 0; i < swipeFronts.length; i++) {
|
||||
swipeFronts[i].addEventListener('touchstart', function(){
|
||||
sampleCompleted('touch-demo-1.html-SwipeFrontTouch');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,283 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="stylesheet" href="/resources/samples/css/normalize.css">
|
||||
<link rel="stylesheet" href="/resources/samples/css/main.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" title="roboto">
|
||||
<link rel="stylesheet" href="/resources/samples/css/base.css">
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no"/>
|
||||
|
||||
<title>Touch Example 2</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #d3e2fc;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #ecf0f1;
|
||||
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.v-slider {
|
||||
position: relative;
|
||||
|
||||
width: 46px;
|
||||
height: 200px;
|
||||
|
||||
margin: 23px 0;
|
||||
|
||||
/* Pass all touches to javascript */
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.v-slider > .track {
|
||||
position: absolute;
|
||||
|
||||
width: 6px;
|
||||
height: 200px;
|
||||
|
||||
left: 50%;
|
||||
|
||||
margin-left: -3px;
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.v-slider > .hold {
|
||||
position: absolute;
|
||||
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 50%;
|
||||
|
||||
margin-top: -23px;
|
||||
margin-left: -23px;
|
||||
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
.promote-layer {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="v-slider">
|
||||
<div class="track"></div>
|
||||
<div class="hold promote-layer"></div>
|
||||
</div>
|
||||
|
||||
<div class="v-slider">
|
||||
<div class="track"></div>
|
||||
<div class="hold promote-layer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Shim for requestAnimationFrame from Paul Irishpaul ir
|
||||
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
window.requestAnimFrame = (function(){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
function( callback ){
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
function Slider(element) {
|
||||
var isAnimating = false;
|
||||
var lastYPos = 0;
|
||||
var initialYPos = 0;
|
||||
var lastHolderPos = 0;
|
||||
var elementHold = element.querySelector('.hold');
|
||||
|
||||
|
||||
// Handle the start of gestures
|
||||
this.handleGestureStart = function(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
|
||||
var point = getGesturePointFromEvent(evt);
|
||||
initialYPos = point.y;
|
||||
|
||||
if (!window.navigator.msPointerEnabled) {
|
||||
// Add Mouse Listeners
|
||||
document.addEventListener('mousemove', this.handleGestureMove, true);
|
||||
document.addEventListener('mouseup', this.handleGestureEnd, true);
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
this.handleGestureEnd = function(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
if(evt.targetTouches && evt.targetTouches.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!window.navigator.msPointerEnabled) {
|
||||
// Remove Mouse Listeners
|
||||
document.removeEventListener('mousemove', this.handleGestureMove, true);
|
||||
document.removeEventListener('mouseup', this.handleGestureEnd, true);
|
||||
}
|
||||
|
||||
isAnimating = false;
|
||||
lastHolderPos = lastHolderPos + -(initialYPos - lastYPos);
|
||||
}.bind(this);
|
||||
|
||||
this.handleGestureMove = function(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
|
||||
var point = getGesturePointFromEvent(evt);
|
||||
lastYPos = point.y;
|
||||
|
||||
if(isAnimating) {
|
||||
return;
|
||||
}
|
||||
|
||||
isAnimating = true;
|
||||
window.requestAnimFrame(onAnimFrame);
|
||||
|
||||
}.bind(this);
|
||||
|
||||
|
||||
function getGesturePointFromEvent(evt) {
|
||||
var point = {};
|
||||
|
||||
if(evt.targetTouches) {
|
||||
// Prefer Touch Events
|
||||
point.x = evt.targetTouches[0].clientX;
|
||||
point.y = evt.targetTouches[0].clientY;
|
||||
} else {
|
||||
// Either Mouse event or Pointer Event
|
||||
point.x = evt.clientX;
|
||||
point.y = evt.clientY;
|
||||
}
|
||||
|
||||
return point;
|
||||
}
|
||||
|
||||
|
||||
function onAnimFrame() {
|
||||
if(!isAnimating) {
|
||||
return;
|
||||
}
|
||||
|
||||
var newYTransform = lastHolderPos + -(initialYPos - lastYPos);
|
||||
|
||||
newYTransform = limitValueToSlider(newYTransform);
|
||||
|
||||
var transformStyle = 'translateY('+newYTransform+'px)';
|
||||
elementHold.style.msTransform = transformStyle;
|
||||
elementHold.style.MozTransform = transformStyle;
|
||||
elementHold.style.webkitTransform = transformStyle;
|
||||
elementHold.style.transform = transformStyle;
|
||||
|
||||
isAnimating = false;
|
||||
}
|
||||
|
||||
function limitValueToSlider(value) {
|
||||
if(Math.abs(value) > element.clientHeight) {
|
||||
value = element.clientHeight;
|
||||
} else if(value < 0) {
|
||||
value = 0;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
|
||||
// Check if pointer events are supported.
|
||||
if (window.navigator.msPointerEnabled) {
|
||||
// Add Pointer Event Listener
|
||||
elementHold.addEventListener('MSPointerDown', this.handleGestureStart, true);
|
||||
elementHold.addEventListener('MSPointerMove', this.handleGestureMove, true);
|
||||
elementHold.addEventListener('MSPointerUp', this.handleGestureEnd, true);
|
||||
} else {
|
||||
// Add Touch Listeners
|
||||
elementHold.addEventListener('touchstart', this.handleGestureStart, true);
|
||||
elementHold.addEventListener('touchmove', this.handleGestureMove, true);
|
||||
elementHold.addEventListener('touchend', this.handleGestureEnd, true);
|
||||
elementHold.addEventListener('touchcancel', this.handleGestureEnd, true);
|
||||
|
||||
// Add Mouse Listeners
|
||||
elementHold.addEventListener('mousedown', this.handleGestureStart, true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
var sliderElements = document.querySelectorAll('.v-slider');
|
||||
for(var i = 0; i < sliderElements.length; i++) {
|
||||
new Slider(sliderElements[i]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var holds = document.querySelectorAll('.hold');
|
||||
for(var i = 0; i < holds.length; i++) {
|
||||
holds[i].addEventListener('touchstart', function(){
|
||||
sampleCompleted('touch-demo-2.html-HoldTouch');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-24532603-1');ga('send','pageview');
|
||||
|
||||
var isCompleted = {};
|
||||
function sampleCompleted(sampleName){
|
||||
if (ga && !isCompleted.hasOwnProperty(sampleName)) {
|
||||
ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
|
||||
isCompleted[sampleName] = true;
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- IE Specific to remove tap highlight -->
|
||||
<meta name="msapplication-tap-highlight" content="no"/>
|
||||
|
||||
<title>Web Essential: States Example</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #e74c3c;
|
||||
|
||||
margin: 32px;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
button, a {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
|
||||
padding: 16px;
|
||||
margin: 0 auto 16px auto;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border-style: none;
|
||||
border-radius: 6px;
|
||||
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
text-align:center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #c0392b;
|
||||
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
/* Webkit / Chrome Specific CSS to remove tap highlight color */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
/* Firefox Specific CSS to remove button differences */
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn.user-selectable {
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #B32C1E;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
background-color: #8D0600;
|
||||
/* The outline parameter surpresses the border color / outline when focused */
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background-color: #9A1305;
|
||||
}
|
||||
|
||||
/* Firefox Specific CSS to remove focus ring */
|
||||
.btn::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="btn" tabindex="1" href="#">None Selectable Text</a>
|
||||
|
||||
<a class="btn user-selectable" tabindex="2" href="tel:+44 (0) 123456789">+44 (0) 123456789</a>
|
||||
</body>
|
||||
</html>
|
||||
152
app/alt-layout.html
Normal file
152
app/alt-layout.html
Normal file
@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js no-touch" itemscope itemtype="http://schema.org/Article">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Web Starter Kit</title>
|
||||
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/touch/apple-touch-icon-144x144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/touch/apple-touch-icon-114x114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/touch/apple-touch-icon-72x72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="images/touch/apple-touch-icon-57x57-precomposed.png">
|
||||
<link rel="shortcut icon" sizes="196x196" href="images/touch/touch-icon-196x196.png">
|
||||
<link rel="shortcut icon" href="images/touch/apple-touch-icon.png">
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
||||
<meta name="msapplication-TileImage" content="images/touch/apple-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#222222">
|
||||
|
||||
<!-- SEO: If mobile URL is different from desktop URL, add a canonical link to the desktop page -->
|
||||
<!--
|
||||
<link rel="canonical" href="http://www.example.com/" >
|
||||
-->
|
||||
|
||||
<!-- Add to homescreen for Chrome on Android -->
|
||||
<!--
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
-->
|
||||
|
||||
<!-- For iOS web apps. Delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->
|
||||
<!--
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="">
|
||||
-->
|
||||
|
||||
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
|
||||
<!--
|
||||
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
|
||||
-->
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #C9DAF8;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
position: fixed;
|
||||
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
|
||||
background: #3C78D8;
|
||||
}
|
||||
|
||||
.tab-bar button {
|
||||
width: 40px;
|
||||
height:40px;
|
||||
|
||||
margin: 8px;
|
||||
|
||||
border: none;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease-out;
|
||||
transition: background-color 0.4s ease-out;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.tab-bar button:hover{
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.tab-bar button:focus {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.tab-bar button:active {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.tab-bar button.selected {
|
||||
background-color: rgba(255, 255, 255, 1.0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="tab-bar">
|
||||
<button class="tab-btn tab-1 selected"></button>
|
||||
<button class="tab-btn tab-2"></button>
|
||||
<button class="tab-btn tab-3"></button>
|
||||
<button class="tab-btn tab-4"></button>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
var tabBtns = document.querySelectorAll('.tab-bar > .tab-btn');
|
||||
|
||||
for(var i = 0; i < tabBtns.length; i++) { tabBtns[i].addEventListener('click', onTabClick, true);
|
||||
}
|
||||
|
||||
function onTabClick(e) {
|
||||
var currentTab = document.querySelector('.tab-bar > .tab-btn.selected');
|
||||
if(currentTab) {
|
||||
currentTab.classList.remove('selected');
|
||||
}
|
||||
var btn = e.target;
|
||||
btn.classList.add('selected');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
|
||||
<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='//www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-XXXXX-X');ga('send','pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user