Merge remote-tracking branch 'origin/mdl-1.0'
Conflicts: gulpfile.babel.js package.json templates/article/index.html templates/blog/index.html templates/dashboard/index.html templates/text-only/index.htmlmaster
commit
0566f444a8
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "material-design-lite",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"homepage": "https://github.com/google/material-design-lite",
|
||||
"authors": [
|
||||
"Material Design Lite team"
|
||||
|
|
|
@ -9,13 +9,13 @@
|
|||
<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"/>
|
||||
<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"/>
|
||||
<feMergeNode />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
<meta name="theme-color" content="#263238">
|
||||
|
||||
<link rel="shortcut icon" href="{{page.include_prefix}}assets/favicon.png" />
|
||||
<link rel="shortcut icon" href="{{page.include_prefix}}assets/favicon.png">
|
||||
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
|
||||
<!--
|
||||
<link rel="canonical" href="http://www.example.com/">
|
||||
|
|
|
@ -37,6 +37,6 @@ body {
|
|||
background: #fafafa;
|
||||
position: relative;
|
||||
}
|
||||
</style></div>{% endif %}<form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
|
||||
</style></div>{% endif %}<form class="codepen-button" action="http://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -219,7 +219,7 @@ gulp</code></pre>
|
|||
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
|
||||
componentHandler.upgradeElement(button);
|
||||
document.getElementById('container').appendChild(button);
|
||||
</script></code><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
|
||||
</script></code><form class="codepen-button" action="http://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "material-design-lite",
|
||||
"version": "1.0.4",
|
||||
"description": "Material Design components in CSS, JS and HTML",
|
||||
"version": "1.0.5",
|
||||
"description": "Material Design Components in CSS, JS and HTML",
|
||||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
"author": "Google",
|
||||
|
|
|
@ -29,8 +29,8 @@ That's it! You are now ready to use the MDL components.
|
|||
### Use the components
|
||||
In general, follow these basic steps to use an MDL component in your HTML page.
|
||||
|
||||
1. Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.<br/><br/>
|
||||
2. Add one or more MDL-specific CSS classes to the element, such as `mdl-button` or `mdl-tabs__panel` again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br/><br/>
|
||||
1. Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.<br><br>
|
||||
2. Add one or more MDL-specific CSS classes to the element, such as `mdl-button` or `mdl-tabs__panel` again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br><br>
|
||||
3. View the page, preferably in multiple browsers on multiple devices, to ensure that the component looks and behaves as expected.
|
||||
|
||||
>**A note about HTML elements and MDL CSS classes**
|
||||
|
|
|
@ -77,7 +77,7 @@ A card (no shadow) with a title, image, text, and action.
|
|||
```html
|
||||
<div class="mdl-card">
|
||||
<div class="mdl-card__title">
|
||||
<h2 class="mdl-card__title-text">Auckland Sky Tower<br/>Auckland, New Zealand</h2>
|
||||
<h2 class="mdl-card__title-text">Auckland Sky Tower<br>Auckland, New Zealand</h2>
|
||||
</div>
|
||||
<div class="mdl-card__media">
|
||||
<img src="skytower.jpg" width="173" height="157" border="0" alt=""
|
||||
|
|
|
@ -19,20 +19,20 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"checkbox"`. Also give it an `id` attribute whose value matches the label's `for` attribute value.
|
||||
```html
|
||||
<label for="chkbox1">
|
||||
<input type="checkbox" id="chkbox1" />
|
||||
<input type="checkbox" id="chkbox1">
|
||||
</label>
|
||||
```
|
||||
3. Also inside the label, after the checkbox, code a `<span>` element containing the checkbox's text caption.
|
||||
```html
|
||||
<label for="chkbox1">
|
||||
<input type="checkbox" id="chkbox1" />
|
||||
<input type="checkbox" id="chkbox1">
|
||||
<span>Enable AutoSave</span>
|
||||
</label>
|
||||
```
|
||||
4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the `class` attribute.
|
||||
```html
|
||||
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox">
|
||||
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
|
||||
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
|
||||
<span class="mdl-checkbox__label">Enable AutoSave</span>
|
||||
</label>
|
||||
```
|
||||
|
@ -45,7 +45,7 @@ A checkbox with a ripple click effect.
|
|||
|
||||
```html
|
||||
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
|
||||
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
|
||||
<span class="mdl-checkbox__label">Enable AutoSave</span>
|
||||
</label>
|
||||
```
|
||||
|
@ -61,5 +61,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
|||
| `mdl-checkbox__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (checkbox) |
|
||||
|
||||
>**Note:** Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled />`
|
||||
>**Note:** Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
|
||||
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
|
||||
<span class="mdl-checkbox__label">Checkbox</span>
|
||||
</label>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
|
||||
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
|
||||
<span class="mdl-checkbox__label">Checkbox</span>
|
||||
</label>
|
||||
|
|
|
@ -19,20 +19,20 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"checkbox"`. Also give it an `id` attribute whose value matches the label's `for` attribute value.
|
||||
```html
|
||||
<label for="icon-toggle-1">
|
||||
<input type="checkbox" id="icon-toggle-1" />
|
||||
<input type="checkbox" id="icon-toggle-1">
|
||||
</label>
|
||||
```
|
||||
3. Also inside the label, after the input element, code an `<i>` element containing the icon-toggle's desired icon.
|
||||
```html
|
||||
<label for="icon-toggle-1">
|
||||
<input type="checkbox" id="icon-toggle-1" />
|
||||
<input type="checkbox" id="icon-toggle-1">
|
||||
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
|
||||
</label>
|
||||
```
|
||||
4. Add one or more MDL classes, separated by spaces, to the label and input elements, using the `class` attribute.
|
||||
```html
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
|
||||
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" />
|
||||
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
|
||||
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
|
||||
</label>
|
||||
```
|
||||
|
@ -45,7 +45,7 @@ An icon-toggle with a ripple click effect.
|
|||
|
||||
```html
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
|
||||
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" />
|
||||
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
|
||||
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
|
||||
</label>
|
||||
```
|
||||
|
@ -61,5 +61,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
|||
| `mdl-icon-toggle__label` | Applies basic MDL behavior to caption | Required on i element (icon) |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (icon-toggle) |
|
||||
|
||||
>**Note:** Disabled versions of all available input types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled />`
|
||||
>**Note:** Disabled versions of all available input types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
|
||||
<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input" />
|
||||
<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
|
||||
<i class="mdl-icon-toggle__label material-icons">format_italic</i>
|
||||
</label>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
|
||||
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked />
|
||||
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
|
||||
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
|
||||
</label>
|
||||
|
|
|
@ -254,7 +254,7 @@
|
|||
min-height: $layout-mobile-header-height;
|
||||
}
|
||||
|
||||
.mdl-layout--fixed-drawer:not(.is-small-screen) > & {
|
||||
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
|
||||
margin-left: $layout-drawer-width;
|
||||
width: calc(100% - #{$layout-drawer-width});
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample"
|
||||
id="fixed-header-drawer-exp" />
|
||||
id="fixed-header-drawer-exp">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample"
|
||||
id="waterfall-exp" />
|
||||
id="waterfall-exp">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -19,20 +19,20 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"radio"`. Also give it an `id` attribute whose value matches the label's `for` attribute value, and a `name` attribute whose value identifies the radio button group. Optionally, give it a `value` attribute whose value provides some information about the radio button for scripting purposes.
|
||||
```html
|
||||
<label for="radio1">
|
||||
<input type="radio" id="radio1" name="flash" value="on" />
|
||||
<input type="radio" id="radio1" name="flash" value="on">
|
||||
</label>
|
||||
```
|
||||
3. Also inside the label, after the radio button, code a `<span>` element containing the radio button's text caption.
|
||||
```html
|
||||
<label for="radio1">
|
||||
<input type="radio" id="radio1" name="flash" value="on" />
|
||||
<input type="radio" id="radio1" name="flash" value="on">
|
||||
<span>Always on</span>
|
||||
</label>
|
||||
```
|
||||
4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the `class` attribute.
|
||||
```html
|
||||
<label for="radio1" class="mdl-radio mdl-js-radio">
|
||||
<input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button" />
|
||||
<input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button">
|
||||
<span class="mdl-radio__label">Always on</span>
|
||||
</label>
|
||||
```
|
||||
|
@ -72,5 +72,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
|||
| `mdl-radio__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (radio button) |
|
||||
|
||||
>**Note:** Disabled versions of all the available radio button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled />`
|
||||
>**Note:** Disabled versions of all the available radio button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
|
||||
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2" />
|
||||
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
|
||||
<span class="mdl-radio__label">Second</span>
|
||||
</label>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
|
||||
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked />
|
||||
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
|
||||
<span class="mdl-radio__label">First</span>
|
||||
</label>
|
||||
|
|
|
@ -21,13 +21,13 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
2. Inside the paragraph container, code an `<input>` element and give it a `type` attribute whose value is `"range"`. Also give it an `id` attribute to make it available for scripting, and `min` and `max` attributes whose values specify the slider's range. Give it a `value` attribute whose value sets the initial thumb position (optional; if omitted, defaults to 50% of the maximum), and a `step` attribute whose value specifies the increment by which the thumb moves (also optional; if omitted, defaults to 1). Finally, give it an event handler to be executed when the user changes the slider's value.
|
||||
```html
|
||||
<p style="width:300px">
|
||||
<input type="range" id="s1" min="0" max="10" value="4" step="2" />
|
||||
<input type="range" id="s1" min="0" max="10" value="4" step="2">
|
||||
</p>
|
||||
```
|
||||
3. Add one or more MDL classes, separated by spaces, to the slider using the `class` attribute.
|
||||
```html
|
||||
<p style="width:300px">
|
||||
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" />
|
||||
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
|
||||
</p>
|
||||
```
|
||||
|
||||
|
@ -37,7 +37,7 @@ The slider component is ready for use.
|
|||
A slider that controls volume.
|
||||
```html
|
||||
<p style="width:300px">
|
||||
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" />
|
||||
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
|
||||
</p>
|
||||
```
|
||||
|
||||
|
@ -49,7 +49,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
|||
| `mdl-slider` | Defines input element as an MDL component | Required |
|
||||
| `mdl-js-slider` | Assigns basic MDL behavior to input element | Required |
|
||||
|
||||
>**Note:** A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled />`
|
||||
>**Note:** A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
>**Note:** Although the *value* attribute is used to set a slider's initial value, it should not be used
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<div class="demo-preview-block">
|
||||
<p>
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="0" tabindex="0"/>
|
||||
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"/>
|
||||
min="0" max="100" value="10" tabindex="0">
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<!-- Default Slider -->
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="0" tabindex="0"/>
|
||||
min="0" max="100" value="0" tabindex="0">
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<!-- Slider with Starting Value -->
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="25" tabindex="0"/>
|
||||
min="0" max="100" value="25" tabindex="0">
|
||||
|
|
|
@ -19,20 +19,20 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"checkbox"`. Also give it an `id` attribute whose value matches the label's `for` attribute value.
|
||||
```html
|
||||
<label for="switch1">
|
||||
<input type="checkbox" id="switch1" />
|
||||
<input type="checkbox" id="switch1">
|
||||
</label>
|
||||
```
|
||||
3. Also inside the label, after the checkbox, code a `<span>` element containing the switch's text caption.
|
||||
```html
|
||||
<label for="switch1">
|
||||
<input type="checkbox" id="switch1" />
|
||||
<input type="checkbox" id="switch1">
|
||||
<span>Sound off/on</span>
|
||||
</label>
|
||||
```
|
||||
4. Add one or more MDL classes, separated by spaces, to the label, switch, and caption using the `class` attribute.
|
||||
```html
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch">
|
||||
<input type="checkbox" id="switch1" class="mdl-switch__input" />
|
||||
<input type="checkbox" id="switch1" class="mdl-switch__input">
|
||||
<span class="mdl-switch__label">Sound off/on</span>
|
||||
</label>
|
||||
```
|
||||
|
@ -45,7 +45,7 @@ A switch with a ripple click effect.
|
|||
|
||||
```html
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1" class="mdl-switch__input" />
|
||||
<input type="checkbox" id="switch1" class="mdl-switch__input">
|
||||
<span class="mdl-switch__label">Sound off/on</span>
|
||||
</label>
|
||||
```
|
||||
|
@ -61,5 +61,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
|||
| `mdl-switch__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (switch) |
|
||||
|
||||
>**Note:** Disabled versions of all available switch types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="switch5" class="mdl-switch__input" disabled />`
|
||||
>**Note:** Disabled versions of all available switch types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="switch5" class="mdl-switch__input" disabled>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
|
||||
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
|
||||
<input type="checkbox" id="switch-2" class="mdl-switch__input">
|
||||
<span class="mdl-switch__label"></span>
|
||||
</label>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
|
||||
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
|
||||
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
|
||||
<span class="mdl-switch__label"></span>
|
||||
</label>
|
||||
|
|
|
@ -21,20 +21,20 @@ There are three main types of text fields in the text field component, each with
|
|||
2. Inside the div, code an `<input>` element with a `type` attribute of `"text"` (the text field), and an `id` attribute of your choice.
|
||||
```html
|
||||
<div>
|
||||
<input type="text" id="user" />
|
||||
<input type="text" id="user">
|
||||
</div>
|
||||
```
|
||||
3. Also inside the div, after the text field, code a `<label>` element with a `for` attribute whose value matches the `input` element's `id` value, and a short string to be used as the field's placeholder text.
|
||||
```html
|
||||
<div>
|
||||
<input type="text" id="user" />
|
||||
<input type="text" id="user">
|
||||
<label for="user">User name</label>
|
||||
</div>
|
||||
```
|
||||
4. Optionally, add a `pattern` attribute and value to the `<input>` element (see the [W3C HTML5 forms specification](http://www.w3.org/TR/html5/forms.html#the-pattern-attribute) for details) and an associated error message in a `<span>` element following the `<label>`.
|
||||
```html
|
||||
<div>
|
||||
<input type="text" id="user" pattern="[A-Z,a-z, ]*" />
|
||||
<input type="text" id="user" pattern="[A-Z,a-z, ]*">
|
||||
<label for="user">User name</label>
|
||||
<span>Letters and spaces only</span>
|
||||
</div>
|
||||
|
@ -42,7 +42,7 @@ There are three main types of text fields in the text field component, each with
|
|||
5. Add one or more MDL classes, separated by spaces, to the div container, text field, field label, and error message using the `class` attribute.
|
||||
```html
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*" />
|
||||
<input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
|
||||
<label class="mdl-textfield__label" for="user">User name</label>
|
||||
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||
</div>
|
||||
|
@ -54,7 +54,7 @@ The single-line text field component is ready for use.
|
|||
Single-line text field with a standard label.
|
||||
```html
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="fname" />
|
||||
<input class="mdl-textfield__input" type="text" id="fname">
|
||||
<label class="mdl-textfield__label" for="fname">First name</label>
|
||||
</div>
|
||||
```
|
||||
|
@ -62,7 +62,7 @@ Single-line text field with a standard label.
|
|||
Single-line text field with a floating label.
|
||||
```html
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="addr1" />
|
||||
<input class="mdl-textfield__input" type="text" id="addr1">
|
||||
<label class="mdl-textfield__label" for="addr1">Address line 1</label>
|
||||
</div>
|
||||
```
|
||||
|
@ -70,7 +70,7 @@ Single-line text field with a floating label.
|
|||
Single-line text field with a standard label, pattern matching, and error message.
|
||||
```html
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone" />
|
||||
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
|
||||
<label class="mdl-textfield__label" for="phone">Phone</label>
|
||||
<span class="mdl-textfield__error">Digits only</span>
|
||||
</div>
|
||||
|
@ -176,7 +176,7 @@ Multi-line text field with multiple visible input lines and a maximum number of
|
|||
<span></span>
|
||||
</label>
|
||||
<div>
|
||||
<input type="text" id="expando1" />
|
||||
<input type="text" id="expando1">
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
@ -187,7 +187,7 @@ Multi-line text field with multiple visible input lines and a maximum number of
|
|||
<span></span>
|
||||
</label>
|
||||
<div>
|
||||
<input type="text" id="expando1" />
|
||||
<input type="text" id="expando1">
|
||||
<label for="expando1">Expandable text field</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -199,7 +199,7 @@ Multi-line text field with multiple visible input lines and a maximum number of
|
|||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="expando1" />
|
||||
<input class="mdl-textfield__input" type="text" id="expando1">
|
||||
<label class="mdl-textfield__label" for="expando1">Expandable text field</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -216,7 +216,7 @@ Expandable text field with a standard label.
|
|||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search-expandable" />
|
||||
<input class="mdl-textfield__input" type="text" id="search-expandable">
|
||||
<label class="mdl-textfield__label" for="search-expandable">Search text</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -230,7 +230,7 @@ Expandable text field with a floating label.
|
|||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search-expandable2" />
|
||||
<input class="mdl-textfield__input" type="text" id="search-expandable2">
|
||||
<label class="mdl-textfield__label" for="search-expandable2">
|
||||
Enter search text below
|
||||
</label>
|
||||
|
@ -256,5 +256,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
|||
|
||||
(1) The "search" icon is used here as an example. Other icons can be used by modifying the text. For a list of available icons, see [this page](https://www.google.com/design/icons).
|
||||
|
||||
>**Note:** Disabled versions of each text field type are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-textfield mdl-js-textfield" type="text" disabled />`
|
||||
>**Note:** Disabled versions of each text field type are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-textfield mdl-js-textfield" type="text" disabled>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="sample6" />
|
||||
<input class="mdl-textfield__input" type="text" id="sample6">
|
||||
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<!-- Numeric Textfield with Floating Label -->
|
||||
<form action="#">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4" />
|
||||
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
|
||||
<label class="mdl-textfield__label" for="sample4">Number...</label>
|
||||
<span class="mdl-textfield__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<form action="#">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="sample3" />
|
||||
<input class="mdl-textfield__input" type="text" id="sample3">
|
||||
<label class="mdl-textfield__label" for="sample3">Text...</label>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<!-- Numeric Textfield -->
|
||||
<form action="#">
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2" />
|
||||
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
|
||||
<label class="mdl-textfield__label" for="sample2">Number...</label>
|
||||
<span class="mdl-textfield__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<!-- Simple Textfield -->
|
||||
<form action="#">
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="sample1" />
|
||||
<input class="mdl-textfield__input" type="text" id="sample1">
|
||||
<label class="mdl-textfield__label" for="sample1">Text...</label>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
@ -142,11 +142,13 @@
|
|||
* @public
|
||||
*/
|
||||
MaterialTextfield.prototype.checkValidity = function() {
|
||||
if (this.input_.validity) {
|
||||
if (this.input_.validity.valid) {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_INVALID);
|
||||
} else {
|
||||
this.element_.classList.add(this.CssClasses_.IS_INVALID);
|
||||
}
|
||||
}
|
||||
};
|
||||
MaterialTextfield.prototype['checkValidity'] =
|
||||
MaterialTextfield.prototype.checkValidity;
|
||||
|
@ -198,6 +200,8 @@
|
|||
|
||||
if (value) {
|
||||
this.input_.value = value;
|
||||
} else {
|
||||
this.input_.value = '';
|
||||
}
|
||||
this.updateClasses_();
|
||||
};
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search-field" />
|
||||
<input class="mdl-textfield__input" type="text" id="search-field">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation -->
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#3372DF">
|
||||
|
||||
<link rel="shortcut icon" href="images/favicon.png" />
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
|
||||
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
|
||||
<!--
|
||||
|
@ -71,7 +71,7 @@
|
|||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<input class="mdl-textfield__input" type="text" id="search">
|
||||
<label class="mdl-textfield__label" for="search">Enter your query...</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
After Width: | Height: | Size: 257 KiB |
Binary file not shown.
After Width: | Height: | Size: 503 KiB |
|
@ -37,7 +37,7 @@
|
|||
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#3372DF">
|
||||
|
||||
<link rel="shortcut icon" href="images/favicon.png" />
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
|
||||
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
|
||||
<!--
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
body::before {
|
||||
background-image: url('images/bg.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
content: '';
|
||||
|
@ -11,7 +10,24 @@ body::before {
|
|||
top: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@media (max-width: 512px) and (min-resolution: 1.5dppx),
|
||||
(max-width: 1024px) and (max-resolution: 1.5dppx) {
|
||||
body::before {
|
||||
background-image: url('images/bg_1024.jpg');
|
||||
}
|
||||
}
|
||||
@media (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx),
|
||||
(min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {
|
||||
body::before {
|
||||
background-image: url('images/bg_2048.jpg');
|
||||
}
|
||||
}
|
||||
@media (min-width: 1025px) and (min-resolution: 1.5dppx),
|
||||
(min-width: 2049px) and (max-resolution: 1.5dppx) {
|
||||
body::before {
|
||||
background-image: url('images/bg_2880.jpg');
|
||||
}
|
||||
}
|
||||
body .demo-blog {
|
||||
font-family: 'Roboto', 'Helvetica', sans-serif;
|
||||
}
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#3372DF">
|
||||
|
||||
<link rel="shortcut icon" href="images/favicon.png" />
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
|
||||
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
|
||||
<!--
|
||||
|
@ -71,7 +71,7 @@
|
|||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<input class="mdl-textfield__input" type="text" id="search">
|
||||
<label class="mdl-textfield__label" for="search">Enter your query...</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -120,28 +120,28 @@
|
|||
<div class="mdl-grid demo-content">
|
||||
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)" />
|
||||
<use xlink:href="#piechart" mask="url(#piemask)">
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan font-size="0.2" dy="-0.07">%</tspan></text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)" />
|
||||
<use xlink:href="#piechart" mask="url(#piemask)">
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)" />
|
||||
<use xlink:href="#piechart" mask="url(#piemask)">
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)" />
|
||||
<use xlink:href="#piechart" mask="url(#piemask)">
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
|
||||
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
|
||||
<use xlink:href="#chart"/>
|
||||
<use xlink:href="#chart">
|
||||
</svg>
|
||||
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
|
||||
<use xlink:href="#chart"/>
|
||||
<use xlink:href="#chart">
|
||||
</svg>
|
||||
</div>
|
||||
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
|
||||
|
@ -163,25 +163,25 @@
|
|||
<ul>
|
||||
<li>
|
||||
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
|
||||
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
|
||||
<span class="mdl-checkbox__label">Click per object</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="chkbox2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="chkbox2" class="mdl-checkbox__input" />
|
||||
<input type="checkbox" id="chkbox2" class="mdl-checkbox__input">
|
||||
<span class="mdl-checkbox__label">Views per object</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="chkbox3" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="chkbox3" class="mdl-checkbox__input" />
|
||||
<input type="checkbox" id="chkbox3" class="mdl-checkbox__input">
|
||||
<span class="mdl-checkbox__label">Objects selected</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="chkbox4" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="chkbox4" class="mdl-checkbox__input" />
|
||||
<input type="checkbox" id="chkbox4" class="mdl-checkbox__input">
|
||||
<span class="mdl-checkbox__label">Objects viewed</span>
|
||||
</label>
|
||||
</li>
|
||||
|
@ -200,12 +200,12 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
|
||||
<defs>
|
||||
<mask id="piemask" maskContentUnits="objectBoundingBox">
|
||||
<circle cx=0.5 cy=0.5 r=0.49 fill="white" />
|
||||
<circle cx=0.5 cy=0.5 r=0.40 fill="black" />
|
||||
<circle cx=0.5 cy=0.5 r=0.49 fill="white">
|
||||
<circle cx=0.5 cy=0.5 r=0.40 fill="black">
|
||||
</mask>
|
||||
<g id="piechart">
|
||||
<circle cx=0.5 cy=0.5 r=0.5 />
|
||||
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)" />
|
||||
<circle cx=0.5 cy=0.5 r=0.5>
|
||||
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)">
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
|
@ -213,11 +213,11 @@
|
|||
<defs>
|
||||
<g id="chart">
|
||||
<g id="Gridlines">
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3">
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7">
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3">
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7">
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3">
|
||||
</g>
|
||||
<g id="Numbers">
|
||||
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
|
||||
|
@ -235,11 +235,11 @@
|
|||
</g>
|
||||
<g id="Layer_5">
|
||||
<polygon opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5
|
||||
294.5,80.5 380,165.2 437,75.5 469.5,223.3 "/>
|
||||
294.5,80.5 380,165.2 437,75.5 469.5,223.3 ">
|
||||
</g>
|
||||
<g id="Layer_4">
|
||||
<polygon stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
|
||||
296.7,128 380.7,184.3 436.7,125 "/>
|
||||
296.7,128 380.7,184.3 436.7,125 ">
|
||||
</g>
|
||||
</g>
|
||||
</defs>
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#3372DF">
|
||||
|
||||
<link rel="shortcut icon" href="images/favicon.png" />
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
|
||||
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
|
||||
<!--
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mocha Test Runner</title>
|
||||
<link rel="stylesheet" href="../node_modules/mocha/mocha.css">
|
||||
<link rel="stylesheet" href="../dist/material.css"/>
|
||||
<link rel="stylesheet" href="../dist/material.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
|
|
Loading…
Reference in New Issue