Rename wsk -> mdl
This commit is contained in:
Addy Osmani
parent
d0de42c333
commit
ef43a51d45
3672
css/material.css
3672
css/material.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
2
css/material.min.css
vendored
2
css/material.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,8 +1,8 @@
|
||||
.wsk-layout__content {
|
||||
.mdl-layout__content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.wsk-layout-title a,
|
||||
.mdl-layout-title a,
|
||||
button a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
2
docs/_templates/component.html
vendored
2
docs/_templates/component.html
vendored
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="wsk-button wsk-js-button wsk-button--raised">
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised">
|
||||
<a href="demo.html">demo</a></button>
|
||||
</div>
|
||||
|
||||
|
||||
24
docs/_templates/customize.html
vendored
24
docs/_templates/customize.html
vendored
@ -6,24 +6,24 @@
|
||||
|
||||
{{content|safe}}
|
||||
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi1">
|
||||
<input type="radio" id="wifi1" class="wsk-radio__button" name="wifi[]" value="1" checked />
|
||||
<span class="wsk-radio__label">Always</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
|
||||
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked />
|
||||
<span class="mdl-radio__label">Always</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi2">
|
||||
<input type="radio" id="wifi2" class="wsk-radio__button" name="wifi[]" value="2" />
|
||||
<span class="wsk-radio__label">Only when plugged in</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
|
||||
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2" />
|
||||
<span class="mdl-radio__label">Only when plugged in</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi3">
|
||||
<input type="radio" id="wifi3" class="wsk-radio__button" name="wifi[]" value="3" />
|
||||
<span class="wsk-radio__label">Never</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
|
||||
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3" />
|
||||
<span class="mdl-radio__label">Never</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi4">
|
||||
<input type="radio" id="wifi4" class="wsk-radio__button" name="wifi[]" value="3" disabled />
|
||||
<span class="wsk-radio__label">Unavailable option</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
|
||||
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled />
|
||||
<span class="mdl-radio__label">Unavailable option</span>
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
36
docs/_templates/layout.html
vendored
36
docs/_templates/layout.html
vendored
@ -40,35 +40,35 @@
|
||||
<body>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout">
|
||||
<header class="wsk-layout__header">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="/assets/app-icon.png">
|
||||
<img class="mdl-layout-icon" src="/assets/app-icon.png">
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title"><a href="/">Material Design Lite</a></span>
|
||||
<span class="mdl-layout-title"><a href="/">Material Design Lite</a></span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="/about">About</a>
|
||||
<a class="wsk-navigation__link" href="/getting_started">Getting started
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="/about">About</a>
|
||||
<a class="mdl-navigation__link" href="/getting_started">Getting started
|
||||
</a>
|
||||
<a class="wsk-navigation__link" href="/components">Components</a>
|
||||
<a class="wsk-navigation__link" href="/customize">Customize</a>
|
||||
<a class="mdl-navigation__link" href="/components">Components</a>
|
||||
<a class="mdl-navigation__link" href="/customize">Customize</a>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="/about">About</a>
|
||||
<a class="wsk-navigation__link" href="/getting_started">Getting started
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="/about">About</a>
|
||||
<a class="mdl-navigation__link" href="/getting_started">Getting started
|
||||
</a>
|
||||
<a class="wsk-navigation__link" href="/components">Components</a>
|
||||
<a class="wsk-navigation__link" href="/customize">Customize</a>
|
||||
<a class="mdl-navigation__link" href="/components">Components</a>
|
||||
<a class="mdl-navigation__link" href="/customize">Customize</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -157,7 +157,7 @@ gulp.task('styles', ['styletemplates'], function () {
|
||||
gulp.task('scripts', function () {
|
||||
var sources = [
|
||||
// Component handler
|
||||
'src/wskComponentHandler.js',
|
||||
'src/mdlComponentHandler.js',
|
||||
// Polyfills/dependencies
|
||||
'src/third_party/**/*.js',
|
||||
// Base components
|
||||
|
||||
254
js/material.js
254
js/material.js
@ -7,7 +7,7 @@
|
||||
/**
|
||||
* A component handler interface using the revealing module design pattern.
|
||||
* More details on this pattern design here:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @author Jason Mayes.
|
||||
*/
|
||||
/* exported componentHandler */
|
||||
@ -170,12 +170,12 @@ window.addEventListener('load', function() {
|
||||
|
||||
/**
|
||||
* Performs a "Cutting the mustard" test. If the browser supports the features
|
||||
* tested, adds a wsk-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 WSK
|
||||
* components requiring JavaScript.
|
||||
*/
|
||||
if ('classList' in document.createElement('div') && 'querySelector' in document &&
|
||||
'addEventListener' in window && Array.prototype.forEach) {
|
||||
document.documentElement.classList.add('wsk-js');
|
||||
document.documentElement.classList.add('mdl-js');
|
||||
componentHandler.upgradeAllRegistered();
|
||||
} else {
|
||||
componentHandler.upgradeElement = componentHandler.register = function () { };
|
||||
@ -197,7 +197,7 @@ window.requestAnimFrame = (function() {
|
||||
/**
|
||||
* Class constructor for Animation WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function DemoAnimation(element) {
|
||||
@ -277,7 +277,7 @@ componentHandler.register({
|
||||
/**
|
||||
* Class constructor for Button WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialButton(element) {
|
||||
@ -306,9 +306,9 @@ MaterialButton.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialButton.prototype.CssClasses_ = {
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'wsk-button__ripple-container',
|
||||
RIPPLE: 'wsk-ripple'
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'mdl-button__ripple-container',
|
||||
RIPPLE: 'mdl-ripple'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -372,13 +372,13 @@ MaterialButton.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialButton,
|
||||
classAsString: 'MaterialButton',
|
||||
cssClass: 'wsk-js-button'
|
||||
cssClass: 'mdl-js-button'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Checkbox WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialCheckbox(element) {
|
||||
@ -407,15 +407,15 @@ MaterialCheckbox.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.CssClasses_ = {
|
||||
INPUT: 'wsk-checkbox__input',
|
||||
BOX_OUTLINE: 'wsk-checkbox__box-outline',
|
||||
FOCUS_HELPER: 'wsk-checkbox__focus-helper',
|
||||
TICK_OUTLINE: 'wsk-checkbox__tick-outline',
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'wsk-checkbox__ripple-container',
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
INPUT: 'mdl-checkbox__input',
|
||||
BOX_OUTLINE: 'mdl-checkbox__box-outline',
|
||||
FOCUS_HELPER: 'mdl-checkbox__focus-helper',
|
||||
TICK_OUTLINE: 'mdl-checkbox__tick-outline',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked',
|
||||
@ -603,13 +603,13 @@ MaterialCheckbox.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialCheckbox,
|
||||
classAsString: 'MaterialCheckbox',
|
||||
cssClass: 'wsk-js-checkbox'
|
||||
cssClass: 'mdl-js-checkbox'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Column Layout WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialColumnLayout(element) {
|
||||
@ -645,7 +645,7 @@ MaterialColumnLayout.prototype.CssClasses_ = {
|
||||
|
||||
// TODO: Upgrade classnames in HTML / CSS / JS to use material prefix to
|
||||
// reduce conflict and convert to camelCase for consistency.
|
||||
INVISIBLE_WRAPPING_ELEMENT: 'wsk-column-layout__wrap-hack'
|
||||
INVISIBLE_WRAPPING_ELEMENT: 'mdl-column-layout__wrap-hack'
|
||||
};
|
||||
|
||||
|
||||
@ -672,13 +672,13 @@ MaterialColumnLayout.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialColumnLayout,
|
||||
classAsString: 'MaterialColumnLayout',
|
||||
cssClass: 'wsk-column-layout'
|
||||
cssClass: 'mdl-column-layout'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for icon toggle WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialIconToggle(element) {
|
||||
@ -707,12 +707,12 @@ MaterialIconToggle.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.CssClasses_ = {
|
||||
INPUT: 'wsk-icon-toggle__input',
|
||||
JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'wsk-icon-toggle__ripple-container',
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
INPUT: 'mdl-icon-toggle__input',
|
||||
JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked'
|
||||
@ -885,13 +885,13 @@ MaterialIconToggle.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialIconToggle,
|
||||
classAsString: 'MaterialIconToggle',
|
||||
cssClass: 'wsk-js-icon-toggle'
|
||||
cssClass: 'mdl-js-icon-toggle'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for dropdown WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialMenu(element) {
|
||||
@ -939,23 +939,23 @@ MaterialMenu.prototype.Keycodes_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialMenu.prototype.CssClasses_ = {
|
||||
CONTAINER: 'wsk-menu__container',
|
||||
OUTLINE: 'wsk-menu__outline',
|
||||
ITEM: 'wsk-menu__item',
|
||||
ITEM_RIPPLE_CONTAINER: 'wsk-menu__item-ripple-container',
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
CONTAINER: 'mdl-menu__container',
|
||||
OUTLINE: 'mdl-menu__outline',
|
||||
ITEM: 'mdl-menu__item',
|
||||
ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
// Statuses
|
||||
IS_UPGRADED: 'is-upgraded',
|
||||
IS_VISIBLE: 'is-visible',
|
||||
IS_ANIMATING: 'is-animating',
|
||||
// Alignment options
|
||||
BOTTOM_LEFT: 'wsk-menu--bottom-left', // This is the default.
|
||||
BOTTOM_RIGHT: 'wsk-menu--bottom-right',
|
||||
TOP_LEFT: 'wsk-menu--top-left',
|
||||
TOP_RIGHT: 'wsk-menu--top-right',
|
||||
UNALIGNED: 'wsk-menu--unaligned'
|
||||
BOTTOM_LEFT: 'mdl-menu--bottom-left', // This is the default.
|
||||
BOTTOM_RIGHT: 'mdl-menu--bottom-right',
|
||||
TOP_LEFT: 'mdl-menu--top-left',
|
||||
TOP_RIGHT: 'mdl-menu--top-right',
|
||||
UNALIGNED: 'mdl-menu--unaligned'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -1334,13 +1334,13 @@ MaterialMenu.prototype.toggle = function(evt) {
|
||||
componentHandler.register({
|
||||
constructor: MaterialMenu,
|
||||
classAsString: 'MaterialMenu',
|
||||
cssClass: 'wsk-js-menu'
|
||||
cssClass: 'mdl-js-menu'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Progress WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialProgress(element) {
|
||||
@ -1368,7 +1368,7 @@ MaterialProgress.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialProgress.prototype.CssClasses_ = {
|
||||
INDETERMINATE_CLASS: 'wsk-progress__indeterminate'
|
||||
INDETERMINATE_CLASS: 'mdl-progress__indeterminate'
|
||||
};
|
||||
|
||||
MaterialProgress.prototype.setProgress = function(p) {
|
||||
@ -1423,13 +1423,13 @@ MaterialProgress.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialProgress,
|
||||
classAsString: 'MaterialProgress',
|
||||
cssClass: 'wsk-js-progress'
|
||||
cssClass: 'mdl-js-progress'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Radio WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialRadio(element) {
|
||||
@ -1462,15 +1462,15 @@ MaterialRadio.prototype.CssClasses_ = {
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked',
|
||||
IS_UPGRADED: 'is-upgraded',
|
||||
JS_RADIO: 'wsk-js-radio',
|
||||
RADIO_BTN: 'wsk-radio__button',
|
||||
RADIO_OUTER_CIRCLE: 'wsk-radio__outer-circle',
|
||||
RADIO_INNER_CIRCLE: 'wsk-radio__inner-circle',
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'wsk-radio__ripple-container',
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE: 'wsk-ripple'
|
||||
JS_RADIO: 'mdl-js-radio',
|
||||
RADIO_BTN: 'mdl-radio__button',
|
||||
RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
|
||||
RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -1663,13 +1663,13 @@ MaterialRadio.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialRadio,
|
||||
classAsString: 'MaterialRadio',
|
||||
cssClass: 'wsk-js-radio'
|
||||
cssClass: 'mdl-js-radio'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Slider WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialSlider(element) {
|
||||
@ -1699,11 +1699,11 @@ MaterialSlider.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialSlider.prototype.CssClasses_ = {
|
||||
IE_CONTAINER: 'wsk-slider__ie-container',
|
||||
SLIDER_CONTAINER: 'wsk-slider__container',
|
||||
BACKGROUND_FLEX: 'wsk-slider__background-flex',
|
||||
BACKGROUND_LOWER: 'wsk-slider__background-lower',
|
||||
BACKGROUND_UPPER: 'wsk-slider__background-upper',
|
||||
IE_CONTAINER: 'mdl-slider__ie-container',
|
||||
SLIDER_CONTAINER: 'mdl-slider__container',
|
||||
BACKGROUND_FLEX: 'mdl-slider__background-flex',
|
||||
BACKGROUND_LOWER: 'mdl-slider__background-lower',
|
||||
BACKGROUND_UPPER: 'mdl-slider__background-upper',
|
||||
IS_LOWEST_VALUE: 'is-lowest-value',
|
||||
IS_UPGRADED: 'is-upgraded'
|
||||
};
|
||||
@ -1853,13 +1853,13 @@ MaterialSlider.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialSlider,
|
||||
classAsString: 'MaterialSlider',
|
||||
cssClass: 'wsk-js-slider'
|
||||
cssClass: 'mdl-js-slider'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Spinner WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialSpinner(element) {
|
||||
@ -1888,12 +1888,12 @@ MaterialSpinner.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialSpinner.prototype.CssClasses_ = {
|
||||
WSK_SPINNER_LAYER: 'wsk-spinner__layer',
|
||||
WSK_SPINNER_CIRCLE_CLIPPER: 'wsk-spinner__circle-clipper',
|
||||
WSK_SPINNER_CIRCLE: 'wsk-spinner__circle',
|
||||
WSK_SPINNER_GAP_PATCH: 'wsk-spinner__gap-patch',
|
||||
WSK_SPINNER_LEFT: 'wsk-spinner__left',
|
||||
WSK_SPINNER_RIGHT: 'wsk-spinner__right'
|
||||
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'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -1975,13 +1975,13 @@ MaterialSpinner.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialSpinner,
|
||||
classAsString: 'MaterialSpinner',
|
||||
cssClass: 'wsk-js-spinner'
|
||||
cssClass: 'mdl-js-spinner'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Checkbox WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialSwitch(element) {
|
||||
@ -2010,15 +2010,15 @@ MaterialSwitch.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialSwitch.prototype.CssClasses_ = {
|
||||
INPUT: 'wsk-switch__input',
|
||||
TRACK: 'wsk-switch__track',
|
||||
THUMB: 'wsk-switch__thumb',
|
||||
FOCUS_HELPER: 'wsk-switch__focus-helper',
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'wsk-switch__ripple-container',
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
INPUT: 'mdl-switch__input',
|
||||
TRACK: 'mdl-switch__track',
|
||||
THUMB: 'mdl-switch__thumb',
|
||||
FOCUS_HELPER: 'mdl-switch__focus-helper',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked'
|
||||
@ -2208,13 +2208,13 @@ MaterialSwitch.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialSwitch,
|
||||
classAsString: 'MaterialSwitch',
|
||||
cssClass: 'wsk-js-switch'
|
||||
cssClass: 'mdl-js-switch'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Tabs WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialTabs(element) {
|
||||
@ -2244,15 +2244,15 @@ MaterialTabs.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialTabs.prototype.CssClasses_ = {
|
||||
TAB_CLASS: 'wsk-tabs__tab',
|
||||
PANEL_CLASS: 'wsk-tabs__panel',
|
||||
TAB_CLASS: 'mdl-tabs__tab',
|
||||
PANEL_CLASS: 'mdl-tabs__panel',
|
||||
ACTIVE_CLASS: 'is-active',
|
||||
UPGRADED_CLASS: 'is-upgraded',
|
||||
|
||||
WSK_JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
WSK_RIPPLE_CONTAINER: 'wsk-tabs__ripple-container',
|
||||
WSK_RIPPLE: 'wsk-ripple',
|
||||
WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events'
|
||||
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'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -2344,13 +2344,13 @@ function MaterialTab(tab, ctx) {
|
||||
componentHandler.register({
|
||||
constructor: MaterialTabs,
|
||||
classAsString: 'MaterialTabs',
|
||||
cssClass: 'wsk-js-tabs'
|
||||
cssClass: 'mdl-js-tabs'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Textfield WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialTextfield(element) {
|
||||
@ -2380,8 +2380,8 @@ MaterialTextfield.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialTextfield.prototype.CssClasses_ = {
|
||||
LABEL: 'wsk-textfield__label',
|
||||
INPUT: 'wsk-textfield__input',
|
||||
LABEL: 'mdl-textfield__label',
|
||||
INPUT: 'mdl-textfield__input',
|
||||
IS_DIRTY: 'is-dirty',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
@ -2533,13 +2533,13 @@ MaterialTextfield.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialTextfield,
|
||||
classAsString: 'MaterialTextfield',
|
||||
cssClass: 'wsk-js-textfield'
|
||||
cssClass: 'mdl-js-textfield'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Tooltip WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialTooltip(element) {
|
||||
@ -2630,13 +2630,13 @@ MaterialTooltip.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialTooltip,
|
||||
classAsString: 'MaterialTooltip',
|
||||
cssClass: 'wsk-tooltip'
|
||||
cssClass: 'mdl-tooltip'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Layout WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialLayout(element) {
|
||||
@ -2677,30 +2677,30 @@ MaterialLayout.prototype.Mode_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.CssClasses_ = {
|
||||
HEADER: 'wsk-layout__header',
|
||||
DRAWER: 'wsk-layout__drawer',
|
||||
CONTENT: 'wsk-layout__content',
|
||||
DRAWER_BTN: 'wsk-layout__drawer-button',
|
||||
HEADER: 'mdl-layout__header',
|
||||
DRAWER: 'mdl-layout__drawer',
|
||||
CONTENT: 'mdl-layout__content',
|
||||
DRAWER_BTN: 'mdl-layout__drawer-button',
|
||||
|
||||
JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'wsk-layout__tab-ripple-container',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
|
||||
HEADER_SEAMED: 'wsk-layout__header--seamed',
|
||||
HEADER_WATERFALL: 'wsk-layout__header--waterfall',
|
||||
HEADER_SCROLL: 'wsk-layout__header--scroll',
|
||||
HEADER_SEAMED: 'mdl-layout__header--seamed',
|
||||
HEADER_WATERFALL: 'mdl-layout__header--waterfall',
|
||||
HEADER_SCROLL: 'mdl-layout__header--scroll',
|
||||
|
||||
FIXED_HEADER: 'wsk-layout--fixed-header',
|
||||
OBFUSCATOR: 'wsk-layout__obfuscator',
|
||||
FIXED_HEADER: 'mdl-layout--fixed-header',
|
||||
OBFUSCATOR: 'mdl-layout__obfuscator',
|
||||
|
||||
TAB_BAR: 'wsk-layout__tab-bar',
|
||||
TAB_CONTAINER: 'wsk-layout__tab-bar-container',
|
||||
TAB: 'wsk-layout__tab',
|
||||
TAB_BAR_BUTTON: 'wsk-layout__tab-bar-button',
|
||||
TAB_BAR_LEFT_BUTTON: 'wsk-layout__tab-bar-left-button',
|
||||
TAB_BAR_RIGHT_BUTTON: 'wsk-layout__tab-bar-right-button',
|
||||
PANEL: 'wsk-layout__tab-panel',
|
||||
TAB_BAR: 'mdl-layout__tab-bar',
|
||||
TAB_CONTAINER: 'mdl-layout__tab-bar-container',
|
||||
TAB: 'mdl-layout__tab',
|
||||
TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
|
||||
TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
|
||||
TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
|
||||
PANEL: 'mdl-layout__tab-panel',
|
||||
|
||||
HAS_DRAWER_CLASS: 'has-drawer',
|
||||
SHADOW_CLASS: 'is-casting-shadow',
|
||||
@ -2816,7 +2816,7 @@ MaterialLayout.prototype.init = function() {
|
||||
|
||||
if (this.element_) {
|
||||
var container = document.createElement('div');
|
||||
container.classList.add('wsk-layout__container');
|
||||
container.classList.add('mdl-layout__container');
|
||||
this.element_.parentElement.insertBefore(container, this.element_);
|
||||
this.element_.parentElement.removeChild(this.element_);
|
||||
container.appendChild(this.element_);
|
||||
@ -2991,13 +2991,13 @@ function MaterialLayoutTab(tab, tabs, panels, layout) {
|
||||
componentHandler.register({
|
||||
constructor: MaterialLayout,
|
||||
classAsString: 'MaterialLayout',
|
||||
cssClass: 'wsk-js-layout'
|
||||
cssClass: 'mdl-js-layout'
|
||||
});
|
||||
|
||||
/**
|
||||
* Class constructor for Ripple WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialRipple(element) {
|
||||
@ -3030,9 +3030,9 @@ MaterialRipple.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialRipple.prototype.CssClasses_ = {
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE_EFFECT_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_ANIMATING: 'is-animating',
|
||||
IS_VISIBLE: 'is-visible'
|
||||
};
|
||||
@ -3197,5 +3197,5 @@ MaterialRipple.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialRipple,
|
||||
classAsString: 'MaterialRipple',
|
||||
cssClass: 'wsk-js-ripple-effect'
|
||||
cssClass: 'mdl-js-ripple-effect'
|
||||
});
|
||||
|
||||
4
js/material.min.js
vendored
4
js/material.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -28,7 +28,7 @@ That's it! You are now ready to use the MDL components.
|
||||
In general, follow these basic steps to use an MDL component in your HTML page.
|
||||
|
||||
1. Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.<br/><br/>
|
||||
2. Add one or more MDL-specific CSS classes to the element, such as `wsk-button`, `wsk-tabs__panel`, or `wsk-list--inline`, again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br/><br/>
|
||||
2. Add one or more MDL-specific CSS classes to the element, such as `mdl-button`, `mdl-tabs__panel`, or `mdl-list--inline`, again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br/><br/>
|
||||
3. View the page, preferably in multiple browsers on multiple devices, to ensure that the component looks and behaves as expected.
|
||||
|
||||
>**A note about HTML elements and MDL CSS classes**
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../material-design-lite";
|
||||
|
||||
$padding: 24px;
|
||||
$icon-font-path: "packages/wsk_material/sass/fonts/";
|
||||
$icon-font-path: "packages/mdl_material/sass/fonts/";
|
||||
|
||||
.demo-page {
|
||||
width: 100%;
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
@import "../variables";
|
||||
|
||||
|
||||
.wsk-animation--default {
|
||||
.mdl-animation--default {
|
||||
transition-timing-function: $animation-curve-default;
|
||||
}
|
||||
|
||||
.wsk-animation--fast-out-slow-in {
|
||||
.mdl-animation--fast-out-slow-in {
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
}
|
||||
|
||||
.wsk-animation--linear-out-slow-in {
|
||||
.mdl-animation--linear-out-slow-in {
|
||||
transition-timing-function: $animation-curve-linear-out-slow-in;
|
||||
}
|
||||
|
||||
.wsk-animation--fast-out-linear-in {
|
||||
.mdl-animation--fast-out-linear-in {
|
||||
transition-timing-function: $animation-curve-fast-out-linear-in;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Animation WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function DemoAnimation(element) {
|
||||
|
||||
@ -14,11 +14,11 @@
|
||||
<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 wsk-shadow--z1"></div>
|
||||
<div class="demo-animation__movable demo-animation--position-1 mdl-shadow--z1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/animation/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="animation.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
|
||||
@ -18,7 +18,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
2. Add one or more MDL classes, separated by spaces, to the button using the `class` attribute.
|
||||
```html
|
||||
<button class="wsk-button wsk-js-button wsk-button--raised">Save</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
|
||||
```
|
||||
|
||||
The button component is ready for use.
|
||||
@ -26,17 +26,17 @@ The button component is ready for use.
|
||||
####Examples
|
||||
A button with the "raised" effect.
|
||||
```html
|
||||
<button class="wsk-button wsk-js-button wsk-button--raised">Save</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
|
||||
```
|
||||
|
||||
A button with the "fab" effect.
|
||||
```html
|
||||
<button class="wsk-button wsk-js-button wsk-button--fab">Help</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab">Help</button>
|
||||
```
|
||||
|
||||
A button with the "icon" and "colored" effects.
|
||||
```html
|
||||
<button class="wsk-button wsk-js-button wsk-button--icon wsk-button--colored">?</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">?</button>
|
||||
```
|
||||
|
||||
|
||||
@ -45,17 +45,17 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-button` | Defines button as an MDL component | Required |
|
||||
| `wsk-js-button` | Assigns basic MDL behavior to button | Required |
|
||||
| `mdl-button` | Defines button as an MDL component | Required |
|
||||
| `mdl-js-button` | Assigns basic MDL behavior to button | Required |
|
||||
| (none) | Applies *flat* display effect to button (default) | |
|
||||
| `wsk-button--raised` | Applies *raised* display effect | Mutually exclusive with *fab*, *mini-fab*, and *icon* |
|
||||
| `wsk-button--fab` | Applies *fab* (circular) display effect | Mutually exclusive with *raised*, *mini-fab*, and *icon* |
|
||||
| `wsk-button--mini-fab` | Applies *mini-fab* (small fab circular) display effect | Mutually exclusive with *raised*, *fab*, and *icon* |
|
||||
| `wsk-button--icon` | Applies *icon* (small plain circular) display effect | Mutually exclusive with *raised*, *fab*, and *mini-fab* |
|
||||
| `wsk-button--colored` | Applies *colored* display effect | Colors are defined in `material.min.css` |
|
||||
| `wsk-js-ripple-effect` | Applies *ripple* click effect | May be used in combination with any other classes |
|
||||
| `mdl-button--raised` | Applies *raised* display effect | Mutually exclusive with *fab*, *mini-fab*, and *icon* |
|
||||
| `mdl-button--fab` | Applies *fab* (circular) display effect | Mutually exclusive with *raised*, *mini-fab*, and *icon* |
|
||||
| `mdl-button--mini-fab` | Applies *mini-fab* (small fab circular) display effect | Mutually exclusive with *raised*, *fab*, and *icon* |
|
||||
| `mdl-button--icon` | Applies *icon* (small plain circular) display effect | Mutually exclusive with *raised*, *fab*, and *mini-fab* |
|
||||
| `mdl-button--colored` | Applies *colored* display effect | Colors are defined in `material.min.css` |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | May be used in combination with any other classes |
|
||||
|
||||
>**Note:** Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect" disabled>Raised Ripples Disabled</button>`
|
||||
>**Note:** Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
##More information
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../variables";
|
||||
|
||||
// The button component. Defaults to a flat button.
|
||||
.wsk-button {
|
||||
.mdl-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $button-border-radius;
|
||||
@ -49,7 +49,7 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.wsk-button--colored {
|
||||
&.mdl-button--colored {
|
||||
color: $button-primary-color-alt;
|
||||
|
||||
&:focus:not(:active) {
|
||||
@ -60,7 +60,7 @@
|
||||
|
||||
|
||||
// Raised buttons
|
||||
.wsk-button--raised {
|
||||
.mdl-button--raised {
|
||||
background: $button-primary-color;
|
||||
@include shadow-z1();
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
&.wsk-button--colored {
|
||||
&.mdl-button--colored {
|
||||
background: $button-primary-color-alt;
|
||||
color: $button-secondary-color-alt;
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
background-color: $button-active-color-alt;
|
||||
}
|
||||
|
||||
& .wsk-ripple {
|
||||
& .mdl-ripple {
|
||||
background: $button-ripple-color-alt;
|
||||
}
|
||||
}
|
||||
@ -105,7 +105,7 @@
|
||||
|
||||
|
||||
// FABs
|
||||
.wsk-button--fab {
|
||||
.mdl-button--fab {
|
||||
border-radius: 50%;
|
||||
font-size: $button-fab-font-size;
|
||||
height: $button-fab-size;
|
||||
@ -119,7 +119,7 @@
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
|
||||
& .wsk-icon {
|
||||
& .mdl-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -130,13 +130,13 @@
|
||||
width: $button-fab-font-size;
|
||||
}
|
||||
|
||||
&.wsk-button--mini-fab {
|
||||
&.mdl-button--mini-fab {
|
||||
height: $button-fab-size-mini;
|
||||
min-width: $button-fab-size-mini;
|
||||
width: $button-fab-size-mini;
|
||||
}
|
||||
|
||||
& .wsk-button__ripple-container {
|
||||
& .mdl-button__ripple-container {
|
||||
border-radius: 50%;
|
||||
// Fixes clipping bug in Safari.
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
@ -152,7 +152,7 @@
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
&.wsk-button--colored {
|
||||
&.mdl-button--colored {
|
||||
background: $button-fab-color-alt;
|
||||
color: $button-fab-text-color-alt;
|
||||
|
||||
@ -168,7 +168,7 @@
|
||||
background-color: $button-fab-active-color-alt;
|
||||
}
|
||||
|
||||
& .wsk-ripple {
|
||||
& .mdl-ripple {
|
||||
background: $button-fab-ripple-color-alt;
|
||||
}
|
||||
}
|
||||
@ -183,7 +183,7 @@
|
||||
|
||||
|
||||
// Icon buttons
|
||||
.wsk-button--icon {
|
||||
.mdl-button--icon {
|
||||
border-radius: 50%;
|
||||
font-size: $button-fab-font-size;
|
||||
height: $button-icon-size;
|
||||
@ -196,24 +196,24 @@
|
||||
color: inherit;
|
||||
line-height: normal;
|
||||
|
||||
& .wsk-icon {
|
||||
& .mdl-icon {
|
||||
position: absolute;
|
||||
top: ($button-icon-size - $button-fab-font-size) / 2;
|
||||
left: ($button-icon-size - $button-fab-font-size) / 2;
|
||||
}
|
||||
|
||||
&.wsk-button--mini-icon {
|
||||
&.mdl-button--mini-icon {
|
||||
height: $button-icon-size-mini;
|
||||
min-width: $button-icon-size-mini;
|
||||
width: $button-icon-size-mini;
|
||||
|
||||
& .wsk-icon {
|
||||
& .mdl-icon {
|
||||
top: ($button-icon-size-mini - $button-fab-font-size) / 2;
|
||||
left: ($button-icon-size-mini - $button-fab-font-size) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
& .wsk-button__ripple-container {
|
||||
& .mdl-button__ripple-container {
|
||||
border-radius: 50%;
|
||||
// Fixes clipping bug in Safari.
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
@ -222,7 +222,7 @@
|
||||
|
||||
|
||||
// Ripples
|
||||
.wsk-button__ripple-container {
|
||||
.mdl-button__ripple-container {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
@ -232,7 +232,7 @@
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.wsk-button[disabled] & .wsk-ripple {
|
||||
.mdl-button[disabled] & .mdl-ripple {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Button WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialButton(element) {
|
||||
@ -30,9 +30,9 @@ MaterialButton.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialButton.prototype.CssClasses_ = {
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'wsk-button__ripple-container',
|
||||
RIPPLE: 'wsk-ripple'
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'mdl-button__ripple-container',
|
||||
RIPPLE: 'mdl-ripple'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -96,5 +96,5 @@ MaterialButton.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialButton,
|
||||
classAsString: 'MaterialButton',
|
||||
cssClass: 'wsk-js-button'
|
||||
cssClass: 'mdl-js-button'
|
||||
});
|
||||
|
||||
@ -15,43 +15,43 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<div class="demo-button">Flat: <button class="wsk-button wsk-js-button">Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="wsk-button wsk-js-button wsk-button--raised">Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="wsk-button wsk-js-button wsk-button--fab"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="demo-button">Icon: <button class="wsk-button wsk-js-button wsk-button--icon"><span class="wsk-icon wsk-icon--create"/></button></div>
|
||||
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button">Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised">Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab"><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon"><span class="mdl-icon mdl-icon--create"/></button></div>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<div class="demo-button">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect">Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect">Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="demo-button">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--create"/></button></div>
|
||||
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"><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"><span class="mdl-icon mdl-icon--create"/></button></div>
|
||||
|
||||
<h2>.wsk-button--colored</h2>
|
||||
<h2>.mdl-button--colored</h2>
|
||||
|
||||
<div class="demo-button">Flat: <button class="wsk-button wsk-js-button wsk-button--colored">Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored">Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-button--colored">Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<div class="demo-button">Flat: <button class="wsk-button wsk-js-button wsk-button--colored wsk-js-ripple-effect">Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored wsk-js-ripple-effect">Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Flat</button></div>
|
||||
<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>.wsk-button--mini-fab</h2>
|
||||
<h2>.mdl-button--mini-fab</h2>
|
||||
|
||||
<div class="demo-button"><button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<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>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div class="demo-button">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect" disabled>Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect" disabled>Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect" disabled><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="demo-button">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect" disabled><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect" disabled>Flat</button></div>
|
||||
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised</button></div>
|
||||
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" disabled><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" disabled><span class="mdl-icon mdl-icon--add"/></button></div>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="button.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
|
||||
@ -36,34 +36,34 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
3. Add one or more MDL classes, separated by spaces, to the "outer" div and the "inner" divs (depending on their intended use) using the `class` attribute.
|
||||
```html
|
||||
<div class="wsk-card">
|
||||
<div class="wsk-card--heading">
|
||||
<div class="mdl-card">
|
||||
<div class="mdl-card--heading">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-card--img-container">
|
||||
<div class="mdl-card--img-container">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-card--lower">
|
||||
<div class="mdl-card--lower">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-card--bottom">
|
||||
<div class="mdl-card--bottom">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
4. Add content to each "inner" div, again depending on its intended use, using standard HTML elements and, optionally, additional MDL classes.
|
||||
```html
|
||||
<div class="wsk-card">
|
||||
<div class="wsk-card--heading">
|
||||
<h2 class="wsk-card--heading-text">Heading Text Goes Here</h2>
|
||||
<div class="mdl-card">
|
||||
<div class="mdl-card--heading">
|
||||
<h2 class="mdl-card--heading-text">Heading Text Goes Here</h2>
|
||||
</div>
|
||||
<div class="wsk-card--img-container">
|
||||
<div class="mdl-card--img-container">
|
||||
<img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
|
||||
</div>
|
||||
<div class="wsk-card--lower">
|
||||
<div class="mdl-card--lower">
|
||||
This text might describe the photo and provide further information, such as where and when it was taken.
|
||||
</div>
|
||||
<div class="wsk-card--bottom">
|
||||
<div class="mdl-card--bottom">
|
||||
<a href="(URL or function)">Related Action</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -76,16 +76,16 @@ The card component is ready for use.
|
||||
A card (no shadow) with a heading, image, text, and action.
|
||||
|
||||
```html
|
||||
<div class="wsk-card">
|
||||
<div class="wsk-card--heading">
|
||||
<h2 class="wsk-card--heading-text">Auckland Sky Tower<br/>Auckland, New Zealand</h2>
|
||||
<div class="mdl-card">
|
||||
<div class="mdl-card--heading">
|
||||
<h2 class="mdl-card--heading-text">Auckland Sky Tower<br/>Auckland, New Zealand</h2>
|
||||
</div>
|
||||
<div class="wsk-card--img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
|
||||
<div class="mdl-card--img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
|
||||
</div>
|
||||
<div class="wsk-card--lower">
|
||||
<div class="mdl-card--lower">
|
||||
The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.
|
||||
</div>
|
||||
<div class="wsk-card--bottom">
|
||||
<div class="mdl-card--bottom">
|
||||
<a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29">Wikipedia entry</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -94,13 +94,13 @@ A card (no shadow) with a heading, image, text, and action.
|
||||
Card (level-3 shadow) with an image, caption, and text:
|
||||
|
||||
```html
|
||||
<div class="wsk-card wsk-shadow--z3">
|
||||
<div class="wsk-card--img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
|
||||
<div class="mdl-card mdl-shadow--z3">
|
||||
<div class="mdl-card--img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
|
||||
</div>
|
||||
<div class="wsk-card--caption">
|
||||
<div class="mdl-card--caption">
|
||||
Auckland Sky Tower, taken March 24th, 2014
|
||||
</div>
|
||||
<div class="wsk-card--lower">
|
||||
<div class="mdl-card--lower">
|
||||
The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.
|
||||
</div>
|
||||
</div>
|
||||
@ -111,14 +111,14 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-card` | Defines div element as an MDL card container | Required on "outer" div |
|
||||
| `wsk-shadow--z1 through wsk-shadow--z5` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
|
||||
| `wsk-card--heading` | Defines div as a card heading container(1) | Required on "inner" heading div |
|
||||
| `wsk-card--heading-text` | Assigns appropriate text characteristics to card heading | Required on head tag (H1 - H6) inside heading div |
|
||||
| `wsk-card--img-container` | Defines div as a card image container | Required on "inner" image div |
|
||||
| `wsk-card--lower` | Defines div as a card body text container(1) and assigns appropriate text characteristics to body text | Required on "inner" body text div; text goes directly inside the div with no intervening containers |
|
||||
| `wsk-card--caption` | Defines div as a card caption container and assigns appropriate text characteristics to caption text | Required on "inner" caption div; text goes directly inside the div with no intervening containers |
|
||||
| `wsk-card--bottom` | Defines div as a card bottom text container(1) (typically an action bar) and assigns appropriate text characteristics to bottom text | Required on "inner" bottom div; content goes directly inside the div with no intervening containers |
|
||||
| `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-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 |
|
||||
| `mdl-card--lower` | Defines div as a card body text container(1) and assigns appropriate text characteristics to body text | Required on "inner" body text div; text goes directly inside the div with no intervening containers |
|
||||
| `mdl-card--caption` | Defines div as a card caption container and assigns appropriate text characteristics to caption text | Required on "inner" caption div; text goes directly inside the div with no intervening containers |
|
||||
| `mdl-card--bottom` | Defines div as a card bottom text container(1) (typically an action bar) and assigns appropriate text characteristics to bottom text | Required on "inner" bottom div; content goes directly inside the div with no intervening containers |
|
||||
|
||||
(1) Although some class names imply positioning, they really just semantically define the styling of the content. The actual positions of the "inner" divs within the card are determined by order of appearance (i.e., top-down). You may use them in any order, so long as they maintain their relationships as siblings and as direct children of the "outer" container div.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-card {
|
||||
.mdl-card {
|
||||
font-size: $card-font-size;
|
||||
height : $card-height;
|
||||
overflow : hidden;
|
||||
@ -11,7 +11,7 @@
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.wsk-card--img-container {
|
||||
.mdl-card--img-container {
|
||||
background-color : $image-placeholder-color;
|
||||
@if str_length($background-image-url) > 0 {
|
||||
background-image : url($background-image-url);
|
||||
@ -24,7 +24,7 @@
|
||||
height : $cover-image-height;
|
||||
}
|
||||
|
||||
.wsk-card--heading {
|
||||
.mdl-card--heading {
|
||||
align-items : center;
|
||||
background : $heading-back-bgcolor none repeat scroll 0 0 / auto padding-box border-box;
|
||||
border : $heading-back-border;
|
||||
@ -43,7 +43,7 @@
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.wsk-card--heading-text {
|
||||
.mdl-card--heading-text {
|
||||
align-self : center;
|
||||
// TODO: Does this need to be anything other than none?
|
||||
border : 0 none rgb(255, 255, 255);
|
||||
@ -63,7 +63,7 @@
|
||||
width : 90%;
|
||||
}
|
||||
|
||||
.wsk-card--caption {
|
||||
.mdl-card--caption {
|
||||
background : $caption-bgcolor none repeat scroll 0 0 / auto padding-box border-box;
|
||||
// TODO: Does this need to be anything other than none?
|
||||
border : 0 none rgb(255, 255, 255);
|
||||
@ -80,7 +80,7 @@
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.wsk-card--lower {
|
||||
.mdl-card--lower {
|
||||
// TODO: Does this need to be anything other than none?
|
||||
border : 0 none rgb(68, 68, 68);
|
||||
color : $lower-text-color;
|
||||
@ -97,14 +97,14 @@
|
||||
width : 90%;
|
||||
}
|
||||
|
||||
.wsk-card--bottom {
|
||||
.mdl-card--bottom {
|
||||
font-size : $card-bottom-font-size;
|
||||
height : $card-bottom-height;
|
||||
line-height: normal;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.wsk-card--bottom a {
|
||||
.mdl-card--bottom a {
|
||||
// TODO: Does this need to be anything other than none?
|
||||
border-bottom : 0 none rgb(48, 63, 159);
|
||||
// TODO: Does this need to be anything other than none?
|
||||
|
||||
@ -11,51 +11,51 @@
|
||||
</head>
|
||||
<body class="demo-page demo-page--card">
|
||||
<div class="demo-preview-block">
|
||||
<div class="wsk-card wsk-shadow--z1">
|
||||
<div class="wsk-card--img-container">
|
||||
<div class="mdl-card mdl-shadow--z1">
|
||||
<div class="mdl-card--img-container">
|
||||
</div>
|
||||
<div class="wsk-card--heading">
|
||||
<h2 class="wsk-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
<div class="mdl-card--heading">
|
||||
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
</div>
|
||||
<div class="wsk-card--caption">
|
||||
<div class="mdl-card--caption">
|
||||
March 24th, 2014
|
||||
</div>
|
||||
<div class="wsk-card--lower">
|
||||
<div class="mdl-card--lower">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
|
||||
</div>
|
||||
<div class="wsk-card--bottom">
|
||||
<div class="mdl-card--bottom">
|
||||
<a href="#">Some Action</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-card wsk-shadow--z2 demo-card--wide">
|
||||
<div class="wsk-card--img-container">
|
||||
<div class="mdl-card mdl-shadow--z2 demo-card--wide">
|
||||
<div class="mdl-card--img-container">
|
||||
</div>
|
||||
<div class="wsk-card--heading">
|
||||
<h2 class="wsk-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
<div class="mdl-card--heading">
|
||||
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
</div>
|
||||
<div class="wsk-card--caption">
|
||||
<div class="mdl-card--caption">
|
||||
March 24th, 2014
|
||||
</div>
|
||||
<div class="wsk-card--lower">
|
||||
<div class="mdl-card--lower">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
|
||||
</div>
|
||||
<div class="wsk-card--bottom">
|
||||
<div class="mdl-card--bottom">
|
||||
<a href="#">Some Action</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-card wsk-shadow--z3">
|
||||
<div class="wsk-card--img-container">
|
||||
<div class="mdl-card mdl-shadow--z3">
|
||||
<div class="mdl-card--img-container">
|
||||
</div>
|
||||
<div class="wsk-card--heading">
|
||||
<h2 class="wsk-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
<div class="mdl-card--heading">
|
||||
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
|
||||
</div>
|
||||
<div class="wsk-card--caption">
|
||||
<div class="mdl-card--caption">
|
||||
March 24th, 2014
|
||||
</div>
|
||||
<div class="wsk-card--lower">
|
||||
<div class="mdl-card--lower">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
|
||||
</div>
|
||||
<div class="wsk-card--bottom">
|
||||
<div class="mdl-card--bottom">
|
||||
<a href="#">Some Action</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../material-design-lite";
|
||||
|
||||
.demo-page--card .wsk-card {
|
||||
.demo-page--card .mdl-card {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -33,9 +33,9 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the `class` attribute.
|
||||
```html
|
||||
<label for="chkbox1" class="wsk-checkbox wsk-js-checkbox">
|
||||
<input type="checkbox" id="chkbox1" class="wsk-checkbox__input" />
|
||||
<span class="wsk-checkbox__label">Enable AutoSave</span>
|
||||
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox">
|
||||
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
|
||||
<span class="mdl-checkbox__label">Enable AutoSave</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
@ -46,9 +46,9 @@ The checkbox component is ready for use.
|
||||
A checkbox with a ripple click effect.
|
||||
|
||||
```html
|
||||
<label for="chkbox1" class="wsk-checkbox wsk-js-checkbox wsk-js-ripple-effect">
|
||||
<input type="checkbox" id="chkbox1" class="wsk-checkbox__input" />
|
||||
<span class="wsk-checkbox__label">Enable AutoSave</span>
|
||||
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
|
||||
<span class="mdl-checkbox__label">Enable AutoSave</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
@ -57,13 +57,13 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-checkbox` | Defines label as an MDL component | Required on label element|
|
||||
| `wsk-js-checkbox` | Assigns basic MDL behavior to label | Required on label element |
|
||||
| `wsk-checkbox__input` | Applies basic MDL behavior to checkbox | Required on input element (checkbox) |
|
||||
| `wsk-checkbox__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `wsk-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (checkbox) |
|
||||
| `mdl-checkbox` | Defines label as an MDL component | Required on label element|
|
||||
| `mdl-js-checkbox` | Assigns basic MDL behavior to label | Required on label element |
|
||||
| `mdl-checkbox__input` | Applies basic MDL behavior to checkbox | Required on input element (checkbox) |
|
||||
| `mdl-checkbox__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (checkbox) |
|
||||
|
||||
>**Note:** Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="checkbox-5" class="wsk-checkbox__input" disabled />`
|
||||
>**Note:** Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled />`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
##More information
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-checkbox {
|
||||
.mdl-checkbox {
|
||||
position: relative;
|
||||
|
||||
z-index: 1;
|
||||
@ -20,10 +20,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-checkbox__input {
|
||||
.mdl-checkbox__input {
|
||||
line-height: $checkbox-label-height;
|
||||
|
||||
.wsk-checkbox.is-upgraded & {
|
||||
.mdl-checkbox.is-upgraded & {
|
||||
// Hide input element, while still making it respond to focus.
|
||||
position: absolute;
|
||||
width: 0;
|
||||
@ -39,7 +39,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-checkbox__box-outline {
|
||||
.mdl-checkbox__box-outline {
|
||||
position: absolute;
|
||||
top: $checkbox-top-offset;
|
||||
left: 0;
|
||||
@ -59,17 +59,17 @@
|
||||
|
||||
z-index: 2;
|
||||
|
||||
.wsk-checkbox.is-checked & {
|
||||
.mdl-checkbox.is-checked & {
|
||||
border: 2px solid $checkbox-color;
|
||||
}
|
||||
|
||||
.wsk-checkbox.is-disabled & {
|
||||
.mdl-checkbox.is-disabled & {
|
||||
border: 2px solid $checkbox-disabled-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-checkbox__focus-helper {
|
||||
.mdl-checkbox__focus-helper {
|
||||
position: absolute;
|
||||
top: $checkbox-top-offset;
|
||||
left: 0;
|
||||
@ -83,18 +83,18 @@
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.wsk-checkbox.is-focused & {
|
||||
.mdl-checkbox.is-focused & {
|
||||
box-shadow: 0 0 0px ($checkbox-button-size / 2) rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wsk-checkbox.is-focused.is-checked & {
|
||||
.mdl-checkbox.is-focused.is-checked & {
|
||||
box-shadow: 0 0 0px ($checkbox-button-size / 2) $checkbox-focus-color;
|
||||
background-color: $checkbox-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-checkbox__tick-outline {
|
||||
.mdl-checkbox__tick-outline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -106,29 +106,29 @@
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background;
|
||||
|
||||
.wsk-checkbox.is-checked & {
|
||||
.mdl-checkbox.is-checked & {
|
||||
background: $checkbox-color url("../images/tick.svg");
|
||||
}
|
||||
|
||||
.wsk-checkbox.is-checked.is-disabled & {
|
||||
.mdl-checkbox.is-checked.is-disabled & {
|
||||
background: $checkbox-disabled-color url("../images/tick.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-checkbox__label {
|
||||
.mdl-checkbox__label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: $checkbox-label-height;
|
||||
margin: 0;
|
||||
|
||||
.wsk-checkbox.is-disabled & {
|
||||
.mdl-checkbox.is-disabled & {
|
||||
color: $checkbox-disabled-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-checkbox__ripple-container {
|
||||
.mdl-checkbox__ripple-container {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -(($checkbox-ripple-size - $checkbox-label-height) / 2);
|
||||
@ -144,15 +144,15 @@
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
|
||||
& .wsk-ripple {
|
||||
& .mdl-ripple {
|
||||
background: $checkbox-color;
|
||||
}
|
||||
|
||||
.wsk-checkbox.is-disabled & {
|
||||
.mdl-checkbox.is-disabled & {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.wsk-checkbox.is-disabled & .wsk-ripple {
|
||||
.mdl-checkbox.is-disabled & .mdl-ripple {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Checkbox WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialCheckbox(element) {
|
||||
@ -30,15 +30,15 @@ MaterialCheckbox.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialCheckbox.prototype.CssClasses_ = {
|
||||
INPUT: 'wsk-checkbox__input',
|
||||
BOX_OUTLINE: 'wsk-checkbox__box-outline',
|
||||
FOCUS_HELPER: 'wsk-checkbox__focus-helper',
|
||||
TICK_OUTLINE: 'wsk-checkbox__tick-outline',
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'wsk-checkbox__ripple-container',
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
INPUT: 'mdl-checkbox__input',
|
||||
BOX_OUTLINE: 'mdl-checkbox__box-outline',
|
||||
FOCUS_HELPER: 'mdl-checkbox__focus-helper',
|
||||
TICK_OUTLINE: 'mdl-checkbox__tick-outline',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked',
|
||||
@ -226,5 +226,5 @@ MaterialCheckbox.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialCheckbox,
|
||||
classAsString: 'MaterialCheckbox',
|
||||
cssClass: 'wsk-js-checkbox'
|
||||
cssClass: 'mdl-js-checkbox'
|
||||
});
|
||||
|
||||
@ -15,29 +15,29 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<label class="wsk-checkbox wsk-js-checkbox wsk-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="wsk-checkbox__input" />
|
||||
<span class="wsk-checkbox__label">Check me out</span>
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" />
|
||||
<span class="mdl-checkbox__label">Check me out</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-checkbox wsk-js-checkbox wsk-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="wsk-checkbox__input" />
|
||||
<span class="wsk-checkbox__label">I'm just a Material girl in a Material world</span>
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
|
||||
<span class="mdl-checkbox__label">I'm just a Material girl in a Material world</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-checkbox wsk-js-checkbox wsk-js-ripple-effect" for="checkbox-4">
|
||||
<input type="checkbox" id="checkbox-4" class="wsk-checkbox__input" />
|
||||
<span class="wsk-checkbox__label">Try using checkboxes</span>
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
|
||||
<input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" />
|
||||
<span class="mdl-checkbox__label">Try using checkboxes</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-checkbox wsk-js-checkbox wsk-js-ripple-effect" for="checkbox-5">
|
||||
<input type="checkbox" id="checkbox-5" class="wsk-checkbox__input" disabled />
|
||||
<span class="wsk-checkbox__label">But not this one</span>
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-5">
|
||||
<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled />
|
||||
<span class="mdl-checkbox__label">But not this one</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/checkbox/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="checkbox.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
|
||||
@ -34,17 +34,17 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
3. Add one or more MDL classes, separated by spaces, to the "outer" and "inner" divs using the `class` attribute.
|
||||
```html
|
||||
<div class="wsk-column-layout">
|
||||
<div class="wsk-column-layout__child">Apples</div>
|
||||
<div class="wsk-column-layout__child">Bananas</div>
|
||||
<div class="wsk-column-layout__child">Cherries</div>
|
||||
<div class="wsk-column-layout__child">Dill seeds</div>
|
||||
<div class="wsk-column-layout__child">Eggplant</div>
|
||||
<div class="wsk-column-layout__child">Figs</div>
|
||||
<div class="wsk-column-layout__child">Ginger root</div>
|
||||
<div class="wsk-column-layout__child">Horseradish</div>
|
||||
<div class="wsk-column-layout__child">Iceberg lettuce</div>
|
||||
<div class="wsk-column-layout__child">etc.</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -55,33 +55,33 @@ The column-layout component is ready for use.
|
||||
A list of NATO phonetic alphabet words in a column-layout div.
|
||||
|
||||
```html
|
||||
<div class="wsk-column-layout">
|
||||
<div class="wsk-column-layout__child">Alpha</div>
|
||||
<div class="wsk-column-layout__child">Bravo</div>
|
||||
<div class="wsk-column-layout__child">Charlie</div>
|
||||
<div class="wsk-column-layout__child">Delta</div>
|
||||
<div class="wsk-column-layout__child">Echo</div>
|
||||
<div class="wsk-column-layout__child">Foxtrot</div>
|
||||
<div class="wsk-column-layout__child">Golf</div>
|
||||
<div class="wsk-column-layout__child">Hotel</div>
|
||||
<div class="wsk-column-layout__child">India</div>
|
||||
<div class="wsk-column-layout__child">Juliet</div>
|
||||
<div class="wsk-column-layout__child">Kilo</div>
|
||||
<div class="wsk-column-layout__child">Lima</div>
|
||||
<div class="wsk-column-layout__child">Mike</div>
|
||||
<div class="wsk-column-layout__child">November</div>
|
||||
<div class="wsk-column-layout__child">Oscar</div>
|
||||
<div class="wsk-column-layout__child">Papa</div>
|
||||
<div class="wsk-column-layout__child">Quebec</div>
|
||||
<div class="wsk-column-layout__child">Romeo</div>
|
||||
<div class="wsk-column-layout__child">Sierra</div>
|
||||
<div class="wsk-column-layout__child">Tango</div>
|
||||
<div class="wsk-column-layout__child">Uniform</div>
|
||||
<div class="wsk-column-layout__child">Victor</div>
|
||||
<div class="wsk-column-layout__child">Whiskey</div>
|
||||
<div class="wsk-column-layout__child">X-ray</div>
|
||||
<div class="wsk-column-layout__child">Yankee</div>
|
||||
<div class="wsk-column-layout__child">Zulu</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -90,8 +90,8 @@ The MDL CSS classes apply various predefined visual enhancements and behavioral
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-column-layout` | Defines a container as an MDL column-layout component | Required on "outer" div element|
|
||||
| `wsk-column-layout__child` | Defines a container as a column-layout item | Required on "inner" div elements|
|
||||
| `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).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-column-layout {
|
||||
.mdl-column-layout {
|
||||
// Web layout.
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -57,7 +57,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-column-layout__child {
|
||||
.mdl-column-layout__child {
|
||||
@include columns-child-element();
|
||||
}
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
// last line to align correctly, while keeping the flexbox centered on its
|
||||
// container.
|
||||
// TODO(sgomes): Explore a different way of doing this.
|
||||
.wsk-column-layout__wrap-hack {
|
||||
.mdl-column-layout__wrap-hack {
|
||||
@include columns-child-element();
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Column Layout WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialColumnLayout(element) {
|
||||
@ -37,7 +37,7 @@ MaterialColumnLayout.prototype.CssClasses_ = {
|
||||
|
||||
// TODO: Upgrade classnames in HTML / CSS / JS to use material prefix to
|
||||
// reduce conflict and convert to camelCase for consistency.
|
||||
INVISIBLE_WRAPPING_ELEMENT: 'wsk-column-layout__wrap-hack'
|
||||
INVISIBLE_WRAPPING_ELEMENT: 'mdl-column-layout__wrap-hack'
|
||||
};
|
||||
|
||||
|
||||
@ -64,5 +64,5 @@ MaterialColumnLayout.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialColumnLayout,
|
||||
classAsString: 'MaterialColumnLayout',
|
||||
cssClass: 'wsk-column-layout'
|
||||
cssClass: 'mdl-column-layout'
|
||||
});
|
||||
|
||||
@ -12,15 +12,15 @@
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body class="demo-page demo-page--column-layout">
|
||||
<div class="wsk-column-layout">
|
||||
<div class="wsk-column-layout__child">Each child</div>
|
||||
<div class="wsk-column-layout__child">gets to be</div>
|
||||
<div class="wsk-column-layout__child">an independent entity</div>
|
||||
<div class="wsk-column-layout__child">to be placed in columns,</div>
|
||||
<div class="wsk-column-layout__child">automatically.</div>
|
||||
<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="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="column-layout.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
@import "../material-design-lite";
|
||||
|
||||
.demo-page--column-layout .wsk-column-layout {
|
||||
.demo-page--column-layout .mdl-column-layout {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.demo-page--column-layout .wsk-column-layout__child {
|
||||
.demo-page--column-layout .mdl-column-layout__child {
|
||||
min-height: 300px;
|
||||
background-color: rgb(200,230,201);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.demo-page--column-layout .wsk-column-layout__child:nth-of-type(3n+1) {
|
||||
.demo-page--column-layout .mdl-column-layout__child:nth-of-type(3n+1) {
|
||||
background-color: rgb(255,205,210);
|
||||
}
|
||||
|
||||
.demo-page--column-layout .wsk-column-layout__child:nth-of-type(3n+2) {
|
||||
.demo-page--column-layout .mdl-column-layout__child:nth-of-type(3n+2) {
|
||||
background-color: rgb(187,222,251);
|
||||
}
|
||||
|
||||
@ -28,22 +28,22 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
...
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
2a. Inside the top section div, code two sibling "inner" divs for the *left* and *right* content sections.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
@ -51,45 +51,45 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
...
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
2b. Add the appropriate MDL classes to the two "inner" left and right divs using the `class` attribute.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<div class="wsk-mega-footer--left-section">
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--right-section">
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
...
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
3a. Inside the middle section div, code one or more sibling "inner" divs for the *drop-down* content sections. That is, for two drop-down sections, you would code two divs.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<div class="wsk-mega-footer--left-section">
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--right-section">
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
@ -97,55 +97,55 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
...
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
3b. Add the appropriate MDL classes to the two "inner" drop-down divs using the `class` attribute.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<div class="wsk-mega-footer--left-section">
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--right-section">
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
...
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
4a. Inside the bottom section div, code an "inner" div for the section heading and a sibling unordered list for the bottom section links.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<div class="wsk-mega-footer--left-section">
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--right-section">
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
@ -157,27 +157,27 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
4b. Add the appropriate MDL classes to the "inner" div heading and list using the `class` attribute.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<div class="wsk-mega-footer--left-section">
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--right-section">
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="wsk-logo">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<div class="mdl-logo">
|
||||
</div>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
@ -185,43 +185,43 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
5. Add content to the top (left and right), middle (drop-downs), and bottom (text and links) sections of the footer; include any appropriate MDL classes using the `class` attribute.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<div class="wsk-mega-footer--left-section">
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--right-section">
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
<a href="">Link 1</a>
|
||||
<a href="">Link 2</a>
|
||||
<a href="">Link 3</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<h1 class="wsk-mega-footer--heading">Drop-down 1 Heading</h1>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<h1 class="mdl-mega-footer--heading">Drop-down 1 Heading</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="">Link A</a></li>
|
||||
<li><a href="">Link B</a></li>
|
||||
<li><a href="">Link C</a></li>
|
||||
<li><a href="">Link D</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<h1 class="wsk-mega-footer--heading">Drop-down 2 Heading</h1>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<h1 class="mdl-mega-footer--heading">Drop-down 2 Heading</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="">Link A</a></li>
|
||||
<li><a href="">Link B</a></li>
|
||||
<li><a href="">Link C</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="wsk-logo">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<div class="mdl-logo">
|
||||
Mega-Footer Bottom Section Heading
|
||||
</div>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="">Link A</a></li>
|
||||
<li><a href="">Link B</a></li>
|
||||
</ul>
|
||||
@ -235,23 +235,23 @@ The mega-footer component is ready for use.
|
||||
|
||||
A mega-footer component with three sections and two drop-down sections in the middle section.
|
||||
```html
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<div class="wsk-mega-footer--left-section">
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--right-section">
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
<a href="#">Introduction</a>
|
||||
<a href="#">App Status Dashboard</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<h1 class="wsk-mega-footer--heading">Learning and Support</h1>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<h1 class="mdl-mega-footer--heading">Learning and Support</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Resource Center</a></li>
|
||||
<li><a href="#">Help Center</a></li>
|
||||
<li><a href="#">Community</a></li>
|
||||
@ -260,9 +260,9 @@ A mega-footer component with three sections and two drop-down sections in the mi
|
||||
<li><a href="#">Think Insights</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<h1 class="wsk-mega-footer--heading">Just for Developers</h1>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<h1 class="mdl-mega-footer--heading">Just for Developers</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Google Developers</a></li>
|
||||
<li><a href="#">AdWords API</a></li>
|
||||
<li><a href="#">AdWords Scipts</a></li>
|
||||
@ -270,11 +270,11 @@ A mega-footer component with three sections and two drop-down sections in the mi
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="wsk-logo">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<div class="mdl-logo">
|
||||
More Information
|
||||
</div>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy and Terms</a></li>
|
||||
</ul>
|
||||
@ -297,19 +297,19 @@ A mega-footer component with three sections and two drop-down sections in the mi
|
||||
```
|
||||
1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
|
||||
```html
|
||||
<footer class="wsk-mini-footer">
|
||||
<div class="wsk-mini-footer--left-section">
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
...
|
||||
</div>
|
||||
<div class="wsk-mini-footer--right-section">
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
...
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
2a. Inside the left section div, code an "inner" div for the section heading and a sibling unordered list for the left section links.
|
||||
```html
|
||||
<footer class="wsk-mini-footer">
|
||||
<div class="wsk-mini-footer--left-section">
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
@ -317,44 +317,44 @@ A mega-footer component with three sections and two drop-down sections in the mi
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-mini-footer--right-section">
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
...
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
2b. Add the appropriate MDL classes to the "inner" div and list using the `class` attribute.
|
||||
```html
|
||||
<footer class="wsk-mini-footer">
|
||||
<div class="wsk-mini-footer--left-section">
|
||||
<div class="wsk-logo">
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div class="mdl-logo">
|
||||
...
|
||||
</div>
|
||||
<ul class="wsk-mini-footer--link-list">
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-mini-footer--right-section">
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
...
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
3. Add content to the left (text and links) and right (text or decoration) sections of the footer; include any appropriate MDL classes using the `class` attribute.
|
||||
```html
|
||||
<footer class="wsk-mini-footer">
|
||||
<div class="wsk-mini-footer--left-section">
|
||||
<div class="wsk-logo">
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div class="mdl-logo">
|
||||
Mini-footer Heading
|
||||
</div>
|
||||
<ul class="wsk-mini-footer--link-list">
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
<li><a href="">Link 1</a></li>
|
||||
<li><a href="">Link 2</a></li>
|
||||
<li><a href="">Link 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-mini-footer--right-section">
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
@ -366,21 +366,21 @@ The mini-footer component is ready for use.
|
||||
A mini-footer with left and right sections.
|
||||
|
||||
```html
|
||||
<footer class="wsk-mini-footer">
|
||||
<div class="wsk-mini-footer--left-section">
|
||||
<div class="wsk-logo">
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div class="mdl-logo">
|
||||
More Information
|
||||
</div>
|
||||
<ul class="wsk-mini-footer--link-list">
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy and Terms</a></li>
|
||||
<li><a href="#">User Agreement</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-mini-footer--right-section">
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
@ -390,22 +390,22 @@ The MDL CSS classes apply various predefined visual enhancements to the footer.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-mega-footer` | Defines container as an MDL mega-footer component | Required on footer element |
|
||||
| `wsk-mega-footer--top-section` | Defines container as a footer top section | Required on top section "outer" div element |
|
||||
| `wsk-mega-footer--left-section` | Defines container as a left section | Required on left section "inner" div element |
|
||||
| `wsk-mega-footer--social-btn` | Defines a decorative square within mega-footer | Required on button element (if used) |
|
||||
| `wsk-mega-footer--right-section` | Defines container as a right section | Required on right section "inner" div element |
|
||||
| `wsk-mega-footer--middle-section` | Defines container as a footer middle section | Required on middle section "outer" div element |
|
||||
| `wsk-mega-footer--drop-down-section` | Defines container as a drop-down (vertical) content area | Required on drop-down "inner" div elements |
|
||||
| `wsk-mega-footer--heading` | Defines a heading as a mega-footer heading | Required on h1 element inside drop-down section |
|
||||
| `wsk-mega-footer--link-list` | Defines an unordered list as a drop-down (vertical) list | Required on ul element inside drop-down section |
|
||||
| `wsk-mega-footer--bottom-section` | Defines container as a footer bottom section | Required on bottom section "outer" div element |
|
||||
| `wsk-logo` | Defines a container as a styled section heading | Required on "inner" div element in mega-footer bottom-section or mini-footer left-section |
|
||||
| `wsk-mini-footer` | Defines container as an MDL mini-footer component | Required on footer element |
|
||||
| `wsk-mini-footer--left-section` | Defines container as a left section | Required on left section "inner" div element |
|
||||
| `wsk-mini-footer--link-list` | Defines an unordered list as an inline (horizontal) list | Required on ul element sibling to "wsk-logo" div element |
|
||||
| `wsk-mini-footer--right-section` | Defines container as a right section | Required on right section "inner" div element |
|
||||
| `wsk-mini-footer--social-btn` | Defines a decorative square within mini-footer | Required on button element (if used) |
|
||||
| `mdl-mega-footer` | Defines container as an MDL mega-footer component | Required on footer element |
|
||||
| `mdl-mega-footer--top-section` | Defines container as a footer top section | Required on top section "outer" div element |
|
||||
| `mdl-mega-footer--left-section` | Defines container as a left section | Required on left section "inner" div element |
|
||||
| `mdl-mega-footer--social-btn` | Defines a decorative square within mega-footer | Required on button element (if used) |
|
||||
| `mdl-mega-footer--right-section` | Defines container as a right section | Required on right section "inner" div element |
|
||||
| `mdl-mega-footer--middle-section` | Defines container as a footer middle section | Required on middle section "outer" div element |
|
||||
| `mdl-mega-footer--drop-down-section` | Defines container as a drop-down (vertical) content area | Required on drop-down "inner" div elements |
|
||||
| `mdl-mega-footer--heading` | Defines a heading as a mega-footer heading | Required on h1 element inside drop-down section |
|
||||
| `mdl-mega-footer--link-list` | Defines an unordered list as a drop-down (vertical) list | Required on ul element inside drop-down section |
|
||||
| `mdl-mega-footer--bottom-section` | Defines container as a footer bottom section | Required on bottom section "outer" div element |
|
||||
| `mdl-logo` | Defines a container as a styled section heading | Required on "inner" div element in mega-footer bottom-section or mini-footer left-section |
|
||||
| `mdl-mini-footer` | Defines container as an MDL mini-footer component | Required on footer element |
|
||||
| `mdl-mini-footer--left-section` | Defines container as a left section | Required on left section "inner" div element |
|
||||
| `mdl-mini-footer--link-list` | Defines an unordered list as an inline (horizontal) list | Required on ul element sibling to "mdl-logo" div element |
|
||||
| `mdl-mini-footer--right-section` | Defines container as a right section | Required on right section "inner" div element |
|
||||
| `mdl-mini-footer--social-btn` | Defines a decorative square within mini-footer | Required on button element (if used) |
|
||||
|
||||
##More information
|
||||
For working examples of the **footer** component, see the MDL [footer demo page](www.github.com/google/material-design-lite/src/lists/footer.html).
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-mega-footer {
|
||||
.mdl-mega-footer {
|
||||
padding: ($padding * 2) $padding;
|
||||
|
||||
color: $footer-color;
|
||||
background-color: $footer-bg-color;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--top-section:after, .wsk-mega-footer--middle-section:after {
|
||||
.mdl-mega-footer--top-section:after, .mdl-mega-footer--middle-section:after {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
@ -23,15 +23,15 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--left-section {
|
||||
.mdl-mega-footer--left-section {
|
||||
margin-bottom: $padding;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--right-section {
|
||||
.mdl-mega-footer--right-section {
|
||||
margin-bottom: $padding;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--right-section a {
|
||||
.mdl-mega-footer--right-section a {
|
||||
display: block;
|
||||
|
||||
margin-bottom: $padding;
|
||||
@ -41,15 +41,15 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
.wsk-mega-footer--left-section {
|
||||
.mdl-mega-footer--left-section {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--right-section {
|
||||
.mdl-mega-footer--right-section {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--right-section a {
|
||||
.mdl-mega-footer--right-section a {
|
||||
display: inline-block;
|
||||
|
||||
margin-left: $padding;
|
||||
@ -59,7 +59,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-mega-footer--social-btn {
|
||||
.mdl-mega-footer--social-btn {
|
||||
width: $footer-btn-size;
|
||||
height: $footer-btn-size;
|
||||
|
||||
@ -71,23 +71,23 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--drop-down-section {
|
||||
.mdl-mega-footer--drop-down-section {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
.wsk-mega-footer--drop-down-section {
|
||||
.mdl-mega-footer--drop-down-section {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--drop-down-section:nth-child(1),
|
||||
.wsk-mega-footer--drop-down-section:nth-child(2) {
|
||||
.mdl-mega-footer--drop-down-section:nth-child(1),
|
||||
.mdl-mega-footer--drop-down-section:nth-child(2) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--drop-down-section:nth-child(3) {
|
||||
.mdl-mega-footer--drop-down-section:nth-child(3) {
|
||||
float: right;
|
||||
|
||||
&:after {
|
||||
@ -95,11 +95,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-mega-footer--drop-down-section:nth-child(4) {
|
||||
.mdl-mega-footer--drop-down-section:nth-child(4) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--middle-section:after {
|
||||
.mdl-mega-footer--middle-section:after {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
@ -109,16 +109,16 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.wsk-mega-footer--drop-down-section,
|
||||
.wsk-mega-footer--drop-down-section:nth-child(3),
|
||||
.wsk-mega-footer--drop-down-section:nth-child(4) {
|
||||
.mdl-mega-footer--drop-down-section,
|
||||
.mdl-mega-footer--drop-down-section:nth-child(3),
|
||||
.mdl-mega-footer--drop-down-section:nth-child(4) {
|
||||
width: 24%;
|
||||
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-mega-footer--heading-checkbox {
|
||||
.mdl-mega-footer--heading-checkbox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $footer-heading-line-height + ($padding * 2);
|
||||
@ -132,24 +132,24 @@
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
|
||||
&~.wsk-mega-footer--heading:after {
|
||||
@include wsk-icon();
|
||||
&~.mdl-mega-footer--heading:after {
|
||||
@include mdl-icon();
|
||||
content: $icon-expand-less;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-mega-footer--heading-checkbox:checked {
|
||||
.mdl-mega-footer--heading-checkbox:checked {
|
||||
&~ul {
|
||||
display:none;
|
||||
}
|
||||
|
||||
&~.wsk-mega-footer--heading:after {
|
||||
@include wsk-icon();
|
||||
&~.mdl-mega-footer--heading:after {
|
||||
@include mdl-icon();
|
||||
content: $icon-expand-more;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-mega-footer--heading {
|
||||
.mdl-mega-footer--heading {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
@ -170,7 +170,7 @@
|
||||
color: $footer-heading-color;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--heading:after {
|
||||
.mdl-mega-footer--heading:after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
@ -185,7 +185,7 @@
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--link-list {
|
||||
.mdl-mega-footer--link-list {
|
||||
list-style: none;
|
||||
|
||||
margin: 0;
|
||||
@ -194,51 +194,51 @@
|
||||
margin-bottom: $padding * 2;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--link-list li {
|
||||
.mdl-mega-footer--link-list li {
|
||||
margin-bottom: $padding;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--link-list a {
|
||||
.mdl-mega-footer--link-list a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
.wsk-mega-footer--heading-checkbox {
|
||||
.mdl-mega-footer--heading-checkbox {
|
||||
display: none;
|
||||
|
||||
&~.wsk-mega-footer--heading:after {
|
||||
&~.mdl-mega-footer--heading:after {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
.wsk-mega-footer--heading-checkbox:checked {
|
||||
.mdl-mega-footer--heading-checkbox:checked {
|
||||
&~ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&~.wsk-mega-footer--heading:after {
|
||||
&~.mdl-mega-footer--heading:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-mega-footer--bottom-section {
|
||||
.mdl-mega-footer--bottom-section {
|
||||
margin-bottom: $padding;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--bottom-section:after {
|
||||
.mdl-mega-footer--bottom-section:after {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wsk-logo {
|
||||
.mdl-logo {
|
||||
margin-bottom: $padding;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.wsk-mega-footer--bottom-section .wsk-mega-footer--link-list li {
|
||||
.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li {
|
||||
float: left;
|
||||
|
||||
margin-bottom: 0;
|
||||
@ -248,7 +248,7 @@
|
||||
|
||||
|
||||
@media screen and (min-width: 760px) {
|
||||
.wsk-logo {
|
||||
.mdl-logo {
|
||||
float: left;
|
||||
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-mini-footer {
|
||||
.mdl-mini-footer {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
@ -15,12 +15,12 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .wsk-logo {
|
||||
& .mdl-logo {
|
||||
line-height: $footer-btn-size;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-mini-footer--link-list {
|
||||
.mdl-mini-footer--link-list {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
@ -44,17 +44,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-mini-footer--left-section {
|
||||
.mdl-mini-footer--left-section {
|
||||
display: inline-block;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.wsk-mini-footer--right-section {
|
||||
.mdl-mini-footer--right-section {
|
||||
display: inline-block;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.wsk-mini-footer--social-btn {
|
||||
.mdl-mini-footer--social-btn {
|
||||
width: $footer-btn-size;
|
||||
height: $footer-btn-size;
|
||||
|
||||
|
||||
@ -14,26 +14,26 @@
|
||||
</head>
|
||||
<body class="demo-page demo-page--footer">
|
||||
|
||||
<footer class="wsk-mega-footer">
|
||||
<div class="wsk-mega-footer--top-section">
|
||||
<div class="wsk-mega-footer--left-section">
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<button class="wsk-mega-footer--social-btn"></button>
|
||||
<footer class="mdl-mega-footer">
|
||||
<div class="mdl-mega-footer--top-section">
|
||||
<div class="mdl-mega-footer--left-section">
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
<button class="mdl-mega-footer--social-btn"></button>
|
||||
</div>
|
||||
<div class="wsk-mega-footer--right-section">
|
||||
<div class="mdl-mega-footer--right-section">
|
||||
<a href="#">App Status Dashboard</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-mega-footer--middle-section">
|
||||
<div class="mdl-mega-footer--middle-section">
|
||||
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<input class="wsk-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="wsk-mega-footer--heading">Learning & Support</h1>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Learning & Support</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Resource Center</a></li>
|
||||
<li><a href="#">Help Center</a></li>
|
||||
<li><a href="#">Community</a></li>
|
||||
@ -43,10 +43,10 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<input class="wsk-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="wsk-mega-footer--heading">Just for Developers</h1>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Just for Developers</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Google Developers</a></li>
|
||||
<li><a href="#">AdWords API</a></li>
|
||||
<li><a href="#">AdWords Scipts</a></li>
|
||||
@ -54,10 +54,10 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<input class="wsk-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="wsk-mega-footer--heading">Related Products</h1>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">Related Products</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Analytics Standard</a></li>
|
||||
<li><a href="#">Shopping Ads</a></li>
|
||||
<li><a href="#">Trusted Store</a></li>
|
||||
@ -65,10 +65,10 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wsk-mega-footer--drop-down-section">
|
||||
<input class="wsk-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="wsk-mega-footer--heading">More solutions from Google</h1>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<div class="mdl-mega-footer--drop-down-section">
|
||||
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
|
||||
<h1 class="mdl-mega-footer--heading">More solutions from Google</h1>
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Google for Advertising</a></li>
|
||||
<li><a href="#">Google for Business</a></li>
|
||||
</ul>
|
||||
@ -76,11 +76,11 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wsk-mega-footer--bottom-section">
|
||||
<div class="wsk-logo">
|
||||
<div class="mdl-mega-footer--bottom-section">
|
||||
<div class="mdl-logo">
|
||||
Web <strong>Starter Kit</strong>
|
||||
</div>
|
||||
<ul class="wsk-mega-footer--link-list">
|
||||
<ul class="mdl-mega-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
@ -88,20 +88,20 @@
|
||||
|
||||
</footer>
|
||||
|
||||
<footer class="wsk-mini-footer">
|
||||
<div class="wsk-mini-footer--left-section">
|
||||
<div class="wsk-logo">
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div class="mdl-logo">
|
||||
Web <strong>Starter Kit</strong>
|
||||
</div>
|
||||
<ul class="wsk-mini-footer--link-list">
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-mini-footer--right-section">
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<button class="wsk-mini-footer--social-btn"></button>
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-page--footer .wsk-mega-footer,
|
||||
.demo-page--footer .wsk-mini-footer, {
|
||||
.demo-page--footer .mdl-mega-footer,
|
||||
.demo-page--footer .mdl-mini-footer, {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-icon-toggle {
|
||||
.mdl-icon-toggle {
|
||||
position: relative;
|
||||
|
||||
z-index: 1;
|
||||
@ -13,10 +13,10 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wsk-icon-toggle__input {
|
||||
.mdl-icon-toggle__input {
|
||||
line-height: $icon-toggle-size;
|
||||
|
||||
.wsk-icon-toggle.is-upgraded & {
|
||||
.mdl-icon-toggle.is-upgraded & {
|
||||
// Hide input element, while still making it respond to focus.
|
||||
position: absolute;
|
||||
width: 0;
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-icon-toggle__label {
|
||||
.mdl-icon-toggle__label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@ -52,27 +52,27 @@
|
||||
transition: background-color 0.2s $animation-curve-default,
|
||||
color 0.2s $animation-curve-default;
|
||||
|
||||
.wsk-icon-toggle.is-checked & {
|
||||
.mdl-icon-toggle.is-checked & {
|
||||
color: $icon-toggle-checked-color;
|
||||
}
|
||||
|
||||
.wsk-icon-toggle.is-disabled & {
|
||||
.mdl-icon-toggle.is-disabled & {
|
||||
color: $icon-toggle-disabled-color;
|
||||
cursor: auto;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.wsk-icon-toggle.is-focused & {
|
||||
.mdl-icon-toggle.is-focused & {
|
||||
background-color: $icon-toggle-focus-color;
|
||||
}
|
||||
|
||||
.wsk-icon-toggle.is-focused.is-checked & {
|
||||
.mdl-icon-toggle.is-focused.is-checked & {
|
||||
background-color: $icon-toggle-checked-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wsk-icon-toggle__ripple-container {
|
||||
.mdl-icon-toggle__ripple-container {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
|
||||
@ -88,15 +88,15 @@
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
|
||||
& .wsk-ripple {
|
||||
& .mdl-ripple {
|
||||
background: $icon-toggle-color;
|
||||
}
|
||||
|
||||
.wsk-icon-toggle.is-disabled & {
|
||||
.mdl-icon-toggle.is-disabled & {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.wsk-icon-toggle.is-disabled & .wsk-ripple {
|
||||
.mdl-icon-toggle.is-disabled & .mdl-ripple {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,43 +17,43 @@
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<div class="demo-icon-toggle-block">
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="wsk-icon-toggle__input" />
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-bold"></span>
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="mdl-icon-toggle__input" />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-bold"></span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="wsk-icon-toggle__input" />
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-italic"></span>
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="mdl-icon-toggle__input" />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-italic"></span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="checkbox-3">
|
||||
<input type="checkbox" id="checkbox-3" class="wsk-icon-toggle__input" />
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-underline"></span>
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="checkbox-3">
|
||||
<input type="checkbox" id="checkbox-3" class="mdl-icon-toggle__input" />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-underline"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div class="demo-icon-toggle-block">
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="disabled-checkbox-1">
|
||||
<input type="checkbox" id="disabled-checkbox-1" class="wsk-icon-toggle__input" disabled />
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-bold"></span>
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-1">
|
||||
<input type="checkbox" id="disabled-checkbox-1" class="mdl-icon-toggle__input" disabled />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-bold"></span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="disabled-checkbox-2">
|
||||
<input type="checkbox" id="disabled-checkbox-2" class="wsk-icon-toggle__input" disabled />
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-italic"></span>
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-2">
|
||||
<input type="checkbox" id="disabled-checkbox-2" class="mdl-icon-toggle__input" disabled />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-italic"></span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="disabled-checkbox-3">
|
||||
<input type="checkbox" id="disabled-checkbox-3" class="wsk-icon-toggle__input" disabled />
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-underline"></span>
|
||||
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-checkbox-3">
|
||||
<input type="checkbox" id="disabled-checkbox-3" class="mdl-icon-toggle__input" disabled />
|
||||
<span class="mdl-icon-toggle__label mdl-icon mdl-icon--format-underline"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/icon-toggle/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="icon-toggle.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for icon toggle WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialIconToggle(element) {
|
||||
@ -30,12 +30,12 @@ MaterialIconToggle.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialIconToggle.prototype.CssClasses_ = {
|
||||
INPUT: 'wsk-icon-toggle__input',
|
||||
JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'wsk-icon-toggle__ripple-container',
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
INPUT: 'mdl-icon-toggle__input',
|
||||
JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked'
|
||||
@ -208,5 +208,5 @@ MaterialIconToggle.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialIconToggle,
|
||||
classAsString: 'MaterialIconToggle',
|
||||
cssClass: 'wsk-js-icon-toggle'
|
||||
cssClass: 'mdl-js-icon-toggle'
|
||||
});
|
||||
|
||||
@ -20,7 +20,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
2. Add the MDL classes, separated by spaces, to the span using the `class` attribute.
|
||||
```html
|
||||
<span class="wsk-icon wsk-icon--alarm"></span>
|
||||
<span class="mdl-icon mdl-icon--alarm"></span>
|
||||
```
|
||||
|
||||
The icon component is ready for use.
|
||||
@ -30,19 +30,19 @@ The icon component is ready for use.
|
||||
A warning icon.
|
||||
|
||||
```html
|
||||
<span class="wsk-icon wsk-icon--warning"></span>
|
||||
<span class="mdl-icon mdl-icon--warning"></span>
|
||||
```
|
||||
|
||||
A fast-forward icon.
|
||||
|
||||
```html
|
||||
<span class="wsk-icon wsk-icon--fast-forward"></span>
|
||||
<span class="mdl-icon mdl-icon--fast-forward"></span>
|
||||
```
|
||||
|
||||
A cut icon.
|
||||
|
||||
```html
|
||||
<span class="wsk-icon wsk-icon--content-cut"></span>
|
||||
<span class="mdl-icon mdl-icon--content-cut"></span>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
@ -50,8 +50,8 @@ The MDL CSS classes define and specify the icon to use. The table below lists th
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-icon` | Defines the container as an MDL icon component | Required on span element |
|
||||
| `wsk-icon--ICON_CLASS_NAME` | Assigns a specific icon to the container | Required on span element (see icon demo page for complete list) |
|
||||
| `mdl-icon` | Defines the container as an MDL icon component | Required on span element |
|
||||
| `mdl-icon--ICON_CLASS_NAME` | Assigns a specific icon to the container | Required on span element (see icon demo page for complete list) |
|
||||
|
||||
##More information
|
||||
For working examples of the **icon** component, see the MDL [icon demo page](http://google.github.io/web-starter-kit/latest/styleguide/icons/demo.html).
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1514
src/icons/demo.html
1514
src/icons/demo.html
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-page--icon .wsk-icon {
|
||||
.demo-page--icon .mdl-icon {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
min-width: 24px;
|
||||
|
||||
@ -32,15 +32,15 @@
|
||||
<link rel="stylesheet" href="styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-styleguide">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-styleguide">
|
||||
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav id="main-navigation" class="wsk-navigation">
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav id="main-navigation" class="mdl-navigation">
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="wsk-layout__content">
|
||||
<div class="mdl-layout__content">
|
||||
<div class="styleguide-demo">
|
||||
<h1>Typography</h1>
|
||||
<iframe src="./typography/demo.html" scrolling="no"></iframe>
|
||||
@ -154,7 +154,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- build:js scripts/main.min.js -->
|
||||
<script src="wskComponentHandler.js"></script>
|
||||
<script src="mdlComponentHandler.js"></script>
|
||||
<script src="layout/layout.js" async defer></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
@ -174,7 +174,7 @@
|
||||
|
||||
// Add list item
|
||||
var navAnchor = document.createElement('a');
|
||||
navAnchor.classList.add('wsk-navigation__link');
|
||||
navAnchor.classList.add('mdl-navigation__link');
|
||||
navAnchor.href = '#' + anchorLink;
|
||||
navAnchor.appendChild(document.createTextNode(demoTitle));
|
||||
navList.appendChild(navAnchor);
|
||||
|
||||
@ -5,26 +5,26 @@ The layout module allows you to build layouts easily, simply by adding a few CSS
|
||||
## Basic Example
|
||||
|
||||
```html
|
||||
<div class="wsk-layout">
|
||||
<header class="wsk-layout__header">
|
||||
<div class="mdl-layout">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="wsk-layout-navigation">
|
||||
<a class="wsk-navigation__link" href="">Hello</a>
|
||||
<nav class="mdl-layout-navigation">
|
||||
<a class="mdl-navigation__link" href="">Hello</a>
|
||||
(...)
|
||||
</nav>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-layout-navigation">
|
||||
<a class="wsk-navigation__link" href="">Hello</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-layout-navigation">
|
||||
<a class="mdl-navigation__link" href="">Hello</a>
|
||||
(...)
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-content"></div>
|
||||
</main>
|
||||
</div>
|
||||
@ -36,13 +36,13 @@ The container element.
|
||||
|
||||
### Options
|
||||
|
||||
- `wsk-layout--fixed-header`:
|
||||
- `mdl-layout--fixed-header`:
|
||||
By default, headers are only shown in larger screens. Using this option makes them visible in smaller screens as well.
|
||||
|
||||
- `wsk-layout--fixed-drawer`:
|
||||
- `mdl-layout--fixed-drawer`:
|
||||
By default, drawers are only shown in smaller screens. Using this option makes them always visible and open in larger screens, effectively functioning as side navigation. They still open and close normally in smaller screens, to save screen real estate.
|
||||
|
||||
- `wsk-layout--overlay-drawer-button`:
|
||||
- `mdl-layout--overlay-drawer-button`:
|
||||
By default, the drawer button pushes down the content, to avoid overlapping issues. You can use this option if you'd like to overlay the drawer button directly on top of the content.
|
||||
|
||||
### State
|
||||
@ -51,45 +51,45 @@ The container element.
|
||||
Utility class that gets added to the layout when in a small screen size.
|
||||
|
||||
|
||||
## wsk-layout__header
|
||||
## mdl-layout__header
|
||||
|
||||
The header element (optional). By default, it's only shown in large screens.
|
||||
|
||||
### Options
|
||||
|
||||
- `wsk-layout__header--transparent`:
|
||||
- `mdl-layout__header--transparent`:
|
||||
Makes the background transparent, instead of the default main palette color.
|
||||
|
||||
- `wsk-layout__header--medium-tall`:
|
||||
- `mdl-layout__header--medium-tall`:
|
||||
Makes the header twice the height of a default header.
|
||||
|
||||
- `wsk-layout__header--tall`:
|
||||
- `mdl-layout__header--tall`:
|
||||
Makes the header three times the height of a default header.
|
||||
|
||||
- `wsk-layout__header--multi-row`:
|
||||
- `mdl-layout__header--multi-row`:
|
||||
Allows stacking of multiple rows inside the header (by default, it only has one). Example:
|
||||
```html
|
||||
<header class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--tall">
|
||||
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--tall">
|
||||
<!-- Top row -->
|
||||
<div class="wsk-layout__header-row">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Upper row</span>
|
||||
</div>
|
||||
<div class="wsk-layout__header-row">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Middle row</span>
|
||||
</div>
|
||||
<div class="wsk-layout__header-row">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Bottom row</span>
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
|
||||
- `wsk-layout__header--seamed`:
|
||||
- `mdl-layout__header--seamed`:
|
||||
By default, the header casts a shadow onto the content. This option removes the shadow altogether.
|
||||
|
||||
- `wsk-layout__header--waterfall`:
|
||||
- `mdl-layout__header--waterfall`:
|
||||
By default, the header casts a shadow onto the content. This option removes the shadow when the page is at the top of the content, and only shows the shadow if the user has scrolled down.
|
||||
|
||||
- `wsk-layout__header--scroll`:
|
||||
- `mdl-layout__header--scroll`:
|
||||
By default, the header stays fixed at the top. This option makes it scroll with the content, so it's only visible at the top of the page.
|
||||
|
||||
### State
|
||||
@ -100,24 +100,24 @@ The header element (optional). By default, it's only shown in large screens.
|
||||
|
||||
### Sub-elements
|
||||
|
||||
- `wsk-layout__header-row`:
|
||||
- `mdl-layout__header-row`:
|
||||
Used when stacking multiple rows inside the header (by default, it only has one). Example:
|
||||
|
||||
```html
|
||||
<header class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--tall">
|
||||
<div class="wsk-layout__header-row">
|
||||
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--tall">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Upper row</span>
|
||||
</div>
|
||||
<div class="wsk-layout__header-row">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Middle row</span>
|
||||
</div>
|
||||
<div class="wsk-layout__header-row">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span>Bottom row</span>
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
|
||||
## wsk-layout__drawer
|
||||
## mdl-layout__drawer
|
||||
|
||||
The drawer element (optional). By default, it's only shown in small screens, as a collapsible panel.
|
||||
|
||||
@ -131,7 +131,7 @@ None.
|
||||
This class is added to the drawer when it is currently visible.
|
||||
|
||||
|
||||
## wsk-layout__tab-bar
|
||||
## mdl-layout__tab-bar
|
||||
|
||||
Tabs (optional). Used for tabbing the entire layout.
|
||||
|
||||
@ -139,28 +139,28 @@ Tabs (optional). Used for tabbing the entire layout.
|
||||
|
||||
```html
|
||||
<div class="demo-container">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
|
||||
<header class="wsk-layout__header">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="images/app-icon.png"/>
|
||||
<img class="mdl-layout-icon" src="images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</header>
|
||||
<!-- Tab bar -->
|
||||
<div class="wsk-layout__tab-bar wsk-js-ripple-effect">
|
||||
<a href="#blue-panel" class="wsk-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel" class="wsk-layout__tab">Green</a>
|
||||
<a href="#red-panel" class="wsk-layout__tab">Red</a>
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<!-- Panels -->
|
||||
<div class="wsk-layout__tab-panel is-active" id="blue-panel">
|
||||
<div class="mdl-layout__tab-panel is-active" id="blue-panel">
|
||||
(...)
|
||||
</div>
|
||||
<div class="wsk-layout__tab-panel" id="green-panel">
|
||||
<div class="mdl-layout__tab-panel" id="green-panel">
|
||||
(...)
|
||||
</div>
|
||||
<div class="wsk-layout__tab-panel" id="red-panel">
|
||||
<div class="mdl-layout__tab-panel" id="red-panel">
|
||||
(...)
|
||||
</div>
|
||||
</main>
|
||||
@ -170,7 +170,7 @@ Tabs (optional). Used for tabbing the entire layout.
|
||||
|
||||
### Options
|
||||
|
||||
- `wsk-layout--fixed-tabs`:
|
||||
- `mdl-layout--fixed-tabs`:
|
||||
Uses fixed tabs, rather than the default scrollable tabs.
|
||||
|
||||
### State
|
||||
@ -181,89 +181,89 @@ Tabs (optional). Used for tabbing the entire layout.
|
||||
|
||||
### Sub-elements
|
||||
|
||||
- `wsk-layout__tab-bar`:
|
||||
- `mdl-layout__tab-bar`:
|
||||
Container element for the various tabs.
|
||||
|
||||
- `wsk-layout__tab`:
|
||||
- `mdl-layout__tab`:
|
||||
An individual tab. Should contain the tab title (or icon).
|
||||
|
||||
- `wsk-layout__tab-panel`:
|
||||
- `mdl-layout__tab-panel`:
|
||||
An individual panel of tabbed content. Linked to the corresponding tab via its ID.
|
||||
|
||||
|
||||
## wsk-layout__content
|
||||
## mdl-layout__content
|
||||
|
||||
Your content goes here :)
|
||||
|
||||
|
||||
## Other options
|
||||
|
||||
- `wsk-layout-spacer`:
|
||||
- `mdl-layout-spacer`:
|
||||
Used to align elements inside a header or drawer. This is a class set to flex
|
||||
grow, so you can use it to align elements to the right in a header, for
|
||||
example:
|
||||
```html
|
||||
<header class="wsk-layout__header">
|
||||
<header class="mdl-layout__header">
|
||||
<span>Left-aligned text</span>
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Right-aligned text</span>
|
||||
</header>
|
||||
```
|
||||
or to the center:
|
||||
```html
|
||||
<header class="wsk-layout__header">
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Center-aligned text</span>
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
</header>
|
||||
```
|
||||
You can also use it to align to bottom in a drawer:
|
||||
```html
|
||||
<div class="wsk-layout__drawer">
|
||||
<div class="mdl-layout__drawer">
|
||||
<span>Top-aligned text</span>
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<span>Bottom-aligned text</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
- `wsk-layout-icon`:
|
||||
- `mdl-layout-icon`:
|
||||
Styles an image to serve as the application icon.
|
||||
```html
|
||||
<header class="wsk-layout__header">
|
||||
<img class="wsk-layout-icon" src="app-icon.svg">My Awesome Site</div>
|
||||
<header class="mdl-layout__header">
|
||||
<img class="mdl-layout-icon" src="app-icon.svg">My Awesome Site</div>
|
||||
</header>
|
||||
```
|
||||
|
||||
- `wsk-layout-title`:
|
||||
- `mdl-layout-title`:
|
||||
Styles the text inside to look like a title (slightly different styling
|
||||
depending on container).
|
||||
```html
|
||||
<header class="wsk-layout__header">
|
||||
<div class="wsk-layout-title">My Awesome Site</div>
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout-title">My Awesome Site</div>
|
||||
</header>
|
||||
```
|
||||
```html
|
||||
<div class="wsk-layout__drawer">
|
||||
<div class="wsk-layout-title">My Awesome Site</div>
|
||||
<div class="mdl-layout__drawer">
|
||||
<div class="mdl-layout-title">My Awesome Site</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- `wsk-layout-navigation` and `wsk-navigation__link`:
|
||||
- `mdl-layout-navigation` and `mdl-navigation__link`:
|
||||
Used to place a navigation section and navigation links, respectively. They're
|
||||
styled differently depending on whether they're placed in the header or the
|
||||
drawer.
|
||||
```html
|
||||
<header class="wsk-layout__header">
|
||||
<nav class="wsk-layout-navigation">
|
||||
<a class="wsk-navigation__link" href="">Hello</a>
|
||||
<header class="mdl-layout__header">
|
||||
<nav class="mdl-layout-navigation">
|
||||
<a class="mdl-navigation__link" href="">Hello</a>
|
||||
(...)
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
```html
|
||||
<div class="wsk-layout__drawer">
|
||||
<nav class="wsk-layout-navigation">
|
||||
<a class="wsk-navigation__link" href="">Hello</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<nav class="mdl-layout-navigation">
|
||||
<a class="mdl-navigation__link" href="">Hello</a>
|
||||
(...)
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
|
||||
// Navigation classes. Only used here for now, but we may at some point move
|
||||
// this to its own component.
|
||||
.wsk-navigation {
|
||||
.mdl-navigation {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.wsk-navigation__link {
|
||||
.mdl-navigation__link {
|
||||
color: $layout-text-color;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
@ -15,13 +15,13 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wsk-navigation__link:hover {
|
||||
.mdl-navigation__link:hover {
|
||||
background-color: $layout-nav-color;
|
||||
}
|
||||
|
||||
|
||||
// Main layout class.
|
||||
.wsk-layout {
|
||||
.mdl-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -31,7 +31,7 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wsk-layout__container {
|
||||
.mdl-layout__container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -39,7 +39,7 @@
|
||||
|
||||
|
||||
// Optional utility classes for formatting special blocks in this component.
|
||||
.wsk-layout-title {
|
||||
.mdl-layout-title {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@ -47,13 +47,13 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wsk-layout-spacer {
|
||||
.mdl-layout-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
// Drawer.
|
||||
.wsk-layout__drawer {
|
||||
.mdl-layout__drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
@ -95,7 +95,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& > .wsk-layout-title {
|
||||
& > .mdl-layout-title {
|
||||
line-height: $layout-desktop-header-height;
|
||||
padding-left: $layout-header-basic-desktop-indent;
|
||||
border-bottom: 1px solid $layout-drawer-border-color;
|
||||
@ -106,12 +106,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
& .wsk-navigation {
|
||||
& .mdl-navigation {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& .wsk-navigation__link {
|
||||
& .mdl-navigation__link {
|
||||
padding: 16px $layout-header-basic-desktop-indent;
|
||||
margin: 0;
|
||||
|
||||
@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.wsk-layout--fixed-drawer > & {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
transform: translateX(0);
|
||||
z-index: 2;
|
||||
}
|
||||
@ -131,7 +131,7 @@
|
||||
|
||||
// Drawer button.
|
||||
// TODO(sgomes): Replace with an icon button when we have that component.
|
||||
.wsk-layout__drawer-button {
|
||||
.mdl-layout__drawer-button {
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
@ -155,11 +155,11 @@
|
||||
z-index: 4;
|
||||
|
||||
&::after {
|
||||
@include wsk-icon();
|
||||
@include mdl-icon();
|
||||
content: $icon-menu;
|
||||
}
|
||||
|
||||
.wsk-layout__header & {
|
||||
.mdl-layout__header & {
|
||||
position: absolute;
|
||||
color: $layout-header-text-color;
|
||||
background-color: inherit;
|
||||
@ -175,7 +175,7 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.wsk-layout--fixed-drawer > & {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -183,7 +183,7 @@
|
||||
|
||||
|
||||
// Header.
|
||||
.wsk-layout__header {
|
||||
.mdl-layout__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
@ -201,7 +201,7 @@
|
||||
padding-left: $layout-header-basic-desktop-indent;
|
||||
overflow: hidden;
|
||||
|
||||
.wsk-layout.has-drawer & {
|
||||
.mdl-layout.has-drawer & {
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
}
|
||||
|
||||
@ -210,16 +210,16 @@
|
||||
min-height: $layout-mobile-header-height;
|
||||
padding-left: $layout-header-basic-mobile-indent;
|
||||
|
||||
.wsk-layout.has-drawer & {
|
||||
.mdl-layout.has-drawer & {
|
||||
padding-left: $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout--fixed-drawer:not(.is-small-screen) > & {
|
||||
.mdl-layout--fixed-drawer:not(.is-small-screen) > & {
|
||||
padding-left: $layout-header-basic-desktop-indent;
|
||||
}
|
||||
|
||||
& > .wsk-layout-icon {
|
||||
& > .mdl-layout-icon {
|
||||
margin-right: $layout-header-icon-margin;
|
||||
left: $layout-header-basic-desktop-indent;
|
||||
top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
|
||||
@ -236,7 +236,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout.has-drawer & > .wsk-layout-icon {
|
||||
.mdl-layout.has-drawer & > .mdl-layout-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -262,15 +262,15 @@
|
||||
}
|
||||
|
||||
// ...unless it's a navigation area.
|
||||
& > .wsk-navigation:last-child {
|
||||
& > .mdl-navigation:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
& .wsk-layout-title {
|
||||
& .mdl-layout-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .wsk-navigation {
|
||||
& .mdl-navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: $layout-header-desktop-row-height;
|
||||
@ -282,7 +282,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
& .wsk-navigation__link {
|
||||
& .mdl-navigation__link {
|
||||
color: $layout-header-text-color;
|
||||
line-height: $layout-header-desktop-row-height;
|
||||
padding: 0 $layout-header-basic-desktop-indent;
|
||||
@ -293,12 +293,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
& .wsk-navigation__link:hover {
|
||||
& .mdl-navigation__link:hover {
|
||||
background-color: $layout-header-nav-hover-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
.wsk-layout--fixed-drawer > & {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
margin-left: $layout-drawer-width;
|
||||
}
|
||||
}
|
||||
@ -308,17 +308,17 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wsk-layout--fixed-header > & {
|
||||
.mdl-layout--fixed-header > & {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__header--multi-row {
|
||||
.mdl-layout__header--multi-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wsk-layout__header--medium-tall {
|
||||
.mdl-layout__header--medium-tall {
|
||||
min-height: 2 * $layout-header-desktop-row-height;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
@ -326,7 +326,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__header--tall {
|
||||
.mdl-layout__header--tall {
|
||||
min-height: 3 * $layout-header-desktop-row-height;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
@ -334,20 +334,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__header--transparent.wsk-layout__header--transparent {
|
||||
.mdl-layout__header--transparent.mdl-layout__header--transparent {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wsk-layout__header--seamed {
|
||||
.mdl-layout__header--seamed {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wsk-layout__header--scroll {
|
||||
.mdl-layout__header--scroll {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wsk-layout__header--waterfall {
|
||||
.mdl-layout__header--waterfall {
|
||||
box-shadow: none;
|
||||
|
||||
&.is-casting-shadow {
|
||||
@ -356,7 +356,7 @@
|
||||
}
|
||||
|
||||
// Declared twice to bump rule priority.
|
||||
.wsk-layout__header-row.wsk-layout__header-row {
|
||||
.mdl-layout__header-row.mdl-layout__header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
@ -370,7 +370,7 @@
|
||||
min-height: $layout-header-mobile-row-height;
|
||||
}
|
||||
|
||||
& > .wsk-layout-icon {
|
||||
& > .mdl-layout-icon {
|
||||
margin-right: $layout-header-icon-margin;
|
||||
height: $layout-header-icon-size;
|
||||
width: $layout-header-icon-size;
|
||||
@ -383,7 +383,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout.has-drawer & > .wsk-layout-icon {
|
||||
.mdl-layout.has-drawer & > .mdl-layout-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -401,13 +401,13 @@
|
||||
}
|
||||
|
||||
// ...unless it's a navigation area.
|
||||
& > .wsk-navigation:last-child {
|
||||
& > .mdl-navigation:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Obfuscator.
|
||||
.wsk-layout__obfuscator {
|
||||
.mdl-layout__obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -419,7 +419,7 @@
|
||||
transition-property: background-color;
|
||||
@include material-animation-default();
|
||||
|
||||
.wsk-layout__drawer.is-visible ~ & {
|
||||
.mdl-layout__drawer.is-visible ~ & {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible;
|
||||
}
|
||||
@ -427,7 +427,7 @@
|
||||
|
||||
|
||||
// Content.
|
||||
.wsk-layout__content {
|
||||
.mdl-layout__content {
|
||||
// Fix IE10 bug.
|
||||
-ms-flex: 0 1 auto;
|
||||
|
||||
@ -437,20 +437,20 @@
|
||||
flex-grow: 1;
|
||||
z-index: 1;
|
||||
|
||||
.wsk-layout--fixed-drawer > & {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
margin-left: $layout-drawer-width;
|
||||
}
|
||||
|
||||
.wsk-layout__header--scroll ~ & {
|
||||
.mdl-layout__header--scroll ~ & {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
.wsk-layout--fixed-drawer > & {
|
||||
.mdl-layout--fixed-drawer > & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.wsk-layout__header--scroll ~ & {
|
||||
.mdl-layout__header--scroll ~ & {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@ -458,7 +458,7 @@
|
||||
}
|
||||
|
||||
// Tabs.
|
||||
.wsk-layout__tab-bar {
|
||||
.mdl-layout__tab-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: $layout-tab-bar-height * 2;
|
||||
@ -480,7 +480,7 @@
|
||||
padding: 0 0 0 $layout-header-mobile-indent;
|
||||
}
|
||||
|
||||
.wsk-layout--fixed-tabs & {
|
||||
.mdl-layout--fixed-tabs & {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
@ -491,7 +491,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__tab-bar-container {
|
||||
.mdl-layout__tab-bar-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: $layout-tab-bar-height;
|
||||
@ -503,14 +503,14 @@
|
||||
flex-shrink: 0;
|
||||
@include shadow-z1();
|
||||
|
||||
.wsk-layout__container > & {
|
||||
.mdl-layout__container > & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__tab-bar-button {
|
||||
.mdl-layout__tab-bar-button {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: $layout-tab-bar-height;
|
||||
@ -528,7 +528,7 @@
|
||||
width: $layout-header-mobile-indent - $layout-tab-mobile-padding;
|
||||
}
|
||||
|
||||
.wsk-layout--fixed-tabs & {
|
||||
.mdl-layout--fixed-tabs & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -537,27 +537,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__tab-bar-left-button {
|
||||
.mdl-layout__tab-bar-left-button {
|
||||
left: 0;
|
||||
|
||||
&::after {
|
||||
font-size: 26px;
|
||||
@include wsk-icon();
|
||||
@include mdl-icon();
|
||||
content: $icon-chevron-left;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__tab-bar-right-button {
|
||||
.mdl-layout__tab-bar-right-button {
|
||||
right: 0;
|
||||
|
||||
&::after {
|
||||
font-size: 26px;
|
||||
@include wsk-icon();
|
||||
@include mdl-icon();
|
||||
content: $icon-chevron-right;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__tab {
|
||||
.mdl-layout__tab {
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 0 $layout-tab-desktop-padding 0 $layout-tab-desktop-padding;
|
||||
@ -584,17 +584,17 @@
|
||||
padding: 0 $layout-tab-mobile-padding 0 $layout-tab-mobile-padding;
|
||||
}
|
||||
|
||||
.wsk-layout--fixed-tabs & {
|
||||
.mdl-layout--fixed-tabs & {
|
||||
float: none;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wsk-layout.is-upgraded &.is-active {
|
||||
.mdl-layout.is-upgraded &.is-active {
|
||||
color: $layout-header-text-color;
|
||||
}
|
||||
|
||||
.wsk-layout.is-upgraded &.is-active::after {
|
||||
.mdl-layout.is-upgraded &.is-active::after {
|
||||
height: $layout-tab-highlight-thickness;
|
||||
width: 100%;
|
||||
display: block;
|
||||
@ -608,7 +608,7 @@
|
||||
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
|
||||
}
|
||||
|
||||
& .wsk-layout__tab-ripple-container {
|
||||
& .mdl-layout__tab-ripple-container {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@ -620,14 +620,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout__tab-panel {
|
||||
.mdl-layout__tab-panel {
|
||||
display: block;
|
||||
|
||||
.wsk-layout.is-upgraded & {
|
||||
.mdl-layout.is-upgraded & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wsk-layout.is-upgraded &.is-active {
|
||||
.mdl-layout.is-upgraded &.is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,34 +17,34 @@
|
||||
screens.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
|
||||
<header class="wsk-layout__header">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
@ -55,34 +55,34 @@
|
||||
<p>Same as the standard layout, but the header scrolls with the content.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
|
||||
<header class="wsk-layout__header wsk-layout__header--scroll">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
@ -94,30 +94,30 @@
|
||||
navigation.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--overlay-drawer-button">
|
||||
<header class="wsk-layout__header">
|
||||
<span class="wsk-layout-title">Fixed drawer layout demo</span>
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right">
|
||||
<label class="wsk-button wsk-js-button wsk-button--icon" for="sample-expclean">
|
||||
<span class="wsk-icon wsk-icon--search"/>
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header">
|
||||
<span class="mdl-layout-title">Fixed drawer layout demo</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="wsk-textfield__expandable-holder">
|
||||
<input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
@ -128,18 +128,18 @@
|
||||
<p>Same as the previous layout, but with no header.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--overlay-drawer-button">
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
@ -150,34 +150,34 @@
|
||||
<p>Always shows a header, even in smaller screens.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
|
||||
<header class="wsk-layout__header">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation. We use CSS to hide it in small screens. -->
|
||||
<nav class="wsk-navigation" id="fixed_header_nav">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<nav class="mdl-navigation" id="fixed_header_nav">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
@ -189,30 +189,30 @@
|
||||
even in small screens.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--fixed-header">
|
||||
<header class="wsk-layout__header">
|
||||
<span class="wsk-layout-title">Fixed drawer and header</span>
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right">
|
||||
<label class="wsk-button wsk-js-button wsk-button--icon" for="sample-expclean2">
|
||||
<span class="wsk-icon wsk-icon--search"/>
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<span class="mdl-layout-title">Fixed drawer and header</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean2">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="wsk-textfield__expandable-holder">
|
||||
<input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean2" />
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean2" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
@ -224,54 +224,54 @@
|
||||
screens only).</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
|
||||
<header class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--waterfall wsk-layout__header--tall">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
||||
<header class="mdl-layout__header mdl-layout__header--multi-row mdl-layout__header--waterfall mdl-layout__header--tall">
|
||||
<!-- Top row -->
|
||||
<div class="wsk-layout__header-row">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span id="my_text_changes">Material Design Lite</span>
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Only show when compact, check CSS -->
|
||||
<nav class="wsk-navigation" id="compact_navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<nav class="mdl-navigation" id="compact_navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Middle row, subtitle -->
|
||||
<div class="wsk-layout__header-row">
|
||||
<span class="wsk-typography--title">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-typography--title">
|
||||
Multi-row layout demo
|
||||
</span>
|
||||
</div>
|
||||
<!-- Bottom row -->
|
||||
<div class="wsk-layout__header-row">
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout__header-row">
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Only show when expanded, check CSS -->
|
||||
<nav class="wsk-navigation" id="expanded_navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<nav class="mdl-navigation" id="expanded_navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<div class="demo-layout__content"></div>
|
||||
</main>
|
||||
</div>
|
||||
@ -282,34 +282,34 @@
|
||||
<p>Uses a transparent header that draws on top of the layout's background.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout" id="transparent_demo">
|
||||
<header class="wsk-layout__header wsk-layout__header--transparent">
|
||||
<div class="mdl-layout mdl-js-layout" id="transparent_demo">
|
||||
<header class="mdl-layout__header mdl-layout__header--transparent">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="wsk-layout-spacer"></div>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="wsk-layout__drawer">
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<nav class="wsk-navigation">
|
||||
<a class="wsk-navigation__link" href="#">Hello</a>
|
||||
<a class="wsk-navigation__link" href="#">World.</a>
|
||||
<a class="wsk-navigation__link" href="#">How</a>
|
||||
<a class="wsk-navigation__link" href="#">Are</a>
|
||||
<a class="wsk-navigation__link" href="#">You?</a>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#">Hello</a>
|
||||
<a class="mdl-navigation__link" href="#">World.</a>
|
||||
<a class="mdl-navigation__link" href="#">How</a>
|
||||
<a class="mdl-navigation__link" href="#">Are</a>
|
||||
<a class="mdl-navigation__link" href="#">You?</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@ -318,41 +318,41 @@
|
||||
<p>Simple header with scrollable tabs.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
|
||||
<header class="wsk-layout__header">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</header>
|
||||
<div class="wsk-layout__tab-bar wsk-js-ripple-effect">
|
||||
<a href="#blue-panel-scroll" class="wsk-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-scroll" class="wsk-layout__tab">Green</a>
|
||||
<a href="#red-panel-scroll" class="wsk-layout__tab">Red</a>
|
||||
<a href="#blue-panel-scroll" class="wsk-layout__tab">Blue Two</a>
|
||||
<a href="#green-panel-scroll" class="wsk-layout__tab">Green Two</a>
|
||||
<a href="#red-panel-scroll" class="wsk-layout__tab">Red Two</a>
|
||||
<a href="#blue-panel-scroll" class="wsk-layout__tab">Blue Three</a>
|
||||
<a href="#green-panel-scroll" class="wsk-layout__tab">Green Three</a>
|
||||
<a href="#red-panel-scroll" class="wsk-layout__tab">Red Three</a>
|
||||
<a href="#blue-panel-scroll" class="wsk-layout__tab">Blue Four</a>
|
||||
<a href="#green-panel-scroll" class="wsk-layout__tab">Green Four</a>
|
||||
<a href="#red-panel-scroll" class="wsk-layout__tab">Red Four</a>
|
||||
<a href="#blue-panel-scroll" class="wsk-layout__tab">Blue Five</a>
|
||||
<a href="#green-panel-scroll" class="wsk-layout__tab">Green Five</a>
|
||||
<a href="#red-panel-scroll" class="wsk-layout__tab">Red Five</a>
|
||||
<a href="#blue-panel-scroll" class="wsk-layout__tab">Blue Six</a>
|
||||
<a href="#green-panel-scroll" class="wsk-layout__tab">Green Six</a>
|
||||
<a href="#red-panel-scroll" class="wsk-layout__tab">Red Six</a>
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Two</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Two</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Two</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Three</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Three</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Three</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Four</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Four</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Four</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Five</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Five</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Five</a>
|
||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Six</a>
|
||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Six</a>
|
||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Six</a>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<section class="wsk-layout__tab-panel is-active" id="blue-panel-scroll">
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-scroll">
|
||||
<div class="demo-layout__content-blue"></div>
|
||||
</section>
|
||||
<section class="wsk-layout__tab-panel" id="green-panel-scroll">
|
||||
<section class="mdl-layout__tab-panel" id="green-panel-scroll">
|
||||
<div class="demo-layout__content-green"></div>
|
||||
</section>
|
||||
<section class="wsk-layout__tab-panel" id="red-panel-scroll">
|
||||
<section class="mdl-layout__tab-panel" id="red-panel-scroll">
|
||||
<div class="demo-layout__content-red"></div>
|
||||
</section>
|
||||
</main>
|
||||
@ -363,26 +363,26 @@
|
||||
<p>Simple header with fixed tabs.</p>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header wsk-layout--fixed-tabs">
|
||||
<header class="wsk-layout__header">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<img class="mdl-layout-icon" src="../demo-images/app-icon.png"/>
|
||||
<!-- Title -->
|
||||
<span class="wsk-layout-title">Material Design Lite</span>
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
</header>
|
||||
<div class="wsk-layout__tab-bar wsk-js-ripple-effect">
|
||||
<a href="#blue-panel-fixed" class="wsk-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-fixed" class="wsk-layout__tab">Green</a>
|
||||
<a href="#red-panel-fixed" class="wsk-layout__tab">Red</a>
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||
<a href="#blue-panel-fixed" class="mdl-layout__tab is-active">Blue</a>
|
||||
<a href="#green-panel-fixed" class="mdl-layout__tab">Green</a>
|
||||
<a href="#red-panel-fixed" class="mdl-layout__tab">Red</a>
|
||||
</div>
|
||||
<main class="wsk-layout__content">
|
||||
<section class="wsk-layout__tab-panel is-active" id="blue-panel-fixed">
|
||||
<main class="mdl-layout__content">
|
||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-fixed">
|
||||
<div class="demo-layout__content-blue"></div>
|
||||
</section>
|
||||
<section class="wsk-layout__tab-panel" id="green-panel-fixed">
|
||||
<section class="mdl-layout__tab-panel" id="green-panel-fixed">
|
||||
<div class="demo-layout__content-green"></div>
|
||||
</section>
|
||||
<section class="wsk-layout__tab-panel" id="red-panel-fixed">
|
||||
<section class="mdl-layout__tab-panel" id="red-panel-fixed">
|
||||
<div class="demo-layout__content-red"></div>
|
||||
</section>
|
||||
</main>
|
||||
@ -390,7 +390,7 @@
|
||||
</div>
|
||||
|
||||
<!-- build:js(app/styleguide/layout/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="layout.js"></script>
|
||||
<script src="../textfield/textfield.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
// Styles for fixed header demo.
|
||||
.demo-page--layout .wsk-layout.is-small-screen #fixed_header_nav {
|
||||
.demo-page--layout .mdl-layout.is-small-screen #fixed_header_nav {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -53,19 +53,19 @@
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.demo-page--layout .wsk-layout__header.is-compact #my_text_changes {
|
||||
.demo-page--layout .mdl-layout__header.is-compact #my_text_changes {
|
||||
@include typo-title;
|
||||
}
|
||||
|
||||
.demo-page--layout .wsk-layout__header.is-compact #compact_navigation {
|
||||
.demo-page--layout .mdl-layout__header.is-compact #compact_navigation {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.demo-page--layout .wsk-layout__header.is-compact #expanded_navigation {
|
||||
.demo-page--layout .mdl-layout__header.is-compact #expanded_navigation {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.demo-page--layout .wsk-layout__header.is-compact #my_text_changes:after {
|
||||
.demo-page--layout .mdl-layout__header.is-compact #my_text_changes:after {
|
||||
content: " \0000a0 > \0000a0 Multi-row layout demo";
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Layout WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialLayout(element) {
|
||||
@ -42,30 +42,30 @@ MaterialLayout.prototype.Mode_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialLayout.prototype.CssClasses_ = {
|
||||
HEADER: 'wsk-layout__header',
|
||||
DRAWER: 'wsk-layout__drawer',
|
||||
CONTENT: 'wsk-layout__content',
|
||||
DRAWER_BTN: 'wsk-layout__drawer-button',
|
||||
HEADER: 'mdl-layout__header',
|
||||
DRAWER: 'mdl-layout__drawer',
|
||||
CONTENT: 'mdl-layout__content',
|
||||
DRAWER_BTN: 'mdl-layout__drawer-button',
|
||||
|
||||
JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'wsk-layout__tab-ripple-container',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
|
||||
HEADER_SEAMED: 'wsk-layout__header--seamed',
|
||||
HEADER_WATERFALL: 'wsk-layout__header--waterfall',
|
||||
HEADER_SCROLL: 'wsk-layout__header--scroll',
|
||||
HEADER_SEAMED: 'mdl-layout__header--seamed',
|
||||
HEADER_WATERFALL: 'mdl-layout__header--waterfall',
|
||||
HEADER_SCROLL: 'mdl-layout__header--scroll',
|
||||
|
||||
FIXED_HEADER: 'wsk-layout--fixed-header',
|
||||
OBFUSCATOR: 'wsk-layout__obfuscator',
|
||||
FIXED_HEADER: 'mdl-layout--fixed-header',
|
||||
OBFUSCATOR: 'mdl-layout__obfuscator',
|
||||
|
||||
TAB_BAR: 'wsk-layout__tab-bar',
|
||||
TAB_CONTAINER: 'wsk-layout__tab-bar-container',
|
||||
TAB: 'wsk-layout__tab',
|
||||
TAB_BAR_BUTTON: 'wsk-layout__tab-bar-button',
|
||||
TAB_BAR_LEFT_BUTTON: 'wsk-layout__tab-bar-left-button',
|
||||
TAB_BAR_RIGHT_BUTTON: 'wsk-layout__tab-bar-right-button',
|
||||
PANEL: 'wsk-layout__tab-panel',
|
||||
TAB_BAR: 'mdl-layout__tab-bar',
|
||||
TAB_CONTAINER: 'mdl-layout__tab-bar-container',
|
||||
TAB: 'mdl-layout__tab',
|
||||
TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
|
||||
TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
|
||||
TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
|
||||
PANEL: 'mdl-layout__tab-panel',
|
||||
|
||||
HAS_DRAWER_CLASS: 'has-drawer',
|
||||
SHADOW_CLASS: 'is-casting-shadow',
|
||||
@ -181,7 +181,7 @@ MaterialLayout.prototype.init = function() {
|
||||
|
||||
if (this.element_) {
|
||||
var container = document.createElement('div');
|
||||
container.classList.add('wsk-layout__container');
|
||||
container.classList.add('mdl-layout__container');
|
||||
this.element_.parentElement.insertBefore(container, this.element_);
|
||||
this.element_.parentElement.removeChild(this.element_);
|
||||
container.appendChild(this.element_);
|
||||
@ -356,5 +356,5 @@ function MaterialLayoutTab(tab, tabs, panels, layout) {
|
||||
componentHandler.register({
|
||||
constructor: MaterialLayout,
|
||||
classAsString: 'MaterialLayout',
|
||||
cssClass: 'wsk-js-layout'
|
||||
cssClass: 'mdl-js-layout'
|
||||
});
|
||||
|
||||
@ -32,7 +32,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
3. Add the MDL class to the list using the `class` attribute.
|
||||
```html
|
||||
<ul class="wsk-list--inline">
|
||||
<ul class="mdl-list--inline">
|
||||
<li>Item1</li>
|
||||
<li>Item2</li>
|
||||
<li>Item3</li>
|
||||
@ -47,7 +47,7 @@ The inline list component is ready for use.
|
||||
A simple inline list.
|
||||
|
||||
```html
|
||||
<ul class="wsk-list--inline">
|
||||
<ul class="mdl-list--inline">
|
||||
<li>Aardvarks</li>
|
||||
<li>Butterflies</li>
|
||||
<li>Canaries</li>
|
||||
@ -59,7 +59,7 @@ An inline list with links.
|
||||
|
||||
```html
|
||||
<p>Australian animals that might kill you include:</p>
|
||||
<ul class="wsk-list--inline">
|
||||
<ul class="mdl-list--inline">
|
||||
<li><a href="http://www.australiananimals.com/jellies">Box jellyfish</a></li>
|
||||
<li><a href="http://www.australiananimals.com/spiders">Spiders</a></li>
|
||||
<li><a href="http://www.australiananimals.com/snakes">Snakes</a></li>
|
||||
@ -113,23 +113,23 @@ An inline list with links.
|
||||
```
|
||||
3. Add MDL classes to the div and the spans using the `class` attribute.
|
||||
```html
|
||||
<div class="wsk-list--styled-view">
|
||||
<div class="mdl-list--styled-view">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Item1</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Item1</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Item2</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Item2</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Item3</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Item3</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Item4</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Item4</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -142,23 +142,23 @@ The styled-view list component is ready for use.
|
||||
A styled-view list of people's names, with default "avatar" images.
|
||||
|
||||
```html
|
||||
<div class="wsk-list--styled-view">
|
||||
<div class="mdl-list--styled-view">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Allen Anderson</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Allen Anderson</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Barbara Barnes</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Barbara Barnes</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Charlie Connors</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Charlie Connors</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Darlene Davis</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Darlene Davis</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -167,24 +167,24 @@ A styled-view list of people's names, with default "avatar" images.
|
||||
A styled-view list with custom images.
|
||||
|
||||
```html
|
||||
<div class="wsk-list--styled-view">
|
||||
<div class="mdl-list--styled-view">
|
||||
<p>Australian animals that can kill you include:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span><img src="jellies.png" style="height:50px; width:50px; margin:10px 15px;" /></span>
|
||||
<span class="wsk-list-view--name">Box jellyfish</span>
|
||||
<span class="mdl-list-view--name">Box jellyfish</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><img src="spiders.png" style="height:50px; width:50px; margin:10px 15px;" /></span>
|
||||
<span class="wsk-list-view--name">Spiders</span>
|
||||
<span class="mdl-list-view--name">Spiders</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><img src="snakes.png" style="height:50px; width:50px; margin:10px 15px;" /></span>
|
||||
<span class="wsk-list-view--name">Snakes</span>
|
||||
<span class="mdl-list-view--name">Snakes</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><img src="salties.png" style="height:50px; width:50px; margin:10px 15px;" /></span>
|
||||
<span class="wsk-list-view--name">Saltwater crocodiles</span>
|
||||
<span class="mdl-list-view--name">Saltwater crocodiles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -195,10 +195,10 @@ The MDL CSS classes apply various predefined visual enhancements to the list. Th
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-list--inline` | Defines list as an MDL inline list | Required on ul element |
|
||||
| `wsk-list--styled-view` | Defines div as an MDL styled-view list container | Required on div element|
|
||||
| `wsk-list-view--avatar` | Defines span as an MDL *avatar* image | Required on the first of two span elements for default styled-view list; omit if using custom images |
|
||||
| `wsk-list-view--name` | Defines span as an MDL styled-list text item | Required on the second of two span elements |
|
||||
| `mdl-list--inline` | Defines list as an MDL inline list | Required on ul element |
|
||||
| `mdl-list--styled-view` | Defines div as an MDL styled-view list container | Required on div element|
|
||||
| `mdl-list-view--avatar` | Defines span as an MDL *avatar* image | Required on the first of two span elements for default styled-view list; omit if using custom images |
|
||||
| `mdl-list-view--name` | Defines span as an MDL styled-list text item | Required on the second of two span elements |
|
||||
|
||||
##More information
|
||||
For working examples of the **list** component, see the MDL [list demo page](www.github.com/google/material-design-lite/src/lists/demo.html).
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-list {
|
||||
.mdl-list {
|
||||
display : block;
|
||||
height : $list-container-height;
|
||||
overflow: scroll;
|
||||
width : $list-container-width;
|
||||
}
|
||||
|
||||
.wsk-list--styled-view {
|
||||
.mdl-list--styled-view {
|
||||
background: $list-container-view-background;
|
||||
transition: background 0.3s 0.1s;
|
||||
z-index : 1;
|
||||
}
|
||||
|
||||
.wsk-list--styled-view ul {
|
||||
.mdl-list--styled-view ul {
|
||||
display : inline;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.wsk-list--styled-view li {
|
||||
.mdl-list--styled-view li {
|
||||
border-bottom: 1px solid $list-container-item-border-color;
|
||||
height : $list-container-item-height;
|
||||
left : 0;
|
||||
right : 0;
|
||||
}
|
||||
|
||||
.wsk-list--styled-view li:hover {
|
||||
.mdl-list--styled-view li:hover {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.wsk-list-view--name {
|
||||
.mdl-list-view--name {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.wsk-list-view--avatar {
|
||||
.mdl-list-view--avatar {
|
||||
background: $list-container-item-border-color;
|
||||
border-radius : 50%;
|
||||
content : '';
|
||||
@ -45,13 +45,13 @@
|
||||
width : 50px;
|
||||
}
|
||||
|
||||
.wsk-list--inline {
|
||||
.mdl-list--inline {
|
||||
list-style : none;
|
||||
margin-left : -5px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.wsk-list--inline > li {
|
||||
.mdl-list--inline > li {
|
||||
display : inline-block;
|
||||
padding-left : 5px;
|
||||
padding-right: 5px;
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<li>Item 5</li>
|
||||
</ul>
|
||||
<h3>Inlined</h3>
|
||||
<ul class="wsk-list--inline">
|
||||
<ul class="mdl-list--inline">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
@ -47,48 +47,48 @@
|
||||
|
||||
<p>
|
||||
<div class="List">
|
||||
<p class="wsk-typography-Body-2">Contacts</p>
|
||||
<div class="wsk-list--styled-view">
|
||||
<p class="mdl-typography-Body-2">Contacts</p>
|
||||
<div class="mdl-list--styled-view">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Ali Connors</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Ali Connors</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Sandra Williams</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Sandra Williams</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Trevor Hansen</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Trevor Hansen</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Britta Holt</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Britta Holt</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">David Park</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">David Park</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Jennifer Adams</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Jennifer Adams</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Frank Connors</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Frank Connors</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Sandra Williams</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Sandra Williams</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Scott Michaels</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Scott Michaels</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="wsk-list-view--avatar"></span>
|
||||
<span class="wsk-list-view--name">Matt Connors</span>
|
||||
<span class="mdl-list-view--avatar"></span>
|
||||
<span class="mdl-list-view--name">Matt Connors</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../material-design-lite";
|
||||
|
||||
.demo-page--list .wsk-list-view--avatar {
|
||||
.demo-page--list .mdl-list-view--avatar {
|
||||
background: url("../demo-images/avatar.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
@ -25,10 +25,10 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
3. Add one or more MDL classes, separated by spaces, to the unordered list and the buttons using the `class` attribute.
|
||||
```html
|
||||
<ul class="wsk-dropdown-menu">
|
||||
<button class="wsk-item">Continue</button>
|
||||
<button class="wsk-item">Stop</button>
|
||||
<button class="wsk-item">Pause</button>
|
||||
<ul class="mdl-dropdown-menu">
|
||||
<button class="mdl-item">Continue</button>
|
||||
<button class="mdl-item">Stop</button>
|
||||
<button class="mdl-item">Pause</button>
|
||||
</ul>
|
||||
```
|
||||
|
||||
@ -38,10 +38,10 @@ The menu component is ready for use.
|
||||
A menu with three options, with ripple effect on option links.
|
||||
|
||||
```html
|
||||
<ul class="wsk-menu">
|
||||
<button class="wsk-menu__item wsk-js-ripple-effect">Fast</button>
|
||||
<button class="wsk-menu__item wsk-js-ripple-effect">Medium</button>
|
||||
<button class="wsk-menu__item wsk-js-ripple-effect">Slow</button>
|
||||
<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>
|
||||
</ul>
|
||||
```
|
||||
|
||||
@ -50,11 +50,11 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-menu` | Defines an unordered list container as an MDL component | Required on ul element |
|
||||
| `wsk-menu__item` | Defines buttons as MDL menu options and assigns basic MDL behavior | Required on button elements |
|
||||
| `wsk-js-ripple-effect` | Applies *ripple* click effect to option links | Optional; goes on button elements |
|
||||
| `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 |
|
||||
|
||||
>**Note:** Disabled versions of the menu buttons are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="wsk-menu__item" disabled>Medium</button>`
|
||||
>**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>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
##More information
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-menu__container {
|
||||
.mdl-menu__container {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -11,7 +11,7 @@
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.wsk-menu__outline {
|
||||
.mdl-menu__outline {
|
||||
display: block;
|
||||
background: $default-dropdown-bg-color;
|
||||
margin: 0;
|
||||
@ -30,25 +30,25 @@
|
||||
transition: transform $menu-expand-duration $animation-curve-default,
|
||||
opacity $menu-fade-duration $animation-curve-default;
|
||||
|
||||
.wsk-menu__container.is-visible & {
|
||||
.mdl-menu__container.is-visible & {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&.wsk-menu--bottom-right {
|
||||
&.mdl-menu--bottom-right {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
&.wsk-menu--top-left {
|
||||
&.mdl-menu--top-left {
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
&.wsk-menu--top-right {
|
||||
&.mdl-menu--top-right {
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-menu {
|
||||
.mdl-menu {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
top: 0;
|
||||
@ -61,7 +61,7 @@
|
||||
opacity: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
|
||||
.wsk-menu__container.is-visible & {
|
||||
.mdl-menu__container.is-visible & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -70,30 +70,30 @@
|
||||
clip $menu-expand-duration $animation-curve-default;
|
||||
}
|
||||
|
||||
&.wsk-menu--bottom-right {
|
||||
&.mdl-menu--bottom-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.wsk-menu--top-left {
|
||||
&.mdl-menu--top-left {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.wsk-menu--top-right {
|
||||
&.mdl-menu--top-right {
|
||||
top: auto;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.wsk-menu--unaligned {
|
||||
&.mdl-menu--unaligned {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-menu__item {
|
||||
.mdl-menu__item {
|
||||
display: block;
|
||||
border: none;
|
||||
color: $default-item-text-color;
|
||||
@ -114,7 +114,7 @@
|
||||
transition: opacity $menu-fade-duration $animation-curve-default;
|
||||
user-select: none;
|
||||
|
||||
.wsk-menu__container.is-visible & {
|
||||
.mdl-menu__container.is-visible & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -135,7 +135,7 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
& .wsk-ripple {
|
||||
& .mdl-ripple {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@ -155,7 +155,7 @@
|
||||
}
|
||||
|
||||
|
||||
.wsk-menu__item--ripple-container {
|
||||
.mdl-menu__item--ripple-container {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
|
||||
@ -16,53 +16,53 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<button id="clickable1" class="demo-menu-button-left wsk-button wsk-js-button wsk-button--icon">
|
||||
<span class="wsk-icon wsk-icon--more-vert"/>
|
||||
<button id="clickable1" class="demo-menu-button-left mdl-button mdl-js-button mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"/>
|
||||
</button>
|
||||
|
||||
<ul class="wsk-menu wsk-js-menu wsk-js-ripple-effect" for="clickable1">
|
||||
<li class="wsk-menu__item">5.0 Lollipop</li>
|
||||
<li class="wsk-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="wsk-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="wsk-menu__item">Android History</li>
|
||||
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1">
|
||||
<li class="mdl-menu__item">5.0 Lollipop</li>
|
||||
<li class="mdl-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="mdl-menu__item">Android History</li>
|
||||
</ul>
|
||||
|
||||
<button id="clickable2" class="demo-menu-button-left2 wsk-button wsk-js-button wsk-button--icon">
|
||||
<span class="wsk-icon wsk-icon--more-vert"/>
|
||||
<button id="clickable2" class="demo-menu-button-left2 mdl-button mdl-js-button mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"/>
|
||||
</button>
|
||||
|
||||
<ul class="wsk-menu wsk-menu--top-left wsk-js-menu wsk-js-ripple-effect" for="clickable2">
|
||||
<li class="wsk-menu__item">5.0 Lollipop</li>
|
||||
<li class="wsk-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="wsk-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="wsk-menu__item">Android History</li>
|
||||
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="clickable2">
|
||||
<li class="mdl-menu__item">5.0 Lollipop</li>
|
||||
<li class="mdl-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="mdl-menu__item">Android History</li>
|
||||
</ul>
|
||||
|
||||
<button id="clickable3" class="demo-menu-button-right2 wsk-button wsk-js-button wsk-button--icon">
|
||||
<span class="wsk-icon wsk-icon--more-vert"/>
|
||||
<button id="clickable3" class="demo-menu-button-right2 mdl-button mdl-js-button mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"/>
|
||||
</button>
|
||||
|
||||
<ul class="wsk-menu wsk-menu--bottom-right wsk-js-menu wsk-js-ripple-effect" for="clickable3">
|
||||
<li class="wsk-menu__item">5.0 Lollipop</li>
|
||||
<li class="wsk-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="wsk-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="wsk-menu__item">Android History</li>
|
||||
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="clickable3">
|
||||
<li class="mdl-menu__item">5.0 Lollipop</li>
|
||||
<li class="mdl-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="mdl-menu__item">Android History</li>
|
||||
</ul>
|
||||
|
||||
<button id="clickable4" class="demo-menu-button-right wsk-button wsk-js-button wsk-button--icon">
|
||||
<span class="wsk-icon wsk-icon--more-vert"/>
|
||||
<button id="clickable4" class="demo-menu-button-right mdl-button mdl-js-button mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"/>
|
||||
</button>
|
||||
|
||||
<ul class="wsk-menu wsk-menu--top-right wsk-js-menu wsk-js-ripple-effect" for="clickable4">
|
||||
<li class="wsk-menu__item">5.0 Lollipop</li>
|
||||
<li class="wsk-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="wsk-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="wsk-menu__item">Android History</li>
|
||||
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" for="clickable4">
|
||||
<li class="mdl-menu__item">5.0 Lollipop</li>
|
||||
<li class="mdl-menu__item">4.4 KitKat</li>
|
||||
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
|
||||
<li class="mdl-menu__item">Android History</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/dropdown-menu/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="menu.js"></script>
|
||||
<script src="../button/button.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for dropdown WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialMenu(element) {
|
||||
@ -49,23 +49,23 @@ MaterialMenu.prototype.Keycodes_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialMenu.prototype.CssClasses_ = {
|
||||
CONTAINER: 'wsk-menu__container',
|
||||
OUTLINE: 'wsk-menu__outline',
|
||||
ITEM: 'wsk-menu__item',
|
||||
ITEM_RIPPLE_CONTAINER: 'wsk-menu__item-ripple-container',
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
CONTAINER: 'mdl-menu__container',
|
||||
OUTLINE: 'mdl-menu__outline',
|
||||
ITEM: 'mdl-menu__item',
|
||||
ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
// Statuses
|
||||
IS_UPGRADED: 'is-upgraded',
|
||||
IS_VISIBLE: 'is-visible',
|
||||
IS_ANIMATING: 'is-animating',
|
||||
// Alignment options
|
||||
BOTTOM_LEFT: 'wsk-menu--bottom-left', // This is the default.
|
||||
BOTTOM_RIGHT: 'wsk-menu--bottom-right',
|
||||
TOP_LEFT: 'wsk-menu--top-left',
|
||||
TOP_RIGHT: 'wsk-menu--top-right',
|
||||
UNALIGNED: 'wsk-menu--unaligned'
|
||||
BOTTOM_LEFT: 'mdl-menu--bottom-left', // This is the default.
|
||||
BOTTOM_RIGHT: 'mdl-menu--bottom-right',
|
||||
TOP_LEFT: 'mdl-menu--top-left',
|
||||
TOP_RIGHT: 'mdl-menu--top-right',
|
||||
UNALIGNED: 'mdl-menu--unaligned'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -444,5 +444,5 @@ MaterialMenu.prototype.toggle = function(evt) {
|
||||
componentHandler.register({
|
||||
constructor: MaterialMenu,
|
||||
classAsString: 'MaterialMenu',
|
||||
cssClass: 'wsk-js-menu'
|
||||
cssClass: 'mdl-js-menu'
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,12 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-js-progress {
|
||||
.mdl-js-progress {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: $bar-height;
|
||||
}
|
||||
|
||||
.wsk-js-progress > .bar {
|
||||
.mdl-js-progress > .bar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -15,37 +15,37 @@
|
||||
transition: width 0.2s $animation-curve-default;
|
||||
}
|
||||
|
||||
.wsk-js-progress > .progressbar {
|
||||
.mdl-js-progress > .progressbar {
|
||||
background-color: $progress-main-color;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.wsk-js-progress > .bufferbar {
|
||||
.mdl-js-progress > .bufferbar {
|
||||
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
|
||||
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.wsk-js-progress > .auxbar {
|
||||
.mdl-js-progress > .auxbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Webkit only
|
||||
@supports (-webkit-appearance:none) {
|
||||
.wsk-js-progress:not(.wsk-progress__indeterminate) > .auxbar {
|
||||
.mdl-js-progress:not(.mdl-progress__indeterminate) > .auxbar {
|
||||
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
|
||||
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
||||
mask: url('../images/buffer.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-js-progress:not(.wsk-progress__indeterminate) > .auxbar {
|
||||
.mdl-js-progress:not(.mdl-progress__indeterminate) > .auxbar {
|
||||
background-color: $progress-fallback-buffer-color;
|
||||
}
|
||||
|
||||
.wsk-js-progress.wsk-progress__indeterminate > .bar1 {
|
||||
.mdl-js-progress.mdl-progress__indeterminate > .bar1 {
|
||||
background-color: $progress-main-color;
|
||||
animation-name: indeterminate1;
|
||||
animation-duration: 2s;
|
||||
@ -53,7 +53,7 @@
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.wsk-js-progress.wsk-progress__indeterminate > .bar3 {
|
||||
.mdl-js-progress.mdl-progress__indeterminate > .bar3 {
|
||||
background-image: none;
|
||||
background-color: $progress-main-color;
|
||||
animation-name: indeterminate2;
|
||||
|
||||
@ -17,21 +17,21 @@
|
||||
|
||||
<p>
|
||||
Default:
|
||||
<div id="p1" class="wsk-js-progress"></div>
|
||||
<div id="p1" class="mdl-js-progress"></div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Indeterminate:
|
||||
<div id="p2" class="wsk-js-progress wsk-progress__indeterminate"></div>
|
||||
<div id="p2" class="mdl-js-progress mdl-progress__indeterminate"></div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Buffering:
|
||||
<div id="p3" class="wsk-js-progress"></div>
|
||||
<div id="p3" class="mdl-js-progress"></div>
|
||||
</p>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/progress/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="progress.js"></script>
|
||||
<script>
|
||||
// FIXME: What IS the recommended way to wait for the upgrade to be done?
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Progress WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialProgress(element) {
|
||||
@ -29,7 +29,7 @@ MaterialProgress.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialProgress.prototype.CssClasses_ = {
|
||||
INDETERMINATE_CLASS: 'wsk-progress__indeterminate'
|
||||
INDETERMINATE_CLASS: 'mdl-progress__indeterminate'
|
||||
};
|
||||
|
||||
MaterialProgress.prototype.setProgress = function(p) {
|
||||
@ -84,5 +84,5 @@ MaterialProgress.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialProgress,
|
||||
classAsString: 'MaterialProgress',
|
||||
cssClass: 'wsk-js-progress'
|
||||
cssClass: 'mdl-js-progress'
|
||||
});
|
||||
|
||||
@ -33,9 +33,9 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the `class` attribute.
|
||||
```html
|
||||
<label for="radio1" class="wsk-radio wsk-js-radio">
|
||||
<input type="radio" id="radio1" name="flash" value="on" class="wsk-radio__button" />
|
||||
<span class="wsk-radio__label">Always on</span>
|
||||
<label for="radio1" class="mdl-radio mdl-js-radio">
|
||||
<input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button" />
|
||||
<span class="mdl-radio__label">Always on</span>
|
||||
</label>
|
||||
```
|
||||
5. Repeat steps 1 through 4 for the other radio components in the group. For each one:
|
||||
@ -49,17 +49,17 @@ The radio components are ready for use.
|
||||
####Example
|
||||
A group of radio buttons to control a camera's flash setting.
|
||||
```html
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="flash1">
|
||||
<input checked class="wsk-radio__button" id="flash1" name="flash" type="radio" value="on">
|
||||
<span class="wsk-radio__label">Always on</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash1">
|
||||
<input checked class="mdl-radio__button" id="flash1" name="flash" type="radio" value="on">
|
||||
<span class="mdl-radio__label">Always on</span>
|
||||
</label>
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="flash2">
|
||||
<input class="wsk-radio__button" id="flash2" name="flash" type="radio" value="off">
|
||||
<span class="wsk-radio__label">Always off</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash2">
|
||||
<input class="mdl-radio__button" id="flash2" name="flash" type="radio" value="off">
|
||||
<span class="mdl-radio__label">Always off</span>
|
||||
</label>
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="flash3">
|
||||
<input class="wsk-radio__button" id="flash3" name="flash" type="radio" value="auto">
|
||||
<span class="wsk-radio__label">Automatic</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash3">
|
||||
<input class="mdl-radio__button" id="flash3" name="flash" type="radio" value="auto">
|
||||
<span class="mdl-radio__label">Automatic</span>
|
||||
</label>
|
||||
```
|
||||
##Configuration options
|
||||
@ -67,13 +67,13 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-radio` | Defines label as an MDL component | Required on label element|
|
||||
| `wsk-js-radio` | Assigns basic MDL behavior to label | Required on label element |
|
||||
| `wsk-radio__button` | Applies basic MDL behavior to radio | Required on input element (radio button) |
|
||||
| `wsk-radio__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `wsk-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (radio button) |
|
||||
| `mdl-radio` | Defines label as an MDL component | Required on label element|
|
||||
| `mdl-js-radio` | Assigns basic MDL behavior to label | Required on label element |
|
||||
| `mdl-radio__button` | Applies basic MDL behavior to radio | Required on input element (radio button) |
|
||||
| `mdl-radio__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (radio button) |
|
||||
|
||||
>**Note:** Disabled versions of all the available radio button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="radio" id="radio5" name="flash" class="wsk-radio__button" disabled />`
|
||||
>**Note:** Disabled versions of all the available radio button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled />`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
##More information
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-radio {
|
||||
.mdl-radio {
|
||||
position: relative;
|
||||
|
||||
font-size: 16px;
|
||||
@ -18,10 +18,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-radio__button {
|
||||
.mdl-radio__button {
|
||||
line-height: $radio-label-height;
|
||||
|
||||
.wsk-radio.is-upgraded & {
|
||||
.mdl-radio.is-upgraded & {
|
||||
// Hide input element, while still making it respond to focus.
|
||||
position: absolute;
|
||||
width: 0;
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-radio__outer-circle {
|
||||
.mdl-radio__outer-circle {
|
||||
position: absolute;
|
||||
top: $radio-top-offset;
|
||||
left: 0;
|
||||
@ -56,17 +56,17 @@
|
||||
|
||||
z-index: 2;
|
||||
|
||||
.wsk-radio.is-checked & {
|
||||
.mdl-radio.is-checked & {
|
||||
border: 2px solid $radio-color;
|
||||
}
|
||||
|
||||
.wsk-radio.is-disabled & {
|
||||
.mdl-radio.is-disabled & {
|
||||
border: 2px solid $radio-disabled-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-radio__inner-circle {
|
||||
.mdl-radio__inner-circle {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
@ -86,30 +86,30 @@
|
||||
border-radius: 50%;
|
||||
background: $radio-color;
|
||||
|
||||
.wsk-radio.is-checked & {
|
||||
.mdl-radio.is-checked & {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.wsk-radio.is-disabled & {
|
||||
.mdl-radio.is-disabled & {
|
||||
background: $radio-disabled-color;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.wsk-radio.is-focused & {
|
||||
.mdl-radio.is-focused & {
|
||||
box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-radio__label {
|
||||
.mdl-radio__label {
|
||||
cursor: pointer;
|
||||
|
||||
.wsk-radio.is-disabled & {
|
||||
.mdl-radio.is-disabled & {
|
||||
color: $radio-disabled-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-radio__ripple-container {
|
||||
.mdl-radio__ripple-container {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -(($radio-ripple-size - $radio-label-height) / 2);
|
||||
@ -125,15 +125,15 @@
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
|
||||
& .wsk-ripple {
|
||||
& .mdl-ripple {
|
||||
background: $radio-color;
|
||||
}
|
||||
|
||||
.wsk-radio.is-disabled & {
|
||||
.mdl-radio.is-disabled & {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.wsk-radio.is-disabled & .wsk-ripple {
|
||||
.mdl-radio.is-disabled & .mdl-ripple {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,28 +16,28 @@
|
||||
<p>A radio button can either be a primary action or a secondary action.</p>
|
||||
|
||||
<section class="demo-preview-block">
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi1">
|
||||
<input type="radio" id="wifi1" class="wsk-radio__button" name="wifi[]" value="1" checked />
|
||||
<span class="wsk-radio__label">Always</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
|
||||
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked />
|
||||
<span class="mdl-radio__label">Always</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi2">
|
||||
<input type="radio" id="wifi2" class="wsk-radio__button" name="wifi[]" value="2" />
|
||||
<span class="wsk-radio__label">Only when plugged in</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
|
||||
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2" />
|
||||
<span class="mdl-radio__label">Only when plugged in</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi3">
|
||||
<input type="radio" id="wifi3" class="wsk-radio__button" name="wifi[]" value="3" />
|
||||
<span class="wsk-radio__label">Never</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
|
||||
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3" />
|
||||
<span class="mdl-radio__label">Never</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-radio wsk-js-radio wsk-js-ripple-effect" for="wifi4">
|
||||
<input type="radio" id="wifi4" class="wsk-radio__button" name="wifi[]" value="3" disabled />
|
||||
<span class="wsk-radio__label">Unavailable option</span>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
|
||||
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled />
|
||||
<span class="mdl-radio__label">Unavailable option</span>
|
||||
</label>
|
||||
</section>
|
||||
<!-- build:js(app/styleguide/radio/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="radio.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Radio WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialRadio(element) {
|
||||
@ -34,15 +34,15 @@ MaterialRadio.prototype.CssClasses_ = {
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked',
|
||||
IS_UPGRADED: 'is-upgraded',
|
||||
JS_RADIO: 'wsk-js-radio',
|
||||
RADIO_BTN: 'wsk-radio__button',
|
||||
RADIO_OUTER_CIRCLE: 'wsk-radio__outer-circle',
|
||||
RADIO_INNER_CIRCLE: 'wsk-radio__inner-circle',
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'wsk-radio__ripple-container',
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE: 'wsk-ripple'
|
||||
JS_RADIO: 'mdl-js-radio',
|
||||
RADIO_BTN: 'mdl-radio__button',
|
||||
RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
|
||||
RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -235,5 +235,5 @@ MaterialRadio.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialRadio,
|
||||
classAsString: 'MaterialRadio',
|
||||
cssClass: 'wsk-js-radio'
|
||||
cssClass: 'mdl-js-radio'
|
||||
});
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
/* Remove the unwanted box around FAB buttons */
|
||||
/* More info: http://goo.gl/IPwKi */
|
||||
a, .wsk-accordion, .wsk-button, .wsk-card, .wsk-checkbox, .wsk-dropdown-menu,
|
||||
.wsk-icon-toggle, .wsk-item, .wsk-radio, .wsk-slider, .wsk-switch, .wsk-tabs__tab {
|
||||
a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
||||
.mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-ripple {
|
||||
.mdl-ripple {
|
||||
background : $ripple-bg-color;
|
||||
border-radius : 50%;
|
||||
height : 50px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Ripple WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialRipple(element) {
|
||||
@ -34,9 +34,9 @@ MaterialRipple.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialRipple.prototype.CssClasses_ = {
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE_EFFECT_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_ANIMATING: 'is-animating',
|
||||
IS_VISIBLE: 'is-visible'
|
||||
};
|
||||
@ -201,5 +201,5 @@ MaterialRipple.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialRipple,
|
||||
classAsString: 'MaterialRipple',
|
||||
cssClass: 'wsk-js-ripple-effect'
|
||||
cssClass: 'mdl-js-ripple-effect'
|
||||
});
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-shadow--z1 {
|
||||
.mdl-shadow--z1 {
|
||||
@include shadow-z1();
|
||||
}
|
||||
|
||||
.wsk-shadow--z2 {
|
||||
.mdl-shadow--z2 {
|
||||
@include shadow-z2();
|
||||
}
|
||||
|
||||
.wsk-shadow--z3 {
|
||||
.mdl-shadow--z3 {
|
||||
@include shadow-z3();
|
||||
}
|
||||
|
||||
.wsk-shadow--z4 {
|
||||
.mdl-shadow--z4 {
|
||||
@include shadow-z4();
|
||||
}
|
||||
|
||||
.wsk-shadow--z5 {
|
||||
.mdl-shadow--z5 {
|
||||
@include shadow-z5();
|
||||
}
|
||||
|
||||
@ -16,15 +16,15 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<div class="demo-shadow-card wsk-shadow--z1"></div>
|
||||
<div class="demo-shadow-card mdl-shadow--z1"></div>
|
||||
|
||||
<div class="demo-shadow-card wsk-shadow--z2"></div>
|
||||
<div class="demo-shadow-card mdl-shadow--z2"></div>
|
||||
|
||||
<div class="demo-shadow-card wsk-shadow--z3"></div>
|
||||
<div class="demo-shadow-card mdl-shadow--z3"></div>
|
||||
|
||||
<div class="demo-shadow-card wsk-shadow--z4"></div>
|
||||
<div class="demo-shadow-card mdl-shadow--z4"></div>
|
||||
|
||||
<div class="demo-shadow-card wsk-shadow--z5"></div>
|
||||
<div class="demo-shadow-card mdl-shadow--z5"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
3. Add one or more MDL classes, separated by spaces, to the slider using the `class` attribute.
|
||||
```html
|
||||
<p style="width:300px">
|
||||
<input class="wsk-slider wsk-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" />
|
||||
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" />
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -37,7 +37,7 @@ The slider component is ready for use.
|
||||
A slider that controls volume.
|
||||
```html
|
||||
<p style="width:300px">
|
||||
<input class="wsk-slider wsk-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" />
|
||||
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" />
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -46,10 +46,10 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-slider` | Defines input element as an MDL component | Required |
|
||||
| `wsk-js-slider` | Assigns basic MDL behavior to input element | Required |
|
||||
| `mdl-slider` | Defines input element as an MDL component | Required |
|
||||
| `mdl-js-slider` | Assigns basic MDL behavior to input element | Required |
|
||||
|
||||
>**Note:** A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute `disabled`. `<input class="wsk-slider wsk-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled />`
|
||||
>**Note:** A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled />`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
##More information
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../variables";
|
||||
|
||||
// Some CSS magic to target only IE.
|
||||
_:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
_:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
|
||||
-ms-appearance: none;
|
||||
// The thumb can't overflow the track or the rest of the control in IE, so we
|
||||
// need to make it tall enough to contain the largest version of the thumb.
|
||||
@ -10,7 +10,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
}
|
||||
|
||||
// Slider component (styled input[type=range]).
|
||||
.wsk-slider {
|
||||
.mdl-slider {
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 20px;
|
||||
|
||||
@ -168,7 +168,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
}
|
||||
|
||||
&.is-lowest-value ~
|
||||
.wsk-slider__background-flex > .wsk-slider__background-upper {
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
@ -185,7 +185,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
}
|
||||
|
||||
&.is-lowest-value:focus:not(:active) ~
|
||||
.wsk-slider__background-flex > .wsk-slider__background-upper {
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
@ -195,7 +195,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
}
|
||||
|
||||
&.is-lowest-value:active ~
|
||||
.wsk-slider__background-flex > .wsk-slider__background-upper {
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
@ -263,13 +263,13 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
}
|
||||
|
||||
&:disabled ~
|
||||
.wsk-slider__background-flex > .wsk-slider__background-lower {
|
||||
.mdl-slider__background-flex > .mdl-slider__background-lower {
|
||||
background-color: $range-bg-color;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
&:disabled ~
|
||||
.wsk-slider__background-flex > .wsk-slider__background-upper {
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
@ -290,7 +290,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
}
|
||||
|
||||
&.is-lowest-value:disabled:active ~
|
||||
.wsk-slider__background-flex > .wsk-slider__background-upper {
|
||||
.mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
@ -333,7 +333,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
|
||||
// Since we need to specify a height of 32px in IE, we add a class here for a
|
||||
// container that brings it back to a reasonable height.
|
||||
.wsk-slider__ie-container {
|
||||
.mdl-slider__ie-container {
|
||||
height: 18px;
|
||||
overflow: visible;
|
||||
border: none;
|
||||
@ -343,7 +343,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
|
||||
// We use a set of divs behind the track to style it in all non-IE browsers.
|
||||
// This one contains both the background and the slider.
|
||||
.wsk-slider__container {
|
||||
.mdl-slider__container {
|
||||
height: 18px;
|
||||
position: relative;
|
||||
background: none;
|
||||
@ -353,7 +353,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
|
||||
// This one sets up a flex box for the styled upper and lower portions of the
|
||||
// the slider track.
|
||||
.wsk-slider__background-flex {
|
||||
.mdl-slider__background-flex {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
@ -370,7 +370,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
}
|
||||
|
||||
// This one styles the lower part of the slider track.
|
||||
.wsk-slider__background-lower {
|
||||
.mdl-slider__background-lower {
|
||||
background: $range-color;
|
||||
flex: 0;
|
||||
position: relative;
|
||||
@ -379,7 +379,7 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
}
|
||||
|
||||
// This one styles the upper part of the slider track.
|
||||
.wsk-slider__background-upper {
|
||||
.mdl-slider__background-upper {
|
||||
background: $range-bg-color;
|
||||
flex: 0;
|
||||
position: relative;
|
||||
@ -390,6 +390,6 @@ _:-ms-input-placeholder, :root .wsk-slider.wsk-slider.is-upgraded {
|
||||
|
||||
// Some CSS magic to disable track animations in Firefox, since the thumb
|
||||
// doesn't animate.
|
||||
_:-moz-tree-row(hover), .wsk-slider__background-upper {
|
||||
_:-moz-tree-row(hover), .mdl-slider__background-upper {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@ -15,24 +15,24 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
<p>
|
||||
<input class="wsk-slider wsk-js-slider" type="range"
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="0" tabindex="0"/>
|
||||
</p>
|
||||
<p>
|
||||
<input class="wsk-slider wsk-js-slider" type="range"
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="10" tabindex="0"/>
|
||||
</p>
|
||||
<p>
|
||||
<input class="wsk-slider wsk-js-slider" type="range"
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="0" tabindex="0" disabled/>
|
||||
</p>
|
||||
<p>
|
||||
<input class="wsk-slider wsk-js-slider" type="range"
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="10" tabindex="0" disabled/>
|
||||
</p>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/slider/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="slider.js"></script>
|
||||
<!-- end build -->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Slider WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialSlider(element) {
|
||||
@ -31,11 +31,11 @@ MaterialSlider.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialSlider.prototype.CssClasses_ = {
|
||||
IE_CONTAINER: 'wsk-slider__ie-container',
|
||||
SLIDER_CONTAINER: 'wsk-slider__container',
|
||||
BACKGROUND_FLEX: 'wsk-slider__background-flex',
|
||||
BACKGROUND_LOWER: 'wsk-slider__background-lower',
|
||||
BACKGROUND_UPPER: 'wsk-slider__background-upper',
|
||||
IE_CONTAINER: 'mdl-slider__ie-container',
|
||||
SLIDER_CONTAINER: 'mdl-slider__container',
|
||||
BACKGROUND_FLEX: 'mdl-slider__background-flex',
|
||||
BACKGROUND_LOWER: 'mdl-slider__background-lower',
|
||||
BACKGROUND_UPPER: 'mdl-slider__background-upper',
|
||||
IS_LOWEST_VALUE: 'is-lowest-value',
|
||||
IS_UPGRADED: 'is-upgraded'
|
||||
};
|
||||
@ -185,5 +185,5 @@ MaterialSlider.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialSlider,
|
||||
classAsString: 'MaterialSlider',
|
||||
cssClass: 'wsk-js-slider'
|
||||
cssClass: 'mdl-js-slider'
|
||||
});
|
||||
|
||||
@ -18,7 +18,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
2. Add one or more MDL classes, separated by spaces, to the container using the `class` attribute.
|
||||
```html
|
||||
<div class="wsk-spinner wsk-js-spinner is-active"></div>
|
||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||
```
|
||||
|
||||
The spinner component is ready for use.
|
||||
@ -28,13 +28,13 @@ The spinner component is ready for use.
|
||||
A default spinner in a div.
|
||||
|
||||
```html
|
||||
<div class="wsk-spinner wsk-js-spinner is-active"></div>
|
||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||
```
|
||||
|
||||
A single-color spinner in a paragraph.
|
||||
|
||||
```html
|
||||
<p class="wsk-spinner wsk-js-spinner wsk-spinner--single-color is-active"></p>
|
||||
<p class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active"></p>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
@ -42,12 +42,12 @@ The MDL CSS classes apply various predefined visual enhancements to the spinner.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-spinner` | Defines the container as an MDL spinner component | Required |
|
||||
| `wsk-js-spinner` | Assigns basic MDL behavior to spinner | Required |
|
||||
| `mdl-spinner` | Defines the container as an MDL spinner component | Required |
|
||||
| `mdl-js-spinner` | Assigns basic MDL behavior to spinner | Required |
|
||||
| `is-active` | Makes the spinner visible and animated | Optional |
|
||||
| `wsk-spinner--single-color` | Uses a single (primary palette) color instead of changing colors | Optional
|
||||
| `mdl-spinner--single-color` | Uses a single (primary palette) color instead of changing colors | Optional
|
||||
|
||||
>**Note:** There is no specific *disabled* version of a spinner; the presence or absence of the `is-active` class determines whether the spinner is visible. For example, this spinner is inactive and invisible: `<div class="wsk-spinner wsk-js-spinner"></div>`
|
||||
>**Note:** There is no specific *disabled* version of a spinner; the presence or absence of the `is-active` class determines whether the spinner is visible. For example, this spinner is inactive and invisible: `<div class="mdl-spinner mdl-js-spinner"></div>`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
##More information
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../variables";
|
||||
|
||||
|
||||
.wsk-spinner {
|
||||
.mdl-spinner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $spinner-size;
|
||||
@ -12,86 +12,86 @@
|
||||
}
|
||||
|
||||
&.is-upgraded.is-active {
|
||||
animation: wsk-spinner__container-rotate $spinner-duration linear infinite;
|
||||
animation: mdl-spinner__container-rotate $spinner-duration linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wsk-spinner__container-rotate {
|
||||
@keyframes mdl-spinner__container-rotate {
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
.wsk-spinner__layer {
|
||||
.mdl-spinner__layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wsk-spinner__layer-1 {
|
||||
.mdl-spinner__layer-1 {
|
||||
border-color: $spinner-color-1;
|
||||
|
||||
.wsk-spinner--single-color & {
|
||||
.mdl-spinner--single-color & {
|
||||
border-color: $spinner-single-color;
|
||||
}
|
||||
|
||||
.wsk-spinner.is-active & {
|
||||
.mdl-spinner.is-active & {
|
||||
animation:
|
||||
wsk-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
||||
mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
||||
$animation-curve-fast-out-slow-in infinite both,
|
||||
wsk-spinner__layer-1-fade-in-out (4 * $spinner-arc-time)
|
||||
mdl-spinner__layer-1-fade-in-out (4 * $spinner-arc-time)
|
||||
$animation-curve-fast-out-slow-in infinite both;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-spinner__layer-2 {
|
||||
.mdl-spinner__layer-2 {
|
||||
border-color: $spinner-color-2;
|
||||
|
||||
.wsk-spinner--single-color & {
|
||||
.mdl-spinner--single-color & {
|
||||
border-color: $spinner-single-color;
|
||||
}
|
||||
|
||||
.wsk-spinner.is-active & {
|
||||
.mdl-spinner.is-active & {
|
||||
animation:
|
||||
wsk-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
||||
mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
||||
$animation-curve-fast-out-slow-in infinite both,
|
||||
wsk-spinner__layer-2-fade-in-out (4 * $spinner-arc-time)
|
||||
mdl-spinner__layer-2-fade-in-out (4 * $spinner-arc-time)
|
||||
$animation-curve-fast-out-slow-in infinite both;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-spinner__layer-3 {
|
||||
.mdl-spinner__layer-3 {
|
||||
border-color: $spinner-color-3;
|
||||
|
||||
.wsk-spinner--single-color & {
|
||||
.mdl-spinner--single-color & {
|
||||
border-color: $spinner-single-color;
|
||||
}
|
||||
|
||||
.wsk-spinner.is-active & {
|
||||
.mdl-spinner.is-active & {
|
||||
animation:
|
||||
wsk-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
||||
mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
||||
$animation-curve-fast-out-slow-in infinite both,
|
||||
wsk-spinner__layer-3-fade-in-out (4 * $spinner-arc-time)
|
||||
mdl-spinner__layer-3-fade-in-out (4 * $spinner-arc-time)
|
||||
$animation-curve-fast-out-slow-in infinite both;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-spinner__layer-4 {
|
||||
.mdl-spinner__layer-4 {
|
||||
border-color: $spinner-color-4;
|
||||
|
||||
.wsk-spinner--single-color & {
|
||||
.mdl-spinner--single-color & {
|
||||
border-color: $spinner-single-color;
|
||||
}
|
||||
|
||||
.wsk-spinner.is-active & {
|
||||
.mdl-spinner.is-active & {
|
||||
animation:
|
||||
wsk-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
||||
mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
|
||||
$animation-curve-fast-out-slow-in infinite both,
|
||||
wsk-spinner__layer-4-fade-in-out (4 * $spinner-arc-time)
|
||||
mdl-spinner__layer-4-fade-in-out (4 * $spinner-arc-time)
|
||||
$animation-curve-fast-out-slow-in infinite both;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wsk-spinner__fill-unfill-rotate {
|
||||
@keyframes mdl-spinner__fill-unfill-rotate {
|
||||
12.5% { transform: rotate(0.5 * $spinner-arc-size); }
|
||||
25% { transform: rotate($spinner-arc-size); }
|
||||
37.5% { transform: rotate(1.5 * $spinner-arc-size); }
|
||||
@ -103,7 +103,7 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* HACK: Even though the intention is to have the current .wsk-spinner__layer-N
|
||||
* HACK: Even though the intention is to have the current .mdl-spinner__layer-N
|
||||
* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
|
||||
* to do proper subpixel rendering for the elements being animated. This is
|
||||
* especially visible in Chrome 39 on Ubuntu 14.04. See:
|
||||
@ -111,7 +111,7 @@
|
||||
* - https://github.com/Polymer/paper-spinner/issues/9
|
||||
* - https://code.google.com/p/chromium/issues/detail?id=436255
|
||||
*/
|
||||
@keyframes wsk-spinner__layer-1-fade-in-out {
|
||||
@keyframes mdl-spinner__layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
@ -120,7 +120,7 @@
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@keyframes wsk-spinner__layer-2-fade-in-out {
|
||||
@keyframes mdl-spinner__layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
@ -128,7 +128,7 @@
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes wsk-spinner__layer-3-fade-in-out {
|
||||
@keyframes mdl-spinner__layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
@ -136,7 +136,7 @@
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes wsk-spinner__layer-4-fade-in-out {
|
||||
@keyframes mdl-spinner__layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
@ -146,13 +146,13 @@
|
||||
|
||||
/**
|
||||
* Patch the gap that appear between the two adjacent
|
||||
* div.wsk-spinner__circle-clipper while the spinner is rotating
|
||||
* div.mdl-spinner__circle-clipper while the spinner is rotating
|
||||
* (appears on Chrome 38, Safari 7.1, and IE 11).
|
||||
*
|
||||
* Update: the gap no longer appears on Chrome when .wsk-spinner__layer-N's
|
||||
* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
|
||||
* opacity is 0.99, but still does on Safari and IE.
|
||||
*/
|
||||
.wsk-spinner__gap-patch {
|
||||
.mdl-spinner__gap-patch {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
@ -162,13 +162,13 @@
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
|
||||
& .wsk-spinner__circle {
|
||||
& .mdl-spinner__circle {
|
||||
width: 1000%;
|
||||
left: -450%;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-spinner__circle-clipper {
|
||||
.mdl-spinner__circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
@ -176,12 +176,12 @@
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
|
||||
& .wsk-spinner__circle {
|
||||
& .mdl-spinner__circle {
|
||||
width: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-spinner__circle {
|
||||
.mdl-spinner__circle {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-width: $spinner-stroke-width;
|
||||
@ -197,35 +197,35 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.wsk-spinner__left & {
|
||||
.mdl-spinner__left & {
|
||||
border-right-color: transparent !important;
|
||||
transform: rotate(129deg);
|
||||
|
||||
.wsk-spinner.is-active & {
|
||||
animation: wsk-spinner__left-spin $spinner-arc-time
|
||||
.mdl-spinner.is-active & {
|
||||
animation: mdl-spinner__left-spin $spinner-arc-time
|
||||
$animation-curve-fast-out-slow-in infinite both;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-spinner__right & {
|
||||
.mdl-spinner__right & {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
transform: rotate(-129deg);
|
||||
|
||||
.wsk-spinner.is-active & {
|
||||
animation: wsk-spinner__right-spin $spinner-arc-time
|
||||
.mdl-spinner.is-active & {
|
||||
animation: mdl-spinner__right-spin $spinner-arc-time
|
||||
$animation-curve-fast-out-slow-in infinite both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wsk-spinner__left-spin {
|
||||
@keyframes mdl-spinner__left-spin {
|
||||
from { transform: rotate(130deg); }
|
||||
50% { transform: rotate(-5deg); }
|
||||
to { transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@keyframes wsk-spinner__right-spin {
|
||||
@keyframes mdl-spinner__right-spin {
|
||||
from { transform: rotate(-130deg); }
|
||||
50% { transform: rotate(5deg); }
|
||||
to { transform: rotate(-130deg); }
|
||||
|
||||
@ -17,16 +17,16 @@
|
||||
|
||||
<p>
|
||||
Default:
|
||||
<div class="wsk-spinner wsk-js-spinner is-active"></div>
|
||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||
</p>
|
||||
<p>
|
||||
Single color (uses primary palette):
|
||||
<div class="wsk-spinner wsk-spinner--single-color wsk-js-spinner is-active"></div>
|
||||
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/spinner/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="spinner.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Spinner WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialSpinner(element) {
|
||||
@ -30,12 +30,12 @@ MaterialSpinner.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialSpinner.prototype.CssClasses_ = {
|
||||
WSK_SPINNER_LAYER: 'wsk-spinner__layer',
|
||||
WSK_SPINNER_CIRCLE_CLIPPER: 'wsk-spinner__circle-clipper',
|
||||
WSK_SPINNER_CIRCLE: 'wsk-spinner__circle',
|
||||
WSK_SPINNER_GAP_PATCH: 'wsk-spinner__gap-patch',
|
||||
WSK_SPINNER_LEFT: 'wsk-spinner__left',
|
||||
WSK_SPINNER_RIGHT: 'wsk-spinner__right'
|
||||
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'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -117,5 +117,5 @@ MaterialSpinner.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialSpinner,
|
||||
classAsString: 'MaterialSpinner',
|
||||
cssClass: 'wsk-js-spinner'
|
||||
cssClass: 'mdl-js-spinner'
|
||||
});
|
||||
|
||||
@ -56,7 +56,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-styleguide .wsk-layout__drawer .wsk-navigation__link {
|
||||
.mdl-styleguide .mdl-layout__drawer .mdl-navigation__link {
|
||||
padding: 10px 24px;
|
||||
}
|
||||
|
||||
|
||||
@ -33,9 +33,9 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
4. Add one or more MDL classes, separated by spaces, to the label, switch, and caption using the `class` attribute.
|
||||
```html
|
||||
<label for="switch1" class="wsk-switch wsk-js-switch">
|
||||
<input type="checkbox" id="switch1" class="wsk-switch__input" />
|
||||
<span class="wsk-switch__label">Sound off/on</span>
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch">
|
||||
<input type="checkbox" id="switch1" class="mdl-switch__input" />
|
||||
<span class="mdl-switch__label">Sound off/on</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
@ -46,9 +46,9 @@ The switch component is ready for use.
|
||||
A switch with a ripple click effect.
|
||||
|
||||
```html
|
||||
<label for="switch1" class="wsk-switch wsk-js-switch wsk-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1" class="wsk-switch__input" />
|
||||
<span class="wsk-switch__label">Sound off/on</span>
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1" class="mdl-switch__input" />
|
||||
<span class="mdl-switch__label">Sound off/on</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
@ -57,13 +57,13 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-switch` | Defines label as an MDL component | Required on label element|
|
||||
| `wsk-js-switch` | Assigns basic MDL behavior to label | Required on label element |
|
||||
| `wsk-switch__input` | Applies basic MDL behavior to switch | Required on input element (switch) |
|
||||
| `wsk-switch__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `wsk-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (switch) |
|
||||
| `mdl-switch` | Defines label as an MDL component | Required on label element|
|
||||
| `mdl-js-switch` | Assigns basic MDL behavior to label | Required on label element |
|
||||
| `mdl-switch__input` | Applies basic MDL behavior to switch | Required on input element (switch) |
|
||||
| `mdl-switch__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (switch) |
|
||||
|
||||
>**Note:** Disabled versions of all available switch types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="switch5" class="wsk-switch__input" disabled />`
|
||||
>**Note:** Disabled versions of all available switch types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="switch5" class="mdl-switch__input" disabled />`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
##More information
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
@import "../variables";
|
||||
|
||||
.wsk-switch {
|
||||
.mdl-switch {
|
||||
position: relative;
|
||||
|
||||
z-index: 1;
|
||||
@ -30,10 +30,10 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wsk-switch__input {
|
||||
.mdl-switch__input {
|
||||
line-height: $switch-label-height;
|
||||
|
||||
.wsk-switch.is-upgraded & {
|
||||
.mdl-switch.is-upgraded & {
|
||||
// Hide input element, while still making it respond to focus.
|
||||
position: absolute;
|
||||
width: 0;
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-switch__track {
|
||||
.mdl-switch__track {
|
||||
background: $switch-off-track-color;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -60,17 +60,17 @@
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.wsk-switch.is-checked & {
|
||||
.mdl-switch.is-checked & {
|
||||
background: $switch-track-color;
|
||||
}
|
||||
|
||||
.wsk-switch.is-disabled & {
|
||||
.mdl-switch.is-disabled & {
|
||||
background: $switch-disabled-track-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-switch__thumb {
|
||||
.mdl-switch__thumb {
|
||||
background: $switch-off-thumb-color;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -86,20 +86,20 @@
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: left;
|
||||
|
||||
.wsk-switch.is-checked & {
|
||||
.mdl-switch.is-checked & {
|
||||
background: $switch-thumb-color;
|
||||
left: $switch-track-length - $switch-thumb-size;
|
||||
|
||||
@include shadow-z2();
|
||||
}
|
||||
|
||||
.wsk-switch.is-disabled & {
|
||||
.mdl-switch.is-disabled & {
|
||||
background: $switch-disabled-thumb-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-switch__focus-helper {
|
||||
.mdl-switch__focus-helper {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -115,20 +115,20 @@
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.wsk-switch.is-focused & {
|
||||
.mdl-switch.is-focused & {
|
||||
box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
|
||||
rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wsk-switch.is-focused.is-checked & {
|
||||
.mdl-switch.is-focused.is-checked & {
|
||||
box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
|
||||
$switch-faded-color;
|
||||
background-color: $switch-faded-color;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-switch__label {
|
||||
.mdl-switch__label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
@ -136,13 +136,13 @@
|
||||
margin: 0;
|
||||
left: 24px;
|
||||
|
||||
.wsk-switch.is-disabled & {
|
||||
.mdl-switch.is-disabled & {
|
||||
color: $switch-disabled-thumb-color;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-switch__ripple-container {
|
||||
.mdl-switch__ripple-container {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -($switch-ripple-size - $switch-label-height) / 2;
|
||||
@ -162,19 +162,19 @@
|
||||
transition-timing-function: step-end;
|
||||
transition-property: left;
|
||||
|
||||
& .wsk-ripple {
|
||||
& .mdl-ripple {
|
||||
background: $switch-color;
|
||||
}
|
||||
|
||||
.wsk-switch.is-disabled & {
|
||||
.mdl-switch.is-disabled & {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.wsk-switch.is-disabled & .wsk-ripple {
|
||||
.mdl-switch.is-disabled & .mdl-ripple {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wsk-switch.is-checked & {
|
||||
.mdl-switch.is-checked & {
|
||||
cursor: auto;
|
||||
left: $switch-track-length - $switch-ripple-size / 2 -
|
||||
$switch-thumb-size / 2;
|
||||
|
||||
@ -15,29 +15,29 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<label class="wsk-switch wsk-js-switch wsk-js-ripple-effect" for="switch-1">
|
||||
<input type="checkbox" id="switch-1" class="wsk-switch__input" />
|
||||
<span class="wsk-switch__label">Switch me</span>
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
|
||||
<input type="checkbox" id="switch-1" class="mdl-switch__input" />
|
||||
<span class="mdl-switch__label">Switch me</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-switch wsk-js-switch wsk-js-ripple-effect" for="switch-2">
|
||||
<input type="checkbox" id="switch-2" class="wsk-switch__input" />
|
||||
<span class="wsk-switch__label">Flip me left and right</span>
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
|
||||
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
|
||||
<span class="mdl-switch__label">Flip me left and right</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-switch wsk-js-switch wsk-js-ripple-effect" for="switch-4">
|
||||
<input type="checkbox" id="switch-4" class="wsk-switch__input" />
|
||||
<span class="wsk-switch__label">Me too</span>
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-4">
|
||||
<input type="checkbox" id="switch-4" class="mdl-switch__input" />
|
||||
<span class="mdl-switch__label">Me too</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-switch wsk-js-switch wsk-js-ripple-effect" for="switch-5">
|
||||
<input type="checkbox" id="switch-5" class="wsk-switch__input" disabled />
|
||||
<span class="wsk-switch__label">Can't touch this</span>
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-5">
|
||||
<input type="checkbox" id="switch-5" class="mdl-switch__input" disabled />
|
||||
<span class="mdl-switch__label">Can't touch this</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/switch/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="switch.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Checkbox WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialSwitch(element) {
|
||||
@ -30,15 +30,15 @@ MaterialSwitch.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialSwitch.prototype.CssClasses_ = {
|
||||
INPUT: 'wsk-switch__input',
|
||||
TRACK: 'wsk-switch__track',
|
||||
THUMB: 'wsk-switch__thumb',
|
||||
FOCUS_HELPER: 'wsk-switch__focus-helper',
|
||||
RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'wsk-switch__ripple-container',
|
||||
RIPPLE_CENTER: 'wsk-ripple--center',
|
||||
RIPPLE: 'wsk-ripple',
|
||||
INPUT: 'mdl-switch__input',
|
||||
TRACK: 'mdl-switch__track',
|
||||
THUMB: 'mdl-switch__thumb',
|
||||
FOCUS_HELPER: 'mdl-switch__focus-helper',
|
||||
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
|
||||
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
|
||||
RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
|
||||
RIPPLE_CENTER: 'mdl-ripple--center',
|
||||
RIPPLE: 'mdl-ripple',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
IS_CHECKED: 'is-checked'
|
||||
@ -228,5 +228,5 @@ MaterialSwitch.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialSwitch,
|
||||
classAsString: 'MaterialSwitch',
|
||||
cssClass: 'wsk-js-switch'
|
||||
cssClass: 'mdl-js-switch'
|
||||
});
|
||||
|
||||
@ -72,19 +72,19 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
```
|
||||
5. Add one or more MDL classes, separated by spaces, to the "outer" and "inner" divs using the `class` attribute; be sure to include the `is-active` class on the tab you want to be displayed by default.
|
||||
```html
|
||||
<div class="wsk-tabs wsk-js-tabs">
|
||||
<div class="wsk-tabs__tab-bar">
|
||||
<a href="#tab1" class="wsk-tabs__tab">Tab One</a>
|
||||
<a href="#tab2" class="wsk-tabs__tab">Tab Two</a>
|
||||
<a href="#tab3" class="wsk-tabs__tab">Tab Three</a>
|
||||
<div class="mdl-tabs mdl-js-tabs">
|
||||
<div class="mdl-tabs__tab-bar">
|
||||
<a href="#tab1" class="mdl-tabs__tab">Tab One</a>
|
||||
<a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
|
||||
<a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
|
||||
</div>
|
||||
<div class="wsk-tabs__panel is-active" id="tab1">
|
||||
<div class="mdl-tabs__panel is-active" id="tab1">
|
||||
<p>First tab's content.</p>
|
||||
</div>
|
||||
<div class="wsk-tabs__panel" id="tab2">
|
||||
<div class="mdl-tabs__panel" id="tab2">
|
||||
<p>Second tab's content.</p>
|
||||
</div>
|
||||
<div class="wsk-tabs__panel" id="tab3">
|
||||
<div class="mdl-tabs__panel" id="tab3">
|
||||
<p>Third tab's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -96,17 +96,17 @@ The tab components are ready for use.
|
||||
Three tabs, with ripple effect on tab links.
|
||||
|
||||
```html
|
||||
<div class="wsk-tabs wsk-js-tabs wsk-js-ripple-effect">
|
||||
<div class="wsk-tabs__tab-bar">
|
||||
<a href="#about-panel" class="wsk-tabs__tab is-active">About the Beatles</a>
|
||||
<a href="#members-panel" class="wsk-tabs__tab">Members</a>
|
||||
<a href="#albums-panel" class="wsk-tabs__tab">Discography</a>
|
||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
||||
<div class="mdl-tabs__tab-bar">
|
||||
<a href="#about-panel" class="mdl-tabs__tab is-active">About the Beatles</a>
|
||||
<a href="#members-panel" class="mdl-tabs__tab">Members</a>
|
||||
<a href="#albums-panel" class="mdl-tabs__tab">Discography</a>
|
||||
</div>
|
||||
<div class="wsk-tabs__panel is-active" id="about-panel">
|
||||
<div class="mdl-tabs__panel is-active" id="about-panel">
|
||||
<p><b>The Beatles</b> were a four-piece musical group from Liverpool, England. Formed in 1960, their career spanned just over a decade, yet they are widely regarded as the most influential band in history.</p>
|
||||
<p>Their songs are among the best-loved music of all time. It is said that every minute of every day, a radio station somewhere is playing a Beatles song.
|
||||
</div>
|
||||
<div class="wsk-tabs__panel" id="members-panel">
|
||||
<div class="mdl-tabs__panel" id="members-panel">
|
||||
<p>The Beatles' members were:
|
||||
<ul>
|
||||
<li>John Lennon (1940-1980)</li>
|
||||
@ -115,7 +115,7 @@ Three tabs, with ripple effect on tab links.
|
||||
<li>Ringo Starr (1940-)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-tabs__panel" id="albums-panel">
|
||||
<div class="mdl-tabs__panel" id="albums-panel">
|
||||
<p>The Beatles' original UK LPs, in order of release:</p>
|
||||
<ol>
|
||||
<li>Please Please Me (1963)</li>
|
||||
@ -140,13 +140,13 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-tabs` | Defines a tabs container as an MDL component | Required on "outer" div element |
|
||||
| `wsk-js-tabs` | Assigns basic MDL behavior to tabs container | Required on "outer" div element|
|
||||
| `wsk-js-ripple-effect` | Applies *ripple* click effect to tab links | Optional; goes on "outer" div element|
|
||||
| `wsk-tabs__tab-bar` | Defines a container as an MDL tabs link bar | Required on first "inner" div element |
|
||||
| `wsk-tabs__tab` | Defines an anchor (link) as an MDL tab activator | Required on all links in first "inner" div element |
|
||||
| `mdl-tabs` | Defines a tabs container as an MDL component | Required on "outer" div element |
|
||||
| `mdl-js-tabs` | Assigns basic MDL behavior to tabs container | Required on "outer" div element|
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect to tab links | Optional; goes on "outer" div element|
|
||||
| `mdl-tabs__tab-bar` | Defines a container as an MDL tabs link bar | Required on first "inner" div element |
|
||||
| `mdl-tabs__tab` | Defines an anchor (link) as an MDL tab activator | Required on all links in first "inner" div element |
|
||||
| `is-active` | Defines a tab as the default display tab | Required on one (and only one) of the "inner" div (tab) elements |
|
||||
| `wsk-tabs__panel` | Defines a container as tab content | Required on each of the "inner" div (tab) elements |
|
||||
| `mdl-tabs__panel` | Defines a container as tab content | Required on each of the "inner" div (tab) elements |
|
||||
|
||||
##More information
|
||||
For working examples of the **tab** component, see the MDL [tab demo page](www.github.com/google/material-design-lite/src/tabs/demo.html).
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@import "../variables";
|
||||
|
||||
|
||||
.wsk-tabs {
|
||||
.mdl-tabs {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wsk-tabs__tab-bar {
|
||||
.mdl-tabs__tab-bar {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
flex-wrap : wrap;
|
||||
@ -20,7 +20,7 @@
|
||||
border-bottom : 1px solid $tab-border-color;
|
||||
}
|
||||
|
||||
.wsk-tabs__tab {
|
||||
.mdl-tabs__tab {
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 0 24px 0 24px;
|
||||
@ -42,11 +42,11 @@
|
||||
color: $tab-text-color;
|
||||
overflow: hidden;
|
||||
|
||||
.wsk-tabs.is-upgraded &.is-active {
|
||||
.mdl-tabs.is-upgraded &.is-active {
|
||||
color: $tab-active-text-color;
|
||||
}
|
||||
|
||||
.wsk-tabs.is-upgraded &.is-active:after {
|
||||
.mdl-tabs.is-upgraded &.is-active:after {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
@ -60,7 +60,7 @@
|
||||
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
|
||||
}
|
||||
|
||||
& .wsk-tabs__ripple-container {
|
||||
& .mdl-tabs__ripple-container {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@ -70,20 +70,20 @@
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
& .wsk-ripple {
|
||||
& .mdl-ripple {
|
||||
background: $tab-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-tabs__panel {
|
||||
.mdl-tabs__panel {
|
||||
display: block;
|
||||
|
||||
.wsk-tabs.is-upgraded & {
|
||||
.mdl-tabs.is-upgraded & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wsk-tabs.is-upgraded &.is-active {
|
||||
.mdl-tabs.is-upgraded &.is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,14 +15,14 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<div class="wsk-tabs wsk-js-tabs wsk-js-ripple-effect">
|
||||
<div class="wsk-tabs__tab-bar">
|
||||
<a href="#starks-panel" class="wsk-tabs__tab is-active">Tab I</a>
|
||||
<a href="#lannisters-panel" class="wsk-tabs__tab">Tab II</a>
|
||||
<a href="#targaryens-panel" class="wsk-tabs__tab">Tab III</a>
|
||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
||||
<div class="mdl-tabs__tab-bar">
|
||||
<a href="#starks-panel" class="mdl-tabs__tab is-active">Tab I</a>
|
||||
<a href="#lannisters-panel" class="mdl-tabs__tab">Tab II</a>
|
||||
<a href="#targaryens-panel" class="mdl-tabs__tab">Tab III</a>
|
||||
</div>
|
||||
|
||||
<div class="wsk-tabs__panel is-active" id="starks-panel">
|
||||
<div class="mdl-tabs__panel is-active" id="starks-panel">
|
||||
<ul>
|
||||
<li>Eddard</li>
|
||||
<li>Catelyn</li>
|
||||
@ -33,7 +33,7 @@
|
||||
<li>Rickon</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-tabs__panel" id="lannisters-panel">
|
||||
<div class="mdl-tabs__panel" id="lannisters-panel">
|
||||
<ul>
|
||||
<li>Tywin</li>
|
||||
<li>Cersei</li>
|
||||
@ -41,7 +41,7 @@
|
||||
<li>Tyrion</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wsk-tabs__panel" id="targaryens-panel">
|
||||
<div class="mdl-tabs__panel" id="targaryens-panel">
|
||||
<ul>
|
||||
<li>Viserys</li>
|
||||
<li>Daenerys</li>
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/tabs/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="tabs.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Tabs WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialTabs(element) {
|
||||
@ -31,15 +31,15 @@ MaterialTabs.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialTabs.prototype.CssClasses_ = {
|
||||
TAB_CLASS: 'wsk-tabs__tab',
|
||||
PANEL_CLASS: 'wsk-tabs__panel',
|
||||
TAB_CLASS: 'mdl-tabs__tab',
|
||||
PANEL_CLASS: 'mdl-tabs__panel',
|
||||
ACTIVE_CLASS: 'is-active',
|
||||
UPGRADED_CLASS: 'is-upgraded',
|
||||
|
||||
WSK_JS_RIPPLE_EFFECT: 'wsk-js-ripple-effect',
|
||||
WSK_RIPPLE_CONTAINER: 'wsk-tabs__ripple-container',
|
||||
WSK_RIPPLE: 'wsk-ripple',
|
||||
WSK_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'wsk-js-ripple-effect--ignore-events'
|
||||
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'
|
||||
};
|
||||
|
||||
/**
|
||||
@ -131,5 +131,5 @@ function MaterialTab(tab, ctx) {
|
||||
componentHandler.register({
|
||||
constructor: MaterialTabs,
|
||||
classAsString: 'MaterialTabs',
|
||||
cssClass: 'wsk-js-tabs'
|
||||
cssClass: 'mdl-js-tabs'
|
||||
});
|
||||
|
||||
@ -43,10 +43,10 @@ There are three main types of text fields in the text field component, each with
|
||||
```
|
||||
5. Add one or more MDL classes, separated by spaces, to the div container, text field, field label, and error message using the `class` attribute.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<input class="wsk-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*" />
|
||||
<label class="wsk-textfield__label" for="user">User name</label>
|
||||
<span class="wsk-textfield__error">Letters and spaces only</span>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*" />
|
||||
<label class="mdl-textfield__label" for="user">User name</label>
|
||||
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||
</div>
|
||||
```
|
||||
The single-line text field component is ready for use.
|
||||
@ -55,26 +55,26 @@ The single-line text field component is ready for use.
|
||||
|
||||
Single-line text field with a standard label.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<input class="wsk-textfield__input" type="text" id="fname" />
|
||||
<label class="wsk-textfield__label" for="fname">First name</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="fname" />
|
||||
<label class="mdl-textfield__label" for="fname">First name</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
Single-line text field with a floating label.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label">
|
||||
<input class="wsk-textfield__input" type="text" id="addr1" />
|
||||
<label class="wsk-textfield__label" for="addr1">Address line 1</label>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="addr1" />
|
||||
<label class="mdl-textfield__label" for="addr1">Address line 1</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
Single-line text field with a standard label, pattern matching, and error message.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<input class="wsk-textfield__input" type="text" pattern="[0-9]*" id="phone" />
|
||||
<label class="wsk-textfield__label" for="phone">Phone</label>
|
||||
<span class="wsk-textfield__error">Digits only</span>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone" />
|
||||
<label class="mdl-textfield__label" for="phone">Phone</label>
|
||||
<span class="mdl-textfield__error">Digits only</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -101,9 +101,9 @@ Single-line text field with a standard label, pattern matching, and error messag
|
||||
```
|
||||
4. Add one or more MDL classes, separated by spaces, to the div container, text field, and field label using the `class` attribute.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<textarea class="wsk-textfield__input" type="text" rows="1" id="address"></textarea>
|
||||
<label class="wsk-textfield__label" for="address">Full address</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="1" id="address"></textarea>
|
||||
<label class="mdl-textfield__label" for="address">Full address</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -113,25 +113,25 @@ The multi-line text field component is ready for use.
|
||||
|
||||
Multi-line text field with one visible input line.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<textarea class="wsk-textfield__input" type="text" rows="1" id="schools"></textarea>
|
||||
<label class="wsk-textfield__label" for="schools">Schools attended</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="1" id="schools"></textarea>
|
||||
<label class="mdl-textfield__label" for="schools">Schools attended</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
Multi-line text field with one visible input line and floating label.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label">
|
||||
<textarea class="wsk-textfield__input" type="text" rows= "1" id="schools"></textarea>
|
||||
<label class="wsk-textfield__label" for="schools">Schools attended</label>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<textarea class="mdl-textfield__input" type="text" rows= "1" id="schools"></textarea>
|
||||
<label class="mdl-textfield__label" for="schools">Schools attended</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
Multi-line text field with multiple visible input lines and a maximum number of lines.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<textarea class="wsk-textfield__input" type="text" rows="3" maxrows="6" id="schools"></textarea>
|
||||
<label class="wsk-textfield__label" for="schools">Schools attended (max. 6)</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="3" maxrows="6" id="schools"></textarea>
|
||||
<label class="mdl-textfield__label" for="schools">Schools attended (max. 6)</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -195,13 +195,13 @@ Multi-line text field with multiple visible input lines and a maximum number of
|
||||
```
|
||||
7. Add one or more MDL classes, separated by spaces, to the "outer" div container, label, and span, and to the "inner" div container, text field, and field label using the `class` attribute.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable">
|
||||
<label class="wsk-button wsk-js-button wsk-button--icon" for="expando1">
|
||||
<span class="wsk-icon--search"></span>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
|
||||
<span class="mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="wsk-textfield__expandable-holder">
|
||||
<input class="wsk-textfield__input" type="text" id="expando1" />
|
||||
<label class="wsk-textfield__label" for="expando1">Expandable text field</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="expando1" />
|
||||
<label class="mdl-textfield__label" for="expando1">Expandable text field</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -212,26 +212,26 @@ The expandable text field component is ready for use. It will expand when the ic
|
||||
|
||||
Expandable text field with a standard label.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable">
|
||||
<label class="wsk-button wsk-js-button wsk-button--icon" for="search-expandable">
|
||||
<span class="wsk-icon--search"></span>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
|
||||
<span class="mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="wsk-textfield__expandable-holder">
|
||||
<input class="wsk-textfield__input" type="text" id="search-expandable" />
|
||||
<label class="wsk-textfield__label" for="search-expandable">Search text</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search-expandable" />
|
||||
<label class="mdl-textfield__label" for="search-expandable">Search text</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Expandable text field with a floating label.
|
||||
```html
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label">
|
||||
<label class="wsk-button wsk-js-button wsk-button--icon" for="search-expandable2">
|
||||
<span class="wsk-icon--search"></span>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable2">
|
||||
<span class="mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="wsk-textfield__expandable-holder">
|
||||
<input class="wsk-textfield__input" type="text" id="search-expandable2" />
|
||||
<label class="wsk-textfield__label" for="search-expandable2">Enter search text below</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search-expandable2" />
|
||||
<label class="mdl-textfield__label" for="search-expandable2">Enter search text below</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -240,22 +240,22 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-textfield` | Defines container as an MDL component | Required on "outer" div element|
|
||||
| `wsk-js-textfield` | Assigns basic MDL behavior to input | Required on "outer" div element |
|
||||
| `wsk-textfield__input` | Defines element as textfield input | Required on input or textarea element |
|
||||
| `wsk-textfield__label` | Defines element as textfield label | Required on label element for input or textarea elements |
|
||||
| `wsk-textfield--floating-label` | Applies *floating label* effect | Optional; goes on "outer" div element |
|
||||
| `wsk-textfield__error` | Defines span as an MDL error message | Optional; goes on span element for MDL input element with *pattern*|
|
||||
| `wsk-textfield--expandable` | Defines a div as an MDL expandable text field container | For expandable input fields, required on "outer" div element |
|
||||
| `wsk-button` | Defines label as an MDL icon button | For expandable input fields, required on "outer" div's label element |
|
||||
| `wsk-js-button` | Assigns basic behavior to icon container | For expandable input fields, required on "outer" div's label element |
|
||||
| `wsk-button--icon` | Defines label as an MDL icon container | For expandable input fields, required on "outer" div's label element |
|
||||
| `wsk-icon--search` | Defines span as an MDL search icon(1) | For expandable input fields, required on "outer" div's label's span element |
|
||||
| `wsk-input__expandable-holder` | Defines a container as an MDL component | For expandable input fields, required on "inner" div element |
|
||||
| `mdl-textfield` | Defines container as an MDL component | Required on "outer" div element|
|
||||
| `mdl-js-textfield` | Assigns basic MDL behavior to input | Required on "outer" div element |
|
||||
| `mdl-textfield__input` | Defines element as textfield input | Required on input or textarea element |
|
||||
| `mdl-textfield__label` | Defines element as textfield label | Required on label element for input or textarea elements |
|
||||
| `mdl-textfield--floating-label` | Applies *floating label* effect | Optional; goes on "outer" div element |
|
||||
| `mdl-textfield__error` | Defines span as an MDL error message | Optional; goes on span element for MDL input element with *pattern*|
|
||||
| `mdl-textfield--expandable` | Defines a div as an MDL expandable text field container | For expandable input fields, required on "outer" div element |
|
||||
| `mdl-button` | Defines label as an MDL icon button | For expandable input fields, required on "outer" div's label element |
|
||||
| `mdl-js-button` | Assigns basic behavior to icon container | For expandable input fields, required on "outer" div's label element |
|
||||
| `mdl-button--icon` | Defines label as an MDL icon container | For expandable input fields, required on "outer" div's label element |
|
||||
| `mdl-icon--search` | Defines span as an MDL search icon(1) | For expandable input fields, required on "outer" div's label's span element |
|
||||
| `mdl-input__expandable-holder` | Defines a container as an MDL component | For expandable input fields, required on "inner" div element |
|
||||
|
||||
(1) The "search" 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 each text field type are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input class="wsk-textfield wsk-js-textfield" type="text" disabled />`
|
||||
>**Note:** Disabled versions of each text field type are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-textfield mdl-js-textfield" type="text" disabled />`
|
||||
>This attribute may be added or removed programmatically via scripting.
|
||||
|
||||
##More information
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../variables";
|
||||
|
||||
// The container for the whole component.
|
||||
.wsk-textfield {
|
||||
.mdl-textfield {
|
||||
position: relative;
|
||||
|
||||
font-size: 16px;
|
||||
@ -13,30 +13,30 @@
|
||||
margin: 0;
|
||||
|
||||
// Align buttons, if used.
|
||||
& .wsk-button {
|
||||
& .mdl-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional class to align right.
|
||||
.wsk-textfield--align-right {
|
||||
.mdl-textfield--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Optional class to display at full width.
|
||||
.wsk-textfield--full-width {
|
||||
.mdl-textfield--full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Optional class to make the text field expandable.
|
||||
.wsk-textfield--expandable {
|
||||
.mdl-textfield--expandable {
|
||||
min-width: $input-text-button-size;
|
||||
min-height: $input-text-button-size;
|
||||
}
|
||||
|
||||
// Styling for the input element.
|
||||
.wsk-textfield__input {
|
||||
.mdl-textfield__input {
|
||||
border: none;
|
||||
border-bottom: 1px solid $input-text-bottom-border-color;
|
||||
display: block;
|
||||
@ -48,23 +48,23 @@
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
|
||||
.wsk-textfield.is-focused & {
|
||||
.mdl-textfield.is-focused & {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wsk-textfield.is-invalid & {
|
||||
.mdl-textfield.is-invalid & {
|
||||
border-color: $input-text-error-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wsk-textfield.is-disabled & {
|
||||
.mdl-textfield.is-disabled & {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px dotted $input-text-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Styling for the label / floating label.
|
||||
.wsk-textfield__label {
|
||||
.mdl-textfield__label {
|
||||
bottom: 0;
|
||||
color: $input-text-label-color;
|
||||
font-size: $input-text-font-size;
|
||||
@ -78,24 +78,24 @@
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
|
||||
.wsk-textfield.is-dirty & {
|
||||
.mdl-textfield.is-dirty & {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Floating Label
|
||||
.wsk-textfield--floating-label & {
|
||||
.mdl-textfield--floating-label & {
|
||||
@include material-animation-default();
|
||||
}
|
||||
|
||||
.wsk-textfield--floating-label.is-focused &,
|
||||
.wsk-textfield--floating-label.is-dirty & {
|
||||
.mdl-textfield--floating-label.is-focused &,
|
||||
.mdl-textfield--floating-label.is-dirty & {
|
||||
color: $input-text-highlight-color;
|
||||
font-size : $input-text-floating-label-fontsize;
|
||||
top: -($input-text-floating-label-fontsize + $input-text-padding);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.wsk-textfield--floating-label.is-invalid & {
|
||||
.mdl-textfield--floating-label.is-invalid & {
|
||||
color: $input-text-error-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -113,32 +113,32 @@
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.wsk-textfield.is-focused &:after {
|
||||
.mdl-textfield.is-focused &:after {
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wsk-textfield.is-invalid &:after {
|
||||
.mdl-textfield.is-invalid &:after {
|
||||
background-color: $input-text-error-color;
|
||||
}
|
||||
}
|
||||
|
||||
// TextField Error.
|
||||
.wsk-textfield__error {
|
||||
.mdl-textfield__error {
|
||||
color: $input-text-error-color;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
visibility: hidden;
|
||||
|
||||
.wsk-textfield.is-invalid & {
|
||||
.mdl-textfield.is-invalid & {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Expandable Holder.
|
||||
.wsk-textfield__expandable-holder {
|
||||
.mdl-textfield__expandable-holder {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-left: $input-text-button-size;
|
||||
@ -152,7 +152,7 @@
|
||||
// inner element :(
|
||||
max-width: 0.1px;
|
||||
|
||||
.wsk-textfield.is-focused &, .wsk-textfield.is-dirty & {
|
||||
.mdl-textfield.is-focused &, .mdl-textfield.is-dirty & {
|
||||
// This is an unfortunate hack. Animating between widths in percent (%)
|
||||
// in many browsers (Chrome, Firefox) only animates the inner visual style
|
||||
// of the input - the outer bounding box still 'jumps'.
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>wsk-textfield</title>
|
||||
<title>mdl-textfield</title>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
@ -16,87 +16,87 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
<form action="#">
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<input class="wsk-textfield__input" type="text" id="sample1" />
|
||||
<label class="wsk-textfield__label" for="sample1">Type Something...</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="sample1" />
|
||||
<label class="mdl-textfield__label" for="sample1">Type Something...</label>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<input class="wsk-textfield__input" type="text" pattern="[0-9]*" id="sample2" />
|
||||
<label class="wsk-textfield__label" for="sample2">Numbers Only</label>
|
||||
<span class="wsk-textfield__error">Input is not a number!</span>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sample2" />
|
||||
<label class="mdl-textfield__label" for="sample2">Numbers Only</label>
|
||||
<span class="mdl-textfield__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<input class="wsk-textfield__input" type="text" disabled id="sample3" />
|
||||
<label class="wsk-textfield__label" for="sample3">I'm Disabled</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" disabled id="sample3" />
|
||||
<label class="mdl-textfield__label" for="sample3">I'm Disabled</label>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label">
|
||||
<input class="wsk-textfield__input" type="text" id="sample4" />
|
||||
<label class="wsk-textfield__label" for="sample4">Text Input</label>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="sample4" />
|
||||
<label class="mdl-textfield__label" for="sample4">Text Input</label>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label">
|
||||
<input class="wsk-textfield__input" type="text" pattern="[0-9]*" id="sample5" />
|
||||
<label class="wsk-textfield__label" for="sample5">Numbers Only</label>
|
||||
<span class="wsk-textfield__error">Input is not a number!</span>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sample5" />
|
||||
<label class="mdl-textfield__label" for="sample5">Numbers Only</label>
|
||||
<span class="mdl-textfield__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<textarea class="wsk-textfield__input" type="text" rows= "1" id="sample6" ></textarea>
|
||||
<label class="wsk-textfield__label" for="sample6">Type multiple lines here...</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows= "1" id="sample6" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample6">Type multiple lines here...</label>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<textarea class="wsk-textfield__input" type="text" rows="3" id="sample7" ></textarea>
|
||||
<label class="wsk-textfield__label" for="sample7">This input is 3 rows high</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="3" id="sample7" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample7">This input is 3 rows high</label>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield">
|
||||
<textarea class="wsk-textfield__input" type="text" maxrows="3" rows="1" id="sample8" ></textarea>
|
||||
<label class="wsk-textfield__label" for="sample8">This input is at most 3 rows high</label>
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" maxrows="3" rows="1" id="sample8" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample8">This input is at most 3 rows high</label>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label">
|
||||
<textarea class="wsk-textfield__input" type="text" rows="1" id="sample9" ></textarea>
|
||||
<label class="wsk-textfield__label" for="sample9">Multiple lines and a floating label</label>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="1" id="sample9" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample9">Multiple lines and a floating label</label>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable">
|
||||
<label class="wsk-button wsk-js-button wsk-button--icon" for="sample-expandable">
|
||||
<span class="wsk-icon wsk-icon--search"/>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expandable">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="wsk-textfield__expandable-holder">
|
||||
<input class="wsk-textfield__input" type="text" id="sample-expandable" />
|
||||
<label class="wsk-textfield__label" for="sample-expandable">Expandable Input</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="sample-expandable" />
|
||||
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label">
|
||||
<label class="wsk-button wsk-js-button wsk-button--icon" for="sample-expandable-floating">
|
||||
<span class="wsk-icon wsk-icon--search"/>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expandable-floating">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="wsk-textfield__expandable-holder">
|
||||
<input class="wsk-textfield__input" type="text" id="sample-expandable-floating" />
|
||||
<label class="wsk-textfield__label" for="sample-expandable-floating">Expandable & Floating Input</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="sample-expandable-floating" />
|
||||
<label class="mdl-textfield__label" for="sample-expandable-floating">Expandable & Floating Input</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right wsk-textfield--full-width">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
|
||||
Right/No Label:
|
||||
<label class="wsk-button wsk-js-button wsk-button--icon" for="sample-expclean">
|
||||
<span class="wsk-icon wsk-icon--search"/>
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<span class="mdl-icon mdl-icon--search"/>
|
||||
</label>
|
||||
<div class="wsk-textfield__expandable-holder">
|
||||
<input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/textfield/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="textfield.js"></script>
|
||||
<script src="../button/button.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.demo-page--textfield .wsk-textfield {
|
||||
.demo-page--textfield .mdl-textfield {
|
||||
display: block;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Class constructor for Textfield WSK component.
|
||||
* Implements WSK component design pattern defined at:
|
||||
* https://github.com/jasonmayes/wsk-component-design-pattern
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialTextfield(element) {
|
||||
@ -31,8 +31,8 @@ MaterialTextfield.prototype.Constant_ = {
|
||||
* @private
|
||||
*/
|
||||
MaterialTextfield.prototype.CssClasses_ = {
|
||||
LABEL: 'wsk-textfield__label',
|
||||
INPUT: 'wsk-textfield__input',
|
||||
LABEL: 'mdl-textfield__label',
|
||||
INPUT: 'mdl-textfield__input',
|
||||
IS_DIRTY: 'is-dirty',
|
||||
IS_FOCUSED: 'is-focused',
|
||||
IS_DISABLED: 'is-disabled',
|
||||
@ -184,5 +184,5 @@ MaterialTextfield.prototype.init = function() {
|
||||
componentHandler.register({
|
||||
constructor: MaterialTextfield,
|
||||
classAsString: 'MaterialTextfield',
|
||||
cssClass: 'wsk-js-textfield'
|
||||
cssClass: 'mdl-js-textfield'
|
||||
});
|
||||
|
||||
@ -22,7 +22,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
3. Add one or more MDL classes, separated by spaces, to the tooltip element using the `class` attribute.
|
||||
```html
|
||||
<p id="tt1">HTML</p>
|
||||
<span for="tt1" class="wsk-tooltip">HyperText Markup Language</span>
|
||||
<span for="tt1" class="mdl-tooltip">HyperText Markup Language</span>
|
||||
```
|
||||
|
||||
The tooltip component is ready for use.
|
||||
@ -32,31 +32,31 @@ The tooltip component is ready for use.
|
||||
A target with a simple text tooltip.
|
||||
```html
|
||||
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
|
||||
<span class="wsk-tooltip" for="xml">eXtensible Markup Language</span>
|
||||
<span class="mdl-tooltip" for="xml">eXtensible Markup Language</span>
|
||||
```
|
||||
|
||||
A target with "rich" (containing HTML markup) tooltip text.
|
||||
```html
|
||||
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
|
||||
<span class="wsk-tooltip" for="xml">e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</span>
|
||||
<span class="mdl-tooltip" for="xml">e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</span>
|
||||
```
|
||||
|
||||
A target with a long text tooltip that automatically wraps.
|
||||
```html
|
||||
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
|
||||
<span class="wsk-tooltip" for="xml">XML is an acronym for eXtensible Markup Language</span>
|
||||
<span class="mdl-tooltip" for="xml">XML is an acronym for eXtensible Markup Language</span>
|
||||
```
|
||||
|
||||
A target with tooltip text in a larger font size.
|
||||
```html
|
||||
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
|
||||
<span class="wsk-tooltip wsk-tooltip--large" for="xml">eXtensible Markup Language</span>
|
||||
<span class="mdl-tooltip mdl-tooltip--large" for="xml">eXtensible Markup Language</span>
|
||||
```
|
||||
|
||||
A target with a tooltip containing both an image and text.
|
||||
```html
|
||||
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
|
||||
<span class="wsk-tooltip" for="xml"><img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>
|
||||
<span class="mdl-tooltip" for="xml"><img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
@ -64,8 +64,8 @@ The MDL CSS classes apply various predefined visual enhancements to the tooltip.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|-----------|--------|---------|
|
||||
| `wsk-tooltip` | Defines a container as an MDL tooltip | Required on tooltip container element |
|
||||
| `wsk-tooltip--large` | Applies large-font effect | Optional; goes on tooltip container element |
|
||||
| `mdl-tooltip` | Defines a container as an MDL tooltip | Required on tooltip container element |
|
||||
| `mdl-tooltip--large` | Applies large-font effect | Optional; goes on tooltip container element |
|
||||
|
||||
##More information
|
||||
For working examples of the **tooltip** component, see the MDL [tooltip demo page](www.github.com/google/material-design-lite/src/tooltip/demo.html).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../variables";
|
||||
|
||||
.wsk-tooltip {
|
||||
.mdl-tooltip {
|
||||
transform: scale(0);
|
||||
transform-origin: top center;
|
||||
background: $tooltip-background-color;
|
||||
@ -14,12 +14,12 @@
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
.wsk-tooltip.is-active {
|
||||
.mdl-tooltip.is-active {
|
||||
display: inline-block;
|
||||
animation: pulse 200ms $animation-curve-linear-out-slow-in forwards;
|
||||
}
|
||||
|
||||
.wsk-tooltip--large {
|
||||
.mdl-tooltip--large {
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
padding: 15px 16px;
|
||||
|
||||
@ -18,29 +18,29 @@
|
||||
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<div id="el1" class="icon wsk-icon wsk-icon--note-add"></div>
|
||||
<div class="wsk-tooltip" for="el1">
|
||||
<div id="el1" class="icon mdl-icon mdl-icon--note-add"></div>
|
||||
<div class="mdl-tooltip" for="el1">
|
||||
Simple tooltip
|
||||
</div>
|
||||
|
||||
<div id="el2" class="icon wsk-icon wsk-icon--mood"></div>
|
||||
<div class="wsk-tooltip" for="el2">
|
||||
<div id="el2" class="icon mdl-icon mdl-icon--mood"></div>
|
||||
<div class="mdl-tooltip" for="el2">
|
||||
This is a
|
||||
<strong>rich tooltip</strong>
|
||||
</div>
|
||||
|
||||
<div id="el3" class="icon wsk-icon wsk-icon--group"></div>
|
||||
<div class="wsk-tooltip" for="el3">
|
||||
<div id="el3" class="icon mdl-icon mdl-icon--group"></div>
|
||||
<div class="mdl-tooltip" for="el3">
|
||||
This is an example of a long tooltip that wraps
|
||||
</div>
|
||||
|
||||
<div id="el4" class="icon wsk-icon wsk-icon--menu"></div>
|
||||
<div class="wsk-tooltip wsk-tooltip--large" for="el4">
|
||||
<div id="el4" class="icon mdl-icon mdl-icon--menu"></div>
|
||||
<div class="mdl-tooltip mdl-tooltip--large" for="el4">
|
||||
Element with a large tooltip
|
||||
</div>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/tooltip/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
<script src="../mdlComponentHandler.js"></script>
|
||||
<script src="tooltip.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user