9f61b972eb
- Removed all icon font files - Removed icon font tasks and dependencies in the gulpfile - Updated all sources, demos and templates to the official font
118 lines
6.5 KiB
HTML
118 lines
6.5 KiB
HTML
<!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>Material Design Lite customizer</title>
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel='stylesheet'>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="{{page.include_prefix}}/material.min.css" id="main-stylesheet">
|
|
<link rel="stylesheet" href="{{page.include_prefix}}/assets/customizer.css">
|
|
<script src="{{page.include_prefix}}/assets/customizer.js"></script>
|
|
</head>
|
|
<body class="mdl-gen mdl-color--grey-200" onload="init();" id="mdl-gen-body">
|
|
<div class="mdl-gen-color-row">
|
|
<div class="mdl-gen-color mdl-color--red mdl-gen--light-text" index="0">Red</div>
|
|
<div class="mdl-gen-color mdl-color--pink mdl-gen--light-text is-accent" index="1">Pink</div>
|
|
<div class="mdl-gen-color mdl-color--purple mdl-gen--light-text" index="2">Purple</div>
|
|
<div class="mdl-gen-color mdl-color--deep-purple mdl-gen--light-text" index="3">Deep Purple</div>
|
|
<div class="mdl-gen-color mdl-color--indigo mdl-gen--light-text is-primary" index="4">Indigo</div>
|
|
</div>
|
|
<div class="mdl-gen-color-row">
|
|
<div class="mdl-gen-color mdl-color--blue mdl-gen--light-text" index="5">Blue</div>
|
|
<div class="mdl-gen-color mdl-color--light-blue mdl-gen--dark-text" index="6">Light Blue</div>
|
|
<div class="mdl-gen-color mdl-color--cyan mdl-gen--dark-text" index="7">Cyan</div>
|
|
<div class="mdl-gen-color mdl-color--teal mdl-gen--light-text" index="8">Teal</div>
|
|
<div class="mdl-gen-color mdl-color--green mdl-gen--dark-text" index="9">Green</div>
|
|
</div>
|
|
<div class="mdl-gen-preview mdl-shadow--3dp">
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
<header class="mdl-layout__header">
|
|
<svg class="mdl-layout-icon" width="411px" height="406px" viewBox="0 0 411 406" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g transform="translate(-51.000000, -54.000000)" fill="currentColor">
|
|
<path d="M253.532807,381.627 L205.905373,459.1512 L75.2987939,365.2047 L137.208794,290.0547 L51,265.8834 L100.217083,116.7498 L183.176447,150.0543 L176.402456,54 L337.901996,54 L331.203531,149.0202 L409.306732,116.4465 L461.243662,265.7448 L371.760263,290.7036 L429.826513,365.6628 L302.333596,459.2493 L253.532807,381.627 Z M222.176831,106.2 L291.098533,106.2 L282.729084,224.796484 L383.182429,182.939488 L404.947387,245.446521 L297.795289,275.304737 L368.114228,365.995226 L313.701833,405.9 L252.592681,308.789934 L192.876775,405.9 L137.348587,365.995226 L212.130699,275.304737 L105.539492,245.446521 L126.18666,182.939488 L230.548276,224.796484 L222.176831,106.2 Z"></path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<div class="mdl-layout__header-row">
|
|
<span class="mdl-layout-title">Theme Preview</span>
|
|
<div class="mdl-layout-spacer"></div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
|
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
|
<i class="material-icons">search</i>
|
|
</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">Theme Preview</span>
|
|
<nav class="mdl-navigation">
|
|
<a class="mdl-navigation__link" href="#">Some</a>
|
|
<a class="mdl-navigation__link" href="#">Links</a>
|
|
<a class="mdl-navigation__link" href="#">Here</a>
|
|
</nav>
|
|
</div>
|
|
<main class="mdl-gen-preview__content mdl-layout__content">
|
|
<p>
|
|
<div class="mdl-gen-textinput">
|
|
<div class="mdl-gen-textinput__input">
|
|
<div class="mdl-textfield mdl-textfield--full-width mdl-js-textfield">
|
|
<input class="mdl-textfield__input" type="text" id="sample1" />
|
|
<label class="mdl-textfield__label" for="sample1">Type Something...</label>
|
|
</div>
|
|
</div>
|
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Button</button>
|
|
</div>
|
|
</p>
|
|
<br>
|
|
<p>
|
|
<input class="mdl-slider mdl-js-slider" type="range"
|
|
min="0" max="100" value="50" tabindex="0"/>
|
|
</p>
|
|
<br>
|
|
<p>
|
|
<button class="mdl-gen-fab mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
|
|
<i class="material-icons">add</i>
|
|
</button>
|
|
</p>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<div class="mdl-gen-color-row">
|
|
<div class="mdl-gen-color mdl-color--light-green mdl-gen--dark-text" index="10">Light Green</div>
|
|
<div class="mdl-gen-color mdl-color--lime mdl-gen--dark-text" index="11">Lime</div>
|
|
<div class="mdl-gen-color mdl-color--yellow mdl-gen--dark-text" index="12">Yellow</div>
|
|
<div class="mdl-gen-color mdl-color--amber mdl-gen--dark-text" index="13">Amber</div>
|
|
<div class="mdl-gen-color mdl-color--orange mdl-gen--dark-text" index="14">Orange</div>
|
|
</div>
|
|
<div class="mdl-gen-color-row">
|
|
<div class="mdl-gen-color mdl-color--deep-orange mdl-gen--light-text" index="15">Deep Orange</div>
|
|
<div class="mdl-gen-color mdl-gen-color--muted mdl-color--brown mdl-gen--light-text" index="16">Brown</div>
|
|
<div class="mdl-gen-nocolor"></div>
|
|
<div class="mdl-gen-color mdl-gen-color--muted mdl-color--grey mdl-gen--dark-text" index="17">Grey</div>
|
|
<div class="mdl-gen-color mdl-gen-color--muted mdl-color--blue-grey mdl-gen--light-text" index="18">Blue Grey</div>
|
|
</div>
|
|
|
|
<div class="mdl-gen-download">
|
|
<a href="" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Download CSS</a>
|
|
</div>
|
|
<div id="warning">
|
|
<div class="mdl-tooltip mdl-tooltip--large" for="download">
|
|
Due to browser issues, clicking this may open a page that you will need to manually save.
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{page.include_prefix}}/material.min.js"></script>
|
|
</body>
|
|
</html>
|