Merge branch 'mdl-1.0'

docs/_assets/main.css

@@ -268,6 +268,11 @@ body:not(.about) .mdl-navigation__link.download > button {
   font-size: 12px;
 }
 
+.docs-footer .docs-link-list li {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+
 .about-panel {
   box-sizing: border-box;
   width: 100%;
@@ -902,7 +907,7 @@ code[class*=language-], pre[class*=language-] {
   position: relative;
 }
 .styles .content li:before,
-.docs-readme li:before {
+.docs-readme .content li:before {
   position: absolute;
   top: 2px;
   left: -28px;

docs/_templates/layout.html

@@ -126,7 +126,7 @@
             <a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a>
           </li>
         </ul>
-        <ul>
+        <ul class="docs-link-list">
           <li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
           <li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li>
         </ul>

docs/_templates/started.html

@@ -229,7 +229,7 @@ gulp</code></pre>
       <p>
         Material Design Lite is built to provide a lightweight and basic set of Material Design components  and templates for web sites.
         The project does not intend to provide structures to create all possible UX needs, but to provide a low-friction Material Design implementation you can build on.
-        Even within Material Design itself, cards specifically, it is unfeasible to provide every combination in a seemless manner.
+        Even within Material Design itself, cards specifically, it is unfeasible to provide every combination in a seamless manner.
         When you find something not provided, such as dropdowns in the drawer, you may need to code your own component.
       </p>
       <p>

src/button/_button.scss

@@ -267,7 +267,7 @@ input.mdl-button[type="submit"] {
   &[disabled][disabled],
   &.mdl-button--disabled.mdl-button--disabled {
     color: $button-secondary-color-disabled;
-    cursor: auto;
+    cursor: default;
     background-color: transparent;
   }
 

src/footer/_mega_footer.scss

@@ -169,8 +169,8 @@
   z-index: 1;
   opacity: 0;
 
-  &~.mdl-mega-footer--heading:after,
+  & + .mdl-mega-footer--heading:after,
-  &~.mdl-mega-footer__heading:after {
+  & + .mdl-mega-footer__heading:after {
     font-family: 'Material Icons';
     content: '\E5CE'
   }
@@ -178,12 +178,18 @@
 
 .mdl-mega-footer--heading-checkbox:checked,
 .mdl-mega-footer__heading-checkbox:checked {
-  &~ul {
+  // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
-    display:none;
+  // break consecutive "+" operators in some cases. Therefore, we need to use
+  // both here to cover all the bases.
+  & ~ .mdl-mega-footer--link-list,
+  & ~ .mdl-mega-footer__link-list,
+  & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+  & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
+    display: none;
   }
 
-  &~.mdl-mega-footer--heading:after,
+  & + .mdl-mega-footer--heading:after,
-  &~.mdl-mega-footer__heading:after {
+  & + .mdl-mega-footer__heading:after {
     font-family: 'Material Icons';
     content: '\E5CF'
   }
@@ -260,19 +266,25 @@
   .mdl-mega-footer__heading-checkbox {
     display: none;
 
-    &~.mdl-mega-footer--heading:after,
+    & + .mdl-mega-footer--heading:after,
-    &~.mdl-mega-footer__heading:after {
+    & + .mdl-mega-footer__heading:after {
       content: '';
     }
   }
   .mdl-mega-footer--heading-checkbox:checked,
   .mdl-mega-footer__heading-checkbox:checked {
-    &~ul {
+    // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
+    // break consecutive "+" operators in some cases. Therefore, we need to use
+    // both here to cover all the bases.
+    & ~ .mdl-mega-footer--link-list,
+    & ~ .mdl-mega-footer__link-list,
+    & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+    & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
       display: block;
     }
-  
+
-    &~.mdl-mega-footer--heading:after,
+    & + .mdl-mega-footer--heading:after,
-    &~.mdl-mega-footer__heading:after {
+    & + .mdl-mega-footer__heading:after {
       content: '';
     }
   }

src/layout/README.md

@@ -322,7 +322,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
 | `mdl-layout--small-screen-only` | Hides an element on larger screens | Optional; goes on any descendant of `mdl-layout` |
 | `mdl-layout__header--waterfall` | Allows a "waterfall" effect with multiple header lines | Optional; goes on header element |
 | `mdl-layout__header--transparent` | Makes header transparent (draws on top of layout background) | Optional; goes on header element |
-| `mdl-layout__header--transparent` | Uses a header without a shadow | Optional; goes on header element |
+| `mdl-layout__header--seamed` | Uses a header without a shadow | Optional; goes on header element |
 | `mdl-layout__tab-bar` | Defines container as an MDL tab bar | Required on div element inside header (tabbed layout) |
 | `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|

src/layout/_layout.scss

@@ -413,7 +413,7 @@
     transition-property: background-color;
     @include material-animation-default();
 
-    .mdl-layout__drawer.is-visible ~ & {
+    &.is-visible {
       background-color: rgba(0, 0, 0, 0.5);
       visibility: visible;
     }

src/layout/layout.js

@@ -151,6 +151,7 @@
       // 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);
       }
     }
   };
@@ -162,6 +163,7 @@
    */
   MaterialLayout.prototype.drawerToggleHandler_ = function() {
     this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+    this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
   };
 
   /**
@@ -243,13 +245,6 @@
 
       var mode = this.Mode_.STANDARD;
 
-      // Keep an eye on screen size, and add/remove auxiliary class for styling
-      // of small screens.
-      this.screenSizeMediaQuery_ = window.matchMedia(
-          /** @type {string} */ (this.Constant_.MAX_WIDTH));
-      this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
-      this.screenSizeHandler_();
-
       if (this.header_) {
         if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
           mode = this.Mode_.SEAMED;
@@ -329,8 +324,16 @@
         this.element_.appendChild(obfuscator);
         obfuscator.addEventListener('click',
             this.drawerToggleHandler_.bind(this));
+        this.obfuscator_ = obfuscator;
       }
 
+      // Keep an eye on screen size, and add/remove auxiliary class for styling
+      // of small screens.
+      this.screenSizeMediaQuery_ = window.matchMedia(
+          /** @type {string} */ (this.Constant_.MAX_WIDTH));
+      this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
+      this.screenSizeHandler_();
+
       // Initialize tabs, if any.
       if (this.header_ && this.tabBar_) {
         this.element_.classList.add(this.CssClasses_.HAS_TABS);

src/slider/_slider.scss

@@ -185,7 +185,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
       background: transparent;
     }
 
-    &.is-lowest-value ~
+    &.is-lowest-value +
         .mdl-slider__background-flex > .mdl-slider__background-upper {
       left: 6px;
     }
@@ -205,7 +205,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
       transform: scale(1.5);
     }
 
-    &.is-lowest-value:active ~
+    &.is-lowest-value:active +
         .mdl-slider__background-flex > .mdl-slider__background-upper {
       left: 9px;
     }
@@ -271,13 +271,13 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
       background: $range-bg-color;
     }
 
-    &:disabled ~
+    &:disabled +
         .mdl-slider__background-flex > .mdl-slider__background-lower {
       background-color: $range-bg-color;
       left: -6px;
     }
 
-    &:disabled ~
+    &:disabled +
         .mdl-slider__background-flex > .mdl-slider__background-upper {
       left: 6px;
     }
@@ -298,7 +298,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
       transform: scale(0.667);
     }
 
-    &.is-lowest-value:disabled:active ~
+    &.is-lowest-value:disabled:active +
         .mdl-slider__background-flex > .mdl-slider__background-upper {
       left: 6px;
     }

templates/android-dot-com/index.html

@@ -27,7 +27,7 @@
     <!-- Page styles -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.min.css">
+    <link rel="stylesheet" href="material.min.css">
     <link rel="stylesheet" href="styles.css">
     <style>
     #view-source {
@@ -71,6 +71,9 @@
               <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a>
             </nav>
           </div>
+          <span class="android-mobile-title mdl-layout-title">
+            <img class="android-logo-image" src="images/android-logo.png">
+          </span>
           <button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
             <i class="material-icons">more_vert</i>
           </button>
@@ -80,9 +83,6 @@
             <li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
             <li class="mdl-menu__item">Android History</li>
           </ul>
-          <span class="android-mobile-title mdl-layout-title">
-            <img class="android-logo-image" src="images/android-logo.png">
-          </span>
         </div>
       </div>
 

templates/android-dot-com/material.scss

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../../src/material-design-lite';

templates/android-dot-com/styles.css

@@ -110,7 +110,7 @@ a img{
     width: 800px;
   }
 
-  .android-search-box.is-focused ~ .android-navigation-container {
+  .android-search-box.is-focused + .android-navigation-container {
     opacity: 0;
     width: 100px;
   }
@@ -481,7 +481,11 @@ a img{
     transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  .android-search-box.is-focused ~ .android-mobile-title {
+  /* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
+     consecutive "+" operators in some cases. Therefore, we need to use both
+     here to cover all the bases. */
+  .android.android-search-box.is-focused ~ .android-mobile-title,
+  .android-search-box.is-focused + .android-navigation-container + .android-mobile-title {
     opacity: 0;
   }
 

templates/blog/index.html

@@ -89,11 +89,11 @@
               <div>
                 <strong>The Newist</strong>
               </div>
-              <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="menubtn">
+              <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="menubtn">
-                <li class="mdl-menu__item mdl-js-ripple-effect">About</li>
+                <li class="mdl-menu__item">About</li>
-                <li class="mdl-menu__item mdl-js-ripple-effect">Message</li>
+                <li class="mdl-menu__item">Message</li>
-                <li class="mdl-menu__item mdl-js-ripple-effect">Favorite</li>
+                <li class="mdl-menu__item">Favorite</li>
-                <li class="mdl-menu__item mdl-js-ripple-effect">Search</li>
+                <li class="mdl-menu__item">Search</li>
               </ul>
               <button id="menubtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
                 <i class="material-icons" role="presentation">more_vert</i>

templates/dashboard/index.html

@@ -62,7 +62,7 @@
   </head>
   <body>
     <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
-      <header class="demo-header mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600">
+      <header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
         <div class="mdl-layout__header-row">
           <span class="mdl-layout-title">Home</span>
           <div class="mdl-layout-spacer"></div>