Update visual tests to use component demos.
Sérgio Gomes
parent
171e72ba51
commit
b35b26e9a4
|
|
@ -1,58 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Buttons</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
|
||||
<div class="button-block">Flat: <button class="mdl-button mdl-js-button">Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="mdl-button mdl-js-button mdl-button--raised">Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="mdl-button mdl-js-button mdl-button--fab"><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
<div class="button-block">Icon: <button class="mdl-button mdl-js-button mdl-button--icon"><span class="mdl-icon mdl-icon--create"/></button></div>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<div class="button-block">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
<div class="button-block">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--create"/></button></div>
|
||||
|
||||
<h2>.mdl-button--colored</h2>
|
||||
|
||||
<div class="button-block">Flat: <button class="mdl-button mdl-js-button mdl-button--colored">Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<div class="button-block">Flat: <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
|
||||
<h2>.mdl-button--mini-fab</h2>
|
||||
|
||||
<div class="button-block"><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--mini-fab mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div class="button-block">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect" disabled>Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" disabled><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
<div class="button-block">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" disabled><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Card</title>
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="PreviewBlock">
|
||||
<div class="mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card--img-container">
|
||||
</div>
|
||||
<div class="mdl-card--heading">
|
||||
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
</div>
|
||||
<div class="mdl-card--caption">
|
||||
March 24th, 2014
|
||||
</div>
|
||||
<div class="mdl-card--lower">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
|
||||
</div>
|
||||
<div class="mdl-card--bottom">
|
||||
<a href="">Some Action</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-card mdl-shadow--3dp">
|
||||
<div class="mdl-card--img-container">
|
||||
</div>
|
||||
<div class="mdl-card--heading">
|
||||
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
</div>
|
||||
<div class="mdl-card--caption">
|
||||
March 24th, 2014
|
||||
</div>
|
||||
<div class="mdl-card--lower">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
|
||||
</div>
|
||||
<div class="mdl-card--bottom">
|
||||
<a href="">Some Action</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-card mdl-shadow--4dp">
|
||||
<div class="mdl-card--img-container">
|
||||
</div>
|
||||
<div class="mdl-card--heading">
|
||||
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
</div>
|
||||
<div class="mdl-card--caption">
|
||||
March 24th, 2014
|
||||
</div>
|
||||
<div class="mdl-card--lower">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
|
||||
</div>
|
||||
<div class="mdl-card--bottom">
|
||||
<a href="">Some Action</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Checkbox</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" />
|
||||
<span class="mdl-checkbox__label">Check me out</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
|
||||
<span class="mdl-checkbox__label">I'm just a Material girl in a Material world</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
|
||||
<input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" />
|
||||
<span class="mdl-checkbox__label">Try using checkboxes</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-5">
|
||||
<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled />
|
||||
<span class="mdl-checkbox__label">But not this one</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Item</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
</div>
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
<a href="#">App Status Dashboard</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Learning & Support</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Resource Center</a></li>
|
||||
<li><a href="#">Help Center</a></li>
|
||||
<li><a href="#">Community</a></li>
|
||||
<li><a href="#">Learn with Google</a></li>
|
||||
<li><a href="#">Small Business Community</a></li>
|
||||
<li><a href="#">Think Insights</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Just for Developers</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Google Developers</a></li>
|
||||
<li><a href="#">AdWords API</a></li>
|
||||
<li><a href="#">AdWords Scipts</a></li>
|
||||
<li><a href="#">AdWords Remarketing Tag</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Related Products</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Analytics Standard</a></li>
|
||||
<li><a href="#">Shopping Ads</a></li>
|
||||
<li><a href="#">Trusted Store</a></li>
|
||||
<li><a href="#">AdSense</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">More solutions from Google</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Google for Advertising</a></li>
|
||||
<li><a href="#">Google for Business</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<div class="mdl-logo">
|
||||
Web <strong>Starter Kit</strong>
|
||||
</div>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div class="mdl-logo">
|
||||
Web <strong>Starter Kit</strong>
|
||||
</div>
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Icon Toggles</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="preview-block">
|
||||
|
||||
<div class="button-block">
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="mdl-icon-toggle__input" />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-bold"></span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="mdl-icon-toggle__input" />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-italic"></span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-3">
|
||||
<input type="checkbox" id="checkbox-3" class="mdl-icon-toggle__input" />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-underline"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div class="button-block">
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-1">
|
||||
<input type="checkbox" id="disabled-checkbox-1" class="mdl-icon-toggle__input" disabled />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-bold"></span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-2">
|
||||
<input type="checkbox" id="disabled-checkbox-2" class="mdl-icon-toggle__input" disabled />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-italic"></span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-3">
|
||||
<input type="checkbox" id="disabled-checkbox-3" class="mdl-icon-toggle__input" disabled />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-underline"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -10,31 +10,15 @@
|
|||
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel='stylesheet'>
|
||||
|
||||
<base href="../../">
|
||||
<link rel="stylesheet" href="css/material.css">
|
||||
<style>
|
||||
.demo-container {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0 40px 40px 0;
|
||||
border: 1px solid #888888;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mdl-layout__content {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="dist/material.css">
|
||||
<link rel="stylesheet" href="test/visual/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
||||
<div class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Components</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-input mdl-input--right">
|
||||
|
|
@ -46,26 +30,27 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/button.html">Buttons</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/card.html">Card</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/checkbox.html">Checkbox</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/footer.html">Footer</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/icon-toggle.html">Icon toggle</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/layout.html">Layout</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/list.html">List</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/menu.html">Menu</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/progress.html">Progress</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/radio.html">Radio</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/spinner.html">Spinner</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/slider.html">Slider</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/switch.html">Switch</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/tabs.html">Tabs</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/textfield.html">Textfield</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/tooltip.html">Tooltip</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="test/visual/typography.html">Typography</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/button/demo.html">Button</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/card/demo.html">Card</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/checkbox/demo.html">Checkbox</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/footer/demo.html">Footer</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/icon-toggle/demo.html">Icon toggle</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/layout/demo.html">Layout</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/list/demo.html">List</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/menu/demo.html">Menu</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/progress/demo.html">Progress</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/radio/demo.html">Radio</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/spinner/demo.html">Spinner</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/slider/demo.html">Slider</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/switch/demo.html">Switch</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/tabs/demo.html">Tabs</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/textfield/demo.html">Textfield</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/tooltip/demo.html">Tooltip</a>
|
||||
<a class="mdl-navigation__link" target="preview" href="dist/components/typography/demo.html">Typography</a>
|
||||
</nav>
|
||||
</div>
|
||||
<iframe name="preview" class="mdl-layout__content" src="test/visual/welcome.html"></iframe>
|
||||
|
|
@ -73,7 +58,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<script src="js/material.js"></script>
|
||||
<script src="dist/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,419 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Layout</title>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel='stylesheet'>
|
||||
<base href="../../">
|
||||
|
||||
<link rel="stylesheet" href="css/material.css">
|
||||
<link rel="stylesheet" href="test/visual/style.css">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.demo-container {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0 40px 40px 0;
|
||||
border: 1px solid #888888;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>Default layout</h3>
|
||||
<p>Uses a header for large screen sizes and a collapsible drawer for smaller
|
||||
screens.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Scrolling header</h3>
|
||||
<p>Same as the standard layout, but the header scrolls with the content.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fixed drawer with header</h3>
|
||||
<p>The drawer is always open in large screen sizes, functioning as side
|
||||
navigation.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Fixed drawer layout demo</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fixed drawer (no header)</h3>
|
||||
<p>Same as the previous layout, but with no header.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fixed header</h3>
|
||||
<p>Always shows a header, even in smaller screens.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation. We use CSS to hide it in small screens. -->
|
||||
<nav class="mdl-navigation" id="fixed_header_nav">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fixed drawer and fixed header</h3>
|
||||
<p>The drawer is always open in large screens. The header is always shown,
|
||||
even in small screens.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Fixed drawer and header</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Multi-row layout</h3>
|
||||
<p>Example of a more complex waterfall header, with multiple rows (on large
|
||||
screens only).</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header mdl-layout__header--waterfall">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<!-- Top row -->
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span id="my_text_changes">Material Design Lite</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Only show when compact, check CSS -->
|
||||
<nav class="mdl-navigation" id="compact_navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Middle row, subtitle -->
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-typography--title">
|
||||
Multi-row layout demo
|
||||
</span>
|
||||
</div>
|
||||
<!-- Bottom row -->
|
||||
<div class="mdl-layout__header-row">
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Only show when expanded, check CSS -->
|
||||
<nav class="mdl-navigation" id="expanded_navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Transparent header</h3>
|
||||
<p>Uses a transparent header that draws on top of the layout's background.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout" id="transparent_demo">
|
||||
<header class="mdl-layout__header mdl-layout__header--transparent">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Scrollable tabs</h3>
|
||||
<p>Simple header with scrollable tabs.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Two</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Two</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Two</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Three</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Three</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Three</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Four</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Four</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Four</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Five</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Five</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Five</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Six</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Six</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Six</a>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-scroll">
|
||||
<div class="demo-layout__content-blue"></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="green-panel-scroll">
|
||||
<div class="demo-layout__content-green"></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="red-panel-scroll">
|
||||
<div class="demo-layout__content-red"></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Fixed tabs</h3>
|
||||
<p>Simple header with fixed tabs.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</div>
|
||||
<!-- Tabs -->
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-fixed" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-fixed" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-fixed" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-fixed">
|
||||
<div class="demo-layout__content-blue"></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="green-panel-fixed">
|
||||
<div class="demo-layout__content-green"></div>
|
||||
</section>
|
||||
<section class="mdl-layout__tab-panel" id="red-panel-fixed">
|
||||
<div class="demo-layout__content-red"></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lists</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
|
||||
<h3>Ordered</h3>
|
||||
<ol>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
<li>Item 4</li>
|
||||
<li>Item 5</li>
|
||||
</ol>
|
||||
<h3>Unordered</h3>
|
||||
<ul>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
<li>Item 4</li>
|
||||
<li>Item 5</li>
|
||||
</ul>
|
||||
<h3>Inlined</h3>
|
||||
<ul class="mdl-list--inline">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
<li>Item 4</li>
|
||||
<li>Item 5</li>
|
||||
</ul>
|
||||
|
||||
<h2>Styled List View</h2>
|
||||
|
||||
<p>
|
||||
<div class="List">
|
||||
<p class="mdl-typography-Body-2">Contacts</p>
|
||||
<div class="mdl-list--styled-view">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Ali Connors</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Sandra Williams</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Trevor Hansen</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Britta Holt</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">David Park</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Jennifer Adams</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Frank Connors</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Sandra Williams</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Scott Michaels</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Matt Connors</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>Menu</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
#clickable1 {
|
||||
margin-top: 40vh;
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
|
||||
<button id="clickable1" class="demo-button-left mdl-button mdl-js-button mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"/>
|
||||
</button>
|
||||
|
||||
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1">
|
||||
<li class="mdl-menu__item">5.0 Lollipop</li>
|
||||
<li class="mdl-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="mdl-menu__item">Android History</li>
|
||||
</ul>
|
||||
|
||||
<button id="clickable2" class="demo-button-left2 mdl-button mdl-js-button mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"/>
|
||||
</button>
|
||||
|
||||
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="clickable2">
|
||||
<li class="mdl-menu__item">5.0 Lollipop</li>
|
||||
<li class="mdl-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="mdl-menu__item">Android History</li>
|
||||
</ul>
|
||||
|
||||
<button id="clickable3" class="demo-button-right2 mdl-button mdl-js-button mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"/>
|
||||
</button>
|
||||
|
||||
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="clickable3">
|
||||
<li class="mdl-menu__item">5.0 Lollipop</li>
|
||||
<li class="mdl-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="mdl-menu__item">Android History</li>
|
||||
</ul>
|
||||
|
||||
<button id="clickable4" class="demo-button-right mdl-button mdl-js-button mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"/>
|
||||
</button>
|
||||
|
||||
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" for="clickable4">
|
||||
<li class="mdl-menu__item">5.0 Lollipop</li>
|
||||
<li class="mdl-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="mdl-menu__item">Android History</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,429 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en" class="no-js no-touch" itemscope itemtype="http://schema.org/Article">
|
||||
<head>
|
||||
<meta charset="utf-8" >
|
||||
<meta name="description" content="Palette demo for the visual style guide used by this site.">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta itemprop="name" content="Palette Demo — Material Design Lite">
|
||||
<meta itemprop="description" content="Palette demo for the visual style guide used by this site.">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<title>Palette Demo — Material Design Lite</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="PreviewBlock">
|
||||
<div class="demo-palette-group demo-palette-group__red">
|
||||
<div class="demo-palette-group--heading mdl-color--red-500">
|
||||
<div class="demo-palette-group--name">Red</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-A200">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-A400">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--red-A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__pink">
|
||||
<div class="demo-palette-group--heading mdl-color--pink-500">
|
||||
<div class="demo-palette-group--name">Pink</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-A200">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-A400">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--pink-A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__purple">
|
||||
<div class="demo-palette-group--heading mdl-color--purple-500">
|
||||
<div class="demo-palette-group--name">Purple</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-300">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-400">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-A200">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-A400">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--purple-A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__deep-purple">
|
||||
<div class="demo-palette-group--heading mdl-color--deep-purple-500">
|
||||
<div class="demo-palette-group--name">Deep Purple</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-300">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-400">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-A200">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-A400">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-purple-A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__indigo">
|
||||
<div class="demo-palette-group--heading mdl-color--indigo-500">
|
||||
<div class="demo-palette-group--name">Indigo</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-300">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-400">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-A200">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-A400">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--indigo-A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__blue">
|
||||
<div class="demo-palette-group--heading mdl-color--blue-500">
|
||||
<div class="demo-palette-group--name">Blue</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-A200">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-A400">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__light-blue">
|
||||
<div class="demo-palette-group--heading mdl-color--light-blue-500">
|
||||
<div class="demo-palette-group--name">Light Blue</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-blue-A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__cyan">
|
||||
<div class="demo-palette-group--heading mdl-color--cyan-500">
|
||||
<div class="demo-palette-group--name">Cyan</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--cyan-A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__teal">
|
||||
<div class="demo-palette-group--heading mdl-color--teal-500">
|
||||
<div class="demo-palette-group--name">Teal</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--teal-A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__green">
|
||||
<div class="demo-palette-group--heading mdl-color--green-500">
|
||||
<div class="demo-palette-group--name">Green</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--green-A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__light-green">
|
||||
<div class="demo-palette-group--heading mdl-color--light-green-500">
|
||||
<div class="demo-palette-group--name">Light Green</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-500 dark-text">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-600 dark-text">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-700 dark-text">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--light-green-A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__lime">
|
||||
<div class="demo-palette-group--heading mdl-color--lime-500 dark-text">
|
||||
<div class="demo-palette-group--name">Lime</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-500 dark-text">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-600 dark-text">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-700 dark-text">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-800 dark-text">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--lime-A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__yellow">
|
||||
<div class="demo-palette-group--heading mdl-color--yellow-500 dark-text">
|
||||
<div class="demo-palette-group--name">Yellow</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-500 dark-text">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-600 dark-text">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-700 dark-text">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-800 dark-text">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-900 dark-text">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--yellow-A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__amber">
|
||||
<div class="demo-palette-group--heading mdl-color--amber-500 dark-text">
|
||||
<div class="demo-palette-group--name">Amber</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-500 dark-text">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-600 dark-text">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-700 dark-text">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-800 dark-text">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-900 dark-text">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--amber-A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__orange">
|
||||
<div class="demo-palette-group--heading mdl-color--orange-500 dark-text">
|
||||
<div class="demo-palette-group--name">Orange</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-500 dark-text">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-600 dark-text">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-700 dark-text">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-A400 dark-text">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--orange-A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__deep-orange">
|
||||
<div class="demo-palette-group--heading mdl-color--deep-orange-500">
|
||||
<div class="demo-palette-group--name">Deep Orange</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-A100 dark-text">A100</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-A200 dark-text">A200</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-A400">A400</div>
|
||||
<div class="demo-palette-group--color mdl-color--deep-orange-A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__brown">
|
||||
<div class="demo-palette-group--heading mdl-color--brown-500">
|
||||
<div class="demo-palette-group--name">Brown</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-300">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-400">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--brown-900">900</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__grey">
|
||||
<div class="demo-palette-group--heading mdl-color--grey-500 dark-text">
|
||||
<div class="demo-palette-group--name">Grey</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-400 dark-text">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-500 dark-text">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-900">900</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-1000">1000</div>
|
||||
<div class="demo-palette-group--color mdl-color--grey-1000-inverse dark-text">1000</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-palette-group demo-palette-group__blue-grey">
|
||||
<div class="demo-palette-group--heading mdl-color--blue-grey-500">
|
||||
<div class="demo-palette-group--name">Blue Grey</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-50 dark-text">50</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-100 dark-text">100</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-200 dark-text">200</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-300 dark-text">300</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-400">400</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-500">500</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-600">600</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-700">700</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-800">800</div>
|
||||
<div class="demo-palette-group--color mdl-color--blue-grey-900">900</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Spinner</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<p>
|
||||
Default:
|
||||
<div id="p1" class="mdl-js-progress"></div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Indeterminate:
|
||||
<div id="p2" class="mdl-js-progress mdl-progress__indeterminate"></div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Buffering:
|
||||
<div id="p3" class="mdl-js-progress"></div>
|
||||
</p>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
|
||||
this.widget.setProgress(44);
|
||||
});
|
||||
document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
|
||||
this.widget.setProgress(33);
|
||||
this.widget.setBuffer(87);
|
||||
});
|
||||
</script>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Radio Button</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>A radio button can either be a primary action or a secondary action.</p>
|
||||
|
||||
<section class="PreviewBlock">
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
|
||||
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked />
|
||||
<span class="mdl-radio__label">Always</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
|
||||
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2" />
|
||||
<span class="mdl-radio__label">Only when plugged in</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
|
||||
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3" />
|
||||
<span class="mdl-radio__label">Never</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
|
||||
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled />
|
||||
<span class="mdl-radio__label">Unavailable option</span>
|
||||
</label>
|
||||
</section>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Shadows</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
|
||||
<div class="demo-paper-card mdl-shadow--2dp"></div>
|
||||
|
||||
<div class="demo-paper-card mdl-shadow--3dp"></div>
|
||||
|
||||
<div class="demo-paper-card mdl-shadow--4dp"></div>
|
||||
|
||||
<div class="demo-paper-card mdl-shadow--6dp"></div>
|
||||
|
||||
<div class="demo-paper-card mdl-shadow--8dp"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Slider</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
<p>
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="0" tabindex="0"/>
|
||||
</p>
|
||||
<p>
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="10" tabindex="0"/>
|
||||
</p>
|
||||
<p>
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="0" tabindex="0" disabled/>
|
||||
</p>
|
||||
<p>
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="10" tabindex="0" disabled/>
|
||||
</p>
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Spinner</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
|
||||
<p>
|
||||
Default:
|
||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||
</p>
|
||||
<p>
|
||||
Single color (uses primary palette):
|
||||
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
body {
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
body > div {
|
||||
.demo-container {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0 40px 40px 0;
|
||||
border: 1px solid #888888;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.button-block {
|
||||
margin: 20px 20px 20px 0;
|
||||
iframe {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mdl-card {
|
||||
margin: 20px;
|
||||
.mdl-layout__content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Switch</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
|
||||
<input type="checkbox" id="switch-1" class="mdl-switch__input" />
|
||||
<span class="mdl-switch__label">Switch me</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
|
||||
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
|
||||
<span class="mdl-switch__label">Flip me left and right</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-4">
|
||||
<input type="checkbox" id="switch-4" class="mdl-switch__input" />
|
||||
<span class="mdl-switch__label">Me too</span>
|
||||
</label>
|
||||
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-5">
|
||||
<input type="checkbox" id="switch-5" class="mdl-switch__input" disabled />
|
||||
<span class="mdl-switch__label">Can't touch this</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Content Tabs</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
|
||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
||||
<div class="mdl-tabs__tab-bar">
|
||||
<a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
|
||||
<a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
|
||||
<a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
|
||||
</div>
|
||||
|
||||
<div class="mdl-tabs__panel is-active" id="starks-panel">
|
||||
<ul>
|
||||
<li>Eddard</li>
|
||||
<li>Catelyn</li>
|
||||
<li>Robb</li>
|
||||
<li>Sansa</li>
|
||||
<li>Brandon</li>
|
||||
<li>Arya</li>
|
||||
<li>Rickon</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mdl-tabs__panel" id="lannisters-panel">
|
||||
<ul>
|
||||
<li>Tywin</li>
|
||||
<li>Cersei</li>
|
||||
<li>Jamie</li>
|
||||
<li>Tyrion</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mdl-tabs__panel" id="targaryens-panel">
|
||||
<ul>
|
||||
<li>Viserys</li>
|
||||
<li>Daenerys</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>mdl-textfield</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
<form action="#">
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="sample1" />
|
||||
<label class="mdl-textfield__label" for="sample1">Type Something...</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sample2" />
|
||||
<label class="mdl-textfield__label" for="sample2">Numbers Only</label>
|
||||
<span class="mdl-textfield__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" disabled id="sample3" />
|
||||
<label class="mdl-textfield__label" for="sample3">I'm Disabled</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="sample4" />
|
||||
<label class="mdl-textfield__label" for="sample4">Text Input</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sample5" />
|
||||
<label class="mdl-textfield__label" for="sample5">Numbers Only</label>
|
||||
<span class="mdl-textfield__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows= "1" id="sample6" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample6">Type multiple lines here...</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="3" id="sample7" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample7">This input is 3 rows high</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" maxrows="3" rows="1" id="sample8" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample8">This input is at most 3 rows high</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="1" id="sample9" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample9">Multiple lines and a floating label</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expandable">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="sample-expandable" />
|
||||
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expandable-floating">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="sample-expandable-floating" />
|
||||
<label class="mdl-textfield__label" for="sample-expandable-floating">Expandable & Floating Input</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
|
||||
Right/No Label:
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Tooltip</title>
|
||||
|
||||
<link rel="stylesheet" href="../../css/material.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style>
|
||||
.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="preview-block">
|
||||
|
||||
<div id="el1" class="icon mdl-icon mdl-icon--note-add"></div>
|
||||
<div class="mdl-tooltip" for="el1">
|
||||
Simple tooltip
|
||||
</div>
|
||||
|
||||
<div id="el2" class="icon mdl-icon mdl-icon--mood"></div>
|
||||
<div class="mdl-tooltip" for="el2">
|
||||
This is a
|
||||
<strong>rich tooltip</strong>
|
||||
</div>
|
||||
|
||||
<div id="el3" class="icon mdl-icon mdl-icon--group"></div>
|
||||
<div class="mdl-tooltip" for="el3">
|
||||
This is an example of a long tooltip that wraps
|
||||
</div>
|
||||
|
||||
<div id="el4" class="icon mdl-icon mdl-icon--menu"></div>
|
||||
<div class="mdl-tooltip mdl-tooltip--large" for="el4">
|
||||
Element with a large tooltip
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../js/material.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue