Merge branch 'master' of https://github.com/google/material-design-lite

* 'master' of https://github.com/google/material-design-lite:
  Move ripple style initialization to first click.
  More scoping changes to docs

docs/_assets/main.css

@@ -81,7 +81,7 @@ pre[class*=language-]>code[data-language="markup"]::before {
 .docs-layout-header .mdl-textfield label:after {
   background-color: rgba(255, 255, 255, 0.12);
 }
-body.about .docs-layout-header {
+.about .docs-layout-header {
   background: url('logo.svg'), url('header.jpg');
   background-size: auto 30%, cover;
   background-repeat: no-repeat, no-repeat;
@@ -134,7 +134,7 @@ body:not(.about) .docs-layout-title {
   flex-shrink: 0;
   padding-left: 16px !important;
 }
-.docs-navigation span.mdl-icon {
+.docs-navigation .mdl-icon {
   font-size: 24px;
   margin-right: 8px;
 }
@@ -157,9 +157,6 @@ body:not(.about) .docs-layout-title {
 .docs-navigation a:not(.download) {
   opacity: 0.65;
 }
-.docs-navigation a.download > span {
-  opacity: 0.65;
-}
 .docs-navigation .mdl-layout-spacer ~ a {
   text-transform: none;
 }
@@ -202,13 +199,11 @@ body:not(.about) .docs-layout-title {
   font-weight: 300;
   text-transform: uppercase;
 }
-.docs-layout-content > footer {
-  height: 120px;
-}
 .docs-footer {
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
+  height: 120px;
 }
 .docs-footer ul {
   padding: 0;
@@ -331,7 +326,7 @@ body:not(.about) .docs-layout-title {
 .template > .template__preview {
   height: auto;
 }
-.docs-layout-content p {
+.docs-text-styling p {
   font-size: 15px;
   margin-bottom: 32px;
 
@@ -339,18 +334,18 @@ body:not(.about) .docs-layout-title {
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
 }
 
-.docs-layout-content ol li {
+.docs-text-styling ol li {
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
 }
 
-.docs-layout-content h1 {
+.docs-text-styling h1 {
   color: #c2185b;
   font-size: 2.5em;
   margin: .67em 0;
 }
 
 
-.docs-layout-content h2 {
+.docs-text-styling h2 {
   padding-top: 48px;
   font-size: 24px;
   font-weight: 400;
@@ -364,7 +359,7 @@ body:not(.about) .docs-layout-title {
   margin-bottom: 0;
 }
 
-.docs-layout-content a {
+.docs-text-styling a {
   @extend mdl-color-text--cyan-600;
   text-decoration: none;
 }
@@ -374,8 +369,7 @@ body:not(.about) .docs-layout-title {
   font-weight: normal;
 }
 
-.docs-layout-title a,
+.docs-layout-title a {
-button a {
   color: inherit;
   text-decoration: none;
 }

docs/_templates/components.html

@@ -6,7 +6,7 @@
 <link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
 
 <div class="mdl-components mdl-js-components">
-  <aside class="mdl-components__nav">
+  <aside class="mdl-components__nav docs-text-styling">
     {% for category in page.categories %}
     <a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }}">
       <div class="mdl-components__link-image"
@@ -28,9 +28,11 @@
     {% for category in page.categories -%}
     <section id="{{ category.name }}-section" class="mdl-components__page mdl-grid mdl-cell mdl-cell--12-col">
       <div class="mdl-cell mdl-cell--12-col">
-        <div class="mdl-typography--display-3">{{ category.title }}</div>
+        <span class="docs-text-styling">
-        <p>{{ category.description }}</p>
+          <div class="mdl-typography--display-3">{{ category.title }}</div>
-        <br><br>
+          <p>{{ category.description }}</p>
+          <br><br>
+        </span>
         {% for component in category.components %}
           {% set demo_css = "../../src/" + component.name + "/demo.css" %}
           <style>
@@ -40,11 +42,15 @@
           <script>
             {% include demo_js ignore missing %}
           </script>
-          <h1 class="mdl-components__classname">{{ component.class }}</h1>
+          <span class="docs-text-styling">
+            <h1 class="mdl-components__classname">{{ component.class }}</h1>
+          </span>
           {% set demo = "../../src/" + component.name + "/demo.html" %}
           {% include demo ignore missing %}
-          {% set doc = "../../dist/components/" + component.name + "/index.html" %}
+          <span class="docs-text-styling">
-          {% include doc ignore missing %}
+            {% set doc = "../../dist/components/" + component.name + "/index.html" %}
+            {% include doc ignore missing %}
+          </span>
         {%- endfor %}
       </div>
     </section>

docs/_templates/customize.html

@@ -2,8 +2,10 @@
 
 {% block content %}
 
+<span class="docs-text-styling">
 <h1>{{page.title}}</h1>
 
 {{content|safe}}
+</span>
 
 {% endblock %}

docs/_templates/layout.html

@@ -83,10 +83,10 @@
           {{content|safe}}
         {% endblock %}
       </div>
-      <section class="download mdl-color--grey-800">
+      <section class="docs-text-styling download mdl-color--grey-800">
         <a href="#" class="mdl-color-text--grey-50">Download Kit</a>
       </section>
-      <footer class="docs-footer mdl-mini-footer mdl-color--grey-900">
+      <footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
         <ul>
           <button class="mdl-mini-footer--social-btn social-btn social-btn__twitter"></button>
           <button class="mdl-mini-footer--social-btn social-btn social-btn__blogger"></button>

docs/_templates/page.html

@@ -2,10 +2,10 @@
 
 {% block content %}
 
+<span class="docs-text-styling">
 <h1>{{page.title}}</h1>
 
 {{content|safe}}
+</span>
 
 {% endblock %}
-
-

docs/_templates/templates.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 {% block content %}
 {% for template in page.templates %}
-<section class="template template--{{ template.name }} mdl-grid mdl-cell mdl-cell--12-col">
+<section class="template template--{{ template.name }} docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
   <div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
     <h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">{{ template.title }}</h3>
     <p class="mdl-cell mdl-cell--12-col">

src/footer/demo.html

@@ -1,4 +1,4 @@
-  <div class="demo-preview-block .demo-page--footer">
+  <div class="demo-preview-block demo-page--footer">
 
   <footer class="mdl-mega-footer">
     <div class="mdl-mega-footer--top-section">

src/ripple/ripple.js

@@ -65,6 +65,16 @@ MaterialRipple.prototype.CssClasses_ = {
 MaterialRipple.prototype.downHandler_ = function(event) {
   'use strict';
 
+  if (!this.rippleElement_.style.width && !this.rippleElement_.style.height) {
+    var rect = this.element_.getBoundingClientRect();
+    this.boundHeight = rect.height;
+    this.boundWidth = rect.width;
+    this.rippleSize_ = Math.sqrt(rect.width * rect.width +
+        rect.height * rect.height) * 2 + 2;
+    this.rippleElement_.style.width = this.rippleSize_ + 'px';
+    this.rippleElement_.style.height = this.rippleSize_ + 'px';
+  }
+
   this.rippleElement_.classList.add(this.CssClasses_.IS_VISIBLE);
 
   if (event.type === 'mousedown' && this.ignoringMouseDown_) {
@@ -134,14 +144,6 @@ MaterialRipple.prototype.init = function() {
       // mouse down after a touch start.
       this.ignoringMouseDown_ = false;
 
-      if (this.rippleElement_) {
-        var bound = this.element_.getBoundingClientRect();
-        this.rippleSize_ = Math.sqrt(bound.width * bound.width +
-            bound.height * bound.height) * 2 + 2;
-        this.rippleElement_.style.width = this.rippleSize_ + 'px';
-        this.rippleElement_.style.height = this.rippleSize_ + 'px';
-      }
-
       this.boundDownHandler = this.downHandler_.bind(this);
       this.element_.addEventListener('mousedown',
         this.boundDownHandler);
@@ -185,8 +187,8 @@ MaterialRipple.prototype.init = function() {
             scale = this.Constant_.FINAL_SCALE;
             size = this.rippleSize_ + 'px';
             if (recentering) {
-              offset = 'translate(' + bound.width / 2 + 'px, ' +
+              offset = 'translate(' + this.boundWidth / 2 + 'px, ' +
-                bound.height / 2 + 'px)';
+                this.boundHeight / 2 + 'px)';
             }
           }