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

Merge branch 'master' into techstop-template

master
Alexander Surma 2015-04-30 11:12:22 +01:00
parent 47dc2a0eff b2e7d87e01
commit fb537c688d
96 changed files with 4380 additions and 2113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -3,3 +3,4 @@ node_modules
gulp-cache
.DS_Store
docs/out
.publish

1
README.md
View File

@ -102,6 +102,7 @@ styles are kept in a separate CSS file. Use `gulp serve` to take a look at the t
* [General template](http://localhost:3000/templates/general)
* [Blog template](http://localhost:3000/templates/blog) and [blog entry](http://localhost:3000/templates/blog/entry.html)
* [Dashboard template](http://localhost:3000/templates/dashboard)
* [Product template](http://localhost:3000/templates/product)
## Browser Support

1150
css/material.css
View File

File diff suppressed because it is too large Load Diff

1150
css/material.css.template
View File

File diff suppressed because it is too large Load Diff

2
css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/material.min.css.map
View File

File diff suppressed because one or more lines are too long

2
css/material.min.css.template
View File

File diff suppressed because one or more lines are too long

2
css/material.min.css.template.map
View File

File diff suppressed because one or more lines are too long

4
docs/_pages/index.md
View File

@ -15,9 +15,9 @@ Material Design Lite lets you add a [Material Design](http://google.com/design/s
Develop with a single underlying system for your site that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, mouse, and keyboard are all first-class input methods.
## Built with BEM & Sass
## Built with <abbr title="Block Element Modifier">BEM</abbr> &amp; Sass
Material Design Lite provides vanilla CSS. Our source utilises Sass, the popular CSS preprocessor and BEM - the front-end naming methodology. Quickly get started with the pre-built CSS or build the source yourself.
Material Design Lite provides vanilla CSS. Our source utilises Sass, the popular CSS preprocessor and BEM - [the front-end naming methodology](https://github.com/google/material-design-lite/wiki/Understanding-BEM). Quickly get started with the pre-built CSS or build the source yourself.
## Components

2
docs/_templates/embedded_customizer.html vendored
View File

@ -28,7 +28,7 @@
<div class="mdl-gen-color mdl-color--teal mdl-gen--light-text" index="8">Teal</div>
<div class="mdl-gen-color mdl-color--green mdl-gen--dark-text" index="9">Green</div>
</div>
<div class="mdl-gen-preview mdl-shadow--z2">
<div class="mdl-gen-preview mdl-shadow--3dp">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<svg class="mdl-layout-icon" width="411px" height="406px" viewBox="0 0 411 406" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

252
js/material.js
View File

@ -149,7 +149,7 @@ var componentHandler = (function() {
/**
* Allows user to be alerted to any upgrades that are performed for a given
* component type
* @param {string} jsClass The class name of the WSK component we wish
* @param {string} jsClass The class name of the MDL component we wish
* to hook into for any upgrades performed.
* @param {function} callback The function to call upon an upgrade. This
* function should expect 1 parameter - the HTMLElement which got upgraded.
@ -190,7 +190,7 @@ window.addEventListener('load', function() {
/**
* Performs a "Cutting the mustard" test. If the browser supports the features
* tested, adds a mdl-js class to the <html> element. It then upgrades all WSK
* tested, adds a mdl-js class to the <html> element. It then upgrades all MDL
* components requiring JavaScript.
*/
if ('classList' in document.createElement('div') && 'querySelector' in document &&
@ -202,18 +202,45 @@ window.addEventListener('load', function() {
}
});
// From: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
// shim layer with setTimeout fallback
window.requestAnimFrame = (function() {
'use strict';
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
// Adapted from https://gist.github.com/paulirish/1579671 which derived from
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
// MIT license
(function() {
'use strict';
if (!Date.now) {
Date.now = function() { return new Date().getTime(); };
}
var vendors = ['webkit', 'moz'];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i];
window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame'] ||
window[vp + 'CancelRequestAnimationFrame']);
}
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = function(callback) {
var now = Date.now();
var nextTime = Math.max(lastTime + 16, now);
return setTimeout(function() { callback(lastTime = nextTime); },
nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
}
})();
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
@ -231,8 +258,8 @@ window.requestAnimFrame = (function() {
*/
/**
* Class constructor for Animation WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Animation MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -327,8 +354,8 @@ componentHandler.register({
*/
/**
* Class constructor for Button WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Button MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -444,8 +471,8 @@ componentHandler.register({
*/
/**
* Class constructor for Checkbox WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Checkbox MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -691,93 +718,8 @@ componentHandler.register({
*/
/**
* Class constructor for Column Layout WSK component.
* Implements WSK component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
function MaterialColumnLayout(element) {
'use strict';
this.element_ = element;
// Initialize instance.
this.init();
}
/**
* Store constants in one place so they can be updated easily.
* @enum {string | number}
* @private
*/
MaterialColumnLayout.prototype.Constant_ = {
INVISIBLE_WRAPPING_ELEMENT_COUNT: 3
};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
* @enum {string}
* @private
*/
MaterialColumnLayout.prototype.CssClasses_ = {
/**
* Class names should use camelCase and be prefixed with the word "material"
* to minimize conflict with 3rd party systems.
*/
// TODO: Upgrade classnames in HTML / CSS / JS to use material prefix to
// reduce conflict and convert to camelCase for consistency.
INVISIBLE_WRAPPING_ELEMENT: 'mdl-column-layout__wrap-hack'
};
/**
* Initialize element.
*/
MaterialColumnLayout.prototype.init = function() {
'use strict';
if (this.element_) {
// Add some hidden elements to make sure everything aligns correctly. See
// CSS file for details.
for (var j = 0; j < this.Constant_.INVISIBLE_WRAPPING_ELEMENT_COUNT ; j++) {
var hiddenHackDiv = document.createElement('div');
hiddenHackDiv.classList.add(this.CssClasses_.INVISIBLE_WRAPPING_ELEMENT);
this.element_.appendChild(hiddenHackDiv);
}
}
};
//The component registers itself. It can assume componentHandler is available
//in the global scope.
componentHandler.register({
constructor: MaterialColumnLayout,
classAsString: 'MaterialColumnLayout',
cssClass: 'mdl-column-layout'
});
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for icon toggle WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for icon toggle MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -1005,8 +947,8 @@ componentHandler.register({
*/
/**
* Class constructor for dropdown WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for dropdown MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -1377,7 +1319,7 @@ MaterialMenu.prototype.show = function(evt) {
// Wait for the next frame, turn on animation, and apply the final clip.
// Also make it visible. This triggers the transitions.
window.requestAnimFrame(function() {
window.requestAnimationFrame(function() {
this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
@ -1470,8 +1412,8 @@ componentHandler.register({
*/
/**
* Class constructor for Progress WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Progress MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -1575,8 +1517,8 @@ componentHandler.register({
*/
/**
* Class constructor for Radio WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Radio MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -1831,8 +1773,8 @@ componentHandler.register({
*/
/**
* Class constructor for Slider WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Slider MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -2037,8 +1979,8 @@ componentHandler.register({
*/
/**
* Class constructor for Spinner WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Spinner MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -2057,7 +1999,7 @@ function MaterialSpinner(element) {
* @private
*/
MaterialSpinner.prototype.Constant_ = {
WSK_SPINNER_LAYER_COUNT: 4
MDL_SPINNER_LAYER_COUNT: 4
};
/**
@ -2068,12 +2010,12 @@ MaterialSpinner.prototype.Constant_ = {
* @private
*/
MaterialSpinner.prototype.CssClasses_ = {
WSK_SPINNER_LAYER: 'mdl-spinner__layer',
WSK_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
WSK_SPINNER_CIRCLE: 'mdl-spinner__circle',
WSK_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
WSK_SPINNER_LEFT: 'mdl-spinner__left',
WSK_SPINNER_RIGHT: 'mdl-spinner__right'
MDL_SPINNER_LAYER: 'mdl-spinner__layer',
MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
MDL_SPINNER_LEFT: 'mdl-spinner__left',
MDL_SPINNER_RIGHT: 'mdl-spinner__right'
};
/**
@ -2083,25 +2025,25 @@ MaterialSpinner.prototype.createLayer = function(index) {
'use strict';
var layer = document.createElement('div');
layer.classList.add(this.CssClasses_.WSK_SPINNER_LAYER);
layer.classList.add(this.CssClasses_.WSK_SPINNER_LAYER + '-' + index);
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
var leftClipper = document.createElement('div');
leftClipper.classList.add(this.CssClasses_.WSK_SPINNER_CIRCLE_CLIPPER);
leftClipper.classList.add(this.CssClasses_.WSK_SPINNER_LEFT);
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
var gapPatch = document.createElement('div');
gapPatch.classList.add(this.CssClasses_.WSK_SPINNER_GAP_PATCH);
gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
var rightClipper = document.createElement('div');
rightClipper.classList.add(this.CssClasses_.WSK_SPINNER_CIRCLE_CLIPPER);
rightClipper.classList.add(this.CssClasses_.WSK_SPINNER_RIGHT);
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
var circleOwners = [leftClipper, gapPatch, rightClipper];
for (var i = 0; i < circleOwners.length; i++) {
var circle = document.createElement('div');
circle.classList.add(this.CssClasses_.WSK_SPINNER_CIRCLE);
circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
circleOwners[i].appendChild(circle);
}
@ -2142,7 +2084,7 @@ MaterialSpinner.prototype.init = function() {
'use strict';
if (this.element_) {
for (var i = 1; i <= this.Constant_.WSK_SPINNER_LAYER_COUNT; i++) {
for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
this.createLayer(i);
}
@ -2175,8 +2117,8 @@ componentHandler.register({
*/
/**
* Class constructor for Checkbox WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Checkbox MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -2424,8 +2366,8 @@ componentHandler.register({
*/
/**
* Class constructor for Tabs WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Tabs MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -2461,10 +2403,10 @@ MaterialTabs.prototype.CssClasses_ = {
ACTIVE_CLASS: 'is-active',
UPGRADED_CLASS: 'is-upgraded',
WSK_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
WSK_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
WSK_RIPPLE: 'mdl-ripple',
WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
MDL_RIPPLE: 'mdl-ripple',
MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
};
/**
@ -2474,9 +2416,9 @@ MaterialTabs.prototype.CssClasses_ = {
MaterialTabs.prototype.initTabs_ = function(e) {
'use strict';
if (this.element_.classList.contains(this.CssClasses_.WSK_JS_RIPPLE_EFFECT)) {
if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
this.element_.classList.add(
this.CssClasses_.WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
}
// Select element tabs, document panels
@ -2528,12 +2470,12 @@ function MaterialTab(tab, ctx) {
'use strict';
if (tab) {
if (ctx.element_.classList.contains(ctx.CssClasses_.WSK_JS_RIPPLE_EFFECT)) {
if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(ctx.CssClasses_.WSK_RIPPLE_CONTAINER);
rippleContainer.classList.add(ctx.CssClasses_.WSK_JS_RIPPLE_EFFECT);
rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
var ripple = document.createElement('span');
ripple.classList.add(ctx.CssClasses_.WSK_RIPPLE);
ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
rippleContainer.appendChild(ripple);
tab.appendChild(rippleContainer);
}
@ -2576,8 +2518,8 @@ componentHandler.register({
*/
/**
* Class constructor for Textfield WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Textfield MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -2781,8 +2723,8 @@ componentHandler.register({
*/
/**
* Class constructor for Tooltip WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Tooltip MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -2894,8 +2836,8 @@ componentHandler.register({
*/
/**
* Class constructor for Layout WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Layout MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -3271,8 +3213,8 @@ componentHandler.register({
*/
/**
* Class constructor for Ripple WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Ripple MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -3349,7 +3291,7 @@ MaterialRipple.prototype.downHandler_ = function(event) {
}
this.setRippleXY(x, y);
this.setRippleStyles(true);
window.requestAnimFrame(this.animFrameHandler.bind(this));
window.requestAnimationFrame(this.animFrameHandler.bind(this));
}
};
@ -3459,7 +3401,7 @@ MaterialRipple.prototype.init = function() {
this.animFrameHandler = function() {
if (this.frameCount_-- > 0) {
window.requestAnimFrame(this.animFrameHandler.bind(this));
window.requestAnimationFrame(this.animFrameHandler.bind(this));
} else {
this.setRippleStyles(false);
}

5
js/material.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/material.min.js.map
View File

File diff suppressed because one or more lines are too long

6
package.json
View File

@ -32,11 +32,11 @@
"gulp-if": "^1.2.1",
"gulp-imagemin": "^2.2.1",
"gulp-jshint": "^1.6.3",
"gulp-load-plugins": "^0.8.0",
"gulp-load-plugins": "^0.10.0",
"gulp-markdown": "^1.0.0",
"gulp-marked": "^1.0.0",
"gulp-minify-html": "^1.0.0",
"gulp-mocha-phantomjs": "^0.5.3",
"gulp-mocha-phantomjs": "^0.6.1",
"gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.3",
"gulp-sass": "^1.3.3",
@ -50,7 +50,7 @@
"merge-stream": "^0.1.7",
"mocha": "^2.1.0",
"opn": "^1.0.0",
"require-dir": "^0.1.0",
"require-dir": "^0.3.0",
"run-sequence": "^1.0.2",
"swig": "^1.4.2",
"through2": "^0.6.3"

579
src/_color-definitions.scss Normal file
View File

@ -0,0 +1,579 @@
/* ========== Color Palettes ========== */
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
// A400, A700.
$palette-red:
"255,235,238"
"255,205,210"
"239,154,154"
"229,115,115"
"239,83,80"
"244,67,54"
"229,57,53"
"211,47,47"
"198,40,40"
"183,28,28"
"255,138,128"
"255,82,82"
"255,23,68"
"213,0,0";
$palette-red-50: nth($palette-red, 1);
$palette-red-100: nth($palette-red, 2);
$palette-red-200: nth($palette-red, 3);
$palette-red-300: nth($palette-red, 4);
$palette-red-400: nth($palette-red, 5);
$palette-red-500: nth($palette-red, 6);
$palette-red-600: nth($palette-red, 7);
$palette-red-700: nth($palette-red, 8);
$palette-red-800: nth($palette-red, 9);
$palette-red-900: nth($palette-red, 10);
$palette-red-A100: nth($palette-red, 11);
$palette-red-A200: nth($palette-red, 12);
$palette-red-A400: nth($palette-red, 13);
$palette-red-A700: nth($palette-red, 14);
$palette-pink:
"252,228,236"
"248,187,208"
"244,143,177"
"240,98,146"
"236,64,122"
"233,30,99"
"216,27,96"
"194,24,91"
"173,20,87"
"136,14,79"
"255,128,171"
"255,64,129"
"245,0,87"
"197,17,98";
$palette-pink-50: nth($palette-pink, 1);
$palette-pink-100: nth($palette-pink, 2);
$palette-pink-200: nth($palette-pink, 3);
$palette-pink-300: nth($palette-pink, 4);
$palette-pink-400: nth($palette-pink, 5);
$palette-pink-500: nth($palette-pink, 6);
$palette-pink-600: nth($palette-pink, 7);
$palette-pink-700: nth($palette-pink, 8);
$palette-pink-800: nth($palette-pink, 9);
$palette-pink-900: nth($palette-pink, 10);
$palette-pink-A100: nth($palette-pink, 11);
$palette-pink-A200: nth($palette-pink, 12);
$palette-pink-A400: nth($palette-pink, 13);
$palette-pink-A700: nth($palette-pink, 14);
$palette-purple:
"243,229,245"
"225,190,231"
"206,147,216"
"186,104,200"
"171,71,188"
"156,39,176"
"142,36,170"
"123,31,162"
"106,27,154"
"74,20,140"
"234,128,252"
"224,64,251"
"213,0,249"
"170,0,255";
$palette-purple-50: nth($palette-purple, 1);
$palette-purple-100: nth($palette-purple, 2);
$palette-purple-200: nth($palette-purple, 3);
$palette-purple-300: nth($palette-purple, 4);
$palette-purple-400: nth($palette-purple, 5);
$palette-purple-500: nth($palette-purple, 6);
$palette-purple-600: nth($palette-purple, 7);
$palette-purple-700: nth($palette-purple, 8);
$palette-purple-800: nth($palette-purple, 9);
$palette-purple-900: nth($palette-purple, 10);
$palette-purple-A100: nth($palette-purple, 11);
$palette-purple-A200: nth($palette-purple, 12);
$palette-purple-A400: nth($palette-purple, 13);
$palette-purple-A700: nth($palette-purple, 14);
$palette-deep-purple:
"237,231,246"
"209,196,233"
"179,157,219"
"149,117,205"
"126,87,194"
"103,58,183"
"94,53,177"
"81,45,168"
"69,39,160"
"49,27,146"
"179,136,255"
"124,77,255"
"101,31,255"
"98,0,234";
$palette-deep-purple-50: nth($palette-deep-purple, 1);
$palette-deep-purple-100: nth($palette-deep-purple, 2);
$palette-deep-purple-200: nth($palette-deep-purple, 3);
$palette-deep-purple-300: nth($palette-deep-purple, 4);
$palette-deep-purple-400: nth($palette-deep-purple, 5);
$palette-deep-purple-500: nth($palette-deep-purple, 6);
$palette-deep-purple-600: nth($palette-deep-purple, 7);
$palette-deep-purple-700: nth($palette-deep-purple, 8);
$palette-deep-purple-800: nth($palette-deep-purple, 9);
$palette-deep-purple-900: nth($palette-deep-purple, 10);
$palette-deep-purple-A100: nth($palette-deep-purple, 11);
$palette-deep-purple-A200: nth($palette-deep-purple, 12);
$palette-deep-purple-A400: nth($palette-deep-purple, 13);
$palette-deep-purple-A700: nth($palette-deep-purple, 14);
$palette-indigo:
"232,234,246"
"197,202,233"
"159,168,218"
"121,134,203"
"92,107,192"
"63,81,181"
"57,73,171"
"48,63,159"
"40,53,147"
"26,35,126"
"140,158,255"
"83,109,254"
"61,90,254"
"48,79,254";
$palette-indigo-50: nth($palette-indigo, 1);
$palette-indigo-100: nth($palette-indigo, 2);
$palette-indigo-200: nth($palette-indigo, 3);
$palette-indigo-300: nth($palette-indigo, 4);
$palette-indigo-400: nth($palette-indigo, 5);
$palette-indigo-500: nth($palette-indigo, 6);
$palette-indigo-600: nth($palette-indigo, 7);
$palette-indigo-700: nth($palette-indigo, 8);
$palette-indigo-800: nth($palette-indigo, 9);
$palette-indigo-900: nth($palette-indigo, 10);
$palette-indigo-A100: nth($palette-indigo, 11);
$palette-indigo-A200: nth($palette-indigo, 12);
$palette-indigo-A400: nth($palette-indigo, 13);
$palette-indigo-A700: nth($palette-indigo, 14);
$palette-blue:
"227,242,253"
"187,222,251"
"144,202,249"
"100,181,246"
"66,165,245"
"33,150,243"
"30,136,229"
"25,118,210"
"21,101,192"
"13,71,161"
"130,177,255"
"68,138,255"
"41,121,255"
"41,98,255";
$palette-blue-50: nth($palette-blue, 1);
$palette-blue-100: nth($palette-blue, 2);
$palette-blue-200: nth($palette-blue, 3);
$palette-blue-300: nth($palette-blue, 4);
$palette-blue-400: nth($palette-blue, 5);
$palette-blue-500: nth($palette-blue, 6);
$palette-blue-600: nth($palette-blue, 7);
$palette-blue-700: nth($palette-blue, 8);
$palette-blue-800: nth($palette-blue, 9);
$palette-blue-900: nth($palette-blue, 10);
$palette-blue-A100: nth($palette-blue, 11);
$palette-blue-A200: nth($palette-blue, 12);
$palette-blue-A400: nth($palette-blue, 13);
$palette-blue-A700: nth($palette-blue, 14);
$palette-light-blue:
"225,245,254"
"179,229,252"
"129,212,250"
"79,195,247"
"41,182,246"
"3,169,244"
"3,155,229"
"2,136,209"
"2,119,189"
"1,87,155"
"128,216,255"
"64,196,255"
"0,176,255"
"0,145,234";
$palette-light-blue-50: nth($palette-light-blue, 1);
$palette-light-blue-100: nth($palette-light-blue, 2);
$palette-light-blue-200: nth($palette-light-blue, 3);
$palette-light-blue-300: nth($palette-light-blue, 4);
$palette-light-blue-400: nth($palette-light-blue, 5);
$palette-light-blue-500: nth($palette-light-blue, 6);
$palette-light-blue-600: nth($palette-light-blue, 7);
$palette-light-blue-700: nth($palette-light-blue, 8);
$palette-light-blue-800: nth($palette-light-blue, 9);
$palette-light-blue-900: nth($palette-light-blue, 10);
$palette-light-blue-A100: nth($palette-light-blue, 11);
$palette-light-blue-A200: nth($palette-light-blue, 12);
$palette-light-blue-A400: nth($palette-light-blue, 13);
$palette-light-blue-A700: nth($palette-light-blue, 14);
$palette-cyan:
"224,247,250"
"178,235,242"
"128,222,234"
"77,208,225"
"38,198,218"
"0,188,212"
"0,172,193"
"0,151,167"
"0,131,143"
"0,96,100"
"132,255,255"
"24,255,255"
"0,229,255"
"0,184,212";
$palette-cyan-50: nth($palette-cyan, 1);
$palette-cyan-100: nth($palette-cyan, 2);
$palette-cyan-200: nth($palette-cyan, 3);
$palette-cyan-300: nth($palette-cyan, 4);
$palette-cyan-400: nth($palette-cyan, 5);
$palette-cyan-500: nth($palette-cyan, 6);
$palette-cyan-600: nth($palette-cyan, 7);
$palette-cyan-700: nth($palette-cyan, 8);
$palette-cyan-800: nth($palette-cyan, 9);
$palette-cyan-900: nth($palette-cyan, 10);
$palette-cyan-A100: nth($palette-cyan, 11);
$palette-cyan-A200: nth($palette-cyan, 12);
$palette-cyan-A400: nth($palette-cyan, 13);
$palette-cyan-A700: nth($palette-cyan, 14);
$palette-teal:
"224,242,241"
"178,223,219"
"128,203,196"
"77,182,172"
"38,166,154"
"0,150,136"
"0,137,123"
"0,121,107"
"0,105,92"
"0,77,64"
"167,255,235"
"100,255,218"
"29,233,182"
"0,191,165";
$palette-teal-50: nth($palette-teal, 1);
$palette-teal-100: nth($palette-teal, 2);
$palette-teal-200: nth($palette-teal, 3);
$palette-teal-300: nth($palette-teal, 4);
$palette-teal-400: nth($palette-teal, 5);
$palette-teal-500: nth($palette-teal, 6);
$palette-teal-600: nth($palette-teal, 7);
$palette-teal-700: nth($palette-teal, 8);
$palette-teal-800: nth($palette-teal, 9);
$palette-teal-900: nth($palette-teal, 10);
$palette-teal-A100: nth($palette-teal, 11);
$palette-teal-A200: nth($palette-teal, 12);
$palette-teal-A400: nth($palette-teal, 13);
$palette-teal-A700: nth($palette-teal, 14);
$palette-green:
"232,245,233"
"200,230,201"
"165,214,167"
"129,199,132"
"102,187,106"
"76,175,80"
"67,160,71"
"56,142,60"
"46,125,50"
"27,94,32"
"185,246,202"
"105,240,174"
"0,230,118"
"0,200,83";
$palette-green-50: nth($palette-green, 1);
$palette-green-100: nth($palette-green, 2);
$palette-green-200: nth($palette-green, 3);
$palette-green-300: nth($palette-green, 4);
$palette-green-400: nth($palette-green, 5);
$palette-green-500: nth($palette-green, 6);
$palette-green-600: nth($palette-green, 7);
$palette-green-700: nth($palette-green, 8);
$palette-green-800: nth($palette-green, 9);
$palette-green-900: nth($palette-green, 10);
$palette-green-A100: nth($palette-green, 11);
$palette-green-A200: nth($palette-green, 12);
$palette-green-A400: nth($palette-green, 13);
$palette-green-A700: nth($palette-green, 14);
$palette-light-green:
"241,248,233"
"220,237,200"
"197,225,165"
"174,213,129"
"156,204,101"
"139,195,74"
"124,179,66"
"104,159,56"
"85,139,47"
"51,105,30"
"204,255,144"
"178,255,89"
"118,255,3"
"100,221,23";
$palette-light-green-50: nth($palette-light-green, 1);
$palette-light-green-100: nth($palette-light-green, 2);
$palette-light-green-200: nth($palette-light-green, 3);
$palette-light-green-300: nth($palette-light-green, 4);
$palette-light-green-400: nth($palette-light-green, 5);
$palette-light-green-500: nth($palette-light-green, 6);
$palette-light-green-600: nth($palette-light-green, 7);
$palette-light-green-700: nth($palette-light-green, 8);
$palette-light-green-800: nth($palette-light-green, 9);
$palette-light-green-900: nth($palette-light-green, 10);
$palette-light-green-A100: nth($palette-light-green, 11);
$palette-light-green-A200: nth($palette-light-green, 12);
$palette-light-green-A400: nth($palette-light-green, 13);
$palette-light-green-A700: nth($palette-light-green, 14);
$palette-lime:
"249,251,231"
"240,244,195"
"230,238,156"
"220,231,117"
"212,225,87"
"205,220,57"
"192,202,51"
"175,180,43"
"158,157,36"
"130,119,23"
"244,255,129"
"238,255,65"
"198,255,0"
"174,234,0";
$palette-lime-50: nth($palette-lime, 1);
$palette-lime-100: nth($palette-lime, 2);
$palette-lime-200: nth($palette-lime, 3);
$palette-lime-300: nth($palette-lime, 4);
$palette-lime-400: nth($palette-lime, 5);
$palette-lime-500: nth($palette-lime, 6);
$palette-lime-600: nth($palette-lime, 7);
$palette-lime-700: nth($palette-lime, 8);
$palette-lime-800: nth($palette-lime, 9);
$palette-lime-900: nth($palette-lime, 10);
$palette-lime-A100: nth($palette-lime, 11);
$palette-lime-A200: nth($palette-lime, 12);
$palette-lime-A400: nth($palette-lime, 13);
$palette-lime-A700: nth($palette-lime, 14);
$palette-yellow:
"255,253,231"
"255,249,196"
"255,245,157"
"255,241,118"
"255,238,88"
"255,235,59"
"253,216,53"
"251,192,45"
"249,168,37"
"245,127,23"
"255,255,141"
"255,255,0"
"255,234,0"
"255,214,0";
$palette-yellow-50: nth($palette-yellow, 1);
$palette-yellow-100: nth($palette-yellow, 2);
$palette-yellow-200: nth($palette-yellow, 3);
$palette-yellow-300: nth($palette-yellow, 4);
$palette-yellow-400: nth($palette-yellow, 5);
$palette-yellow-500: nth($palette-yellow, 6);
$palette-yellow-600: nth($palette-yellow, 7);
$palette-yellow-700: nth($palette-yellow, 8);
$palette-yellow-800: nth($palette-yellow, 9);
$palette-yellow-900: nth($palette-yellow, 10);
$palette-yellow-A100: nth($palette-yellow, 11);
$palette-yellow-A200: nth($palette-yellow, 12);
$palette-yellow-A400: nth($palette-yellow, 13);
$palette-yellow-A700: nth($palette-yellow, 14);
$palette-amber:
"255,248,225"
"255,236,179"
"255,224,130"
"255,213,79"
"255,202,40"
"255,193,7"
"255,179,0"
"255,160,0"
"255,143,0"
"255,111,0"
"255,229,127"
"255,215,64"
"255,196,0"
"255,171,0";
$palette-amber-50: nth($palette-amber, 1);
$palette-amber-100: nth($palette-amber, 2);
$palette-amber-200: nth($palette-amber, 3);
$palette-amber-300: nth($palette-amber, 4);
$palette-amber-400: nth($palette-amber, 5);
$palette-amber-500: nth($palette-amber, 6);
$palette-amber-600: nth($palette-amber, 7);
$palette-amber-700: nth($palette-amber, 8);
$palette-amber-800: nth($palette-amber, 9);
$palette-amber-900: nth($palette-amber, 10);
$palette-amber-A100: nth($palette-amber, 11);
$palette-amber-A200: nth($palette-amber, 12);
$palette-amber-A400: nth($palette-amber, 13);
$palette-amber-A700: nth($palette-amber, 14);
$palette-orange:
"255,243,224"
"255,224,178"
"255,204,128"
"255,183,77"
"255,167,38"
"255,152,0"
"251,140,0"
"245,124,0"
"239,108,0"
"230,81,0"
"255,209,128"
"255,171,64"
"255,145,0"
"255,109,0";
$palette-orange-50: nth($palette-orange, 1);
$palette-orange-100: nth($palette-orange, 2);
$palette-orange-200: nth($palette-orange, 3);
$palette-orange-300: nth($palette-orange, 4);
$palette-orange-400: nth($palette-orange, 5);
$palette-orange-500: nth($palette-orange, 6);
$palette-orange-600: nth($palette-orange, 7);
$palette-orange-700: nth($palette-orange, 8);
$palette-orange-800: nth($palette-orange, 9);
$palette-orange-900: nth($palette-orange, 10);
$palette-orange-A100: nth($palette-orange, 11);
$palette-orange-A200: nth($palette-orange, 12);
$palette-orange-A400: nth($palette-orange, 13);
$palette-orange-A700: nth($palette-orange, 14);
$palette-deep-orange:
"251,233,231"
"255,204,188"
"255,171,145"
"255,138,101"
"255,112,67"
"255,87,34"
"244,81,30"
"230,74,25"
"216,67,21"
"191,54,12"
"255,158,128"
"255,110,64"
"255,61,0"
"221,44,0";
$palette-deep-orange-50: nth($palette-deep-orange, 1);
$palette-deep-orange-100: nth($palette-deep-orange, 2);
$palette-deep-orange-200: nth($palette-deep-orange, 3);
$palette-deep-orange-300: nth($palette-deep-orange, 4);
$palette-deep-orange-400: nth($palette-deep-orange, 5);
$palette-deep-orange-500: nth($palette-deep-orange, 6);
$palette-deep-orange-600: nth($palette-deep-orange, 7);
$palette-deep-orange-700: nth($palette-deep-orange, 8);
$palette-deep-orange-800: nth($palette-deep-orange, 9);
$palette-deep-orange-900: nth($palette-deep-orange, 10);
$palette-deep-orange-A100: nth($palette-deep-orange, 11);
$palette-deep-orange-A200: nth($palette-deep-orange, 12);
$palette-deep-orange-A400: nth($palette-deep-orange, 13);
$palette-deep-orange-A700: nth($palette-deep-orange, 14);
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
$palette-brown:
"239,235,233"
"215,204,200"
"188,170,164"
"161,136,127"
"141,110,99"
"121,85,72"
"109,76,65"
"93,64,55"
"78,52,46"
"62,39,35";
$palette-brown-50: nth($palette-brown, 1);
$palette-brown-100: nth($palette-brown, 2);
$palette-brown-200: nth($palette-brown, 3);
$palette-brown-300: nth($palette-brown, 4);
$palette-brown-400: nth($palette-brown, 5);
$palette-brown-500: nth($palette-brown, 6);
$palette-brown-600: nth($palette-brown, 7);
$palette-brown-700: nth($palette-brown, 8);
$palette-brown-800: nth($palette-brown, 9);
$palette-brown-900: nth($palette-brown, 10);
$palette-grey:
"250,250,250"
"245,245,245"
"238,238,238"
"224,224,224"
"189,189,189"
"158,158,158"
"117,117,117"
"97,97,97"
"66,66,66"
"33,33,33";
$palette-grey-50: nth($palette-grey, 1);
$palette-grey-100: nth($palette-grey, 2);
$palette-grey-200: nth($palette-grey, 3);
$palette-grey-300: nth($palette-grey, 4);
$palette-grey-400: nth($palette-grey, 5);
$palette-grey-500: nth($palette-grey, 6);
$palette-grey-600: nth($palette-grey, 7);
$palette-grey-700: nth($palette-grey, 8);
$palette-grey-800: nth($palette-grey, 9);
$palette-grey-900: nth($palette-grey, 10);
$palette-blue-grey:
"236,239,241"
"207,216,220"
"176,190,197"
"144,164,174"
"120,144,156"
"96,125,139"
"84,110,122"
"69,90,100"
"55,71,79"
"38,50,56";
$palette-blue-grey-50: nth($palette-blue-grey, 1);
$palette-blue-grey-100: nth($palette-blue-grey, 2);
$palette-blue-grey-200: nth($palette-blue-grey, 3);
$palette-blue-grey-300: nth($palette-blue-grey, 4);
$palette-blue-grey-400: nth($palette-blue-grey, 5);
$palette-blue-grey-500: nth($palette-blue-grey, 6);
$palette-blue-grey-600: nth($palette-blue-grey, 7);
$palette-blue-grey-700: nth($palette-blue-grey, 8);
$palette-blue-grey-800: nth($palette-blue-grey, 9);
$palette-blue-grey-900: nth($palette-blue-grey, 10);
$color-black: "0,0,0";
$color-white: "255,255,255";
/* colors.scss */
$styleguide-generate-template: false !default;

61
src/_mixins.scss
View File

@ -38,7 +38,7 @@
@include typo-preferred-font($usePreferred);
font-size: 56px;
font-weight: 400;
line-height: 1;
line-height: 1.35;
letter-spacing: -0.02em;
@if $colorContrast {
@ -125,7 +125,7 @@
font-weight: bold;
}
line-height: 24px;
letter-spacing: 0.04em;
letter-spacing: 0;
@if $colorContrast {
opacity: 0.87;
@ -137,7 +137,7 @@
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.04em;
letter-spacing: 0;
@if $colorContrast {
opacity: 0.87;
@ -149,7 +149,7 @@
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.08em;
letter-spacing: 0;
@if $colorContrast {
opacity: 0.54;
@ -158,19 +158,22 @@
@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred);
position: relative;
font-size: 24px;
font-weight: 300;
font-style: italic;
line-height: 1;
line-height: 1.35;
letter-spacing: 0.08em;
&:before {
position: absolute;
left: -0.5em;
content: '“';
opacity: 0.54;
}
&:after {
content: '”';
opacity: 0.54;
margin-left: -0.05em;
}
@if $colorContrast {
@ -183,7 +186,7 @@
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
letter-spacing: 0;
@if $colorContrast {
opacity: 0.87;
@ -193,10 +196,10 @@
@mixin typo-button($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred);
font-size: 14px;
font-weight: 400;
font-weight: 500;
text-transform: uppercase;
line-height: 1;
letter-spacing: 0.04em;
letter-spacing: 0;
@if $colorContrast {
opacity: 0.87;
@ -210,20 +213,36 @@
box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
}
@mixin shadow-z1() {
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
@mixin shadow-2dp() {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-z2() {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 5px 0 rgba(0,0,0,0.23);
@mixin shadow-3dp() {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-z3() {
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.19), 0 6px 3px 0 rgba(0,0,0,0.23);
@mixin shadow-4dp() {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
}
@mixin shadow-z4() {
box-shadow: 0 14px 14px 0 rgba(0,0,0,0.25), 0 10px 5px 0 rgba(0,0,0,0.22);
@mixin shadow-6dp() {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
}
@mixin shadow-z5() {
box-shadow: 0 19px 19px 0 rgba(0,0,0,0.30), 0 15px 6px 0 rgba(0,0,0,0.22);
@mixin shadow-8dp() {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
}
@mixin shadow-16dp() {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
}
/* Animations */
@ -247,5 +266,3 @@
transition-duration: $duration;
transition-timing-function: $animation-curve-default;
}

599
src/_variables.scss
View File

@ -36,6 +36,7 @@
* -----Button
* -----Animation
* -----Progress
* -----Badge
*/
@ -63,585 +64,7 @@ $performance_font: 'Helvetica', 'Arial', sans-serif;
*
**/
/* ========== Color Palettes ========== */
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
// A400, A700.
$palette-red:
"255,235,238"
"255,205,210"
"239,154,154"
"229,115,115"
"239,83,80"
"244,67,54"
"229,57,53"
"211,47,47"
"198,40,40"
"183,28,28"
"255,138,128"
"255,82,82"
"255,23,68"
"213,0,0";
$palette-red-50: nth($palette-red, 1);
$palette-red-100: nth($palette-red, 2);
$palette-red-200: nth($palette-red, 3);
$palette-red-300: nth($palette-red, 4);
$palette-red-400: nth($palette-red, 5);
$palette-red-500: nth($palette-red, 6);
$palette-red-600: nth($palette-red, 7);
$palette-red-700: nth($palette-red, 8);
$palette-red-800: nth($palette-red, 9);
$palette-red-900: nth($palette-red, 10);
$palette-red-A100: nth($palette-red, 11);
$palette-red-A200: nth($palette-red, 12);
$palette-red-A400: nth($palette-red, 13);
$palette-red-A700: nth($palette-red, 14);
$palette-pink:
"252,228,236"
"248,187,208"
"244,143,177"
"240,98,146"
"236,64,122"
"233,30,99"
"216,27,96"
"194,24,91"
"173,20,87"
"136,14,79"
"255,128,171"
"255,64,129"
"245,0,87"
"197,17,98";
$palette-pink-50: nth($palette-pink, 1);
$palette-pink-100: nth($palette-pink, 2);
$palette-pink-200: nth($palette-pink, 3);
$palette-pink-300: nth($palette-pink, 4);
$palette-pink-400: nth($palette-pink, 5);
$palette-pink-500: nth($palette-pink, 6);
$palette-pink-600: nth($palette-pink, 7);
$palette-pink-700: nth($palette-pink, 8);
$palette-pink-800: nth($palette-pink, 9);
$palette-pink-900: nth($palette-pink, 10);
$palette-pink-A100: nth($palette-pink, 11);
$palette-pink-A200: nth($palette-pink, 12);
$palette-pink-A400: nth($palette-pink, 13);
$palette-pink-A700: nth($palette-pink, 14);
$palette-purple:
"243,229,245"
"225,190,231"
"206,147,216"
"186,104,200"
"171,71,188"
"156,39,176"
"142,36,170"
"123,31,162"
"106,27,154"
"74,20,140"
"234,128,252"
"224,64,251"
"213,0,249"
"170,0,255";
$palette-purple-50: nth($palette-purple, 1);
$palette-purple-100: nth($palette-purple, 2);
$palette-purple-200: nth($palette-purple, 3);
$palette-purple-300: nth($palette-purple, 4);
$palette-purple-400: nth($palette-purple, 5);
$palette-purple-500: nth($palette-purple, 6);
$palette-purple-600: nth($palette-purple, 7);
$palette-purple-700: nth($palette-purple, 8);
$palette-purple-800: nth($palette-purple, 9);
$palette-purple-900: nth($palette-purple, 10);
$palette-purple-A100: nth($palette-purple, 11);
$palette-purple-A200: nth($palette-purple, 12);
$palette-purple-A400: nth($palette-purple, 13);
$palette-purple-A700: nth($palette-purple, 14);
$palette-deep-purple:
"237,231,246"
"209,196,233"
"179,157,219"
"149,117,205"
"126,87,194"
"103,58,183"
"94,53,177"
"81,45,168"
"69,39,160"
"49,27,146"
"179,136,255"
"124,77,255"
"101,31,255"
"98,0,234";
$palette-deep-purple-50: nth($palette-deep-purple, 1);
$palette-deep-purple-100: nth($palette-deep-purple, 2);
$palette-deep-purple-200: nth($palette-deep-purple, 3);
$palette-deep-purple-300: nth($palette-deep-purple, 4);
$palette-deep-purple-400: nth($palette-deep-purple, 5);
$palette-deep-purple-500: nth($palette-deep-purple, 6);
$palette-deep-purple-600: nth($palette-deep-purple, 7);
$palette-deep-purple-700: nth($palette-deep-purple, 8);
$palette-deep-purple-800: nth($palette-deep-purple, 9);
$palette-deep-purple-900: nth($palette-deep-purple, 10);
$palette-deep-purple-A100: nth($palette-deep-purple, 11);
$palette-deep-purple-A200: nth($palette-deep-purple, 12);
$palette-deep-purple-A400: nth($palette-deep-purple, 13);
$palette-deep-purple-A700: nth($palette-deep-purple, 14);
$palette-indigo:
"232,234,246"
"197,202,233"
"159,168,218"
"121,134,203"
"92,107,192"
"63,81,181"
"57,73,171"
"48,63,159"
"40,53,147"
"26,35,126"
"140,158,255"
"83,109,254"
"61,90,254"
"48,79,254";
$palette-indigo-50: nth($palette-indigo, 1);
$palette-indigo-100: nth($palette-indigo, 2);
$palette-indigo-200: nth($palette-indigo, 3);
$palette-indigo-300: nth($palette-indigo, 4);
$palette-indigo-400: nth($palette-indigo, 5);
$palette-indigo-500: nth($palette-indigo, 6);
$palette-indigo-600: nth($palette-indigo, 7);
$palette-indigo-700: nth($palette-indigo, 8);
$palette-indigo-800: nth($palette-indigo, 9);
$palette-indigo-900: nth($palette-indigo, 10);
$palette-indigo-A100: nth($palette-indigo, 11);
$palette-indigo-A200: nth($palette-indigo, 12);
$palette-indigo-A400: nth($palette-indigo, 13);
$palette-indigo-A700: nth($palette-indigo, 14);
$palette-blue:
"227,242,253"
"187,222,251"
"144,202,249"
"100,181,246"
"66,165,245"
"33,150,243"
"30,136,229"
"25,118,210"
"21,101,192"
"13,71,161"
"130,177,255"
"68,138,255"
"41,121,255"
"41,98,255";
$palette-blue-50: nth($palette-blue, 1);
$palette-blue-100: nth($palette-blue, 2);
$palette-blue-200: nth($palette-blue, 3);
$palette-blue-300: nth($palette-blue, 4);
$palette-blue-400: nth($palette-blue, 5);
$palette-blue-500: nth($palette-blue, 6);
$palette-blue-600: nth($palette-blue, 7);
$palette-blue-700: nth($palette-blue, 8);
$palette-blue-800: nth($palette-blue, 9);
$palette-blue-900: nth($palette-blue, 10);
$palette-blue-A100: nth($palette-blue, 11);
$palette-blue-A200: nth($palette-blue, 12);
$palette-blue-A400: nth($palette-blue, 13);
$palette-blue-A700: nth($palette-blue, 14);
$palette-light-blue:
"225,245,254"
"179,229,252"
"129,212,250"
"79,195,247"
"41,182,246"
"3,169,244"
"3,155,229"
"2,136,209"
"2,119,189"
"1,87,155"
"128,216,255"
"64,196,255"
"0,176,255"
"0,145,234";
$palette-light-blue-50: nth($palette-light-blue, 1);
$palette-light-blue-100: nth($palette-light-blue, 2);
$palette-light-blue-200: nth($palette-light-blue, 3);
$palette-light-blue-300: nth($palette-light-blue, 4);
$palette-light-blue-400: nth($palette-light-blue, 5);
$palette-light-blue-500: nth($palette-light-blue, 6);
$palette-light-blue-600: nth($palette-light-blue, 7);
$palette-light-blue-700: nth($palette-light-blue, 8);
$palette-light-blue-800: nth($palette-light-blue, 9);
$palette-light-blue-900: nth($palette-light-blue, 10);
$palette-light-blue-A100: nth($palette-light-blue, 11);
$palette-light-blue-A200: nth($palette-light-blue, 12);
$palette-light-blue-A400: nth($palette-light-blue, 13);
$palette-light-blue-A700: nth($palette-light-blue, 14);
$palette-cyan:
"224,247,250"
"178,235,242"
"128,222,234"
"77,208,225"
"38,198,218"
"0,188,212"
"0,172,193"
"0,151,167"
"0,131,143"
"0,96,100"
"132,255,255"
"24,255,255"
"0,229,255"
"0,184,212";
$palette-cyan-50: nth($palette-cyan, 1);
$palette-cyan-100: nth($palette-cyan, 2);
$palette-cyan-200: nth($palette-cyan, 3);
$palette-cyan-300: nth($palette-cyan, 4);
$palette-cyan-400: nth($palette-cyan, 5);
$palette-cyan-500: nth($palette-cyan, 6);
$palette-cyan-600: nth($palette-cyan, 7);
$palette-cyan-700: nth($palette-cyan, 8);
$palette-cyan-800: nth($palette-cyan, 9);
$palette-cyan-900: nth($palette-cyan, 10);
$palette-cyan-A100: nth($palette-cyan, 11);
$palette-cyan-A200: nth($palette-cyan, 12);
$palette-cyan-A400: nth($palette-cyan, 13);
$palette-cyan-A700: nth($palette-cyan, 14);
$palette-teal:
"224,242,241"
"178,223,219"
"128,203,196"
"77,182,172"
"38,166,154"
"0,150,136"
"0,137,123"
"0,121,107"
"0,105,92"
"0,77,64"
"167,255,235"
"100,255,218"
"29,233,182"
"0,191,165";
$palette-teal-50: nth($palette-teal, 1);
$palette-teal-100: nth($palette-teal, 2);
$palette-teal-200: nth($palette-teal, 3);
$palette-teal-300: nth($palette-teal, 4);
$palette-teal-400: nth($palette-teal, 5);
$palette-teal-500: nth($palette-teal, 6);
$palette-teal-600: nth($palette-teal, 7);
$palette-teal-700: nth($palette-teal, 8);
$palette-teal-800: nth($palette-teal, 9);
$palette-teal-900: nth($palette-teal, 10);
$palette-teal-A100: nth($palette-teal, 11);
$palette-teal-A200: nth($palette-teal, 12);
$palette-teal-A400: nth($palette-teal, 13);
$palette-teal-A700: nth($palette-teal, 14);
$palette-green:
"232,245,233"
"200,230,201"
"165,214,167"
"129,199,132"
"102,187,106"
"76,175,80"
"67,160,71"
"56,142,60"
"46,125,50"
"27,94,32"
"185,246,202"
"105,240,174"
"0,230,118"
"0,200,83";
$palette-green-50: nth($palette-green, 1);
$palette-green-100: nth($palette-green, 2);
$palette-green-200: nth($palette-green, 3);
$palette-green-300: nth($palette-green, 4);
$palette-green-400: nth($palette-green, 5);
$palette-green-500: nth($palette-green, 6);
$palette-green-600: nth($palette-green, 7);
$palette-green-700: nth($palette-green, 8);
$palette-green-800: nth($palette-green, 9);
$palette-green-900: nth($palette-green, 10);
$palette-green-A100: nth($palette-green, 11);
$palette-green-A200: nth($palette-green, 12);
$palette-green-A400: nth($palette-green, 13);
$palette-green-A700: nth($palette-green, 14);
$palette-light-green:
"241,248,233"
"220,237,200"
"197,225,165"
"174,213,129"
"156,204,101"
"139,195,74"
"124,179,66"
"104,159,56"
"85,139,47"
"51,105,30"
"204,255,144"
"178,255,89"
"118,255,3"
"100,221,23";
$palette-light-green-50: nth($palette-light-green, 1);
$palette-light-green-100: nth($palette-light-green, 2);
$palette-light-green-200: nth($palette-light-green, 3);
$palette-light-green-300: nth($palette-light-green, 4);
$palette-light-green-400: nth($palette-light-green, 5);
$palette-light-green-500: nth($palette-light-green, 6);
$palette-light-green-600: nth($palette-light-green, 7);
$palette-light-green-700: nth($palette-light-green, 8);
$palette-light-green-800: nth($palette-light-green, 9);
$palette-light-green-900: nth($palette-light-green, 10);
$palette-light-green-A100: nth($palette-light-green, 11);
$palette-light-green-A200: nth($palette-light-green, 12);
$palette-light-green-A400: nth($palette-light-green, 13);
$palette-light-green-A700: nth($palette-light-green, 14);
$palette-lime:
"249,251,231"
"240,244,195"
"230,238,156"
"220,231,117"
"212,225,87"
"205,220,57"
"192,202,51"
"175,180,43"
"158,157,36"
"130,119,23"
"244,255,129"
"238,255,65"
"198,255,0"
"174,234,0";
$palette-lime-50: nth($palette-lime, 1);
$palette-lime-100: nth($palette-lime, 2);
$palette-lime-200: nth($palette-lime, 3);
$palette-lime-300: nth($palette-lime, 4);
$palette-lime-400: nth($palette-lime, 5);
$palette-lime-500: nth($palette-lime, 6);
$palette-lime-600: nth($palette-lime, 7);
$palette-lime-700: nth($palette-lime, 8);
$palette-lime-800: nth($palette-lime, 9);
$palette-lime-900: nth($palette-lime, 10);
$palette-lime-A100: nth($palette-lime, 11);
$palette-lime-A200: nth($palette-lime, 12);
$palette-lime-A400: nth($palette-lime, 13);
$palette-lime-A700: nth($palette-lime, 14);
$palette-yellow:
"255,253,231"
"255,249,196"
"255,245,157"
"255,241,118"
"255,238,88"
"255,235,59"
"253,216,53"
"251,192,45"
"249,168,37"
"245,127,23"
"255,255,141"
"255,255,0"
"255,234,0"
"255,214,0";
$palette-yellow-50: nth($palette-yellow, 1);
$palette-yellow-100: nth($palette-yellow, 2);
$palette-yellow-200: nth($palette-yellow, 3);
$palette-yellow-300: nth($palette-yellow, 4);
$palette-yellow-400: nth($palette-yellow, 5);
$palette-yellow-500: nth($palette-yellow, 6);
$palette-yellow-600: nth($palette-yellow, 7);
$palette-yellow-700: nth($palette-yellow, 8);
$palette-yellow-800: nth($palette-yellow, 9);
$palette-yellow-900: nth($palette-yellow, 10);
$palette-yellow-A100: nth($palette-yellow, 11);
$palette-yellow-A200: nth($palette-yellow, 12);
$palette-yellow-A400: nth($palette-yellow, 13);
$palette-yellow-A700: nth($palette-yellow, 14);
$palette-amber:
"255,248,225"
"255,236,179"
"255,224,130"
"255,213,79"
"255,202,40"
"255,193,7"
"255,179,0"
"255,160,0"
"255,143,0"
"255,111,0"
"255,229,127"
"255,215,64"
"255,196,0"
"255,171,0";
$palette-amber-50: nth($palette-amber, 1);
$palette-amber-100: nth($palette-amber, 2);
$palette-amber-200: nth($palette-amber, 3);
$palette-amber-300: nth($palette-amber, 4);
$palette-amber-400: nth($palette-amber, 5);
$palette-amber-500: nth($palette-amber, 6);
$palette-amber-600: nth($palette-amber, 7);
$palette-amber-700: nth($palette-amber, 8);
$palette-amber-800: nth($palette-amber, 9);
$palette-amber-900: nth($palette-amber, 10);
$palette-amber-A100: nth($palette-amber, 11);
$palette-amber-A200: nth($palette-amber, 12);
$palette-amber-A400: nth($palette-amber, 13);
$palette-amber-A700: nth($palette-amber, 14);
$palette-orange:
"255,243,224"
"255,224,178"
"255,204,128"
"255,183,77"
"255,167,38"
"255,152,0"
"251,140,0"
"245,124,0"
"239,108,0"
"230,81,0"
"255,209,128"
"255,171,64"
"255,145,0"
"255,109,0";
$palette-orange-50: nth($palette-orange, 1);
$palette-orange-100: nth($palette-orange, 2);
$palette-orange-200: nth($palette-orange, 3);
$palette-orange-300: nth($palette-orange, 4);
$palette-orange-400: nth($palette-orange, 5);
$palette-orange-500: nth($palette-orange, 6);
$palette-orange-600: nth($palette-orange, 7);
$palette-orange-700: nth($palette-orange, 8);
$palette-orange-800: nth($palette-orange, 9);
$palette-orange-900: nth($palette-orange, 10);
$palette-orange-A100: nth($palette-orange, 11);
$palette-orange-A200: nth($palette-orange, 12);
$palette-orange-A400: nth($palette-orange, 13);
$palette-orange-A700: nth($palette-orange, 14);
$palette-deep-orange:
"251,233,231"
"255,204,188"
"255,171,145"
"255,138,101"
"255,112,67"
"255,87,34"
"244,81,30"
"230,74,25"
"216,67,21"
"191,54,12"
"255,158,128"
"255,110,64"
"255,61,0"
"221,44,0";
$palette-deep-orange-50: nth($palette-deep-orange, 1);
$palette-deep-orange-100: nth($palette-deep-orange, 2);
$palette-deep-orange-200: nth($palette-deep-orange, 3);
$palette-deep-orange-300: nth($palette-deep-orange, 4);
$palette-deep-orange-400: nth($palette-deep-orange, 5);
$palette-deep-orange-500: nth($palette-deep-orange, 6);
$palette-deep-orange-600: nth($palette-deep-orange, 7);
$palette-deep-orange-700: nth($palette-deep-orange, 8);
$palette-deep-orange-800: nth($palette-deep-orange, 9);
$palette-deep-orange-900: nth($palette-deep-orange, 10);
$palette-deep-orange-A100: nth($palette-deep-orange, 11);
$palette-deep-orange-A200: nth($palette-deep-orange, 12);
$palette-deep-orange-A400: nth($palette-deep-orange, 13);
$palette-deep-orange-A700: nth($palette-deep-orange, 14);
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
$palette-brown:
"239,235,233"
"215,204,200"
"188,170,164"
"161,136,127"
"141,110,99"
"121,85,72"
"109,76,65"
"93,64,55"
"78,52,46"
"62,39,35";
$palette-brown-50: nth($palette-brown, 1);
$palette-brown-100: nth($palette-brown, 2);
$palette-brown-200: nth($palette-brown, 3);
$palette-brown-300: nth($palette-brown, 4);
$palette-brown-400: nth($palette-brown, 5);
$palette-brown-500: nth($palette-brown, 6);
$palette-brown-600: nth($palette-brown, 7);
$palette-brown-700: nth($palette-brown, 8);
$palette-brown-800: nth($palette-brown, 9);
$palette-brown-900: nth($palette-brown, 10);
$palette-grey:
"250,250,250"
"245,245,245"
"238,238,238"
"224,224,224"
"189,189,189"
"158,158,158"
"117,117,117"
"97,97,97"
"66,66,66"
"33,33,33";
$palette-grey-50: nth($palette-grey, 1);
$palette-grey-100: nth($palette-grey, 2);
$palette-grey-200: nth($palette-grey, 3);
$palette-grey-300: nth($palette-grey, 4);
$palette-grey-400: nth($palette-grey, 5);
$palette-grey-500: nth($palette-grey, 6);
$palette-grey-600: nth($palette-grey, 7);
$palette-grey-700: nth($palette-grey, 8);
$palette-grey-800: nth($palette-grey, 9);
$palette-grey-900: nth($palette-grey, 10);
$palette-blue-grey:
"236,239,241"
"207,216,220"
"176,190,197"
"144,164,174"
"120,144,156"
"96,125,139"
"84,110,122"
"69,90,100"
"55,71,79"
"38,50,56";
$palette-blue-grey-50: nth($palette-blue-grey, 1);
$palette-blue-grey-100: nth($palette-blue-grey, 2);
$palette-blue-grey-200: nth($palette-blue-grey, 3);
$palette-blue-grey-300: nth($palette-blue-grey, 4);
$palette-blue-grey-400: nth($palette-blue-grey, 5);
$palette-blue-grey-500: nth($palette-blue-grey, 6);
$palette-blue-grey-600: nth($palette-blue-grey, 7);
$palette-blue-grey-700: nth($palette-blue-grey, 8);
$palette-blue-grey-800: nth($palette-blue-grey, 9);
$palette-blue-grey-900: nth($palette-blue-grey, 10);
$color-black: "0,0,0";
$color-white: "255,255,255";
/* colors.scss */
$styleguide-generate-template: false !default;
@import "_color-definitions";
/* ========== Color & Themes ========== */
@ -676,6 +99,7 @@ $color-accent-contrast: $color-dark-contrast !default;
// and text-color-secondary-inverse.
$text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
$text-link-color: unquote("rgb(#{$color-accent})") !default;
/* ========== Components ========== */
@ -1016,7 +440,7 @@ $checkbox-ripple-size: $checkbox-label-height * 1.5;
/* Card dimensions */
$card-width: 330px !default;
$card-height: 508px !default;
$card-height: 200px !default;
$card-font-size: 16px !default;
$card-heading-font-size: 24px !default;
$card-heading-height: 96px !default;
@ -1085,7 +509,6 @@ $button-icon-size-mini: 24px !default;
/* ANIMATION */
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
@ -1095,3 +518,17 @@ $animation-curve-default: $animation-curve-fast-out-slow-in !default;
/* PROGRESS */
$bar-height: 4px !default;
/* BADGE */
$badge-color: unquote("rgb(#{$color-white})") !default;
$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
$badge-background: unquote("rgb(#{$color-accent})") !default;
$badge-background-inverse: unquote("rgba(#{$color-white},0.2)") !default;
$badge-size : 20px;
$badge-padding: 2px;
/* SHADOWS */
$shadow-key-umbra-opacity: 0.2;
$shadow-key-penumbra-opacity: 0.14;
$shadow-ambient-shadow-opacity: 0.12;

4
src/animation/animation.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Animation WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Animation MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

2
src/animation/demo.html
View File

@ -14,7 +14,7 @@
<div class="demo-animation__container">
<div class="demo-animation__container-background">Click me to animate</div>
<div class="demo-animation__container-foreground"></div>
<div class="demo-animation__movable demo-animation--position-1 mdl-shadow--z1"></div>
<div class="demo-animation__movable demo-animation--position-1 mdl-shadow--2dp"></div>
</div>
</div>
<!-- build:js(app/styleguide/animation/) ../../scripts/main.min.js -->

67
src/badge/_badge.scss Normal file
View File

@ -0,0 +1,67 @@
//---
// Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at),
// IT-Consulting and Development Limited.
//
// All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
@import "../variables";
.mdl-badge {
position : relative;
white-space: nowrap;
margin-right: ($badge-size + $badge-padding);
&:not([data-badge]) {
margin-right: auto;
}
&[data-badge]:after {
content : attr(data-badge);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
align-items: center;
position : absolute;
top : -($badge-size / 2);
right : -($badge-size + $badge-padding);
.mdl-button & {
top : -10px;
right : -5px;
}
font-size : 10px;
width : $badge-size;
height : $badge-size;
border-radius : 50%;
background : $badge-background;
color : $badge-color;
}
&.mdl-badge--no-background {
&[data-badge]:after {
color : $badge-color-inverse;
background : $badge-background-inverse;
box-shadow:0 0 1px gray;
}
}
}

97
src/badge/demo.html Normal file
View File

@ -0,0 +1,97 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Badge</title>
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
</head>
<body class="demo-page demo-page--badge">
<div class="demo-preview-block">
<section class="toolbar">
<div class="toolbar">
<div class="wrapper">
<div id="el1" class="icon mdl-badge mdl-js-badge" data-badge="1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24h-24z" fill="none"/>
<path d="M14 2h-8c-1.1 0-1.99.9-1.99 2l-.01 16c0 1.1.89 2 1.99 2h12.01c1.1 0 2-.9 2-2v-12l-6-6zm2 14h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2zm-3-7v-5.5l5.5 5.5h-5.5z"/>
</svg>
</div>
</div>
<div class="wrapper">
<div id="el2" class="icon mdl-badge" data-badge="♥">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M0 0h18v18h-18z" fill="none"/>
<path d="M6 8c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-3 5.5c2.14 0 3.92-1.5 4.38-3.5h-8.76c.46 2 2.24 3.5 4.38 3.5zm0-12.5c-4.43 0-8 3.58-8 8s3.57 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"/>
</svg>
</div>
</div>
<div class="wrapper">
<div id="el3" class="icon mdl-badge" data-badge="99">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M0 0h18v18h-18z" fill="none"/>
<path d="M6 8c1.11 0 2-.9 2-2s-.89-2-2-2c-1.1 0-2 .9-2 2s.9 2 2 2zm6 0c1.11 0 2-.9 2-2s-.89-2-2-2c-1.11 0-2 .9-2 2s.9 2 2 2zm-6 1.2c-1.67 0-5 .83-5 2.5v1.3h10v-1.3c0-1.67-3.33-2.5-5-2.5zm6 0c-.25 0-.54.02-.84.06.79.6 1.34 1.4 1.34 2.44v1.3h4.5v-1.3c0-1.67-3.33-2.5-5-2.5z"/>
</svg>
</div>
</div>
<div class="wrapper">
<div id="el4" class="icon mdl-badge" data-badge="888">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M0 0h18v18h-18z" fill="none"/>
<path d="M2 13.5h14v-1.5h-14v1.5zm0-4h14v-1.5h-14v1.5zm0-5.5v1.5h14v-1.5h-14z"/>
</svg>
</div>
</div>
</div>
<p>
<strong>Hint:</strong> Check your log and you'll see the values for the first badge...
</p>
</section>
<section class="text">
<h5>Text</h5>
<span class="mdl-badge" data-badge="42">I am in span</span>
<span class="mdl-badge" data-badge="!">Me too</span>
<div class="mdl-badge" data-badge="99">Im am in a div, but makes no sense here</div>
<span class="mdl-badge">I have <strong>no</strong> data-badge!!!</span> <span class="mdl-badge" data-badge="88">But I have one</span>
<p style="margin-top: 1em">Right margin is set <strong>automatically</strong>, top margin is left to you - it depends to much on the situation</p>
</section>
<section class="links">
<h5>Links</h5>
<a href="#" class="mdl-badge" data-badge="10">Hallo</a>
<a href="#" class="mdl-badge" data-badge="1">Hallo</a>
<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a>
<div class="dark">
<a href="#" class="mdl-badge" data-badge="1">Simulate header</a>
<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a>
</div>
<div class="fontawsom">
<a href="#">
<i class="fa fa-user-secret"></i><span class="mdl-badge" data-badge="1">Test</span>
</a>
<a href="#">
<i class="fa fa-exclamation-circle"></i><span class="mdl-badge" data-badge="10">Test</span>
</a>
<a href="#">
<i class="fa fa-heartbeat"></i><span class="mdl-badge" data-badge="42"></span>
</a>
</div>
</section>
</div>
</body>
</html>

115
src/badge/demo.scss Normal file
View File

@ -0,0 +1,115 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../material-design-lite";
.demo-page--badge {
section {
h5 {
margin-bottom: 15px;
}
margin-bottom: 30px;
}
div.toolbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
align-items: center;
background : #eee;
padding : 10px 10px 0 10px;
height : 40px;
border-radius: 5px;
.wrapper {
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
align-items: flex-start;
.icon {
background-color : transparent;
&.mdl-badge {
opacity: 1;
}
border : none;
display : inline-block;
height : 21px;
margin : 10px 25px 15px 25px;
opacity : .7;
outline : none;
padding : 0;
position : relative;
width : 21px;
&:hover {
opacity : 1;
}
}
}
}
.links {
margin-top: 25px;
a {
text-decoration: none;
font-weight: normal;
margin-top: 10px;
}
.dark {
display: block;
border-radius: 5px;
margin: 5px 0;
padding: 15px;
background-color: $layout-header-bg-color;;
a {
color: white;
}
}
.fontawsom {
margin-top: 25px;
a, a:visited {
color: black;
}
i.fa {
font-size: 20px;
margin-right: 3px;
}
}
}
.button-block {
padding: 10px;
}
}

28
src/button/_button.scss
View File

@ -78,10 +78,10 @@
// Raised buttons
.mdl-button--raised {
background: $button-primary-color;
@include shadow-z1();
@include shadow-2dp();
&:active {
@include shadow-z3();
@include shadow-4dp();
background-color: $button-active-color;
}
@ -115,7 +115,7 @@
&[disabled][disabled] {
background-color: $button-primary-color-disabled;
color: $button-secondary-color-disabled;
@include shadow-z1();
@include shadow-2dp();
}
}
@ -159,7 +159,7 @@
}
&:active {
@include shadow-z3();
@include shadow-4dp();
background-color: $button-active-color;
}
@ -193,7 +193,7 @@
&[disabled][disabled] {
background-color: $button-primary-color-disabled;
color: $button-secondary-color-disabled;
@include shadow-z1();
@include shadow-2dp();
}
}
@ -252,3 +252,21 @@
background-color: transparent;
}
}
// Colorized buttons
.mdl-button--primary.mdl-button--primary {
background-color: $button-primary-color-alt;
color: $button-secondary-color-alt;
& .mdl-ripple {
background: $button-secondary-color-alt;
}
}
.mdl-button--accent.mdl-button--accent {
background-color: $button-fab-color-alt;
color: $button-fab-text-color-alt;
& .mdl-ripple {
background: $button-fab-text-color-alt;
}
}

4
src/button/button.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Button WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Button MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

14
src/button/demo.html
View File

@ -39,6 +39,20 @@
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>
<h2>.mdl-button--primary</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--primary"><span class="mdl-icon mdl-icon--add"/></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--primary"><span class="mdl-icon mdl-icon--add"/></button></div>
<h2>.mdl-button--accent</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent"><span class="mdl-icon mdl-icon--add"/></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--accent"><span class="mdl-icon mdl-icon--add"/></button></div>
<h2>.mdl-button--mini-fab</h2>
<div class="demo-button"><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--mini-fab mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>

4
src/card/README.md
View File

@ -94,7 +94,7 @@ A card (no shadow) with a heading, image, text, and action.
Card (level-3 shadow) with an image, caption, and text:
```html
<div class="mdl-card mdl-shadow--z3">
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card--img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card--caption">
@ -112,7 +112,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| MDL class | Effect | Remarks |
|-----------|--------|---------|
| `mdl-card` | Defines div element as an MDL card container | Required on "outer" div |
| `mdl-shadow--z1 through mdl-shadow--z5` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
| `mdl-shadow--2dp through mdl-shadow--8dp` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
| `mdl-card--heading` | Defines div as a card heading container(1) | Required on "inner" heading div |
| `mdl-card--heading-text` | Assigns appropriate text characteristics to card heading | Required on head tag (H1 - H6) inside heading div |
| `mdl-card--img-container` | Defines div as a card image container | Required on "inner" image div |

14
src/card/_card.scss
View File

@ -17,13 +17,13 @@
@import "../variables";
.mdl-card {
font-size: $card-font-size;
height : $card-height;
overflow : hidden;
width : $card-width;
z-index : $card-z-index;
position : relative;
background: $card-background-color;
font-size : $card-font-size;
height : $card-height;
overflow : hidden;
width : $card-width;
z-index : $card-z-index;
position : relative;
background : $card-background-color;
border-radius: 2px;
}

6
src/card/demo.html
View File

@ -11,7 +11,7 @@
</head>
<body class="demo-page demo-page--card">
<div class="demo-preview-block">
<div class="mdl-card mdl-shadow--z1">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">
@ -27,7 +27,7 @@
<a href="#">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--z2 demo-card--wide">
<div class="mdl-card mdl-shadow--3dp demo-card--wide">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">
@ -43,7 +43,7 @@
<a href="#">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--z3">
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">

4
src/checkbox/checkbox.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Checkbox WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Checkbox MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

102
src/column-layout/README.md
View File

@ -1,102 +0,0 @@
#Column-layout
##Introduction
The Material Design Lite (MDL) **column-layout** component is a simplified method for displaying brief content blocks in a columnar list format that easily adapts to different hardware devices and display environments. It reduces the usual coding burden required to correctly display and manipulate columns of content in a variety of display conditions.
The MDL column-layout is best suited for short lines of content, such as those that might be found in a long list, and that can benefit from being broken up into a columnar display. The content can automatically expand to a comfortable width into two or three columns (in which case the items will read sequentially left-to-right), or can automatically collapse to a minimum of one column (in which case the items will read sequentially top-to-bottom), automatically reformatting themselves to conform to device, orientation, and environment changes as they occur.
Column-layouts are an established but non-standardized feature in most user interfaces, and provide users with a way to conveniently access content that might otherwise take up too much screen space. Their design and use is an important factor in the overall user experience. See the column-layout component's [Material Design specifications page](http://www.google.com/design/spec/components/column-layouts.html) for details.
##Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
###To include an MDL **column-layout** component:
&nbsp;1. Code a `<div>` element; this is the "outer" container, intended to hold all of the columns' text items.
```html
<div>
</div>
```
&nbsp;2. For each brief text item, code one "inner" div, including the text to be displayed.
```html
<div>
<div>Apples</div>
<div>Bananas</div>
<div>Cherries</div>
<div>Dill seeds</div>
<div>Eggplant</div>
<div>Figs</div>
<div>Ginger root</div>
<div>Horseradish</div>
<div>Iceberg lettuce</div>
<div>etc.</div>
</div>
```
&nbsp;3. Add one or more MDL classes, separated by spaces, to the "outer" and "inner" divs using the `class` attribute.
```html
<div class="mdl-column-layout">
<div class="mdl-column-layout__child">Apples</div>
<div class="mdl-column-layout__child">Bananas</div>
<div class="mdl-column-layout__child">Cherries</div>
<div class="mdl-column-layout__child">Dill seeds</div>
<div class="mdl-column-layout__child">Eggplant</div>
<div class="mdl-column-layout__child">Figs</div>
<div class="mdl-column-layout__child">Ginger root</div>
<div class="mdl-column-layout__child">Horseradish</div>
<div class="mdl-column-layout__child">Iceberg lettuce</div>
<div class="mdl-column-layout__child">etc.</div>
</div>
```
The column-layout component is ready for use.
####Example
A list of NATO phonetic alphabet words in a column-layout div.
```html
<div class="mdl-column-layout">
<div class="mdl-column-layout__child">Alpha</div>
<div class="mdl-column-layout__child">Bravo</div>
<div class="mdl-column-layout__child">Charlie</div>
<div class="mdl-column-layout__child">Delta</div>
<div class="mdl-column-layout__child">Echo</div>
<div class="mdl-column-layout__child">Foxtrot</div>
<div class="mdl-column-layout__child">Golf</div>
<div class="mdl-column-layout__child">Hotel</div>
<div class="mdl-column-layout__child">India</div>
<div class="mdl-column-layout__child">Juliet</div>
<div class="mdl-column-layout__child">Kilo</div>
<div class="mdl-column-layout__child">Lima</div>
<div class="mdl-column-layout__child">Mike</div>
<div class="mdl-column-layout__child">November</div>
<div class="mdl-column-layout__child">Oscar</div>
<div class="mdl-column-layout__child">Papa</div>
<div class="mdl-column-layout__child">Quebec</div>
<div class="mdl-column-layout__child">Romeo</div>
<div class="mdl-column-layout__child">Sierra</div>
<div class="mdl-column-layout__child">Tango</div>
<div class="mdl-column-layout__child">Uniform</div>
<div class="mdl-column-layout__child">Victor</div>
<div class="mdl-column-layout__child">Whiskey</div>
<div class="mdl-column-layout__child">X-ray</div>
<div class="mdl-column-layout__child">Yankee</div>
<div class="mdl-column-layout__child">Zulu</div>
</div>
```
##Configuration options
The MDL CSS classes apply various predefined visual enhancements and behavioral effects to the column-layout. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
|-----------|--------|---------|
| `mdl-column-layout` | Defines a container as an MDL column-layout component | Required on "outer" div element|
| `mdl-column-layout__child` | Defines a container as a column-layout item | Required on "inner" div elements|
##More information
For working examples of the **column-layout** component, see the MDL [column-layout demo page](www.github.com/google/material-design-lite/src/column-layout/demo.html).
## License
Copyright Google, 2015. Licensed under an Apache-2 license.

96
src/column-layout/_column-layout.scss
View File

@ -1,96 +0,0 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../variables";
.mdl-column-layout {
// Web layout.
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0;
box-sizing: border-box;
padding: $columns-web-gutter / 2;
// Add padding to avoid the flexbox growing beyond 3 columns.
// Yes, we use padding with calc. I promise this is the last hack.
@media screen
and (min-width: ($columns-web-count + 1) * $columns-web-block-size) {
padding-left: calc(50% - #{$columns-web-padding-size});
padding-right: calc(50% - #{$columns-web-padding-size});
}
// Tablet layout.
@media screen
and (min-width: $columns-tablet-size)
and (max-width: $columns-desktop-size - 1px) {
padding: $columns-tablet-gutter / 2;
}
// Phone layout.
@media screen and (max-width: $columns-tablet-size - 1px) {
padding: $columns-phone-gutter / 2;
}
}
// Mixin for both real child elements and the wrap hack.
@mixin columns-child-element() {
// Web layout.
min-width: $columns-web-size;
width: $columns-web-size;
margin: $columns-web-gutter / 2;
box-sizing: border-box;
// Tablet layout.
@media screen
and (min-width: $columns-tablet-size)
and (max-width: $columns-desktop-size - 1px) {
margin: $columns-tablet-gutter / 2;
min-width: calc(#{$columns-tablet-percent} - #{$columns-tablet-gutter});
width: calc(#{$columns-tablet-percent} - #{$columns-tablet-gutter});
}
// Phone layout.
@media screen and (max-width: $columns-tablet-size - 1px) {
margin: $columns-phone-gutter / 2;
width: calc(#{$columns-phone-percent} - #{$columns-phone-gutter});
min-width: calc(#{$columns-phone-percent} - #{$columns-phone-gutter});
}
}
.mdl-column-layout__child {
@include columns-child-element();
}
// Alright, this is not pretty, but we need to add a number of invisible
// elements to make sure that the flexbox elements align properly, even when
// wrapping to less than 3 columns. It's the only way I've found to get the
// last line to align correctly, while keeping the flexbox centered on its
// container.
// TODO(sgomes): Explore a different way of doing this.
.mdl-column-layout__wrap-hack {
@include columns-child-element();
height: 0;
min-height: 0;
max-height: 0;
border: none;
padding: 0;
margin-bottom: 0;
margin-top: 0;
opacity: 0;
}

84
src/column-layout/column-layout.js
View File

@ -1,84 +0,0 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Column Layout WSK component.
* Implements WSK component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
function MaterialColumnLayout(element) {
'use strict';
this.element_ = element;
// Initialize instance.
this.init();
}
/**
* Store constants in one place so they can be updated easily.
* @enum {string | number}
* @private
*/
MaterialColumnLayout.prototype.Constant_ = {
INVISIBLE_WRAPPING_ELEMENT_COUNT: 3
};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
* @enum {string}
* @private
*/
MaterialColumnLayout.prototype.CssClasses_ = {
/**
* Class names should use camelCase and be prefixed with the word "material"
* to minimize conflict with 3rd party systems.
*/
// TODO: Upgrade classnames in HTML / CSS / JS to use material prefix to
// reduce conflict and convert to camelCase for consistency.
INVISIBLE_WRAPPING_ELEMENT: 'mdl-column-layout__wrap-hack'
};
/**
* Initialize element.
*/
MaterialColumnLayout.prototype.init = function() {
'use strict';
if (this.element_) {
// Add some hidden elements to make sure everything aligns correctly. See
// CSS file for details.
for (var j = 0; j < this.Constant_.INVISIBLE_WRAPPING_ELEMENT_COUNT ; j++) {
var hiddenHackDiv = document.createElement('div');
hiddenHackDiv.classList.add(this.CssClasses_.INVISIBLE_WRAPPING_ELEMENT);
this.element_.appendChild(hiddenHackDiv);
}
}
};
//The component registers itself. It can assume componentHandler is available
//in the global scope.
componentHandler.register({
constructor: MaterialColumnLayout,
classAsString: 'MaterialColumnLayout',
cssClass: 'mdl-column-layout'
});

27
src/column-layout/demo.html
View File

@ -1,27 +0,0 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column Layout</title>
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
<link rel="stylesheet" href="demo.css">
</head>
<body class="demo-page demo-page--column-layout">
<div class="mdl-column-layout">
<div class="mdl-column-layout__child">Each child</div>
<div class="mdl-column-layout__child">gets to be</div>
<div class="mdl-column-layout__child">an independent entity</div>
<div class="mdl-column-layout__child">to be placed in columns,</div>
<div class="mdl-column-layout__child">automatically.</div>
</div>
<!-- build:js(app/styleguide/column-layout/) ../../scripts/main.min.js -->
<script src="../mdlComponentHandler.js"></script>
<script src="column-layout.js"></script>
<!-- endbuild -->
</body>
</html>

35
src/column-layout/demo.scss
View File

@ -1,35 +0,0 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../material-design-lite";
.demo-page--column-layout .mdl-column-layout {
background-color: #eee;
}
.demo-page--column-layout .mdl-column-layout__child {
min-height: 300px;
background-color: rgb(200,230,201);
padding: 16px;
}
.demo-page--column-layout .mdl-column-layout__child:nth-of-type(3n+1) {
background-color: rgb(255,205,210);
}
.demo-page--column-layout .mdl-column-layout__child:nth-of-type(3n+2) {
background-color: rgb(187,222,251);
}

70
src/grid/README.md Normal file
View File

@ -0,0 +1,70 @@
# Grid component
The grid component helps you lay out your content for multiple screen sizes.
## Basic Example
```html
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">Content</div>
<div class="mdl-cell mdl-cell--4-col">goes</div>
<div class="mdl-cell mdl-cell--4-col">here</div>
</div>
```
## Grid
The container element.
A grid has 12 columns in desktop screen sizes, 8 in tablet, and 4 in phone, with predefined margins and gutters baked in.
Cells are laid out sequentially in a row, in the order they're defined, with some rules:
- If a cell doesn't fit in the row in one of the screen sizes, it reflows into the following line.
- If a cell has a specified column size equal to or larger than the number of columns for the current screen size, it takes up the entirety of its row.
You can have a maximum grid width (after which the grid stays centered, with padding on either size) by setting is `max-width` CSS property.
### Options
- `mdl-grid--no-spacing`:
Creates a grid without any margins or gutters.
## mdl-cell
A cell inside the grid, with a given column size. The default is 4.
### Options
- `mdl-cell--N-col` (where N is a number between 1 and 12):
Set the column size for the cell to N. The default is 4.
- `mdl-cell--N-col-desktop` (where N is a number between 1 and 12):
Set the column size for the cell to N in desktop mode only.
- `mdl-cell--N-col-tablet` (where N is a number between 1 and 8):
Set the column size for the cell to N in tablet mode only.
- `mdl-cell--N-col-phone` (where N is a number between 1 and 4):
Set the column size for the cell to N in phone mode only.
- `mdl-cell--hide-desktop`:
Hides the cell when in desktop mode.
- `mdl-cell--hide-tablet`:
Hides the cell when in tablet mode.
- `mdl-cell--hide-phone`:
Hides the cell when in phone mode.
- `mdl-cell--stretch`:
Makes the cell stretch vertically to fill the parent. This is the default.
- `mdl-cell--top`:
Aligns the cell to the top of the parent.
- `mdl-cell--middle`:
Aligns the cell to the middle of the parent.
- `mdl-cell--bottom`:
Aligns the cell to the bottom of the parent.

197
src/grid/_grid.scss Normal file
View File

@ -0,0 +1,197 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$grid-desktop-columns: 12;
$grid-desktop-gutter: 16px;
$grid-desktop-margin: 16px;
$grid-desktop-breakpoint: 840px;
$grid-tablet-columns: 8;
$grid-tablet-gutter: $grid-desktop-gutter;
$grid-tablet-margin: $grid-desktop-margin;
$grid-tablet-breakpoint: 480px;
$grid-phone-columns: 4;
$grid-phone-gutter: $grid-desktop-gutter;
$grid-phone-margin: $grid-desktop-margin;
$grid-cell-default-columns: $grid-phone-columns;
.mdl-grid {
display: flex;
flex-flow: row wrap;
margin: 0 auto 0 auto;
align-items: stretch;
&.mdl-grid--no-spacing {
padding: 0;
}
}
.mdl-cell {
box-sizing: border-box;
}
.mdl-cell--top {
align-self: flex-start;
}
.mdl-cell--middle {
align-self: center;
}
.mdl-cell--bottom {
align-self: flex-end;
}
.mdl-cell--stretch {
align-self: stretch;
}
.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
margin: 0;
}
// Mixins for width calculation.
@mixin partial-size($size, $columns, $gutter) {
width: calc(#{(($size / $columns) * 100)+"%"} - #{$gutter});
.mdl-grid--no-spacing > & {
width: #{(($size / $columns) * 100)+"%"};
}
}
@mixin full-size($gutter) {
@include partial-size(1, 1, $gutter);
}
////////// Phone //////////
@media (max-width: $grid-tablet-breakpoint - 1) {
.mdl-grid {
padding: $grid-phone-margin - ($grid-phone-gutter / 2);
}
.mdl-cell {
margin: $grid-phone-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-phone-columns,
$grid-phone-gutter);
}
.mdl-cell--hide-phone {
display: none !important;
}
// Define partial sizes for columnNumber < totalColumns.
@for $i from 1 through ($grid-phone-columns - 1) {
.mdl-cell--#{$i}-col {
@include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
}
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
@include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
}
}
// Define 100% for everything else.
@for $i from $grid-phone-columns through $grid-desktop-columns {
.mdl-cell--#{$i}-col {
@include full-size($grid-phone-gutter);
}
.mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
@include full-size($grid-phone-gutter);
}
}
}
////////// Tablet //////////
@media (min-width: $grid-tablet-breakpoint) and (max-width: $grid-desktop-breakpoint - 1) {
.mdl-grid {
padding: $grid-tablet-margin - ($grid-tablet-gutter / 2);
}
.mdl-cell {
margin: $grid-tablet-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-tablet-columns,
$grid-tablet-gutter);
}
.mdl-cell--hide-tablet {
display: none !important;
}
// Define partial sizes for columnNumber < totalColumns.
@for $i from 1 through ($grid-tablet-columns - 1) {
.mdl-cell--#{$i}-col {
@include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
}
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
@include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
}
}
// Define 100% for everything else.
@for $i from $grid-tablet-columns through $grid-desktop-columns {
.mdl-cell--#{$i}-col {
@include full-size($grid-tablet-gutter);
}
.mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
@include full-size($grid-tablet-gutter);
}
}
}
////////// Desktop //////////
@media (min-width: $grid-desktop-breakpoint) {
.mdl-grid {
padding: $grid-desktop-margin - ($grid-desktop-gutter / 2);
}
.mdl-cell {
margin: $grid-desktop-gutter / 2;
@include partial-size($grid-cell-default-columns, $grid-desktop-columns,
$grid-desktop-gutter);
}
.mdl-cell--hide-desktop {
display: none !important;
}
// Define partial sizes for all numbers of columns.
@for $i from 1 through $grid-desktop-columns {
.mdl-cell--#{$i}-col {
@include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
}
.mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
@include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
}
}
}

48
src/grid/demo.html Normal file
View File

@ -0,0 +1,48 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="demo.css">
</head>
<body class="demo-page demo-page--grid">
<div class="demo-ruler mdl-grid">
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
</div>
<br/>
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
</div>
<br/>
<div class="demo-grid-2 mdl-grid">
<div class="mdl-cell mdl-cell--6-col">6</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--2-col">2</div>
</div>
<br/>
<div class="demo-grid-3 mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6<br/>(8 tablet)</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4<br/>(6 tablet)</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2<br/>(4 phone)</div>
</div>
</body>
</html>

69
src/grid/demo.scss Normal file
View File

@ -0,0 +1,69 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../material-design-lite";
.demo-page--grid .mdl-grid {
max-width: 1000px;
}
.demo-page--grid .mdl-cell {
color: white;
text-align: center;
font-size: 30px;
line-height: 1.5;
height: 200px;
}
.demo-page--grid .demo-ruler {
height: 50px;
overflow: hidden;
}
.demo-page--grid .demo-ruler .mdl-cell {
background: gray;
height: 50px;
}
.demo-page--grid .demo-grid-1 .mdl-cell:nth-of-type(1) {
background-color: red;
}
.demo-page--grid .demo-grid-1 .mdl-cell:nth-of-type(2) {
background-color: green;
}
.demo-page--grid .demo-grid-1 .mdl-cell:nth-of-type(3) {
background-color: blue;
}
.demo-page--grid .demo-grid-2 .mdl-cell:nth-of-type(1) {
background-color: purple;
}
.demo-page--grid .demo-grid-2 .mdl-cell:nth-of-type(2) {
background-color: brown;
}
.demo-page--grid .demo-grid-2 .mdl-cell:nth-of-type(3) {
background-color: black;
}
.demo-page--grid .demo-grid-3 .mdl-cell:nth-of-type(1) {
background-color: purple;
}
.demo-page--grid .demo-grid-3 .mdl-cell:nth-of-type(2) {
background-color: brown;
}
.demo-page--grid .demo-grid-3 .mdl-cell:nth-of-type(3) {
background-color: black;
}

4
src/icon-toggle/icon-toggle.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for icon toggle WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for icon toggle MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

17
src/layout/_layout.scss
View File

@ -82,7 +82,7 @@
top: 0;
left: 0;
@include shadow-z1();
@include shadow-2dp();
box-sizing: border-box;
border-right: 1px solid $layout-drawer-border-color;
@ -98,8 +98,7 @@
color: $layout-text-color;
overflow-x: hidden;
overflow-y: auto;
overflow: visible;
z-index: 5;
@ -139,7 +138,7 @@
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
.mdl-layout--fixed-drawer > & {
transform: translateX(0);
z-index: 2;
z-index: 3;
}
}
}
@ -212,10 +211,10 @@
color: $layout-header-text-color;
z-index: 3;
@include material-animation-default();
@include shadow-z1();
@include shadow-2dp();
transition-property: min-height, box-shadow;
padding-left: $layout-header-basic-desktop-indent;
overflow: hidden;
overflow: visible;
.mdl-layout.has-drawer & {
padding-left: $layout-header-desktop-indent;
@ -367,7 +366,7 @@
box-shadow: none;
&.is-casting-shadow {
@include shadow-z1();
@include shadow-2dp();
}
}
@ -503,7 +502,7 @@
}
&.is-casting-shadow {
@include shadow-z1();
@include shadow-2dp();
}
}
@ -517,7 +516,7 @@
z-index: 3;
flex-grow: 0;
flex-shrink: 0;
@include shadow-z1();
@include shadow-2dp();
.mdl-layout__container > & {
position: absolute;

4
src/layout/layout.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Layout WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Layout MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

3
src/material-design-lite.scss
View File

@ -30,12 +30,13 @@
@import "shadow/shadow";
@import "ripple/ripple";
@import "animation/animation";
@import "badge/badge";
@import "button/button";
@import "card/card";
@import "checkbox/checkbox";
@import "column-layout/column-layout";
@import "footer/mega_footer";
@import "footer/mini_footer";
@import "grid/grid";
@import "icon-toggle/icon-toggle";
@import "menu/menu";
@import "progress/progress";

4
src/mdlComponentHandler.js
View File

@ -143,7 +143,7 @@ var componentHandler = (function() {
/**
* Allows user to be alerted to any upgrades that are performed for a given
* component type
* @param {string} jsClass The class name of the WSK component we wish
* @param {string} jsClass The class name of the MDL component we wish
* to hook into for any upgrades performed.
* @param {function} callback The function to call upon an upgrade. This
* function should expect 1 parameter - the HTMLElement which got upgraded.
@ -184,7 +184,7 @@ window.addEventListener('load', function() {
/**
* Performs a "Cutting the mustard" test. If the browser supports the features
* tested, adds a mdl-js class to the <html> element. It then upgrades all WSK
* tested, adds a mdl-js class to the <html> element. It then upgrades all MDL
* components requiring JavaScript.
*/
if ('classList' in document.createElement('div') && 'querySelector' in document &&

94
src/menu/README.md
View File

@ -3,45 +3,81 @@
##Introduction
The Material Design Lite (MDL) **menu** component is a user interface element that allows users to select one of a number of options. The selection typically results in an action initiation, a setting change, or other observable effect. Menu options are always presented in sets of two or more, and options may be programmatically enabled or disabled as required. The menu appears when the user is asked to choose among a series of options, and is usually dismissed after the choice is made.
Menus are an established but non-standardized feature in user interfaces, and allow users to make choices that direct the activity, progress, or characteristics of software. Their design and use is an important factor in the overall user experience. See the menu component's [Material Design specifications page](http://www.google.com/design/spec/components/menus.html) for details.
Menus are an established but non-standardized feature in user interfaces, and allow users to make choices that direct the activity, progress, or characteristics of software. Their design and use is an important factor in the overall user experience. See the menu component's [Material Design specifications page](http://www.google.com/design/spec/components/menus.html) for details.
##Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
###To include an MDL **menu** component:
&nbsp;1. Code a `<ul>` unordered list element; this is the container that holds the options.
&nbsp;1. Code a `<button>` element; this is the clickable toggle that will show and hide the menu options. Include an `id` attribute whose value will match the `for` attribute of the unordered list coded in the next step. Inside the button, code a `<span>` element to contain an icon of your choice.
```html
<ul>
<button id="menu1">
<span />
</button>
```
&nbsp;2. Code a `<ul>` unordered list element; this is the container that holds the options. Include a `for` attribute whose value matches the `id` attribute of the button element.
```html
<ul for="menu1">
</ul>
```
&nbsp;2. Inside the unordered list, code one `<button>` element for each option. Include any desired attributes and values, such as an id or event handler, and add a text caption as appropriate.
&nbsp;3. Inside the unordered list, code one `<li>` element for each option. Include any desired attributes and values, such as an id or event handler, and add a text caption as appropriate.
```html
<ul>
<button>Continue</button>
<button>Stop</button>
<button>Pause</button>
<ul for="menu1">
<li>Continue</li>
<li>Stop</li>
<li>Pause</li>
</ul>
```
&nbsp;3. Add one or more MDL classes, separated by spaces, to the unordered list and the buttons using the `class` attribute.
&nbsp;4. Add one or more MDL classes, separated by spaces, to the button and span elements using the `class` attribute.
```html
<ul class="mdl-dropdown-menu">
<button class="mdl-item">Continue</button>
<button class="mdl-item">Stop</button>
<button class="mdl-item">Pause</button>
<button id="menu1" class="mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
```
&nbsp;5. Add one or more MDL classes, separated by spaces, to the unordered list and the list items using the `class` attribute.
```html
<ul class="mdl-menu mdl-js-menu" for="menu1">
<li class="mdl-menu__item">Continue</li>
<li class="mdl-menu__item">Stop</li>
<li class="mdl-menu__item">Pause</li>
</ul>
```
The menu component is ready for use.
####Example
A menu with three options, with ripple effect on option links.
####Examples
A menu with three options.
```html
<ul class="mdl-menu">
<button class="mdl-menu__item mdl-js-ripple-effect">Fast</button>
<button class="mdl-menu__item mdl-js-ripple-effect">Medium</button>
<button class="mdl-menu__item mdl-js-ripple-effect">Slow</button>
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
<li class="mdl-menu__item">Fast</li>
<li class="mdl-menu__item">Medium</li>
<li class="mdl-menu__item">Slow</li>
</ul>
```
A menu with three options, with ripple effect on button and option links.
```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="menu-speed">
<li class="mdl-menu__item">Fast</li>
<li class="mdl-menu__item">Medium</li>
<li class="mdl-menu__item">Slow</li>
</ul>
```
A menu with three options, the second of which is disabled by default.
```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
<li class="mdl-menu__item">Fast</li>
<li class="mdl-menu__item" disabled>Medium</li>
<li class="mdl-menu__item">Slow</li>
</ul>
```
@ -50,11 +86,22 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| MDL class | Effect | Remarks |
|-----------|--------|---------|
| `mdl-button` | Defines button as an MDL component | Required on button element |
| `mdl-js-button` | Assigns basic MDL behavior to button | Required on button element |
| `mdl-button--icon` | Applies *icon* (small plain circular) display effect to button | Required on button element |
| `mdl-icon` | Defines span as an MDL icon component | Required on span element |
| `mdl-icon--more-vert` | Defines span as an MDL vertical ellipsis icon(1) | Required on span element |
| `mdl-menu` | Defines an unordered list container as an MDL component | Required on ul element |
| `mdl-menu__item` | Defines buttons as MDL menu options and assigns basic MDL behavior | Required on button elements |
| `mdl-js-ripple-effect` | Applies *ripple* click effect to option links | Optional; goes on button elements |
| `mdl-menu__item` | Defines buttons as MDL menu options and assigns basic MDL behavior | Required on list item elements |
| `mdl-js-ripple-effect` | Applies *ripple* click effect to option links | Optional; goes on unordered list element |
| `mdl-menu--top-left` | Positions menu above button, aligns left edge of menu with button | Optional; goes on unordered list element |
| (none) | Positions menu below button, aligns left edge of menu with button | Default |
| `mdl-menu--top-right` | Positions menu above button, aligns right edge of menu with button | Optional; goes on unordered list element |
| `mdl-menu--bottom-right` | Positions menu below button, aligns right edge of menu with button | Optional; goes on unordered list element |
>**Note:** Disabled versions of the menu buttons are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="mdl-menu__item" disabled>Medium</button>`
(1) The "more-vert" icon class is used here as an example. Other icons can be used by modifying the class name. For a list of available icons, see [this page](http://google.github.io/web-starter-kit/latest/styleguide/icons/demo.html); hover over an icon to see its class name.
>**Note:** Disabled versions of the menu options are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<li class="mdl-menu__item" disabled>Medium</li>`
>This attribute may be added or removed programmatically via scripting.
##More information
@ -63,4 +110,3 @@ For working examples of the **menu** component, see the MDL [menu demo page](www
## License
Copyright Google, 2015. Licensed under an Apache-2 license.

3
src/menu/_menu.scss
View File

@ -41,7 +41,7 @@
opacity: 0;
transform: scale(0);
transform-origin: 0 0;
@include shadow-z1();
@include shadow-2dp();
will-change: transform;
transition: transform $menu-expand-duration $animation-curve-default,
opacity $menu-fade-duration $animation-curve-default;
@ -124,6 +124,7 @@
text-decoration: none;
cursor: pointer;
height: 48px;
width: 100%;
line-height: 48px;
white-space: nowrap;
opacity: 0;

6
src/menu/menu.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for dropdown WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for dropdown MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -387,7 +387,7 @@ MaterialMenu.prototype.show = function(evt) {
// Wait for the next frame, turn on animation, and apply the final clip.
// Also make it visible. This triggers the transitions.
window.requestAnimFrame(function() {
window.requestAnimationFrame(function() {
this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
this.container_.classList.add(this.CssClasses_.IS_VISIBLE);

7
src/palette/_palette.scss
View File

@ -2262,6 +2262,9 @@
.mdl-color--black {
background-color: unquote("rgb(#{$color-black})") !important;
}
.mdl-color-text--black {
color: unquote("rgb(#{$color-black})") !important;
}
// White
@ -2269,6 +2272,10 @@
.mdl-color--white {
background-color: unquote("rgb(#{$color-white})") !important;
}
.mdl-color-text--white {
color: unquote("rgb(#{$color-white})") !important;
}
// Primary and accent

49
src/progress/README.md Executable file
View File

@ -0,0 +1,49 @@
#Progress
##Introduction
The Material Design Lite (MDL) **progress** component is a visual indicator of background activity in a web page or application. A progress indicator consists of a (typically) horizontal bar containing some animation that conveys a sense of motion. While some progress devices indicate an approximate or specific percentage of completion, the MDL progress component simply communicates the fact that an activity is ongoing and is not yet complete.
Progress indicators are an established but non-standardized feature in user interfaces, and provide users with a visual clue to an application's status. Their design and use is therefore an important factor in the overall user experience. See the progress component's [Material Design specifications page](http://www.google.com/design/spec/components/progress-activity.html) for details.
##Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
###To include an MDL **progress** component:
&nbsp;1. Code a `<div>` element. Include any desired attributes and values, such as an id or width &mdash; typically done using external CSS rather than the inline `style` attribute as shown here.
```html
<div id="prog1" style="width:250px"></div>
```
&nbsp;2. Add one or more MDL classes, separated by spaces, to the div using the `class` attribute.
```html
<div id="prog1" style="width:250px" class="mdl-js-progress"></div>
```
The progress component is ready for use.
####Examples
A static (non-animated) progress indicator.
```html
<div id="progstatic" style="width:250px" class="mdl-js-progress"></div>
```
An active (animated) progress indicator.
```html
<div id="progactive" style="width:200px" class="mdl-js-progress mdl-progress__indeterminate"></div>
```
##Configuration options
The MDL CSS classes apply various predefined visual and behavioral enhancements to the progress indicator. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
|-----------|--------|---------|
| `mdl-js-progress` | Assigns basic MDL behavior to progress indicator | Required |
| `mdl-progress__indeterminate` | Applies animation effect | Optional |
##More information
For working examples of the **progress** component, see the MDL [progress demo page](www.github.com/google/material-design-lite/src/progress/demo.html).
## License
Copyright Google, 2015. Licensed under an Apache-2 license.

4
src/progress/progress.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Progress WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Progress MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

4
src/radio/radio.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Radio WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Radio MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

4
src/resets/_h5bp.scss
View File

@ -14,6 +14,8 @@
* limitations under the License.
*/
@import "../variables";
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
@ -25,7 +27,7 @@
========================================================================== */
html {
color: #222;
color: $text-color-primary;
font-size: 1em;
line-height: 1.4;
}

10
src/resets/_resets.scss
View File

@ -15,4 +15,12 @@
*/
@import "../resets/h5bp";
@import "../resets/mobile";
@import "../resets/mobile";
/*
* Main display reset for IE support.
* Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
*/
main {
display: block;
}

8
src/ripple/ripple.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Ripple WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Ripple MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -93,7 +93,7 @@ MaterialRipple.prototype.downHandler_ = function(event) {
}
this.setRippleXY(x, y);
this.setRippleStyles(true);
window.requestAnimFrame(this.animFrameHandler.bind(this));
window.requestAnimationFrame(this.animFrameHandler.bind(this));
}
};
@ -203,7 +203,7 @@ MaterialRipple.prototype.init = function() {
this.animFrameHandler = function() {
if (this.frameCount_-- > 0) {
window.requestAnimFrame(this.animFrameHandler.bind(this));
window.requestAnimationFrame(this.animFrameHandler.bind(this));
} else {
this.setRippleStyles(false);
}

3
src/shadow/README.md Normal file
View File

@ -0,0 +1,3 @@
# Shadows
Shadows render a shadow simulating the effect of a lifted piece of paper.

24
src/shadow/_shadow.scss
View File

@ -16,22 +16,26 @@
@import "../variables";
.mdl-shadow--z1 {
@include shadow-z1();
.mdl-shadow--2dp {
@include shadow-2dp();
}
.mdl-shadow--z2 {
@include shadow-z2();
.mdl-shadow--3dp {
@include shadow-3dp();
}
.mdl-shadow--z3 {
@include shadow-z3();
.mdl-shadow--4dp {
@include shadow-4dp();
}
.mdl-shadow--z4 {
@include shadow-z4();
.mdl-shadow--6dp {
@include shadow-6dp();
}
.mdl-shadow--z5 {
@include shadow-z5();
.mdl-shadow--8dp {
@include shadow-8dp();
}
.mdl-shadow--16dp {
@include shadow-16dp();
}

14
src/shadow/demo.html
View File

@ -14,17 +14,21 @@
</head>
<body class="demo-page demo-page--shadow">
<h3>Hand-Crafted Artisanal</h3>
<div class="demo-preview-block">
<div class="demo-shadow-card mdl-shadow--z1"></div>
<div class="demo-shadow-card mdl-shadow--2dp">2dp</div>
<div class="demo-shadow-card mdl-shadow--z2"></div>
<div class="demo-shadow-card mdl-shadow--3dp">3dp</div>
<div class="demo-shadow-card mdl-shadow--z3"></div>
<div class="demo-shadow-card mdl-shadow--4dp">4dp</div>
<div class="demo-shadow-card mdl-shadow--z4"></div>
<div class="demo-shadow-card mdl-shadow--6dp">6dp</div>
<div class="demo-shadow-card mdl-shadow--z5"></div>
<div class="demo-shadow-card mdl-shadow--8dp">8dp</div>
<div class="demo-shadow-card mdl-shadow--16dp">16dp</div>
</div>

16
src/shadow/demo.scss
View File

@ -20,14 +20,22 @@
background-color : #fff;
border-radius : 2px;
display : block;
height : 300px;
height : 72px;
margin-bottom : 20px;
margin-right : 32px;
padding : 10px;
text-align : center;
float : left;
color : #9E9E9E;
display : flex;
align-items : center;
justify-content : center;
transition-property: opacity, transform;
@include material-animation-default(300ms);
width : 300px;
width : 72px;
@media screen and (max-width: 360px ) {
width: 272px;
width: 27px;
}
}

6
src/slider/_slider.scss
View File

@ -403,9 +403,3 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
padding: 0;
transition: left 0.18s $animation-curve-default
}
// Some CSS magic to disable track animations in Firefox, since the thumb
// doesn't animate.
_:-moz-tree-row(hover), .mdl-slider__background-upper {
transition: none;
}

4
src/slider/slider.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Slider WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Slider MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

36
src/spinner/spinner.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Spinner WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Spinner MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -35,7 +35,7 @@ function MaterialSpinner(element) {
* @private
*/
MaterialSpinner.prototype.Constant_ = {
WSK_SPINNER_LAYER_COUNT: 4
MDL_SPINNER_LAYER_COUNT: 4
};
/**
@ -46,12 +46,12 @@ MaterialSpinner.prototype.Constant_ = {
* @private
*/
MaterialSpinner.prototype.CssClasses_ = {
WSK_SPINNER_LAYER: 'mdl-spinner__layer',
WSK_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
WSK_SPINNER_CIRCLE: 'mdl-spinner__circle',
WSK_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
WSK_SPINNER_LEFT: 'mdl-spinner__left',
WSK_SPINNER_RIGHT: 'mdl-spinner__right'
MDL_SPINNER_LAYER: 'mdl-spinner__layer',
MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
MDL_SPINNER_LEFT: 'mdl-spinner__left',
MDL_SPINNER_RIGHT: 'mdl-spinner__right'
};
/**
@ -61,25 +61,25 @@ MaterialSpinner.prototype.createLayer = function(index) {
'use strict';
var layer = document.createElement('div');
layer.classList.add(this.CssClasses_.WSK_SPINNER_LAYER);
layer.classList.add(this.CssClasses_.WSK_SPINNER_LAYER + '-' + index);
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
var leftClipper = document.createElement('div');
leftClipper.classList.add(this.CssClasses_.WSK_SPINNER_CIRCLE_CLIPPER);
leftClipper.classList.add(this.CssClasses_.WSK_SPINNER_LEFT);
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
var gapPatch = document.createElement('div');
gapPatch.classList.add(this.CssClasses_.WSK_SPINNER_GAP_PATCH);
gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
var rightClipper = document.createElement('div');
rightClipper.classList.add(this.CssClasses_.WSK_SPINNER_CIRCLE_CLIPPER);
rightClipper.classList.add(this.CssClasses_.WSK_SPINNER_RIGHT);
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
var circleOwners = [leftClipper, gapPatch, rightClipper];
for (var i = 0; i < circleOwners.length; i++) {
var circle = document.createElement('div');
circle.classList.add(this.CssClasses_.WSK_SPINNER_CIRCLE);
circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
circleOwners[i].appendChild(circle);
}
@ -120,7 +120,7 @@ MaterialSpinner.prototype.init = function() {
'use strict';
if (this.element_) {
for (var i = 1; i <= this.Constant_.WSK_SPINNER_LAYER_COUNT; i++) {
for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
this.createLayer(i);
}

4
src/switch/_switch.scss
View File

@ -97,7 +97,7 @@
cursor: pointer;
@include shadow-z1();
@include shadow-2dp();
@include material-animation-default(0.28s);
transition-property: left;
@ -106,7 +106,7 @@
background: $switch-thumb-color;
left: $switch-track-length - $switch-thumb-size;
@include shadow-z2();
@include shadow-3dp();
}
.mdl-switch.is-disabled & {

4
src/switch/switch.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Checkbox WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Checkbox MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

1
src/tabs/_tabs.scss
View File

@ -25,7 +25,6 @@
.mdl-tabs__tab-bar {
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : center; // ⇾
align-content : space-between; // ||
align-items : flex-start; // ↓

24
src/tabs/tabs.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Tabs WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Tabs MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
@ -52,10 +52,10 @@ MaterialTabs.prototype.CssClasses_ = {
ACTIVE_CLASS: 'is-active',
UPGRADED_CLASS: 'is-upgraded',
WSK_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
WSK_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
WSK_RIPPLE: 'mdl-ripple',
WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
MDL_RIPPLE: 'mdl-ripple',
MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
};
/**
@ -65,9 +65,9 @@ MaterialTabs.prototype.CssClasses_ = {
MaterialTabs.prototype.initTabs_ = function(e) {
'use strict';
if (this.element_.classList.contains(this.CssClasses_.WSK_JS_RIPPLE_EFFECT)) {
if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
this.element_.classList.add(
this.CssClasses_.WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
}
// Select element tabs, document panels
@ -119,12 +119,12 @@ function MaterialTab(tab, ctx) {
'use strict';
if (tab) {
if (ctx.element_.classList.contains(ctx.CssClasses_.WSK_JS_RIPPLE_EFFECT)) {
if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(ctx.CssClasses_.WSK_RIPPLE_CONTAINER);
rippleContainer.classList.add(ctx.CssClasses_.WSK_JS_RIPPLE_EFFECT);
rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
var ripple = document.createElement('span');
ripple.classList.add(ctx.CssClasses_.WSK_RIPPLE);
ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
rippleContainer.appendChild(ripple);
tab.appendChild(rippleContainer);
}

4
src/textfield/textfield.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Textfield WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Textfield MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

45
src/third_party/rAF.js vendored
View File

@ -1,11 +1,38 @@
// From: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
// shim layer with setTimeout fallback
window.requestAnimFrame = (function() {
'use strict';
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
// Adapted from https://gist.github.com/paulirish/1579671 which derived from
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
// MIT license
(function() {
'use strict';
if (!Date.now) {
Date.now = function() { return new Date().getTime(); };
}
var vendors = ['webkit', 'moz'];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i];
window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame'] ||
window[vp + 'CancelRequestAnimationFrame']);
}
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = function(callback) {
var now = Date.now();
var nextTime = Math.max(lastTime + 16, now);
return setTimeout(function() { callback(lastTime = nextTime); },
nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
}
})();

4
src/tooltip/tooltip.js
View File

@ -15,8 +15,8 @@
*/
/**
* Class constructor for Tooltip WSK component.
* Implements WSK component design pattern defined at:
* Class constructor for Tooltip MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/

58
src/typography/_typography.scss
View File

@ -29,46 +29,57 @@ h1, h2, h3, h4, h5, h6, p {
}
/**
* Styles for HTML elements
*/
* Styles for HTML elements
*/
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
@include typo-display-3($colorContrast: true);
font-size: 0.6em;
@include typo-display-3($colorContrast: true);
font-size: 0.6em;
}
h1 {
@include typo-display-3();
@include typo-display-3();
margin-top: 24px;
margin-bottom: 24px;
}
h2 {
@include typo-display-2();
@include typo-display-2();
margin-top: 24px;
margin-bottom: 24px;
}
h3 {
@include typo-display-1();
@include typo-display-1();
margin-top: 24px;
margin-bottom: 24px;
}
h4 {
@include typo-headline();
@include typo-headline();
margin-top: 24px;
margin-bottom: 16px;
}
h5 {
@include typo-title();
@include typo-title();
margin-top: 24px;
margin-bottom: 16px;
}
h6 {
@include typo-subhead();
@include typo-subhead();
margin-top: 24px;
margin-bottom: 16px;
}
p {
@include typo-body-1();
margin: 0 0 16px 0;
}
a {
font-weight: bold;
color: $text-link-color;
font-weight: 500;
}
blockquote {
@ -80,7 +91,16 @@ mark {
}
dt {
font-weight: 700;
font-weight: 700;
}
address {
@include typo-caption();
font-style: normal;
}
ul, ol {
@include typo-body-1();
}
/**
@ -240,16 +260,6 @@ dt {
text-transform: capitalize;
}
.mdl-typography--table-striped > tbody > tr:nth-child(odd) > td,
.mdl-typography--table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
.mdl-typography--table-striped > tbody > tr:nth-child(odd) > td,
.mdl-typography--table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
.mdl-typography--font-thin {
font-weight: 200 !important;
}

68
src/typography/demo.html
View File

@ -184,74 +184,6 @@
<h3>Inline code blocks</h3>
<p>Code blocks like <code>&lt;main&gt;</code> could be displayed inline.</p>
<h2>Tables</h2>
<h3>Basic table</h3>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Larry</td>
<td>Page</td>
<td>+LarryPage</td>
</tr>
<tr>
<td>2</td>
<td>Sergey</td>
<td>Brin</td>
<td>+SergeyBrin</td>
</tr>
<tr>
<td>3</td>
<td>Eric</td>
<td>Schmidt</td>
<td>+EricSchmidt</td>
</tr>
</tbody>
</table>
<h3>Striped Table</h3>
<table class="mdl-typography--table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Larry</td>
<td>Page</td>
<td>+LarryPage</td>
</tr>
<tr>
<td>2</td>
<td>Sergey</td>
<td>Brin</td>
<td>+SergeyBrin</td>
</tr>
<tr>
<td>3</td>
<td>Eric</td>
<td>Schmidt</td>
<td>+EricSchmidt</td>
</tr>
</tbody>
</table>
<h2>Color Contrasts</h2>

12
templates/blog/entry.html
View File

@ -58,9 +58,9 @@
</div>
</div>
</header>
<main class="mdl-layout__content">
<main class="mdl-layout__content mdl-grid">
<div class="mdl-card mdl-shadow--z3">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
<div class="mdl-card--img-container mdl-color-text--grey-50">
<h3>On the road again</h3>
</div>
@ -133,10 +133,10 @@
</div>
</div>
<nav class="mdl-color-text--grey-50">
<div><button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900"><span class="mdl-icon mdl-icon--arrow-back"></span></button> Newer</div>
<div class="spacer"></div>
<div>Older <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900"><span class="mdl-icon mdl-icon--arrow-forward"></span></button></div>
<nav class="mdl-color-text--grey-50 mdl-cell mdl-cell--12-col mdl-grid">
<div class="mdl-cell mdl-cell--2-col"><button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900"><span class="mdl-icon mdl-icon--arrow-back"></span></button> Newer</div>
<div class="mdl-cell mdl-cell--8-col-desktop mdl-cell--4-col-tablet mdl-cell--hide-phone"></div>
<div class="mdl-cell mdl-cell--2-col">Older <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900"><span class="mdl-icon mdl-icon--arrow-forward"></span></button></div>
</nav>
</main>
<div class="mdl-layout__obfuscator"></div>

BIN
templates/blog/images/co1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 259 KiB

After

Width:  |  Height:  |  Size: 11 KiB

20
templates/blog/index.html
View File

@ -57,8 +57,8 @@
</div>
</div>
</header>
<main class="mdl-layout__content">
<div class="mdl-card coffee-pic">
<main class="mdl-layout__content mdl-grid">
<div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col">
<div class="mdl-card--img-container mdl-color-text--grey-50">
<h3><a href="entry.html">Coffee Pic</a></h3>
</div>
@ -70,7 +70,7 @@
</div>
</div>
</div>
<div class="mdl-card something-else">
<div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
<div class="mdl-card--img-container mdl-color--primary mdl-color-text--grey-600">
<img src="images/logo.svg">
+1,337
@ -89,7 +89,7 @@
</button>
</div>
</div>
<div class="mdl-card on-the-road-again">
<div class="mdl-card on-the-road-again mdl-cell mdl-cell--8-col">
<div class="mdl-card--img-container mdl-color-text--grey-50">
<h3><a href="entry.html">On the road again</a></h3>
</div>
@ -104,7 +104,7 @@
</div>
</div>
</div>
<div class="mdl-card subscribe mdl-color-text--grey-600">
<div class="mdl-card subscribe mdl-color-text--grey-600 mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
<div class="mdl-card--header">
<h3>About</h3>
</div>
@ -120,7 +120,7 @@
</ul>
</div>
</div>
<div class="mdl-card amazing">
<div class="mdl-card amazing mdl-cell mdl-cell--8-col">
<div class="mdl-card--header mdl-color--accent mdl-color-text--grey-50">
<h3 class="quote"><a href="entry.html">I couldn’t take any pictures but this was an amazing thing…</a></h3>
</div>
@ -135,8 +135,8 @@
</div>
</div>
</div>
<div class="empty"></div>
<div class="mdl-card shopping">
<div class="empty mdl-cell mdl-cell--4-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="mdl-card shopping mdl-cell mdl-cell--8-col">
<div class="mdl-card--img-container mdl-color-text--grey-50">
<h3><a href="entry.html">Shopping</a></h3>
</div>
@ -151,8 +151,8 @@
</div>
</div>
</div>
<div class="empty"></div>
<nav class="mdl-color-text--grey-50">
<div class="empty mdl-cell mdl-cell--4-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<nav class="mdl-color-text--grey-50 mdl-cell mdl-cell--8-col">
More <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--arrow-forward"></span></button>
</nav>
</main>

32
templates/blog/styles.css
View File

@ -2,7 +2,8 @@ body {
background-image: url('images/bg.jpg');
background-size: cover;
background-attachment: fixed;
/* position: relative; */
/* FIXME: Temp. workaround for vertical scrollbars */
margin: 0;
}
.mdl-menu {
@ -12,12 +13,13 @@ body {
header.mdl-layout__header {
margin-bottom: 30vh;
}
main.mdl-layout__content {
padding: 0;
}
main.mdl-layout__content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 900px;
width: 900px;
width: 100%;
margin: 0 auto;
}
.mdl-layout__container {
@ -28,16 +30,10 @@ main.mdl-layout__content {
}
.mdl-card {
margin: 12px 15px;
display: flex;
flex-direction: column;
align-items: stretch;
}
main .mdl-card:nth-child(2n+1) {
width: 500px;
}
main .mdl-card:nth-child(2n) {
width: 300px;
min-height: 460px;
}
.mdl-card--header {
padding: 16px;
@ -52,6 +48,10 @@ main .mdl-card:nth-child(2n) {
flex-direction: row;
align-items: flex-end;
}
.mdl-card--img-container a,
.mdl-card--header a {
color: inherit;
}
.mdl-card--lower {
width: auto;
flex-grow: 1;
@ -171,6 +171,11 @@ h3.quote:after {
height: auto;
padding: 80px 120px;
}
@media (max-width: 480px) {
.blogpost main > .mdl-card > .mdl-card--bottom {
padding: 20px 30px;
}
}
.blogpost main > .mdl-card .mdl-card--img-container {
background-image: url('images/road_big.jpg');
}
@ -181,9 +186,8 @@ h3.quote:after {
padding-top: 0;
background-color: #EEE;
}
.blogpost main > nav {
width: 100%;
margin-top: 0;
.blogpost main > nav > div:last-child {
text-align: right;
}
.comments {

BIN
templates/dashboard/images/user.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 226 KiB

After

Width:  |  Height:  |  Size: 18 KiB

20
templates/dashboard/index.html
View File

@ -90,31 +90,31 @@
<a class="mdl-navigation__link" href=""><span class="mdl-color-text--blue-grey-400 mdl-icon mdl-icon--help"></span></a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="charts mdl-color--white mdl-shadow--z1">
<svg width="200px" height="200px" viewBox="0 0 1 1">
<main class="mdl-layout__content mdl-color--grey-100 mdl-grid">
<div class="charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid mdl-grid">
<svg width="200px" height="200px" viewBox="0 0 1 1" class="mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" alignment-baseline="middle">82%</text>
</svg>
<svg width="200px" height="200px" viewBox="0 0 1 1">
<svg width="200px" height="200px" viewBox="0 0 1 1" class="mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" alignment-baseline="middle">82%</text>
</svg>
<svg width="200px" height="200px" viewBox="0 0 1 1">
<svg width="200px" height="200px" viewBox="0 0 1 1" class="mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" alignment-baseline="middle">82%</text>
</svg>
<svg width="200px" height="200px" viewBox="0 0 1 1">
<svg width="200px" height="200px" viewBox="0 0 1 1" class="mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" alignment-baseline="middle">82%</text>
</svg>
</div>
<div class="graphs mdl-shadow--z1 mdl-color--white">
<div class="graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<img src="images/graph1.png">
<img src="images/graph2.png">
</div>
<div class="cards">
<div class="mdl-card mdl-shadow--z1">
<div class="cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--12-col-desktop">
<div class="mdl-card--heading mdl-color--teal-300 dog">
<h2 class="mdl-card--heading-text">Updates</h2>
</div>
@ -125,7 +125,7 @@
<a href="#">Read More</a>
</div>
</div>
<div class="mdl-card mdl-color--deep-purple-500 mdl-shadow--z1">
<div class="mdl-card mdl-color--deep-purple-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--12-col-desktop">
<div class="mdl-card--lower mdl-color-text--blue-grey-50">
<h3>View options</h3>
<ul>

26
templates/dashboard/styles.css
View File

@ -45,20 +45,10 @@ html, body {
}
.mdl-layout__content {
padding: 16px;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.charts {
width: 100%;
box-sizing: border-box;
padding: 32px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-bottom: 16px;
}
.charts svg:nth-child(1) {
fill: #ACEC00;
}
@ -72,22 +62,20 @@ html, body {
fill: #EF3C79;
}
.graphs {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px;
margin-bottom: 16px;
margin-right: 16px;
flex-grow: 1;
}
.graphs img {
width: 100%;
height: auto;
margin-bottom: 80px;
}
.cards {
padding: 0;
}
.cards .mdl-card {
height: auto;
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
.cards .mdl-card--heading {
display: flex;

31
templates/general/index.html
View File

@ -50,37 +50,37 @@
<a href="#experience-panel" class="mdl-layout__tab">Experience</a>
<a href="#contact-panel" class="mdl-layout__tab">Contact Us</a>
<a href="#blog-panel" class="mdl-layout__tab">Our Blog</a>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--z3 mdl-color--accent" id="mail"><span class="mdl-icon mdl-icon--email"></span></button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="mail"><span class="mdl-icon mdl-icon--email"></span></button>
</div>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="about-panel">
<header>
<div class="mdl-layout__tab-panel is-active mdl-grid mdl-grid--no-spacing" id="about-panel">
<header class="mdl-cell mdl-cell--12-col">
<h1>Call of the Wild</h1>
<h2>Experience the new</h2>
</header>
<section id="squares">
<div class="square">
<section id="squares" class="mdl-cell--12-col mdl-grid mdl-grid--no-spacing">
<div class="square mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<footer class="mdl-color--primary-dark">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--arrow-forward"></span></button>
<h3>Escape</h3>
<p>Lorem commodo do eiusmod anim quis.</p>
</footer>
</div>
<div class="square">
<div class="square mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<footer class="mdl-color--primary-dark">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--arrow-forward"></span></button>
<h3>Action</h3>
<p>Lorem commodo do eiusmod anim quis.</p>
</footer>
</div>
<div class="square">
<div class="square mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<footer class="mdl-color--primary-dark">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--arrow-forward"></span></button>
<h3>Nature</h3>
<p>Lorem commodo do eiusmod anim quis.</p>
</footer>
</div>
<div class="square">
<div class="square mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<footer class="mdl-color--primary-dark">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--arrow-forward"></span></button>
<h3>Discovery</h3>
@ -88,22 +88,23 @@
</footer>
</div>
</section>
<section id="cta">
<h3>Start your journey today</h3>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Contact Us</button>
<section id="cta" class="mdl-cell--12-col mdl-grid mdl-grid--no-spacing">
<h3 class="mdl-cell mdl-cell--12-col mdl-cell--bottom">Start your journey today</h3>
<div class="spacer mdl-cell mdl-cell--5-col-desktop mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div>
<button class="mdl-cell mdl-cell--2-col mdl-cell--top mdl-button mdl-js-button mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Contact Us</button>
</section>
<section id="authors" class="mdl-color--primary-contrast mdl-color-text--grey-600">
<div class="author">
<section id="authors" class="mdl-color--primary-contrast mdl-color-text--grey-600 mdl-cell--12-col mdl-grid mdl-grid--no-spacing">
<div class="author mdl-cell mdl-cell--4-col">
<img src="images/ex1.jpg">
<h4>Explorer Jane</h4>
<p>Eiusmod exercitation esse voluptate do excepteur laboris laborum exercitation tempor est non aute in.</p>
</div>
<div class="author">
<div class="author mdl-cell mdl-cell--4-col">
<img src="images/ex2.jpg">
<h4>Explorer John</h4>
<p>Eiusmod exercitation esse voluptate do excepteur laboris laborum exercitation tempor est non aute in.</p>
</div>
<div class="author">
<div class="author mdl-cell mdl-cell--12-col mdl-cell--4-col-desktop">
<img src="images/ex3.jpg">
<h4>Explorer Joe</h4>
<p>Eiusmod exercitation esse voluptate do excepteur laboris laborum exercitation tempor est non aute in.</p>

43
templates/general/styles.css
View File

@ -66,39 +66,25 @@ header.mdl-layout__header {
}
main > .mdl-layout__tab-panel > header {
box-sizing: border-box;
width: 100%;
padding: 72px;
}
main > .mdl-layout__tab-panel > header > *:last-child {
margin-bottom: 0;
}
#squares {
display: flex;
flex-direction: row;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
}
#squares > .square {
min-width: 24vw;
min-height: 25vw;
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: flex-end;
}
@media (max-width: 1280px) {
@media (max-width: 840px) {
#squares > .square {
min-width: 49vw;
min-height: 50vw;
}
}
@media (max-width: 640px) {
@media (max-width: 480px) {
#squares > .square {
min-width: 100vw;
min-height: 100vw;
}
}
@ -140,15 +126,9 @@ main > .mdl-layout__tab-panel > header > *:last-child {
}
#cta {
width: 100%;
height: 40vh;
background: url('images/cta.jpg') center center;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
}
#cta h3 {
@ -157,18 +137,11 @@ main > .mdl-layout__tab-panel > header > *:last-child {
}
#authors{
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: space-around;
flex-wrap: wrap;
padding-top: 40px;
background-color: white;
}
#authors > .author {
width: 300px;
margin: 0 40px;
padding: 0 40px;
}
.author {
display: flex;
@ -192,21 +165,11 @@ footer.mdl-mega-footer > * {
padding: 32px 16px;
padding-left: 80px;
}
.mdl-mega-footer--top-section {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.mdl-mega-footer--middle-section > span {
display: inline-block;
margin-right: 20px;
}
.mdl-mega-footer--bottom-section {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: 0.8em;
padding-top: 0 !important;
}

BIN
templates/product/images/feature_one.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
templates/product/images/feature_two.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

10
templates/product/images/logo.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="Page-1">
<path id="Shape" fill="none" stroke="#FFFFFF" stroke-width="3" d="M0,0h100v100H0V0z"/>
<path id="Shape_1_" fill="none" stroke="#FFFFFF" stroke-width="3" d="M100,0L50,100L0,0H100z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 682 B

BIN
templates/product/images/products.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

19
templates/product/images/squares.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="182px" height="183px" viewBox="0 0 182 183" enable-background="new 0 0 182 183" xml:space="preserve">
<g id="Page-1">
<g id="Line-_x2B_-Line-6" transform="translate(91.000000, 91.500000) rotate(-45.000000) translate(-91.000000, -91.500000) translate(8.000000, 50.000000)">
<path id="Line" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" stroke-opacity="0.87" d="M82.817,0.184
l-82.64,82.64"/>
<path id="Line-5" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" stroke-opacity="0.87" d="M0.184,0.184
l82.64,82.64"/>
<path id="Line-5_1_" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" stroke-opacity="0.87" d="
M83.183,0.184l82.64,82.64"/>
<path id="Line_1_" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" stroke-opacity="0.87" d="
M165.816,0.184l-82.64,82.64"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
templates/product/images/top.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

10
templates/product/images/triangles.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="183px" height="122px" viewBox="0 0 183 122" enable-background="new 0 0 183 122" xml:space="preserve">
<g id="Page-1">
<polygon id="Triangle-1" fill="none" stroke="#FFFFFF" stroke-width="3" points="60.7,4 118.4,120 3,120 "/>
<polygon id="Triangle-1_1_" fill="none" stroke="#FFFFFF" stroke-width="3" points="122.7,4 180.4,120 65,120 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

157
templates/product/index.html Normal file
View File

@ -0,0 +1,157 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="material.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="mdl-color--primary-dark mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--scroll">
<a href="/" id="logo"><img src="images/logo.svg"></a>
<a href="/" id="title" class="mdl-color-text--white">Your Product Site</a>
<div class="menu">
<nav class="mdl-navigation">
<a href="#about" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect active">About</a>
<a href="#products" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Products</a>
<a href="#faqs" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">FAQ</a>
<a href="#support" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Support</a>
<a href="#blog" class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect">Blog</a>
</nav>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-color--primary-contrast extra-spacing" id="about">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--1-col-tablet title">
<strong>About</strong>
</div>
<div class="mdl-cell mdl-cell--1-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--3-col-phone mdl-cell--7-col-tablet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet quis erat vel bibendum.
Sed id ornare lacus. Cras non nisl in leo luctus condimentum in id ante. Nam at condimentum enim,
non efficitur quam. Sed lacinia massa ipsum. In scelerisque dui ac pellentesque luctus.
</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet"></div>
</div>
</section>
<section class="mdl-color--primary-contrast" id="products">
<div class="heading products mdl-color-text--white">
<img src="images/triangles.svg" class="icon"><br>
Products
</div>
<div class="mdl-grid extra-spacing">
<div class="mdl-cell mdl-cell--2-col"></div>
<div class="mdl-cell mdl-cell--8-col">
Donec venenatis pharetra eros non elementum. Curabitur lobortis nunc ac elementum cursus.
Vivamus accumsan tincidunt dui sit amet tincidunt. Donec vel odio at justo tincidunt
malesuada non quis ipsum. Suspendisse dictum mi orci, non rhoncus ex elementum ut.
</div>
<div class="mdl-cell mdl-cell--2-col"></div>
</div>
</section>
<section id="faqs">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone heading feature-one mdl-color-text--white">
Feature
</div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone heading feature-two mdl-color-text--white">
Feature
</div>
</div>
<div class="heading support mdl-color-text--white">
<img src="images/squares.svg" class="icon"><br>
Support
</div>
</section>
<section class="mdl-color--primary-contrast extra-spacing" id="support">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone"></div>
<div class="mdl-cell mdl-cell--8-col mdl-cell--4-col-phone">
Donec venenatis pharetra eros non elementum. Curabitur lobortis nunc ac elementum cursus.
Vivamus accumsan tincidunt dui sit amet tincidunt. Donec vel odio at justo tincidunt
malesuada non quis ipsum. Suspendisse dictum mi orci, non rhoncus ex elementum ut.
</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-phone"></div>
</div>
</section>
<footer class="mdl-mega-footer mdl-color--primary-dark" id="blog">
<div class="mdl-mega-footer--top-section mdl-color--primary">
<button class="mdl-mega-footer--social-btn"><span class="mdl-icon mdl-icon--track-changes"></span></button>
<button class="mdl-mega-footer--social-btn"><span class="mdl-icon mdl-icon--track-changes"></span></button>
<button class="mdl-mega-footer--social-btn"><span class="mdl-icon mdl-icon--track-changes"></span></button>
</div>
<div class="mdl-mega-footer--middle-section">
<a href="#" class="mdl-color-text--white">Contact Us</a>
<a href="#" class="mdl-color-text--white">FAQ</a>
<a href="#" class="mdl-color-text--white">Support</a>
<a href="#" class="mdl-color-text--white">Blog</a>
</div>
<div class="mdl-mega-footer--bottom-section">
<a href="#" class="mdl-color-text--grey-600">Material Design Lite</a>
<a href="#" class="mdl-color-text--grey-600">Help</a>
<a href="#" class="mdl-color-text--grey-600">Privacy &amp; Terms</a>
</div>
</footer>
</main>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/product/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color--accent mdl-color-text--primary">
<span class="mdl-icon mdl-icon--search"/>
</a>
<script src="/material.min.js"></script>
<script>
(function() {
'use strict';
function setActiveState(link) {
removeActiveState();
link.classList.add('active');
}
function removeActiveState() {
var active = document.getElementsByClassName('mdl-navigation__link active');
if (active.length) {
active[0].classList.remove('active');
}
}
var links = document.getElementsByClassName('mdl-navigation')[0].children;
for (var i = 0, link; link = links[i]; i++) {
if (link.getAttribute('href') === location.hash) {
setActiveState(link);
}
link.addEventListener('click', function() {
setActiveState(this);
});
}
})();
</script>
</body>
</html>

9
templates/product/material.scss Normal file
View File

@ -0,0 +1,9 @@
@import '../../src/_variables.scss';
$color-primary: $palette-grey-800;
$color-primary-dark: $palette-grey-900;
$color-accent: $palette-yellow-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;
@import '../../src/material-design-lite';

179
templates/product/styles.css Normal file
View File

@ -0,0 +1,179 @@
html, body {
margin: 0;
padding: 0;
}
.mdl-layout__header .mdl-navigation__link {
line-height: 60px;
position: relative;
}
.mdl-layout__header .mdl-navigation__link.active {
border-bottom: 4px solid #ec1460;
}
header.mdl-layout__header {
padding-top: 30%;
padding-left: 0;
background: url('images/top.jpg') center center;
background-size: cover;
position: relative;
}
header.mdl-layout__header #logo {
width: 70px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -40px;
margin-left: -35px;
fill: #fff;
}
header.mdl-layout__header #logo img {
width: 100%;
}
header.mdl-layout__header .menu {
width: 100%;
background: rgba(0,0,0,0.2);
}
header.mdl-layout__header #title {
position: absolute;
left: 20px;
top: 20px;
text-decoration: none;
text-transform: uppercase;
width: 50px;
line-height: 20px;
font-size: 13px;
}
.extra-spacing {
padding: 7% 0;
text-align: center;
}
.mdl-mega-footer {
text-align: center;
padding: 0 0 32px;
}
.mdl-mega-footer a {
text-decoration: none;
}
.mdl-mega-footer div {
padding: 0 16px;
}
.mdl-mega-footer--top-section button {
margin: 0 10px;
}
.mdl-mega-footer--top-section:after, .mdl-mega-footer--middle-section:after {
border: none;
margin: 0;
}
.mdl-mega-footer .mdl-mega-footer--top-section {
padding: 16px 0;
}
.mdl-mega-footer .mdl-mega-footer--middle-section {
padding: 32px 0 16px;
text-transform: uppercase;
font-size: 12px;
}
.mdl-mega-footer .mdl-mega-footer--middle-section a {
display: inline-block;
padding: 0 10px;
}
.mdl-mega-footer .mdl-mega-footer--bottom-section {
padding: 0 0 16px;
font-size: 14px;
}
.mdl-mega-footer .mdl-mega-footer--bottom-section a {
display: inline-block;
padding: 0 5px;
font-size: 12px;
}
.heading {
padding: 5% 0;
text-align: center;
text-transform: uppercase;
font-size: 12px;
}
.heading .icon {
margin-bottom: 10%;
width: 200px;
}
.heading.products {
background: url('images/products.jpg') center center no-repeat;
background-size: cover;
}
.heading.feature-one {
padding-top: 40%;
background: url('images/feature_one.jpg') center center no-repeat;
background-size: cover;
}
.heading.feature-two {
padding-top: 40%;
background: url('images/feature_two.jpg') center center no-repeat;
background-size: cover;
}
#view-source {
position: fixed;
display: block;
right: 0;
top: 0;
z-index: 900;
margin: 40px;
}
#about {
text-align: left;
}
#about .title {
text-align: right;
}
@media (max-width: 850px) {
header.mdl-layout__header {
padding-top: 10%;
}
header.mdl-layout__header #logo {
width: 40px;
margin-left: -20px;
}
header.mdl-layout__header #title {
font-size: 12px;
line-height: 16px;
}
.mdl-layout__header .mdl-navigation__link {
line-height: 52px;
}
#view-source {
margin: 10px;
}
}
@media (max-width: 600px) {
#about .title {
text-align: center;
}
header.mdl-layout__header {
padding-top: 20%;
}
}

269
templates/text-only/index.html Normal file
View File

@ -0,0 +1,269 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="material.min.css">
<link rel="stylesheet" href="styles.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body class="mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--scroll mdl-layout__header--tall mdl-color--primary">
<div class="mdl-layout__header-row">
</div>
<div class="mdl-layout__header-row">
<h2>Name &amp; Title</h2>
</div>
<div class="mdl-layout__header-row">
</div>
</header>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<a href="#overview" class="mdl-layout__tab is-active">Overview</a>
<a href="#features" class="mdl-layout__tab">Features</a>
<a href="#features" class="mdl-layout__tab">Details</a>
<a href="#features" class="mdl-layout__tab">Technology</a>
<a href="#features" class="mdl-layout__tab">FAQ</a>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add"><span class="mdl-icon mdl-icon--add"></span></button>
</div>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white">
<span class="mdl-icon mdl-icon--play-circle-fill"></span>
</header>
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card--lower">
<h3>Features</h3>
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.
</div>
<div class="mdl-card--bottom">
<a href="#">Read our features</a>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn1">
<span class="mdl-icon mdl-icon--more-vert"></span>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn1">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
</ul>
</section>
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card--lower mdl-grid mdl-grid--no-spacing">
<h3 class="mdl-cell mdl-cell--12-col">Details</h3>
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--primary">
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
</div>
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--primary">
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
</div>
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--primary">
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
</div>
</div>
<div class="mdl-card--bottom">
<a href="#">Read our features</a>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn2">
<span class="mdl-icon mdl-icon--more-vert"></span>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn2">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
</ul>
</section>
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card--lower">
<h3>Technology</h3>
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.
</div>
<div class="mdl-card--bottom">
<a href="#">Read our features</a>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn3">
<span class="mdl-icon mdl-icon--more-vert"></span>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn3">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
</ul>
</section>
<section class="mdl-color--white mdl-grid">
<div class="section__circle section__circle--big mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--accent">
</div>
<div class="section__text mdl-cell mdl-cell--4-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex. Magna do magna ea anim occaecat anim non sit adipisicing et do sit sit laboris. Magna dolore do id mollit reprehenderit.
</div>
<div class="section__circle section__circle--big mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--accent">
</div>
<div class="section__text mdl-cell mdl-cell--4-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex. Magna do magna ea anim occaecat anim non sit adipisicing et do sit sit laboris. Magna dolore do id mollit reprehenderit.
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="features">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<h3>Features</h3>
Minim duis incididunt est cillum est ex occaecat consectetur.
<ul class="toc">
<h4>Contents</h4>
<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
<a href="#">Lorem ipsum</a>
</ul>
<h4>Lorem ipsum dolor sit amet</h4>
Excepteur et pariatur officia veniam anim culpa cupidatat consequat ad velit culpa est non.
<ul>
<li>Nisi qui nisi duis commodo duis reprehenderit consequat velit aliquip.</li>
<li>Dolor consectetur incididunt in ipsum laborum non et irure pariatur excepteur anim occaecat officia sint.</li>
<li>Lorem labore proident officia excepteur do.</li>
</ul>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<hr>
<h4>Lorem ipsum dolor sit amet</h4>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
</section>
</div>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<h1 class="mdl-mega-footer--heading">Features</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">About</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Updates</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<h1 class="mdl-mega-footer--heading">Details</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Spec</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<h1 class="mdl-mega-footer--heading">Technology</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">How it works</a></li>
<li><a href="#">Patterns</a></li>
<li><a href="#">Usage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contracts</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<h1 class="mdl-mega-footer--heading">FAQ</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Questions</a></li>
<li><a href="#">Answers</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-logo">
More Information
</div>
<ul class="mdl-mega-footer--link-list">
<li><a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Privacy and Terms</a></li>
</ul>
</div>
</footer>
</main>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/general/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect mdl-color--accent"><span class="mdl-icon mdl-icon--pageview"/></a>
<script src="/material.min.js"></script>
</body>
</html>

8
templates/text-only/material.scss Normal file
View File

@ -0,0 +1,8 @@
@import '../../src/_variables.scss';
$color-primary: $palette-deep-purple-600;
$color-primary-dark: $palette-deep-purple-800;
$color-accent: $palette-pink-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;
@import '../../src/material-design-lite';

132
templates/text-only/styles.css Normal file
View File

@ -0,0 +1,132 @@
html, body {
margin: 0;
padding: 0;
}
.mdl-layout__tab-bar-button, .mdl-layout__drawer-button {
display: none;
}
.mdl-layout__tab-bar-container {
overflow: visible;
}
.mdl-layout__tab-bar {
overflow: visible;
position: relative;
padding: 0;
height: 100%;
width: 100%;
}
main {
padding: 48px 0;
}
#add {
position: absolute;
right: 40px;
top: 20px;
z-index: 999;
}
.mdl-layout__content section:not(:last-of-type) {
position: relative;
margin-bottom: 48px;
}
section.section--center {
max-width: 840px;
}
section > header{
display: flex;
align-items: center;
justify-content: center;
}
section > .section__play-btn {
min-height: 200px;
}
section > header > .mdl-icon {
font-size: 3rem;
}
section > button {
position: absolute !important;
z-index: 99;
top: 8px;
right: 8px;
}
section .section__circle {
display: flex;
align-items: center;
justify-content: center;
}
section .section__circle img {
width: 48px;
height: 48px;
border-radius: 24px;
margin: 8px;
}
section .section__circle--big img {
width: 72px;
height: 72px;
border-radius: 36px;
}
section .section__text {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-content: center;
}
section.section--center .section__text:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,.13);
}
.mdl-card .mdl-card--lower > h3:first-child {
margin-bottom: 24px !important;
}
#features .mdl-card {
padding: 72px;
}
#features section {
margin-bottom: 72px;
}
#features h3, #features h4 {
margin-bottom: 8px;
}
.toc {
border-left: 2px solid #C1EEF4;
margin: 24px;
padding: 0;
padding-left: 8px;
display: flex;
flex-direction: column;
}
.toc h4 {
font-size: 0.8rem;
}
.toc a {
@extend mdl-color-text--cyan-300;
text-decoration: none;
line-height: 1.5em;
}
.mdl-card {
height: auto;
display: flex;
flex-direction: column;
}
.mdl-card > * {
height: auto;
}
.mdl-card--bottom {
color: inherit;
}
.mdl-card--bottom a {
color: inherit;
}
.mdl-card--lower {
flex-grow: 1;
margin: 32px;
padding: 0;
color: inherit;
}
.mdl-menu__container {
z-index: 99;
}

2
test/index.html
View File

@ -44,7 +44,6 @@
<script src="../src/mdlComponentHandler.js"></script>
<script src="../src/button/button.js"></script>
<script src="../src/checkbox/checkbox.js"></script>
<script src="../src/column-layout/column-layout.js"></script>
<script src="../src/icon-toggle/icon-toggle.js"></script>
<script src="../src/layout/layout.js"></script>
<script src="../src/progress/progress.js"></script>
@ -68,7 +67,6 @@
<!--<script src="test.spec.js"></script>-->
<script src="unit/button.js"></script>
<script src="unit/checkbox.js"></script>
<script src="unit/column-layout.js"></script>
<script src="unit/icon-toggle.js"></script>
<script src="unit/layout.js"></script>
<script src="unit/progress.js"></script>

29
test/unit/column-layout.js
View File

@ -1,29 +0,0 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
describe('column-layout tests', function () {
it('Should have MaterialColumnLayout globally available', function () {
expect(MaterialColumnLayout).to.be.a('function');
});
it('Should be upgraded to a MaterialColumnLayout successfully', function () {
var el = document.createElement('div');
componentHandler.upgradeElement(el, 'MaterialColumnLayout');
expect($(el)).to.have.data('upgraded', ',MaterialColumnLayout');
});
});

6
test/visual/card.html
View File

@ -12,7 +12,7 @@
</head>
<body>
<div class="PreviewBlock">
<div class="mdl-card mdl-shadow--z1">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">
@ -28,7 +28,7 @@
<a href="">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--z2">
<div class="mdl-card mdl-shadow--3dp">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">
@ -44,7 +44,7 @@
<a href="">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--z3">
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">

26
test/visual/column-layout.html
View File

@ -1,26 +0,0 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column Layout</title>
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
<link rel="stylesheet" href="../../css/material.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mdl-column-layout">
<div class="mdl-column-layout__child">Each child</div>
<div class="mdl-column-layout__child">gets to be</div>
<div class="mdl-column-layout__child">an independent entity</div>
<div class="mdl-column-layout__child">to be placed in columns,</div>
<div class="mdl-column-layout__child">automatically.</div>
</div>
<script src="../../js/material.js"></script>
</body>
</html>

10
test/visual/shadow.html
View File

@ -17,15 +17,15 @@
<div class="PreviewBlock">
<div class="demo-paper-card mdl-shadow--z1"></div>
<div class="demo-paper-card mdl-shadow--2dp"></div>
<div class="demo-paper-card mdl-shadow--z2"></div>
<div class="demo-paper-card mdl-shadow--3dp"></div>
<div class="demo-paper-card mdl-shadow--z3"></div>
<div class="demo-paper-card mdl-shadow--4dp"></div>
<div class="demo-paper-card mdl-shadow--z4"></div>
<div class="demo-paper-card mdl-shadow--6dp"></div>
<div class="demo-paper-card mdl-shadow--z5"></div>
<div class="demo-paper-card mdl-shadow--8dp"></div>
</div>