google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make codepen opt-in instead of opt-out. 

This has for consequence to remove codepen from all the `<pre>` blocks that are generated from the components readme.md (Closes #563)
master
Nicolas Garnier 2015-07-01 00:26:34 +02:00 committed by Addy Osmani
parent d21217c65a
commit 6e2e1bcb46
3 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/_assets/main.css
View File

@ -645,7 +645,7 @@ body:not(.about) .mdl-navigation__link.download > button {
right: -125px;
width: 165px;
height: 46px;
display: inline-block;
display: none;
opacity: 0.6;
overflow: hidden;
box-sizing: border-box;
@ -664,23 +664,22 @@ body:not(.about) .mdl-navigation__link.download > button {
background-color: rgb(248,248,248);
border-bottom-left-radius: 10px;
}
.docs-layout .docs-text-styling pre[class*=language-markup] {
max-width: calc(100vw - 32px);
}
.docs-layout pre[class*=language-markup] {
padding-right: 0;
max-width: 100vw;
box-sizing: border-box;
overflow: hidden;
}
.docs-layout .docs-text-styling pre[class*=language-markup] {
max-width: calc(100vw - 32px);
.docs-layout pre[class*=language-markup].codepen-button-enabled {
padding-right: 0;
}
.docs-layout pre[class*=language-markup] code {
.docs-layout pre[class*=language-markup].codepen-button-enabled code {
padding-right: 50px;
}
.docs-layout pre[class*=language-markup].codepen-button-disabled code {
padding-right: 16px;
}
.codepen-button-disabled .codepen-button {
display: none;
.codepen-button-enabled .codepen-button {
display: inline-block;
}
/* Prism and code blocks styling and overrides */
.token.attr-name, .token.builtin, .token.selector, .token.string {

2
docs/_templates/snippets.html vendored
View File

@ -41,6 +41,6 @@
</div>
</div>
<div class="snippet-code">
<pre class="language-markup">{% for snippet in snippet_group %}{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}<code id="{{ component_name }}/{{ snippet.file }}">{% filter e('html') %}{% include snippet_file ignore missing %}{% endfilter %}</code>{%- endfor %}</pre>
<pre class="language-markup codepen-button-enabled">{% for snippet in snippet_group %}{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}<code id="{{ component_name }}/{{ snippet.file }}">{% filter e('html') %}{% include snippet_file ignore missing %}{% endfilter %}</code>{%- endfor %}</pre>
</div>
</div>

12
docs/_templates/started.html vendored
View File

@ -37,7 +37,7 @@
<div class="mdl-tabs__panel is-active" id="tab1">
<div class="code-with-text">
Just add the following <code>&lt;link&gt;</code> and <code>&lt;script&gt;</code> elements into your HTML pages:
<pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css"&gt;
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css"&gt;
&lt;script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div>
@ -59,7 +59,7 @@
</div>
<div class="code-with-text">
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> elements into your HTML pages and also include the Material Icon font:
<pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="./material.min.css"&gt;
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="./material.min.css"&gt;
&lt;script src="./material.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div>
@ -87,7 +87,7 @@ gulp</code></pre>
</p>
<div class="code-with-text">
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="./material.min.css"&gt;
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="./material.min.css"&gt;
&lt;script src="./material.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div>
@ -111,7 +111,7 @@ gulp</code></pre>
</p>
<div class="code-with-text">
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"&gt;
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"&gt;
&lt;script src="/node_modules/material-design-lite/material.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div>
@ -135,7 +135,7 @@ gulp</code></pre>
</p>
<div class="code-with-text">
Refer to these files by adding a <code>&lt;link&gt;</code> and a <code>&lt;script&gt;</code> element into your HTML pages and also include the Material Icon font:
<pre class="language-markup codepen-button-disabled"><code>&lt;link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"&gt;
<pre class="language-markup"><code>&lt;link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"&gt;
&lt;script src="/node_modules/material-design-lite/material.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"&gt;</code></pre>
</div>
@ -206,7 +206,7 @@ gulp</code></pre>
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load.
However in the case where you are creating DOM elements dynamically you need to register new elements using the <code>upgradeElement</code> function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
</p>
<pre class="language-markup"><code>&lt;div id="container"/&gt;
<pre class="language-markup codepen-button-enabled"><code>&lt;div id="container"/&gt;
&lt;script&gt;
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');