`, `
`, or ``, and style it as desired; this will be the tooltip's target. Include an `id` attribute and unique value to link the container to its tooltip.\n```html\nHTML
\n```\n 2. Following the target element, code a second element, such as a ``, `
`, or ``; this will be the tooltip itself. Include a `for` (or `data-mdl-for`) attribute whose value matches that of the target's `id`.\n```html\nHTML
\nHyperText Markup Language\n```\n 3. Add one or more MDL classes, separated by spaces, to the tooltip element using the `class` attribute.\n```html\nHTML
\nHyperText Markup Language\n```\n\nThe tooltip component is ready for use.\n\n#### Examples\n\nA target with a simple text tooltip.\n```html\nHTML is related to but different from XML.
\neXtensible Markup Language\n```\n\nA target with \"rich\" (containing HTML markup) tooltip text.\n```html\nHTML is related to but different from XML.
\neXtensible Markup Language\n```\n\nA target with a long text tooltip that automatically wraps.\n```html\nHTML is related to but different from XML.
\nXML is an acronym for eXtensible Markup Language\n```\n\nA target with tooltip text in a larger font size.\n```html\nHTML is related to but different from XML.
\neXtensible Markup Language\n```\n\nA target with a tooltip containing both an image and text.\n```html\nHTML is related to but different from XML.
\n\n![](\"xml-logo-small.png\")
eXtensible Markup Language\n```\n\n## Configuration options\n\nThe MDL CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects.\n\n| MDL class | Effect | Remarks |\n|-----------|--------|---------|\n| `mdl-tooltip` | Defines a container as an MDL tooltip | Required on tooltip container element |\n| `mdl-tooltip--large` | Applies large-font effect | Optional; goes on tooltip container element |\n| `mdl-tooltip--left` | Positions the tooltip to the left of the target | Optional; goes on tooltip container element |\n| `mdl-tooltip--right` | Positions the tooltip to the right of the target | Optional; goes on tooltip container element |\n| `mdl-tooltip--top` | Positions the tooltip to the top of the target | Optional; goes on tooltip container element |\n| `mdl-tooltip--bottom` | Positions the tooltip to the bottom of the target | Optional; goes on tooltip container element |\n"
},
{
"path": "src/tooltip/_tooltip.scss",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@import \"../variables\";\n\n.mdl-tooltip {\n transform: scale(0);\n transform-origin: top center;\n z-index: 999;\n background: $tooltip-background-color;\n border-radius: 2px;\n color: $tooltip-text-color;\n display: inline-block;\n font-size: $tooltip-font-size;\n font-weight: 500;\n line-height: 14px;\n max-width: 170px;\n position: fixed;\n top: -500px;\n left: -500px;\n padding: 8px;\n text-align: center;\n}\n.mdl-tooltip.is-active {\n animation: pulse 200ms $animation-curve-linear-out-slow-in forwards;\n}\n\n.mdl-tooltip--large {\n line-height: 14px;\n font-size: $tooltip-font-size-large;\n padding: 16px;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 50% {\n // Fixes a weird bug with the interaction between Safari and the result of\n // the SASS compilation for the animation.\n // Essentially, we need to make sure that \"50%\" and \"100%\" don't get merged\n // into a single \"50%, 100%\" entry, so we need to avoid them having any\n // matching properties.\n transform: scale(0.99);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n }\n}\n"
},
{
"path": "src/tooltip/snippets/tooltip-large.html",
"content": "\nprint
\n\nPrint\n
\n"
},
{
"path": "src/tooltip/snippets/tooltip-multiline.html",
"content": "\nshare
\n\nShare your content
via social media\n
\n"
},
{
"path": "src/tooltip/snippets/tooltip-rich.html",
"content": "\ncloud_upload
\n\nUpload file.zip\n
\n"
},
{
"path": "src/tooltip/snippets/tooltip-simple.html",
"content": "\nadd
\n\nFollow\n
\n"
},
{
"path": "src/tooltip/tooltip.js",
"content": "/**\n * @license\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n(function() {\n 'use strict';\n\n /**\n * Class constructor for Tooltip MDL component.\n * Implements MDL component design pattern defined at:\n * https://github.com/jasonmayes/mdl-component-design-pattern\n *\n * @constructor\n * @param {HTMLElement} element The element that will be upgraded.\n */\n var MaterialTooltip = function MaterialTooltip(element) {\n this.element_ = element;\n\n // Initialize instance.\n this.init();\n };\n window['MaterialTooltip'] = MaterialTooltip;\n\n /**\n * Store constants in one place so they can be updated easily.\n *\n * @enum {string | number}\n * @private\n */\n MaterialTooltip.prototype.Constant_ = {\n // None for now.\n };\n\n /**\n * Store strings for class names defined by this component that are used in\n * JavaScript. This allows us to simply change it in one place should we\n * decide to modify at a later date.\n *\n * @enum {string}\n * @private\n */\n MaterialTooltip.prototype.CssClasses_ = {\n IS_ACTIVE: 'is-active',\n BOTTOM: 'mdl-tooltip--bottom',\n LEFT: 'mdl-tooltip--left',\n RIGHT: 'mdl-tooltip--right',\n TOP: 'mdl-tooltip--top'\n };\n\n /**\n * Handle mouseenter for tooltip.\n *\n * @param {Event} event The event that fired.\n * @private\n */\n MaterialTooltip.prototype.handleMouseEnter_ = function(event) {\n var props = event.target.getBoundingClientRect();\n var left = props.left + (props.width / 2);\n var top = props.top + (props.height / 2);\n var marginLeft = -1 * (this.element_.offsetWidth / 2);\n var marginTop = -1 * (this.element_.offsetHeight / 2);\n\n if (this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT)) {\n left = (props.width / 2);\n if (top + marginTop < 0) {\n this.element_.style.top = '0';\n this.element_.style.marginTop = '0';\n } else {\n this.element_.style.top = top + 'px';\n this.element_.style.marginTop = marginTop + 'px';\n }\n } else {\n if (left + marginLeft < 0) {\n this.element_.style.left = '0';\n this.element_.style.marginLeft = '0';\n } else {\n this.element_.style.left = left + 'px';\n this.element_.style.marginLeft = marginLeft + 'px';\n }\n }\n\n if (this.element_.classList.contains(this.CssClasses_.TOP)) {\n this.element_.style.top = props.top - this.element_.offsetHeight - 10 + 'px';\n } else if (this.element_.classList.contains(this.CssClasses_.RIGHT)) {\n this.element_.style.left = props.left + props.width + 10 + 'px';\n } else if (this.element_.classList.contains(this.CssClasses_.LEFT)) {\n this.element_.style.left = props.left - this.element_.offsetWidth - 10 + 'px';\n } else {\n this.element_.style.top = props.top + props.height + 10 + 'px';\n }\n\n this.element_.classList.add(this.CssClasses_.IS_ACTIVE);\n };\n\n /**\n * Hide tooltip on mouseleave or scroll\n *\n * @private\n */\n MaterialTooltip.prototype.hideTooltip_ = function() {\n this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);\n };\n\n /**\n * Initialize element.\n */\n MaterialTooltip.prototype.init = function() {\n\n if (this.element_) {\n var forElId = this.element_.getAttribute('for') ||\n this.element_.getAttribute('data-mdl-for');\n\n if (forElId) {\n this.forElement_ = document.getElementById(forElId);\n }\n\n if (this.forElement_) {\n // It's left here because it prevents accidental text selection on Android\n if (!this.forElement_.hasAttribute('tabindex')) {\n this.forElement_.setAttribute('tabindex', '0');\n }\n\n this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);\n this.boundMouseLeaveAndScrollHandler = this.hideTooltip_.bind(this);\n this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler, false);\n this.forElement_.addEventListener('touchend', this.boundMouseEnterHandler, false);\n this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);\n window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);\n window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);\n }\n }\n };\n\n // The component registers itself. It can assume componentHandler is available\n // in the global scope.\n componentHandler.register({\n constructor: MaterialTooltip,\n classAsString: 'MaterialTooltip',\n cssClass: 'mdl-tooltip'\n });\n})();\n"
},
{
"path": "src/typography/README.md",
"content": "## Introduction\n\nThe Material Design Lite (MDL) **typography** component is a comprehensive approach to standardizing the use of typefaces in applications and page displays. MDL typography elements are intended to replace the myriad fonts used by developers (which vary significantly in appearance) and provide a robust, uniform library of text styles from which developers can choose.\n\nThe \"Roboto\" typeface is the standard for MDL display; it can easily be integrated into a web page using the CSS3 `@font-face` rule. However, Roboto is most simply accessed and included using a single standard HTML `` element, which can be obtained at [this Google fonts page](http://www.google.com/fonts#UsePlace:use/Collection:Roboto).\n\nBecause of the many possible variations in font display characteristics in HTML and CSS, MDL typography aims to provide simple and intuitive styles that use the Roboto font and produce visually attractive and internally consistent text results. See the typography component's [Material Design specifications page](http://www.google.com/design/spec/style/typography.html) for details.\n\n## Basic use\n\nInclude a link to the Google stylesheet that accesses the font and its desired variations.\n\n```html\n\n\n...\n\n```\n\n### To include an MDL **typography** component:\n\n 1. Code any element (``,`
`,``, etc.) that can contain text, including whatever content is appropriate.\n```html\nThis is a standard paragraph.
\n```\n 2. Add one or more MDL classes, separated by spaces, to the element using the `class` attribute.\n```html\nThis is a standard paragraph.
\n```\n\nThe typography component is ready for use.\n\n#### Examples\n\nA \"headline\" paragraph.\n\n```html\nRegular 24px
\n```\n\nA \"title\" paragraph.\n```html\nMedium 20px
\n```\n\nA \"caption\" span.\n```html\nRegular 12px\n```\n\nA \"button\" span.\n```html\nMedium (All Caps) 14px\n```\nA \"display 1\" table cell.\n```html\n
Regular 34px | \n```\nA \"body-1\" paragraph, also uppercased.\n```html\n
\n This is a standard paragraph, but uppercased.\n
\n```\n\n>**Note:** Because the Roboto font is intended to apply to the entire page, standard \"unclassed\" HTML elements (e.g., heading levels, divs, paragraphs, spans, tables, etc. with no `class` attribute) and text modifiers (e.g., strong, em, small, etc.) will use Roboto, while also retaining their inherent and/or inherited characteristics.\n>\n>Also note that MDL typography provides some automatic adjustments based on its display environment. For example, the `body-1` style renders at 14px on a mobile device, but 13px on a desktop. You need not do anything to activate these self-modifiers; they are built into the MDL styles.\n\n## Configuration options\n\nThe MDL CSS classes specify the style to use. The table below lists the available classes and their effects.\n\n| MDL class | Effect | Remarks |\n|-----------|--------|---------|\n| `mdl-typography--body-1` | Regular 14px (Device), Regular 13px (Desktop) | Optional |\n| `mdl-typography--body-1-force-preferred-font` | Regular 14px (Device), Regular 13px (Desktop) | Optional |\n| `mdl-typography--body-2` | Medium 14px (Device), Medium 13px (Desktop) | Optional |\n| `mdl-typography--body-2` | mdl-typography-body-2 | Optional |\n| `mdl-typography--body-2-color-contrast` | Body with color contrast | Optional |\n| `mdl-typography--body-2-force-preferred-font` | Medium 14px (Device), Medium 13px (Desktop) | Optional |\n| `mdl-typography--button` | Medium (All Caps) 14px | Optional |\n| `mdl-typography--caption` | Regular 12px | Optional |\n| `mdl-typography--caption-color-contrast` | Caption with color contrast | Optional |\n| `mdl-typography--display-1` | Regular 34px | Optional |\n| `mdl-typography--display-1-color-contrast` | Display with color contrast | Optional |\n| `mdl-typography--display-2` | Regular 45px | Optional |\n| `mdl-typography--display-3` | Regular 56px | Optional |\n| `mdl-typography--display-4` | Light 112px | Optional |\n| `mdl-typography--headline` | Regular 24px | Optional |\n| `mdl-typography--menu` | Medium 14px (Device), Medium 13px (Desktop) | Optional |\n| `mdl-typography--subhead` | Regular 16px (Device), Regular 15px (Desktop) | Optional |\n| `mdl-typography--subhead-color-contrast` | Subhead with color contrast | Optional |\n| `mdl-typography--table-striped` | Striped table| Optional |\n| `mdl-typography--text-capitalize` | Capitalized text | Optional |\n| `mdl-typography--text-center` | Center aligned text | Optional |\n| `mdl-typography--text-justify` | Justified text | Optional |\n| `mdl-typography--text-left` | Left aligned text | Optional |\n| `mdl-typography--text-lowercase` | Lowercased text | Optional |\n| `mdl-typography--text-nowrap` | No wrap text | Optional |\n| `mdl-typography--text-right` | Right aligned text | Optional |\n| `mdl-typography--text-uppercase` | Uppercased text | Optional |\n| `mdl-typography--title` | Medium 20px | Optional |\n| `mdl-typography--title-color-contrast` | Title with color contrast | Optional |\n"
},
{
"path": "src/typography/_typography.scss",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@import \"../variables\";\n@import \"../mixins\";\n\n@if $target-elements-directly == true {\n html, body {\n font-family: $performance_font;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n\n h1, h2, h3, h4, h5, h6, p {\n margin: 0;\n padding: 0;\n }\n\n /**\n * Styles for HTML elements\n */\n\n h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {\n @include typo-display-3($colorContrast: true);\n\n font-size: 0.6em;\n }\n\n h1 {\n @include typo-display-3;\n\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n h2 {\n @include typo-display-2;\n\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n h3 {\n @include typo-display-1;\n\n margin-top: 24px;\n margin-bottom: 24px;\n }\n\n h4 {\n @include typo-headline;\n\n margin-top: 24px;\n margin-bottom: 16px;\n }\n\n h5 {\n @include typo-title;\n\n margin-top: 24px;\n margin-bottom: 16px;\n }\n\n h6 {\n @include typo-subhead;\n\n margin-top: 24px;\n margin-bottom: 16px;\n }\n\n p {\n @include typo-body-1;\n\n margin-bottom: 16px;\n }\n\n a {\n color: $text-link-color;\n font-weight: 500;\n }\n\n blockquote {\n @include typo-blockquote;\n }\n\n mark {\n background-color: #f4ff81;\n }\n\n dt {\n font-weight: 700;\n }\n\n address {\n @include typo-caption;\n\n font-style: normal;\n }\n\n ul, ol {\n @include typo-body-1;\n }\n}\n\n/**\n * Class Name Styles\n */\n\n.mdl-typography--display-4 {\n @include typo-display-4;\n}\n\n.mdl-typography--display-4-color-contrast {\n @include typo-display-4($colorContrast: true);\n}\n\n.mdl-typography--display-3 {\n @include typo-display-3;\n}\n\n.mdl-typography--display-3-color-contrast {\n @include typo-display-3($colorContrast: true);\n}\n\n.mdl-typography--display-2 {\n @include typo-display-2;\n}\n\n.mdl-typography--display-2-color-contrast {\n @include typo-display-2($colorContrast: true);\n}\n\n.mdl-typography--display-1 {\n @include typo-display-1;\n}\n\n.mdl-typography--display-1-color-contrast {\n @include typo-display-1($colorContrast: true);\n}\n\n.mdl-typography--headline {\n @include typo-headline;\n}\n\n.mdl-typography--headline-color-contrast {\n @include typo-headline($colorContrast: true);\n}\n\n.mdl-typography--title {\n @include typo-title;\n}\n\n.mdl-typography--title-color-contrast {\n @include typo-title($colorContrast: true);\n}\n\n.mdl-typography--subhead {\n @include typo-subhead;\n}\n\n.mdl-typography--subhead-color-contrast {\n @include typo-subhead($colorContrast: true);\n}\n\n.mdl-typography--body-2 {\n @include typo-body-2;\n}\n\n.mdl-typography--body-2-color-contrast {\n @include typo-body-2($colorContrast: true);\n}\n\n.mdl-typography--body-1 {\n @include typo-body-1;\n}\n\n.mdl-typography--body-1-color-contrast {\n @include typo-body-1($colorContrast: true);\n}\n\n.mdl-typography--body-2-force-preferred-font {\n @include typo-body-2($usePreferred: true);\n}\n\n.mdl-typography--body-2-force-preferred-font-color-contrast {\n @include typo-body-2($colorContrast: true, $usePreferred: true);\n}\n\n.mdl-typography--body-1-force-preferred-font {\n @include typo-body-1($usePreferred: true);\n}\n\n.mdl-typography--body-1-force-preferred-font-color-contrast {\n @include typo-body-1($colorContrast: true, $usePreferred: true);\n}\n\n.mdl-typography--caption {\n @include typo-caption;\n}\n\n.mdl-typography--caption-force-preferred-font {\n @include typo-caption($usePreferred: true);\n}\n\n.mdl-typography--caption-color-contrast {\n @include typo-caption($colorContrast: true);\n}\n\n.mdl-typography--caption-force-preferred-font-color-contrast {\n @include typo-caption($colorContrast: true, $usePreferred: true);\n}\n\n.mdl-typography--menu {\n @include typo-menu;\n}\n\n.mdl-typography--menu-color-contrast {\n @include typo-menu($colorContrast: true);\n}\n\n.mdl-typography--button {\n @include typo-button;\n}\n\n.mdl-typography--button-color-contrast {\n @include typo-button($colorContrast: true);\n}\n\n.mdl-typography--text-left {\n text-align: left;\n}\n\n.mdl-typography--text-right {\n text-align: right;\n}\n\n.mdl-typography--text-center {\n text-align: center;\n}\n\n.mdl-typography--text-justify {\n text-align: justify;\n}\n\n.mdl-typography--text-nowrap {\n white-space: nowrap;\n}\n\n.mdl-typography--text-lowercase {\n text-transform: lowercase;\n}\n\n.mdl-typography--text-uppercase {\n text-transform: uppercase;\n}\n\n.mdl-typography--text-capitalize {\n text-transform: capitalize;\n}\n\n.mdl-typography--font-thin {\n font-weight: 200 !important;\n}\n\n.mdl-typography--font-light {\n font-weight: 300 !important;\n}\n\n.mdl-typography--font-regular {\n font-weight: 400 !important;\n}\n\n.mdl-typography--font-medium {\n font-weight: 500 !important;\n}\n\n.mdl-typography--font-bold {\n font-weight: 700 !important;\n}\n\n.mdl-typography--font-black {\n font-weight: 900 !important;\n}\n\n.material-icons {\n @include typo-icon;\n}\n"
},
{
"path": "src/typography/demo.css",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n.demo-page--typography {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.demo-page--typography table th {\n padding-right: 80px;\n\n vertical-align: top;\n text-align: left;\n}\n\n.demo-typography--white {\n background-color: white;\n color: black;\n}\n\n.demo-typography--black {\n background-color: black;\n color: white;\n}\n\n.demo-typography--white,\n.demo-typography--black,\n.demo-typography--img-1,\n.demo-typography--img-2 {\n width: 360px;\n height: 272px;\n\n padding: 16px;\n box-sizing: border-box;\n}\n\n.demo-typography--img-1 {\n background-image: url(../demo-images/img-1.png);\n color: white;\n}\n\n.demo-typography--img-2 {\n background-image: url(../demo-images/img-2.png);\n color: white;\n}\n"
},
{
"path": "src/typography/demo.html",
"content": "
Scale & Basic Styles
\n\n
\n
\n \n | Display 4 | \n Light 112px | \n
\n \n | Display 3 | \n Regular 56px | \n
\n \n | Display 2 | \n Regular 45px | \n
\n \n | Display 1 | \n Regular 34px | \n
\n \n | Headline | \n Regular 24px | \n
\n \n | Title | \n Medium 20px | \n
\n \n | Subhead | \n Regular 16px (Device), Regular 15px (Desktop) | \n
\n \n | Body 2 | \n Medium 14px (Device), Medium 13px (Desktop) | \n
\n \n | Body 1 | \n Regular 14px (Device), Regular 13px (Desktop) | \n
\n \n | Body 2 (force preferred font) | \n Medium 14px (Device), Medium 13px (Desktop) | \n
\n \n | Body 1 (force preferred font) | \n Regular 14px (Device), Regular 13px (Desktop) | \n
\n \n | Caption | \n Regular 12px | \n
\n \n | Menu | \n \n
\n \n | Button | \n Medium (All Caps) 14px | \n
\n
\n
\n\n
HTML Elements
\n\n
\n\n
Headings
\n\n
<h1>
\n
<h2>
\n
<h3>
\n
<h4>
\n
<h5>
\n
<h6>
\n\n
Formatting
\n\n
<u>Underlined<u>
\n\n
<b>Bold<b>
\n\n
<strong>Strong<strong>
\n\n
<italic>Italic<italic>
\n\n
<em>Em<em>
\n\n
<s>Strikethrough<s>
\n\n
<small>Small<small>
\n\n
<mark>Mark<mark>
\n\n
Body Text
\n\n
<p>
\n\n
<p class=\"mdl-typography-body-2\">
\n\n
<p class=\"mdl-typography-caption\">
\n\n \n\n
<p class=\"mdl-typography-button\">
\n\n
Subtitles
\n\n
<h1> Subtitle
\n
<h2> Subtitle
\n
<h3> Subtitle
\n
<h4> Subtitle
\n
<h5> Subtitle
\n
<h6> Subtitle
\n\n
Description
\n\n
\n - Description lists
\n - A description list is perfect for defining terms.
\n - Euismod
\n - Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
\n - Donec id elit non mi porta gravida at eget metus.
\n - Malesuada porta
\n - Etiam porta sem malesuada magna mollis euismod.
\n
\n
\n\n
Quotes
\n\n
\n\n
Alignment
\n\n
Left aligned text.
\n
Center aligned text.
\n
Right aligned text.
\n
Justified text.
\n
No wrap text.
\n\n
Transformations
\n
Lowercased text.
\n
Uppercased text.
\n
Capitalized text.
\n\n
Addresses
\n\n
\n Googleplex
\n 1600 Amphitheatre Pkwy
\n Mountain View, CA 94043
\n P: (650) 253-0000\n \n\n
Code
\n\n
Multi-line code blocks
\n
\n Use <pre> for multi-line code blocks.\n
\n<p>This is the first line of code</p>\n<p>This is the second line of code</p>\n
\n \n\n
Inline code blocks
\n
Code blocks like <main> could be displayed inline.
\n\n\n
Color Contrasts
\n\n
\n
\n
Caption
\n\n
Body
\n\n
Subhead
\n\n
Title
\n\n
Display
\n
\n
\n\n
\n
\n
Caption
\n\n
Body
\n\n
Subhead
\n\n
Title
\n\n
Display
\n
\n
\n\n
\n
\n
Caption
\n\n
Body
\n\n
Subhead
\n\n
Title
\n\n
Display
\n
\n
\n\n
\n
\n
Caption
\n\n
Body
\n\n
Subhead
\n\n
Title
\n\n
Display
\n
\n
\n"
},
{
"path": "templates/android-dot-com/README.md",
"content": "# android.com sample\n\n## Why this sample\nThe goal of this sample is to illustrate implementing a real-world-looking site with **Material Design Lite**.\n\nWe therefore decided to do a cover of the front page of the android.com website, which while not a 1:1 match illustrates MDL usage well.\n"
},
{
"path": "templates/android-dot-com/index.html",
"content": "\n\n\n\n \n
\n
\n
\n
\n
Android\n\n \n
\n
\n
\n
\n \n \n \n
\n\n
\n \n
\n\n
\n\n
\n
\n
\n
be together. not the same.
\n
welcome to android... be yourself. do your thing. see what's going on.
\n
\n\n
\n \n \n
\n
\n
\n
Powering screens of all sizes
\n
\n
\n
\n
\n
\n
Customised by you, for you
\n
\n Put the stuff that you care about right on your home screen: the latest news, the weather or a stream of your recent photos.\n
\n Customise your phone\n
\n
\n
\n
\n
\n
More from Android
\n
\n
\n
\n
\n
Get going on Android
\n \n
\n Four tips to make your switch to Android quick and easy\n
\n
\n
\n\n
\n
\n
\n
Create your own Android character
\n \n
\n Turn the little green Android mascot into you, your friends, anyone!\n
\n
\n
\n\n
\n
\n
\n
Get a clean customisable home screen
\n \n
\n A clean, simple, customisable home screen that comes with the power of Google Now: Traffic alerts, weather and much more, just a swipe away.\n
\n
\n
\n\n
\n
\n
\n
Millions to choose from
\n \n
\n Hail a taxi, find a recipe, run through a temple – Google Play has all the apps and games that let you make your Android device uniquely yours.\n
\n
\n
\n
\n
\n\n
\n
\n
\n
View Source\n \n \n\n"
},
{
"path": "templates/android-dot-com/material.scss",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@import '../../src/material-design-lite';\n"
},
{
"path": "templates/android-dot-com/styles.css",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nbody {\n margin: 0;\n}\n\n/* Disable ugly boxes around images in IE10 */\na img{\n border: 0px;\n}\n\n::-moz-selection {\n background-color: #6ab344;\n color: #fff;\n}\n\n::selection {\n background-color: #6ab344;\n color: #fff;\n}\n\n.android-search-box .mdl-textfield__input {\n color: rgba(0, 0, 0, 0.87);\n}\n\n.android-header .mdl-menu__container {\n z-index: 50;\n margin: 0 !important;\n}\n\n\n.mdl-textfield--expandable {\n width: auto;\n}\n\n.android-fab {\n position: absolute;\n right: 20%;\n bottom: -26px;\n z-index: 3;\n background: #64ffda !important;\n color: black !important;\n}\n\n.android-mobile-title {\n display: none !important;\n}\n\n\n.android-logo-image {\n height: 28px;\n width: 140px;\n}\n\n\n.android-header {\n overflow: visible;\n background-color: white;\n}\n\n .android-header .material-icons {\n color: #767777 !important;\n }\n\n .android-header .mdl-layout__drawer-button {\n background: transparent;\n color: #767777;\n }\n\n .android-header .mdl-navigation__link {\n color: #757575;\n font-weight: 700;\n font-size: 14px;\n }\n\n .android-navigation-container {\n /* Simple hack to make the overflow happen to the left instead... */\n direction: rtl;\n order: 1;\n width: 500px;\n transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n width 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .android-navigation {\n /* ... and now make sure the content is actually LTR */\n direction: ltr;\n justify-content: flex-end;\n width: 800px;\n }\n\n .android-search-box.is-focused + .android-navigation-container {\n opacity: 0;\n width: 100px;\n }\n\n\n .android-navigation .mdl-navigation__link {\n display: inline-block;\n height: 60px;\n line-height: 68px;\n background-color: transparent !important;\n border-bottom: 4px solid transparent;\n }\n\n .android-navigation .mdl-navigation__link:hover {\n border-bottom: 4px solid #8bc34a;\n }\n\n .android-search-box {\n order: 2;\n margin-left: 16px;\n margin-right: 16px;\n }\n\n .android-more-button {\n order: 3;\n }\n\n\n.android-drawer {\n border-right: none;\n}\n\n .android-drawer-separator {\n height: 1px;\n background-color: #dcdcdc;\n margin: 8px 0;\n }\n\n .android-drawer .mdl-navigation__link.mdl-navigation__link {\n font-size: 14px;\n color: #757575;\n }\n\n .android-drawer span.mdl-navigation__link.mdl-navigation__link {\n color: #8bc34a;\n }\n\n .android-drawer .mdl-layout-title {\n position: relative;\n background: #6ab344;\n height: 160px;\n }\n\n .android-drawer .android-logo-image {\n position: absolute;\n bottom: 16px;\n }\n\n.android-be-together-section {\n position: relative;\n height: 800px;\n width: auto;\n background-color: #f3f3f3;\n background: url('images/slide01.jpg') center 30% no-repeat;\n background-size: cover;\n}\n\n.logo-font {\n font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;\n line-height: 1;\n color: #767777;\n font-weight: 500;\n}\n\n.android-slogan {\n font-size: 60px;\n padding-top: 160px;\n}\n\n.android-sub-slogan {\n font-size: 21px;\n padding-top: 24px;\n}\n\n.android-create-character {\n font-size: 21px;\n padding-top: 400px;\n}\n\n .android-create-character a {\n text-decoration: none;\n color: #767777;\n font-weight: 300;\n }\n\n.android-screen-section {\n position: relative;\n padding-top: 60px;\n padding-bottom: 80px;\n}\n\n.android-screens {\n text-align: right;\n width: 100%;\n white-space: nowrap;\n overflow-x: auto;\n}\n\n.android-screen {\n text-align: center;\n}\n\n.android-screen .android-link {\n margin-top: 16px;\n display: block;\n z-index: 2;\n}\n\n.android-image-link {\n text-decoration: none;\n}\n\n.android-wear {\n display: inline-block;\n width: 160px;\n margin-right: 32px;\n}\n\n .android-wear .android-screen-image {\n width: 40%;\n z-index: 1;\n }\n\n\n.android-phone {\n display: inline-block;\n width: 64px;\n margin-right: 48px;\n}\n\n .android-phone .android-screen-image {\n width: 100%;\n z-index: 1;\n }\n\n\n.android-tablet {\n display: inline-block;\n width: 110px;\n margin-right: 64px;\n}\n\n .android-tablet .android-screen-image {\n width: 100%;\n z-index: 1;\n }\n\n .android-tablet .android-link {\n display: block;\n z-index: 2;\n }\n\n\n.android-tv {\n display: inline-block;\n width: 300px;\n margin-right: 80px;\n}\n\n .android-tv .android-screen-image {\n width: 100%;\n z-index: 1;\n }\n\n\n.android-auto {\n display: inline-block;\n width: 300px;\n overflow: hidden;\n}\n\n .android-auto .android-screen-image {\n display: block;\n height: 300px;\n z-index: 1;\n }\n\n\n.android-wear-section {\n position: relative;\n background: url('images/wear.png') center top no-repeat;\n background-size: cover;\n height: 800px;\n}\n\n.android-wear-band {\n position: absolute;\n bottom: 0;\n width: 100%;\n text-align: center;\n background-color: #37474f;\n}\n\n.android-wear-band-text {\n max-width: 800px;\n margin-left: 25%;\n padding: 24px;\n text-align: left;\n color: white;\n}\n\n .android-wear-band-text p {\n padding-top: 8px;\n }\n\n.android-link {\n text-decoration: none;\n color: #8bc34a !important;\n}\n\n .android-link:hover {\n color: #7cb342 !important;\n }\n\n .android-link .material-icons {\n position: relative;\n top: -1px;\n vertical-align: middle;\n }\n\n.android-alt-link {\n text-decoration: none;\n color: #64ffda !important;\n font-size: 16px;\n}\n\n .android-alt-link:hover {\n color: #00bfa5 !important;\n }\n\n .android-alt-link .material-icons {\n position: relative;\n top: 6px;\n }\n\n.android-customized-section {\n text-align: center;\n}\n\n.android-customized-section-text {\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n padding: 80px 16px 0 16px;\n}\n\n .android-customized-section-text p {\n padding-top: 16px;\n }\n\n.android-customized-section-image {\n background: url('images/devices.jpg') center top no-repeat;\n background-size: cover;\n height: 400px;\n}\n\n.android-more-section {\n padding: 80px 0;\n max-width: 1044px;\n margin-left: auto;\n margin-right: auto;\n}\n\n .android-more-section .android-section-title {\n margin-left: 12px;\n padding-bottom: 24px;\n }\n\n.android-card-container {\n}\n\n .android-card-container .mdl-card__media {\n overflow: hidden;\n background: transparent;\n }\n\n .android-card-container .mdl-card__media img {\n width: 100%;\n }\n\n .android-card-container .mdl-card__title {\n background: transparent;\n height: auto;\n }\n\n .android-card-container .mdl-card__title-text {\n color: black;\n height: auto;\n }\n\n .android-card-container .mdl-card__supporting-text {\n height: auto;\n color: black;\n padding-bottom: 56px;\n }\n\n .android-card-container .mdl-card__actions {\n position: absolute;\n bottom: 0;\n }\n\n .android-card-container .mdl-card__actions a {\n border-top: none;\n font-size: 16px;\n }\n\n.android-footer {\n background-color: #fafafa;\n position: relative;\n}\n\n .android-footer a:hover {\n color: #8bc34a;\n }\n\n .android-footer .mdl-mega-footer--top-section::after {\n border-bottom: none;\n }\n\n .android-footer .mdl-mega-footer--middle-section::after {\n border-bottom: none;\n }\n\n .android-footer .mdl-mega-footer--bottom-section {\n position: relative;\n }\n\n .android-footer .mdl-mega-footer--bottom-section a {\n margin-right: 2em;\n }\n\n .android-footer .mdl-mega-footer--right-section a .material-icons {\n position: relative;\n top: 6px;\n }\n\n\n.android-link-menu:hover {\n cursor: pointer;\n}\n\n\n/**** Mobile layout ****/\n@media (max-width: 900px) {\n .android-navigation-container {\n display: none;\n }\n\n .android-title {\n display: none !important;\n }\n\n .android-mobile-title {\n display: block !important;\n position: absolute;\n left: calc(50% - 70px);\n top: 12px;\n transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n /* WebViews in iOS 9 break the \"~\" operator, and WebViews in OS X 10.10 break\n consecutive \"+\" operators in some cases. Therefore, we need to use both\n here to cover all the bases. */\n .android.android-search-box.is-focused ~ .android-mobile-title,\n .android-search-box.is-focused + .android-navigation-container + .android-mobile-title {\n opacity: 0;\n }\n\n .android-more-button {\n display: none;\n }\n\n .android-search-box.is-focused {\n width: calc(100% - 48px);\n }\n\n .android-search-box .mdl-textfield__expandable-holder {\n width: 100%;\n }\n\n .android-be-together-section {\n height: 350px;\n }\n\n .android-slogan {\n font-size: 26px;\n margin: 0 16px;\n padding-top: 24px;\n }\n\n .android-sub-slogan {\n font-size: 16px;\n margin: 0 16px;\n padding-top: 8px;\n }\n\n .android-create-character {\n padding-top: 200px;\n font-size: 16px;\n }\n\n .android-create-character img {\n height: 12px;\n }\n\n .android-fab {\n display: none;\n }\n\n .android-wear-band-text {\n margin-left: 0;\n padding: 16px;\n }\n\n .android-footer .mdl-mega-footer--bottom-section {\n display: none;\n }\n}\n"
},
{
"path": "templates/article/index.html",
"content": "\n\n\n \n
\n
\n
\n
\n
Material Design Lite\n\n \n
\n
\n\n \n
\n
\n
\n
\n\n \n
\n
\n\n
\n\n \n \n\n
\n
\n
\n
\n \n \n \n
\n \n
\n
\n \n
\n
\n
\n Google > Material Design Lite > How to install MDL\n
\n
How to install MDL
\n
\n Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.\n
\n
\n Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.\n
\n
\n Tempor tempor aliqua in commodo cillum Lorem magna dolore proident Lorem. Esse ad consequat est excepteur irure eu irure quis aliqua qui. Do mollit esse veniam excepteur ut veniam anim minim dolore sit commodo consequat duis commodo. Sunt dolor reprehenderit ipsum minim eiusmod eu consectetur anim excepteur eiusmod. Duis excepteur anim dolor sit enim veniam deserunt anim adipisicing Lorem elit. Cillum sunt do consequat elit laboris nisi consectetur.\n
\n
Basic MDL Usage
\n
\n Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.\n
\n
\n Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.\n
\n
\n Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.\n
\n
\n Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.\n
\n
\n Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.\n
\n
\n Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.\n
\n
\n Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.\n
\n
\n Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.\n
\n
\n
\n
\n
View Source\n \n \n\n"
},
{
"path": "templates/article/styles.css",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n.demo-ribbon {\n width: 100%;\n height: 40vh;\n background-color: #3F51B5;\n flex-shrink: 0;\n}\n\n.demo-main {\n margin-top: -35vh;\n flex-shrink: 0;\n}\n\n.demo-header .mdl-layout__header-row {\n padding-left: 40px;\n}\n\n.demo-container {\n max-width: 1600px;\n width: calc(100% - 16px);\n margin: 0 auto;\n}\n\n.demo-content {\n border-radius: 2px;\n padding: 80px 56px;\n margin-bottom: 80px;\n}\n\n.demo-layout.is-small-screen .demo-content {\n padding: 40px 28px;\n}\n\n.demo-content h3 {\n margin-top: 48px;\n}\n\n.demo-footer {\n padding-left: 40px;\n}\n\n.demo-footer .mdl-mini-footer--link-list a {\n font-size: 13px;\n}\n"
},
{
"path": "templates/blog/entry.html",
"content": "\n\n\n \n
\n
\n
\n
\n
Material Design Lite\n\n \n
\n
\n\n \n
\n
\n
\n
\n\n \n
\n
\n\n \n \n\n
\n
\n
\n
\n \n \n \n
\n
\n \n \n
\n
\n
On the road again
\n \n
\n
\n
\n The Newist\n 2 days ago\n
\n
\n
\n 425 favorite\n favorites\n
\n
\n bookmark\n bookmark\n
\n
\n share\n share\n
\n
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n Qui ullamco consectetur aute fugiat officia ullamco proident Lorem ad irure. Sint eu ut consectetur ut esse veniam laboris adipisicing aliquip minim anim labore commodo. Incididunt eu enim enim ipsum Lorem commodo tempor duis eu ullamco tempor elit occaecat sit. Culpa eu sit voluptate ullamco ad irure. Anim commodo aliquip cillum ea nostrud commodo id culpa eu irure ut proident. Incididunt cillum excepteur incididunt mollit exercitation fugiat in. Magna irure laborum amet non ullamco aliqua eu. Aliquip adipisicing dolore irure culpa aute enim. Ullamco quis eiusmod ipsum laboris quis qui.\n
\n
\n Cillum ullamco eu cupidatat excepteur Lorem minim sint quis officia irure irure sint fugiat nostrud. Pariatur Lorem irure excepteur Lorem non irure ea fugiat adipisicing esse nisi ullamco proident sint. Consectetur qui quis cillum occaecat ullamco veniam et Lorem cupidatat pariatur. Labore officia ex aliqua et occaecat velit dolor deserunt minim velit mollit irure. Cillum cupidatat enim officia non velit officia labore. Ut esse nisi voluptate et deserunt enim laborum qui magna sint sunt cillum. Id exercitation labore sint ea labore adipisicing deserunt enim commodo consectetur reprehenderit enim. Est anim nostrud quis non fugiat duis cillum. Aliquip enim officia ad commodo id.\n
\n
\n
\n
\n\n
\n
\n
\n
\n
View Source\n \n \n\n"
},
{
"path": "templates/blog/index.html",
"content": "\n\n\n \n
\n
\n
\n
\n
Material Design Lite\n\n \n
\n
\n\n \n
\n
\n
\n
\n\n \n
\n
\n\n
\n\n \n \n\n
\n
\n
\n
\n \n \n \n
\n
\n \n
\n
\n
\n
\n
\n The Newist\n 2 days ago\n
\n
\n
\n
\n
\n
\n
\n
\n The Newist\n
\n \n \n
\n
\n
\n
\n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n The Newist\n 2 days ago\n
\n
\n
\n
\n
\n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n The Newist\n 2 days ago\n
\n
\n
\n
\n
\n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n The Newist\n 2 days ago\n
\n
\n
\n
\n
\n
\n
\n
View Source\n \n \n \n\n"
},
{
"path": "templates/blog/styles.css",
"content": "body::before {\n background-size: cover;\n background-attachment: fixed;\n content: '';\n will-change: transform;\n z-index: -1;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n position: fixed;\n}\n@media (max-width: 512px) and (min-resolution: 1.5dppx),\n (max-width: 1024px) and (max-resolution: 1.5dppx) {\n body::before {\n background-image: url('images/bg_1024.jpg');\n }\n}\n@media (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx),\n (min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {\n body::before {\n background-image: url('images/bg_2048.jpg');\n }\n}\n@media (min-width: 1025px) and (min-resolution: 1.5dppx),\n (min-width: 2049px) and (max-resolution: 1.5dppx) {\n body::before {\n background-image: url('images/bg_2880.jpg');\n }\n}\nbody .demo-blog {\n font-family: 'Roboto', 'Helvetica', sans-serif;\n}\n\n.demo-blog .demo-blog__posts {\n max-width: 900px;\n padding: 0;\n display: flex;\n width: 100%;\n margin: 0 auto;\n flex-shrink: 0;\n}\n\n.demo-blog.mdl-layout .mdl-layout__content {\n padding-top: 230px;\n position: relative;\n -webkit-overflow-scrolling: touch;\n}\n.demo-blog .mdl-card {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n min-height: 360px;\n}\n.demo-blog .mdl-card__title {\n padding: 16px;\n flex-grow: 1;\n}\n.demo-blog .mdl-card__media {\n box-sizing: border-box;\n background-size: cover;\n padding: 24px;\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: flex-end;\n cursor: pointer;\n}\n.demo-blog .mdl-card__media a,\n.demo-blog .mdl-card__title a {\n color: inherit;\n}\n.demo-blog .mdl-card__supporting-text {\n width: 100%;\n padding: 16px;\n min-height: 64px;\n display: flex;\n align-items: center;\n}\n.demo-blog .mdl-card__supporting-text strong {\n font-weight: 400;\n}\n.demo-blog .mdl-card__media ~ .mdl-card__supporting-text {\n min-height: 64px;\n}\n.demo-blog .mdl-card__supporting-text:not(:last-child) {\n box-sizing: border-box;\n min-height: 76px;\n}\n.demo-blog:not(.demo-blog--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text {\n border-top: 1px solid rgba(0,0,0,0.1);\n}\n\n.demo-blog .mdl-card__actions:first-child {\n margin-left: 0;\n}\n.demo-blog .meta {\n box-sizing: border-box;\n padding: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n height: auto;\n}\n.demo-blog .meta > .meta__favorites{\n flex-direction: row;\n margin: 0 8px;\n font-size: 13px;\n font-weight: 500;\n}\n.demo-blog .meta > .meta__favorites .material-icons {\n font-size: 2em;\n cursor: pointer;\n margin-left: 12px;\n}\n.demo-blog .mdl-card .meta.meta--fill {\n justify-content: space-between;\n}\n.demo-blog .meta > *:first-child {\n margin-right: 16px;\n}\n.demo-blog .meta > * {\n display: flex;\n flex-direction: column;\n}\n.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.coffee-pic {\n order: 0;\n}\n.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.something-else {\n order: -1;\n}\n.demo-blog .coffee-pic .mdl-card__media {\n background-image: url('images/coffee.jpg');\n}\n.demo-blog .something-else .mdl-card__media {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.demo-blog .something-else > button {\n position: absolute;\n top: 0;\n right: 28px;\n transform: translate(0px, -28px);\n}\n.demo-blog .something-else .mdl-card__media {\n font-size: 13px;\n font-weight: 500;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n}\n.demo-blog .something-else .mdl-card__media img {\n width: 64px;\n height: 64px;\n margin-bottom: 10px;\n}\n.demo-blog .something-else .mdl-card__supporting-text {\n background-color: #F5F5F5;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n.demo-blog .on-the-road-again .mdl-card__media {\n background-image: url('images/road.jpg');\n}\n.demo-blog .shopping .mdl-card__media {\n background-image: url('images/shopping.jpg');\n}\n.demo-blog .demo-blog__posts > .demo-nav {\n margin: 12px 15px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 500;\n}\n.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button {\n color: white;\n text-decoration: none;\n}\n.demo-blog .demo-blog__posts > .demo-nav .mdl-button {\n color: rgba(0,0,0,0.54);\n background-color: white;\n}\n.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:first-child .mdl-button {\n margin-right: 16px;\n}\n.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:last-child .mdl-button {\n margin-left: 16px;\n}\n.demo-blog .mdl-card > a {\n color: inherit;\n text-decoration: none;\n font-weight: inherit;\n}\n.demo-blog .mdl-card h3 {\n margin: 0;\n}\n.demo-blog .mdl-card h3 a {\n text-decoration: none;\n}\n.demo-blog .mdl-card h3.quote:before, .demo-blog .mdl-card h3.quote:after {\n display: block;\n font-size: 3em;\n margin-top: 0.5em;\n}\n.demo-blog .mdl-card h3.quote:before {\n content: '“';\n}\n.demo-blog .mdl-card h3.quote:after {\n content: '”';\n}\n.demo-blog--blogpost .custom-header {\n background-color: transparent;\n}\n.demo-blog--blogpost .demo-blog__posts > .mdl-card .mdl-card__media {\n background-image: url('images/road_big.jpg');\n height: 280px;\n}\n.demo-blog--blogpost .comments {\n background-color: #EEE;\n}\n.demo-blog--blogpost .meta > * {\n align-items: center;\n}\n.demo-blog--blogpost .meta + .mdl-card__supporting-text {\n border: 0;\n display: flex;\n flex-direction: column;\n}\n.demo-blog--blogpost .meta + .mdl-card__supporting-text p {\n max-width: 512px;\n margin: 16px auto;\n font-size: 16px;\n line-height: 28px;\n}\n\n.demo-blog--blogpost .comments {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n padding: 32px;\n box-sizing: border-box;\n}\n.demo-blog--blogpost .comments > form {\n display: flex;\n flex-direction: row;\n margin-bottom: 16px;\n}\n.demo-blog--blogpost .comments > form .mdl-textfield {\n flex-grow: 1;\n margin-right: 16px;\n color: rgb(97, 97, 97);\n}\n/* Workaround for Firefox.\n * User agent stylesheet kept overwriting the font in FF only.\n */\n.demo-blog--blogpost .comments > form .mdl-textfield .mdl-textfield__input {\n font-family: 'Roboto', 'Helvetica', sans-serif;\n}\n.demo-blog--blogpost .comments > form .mdl-textfield input,\n.demo-blog--blogpost .comments > form .mdl-textfield textarea {\n resize: none;\n}\n.demo-blog--blogpost .comments > form button {\n margin-top: 20px;\n background-color: rgba(0, 0, 0, 0.24);\n color: white;\n}\n.demo-blog--blogpost .comments .comment {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n}\n.demo-blog--blogpost .comments .comment > .comment__header {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 16px;\n}\n.demo-blog--blogpost .comments .comment > .comment__header > .comment__avatar {\n width: 48px;\n height: 48px;\n border-radius: 24px;\n margin-right: 16px;\n}\n.demo-blog--blogpost .comments .comment > .comment__header > .comment__author {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n.demo-blog--blogpost .comments .comment > .comment__text {\n line-height: 1.5em;\n}\n.demo-blog--blogpost .comments .comment > .comment__actions {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n font-size: 0.8em;\n margin-top: 16px;\n}\n.demo-blog--blogpost .comments .comment > .comment__actions button {\n margin-right: 16px;\n color: rgba(0, 0, 0, 0.24);\n}\n.demo-blog--blogpost .comments .comment > .comment__answers {\n padding-top: 32px;\n padding-left: 48px;\n}\n\n.demo-blog--blogpost .demo-back {\n position: absolute;\n top: 16px;\n left: 16px;\n color: white;\n z-index: 9999;\n}\n.demo-blog .section-spacer {\n flex-grow: 1;\n}\n.demo-blog .something-else {\n overflow: visible;\n z-index: 10;\n}\n.demo-blog .amazing .mdl-card__title {\n background-color: #263238;\n}\n.demo-blog .minilogo {\n width: 44px;\n height: 44px;\n background-image: url('images/avatar.png');\n background-position: center;\n background-repeat: no-repeat;\n background-size: 50%;\n border-radius: 22px;\n background-color: #F5F5F5;\n}\n\n/* Fixes for IE 10 */\n.mdl-grid {\n display: flex !important;\n}\n\n.social-btn {\n background-position: center;\n background-size: contain;\n background-repeat: no-repeat;\n background-color: transparent;\n margin: 0 16px;\n width: 24px;\n height: 24px;\n cursor: pointer;\n opacity: 0.46;\n border-radius: 2px;\n}\n.social-btn__twitter {\n background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png');\n}\n.social-btn__blogger {\n background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png');\n}\n.social-btn__gplus {\n background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_black_24dp.png');\n}\n.social-btn__share {\n color: rgba(0, 0, 0, 0.54);\n background: transparent;\n}\n\n.demo-blog .mdl-mini-footer {\n margin-top: 80px;\n height: 120px;\n padding: 40px;\n align-items: center;\n background-color: white;\n box-sizing: border-box;\n}\n"
},
{
"path": "templates/dashboard/index.html",
"content": "\n\n\n \n
\n
\n
\n
\n
Material Design Lite\n\n \n
\n
\n\n \n
\n
\n
\n
\n\n \n
\n
\n\n
\n\n \n \n\n
\n
\n
\n
\n \n \n \n
\n \n
\n
\n \n
\n \n \n \n \n
\n
\n \n \n
\n
\n
\n
\n
Updates
\n \n
\n Non dolore elit adipisicing ea reprehenderit consectetur culpa.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
View Source\n \n \n\n"
},
{
"path": "templates/dashboard/styles.css",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nhtml, body {\n font-family: 'Roboto', 'Helvetica', sans-serif;\n}\n.demo-avatar {\n width: 48px;\n height: 48px;\n border-radius: 24px;\n}\n.demo-layout .mdl-layout__header .mdl-layout__drawer-button {\n color: rgba(0, 0, 0, 0.54);\n}\n.mdl-layout__drawer .avatar {\n margin-bottom: 16px;\n}\n.demo-drawer {\n border: none;\n}\n/* iOS Safari specific workaround */\n.demo-drawer .mdl-menu__container {\n z-index: -1;\n}\n.demo-drawer .demo-navigation {\n z-index: -2;\n}\n/* END iOS Safari specific workaround */\n.demo-drawer .mdl-menu .mdl-menu__item {\n display: flex;\n align-items: center;\n}\n.demo-drawer-header {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 16px;\n height: 151px;\n}\n.demo-avatar-dropdown {\n display: flex;\n position: relative;\n flex-direction: row;\n align-items: center;\n width: 100%;\n}\n\n.demo-navigation {\n flex-grow: 1;\n}\n.demo-layout .demo-navigation .mdl-navigation__link {\n display: flex !important;\n flex-direction: row;\n align-items: center;\n color: rgba(255, 255, 255, 0.56);\n font-weight: 500;\n}\n.demo-layout .demo-navigation .mdl-navigation__link:hover {\n background-color: #00BCD4;\n color: #37474F;\n}\n.demo-navigation .mdl-navigation__link .material-icons {\n font-size: 24px;\n color: rgba(255, 255, 255, 0.56);\n margin-right: 32px;\n}\n\n.demo-content {\n max-width: 1080px;\n}\n\n.demo-charts {\n align-items: center;\n}\n.demo-chart:nth-child(1) {\n color: #ACEC00;\n}\n.demo-chart:nth-child(2) {\n color: #00BBD6;\n}\n.demo-chart:nth-child(3) {\n color: #BA65C9;\n}\n.demo-chart:nth-child(4) {\n color: #EF3C79;\n}\n.demo-graphs {\n padding: 16px 32px;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n}\n/* TODO: Find a proper solution to have the graphs\n * not float around outside their container in IE10/11.\n * Using a browserhacks.com solution for now.\n */\n_:-ms-input-placeholder, :root .demo-graphs {\n min-height: 664px;\n}\n_:-ms-input-placeholder, :root .demo-graph {\n max-height: 300px;\n}\n/* TODO end */\n.demo-graph:nth-child(1) {\n color: #00b9d8;\n}\n.demo-graph:nth-child(2) {\n color: #d9006e;\n}\n\n.demo-cards {\n align-items: flex-start;\n align-content: flex-start;\n}\n.demo-cards .demo-separator {\n height: 32px;\n}\n.demo-cards .mdl-card__title.mdl-card__title {\n color: white;\n font-size: 24px;\n font-weight: 400;\n}\n.demo-cards ul {\n padding: 0;\n}\n.demo-cards h3 {\n font-size: 1em;\n}\n.demo-updates .mdl-card__title {\n min-height: 200px;\n background-image: url('images/dog.png');\n background-position: 90% 100%;\n background-repeat: no-repeat;\n}\n.demo-cards .mdl-card__actions a {\n color: #00BCD4;\n text-decoration: none;\n}\n\n.demo-options h3 {\n margin: 0;\n}\n.demo-options .mdl-checkbox__box-outline {\n border-color: rgba(255, 255, 255, 0.89);\n}\n.demo-options ul {\n margin: 0;\n list-style-type: none;\n}\n.demo-options li {\n margin: 4px 0;\n}\n.demo-options .material-icons {\n color: rgba(255, 255, 255, 0.89);\n}\n.demo-options .mdl-card__actions {\n height: 64px;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n}\n"
},
{
"path": "templates/portfolio/Tutorial/step01-initial-HTML-setup.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n\n\n\n\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/step02-MDL-layout-component.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n\n\n\n
\n \n
\n
\n Hello world!
\n \n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/step03-the-grid-component.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
Cell 1
\n
Cell 2
\n
Cell 3
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/step04-customising-the-layout.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
\n
Blog template
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Sunt nulla
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Android.com website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Dashboard template
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Text-heavy website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Ex officia laborum
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Stand-alone article
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
MDL website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Consequat ut quis
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/step05-individual-pages/about.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n\n
\n
\n
About
\n \n
\n\n
\n
Introduction
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n\n\n\n\n
Irure mollit est sit labore
\n\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n
\n
\n\n\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/step05-individual-pages/blog.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
\n
Velit anim eiusmod labore sit amet
\n
\n
Posted 2 days ago\n
share
\n
\n Share via social media\n
\n
\n
\n
Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Qui ullamco consectetur aute fugiat officia ullamco proident Lorem ad irure. Sint eu ut consectetur ut esse veniam laboris adipisicing aliquip minim anim labore commodo.
\n
Category: Latest\n
\n
\n
\n
\n
\n
Voluptate voluptate
\n \n
\n
\n
Posted 2 days ago\n
share
\n
\n Share via social media\n
\n
\n
\n
Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in.
\n
\n
\n
\n
\n
\n Pamukkale.jpg\n
\n
\n
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit.\n
\n
\n
Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Qui ullamco consectetur aute fugiat officia ullamco proident Lorem ad irure. Sint eu ut consectetur ut esse veniam.
\n
\n
\n
\n
\n
\n Conference event:
\n May 24, 2016
\n 7-11pm\n
\n \n
\n
\n
\n
\n
adipiscing
\n \n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.\n
\n
\n
\n
\n
\n
\n
Loren
\n \n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/step05-individual-pages/contact.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
Contact
\n \n
\n
\n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet.\n
\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/step05-individual-pages/index.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
\n
Blog template
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Sunt nulla
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Android.com website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Dashboard template
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Text-heavy website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Ex officia laborum
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Stand-alone article
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
MDL website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Consequat ut quis
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/step05-individual-pages/portfolio-example01.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
Blog template
\n \n
\n
\n Includes\n Design, UX and Frontend Development\n
\n
\n
Introduction
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n
\n
![\"\"](\")
\n
\n
Initial Idea's
\n
\n
\n
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n
Final Concept
\n
\n
\n
\n
\n
\n
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/Tutorial/styles.css",
"content": "\n.portfolio-header {\n position: relative;\n background-color: #D8D8D8;\n background-image: url(images/header-bg.jpg);\n}\n\n.portfolio-header .mdl-layout__header-row {\n padding: 0;\n justify-content: center;\n}\n\n.portfolio-navigation-row {\n background-color: rgba(0, 0, 0, 0.08);\n text-transform: uppercase;\n height: 45px;\n}\n\n.portfolio-navigation-row .mdl-navigation {\n text-align: center;\n max-width: 900px;\n width: 100%;\n}\n\n.portfolio-navigation-row .mdl-navigation__link {\n flex: 1;\n line-height: 42px;\n}\n\n.portfolio-header .mdl-layout__drawer-button {\n background-color: rgba(197, 197, 197, 0.44);\n}\n\n.portfolio-navigation-row .is-active {\n position: relative;\n font-weight: bold;\n}\n\n.portfolio-navigation-row .is-active:after {\n content: \"\";\n width: 70%;\n height: 2px;\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n background-color: rgb(255,64,129);\n left: 15%;\n}\n\n\nimg.article-image {\n width: 100%;\n height: auto;\n}\n\n.portfolio-max-width {\n max-width: 900px;\n margin: auto;\n}\n\n.portfolio-copy {\n max-width: 700px;\n}\n\n.portfolio-card .mdl-card__title {\n padding-bottom: 0;\n}\n\n.no-padding {\n padding: 0;\n}\n\n.no-left-padding{\n padding-left: 0;\n}\n\n.no-bottom-padding {\n padding-bottom: 0;\n}\n\n.padding-top {\n padding: 10px 0 0;\n}\n\n.portfolio-share-btn {\n position: relative;\n float: right;\n top: -4px;\n}\n\n.demo-card-event > .mdl-card__actions {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n}\n\n.portfolio-contact .mdl-textfield {\n width: 100%;\n}\n\n.portfolio-contact form {\n max-width: 700px;\n margin: auto;\n}"
},
{
"path": "templates/portfolio/about.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n\n
\n
\n
About
\n \n
\n\n
\n
Introduction
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n\n\n\n\n
Irure mollit est sit labore
\n\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n
\n
\n\n\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/blog.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
\n
Velit anim eiusmod labore sit amet
\n
\n
Posted 2 days ago\n
share
\n
\n Share via social media\n
\n
\n
\n
Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Qui ullamco consectetur aute fugiat officia ullamco proident Lorem ad irure. Sint eu ut consectetur ut esse veniam laboris adipisicing aliquip minim anim labore commodo.
\n
Category: Latest\n
\n
\n
\n
\n
\n
Voluptate voluptate
\n \n
\n
\n
Posted 2 days ago\n
share
\n
\n Share via social media\n
\n
\n
\n
Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in.
\n
\n
\n
\n
\n
\n Pamukkale.jpg\n
\n
\n
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit.\n
\n
\n
Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Qui ullamco consectetur aute fugiat officia ullamco proident Lorem ad irure. Sint eu ut consectetur ut esse veniam.
\n
\n
\n
\n
\n
\n Conference event:
\n May 24, 2016
\n 7-11pm\n
\n \n
\n
\n
\n
\n
adipiscing
\n \n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.\n
\n
\n
\n
\n
\n
\n
Loren
\n \n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/contact.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
Contact
\n \n
\n
\n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet.\n
\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/index.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n\n\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
\n
Blog template
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Sunt nulla
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Android.com website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Dashboard template
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Text-heavy website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Ex officia laborum
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Stand-alone article
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
MDL website
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n
\n
Consequat ut quis
\n \n
\n Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/portfolio-example01.html",
"content": "\n\n\n\n\n
\n
\n
\n
\n
MDL-Static Website\n
\n
\n
\n
\n\n\n\n
\n \n
\n
\n \n
\n
\n
Blog template
\n \n
\n
\n Includes\n Design, UX and Frontend Development\n
\n
\n
Introduction
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n
\n
\n
\n
Initial Ideas
\n
\n
\n
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n
Final Concept
\n
\n
\n
\n
\n
\n
\n
\n
\n Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.\n
\n
\n
\n
\n
\n
\n \n\n\n\n"
},
{
"path": "templates/portfolio/styles.css",
"content": ".portfolio-header {\n position: relative;\n background-image: url(images/header-bg.jpg);\n}\n\n.portfolio-header .mdl-layout__header-row {\n padding: 0;\n justify-content: center;\n}\n\n.mdl-layout__title {\n font-size: 14px;\n text-align: center;\n font-weight: 300;\n}\n\n.is-compact .mdl-layout__title span {\n display: none;\n}\n\n.portfolio-logo-row {\n min-height: 200px;\n}\n\n.is-compact .portfolio-logo-row {\n min-height: auto;\n}\n\n.portfolio-logo {\n background: url(images/logo.png) 50% no-repeat;\n background-size: cover;\n height: 150px;\n width: 150px;\n margin: auto auto 10px;\n}\n\n.is-compact .portfolio-logo {\n height: 50px;\n width: 50px;\n margin-top: 7px;\n}\n\n.portfolio-navigation-row {\n background-color: rgba(0, 0, 0, 0.08);\n text-transform: uppercase;\n height: 45px;\n}\n\n.portfolio-navigation-row .mdl-navigation {\n text-align: center;\n max-width: 900px;\n width: 100%;\n}\n\n.portfolio-navigation-row .mdl-navigation__link {\n flex: 1;\n line-height: 42px;\n}\n\n.portfolio-header .mdl-layout__drawer-button {\n background-color: rgba(197, 197, 197, 0.44);\n}\n\n.portfolio-navigation-row .is-active {\n position: relative;\n font-weight: bold;\n}\n\n.portfolio-navigation-row .is-active:after {\n content: \"\";\n width: 70%;\n height: 2px;\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n background-color: rgb(255,64,129);\n left: 15%;\n}\n\n.portfolio-card .mdl-card__title {\n padding-bottom: 0;\n}\n\n.portfolio-blog-card-full-bg {\n background: url(images/example-blog03.jpg) center / cover;\n}\n\n.portfolio-blog-card-event-bg {\n background: url(images/example-blog05.jpg) center / cover;\n}\n\n.portfolio-blog-card-strip-bg {\n background: url(images/example-blog06.jpg) center / cover;\n}\n\n.portfolio-blog-card-compact .mdl-card__title {\n padding-bottom: 0;\n}\n\n.portfolio-blog-card-bg > .mdl-card__actions {\n height: 52px;\n padding: 16px;\n background: rgba(0, 0, 0, 0.2);\n}\n\nimg.article-image {\n width: 100%;\n height: auto;\n}\n\n.portfolio-max-width {\n max-width: 900px;\n margin: auto;\n}\n\n.portfolio-copy {\n max-width: 700px;\n}\n\n.no-padding {\n padding: 0;\n}\n\n.no-left-padding{\n padding-left: 0;\n}\n\n.no-bottom-padding {\n padding-bottom: 0;\n}\n\n.padding-top {\n padding: 10px 0 0;\n}\n\n.portfolio-share-btn {\n position: relative;\n float: right;\n top: -4px;\n}\n\n.demo-card-event > .mdl-card__actions {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n}\n\n.portfolio-contact .mdl-textfield {\n width: 100%;\n}\n\n.portfolio-contact form {\n max-width: 550px;\n margin: auto;\n}\n\nfooter {\n background-image: url(images/footer-background.png);\n background-size: cover;\n}\n\n"
},
{
"path": "templates/text-only/index.html",
"content": "\n\n\n \n
\n
\n
\n
\n
Material Design Lite\n\n \n
\n
\n\n \n
\n
\n
\n
\n\n \n
\n
\n\n
\n\n \n \n\n
\n
\n
\n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n
Features
\n Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.\n \n
\n
\n
\n \n
\n
Details
\n
\n
\n
Lorem ipsum dolor sit amet
\n Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis
proident minim.\n
\n
\n
\n
Lorem ipsum dolor sit amet
\n Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis
proident minim.\n
\n
\n
\n
Lorem ipsum dolor sit amet
\n Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis
proident minim.\n
\n
\n
\n
\n
\n \n
\n
Technology
\n Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse. Pariatur occaecat nisi laboris tempor laboris eiusmod qui id Lorem esse commodo in. Exercitation aute dolore deserunt culpa consequat elit labore incididunt elit anim.\n \n
\n
\n \n
\n
\n \n
Features
\n Minim duis incididunt est cillum est ex occaecat consectetur. Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.\n
\n\n
Lorem ipsum dolor sit amet
\n Excepteur et pariatur officia veniam anim culpa cupidatat consequat ad velit culpa est non.\n
\n - Nisi qui nisi duis commodo duis reprehenderit consequat velit aliquip.
\n - Dolor consectetur incididunt in ipsum laborum non et irure pariatur excepteur anim occaecat officia sint.
\n - Lorem labore proident officia excepteur do.
\n
\n\n
\n Sit qui est voluptate proident minim cillum in aliquip cupidatat labore pariatur id tempor id. Proident occaecat occaecat sint mollit tempor duis dolor cillum anim. Dolore sunt ea mollit fugiat in aliqua consequat nostrud aliqua ut irure in dolore. Proident aliqua culpa sint sint exercitation. Non proident occaecat reprehenderit veniam et proident dolor id culpa ea tempor do dolor. Nulla adipisicing qui fugiat id dolor. Nostrud magna voluptate irure veniam veniam labore ipsum deserunt adipisicing laboris amet eu irure. Sunt dolore nisi velit sit id. Nostrud voluptate labore proident cupidatat enim amet Lorem officia magna excepteur occaecat eu qui. Exercitation culpa deserunt non et tempor et non.\n
\n
\n Do dolor eiusmod eu mollit dolore nostrud deserunt cillum irure esse sint irure fugiat exercitation. Magna sit voluptate id in tempor elit veniam enim cupidatat ea labore elit. Aliqua pariatur eu nulla labore magna dolore mollit occaecat sint commodo culpa. Eu non minim duis pariatur Lorem quis exercitation. Sunt qui ex incididunt sit anim incididunt sit elit ad officia id.\n
\n
\n Tempor voluptate ex consequat fugiat aliqua. Do sit et reprehenderit culpa deserunt culpa. Excepteur quis minim mollit irure nulla excepteur enim quis in laborum. Aliqua elit voluptate ad deserunt nulla reprehenderit adipisicing sint. Est in eiusmod exercitation esse commodo. Ea reprehenderit exercitation veniam adipisicing minim nostrud. Veniam dolore ex ea occaecat non enim minim id ut aliqua adipisicing ad. Occaecat excepteur aliqua tempor cupidatat aute dolore deserunt ipsum qui incididunt aliqua occaecat sit quis. Culpa sint aliqua aliqua reprehenderit veniam irure fugiat ea ad.\n
\n
\n Eu minim fugiat laborum irure veniam Lorem aliqua enim. Aliqua veniam incididunt consequat irure consequat tempor do nisi deserunt. Elit dolore ad quis consectetur sint laborum anim magna do nostrud amet. Ea nulla sit consequat quis qui irure dolor. Sint deserunt excepteur consectetur magna irure. Dolor tempor exercitation dolore pariatur incididunt ut laboris fugiat ipsum sunt veniam aute sunt labore. Non dolore sit nostrud eu ad excepteur cillum eu ex Lorem duis.\n
\n
\n Id occaecat velit non ipsum occaecat aliqua quis ut. Eiusmod est magna non esse est ex incididunt aute ullamco. Cillum excepteur sint ipsum qui quis velit incididunt amet. Qui deserunt anim enim laborum cillum reprehenderit duis mollit amet ad officia enim. Minim sint et quis aliqua aliqua do minim officia dolor deserunt ipsum laboris. Nulla nisi voluptate consectetur est voluptate et amet. Occaecat ut quis adipisicing ad enim. Magna est magna sit duis proident veniam reprehenderit fugiat reprehenderit enim velit ex. Ullamco laboris culpa irure aliquip ad Lorem consequat veniam ad ipsum eu. Ipsum culpa dolore sunt officia laborum quis.\n
\n\n
Lorem ipsum dolor sit amet
\n\n
\n Eiusmod nulla aliquip ipsum reprehenderit nostrud non excepteur mollit amet esse est est dolor. Dolore quis pariatur sit consectetur veniam esse ullamco duis Lorem qui enim ut veniam. Officia deserunt minim duis laborum dolor in velit pariatur commodo ullamco eu. Aute adipisicing ad duis labore laboris do mollit dolor cillum sunt aliqua ullamco. Esse tempor quis cillum consequat reprehenderit. Adipisicing proident anim eu sint elit aliqua anim dolore cupidatat fugiat aliquip qui.\n
\n
\n Nisi eiusmod esse cupidatat excepteur exercitation ipsum reprehenderit nostrud deserunt aliqua ullamco. Anim est irure commodo eiusmod pariatur officia. Est dolor ipsum excepteur magna aliqua ad veniam irure qui occaecat eiusmod aute fugiat commodo. Quis mollit incididunt amet sit minim velit eu fugiat voluptate excepteur. Sit minim id pariatur ex cupidatat cupidatat nostrud nostrud ipsum.\n
\n
\n Enim ea officia excepteur ad veniam id reprehenderit eiusmod esse mollit consequat. Esse non aute ullamco Lorem aliqua qui dolore irure eiusmod aute aliqua proident labore aliqua. Ipsum voluptate voluptate exercitation laborum deserunt nulla elit aliquip et minim ex veniam. Duis cupidatat aute sunt officia mollit dolor ad elit ad aute labore nostrud duis pariatur. In est sint voluptate consectetur velit ea non labore. Ut duis ea aliqua consequat nulla laboris fugiat aute id culpa proident. Minim eiusmod laboris enim Lorem nisi excepteur mollit voluptate enim labore reprehenderit officia mollit.\n
\n
\n Cupidatat labore nisi ut sunt voluptate quis sunt qui ad Lorem esse nisi. Ex esse velit ullamco incididunt occaecat dolore veniam tempor minim adipisicing amet. Consequat in exercitation est elit anim consequat cillum sint labore cillum. Aliquip mollit laboris ad labore anim.\n
\n
\n
\n
\n
View Source\n \n \n\n"
},
{
"path": "templates/text-only/styles.css",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nhtml, body {\n font-family: 'Roboto', 'Helvetica', sans-serif;\n margin: 0;\n padding: 0;\n}\n.mdl-demo .mdl-layout__header-row {\n padding-left: 40px;\n}\n.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {\n font-size: inherit;\n}\n.mdl-demo .mdl-layout__tab-bar-button {\n display: none;\n}\n.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button {\n display: none;\n}\n.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,\n.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {\n overflow: visible;\n}\n.mdl-demo .mdl-layout__tab-bar-container {\n height: 64px;\n}\n.mdl-demo .mdl-layout__tab-bar {\n padding: 0;\n padding-left: 16px;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n}\n.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {\n height: 64px;\n line-height: 64px;\n}\n.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after {\n background-color: white;\n height: 4px;\n}\n.mdl-demo main > .mdl-layout__tab-panel {\n padding: 8px;\n padding-top: 48px;\n}\n.mdl-demo .mdl-card {\n height: auto;\n display: flex;\n flex-direction: column;\n}\n.mdl-demo .mdl-card > * {\n height: auto;\n}\n.mdl-demo .mdl-card .mdl-card__supporting-text {\n margin: 40px;\n flex-grow: 1;\n padding: 0;\n color: inherit;\n width: calc(100% - 80px);\n}\n.mdl-demo.mdl-demo .mdl-card__supporting-text h4 {\n margin-top: 0;\n margin-bottom: 20px;\n}\n.mdl-demo .mdl-card__actions {\n margin: 0;\n padding: 4px 40px;\n color: inherit;\n}\n.mdl-demo .mdl-card__actions a {\n color: #00BCD4;\n margin: 0;\n}\n.mdl-demo .mdl-card__actions a:hover,\n.mdl-demo .mdl-card__actions a:active {\n color: inherit;\n background-color: transparent;\n}\n.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {\n border-top: 1px solid rgba(0, 0, 0, 0.12);\n}\n.mdl-demo #add {\n position: absolute;\n right: 40px;\n top: 36px;\n z-index: 999;\n}\n\n.mdl-demo .mdl-layout__content section:not(:last-of-type) {\n position: relative;\n margin-bottom: 48px;\n}\n.mdl-demo section.section--center {\n max-width: 860px;\n}\n.mdl-demo #features section.section--center {\n max-width: 620px;\n}\n.mdl-demo section > header{\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.mdl-demo section > .section__play-btn {\n min-height: 200px;\n}\n.mdl-demo section > header > .material-icons {\n font-size: 3rem;\n}\n.mdl-demo section > button {\n position: absolute;\n z-index: 99;\n top: 8px;\n right: 8px;\n}\n.mdl-demo section .section__circle {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-grow: 0;\n flex-shrink: 1;\n}\n.mdl-demo section .section__text {\n flex-grow: 1;\n flex-shrink: 0;\n padding-top: 8px;\n}\n.mdl-demo section .section__text h5 {\n font-size: inherit;\n margin: 0;\n margin-bottom: 0.5em;\n}\n.mdl-demo section .section__text a {\n text-decoration: none;\n}\n.mdl-demo section .section__circle-container > .section__circle-container__circle {\n width: 64px;\n height: 64px;\n border-radius: 32px;\n margin: 8px 0;\n}\n.mdl-demo section.section--footer .section__circle--big {\n width: 100px;\n height: 100px;\n border-radius: 50px;\n margin: 8px 32px;\n}\n.mdl-demo .is-small-screen section.section--footer .section__circle--big {\n width: 50px;\n height: 50px;\n border-radius: 25px;\n margin: 8px 16px;\n}\n.mdl-demo section.section--footer {\n padding: 64px 0;\n margin: 0 -8px -8px -8px;\n}\n.mdl-demo section.section--center .section__text:not(:last-child) {\n border-bottom: 1px solid rgba(0,0,0,.13);\n}\n.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child {\n margin-bottom: 24px;\n}\n.mdl-demo .mdl-layout__tab-panel:not(#overview) {\n background-color: white;\n}\n.mdl-demo #features section {\n margin-bottom: 72px;\n}\n.mdl-demo #features h4, #features h5 {\n margin-bottom: 16px;\n}\n.mdl-demo .toc {\n border-left: 4px solid #C1EEF4;\n margin: 24px;\n padding: 0;\n padding-left: 8px;\n display: flex;\n flex-direction: column;\n}\n.mdl-demo .toc h4 {\n font-size: 0.9rem;\n margin-top: 0;\n}\n.mdl-demo .toc a {\n color: #4DD0E1;\n text-decoration: none;\n font-size: 16px;\n line-height: 28px;\n display: block;\n}\n.mdl-demo .mdl-menu__container {\n z-index: 99;\n}\n"
},
{
"path": "test/index.html",
"content": "\n\n\n
\n
\n
\n
Mocha Test Runner\n
\n
\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
},
{
"path": "test/memory/blank.html",
"content": "
\n\n\n \n \n \n \n\n"
},
{
"path": "test/memory/menu.js",
"content": "var path = require('path');\nvar drool = require('drool');\nvar heapDiffPrinter = require('./utils.js').heapDiffPrinter;\nvar webdriver = drool.webdriver;\n\nmodule.exports = function(stamps, i, driver) {\n drool.flow({\n setup: function() {\n driver.get('file://' + path.join(__dirname, '../../dist/components/menu/demo.html'));\n },\n action: function() {\n driver.findElement(webdriver.By.css('#demo-menu-lower-left')).click();\n driver.sleep(1000);\n driver.findElement(webdriver.By.css('#demo-menu-lower-left')).click();\n },\n beforeAssert: function() {\n driver.sleep(1000);\n },\n assert: function(after, initial) {\n heapDiffPrinter(after, initial, i, 'menu');\n stamps.push([after.counts.jsEventListeners, initial.counts.jsEventListeners]);\n }\n }, driver);\n};\n"
},
{
"path": "test/memory/snackbar.js",
"content": "var path = require('path');\nvar drool = require('drool');\nvar heapDiffPrinter = require('./utils.js').heapDiffPrinter;\n\nmodule.exports = function(stamps, i, driver) {\n drool.flow({\n setup: function() {\n driver.get('file://' + path.join(__dirname, '../../dist/components/snackbar/demo.html'));\n },\n action: function() {\n driver.executeScript('document.querySelector(\"#demo-snackbar-example\").MaterialSnackbar.showSnackbar({message: \"🐐\", timeout: 300})');\n driver.sleep(400);\n },\n beforeAssert: function() {\n driver.sleep(400);\n },\n assert: function(after, initial) {\n heapDiffPrinter(after, initial, i, 'snackbar');\n stamps.push([after.counts.jsEventListeners, initial.counts.jsEventListeners]);\n }\n }, driver);\n}\n"
},
{
"path": "test/memory/test.js",
"content": "'use strict';\n\nvar drool = require('drool');\nvar assert = require('assert');\nvar webdriver = drool.webdriver;\nvar controlFlow = webdriver.promise.controlFlow();\nvar measureSnackbar = require('./snackbar');\nvar measureMenu = require('./menu');\nvar measureUpgradeDowngrade = require('./upgrade-downgrade');\nvar driver = drool.start({chromeOptions: 'no-sandbox'});\nvar snackbarStamps = [];\nvar menuStamps = [];\n\n// commented out tests require special DOM to bootstrap\n['MaterialButton',\n 'MaterialSpinner',\n 'MaterialTooltip',\n// 'MaterialCheckbox',\n// 'MaterialIconToggle',\n 'MaterialDataTable',\n// 'MaterialIconToggle',\n// 'MaterialLayout',\n// 'MaterialMenu',\n 'MaterialProgress',\n// 'MaterialRadio',\n 'MaterialRipple',\n// 'MaterialSlider',\n// 'MaterialSnackbar',\n// 'MaterialSwitch',\n 'MaterialTabs',\n// 'MaterialTextfield',\n].forEach(function(v) {\n measureUpgradeDowngrade([], 0, driver, v);\n});\n\nfor (var i = 0; i < 3; ++i) {\n measureSnackbar(snackbarStamps, i, driver);\n}\n\nfor (var i = 0; i < 3; ++i) {\n measureMenu(menuStamps, i, driver);\n}\n\ncontrolFlow.execute(function() {\n snackbarStamps.some(function(stamp) {\n assert.equal(true, stamp[0] <= stamp[1]);\n return true;\n });\n\n menuStamps.some(function(stamp) {\n assert.equal(true, stamp[0] <= stamp[1]);\n return true;\n });\n});\n\ndriver.quit();\n"
},
{
"path": "test/memory/upgrade-downgrade.js",
"content": "var path = require('path');\nvar drool = require('drool');\nvar heapDiffPrinter = require('./utils.js').heapDiffPrinter;\nvar webdriver = drool.webdriver;\n\nmodule.exports = function(stamps, i, driver, component) {\n drool.flow({\n setup: function() {\n driver.get('file://' + path.join(__dirname, 'blank.html'));\n },\n action: function() {\n driver.executeScript(\"(function() { var e = document.createElement('div');\" +\n \"componentHandler.upgradeElement(e, '\"+ component + \"');\" +\n \"componentHandler.downgradeElements(e);})()\");\n },\n assert: function(after, initial) {\n heapDiffPrinter(after, initial, i, component);\n }\n }, driver);\n};\n"
},
{
"path": "test/memory/utils.js",
"content": "var humanize = require('humanize');\n\nmodule.exports = {\n heapDiffPrinter: function(after, initial, i, title) {\n console.log('**' + title + '** .. run: ' + (i + 1) + '\\n');\n console.log('node delta | heap delta | event listener');\n console.log('--- | --- | --- |');\n console.log((after.counts.nodes - initial.counts.nodes) + '|' +\n humanize.filesize(after.counts.jsHeapSizeUsed - initial.counts.jsHeapSizeUsed) + '|' +\n (after.counts.jsEventListeners - initial.counts.jsEventListeners) + '\\n');\n }\n};\n"
},
{
"path": "test/unit/button.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialButton', function () {\n\n it('should be globally available', function () {\n expect(MaterialButton).to.be.a('function');\n });\n\n it('should ugprade successfully', function () {\n var el = document.createElement('button');\n componentHandler.upgradeElement(el, 'MaterialButton');\n expect($(el)).to.have.data('upgraded', ',MaterialButton');\n });\n\n it('should be upgrade to a raised button with ripples successfully', function () {\n var el = document.createElement('div');\n el.innerHTML = '';\n var btn = el.firstChild;\n componentHandler.upgradeElement(btn, 'MaterialButton');\n expect($(btn.childNodes[1])).to.have.class('mdl-button__ripple-container');\n expect($(btn.childNodes[1].firstChild)).to.have.class('mdl-ripple');\n });\n\n it('should be upgrade to a FAB with ripples successfully', function () {\n var el = document.createElement('div');\n el.innerHTML = '';\n var btn = el.firstChild;\n componentHandler.upgradeElement(btn, 'MaterialButton');\n expect($(btn.childNodes[1])).to.have.class('mdl-button__ripple-container');\n expect($(btn.childNodes[1].firstChild)).to.have.class('mdl-ripple');\n });\n\n});\n"
},
{
"path": "test/unit/checkbox.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialCheckbox', function () {\n\n function createCheckbox() {\n var label = document.createElement('label'),\n input = document.createElement('input'),\n labelText = document.createElement('span');\n label.for = 'testCheckbox';\n label.className = 'mdl-checkbox mdl-js-checkbox';\n input.type = 'checkbox';\n input.id = 'testCheckbox';\n input.className = 'mdl-checkbox__input';\n label.appendChild(input);\n labelText.className = 'mdl-checkbox__label';\n labelText.text = 'Test Checkbox';\n label.appendChild(labelText);\n return label;\n };\n\n it('should be globally available', function () {\n expect(MaterialCheckbox).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = createCheckbox();\n componentHandler.upgradeElement(el, 'MaterialCheckbox');\n expect($(el)).to.have.data('upgraded', ',MaterialCheckbox');\n });\n\n it('should get disabled class after being checked', function() {\n var checkbox = createCheckbox();\n componentHandler.upgradeElement(checkbox);\n checkbox.querySelector('input').disabled = true;\n checkbox.MaterialCheckbox.checkDisabled();\n expect((function() {\n return checkbox.className;\n }())).to.equal('mdl-checkbox mdl-js-checkbox is-upgraded is-disabled');\n });\n\n it('should get checked class after checking toggle state', function() {\n var checkbox = createCheckbox();\n componentHandler.upgradeElement(checkbox);\n checkbox.querySelector('input').checked = true;\n checkbox.MaterialCheckbox.checkToggleState();\n expect((function() {\n return checkbox.className;\n }())).to.equal('mdl-checkbox mdl-js-checkbox is-upgraded is-checked');\n });\n\n});\n"
},
{
"path": "test/unit/componentHandler.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*\n* Create a basic container to test nested ugprading.\n* container\n* - button\n* - buttonTwo\n* - buttonThree\n*/\nfunction createNestedElementsForComponentHandlerTest() {\n var button = document.createElement('button');\n button.className = 'mdl-js-button';\n var buttonTwo = document.createElement('button');\n buttonTwo.className = 'mdl-js-button';\n var buttonThree = document.createElement('button');\n buttonThree.className = 'mdl-js-button';\n var container = document.createElement('div');\n container.appendChild(button);\n button.appendChild(buttonTwo);\n container.appendChild(buttonThree);\n return container;\n}\n\nfunction createCheckbox(){\n var label = document.createElement('label');\n label.className = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';\n label.htmlFor = 'checkbox1';\n\n var input = document.createElement('input');\n input.setAttribute('type','checkbox');\n input.className = 'mdl-checkbox__input';\n input.id = 'checkbox1';\n label.appendChild(input);\n\n var span = document.createElement('span');\n span.className = 'mdl-checkbox__label';\n span.innerHTML = 'checkbox';\n label.appendChild(span);\n\n return label;\n}\n\ndescribe('componentHandler', function() {\n\n it('should be globally available', function() {\n expect(componentHandler).to.be.a('object');\n });\n\n it('should reveal public methods', function() {\n expect(componentHandler.upgradeDom).to.be.a('function');\n expect(componentHandler.upgradeElement).to.be.a('function');\n expect(componentHandler.upgradeAllRegistered).to.be.a('function');\n expect(componentHandler.registerUpgradedCallback).to.be.a('function');\n expect(componentHandler.register).to.be.a('function');\n expect(componentHandler.downgradeElements).to.be.a('function');\n });\n\n it('should throw an error if a duplicate classAsString is provided for registration', function() {\n expect(function() {\n componentHandler.register({\n constructor: MaterialButton,\n classAsString: 'MaterialButton',\n cssClass: 'test-js-button'\n });\n }).to.throw('The provided className has already been registered');\n });\n\n it('should throw an error if a duplicate cssClass is provided for registration', function() {\n expect(function() {\n componentHandler.register({\n constructor: MaterialButton,\n classAsString: 'TestButton',\n cssClass: 'mdl-js-button'\n });\n }).to.throw('The provided cssClass has already been registered');\n });\n\n it('should throw an error if the object provided has the component config property', function() {\n var testComponent = function() {};\n testComponent.prototype.mdlComponentConfigInternal_ = {};\n expect(function() {\n componentHandler.register({\n constructor: testComponent,\n classAsString: 'testComponent',\n cssClass: 'test-js-component'\n });\n }).to.throw('MDL component classes must not have mdlComponentConfigInternal_ defined as a property.');\n });\n\n it('should upgrade a single component to an element by provided jsClass', function() {\n var el = document.createElement('button');\n componentHandler.upgradeElement(el, 'MaterialButton');\n expect($(el)).to.have.data('upgraded', ',MaterialButton');\n });\n\n it('should upgrade a multi-component element by calling upgradeElement multiple times', function() {\n var el = document.createElement('button');\n componentHandler.upgradeElement(el, 'MaterialButton');\n componentHandler.upgradeElement(el, 'MaterialRipple');\n expect($(el)).to.have.data('upgraded', ',MaterialButton,MaterialRipple');\n });\n\n it('should upgrade a single component to an element by using its CSS classes', function() {\n var el = document.createElement('button');\n el.className = 'mdl-js-button mdl-js-ripple-effect';\n componentHandler.upgradeElement(el);\n expect($(el)).to.have.data('upgraded', ',MaterialButton,MaterialRipple');\n });\n\n it('should upgrade the entire DOM available', function() {\n var button = document.createElement('button');\n button.classList.add('mdl-js-button');\n var buttonTwo = document.createElement('div');\n buttonTwo.className = 'mdl-js-button mdl-js-ripple-effect';\n document.body.appendChild(button);\n document.body.appendChild(buttonTwo);\n componentHandler.upgradeDom();\n expect($(button)).to.have.data('upgraded', ',MaterialButton');\n expect($(buttonTwo)).to.have.data('upgraded', ',MaterialButton,MaterialRipple');\n document.body.removeChild(button);\n document.body.removeChild(buttonTwo);\n });\n\n it('should upgrade a single component to an element', function() {\n var el = document.createElement('button');\n el.setAttribute('data-upgraded', ',MaterialButtonPostfix');\n el.className = 'mdl-js-button';\n componentHandler.upgradeElement(el);\n expect($(el)).to.have.data('upgraded', ',MaterialButtonPostfix,MaterialButton');\n });\n\n it('should upgrade child elements created by parent upgrade', function () {\n var checkbox = createCheckbox();\n\n componentHandler.upgradeElements(checkbox);\n\n var child = checkbox.lastChild;\n expect($(child)).to.have.data('upgraded', ',MaterialRipple');\n });\n\n it('should upgrade all elements and their children within an HTMLCollection', function() {\n var container = createNestedElementsForComponentHandlerTest();\n var buttons = document.querySelectorAll('.mdl-js-button');\n componentHandler.upgradeElements(container.children);\n for (var i; i < buttons.length; i++) {\n expect($(buttons[i])).to.have.data('upgraded', ',MaterialButton');\n }\n });\n\n it('should upgrade all elements and their children within a NodeList', function() {\n var container = createNestedElementsForComponentHandlerTest();\n var buttons = document.querySelectorAll('.mdl-js-button');\n componentHandler.upgradeElements(document.querySelectorAll('.mdl-js-button'));\n for (var i; i < buttons.length; i++) {\n expect($(buttons[i])).to.have.data('upgraded', ',MaterialButton');\n }\n });\n\n it('should upgrade all elements and their children within an HTMLElement', function() {\n var container = createNestedElementsForComponentHandlerTest();\n var buttons = document.querySelectorAll('.mdl-js-button');\n componentHandler.upgradeElements(container);\n for (var i; i < buttons.length; i++) {\n expect($(buttons[i])).to.have.data('upgraded', ',MaterialButton');\n }\n });\n\n it('should downgrade multiple components at once', function() {\n var button = document.createElement('button');\n button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';\n componentHandler.upgradeElement(button);\n expect(button.dataset.upgraded).to.equal(',MaterialButton,MaterialRipple');\n componentHandler.downgradeElements(button);\n expect(button.dataset.upgraded).to.equal('');\n });\n});\n"
},
{
"path": "test/unit/data-table.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nvar TABLE_TEMPLATE = '' +\n '' +\n ' ' +\n ' | Material | ' +\n ' Quantity | ' +\n ' Unit price | ' +\n '
' +\n '' +\n '' +\n ' ' +\n ' | Acrylic (Transparent) | ' +\n ' 25 | ' +\n ' $2.90 | ' +\n '
' +\n ' ' +\n ' | Plywood (Birch) | ' +\n ' 50 | ' +\n ' $1.25 | ' +\n '
' +\n '' +\n '
';\n\ndescribe('MaterialDataTable', function () {\n\n it('should be globally available', function () {\n expect(MaterialDataTable).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = document.createElement('div');\n el.innerHTML = TABLE_TEMPLATE;\n\n componentHandler.upgradeElement(el, 'MaterialDataTable');\n expect($(el)).to.have.data('upgraded', ',MaterialDataTable');\n });\n\n it('should have is-checked class when the row has the is-selected class', function () {\n var el = document.createElement('div');\n el.innerHTML = TABLE_TEMPLATE;\n document.body.appendChild(el);\n table = document.querySelector('#data-table-test')\n componentHandler.upgradeElement(table, 'MaterialDataTable');\n expect(table.querySelector('.second-row label').classList.contains('is-checked')).to.be.true;\n });\n\n});"
},
{
"path": "test/unit/icon-toggle.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialIconToggle', function () {\n\n function createToggle() {\n var label = document.createElement('label');\n var input = document.createElement('input');\n var icon = document.createElement('i');\n label.className = 'mdl-icon-toggle mdl-js-icon-toggle';\n label.for = 'testIconToggle';\n input.id = label.for;\n input.type = 'checkbox';\n input.className = 'mdl-icon-toggle__input';\n label.appendChild(input);\n icon.className = 'mdl-icon-toggle__label material-icons';\n icon.text = 'format_bold';\n label.appendChild(icon);\n return label;\n };\n\n it('should be globally available', function () {\n expect(MaterialIconToggle).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = createToggle();\n componentHandler.upgradeElement(el, 'MaterialIconToggle');\n expect($(el)).to.have.data('upgraded', ',MaterialIconToggle');\n });\n\n});\n"
},
{
"path": "test/unit/layout.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialLayout', function () {\n\n MockMediaQueryList = function(media) {\n this.media = media;\n this.listeners = [];\n }\n\n MockMediaQueryList.registry = {};\n\n MockMediaQueryList.mockMatchMedia = function(query) {\n if (! MockMediaQueryList.registry.hasOwnProperty(query)) {\n MockMediaQueryList.registry[query] = new MockMediaQueryList(query);\n }\n return MockMediaQueryList.registry[query];\n }\n\n MockMediaQueryList.prototype.addListener = function(listener) {\n this.listeners.push(listener);\n }\n\n MockMediaQueryList.prototype.triggerMatch = function(matches) {\n this.matches = matches;\n this.listeners.forEach(function(listener) {\n // PhantomJS doesn't support MediaQueryListEvent() so mock the event.\n var event = {media: this.media, matches: this.matches};\n listener(event);\n }.bind(this));\n }\n\n it('should be globally available', function () {\n expect(MaterialLayout).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = document.createElement('div');\n el.innerHTML = '' +\n '' +\n '';\n\n var parent = document.createElement('div');\n parent.appendChild(el); // MaterialLayout.init() expects a parent\n\n componentHandler.upgradeElement(el, 'MaterialLayout');\n expect($(el)).to.have.data('upgraded', ',MaterialLayout');\n });\n\n describe('Click on the tabs', function (done) {\n var el;\n var tab1, tab2;\n var content1, content2;\n\n beforeEach(function() {\n el = document.createElement('div');\n el.innerHTML = '' +\n ' ' +\n ' ' +\n ' ' +\n ' ' +\n ' ' +\n ' ';\n\n var parent = document.createElement('div');\n parent.appendChild(el); // MaterialLayout.init() expects a parent\n\n tab1 = el.querySelector('#tab1');\n tab2 = el.querySelector('#tab2');\n content1 = el.querySelector('#scroll-tab-1');\n content2 = el.querySelector('#scroll-tab-2');\n\n componentHandler.upgradeElement(el, 'MaterialLayout');\n });\n\n it('should activate the second tab on click', function (done) {\n var ev = document.createEvent('MouseEvents');\n ev.initEvent('click', true, true);\n tab2.dispatchEvent(ev);\n\n window.setTimeout(function () {\n expect($(tab1)).to.not.have.class('is-active');\n expect($(content1)).to.not.have.class('is-active');\n expect($(tab2)).to.have.class('is-active');\n expect($(content2)).to.have.class('is-active');\n done();\n }, 100);\n });\n\n it('should activate the second tab on custom show method', function (done) {\n tab2.show();\n\n window.setTimeout(function () {\n expect($(tab1)).to.not.have.class('is-active');\n expect($(content1)).to.not.have.class('is-active');\n expect($(tab2)).to.have.class('is-active');\n expect($(content2)).to.have.class('is-active');\n done();\n }, 100);\n });\n });\n\n describe('Drawer', function () {\n var el;\n var drawer, drawerBtn;\n var navLink;\n\n beforeEach(function() {\n this.originalMatchMedia = window.MaterialLayout.prototype.matchMedia_;\n window.MaterialLayout.prototype.matchMedia_ = MockMediaQueryList.mockMatchMedia;\n window.patched = 'yes patched';\n\n el = document.createElement('div');\n el.innerHTML = '' +\n '' +\n '';\n\n var parent = document.createElement('div');\n parent.appendChild(el);\n\n componentHandler.upgradeElement(el, 'MaterialLayout');\n\n drawer = el.querySelector('.mdl-layout__drawer');\n drawerBtn = el.querySelector('.mdl-layout__drawer-button');\n navLink = el.querySelector('.mdl-layout__drawer a');\n });\n\n afterEach(function() {\n window.MaterialLayout.prototype.matchMedia_ = this.originalMatchMedia;\n });\n\n it('should have attribute aria-hidden=\"true\"', function () {\n var screenSizeHandler = MockMediaQueryList.registry[\n '(max-width: 1024px)'];\n\n // Expect hidden on small screen\n screenSizeHandler.triggerMatch(true);\n expect($(drawer)).to.have.attr('aria-hidden', 'true');\n\n // Expect hidden on wide screen\n screenSizeHandler.triggerMatch(false);\n expect($(drawer)).to.have.attr('aria-hidden', 'true');\n });\n\n it('should have attribute aria-hidden=\"false\" for fixed drawer', function () {\n $(el).addClass('mdl-layout--fixed-drawer');\n\n var screenSizeHandler = MockMediaQueryList.registry[\n '(max-width: 1024px)'];\n\n // Expect hidden on small screen\n screenSizeHandler.triggerMatch(true);\n expect($(drawer)).to.have.attr('aria-hidden', 'true');\n\n // Expect shown on wide screen\n screenSizeHandler.triggerMatch(true);\n expect($(drawer)).to.have.attr('aria-hidden', 'true');\n });\n\n it('button should have attribute aria-expanded=\"false\"', function () {\n expect($(drawerBtn)).to.have.attr('aria-expanded', 'false');\n });\n\n it('and drawer button should have correct values for attributes aria-hidden and aria-expanded', function () {\n var ev = document.createEvent('MouseEvents');\n ev.initEvent('click', true, true);\n drawerBtn.dispatchEvent(ev);\n\n expect($(drawer)).to.have.attr('aria-hidden', 'false');\n expect($(drawerBtn)).to.have.attr('aria-expanded', 'true');\n });\n\n it('should be closed on hit ESCAPE', function () {\n var ev = document.createEvent('KeyboardEvent');\n ev.initEvent('keydown', true, true, null, false, false, false, false, 27, 0);\n drawer.dispatchEvent(ev);\n\n expect($(drawer)).to.not.have.class('is-visible');\n expect($(drawer)).to.have.attr('aria-hidden', 'true');\n expect($(drawerBtn)).to.have.attr('aria-expanded', 'false');\n });\n });\n\n describe('Manual switch mode', function () {\n it('should disable content switching', function (done) {\n var el = document.createElement('div');\n el.innerHTML = '' +\n ' ' +\n ' ' +\n ' ' +\n ' ' +\n ' ';\n\n var parent = document.createElement('div');\n parent.appendChild(el); // MaterialLayout.init() expects a parent\n\n var tab1 = el.querySelector('#tab1');\n var tab2 = el.querySelector('#tab2');\n var content1 = el.querySelector('#scroll-tab-1');\n var content2 = el.querySelector('#scroll-tab-2');\n\n componentHandler.upgradeElement(el, 'MaterialLayout');\n\n var ev = document.createEvent('MouseEvents');\n ev.initEvent('click', true, true);\n tab2.dispatchEvent(ev);\n\n window.setTimeout(function() {\n // Since content switching has been set to manual, layout shouldn't\n // have been switched.\n expect($(tab1)).to.have.class('is-active');\n expect($(content1)).to.have.class('is-active');\n expect($(tab2)).to.not.have.class('is-active');\n expect($(content2)).to.not.have.class('is-active');\n done();\n }, 100);\n });\n });\n});\n"
},
{
"path": "test/unit/menu.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialMenu', function () {\n\n it('should be globally available', function () {\n expect(MaterialMenu).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var parent = document.createElement('div'), // parent must exist for MaterialMenu.init()\n el = document.createElement('ul');\n parent.appendChild(el)\n\n componentHandler.upgradeElement(el, 'MaterialMenu');\n expect($(el)).to.have.data('upgraded', ',MaterialMenu');\n });\n\n describe ('visibility API', function () {\n var parent;\n var el;\n\n before(function() {\n parent = document.createElement('div'); // parent must exist for MaterialMenu.init()\n el = document.createElement('ul');\n parent.appendChild(el)\n componentHandler.upgradeElement(el, 'MaterialMenu');\n });\n\n it('should start the showing animation on show()', function(done) {\n expect($(el.parentElement)).to.not.have.class('is-visible');\n el.MaterialMenu.show();\n window.setTimeout(function() {\n expect($(el.parentElement)).to.have.class('is-visible');\n\n var ev = document.createEvent('HTMLEvents');\n ev.initEvent('transitionend', true, true)\n el.dispatchEvent(ev);\n done();\n }, 100);\n });\n\n it('should start the hiding animation on hide()', function(done) {\n expect($(el.parentElement)).to.have.class('is-visible');\n el.MaterialMenu.hide();\n window.setTimeout(function() {\n expect($(el.parentElement)).to.not.have.class('is-visible');\n\n var ev = document.createEvent('HTMLEvents');\n ev.initEvent('transitionend', true, true)\n el.dispatchEvent(ev);\n done();\n }, 100);\n });\n\n it('should start the showing animating on toggle() when invisible', function(done) {\n expect($(el.parentElement)).to.not.have.class('is-visible');\n el.MaterialMenu.toggle();\n window.setTimeout(function() {\n expect($(el.parentElement)).to.have.class('is-visible');\n\n var ev = document.createEvent('HTMLEvents');\n ev.initEvent('transitionend', true, true)\n el.dispatchEvent(ev);\n done();\n }, 100);\n });\n\n it('should start the hiding animating on toggle() when visible', function(done) {\n expect($(el.parentElement)).to.have.class('is-visible');\n el.MaterialMenu.toggle();\n window.setTimeout(function() {\n expect($(el.parentElement)).to.not.have.class('is-visible');\n\n var ev = document.createEvent('HTMLEvents');\n ev.initEvent('transitionend', true, true)\n el.dispatchEvent(ev);\n done();\n }, 100);\n });\n\n });\n\n it('Should be made visible on button click', function (done) {\n var ctr = document.createElement('div')\n ctr.innerHTML = '' +\n '';\n document.body.appendChild(ctr); // `for` only works in document\n\n var el = ctr.querySelector('ul');\n componentHandler.upgradeElement(el, 'MaterialMenu');\n\n var ev = document.createEvent('MouseEvents');\n ev.initEvent('click', true, true);\n ctr.querySelector('#clickable').dispatchEvent(ev);\n window.setTimeout(function() {\n expect($(el.parentElement)).to.have.class('is-visible');\n document.body.removeChild(ctr);\n done();\n }, 100);\n });\n\n});\n"
},
{
"path": "test/unit/progress.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialProgress', function () {\n\n it('should be globally available', function () {\n expect(MaterialProgress).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialProgress');\n expect($(el)).to.have.data('upgraded', ',MaterialProgress');\n });\n\n it('should be a widget', function () {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialProgress');\n expect(el.MaterialProgress).to.be.a('object');\n });\n\n it('should have public methods available', function () {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialProgress');\n methods = [\n 'setBuffer',\n 'setProgress'\n ];\n methods.forEach(function(item) {\n expect(el.MaterialProgress[item]).to.be.a('function');\n });\n });\n\n});\n"
},
{
"path": "test/unit/radio.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialRadio', function () {\n\n function createRadio() {\n return createRadioWithValues('flash', 'on');\n };\n\n function createRadioWithValues(name, value) {\n var label = document.createElement('label');\n var input = document.createElement('input');\n var labelText = document.createElement('span');\n label.for = 'testRadio';\n input.id = label.for;\n label.className = 'mdl-radio mdl-js-radio';\n input.className = 'mdl-radio__button';\n input.type = 'radio';\n input.name = name;\n input.value = value;\n label.appendChild(input);\n labelText.className = 'mdl-radio__label';\n labelText.text = 'Always on';\n label.appendChild(labelText);\n return label;\n }\n\n it('should be globally available', function () {\n expect(MaterialRadio).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = createRadio();\n componentHandler.upgradeElement(el, 'MaterialRadio');\n expect($(el)).to.have.data('upgraded', ',MaterialRadio');\n });\n\n it('should be a widget', function() {\n var radio = createRadio();\n componentHandler.upgradeElement(radio);\n expect(radio.MaterialRadio).to.be.a('object');\n });\n\n it('should have all public methods available in widget', function() {\n var radio = createRadio();\n componentHandler.upgradeElement(radio);\n var methods = [\n 'disable',\n 'enable',\n 'uncheck',\n 'check',\n 'checkDisabled',\n 'checkToggleState'\n ];\n methods.forEach(function(item) {\n expect(radio.MaterialRadio[item]).to.be.a('function');\n });\n });\n\n it('should get disabled class after being checked', function() {\n var radio = createRadio();\n componentHandler.upgradeElement(radio);\n radio.querySelector('input').disabled = true;\n radio.MaterialRadio.checkDisabled();\n expect((function() {\n return radio.className;\n }())).to.equal('mdl-radio mdl-js-radio is-upgraded is-disabled');\n });\n\n it('should get checked class after checking toggle state', function() {\n var radio = createRadio();\n componentHandler.upgradeElement(radio);\n radio.querySelector('input').checked = true;\n radio.MaterialRadio.checkToggleState();\n expect((function() {\n return radio.className;\n }())).to.equal('mdl-radio mdl-js-radio is-upgraded is-checked');\n });\n\n it('should update related radios on one changing', function() {\n var radios = [];\n radios.push(createRadioWithValues('test', 'one'));\n radios.push(createRadioWithValues('test', 'two'));\n radios.push(createRadioWithValues('test', 'three'));\n radios.push(createRadioWithValues('tester', 'A'));\n radios.push(createRadioWithValues('tester', 'B'));\n radios.push(createRadioWithValues('tester', 'C'));\n var container = document.createElement('div');\n radios.forEach(function(item) {\n container.appendChild(item);\n componentHandler.upgradeElement(item);\n });\n document.body.appendChild(container);\n\n // Prepare the change event for manual firing.\n // Used to trigger sibling checking as if UX triggered.\n var changeEvent = document.createEvent(\"HTMLEvents\");\n changeEvent.initEvent(\"change\", false, true);\n\n // Check that all inputs are in a clean state\n Array.prototype.splice(document.querySelectorAll('[type=\"radio\"]')).forEach(function(item) {\n expect(item.parentElement.className).to.equal('mdl-radio mdl-js-radio is-upgraded');\n });\n\n radios[0].MaterialRadio.check();\n radios[0].querySelector('input').dispatchEvent(changeEvent);\n expect(radios[0].className).to.equal('mdl-radio mdl-js-radio is-upgraded is-checked');\n\n radios[1].MaterialRadio.check();\n radios[1].querySelector('input').dispatchEvent(changeEvent);\n expect(radios[1].className).to.equal('mdl-radio mdl-js-radio is-upgraded is-checked');\n expect(radios[0].className).to.equal('mdl-radio mdl-js-radio is-upgraded');\n\n // Check the extra radio set to verify things with different names are not touched when changing.\n Array.prototype.splice(document.querySelectorAll('[type=\"radio\"][name=\"tester\"]')).forEach(function(item) {\n expect(item.parentElement.className).to.equal('mdl-radio mdl-js-radio is-upgraded');\n });\n\n });\n});"
},
{
"path": "test/unit/ripple.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialRipple', function () {\n\n it('should be globally available', function () {\n expect(MaterialRipple).to.be.a('function');\n });\n\n});\n"
},
{
"path": "test/unit/slider.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialSlider', function () {\n\n it('should be globally available', function () {\n expect(MaterialSlider).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = document.createElement('input');\n el.type = 'range';\n\n var parent = document.createElement('div');\n parent.appendChild(el);\n\n componentHandler.upgradeElement(el, 'MaterialSlider');\n expect($(el)).to.have.data('upgraded', ',MaterialSlider');\n });\n\n});\n"
},
{
"path": "test/unit/snackbar.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialSnackbar', function () {\n\n function createSnackbarMarkup() {\n var el = document.createElement('div');\n el.className = 'mdl-js-snackbar mdl-snackbar';\n var text = document.createElement('div');\n var action = document.createElement('button');\n action.type = 'button';\n action.classList.add('mdl-snackbar__action');\n text.classList.add('mdl-snackbar__text');\n el.appendChild(text);\n el.appendChild(action);\n return el;\n }\n\n it('should be globally available', function () {\n expect(MaterialSnackbar).to.be.a('function');\n });\n\n it('should expose public methods', function() {\n var el = createSnackbarMarkup();\n componentHandler.upgradeElement(el);\n var methods = [\n 'showSnackbar'\n ];\n methods.forEach(function(item) {\n expect(el.MaterialSnackbar[item]).to.be.a('function');\n });\n });\n\n it('should be upgradable', function() {\n var el = createSnackbarMarkup();\n componentHandler.upgradeElement(el, 'MaterialSnackbar');\n expect($(el)).to.have.data('upgraded', ',MaterialSnackbar');\n });\n\n it('should reveal showSnackbar to widget', function() {\n var el = createSnackbarMarkup();\n componentHandler.upgradeElement(el, 'MaterialSnackbar');\n expect(el.MaterialSnackbar.showSnackbar).to.be.a('function');\n });\n\n it('should throw an error if not provided data', function() {\n expect(function() {\n var el = createSnackbarMarkup();\n componentHandler.upgradeElement(el, 'MaterialSnackbar');\n el.MaterialSnackbar.showSnackbar();\n }).to.throw('Please provide a data object with at least a message to display.');\n });\n\n it('should throw an error if not provided a message', function() {\n expect(function() {\n var el = createSnackbarMarkup();\n componentHandler.upgradeElement(el, 'MaterialSnackbar');\n el.MaterialSnackbar.showSnackbar({});\n }).to.throw('Please provide a message to be displayed.');\n });\n\n it('should throw an error if not provided actionText with an actionHandler', function() {\n expect(function() {\n var el = createSnackbarMarkup();\n componentHandler.upgradeElement(el, 'MaterialSnackbar');\n el.MaterialSnackbar.showSnackbar({\n message: 'Test message',\n actionHandler: function(event) {}\n });\n }).to.throw('Please provide action text with the handler.');\n });\n\n it('should throw an error if not constructed with a text area in the markup', function() {\n expect(function() {\n var el = document.createElement('div');\n el.className = 'mdl-js-snackbar mdl-snackbar';\n componentHandler.upgradeElement(el);\n }).to.throw('There must be a message element for a snackbar.');\n });\n\n it('should throw an error if not constructed with a text area in the markup', function() {\n expect(function() {\n var el = document.createElement('div');\n el.className = 'mdl-js-snackbar mdl-snackbar';\n var textArea = document.createElement('div');\n textArea.className = 'mdl-snackbar__text';\n el.appendChild(textArea);\n componentHandler.upgradeElement(el);\n }).to.throw('There must be an action element for a snackbar.');\n });\n});\n"
},
{
"path": "test/unit/spinner.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialSpinner', function () {\n\n it('should be globally available', function () {\n expect(MaterialSpinner).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialSpinner');\n expect($(el)).to.have.data('upgraded', ',MaterialSpinner');\n });\n\n it('should be a widget', function () {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialSpinner');\n expect(el.MaterialSpinner).to.be.a('object');\n });\n\n it('should have public methods available', function() {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialSpinner');\n var methods = [\n 'start',\n 'stop',\n ];\n methods.forEach(function(item) {\n expect(el.MaterialSpinner[item]).to.be.a('function');\n });\n });\n\n it('should start successfully', function () {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialSpinner');\n el.MaterialSpinner.start();\n expect($(el)).to.have.class('is-active');\n });\n\n it('should stop successfully', function () {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialSpinner');\n el.MaterialSpinner.start();\n el.MaterialSpinner.stop();\n expect($(el)).to.not.have.class('is-active');\n });\n\n it('should create layers successfully', function () {\n var el = document.createElement('div');\n componentHandler.upgradeElement(el, 'MaterialSpinner');\n var html = el.innerHTML;\n expect(html).to.contain('mdl-spinner__layer');\n expect(html).to.contain('mdl-spinner__layer-1');\n expect(html).to.contain('mdl-spinner__layer-2');\n expect(html).to.contain('mdl-spinner__layer-3');\n expect(html).to.contain('mdl-spinner__layer-4');\n expect(html).to.contain('mdl-spinner__circle');\n });\n\n});\n"
},
{
"path": "test/unit/switch.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialSwitch', function () {\n\n function createSwitch() {\n var label = document.createElement('label');\n var input = document.createElement('input');\n var labelText = document.createElement('span');\n label.for = 'testSwitch';\n input.id = label.for;\n label.className = 'mdl-switch mdl-js-switch';\n input.type = 'checkbox';\n input.className = 'mdl-switch__input';\n label.appendChild(input);\n labelText.text = 'Sound off/on';\n labelText.className = 'mdl-switch__label';\n label.appendChild(labelText);\n return label;\n };\n\n it('should be globally available', function () {\n expect(MaterialSwitch).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = createSwitch();\n componentHandler.upgradeElement(el, 'MaterialSwitch');\n expect($(el)).to.have.data('upgraded', ',MaterialSwitch');\n });\n\n it('should get disabled class after being checked', function() {\n var switchElement = createSwitch();\n componentHandler.upgradeElement(switchElement);\n switchElement.querySelector('input').disabled = true;\n switchElement.MaterialSwitch.checkDisabled();\n expect((function() {\n return switchElement.className;\n }())).to.equal('mdl-switch mdl-js-switch is-upgraded is-disabled');\n });\n\n it('should get checked class after checking toggle state', function() {\n var switchElement = createSwitch();\n componentHandler.upgradeElement(switchElement);\n switchElement.querySelector('input').checked = true;\n switchElement.MaterialSwitch.checkToggleState();\n expect((function() {\n return switchElement.className;\n }())).to.equal('mdl-switch mdl-js-switch is-upgraded is-checked');\n });\n\n});\n"
},
{
"path": "test/unit/tabs.js",
"content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ndescribe('MaterialTabs', function () {\n\n it('should be globally available', function () {\n expect(MaterialTabs).to.be.a('function');\n });\n\n it('should upgrade successfully', function () {\n var el = document.createElement('div');\n el.innerHTML = '' +\n '';\n\n componentHandler.upgradeElement(el, 'MaterialTabs');\n expect($(el)).to.have.data('upgraded', ',MaterialTabs');\n });\n\n describe('Click on the tabs', function () {\n\n var el;\n var tab1;\n var tab2;\n var content1;\n var content2;\n\n before(function() {\n el = document.createElement('div');\n el.innerHTML = '' +\n '' +\n '
' +\n '
1' +\n '
2' +\n '
3' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
\n
Material Design Lite is a light-weight implementation of Material Design targeted at static content-sites. Select a component on the left to preview it.
\n