mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Alexander Surma
Addy Osmani
parent
735bbb1836
commit
4a8ededd30
@ -1,9 +1,13 @@
|
||||
body {
|
||||
overflow: scroll !important;
|
||||
}
|
||||
#wheel {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.is-small-screen .mdl-gen #wheel {
|
||||
min-height: 100vw;
|
||||
}
|
||||
#wheel svg {
|
||||
width: 100%;
|
||||
@ -101,6 +105,10 @@ body {
|
||||
.mdl-gen__cdn {
|
||||
padding: 0 32px;
|
||||
}
|
||||
.mdl-gen__cdn .demo-code {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mdl-gen__cdn .demo-code code {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -31,23 +31,6 @@
|
||||
leftScroll.addEventListener('tap', scrollMenuBar.bind(null, -delta));
|
||||
})();
|
||||
|
||||
// customizer iframe sizing
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var iframe = document.querySelector('iframe.docs-customizer');
|
||||
if (!iframe) {
|
||||
return;
|
||||
}
|
||||
function updateIframe() {
|
||||
var height = Math.min(iframe.contentWindow.document.body.getClientRects()[0].height,
|
||||
iframe.contentWindow.document.body.scrollHeight);
|
||||
iframe.style.height = height + 'px';
|
||||
}
|
||||
window.addEventListener('resize', updateIframe);
|
||||
iframe.addEventListener('load', updateIframe);
|
||||
})();
|
||||
|
||||
// WIP banner
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
@ -4,4 +4,3 @@ title: Customize & Download
|
||||
bodyclass: customize
|
||||
include_prefix: ../
|
||||
---
|
||||
<iframe src="../embedded_customizer/index.html" class="docs-customizer"></iframe>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
layout: embedded_customizer
|
||||
title: Customizer
|
||||
include_prefix: ../
|
||||
---
|
||||
75
docs/_templates/customize.html
vendored
75
docs/_templates/customize.html
vendored
@ -1,7 +1,76 @@
|
||||
{% extends 'layout.html' %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{{content|safe}}
|
||||
|
||||
<link rel="stylesheet" href="{{page.include_prefix}}assets/customizer.css">
|
||||
<div class="mdl-gen mdl-cell mdl-cell--12-col">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-gen__panel mdl-gen__panel--left mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
|
||||
<div id="wheel">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter id="drop-shadow">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3.2"/>
|
||||
<feOffset dx="0" dy="0" result="offsetblur"/>
|
||||
<feFlood flood-color="rgba(0,0,0,1)"/>
|
||||
<feComposite in2="offsetblur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g class="wheel--maing"></g>
|
||||
</svg>
|
||||
<div class="mdl-gen-download">
|
||||
<a href="#" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--fab"><i class="material-icons">file_download</i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-gen__panel--right mdl-gen__panel mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
|
||||
<div class="mdl-gen__desc">
|
||||
<strong>Custom CSS theme builder</strong>
|
||||
<p>Click on the color wheel to choose a primary (1) and accent (2) color to preview the theme below. When you’ve selected a color combination you like, either reference our hosted CSS (see below) or download the CSS by clicking the white button in the middle.</p>
|
||||
</div>
|
||||
<div class="mdl-gen__preview">
|
||||
<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>
|
||||
</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-layout__content">
|
||||
<h3>Try it out</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<button class="mdl-button mdl-button--colored mdl-button--raised">BUTTON</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
|
||||
<i class="material-icons">email</i>
|
||||
</button>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-gen__cdn mdl-cell mdl-cell--12-col">
|
||||
<pre class="demo-code language-markup"><code class="language-markup" data-language="markup"> <link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /> </code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{page.include_prefix}}assets/customizer.js"></script>
|
||||
<script>init();</script>
|
||||
{% endblock %}
|
||||
|
||||
90
docs/_templates/embedded_customizer.html
vendored
90
docs/_templates/embedded_customizer.html
vendored
@ -1,90 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<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">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
|
||||
</head>
|
||||
<body class="mdl-gen" onload="init();">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-gen__panel mdl-gen__panel--left mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
|
||||
<div id="wheel">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter id="drop-shadow">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3.2"/>
|
||||
<feOffset dx="0" dy="0" result="offsetblur"/>
|
||||
<feFlood flood-color="rgba(0,0,0,1)"/>
|
||||
<feComposite in2="offsetblur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g class="wheel--maing"></g>
|
||||
</svg>
|
||||
<div class="mdl-gen-download">
|
||||
<a href="#" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--fab"><i class="material-icons">file_download</i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-gen__panel--right mdl-gen__panel mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
|
||||
<div class="mdl-gen__desc">
|
||||
<strong>Custom CSS theme builder</strong>
|
||||
<p>Click on the color wheel to choose a primary (1) and accent (2) color to preview the theme below. When you’ve selected a color combination you like, either reference our hosted CSS (see below) or download the CSS by clicking the white button in the middle.</p>
|
||||
</div>
|
||||
<div class="mdl-gen__preview">
|
||||
<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>
|
||||
</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-layout__content">
|
||||
<h3>Try it out</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<button class="mdl-button mdl-button--colored mdl-button--raised">BUTTON</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
|
||||
<i class="material-icons">email</i>
|
||||
</button>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-gen__cdn mdl-cell mdl-cell--12-col">
|
||||
<pre class="demo-code language-markup"><code class="language-markup" data-language="markup"> <link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /> </code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{page.include_prefix}}assets/customizer.js"></script>
|
||||
<script src="{{page.include_prefix}}material.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user