@@ -178,7 +178,7 @@ Use of MDL layout principles simplifies the creation of scalable pages by provid
Simple Layout
- Nav link 2
+ Nav link 1
Nav link 2
Nav link 3
@@ -336,4 +336,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-layout__tab` | Defines anchor as MDL tab link | Required on tab bar anchor elements |
| `is-active` | Defines tab as default active tab | Optional; goes on tab bar anchor element and associated tab section element|
| `mdl-layout__tab-panel` | Defines container as tab content panel | Required on tab section elements |
+| `mdl-layout__tab-manual-switch` | Disables tab switching when clicking on tab separators. Useful for disabling default behavior and setting up your own event listeners. | Optional; goes on tab bar element |
| `mdl-layout--fixed-tabs` | Uses fixed tabs instead of the default scrollable tabs | Optional; goes on outer div element (not div inside header) |
diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss
index de8fc0ce3..844f9cd9a 100644
--- a/src/layout/_layout.scss
+++ b/src/layout/_layout.scss
@@ -189,9 +189,9 @@
text-align: center;
cursor: pointer;
font-size: 26px;
- line-height: $layout-drawer-button-desktop-size + 2;
+ line-height: $layout-mobile-header-height;
font-family: Helvetica, Arial, sans-serif;
- margin: 10px 12px;
+ margin: ($layout-mobile-header-height - $layout-drawer-button-desktop-size) 12px;
top: 0;
left: 0;
color: $layout-header-text-color;
@@ -214,18 +214,14 @@
}
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
- .mdl-layout--fixed-drawer > & {
- display: none;
- }
+ line-height: 54px;
- .mdl-layout--no-desktop-drawer-button & {
+ .mdl-layout--no-desktop-drawer-button &,
+ .mdl-layout--fixed-drawer > &,
+ .mdl-layout--no-drawer-button & {
display: none;
}
}
-
- .mdl-layout--no-drawer-button & {
- display: none;
- }
}
.mdl-layout__header {
@@ -563,7 +559,6 @@
}
@media screen and (max-width: $layout-screen-size-threshold) {
- display: none;
width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
}
@@ -634,7 +629,7 @@
left: 0;
position: absolute;
background: $layout-header-tab-highlight;
- animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+ animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) alternate forwards;
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
}
diff --git a/src/layout/layout.js b/src/layout/layout.js
index 9e1e4e685..e9979acc9 100644
--- a/src/layout/layout.js
+++ b/src/layout/layout.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
@@ -102,6 +101,7 @@
HEADER_SCROLL: 'mdl-layout__header--scroll',
FIXED_HEADER: 'mdl-layout--fixed-header',
+ FIXED_DRAWER: 'mdl-layout--fixed-drawer',
OBFUSCATOR: 'mdl-layout__obfuscator',
TAB_BAR: 'mdl-layout__tab-bar',
@@ -110,6 +110,7 @@
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',
+ TAB_MANUAL_SWITCH: 'mdl-layout__tab-manual-switch',
PANEL: 'mdl-layout__tab-panel',
HAS_DRAWER: 'has-drawer',
@@ -128,6 +129,17 @@
};
+ /**
+ * Provide local version of matchMedia. This is needed in order to support
+ * monkey-patching of matchMedia in the unit tests. Due to peculiarities in
+ * PhantomJS, it doesn't work to monkey patch window.matchMedia directly.
+ *
+ * @private
+ */
+ MaterialLayout.prototype.matchMedia_ = function(query) {
+ return window.matchMedia(query);
+ };
+
/**
* Handles scrolling on the content.
*
@@ -181,12 +193,20 @@
MaterialLayout.prototype.screenSizeHandler_ = function() {
if (this.screenSizeMediaQuery_.matches) {
this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
+
+ if (this.drawer_) {
+ this.drawer_.setAttribute('aria-hidden', 'true');
+ }
} else {
this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
// Collapse drawer (if any) when moving to a large screen size.
if (this.drawer_) {
this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+
+ if (this.element_.classList.contains(this.CssClasses_.FIXED_DRAWER)) {
+ this.drawer_.setAttribute('aria-hidden', 'false');
+ }
}
}
};
@@ -423,7 +443,7 @@
// Keep an eye on screen size, and add/remove auxiliary class for styling
// of small screens.
- this.screenSizeMediaQuery_ = window.matchMedia(
+ this.screenSizeMediaQuery_ = this.matchMedia_(
/** @type {string} */ (this.Constant_.MAX_WIDTH));
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
this.screenSizeHandler_();
@@ -549,12 +569,15 @@
tab.appendChild(rippleContainer);
}
- tab.addEventListener('click', function(e) {
- if (tab.getAttribute('href').charAt(0) === '#') {
- e.preventDefault();
- selectTab();
- }
- });
+ if (!layout.tabBar_.classList.contains(
+ layout.CssClasses_.TAB_MANUAL_SWITCH)) {
+ tab.addEventListener('click', function(e) {
+ if (tab.getAttribute('href').charAt(0) === '#') {
+ e.preventDefault();
+ selectTab();
+ }
+ });
+ }
tab.show = selectTab;
}
diff --git a/src/list/README.md b/src/list/README.md
index 042dc62c9..a90999099 100644
--- a/src/list/README.md
+++ b/src/list/README.md
@@ -48,7 +48,7 @@ The MDL CSS classes apply various predefined visual enhancements to the list. Th
| .mdl-list__item-primary-content | Defines the primary content sub-division |-|
| .mdl-list__item-avatar | Defines the avatar sub-division |-|
| .mdl-list__item-icon | Defines the icon sub-division |-|
-| .mdl-list__item-secondary-content | Defines the secondary content sub-division | requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |
-| .mdl-list__item-secondary-info | Defines the information sub-division |requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |
-| .mdl-list__item-secondary-action | Defines the Action sub-division | requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |
-| .mdl-list__item-text-body | Defines the Text Body sub-division | requires `.mdl-list__item-three-line` |
+| .mdl-list__item-secondary-content | Defines the secondary content sub-division | requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
+| .mdl-list__item-secondary-info | Defines the information sub-division |requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
+| .mdl-list__item-secondary-action | Defines the Action sub-division | requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
+| .mdl-list__item-text-body | Defines the Text Body sub-division | requires `.mdl-list__item--three-line` |
diff --git a/src/list/snippets/list-control.html b/src/list/snippets/list-control.html
index c69ba9227..dbbf312ef 100644
--- a/src/list/snippets/list-control.html
+++ b/src/list/snippets/list-control.html
@@ -26,10 +26,10 @@
person
Aaron Paul
-
-
-
+
+
+
@@ -37,10 +37,10 @@
person
Bob Odenkirk
-
-
-
+
+
+
diff --git a/src/material-design-lite.scss b/src/material-design-lite.scss
index ccbad1488..391da2016 100644
--- a/src/material-design-lite.scss
+++ b/src/material-design-lite.scss
@@ -32,8 +32,10 @@
@import "button/button";
@import "card/card";
@import "checkbox/checkbox";
+@import "chip/chip";
@import "data-table/data-table";
@import "dialog/dialog";
+@import "expansion/expansion";
@import "footer/mega_footer";
@import "footer/mini_footer";
@import "icon-toggle/icon-toggle";
diff --git a/src/mdlComponentHandler.js b/src/mdlComponentHandler.js
index e4e652395..0d8834e1a 100644
--- a/src/mdlComponentHandler.js
+++ b/src/mdlComponentHandler.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
/**
* A component handler interface using the revealing module design pattern.
* More details on this design pattern here:
@@ -141,6 +140,27 @@ componentHandler = (function() {
return upgradedList.indexOf(jsClass) !== -1;
}
+ /**
+ * Create an event object.
+ *
+ * @param {string} eventType The type name of the event.
+ * @param {boolean} bubbles Whether the event should bubble up the DOM.
+ * @param {boolean} cancelable Whether the event can be canceled.
+ * @returns {!Event}
+ */
+ function createEvent_(eventType, bubbles, cancelable) {
+ if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
+ return new CustomEvent(eventType, {
+ bubbles: bubbles,
+ cancelable: cancelable
+ });
+ } else {
+ var ev = document.createEvent('Events');
+ ev.initEvent(eventType, bubbles, cancelable);
+ return ev;
+ }
+ }
+
/**
* Searches existing DOM for elements of our component type and upgrades them
* if they have not already been upgraded.
@@ -185,6 +205,13 @@ componentHandler = (function() {
if (!(typeof element === 'object' && element instanceof Element)) {
throw new Error('Invalid argument provided to upgrade MDL element.');
}
+ // Allow upgrade to be canceled by canceling emitted event.
+ var upgradingEv = createEvent_('mdl-componentupgrading', true, true);
+ element.dispatchEvent(upgradingEv);
+ if (upgradingEv.defaultPrevented) {
+ return;
+ }
+
var upgradedList = getUpgradedListOfElement_(element);
var classesToUpgrade = [];
// If jsClass is not provided scan the registered components to find the
@@ -227,16 +254,8 @@ componentHandler = (function() {
'Unable to find a registered component for the given class.');
}
- var ev;
- if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
- ev = new CustomEvent('mdl-componentupgraded', {
- bubbles: true, cancelable: false
- });
- } else {
- ev = document.createEvent('Events');
- ev.initEvent('mdl-componentupgraded', true, true);
- }
- element.dispatchEvent(ev);
+ var upgradedEv = createEvent_('mdl-componentupgraded', true, false);
+ element.dispatchEvent(upgradedEv);
}
}
@@ -358,15 +377,7 @@ componentHandler = (function() {
upgrades.splice(componentPlace, 1);
component.element_.setAttribute('data-upgraded', upgrades.join(','));
- var ev;
- if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
- ev = new CustomEvent('mdl-componentdowngraded', {
- bubbles: true, cancelable: false
- });
- } else {
- ev = document.createEvent('Events');
- ev.initEvent('mdl-componentdowngraded', true, true);
- }
+ var ev = createEvent_('mdl-componentdowngraded', true, false);
component.element_.dispatchEvent(ev);
}
}
diff --git a/src/menu/menu.js b/src/menu/menu.js
index de5b3b996..869c727c4 100644
--- a/src/menu/menu.js
+++ b/src/menu/menu.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
diff --git a/src/progress/progress.js b/src/progress/progress.js
index 442e2d68e..cb8ca725b 100644
--- a/src/progress/progress.js
+++ b/src/progress/progress.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
diff --git a/src/radio/_radio.scss b/src/radio/_radio.scss
index 73110a011..e2268265a 100644
--- a/src/radio/_radio.scss
+++ b/src/radio/_radio.scss
@@ -25,7 +25,10 @@
display: inline-block;
+ vertical-align: middle;
+
box-sizing: border-box;
+ height: $radio-label-height;
margin: 0;
padding-left: 0;
@@ -98,13 +101,13 @@
@include material-animation-default(0.28s);
transition-property: transform;
- transform: scale3d(0, 0, 0);
+ transform: scale(0, 0);
border-radius: 50%;
background: $radio-color;
.mdl-radio.is-checked & {
- transform: scale3d(1, 1, 1);
+ transform: scale(1, 1);
}
fieldset[disabled] .mdl-radio &,
diff --git a/src/radio/radio.js b/src/radio/radio.js
index 683ff72c5..697f5d2ce 100644
--- a/src/radio/radio.js
+++ b/src/radio/radio.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
@@ -82,7 +81,9 @@
var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
// Different name == different group, so no point updating those.
if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
- radios[i]['MaterialRadio'].updateClasses_();
+ if (typeof radios[i]['MaterialRadio'] !== 'undefined') {
+ radios[i]['MaterialRadio'].updateClasses_();
+ }
}
}
};
@@ -202,7 +203,7 @@
*/
MaterialRadio.prototype.check = function() {
this.btnElement_.checked = true;
- this.updateClasses_();
+ this.onChange_(null);
};
MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
@@ -213,7 +214,7 @@
*/
MaterialRadio.prototype.uncheck = function() {
this.btnElement_.checked = false;
- this.updateClasses_();
+ this.onChange_(null);
};
MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
diff --git a/src/ripple/ripple.js b/src/ripple/ripple.js
index c39ed8ad1..ead5832ec 100644
--- a/src/ripple/ripple.js
+++ b/src/ripple/ripple.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
@@ -102,8 +101,8 @@
x = Math.round(bound.width / 2);
y = Math.round(bound.height / 2);
} else {
- var clientX = event.clientX ? event.clientX : event.touches[0].clientX;
- var clientY = event.clientY ? event.clientY : event.touches[0].clientY;
+ var clientX = event.clientX !== undefined ? event.clientX : event.touches[0].clientX;
+ var clientY = event.clientY !== undefined ? event.clientY : event.touches[0].clientY;
x = Math.round(clientX - bound.left);
y = Math.round(clientY - bound.top);
}
diff --git a/src/slider/slider.js b/src/slider/slider.js
index b34b8b6ba..b37267993 100644
--- a/src/slider/slider.js
+++ b/src/slider/slider.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
@@ -83,16 +82,6 @@
this.updateValueStyles_();
};
- /**
- * Handle mouseup on element.
- *
- * @param {Event} event The event that fired.
- * @private
- */
- MaterialSlider.prototype.onMouseUp_ = function(event) {
- event.target.blur();
- };
-
/**
* Handle mousedown on container element.
* This handler is purpose is to not require the use to click
@@ -221,11 +210,9 @@
this.boundInputHandler = this.onInput_.bind(this);
this.boundChangeHandler = this.onChange_.bind(this);
- this.boundMouseUpHandler = this.onMouseUp_.bind(this);
this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
this.element_.addEventListener('input', this.boundInputHandler);
this.element_.addEventListener('change', this.boundChangeHandler);
- this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
this.updateValueStyles_();
diff --git a/src/snackbar/snackbar.js b/src/snackbar/snackbar.js
index 7a855abf3..92a2a5236 100644
--- a/src/snackbar/snackbar.js
+++ b/src/snackbar/snackbar.js
@@ -38,6 +38,7 @@
this.actionHandler_ = undefined;
this.message_ = undefined;
this.actionText_ = undefined;
+ this.timeoutID_ = undefined;
this.queuedNotifications_ = [];
this.setActionHidden_(true);
};
@@ -86,7 +87,7 @@
this.textElement_.textContent = this.message_;
this.element_.classList.add(this.cssClasses_.ACTIVE);
this.element_.setAttribute('aria-hidden', 'false');
- setTimeout(this.cleanup_.bind(this), this.timeout_);
+ this.timeoutID_ = setTimeout(this.cleanup_.bind(this), this.timeout_);
};
@@ -127,7 +128,21 @@
}
};
MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
-
+ /**
+ * Hide the snackbar.
+ *
+ * @public
+ */
+ MaterialSnackbar.prototype.hideSnackbar = function() {
+ if (!this.active) {
+ return;
+ }
+ if (typeof this.timeoutID_ === 'number') {
+ clearTimeout(this.timeoutID_);
+ this.cleanup_();
+ }
+ };
+ MaterialSnackbar.prototype['hideSnackbar'] = MaterialSnackbar.prototype.hideSnackbar;
/**
* Check if the queue has items within it.
* If it does, display the next entry.
@@ -158,6 +173,7 @@
this.actionHandler_ = undefined;
this.message_ = undefined;
this.actionText_ = undefined;
+ this.timeoutID_ = undefined;
this.active = false;
this.checkQueue_();
}.bind(this), /** @type {number} */ (this.Constant_.ANIMATION_LENGTH));
diff --git a/src/spinner/_spinner.scss b/src/spinner/_spinner.scss
index 34ac0dfca..602e597df 100644
--- a/src/spinner/_spinner.scss
+++ b/src/spinner/_spinner.scss
@@ -192,6 +192,14 @@
overflow: hidden;
border-color: inherit;
+ &.mdl-spinner__left {
+ float: left;
+ }
+
+ &.mdl-spinner__right {
+ float: right;
+ }
+
& .mdl-spinner__circle {
width: 200%;
}
diff --git a/src/spinner/spinner.js b/src/spinner/spinner.js
index 8159fb303..54f24af23 100644
--- a/src/spinner/spinner.js
+++ b/src/spinner/spinner.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
diff --git a/src/switch/switch.js b/src/switch/switch.js
index e71a591ed..ab4006e32 100644
--- a/src/switch/switch.js
+++ b/src/switch/switch.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
diff --git a/src/tabs/_tabs.scss b/src/tabs/_tabs.scss
index a9ec51d60..16ae9c207 100644
--- a/src/tabs/_tabs.scss
+++ b/src/tabs/_tabs.scss
@@ -69,7 +69,7 @@
left: 0px;
position: absolute;
background: $tab-highlight-color;
- animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+ animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) alternate forwards;
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
}
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index 3f4d005c7..0bb5b0aa9 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
@@ -111,6 +110,24 @@
}
};
+ /**
+ * Set the active tab.
+ *
+ * @public
+ * @param {Element|number} tab The tab element or index to set active.
+ */
+ MaterialTabs.prototype.setTab = function(tab) {
+ tab = (typeof tab === 'number') ? this.tabs_[tab] : tab;
+ if (tab && tab.getAttribute('href').charAt(0) === '#') {
+ var href = tab.href.split('#')[1];
+ var panel = this.element_.querySelector('#' + href);
+ this.resetTabState_();
+ this.resetPanelState_();
+ tab.classList.add(this.CssClasses_.ACTIVE_CLASS);
+ panel.classList.add(this.CssClasses_.ACTIVE_CLASS);
+ }
+ };
+
/**
* Initialize element.
*/
@@ -140,13 +157,10 @@
}
tab.addEventListener('click', function(e) {
- e.preventDefault();
- var href = tab.href.split('#')[1];
- var panel = ctx.element_.querySelector('#' + href);
- ctx.resetTabState_();
- ctx.resetPanelState_();
- tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
- panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+ if (tab.getAttribute('href').charAt(0) === '#') {
+ e.preventDefault();
+ ctx.setTab(tab);
+ }
});
}
diff --git a/src/textfield/_textfield.scss b/src/textfield/_textfield.scss
index 910c657d7..b2b1d606d 100644
--- a/src/textfield/_textfield.scss
+++ b/src/textfield/_textfield.scss
@@ -50,6 +50,11 @@
min-width: $input-text-button-size;
width: auto;
min-height: $input-text-button-size;
+
+ // Align icon button
+ .mdl-button--icon {
+ top: $input-text-expandable-icon-top;
+ }
}
// Styling for the input element.
diff --git a/src/textfield/textfield.js b/src/textfield/textfield.js
index 23883f3d1..1ee036eb5 100644
--- a/src/textfield/textfield.js
+++ b/src/textfield/textfield.js
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
(function() {
'use strict';
@@ -176,7 +175,10 @@
* @public
*/
MaterialTextfield.prototype.checkDirty = function() {
- if (this.input_.value && this.input_.value.length > 0) {
+ if (
+ (this.input_.value && this.input_.value.length > 0) ||
+ (this.input_.placeholder.trim() !== '')
+ ) {
this.element_.classList.add(this.CssClasses_.IS_DIRTY);
} else {
this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
diff --git a/src/third_party/rAF.js b/src/third_party/rAF.js
index d2e8d7774..863f561fd 100644
--- a/src/third_party/rAF.js
+++ b/src/third_party/rAF.js
@@ -9,42 +9,42 @@
// MIT license
(function() {
-'use strict';
+ 'use strict';
-if (!Date.now) {
- /**
- * Date.now polyfill.
- * @return {number} the current Date
- */
- Date.now = function() { return new Date().getTime(); };
- Date['now'] = Date.now;
-}
+ if (!Date.now) {
+ /**
+ * Date.now polyfill.
+ * @return {number} the current Date
+ */
+ Date.now = function() { return new Date().getTime(); };
+ Date['now'] = Date.now;
+ }
-var vendors = ['webkit', 'moz'];
-for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
- var vp = vendors[i];
- window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
- window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame'] ||
- window[vp + 'CancelRequestAnimationFrame']);
- window['requestAnimationFrame'] = window.requestAnimationFrame;
- window['cancelAnimationFrame'] = window.cancelAnimationFrame;
-}
+ var vendors = ['webkit', 'moz'];
+ for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+ var vp = vendors[i];
+ window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
+ window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame'] ||
+ window[vp + 'CancelRequestAnimationFrame']);
+ window['requestAnimationFrame'] = window.requestAnimationFrame;
+ window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+ }
-if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
- var lastTime = 0;
- /**
- * requestAnimationFrame polyfill.
- * @param {!Function} callback the callback function.
- */
- window.requestAnimationFrame = function(callback) {
- var now = Date.now();
- var nextTime = Math.max(lastTime + 16, now);
- return setTimeout(function() { callback(lastTime = nextTime); },
- nextTime - now);
- };
- window.cancelAnimationFrame = clearTimeout;
- window['requestAnimationFrame'] = window.requestAnimationFrame;
- window['cancelAnimationFrame'] = window.cancelAnimationFrame;
-}
+ if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+ var lastTime = 0;
+ /**
+ * requestAnimationFrame polyfill.
+ * @param {!Function} callback the callback function.
+ */
+ window.requestAnimationFrame = function(callback) {
+ var now = Date.now();
+ var nextTime = Math.max(lastTime + 16, now);
+ return setTimeout(function() { callback(lastTime = nextTime); },
+ nextTime - now);
+ };
+ window.cancelAnimationFrame = clearTimeout;
+ window['requestAnimationFrame'] = window.requestAnimationFrame;
+ window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+ }
})();
diff --git a/src/tooltip/README.md b/src/tooltip/README.md
index 5a79eed94..db61294d6 100755
--- a/src/tooltip/README.md
+++ b/src/tooltip/README.md
@@ -10,7 +10,7 @@ Tooltips are a ubiquitous feature of most user interfaces, regardless of a site'
```html
HTML
```
- 2. Following the target element, code a second element, such as a ``, `
`, or ``; this will be the tooltip itself. Include a `for` attribute whose value matches that of the target's `id`.
+ 2. Following the target element, code a second element, such as a ``, `
`, or ``; this will be the tooltip itself. Include a `for` (or `data-mdl-for`) attribute whose value matches that of the target's `id`.
```html
HTML
HyperText Markup Language
diff --git a/src/tooltip/_tooltip.scss b/src/tooltip/_tooltip.scss
index 59ade4894..bec1cd5f4 100644
--- a/src/tooltip/_tooltip.scss
+++ b/src/tooltip/_tooltip.scss
@@ -19,7 +19,6 @@
.mdl-tooltip {
transform: scale(0);
transform-origin: top center;
- will-change: transform;
z-index: 999;
background: $tooltip-background-color;
border-radius: 2px;
diff --git a/src/tooltip/snippets/tooltip-rich.html b/src/tooltip/snippets/tooltip-rich.html
index 98333bba8..dab28f54d 100644
--- a/src/tooltip/snippets/tooltip-rich.html
+++ b/src/tooltip/snippets/tooltip-rich.html
@@ -1,5 +1,5 @@
cloud_upload
-
- View Source
+ View Source