material_design_lite-sass 1.1.3 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a425971e9db70d19938707aa33ba82829a009473
-  data.tar.gz: 0f48e424e3ed7d927c2d345041861b94865688e1
+  metadata.gz: 4a431f98fd7d327611f0872e9893edf70b41a731
+  data.tar.gz: 8e3e45abfa4ecd7b4528bad6947beb1a9a5009ac
 SHA512:
-  metadata.gz: 9c4d31dbfdae2ab0d059ca5e10b949e404e8a98cd603c86758c12108d85d65c418b09487407e52045486146f573096930201ba570d1e26f3467b5ca26d785f38
-  data.tar.gz: 497acf8388dcd1c2db060b14628539afe5246be2e9b1904b5810a3630dff55d08d5f6a13643bf7df47866e7a30272ca56b65c221cbb516a988541aa4a8f0b70b
+  metadata.gz: 99e5d18da249526ea9adc30baecd76262014efeabf50072829d0cf338270c22257b7c67593392eb38b22197ec12823668ee8c45475f2defcd499cea1492898e7
+  data.tar.gz: 457eb462c1bf3cd2b3fde235269e9f8a8782f6c18e81f31742dffa429f5e89075a7811729388b86e89f705459967a2e20081c9ffb3be899a52f159d2d218a09b

data/.travis.yml

@@ -2,9 +2,9 @@ language: ruby
 
 rvm:
   - 2.0.0
-  - 2.1.8
-  - 2.2.4
-  - 2.3.0
+  - 2.1.9
+  - 2.2.5
+  - 2.3.1
 
 before_install: gem install bundler
 

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.2.0 (2016-08-12)
+
+- Update assets to match upstream version
+
+Library version: 
+
+- Material Design Lite v1.2.0
+- Material Icons v2.2.2
+
 ## 1.1.3 (2016-03-18)
 
 - Update assets to match upstream version

data/README.md

@@ -38,6 +38,28 @@ Open  `app/assets/javascripts/application.js` file and add this line:
 ```
 Restart Rails web server if it was running and now your Rails application is powered by Sass version of Material Design Lite.
 
+#### Turbolinks
+
+Material Design Lite doesn't support turbolinks by default. You have to either disable turbolinks or add this JavaScript code to your project:
+
+For turbolinks v2:
+
+```javascript
+document.addEventListener('page:change', function() {
+  componentHandler.upgradeDom();
+});
+```
+
+For turbolinks v5:
+
+```javascript
+document.addEventListener('turbolinks:load', function() {
+  componentHandler.upgradeDom();
+});
+```
+
+Put this code, for instance, in `app/assets/javascripts/application.js` file or in `app/views/layouts/application.html.erb` file after closing `</body>` tag.
+
 ## Usage
 
 By default, using `@import 'material';` and `//= require material`, all of Material Design Lite components are imported. You can also import components individually.
@@ -89,6 +111,7 @@ Individual Sass components can be included like this:
 @import "material/button";
 @import "material/card";
 @import "material/checkbox";
+@import "material/chip";
 @import "material/data-table";
 @import "material/dialog";
 @import "material/mega_footer";

data/lib/material_design_lite/sass/version.rb

@@ -1,5 +1,5 @@
 module MaterialDesignLite
   module Sass
-    VERSION = '1.1.3'
+    VERSION = '1.2.0'
   end
 end

data/vendor/assets/javascripts/material.js

@@ -232,8 +232,8 @@ componentHandler = (function() {
 
       var ev;
       if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
-        ev = new Event('mdl-componentupgraded', {
-          'bubbles': true, 'cancelable': false
+        ev = new CustomEvent('mdl-componentupgraded', {
+          bubbles: true, cancelable: false
         });
       } else {
         ev = document.createEvent('Events');
@@ -251,10 +251,10 @@ componentHandler = (function() {
    */
   function upgradeElementsInternal(elements) {
     if (!Array.isArray(elements)) {
-      if (typeof elements.item === 'function') {
-        elements = Array.prototype.slice.call(/** @type {Array} */ (elements));
-      } else {
+      if (elements instanceof Element) {
         elements = [elements];
+      } else {
+        elements = Array.prototype.slice.call(elements);
       }
     }
     for (var i = 0, n = elements.length, element; i < n; i++) {
@@ -363,13 +363,14 @@ componentHandler = (function() {
 
       var ev;
       if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
-        ev = new Event('mdl-componentdowngraded', {
-          'bubbles': true, 'cancelable': false
+        ev = new CustomEvent('mdl-componentdowngraded', {
+          bubbles: true, cancelable: false
         });
       } else {
         ev = document.createEvent('Events');
         ev.initEvent('mdl-componentdowngraded', true, true);
       }
+      component.element_.dispatchEvent(ev);
     }
   }
 
@@ -1793,7 +1794,7 @@ MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
    */
 MaterialRadio.prototype.check = function () {
     this.btnElement_.checked = true;
-    this.updateClasses_();
+    this.onChange_(null);
 };
 MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
 /**
@@ -1803,7 +1804,7 @@ MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
    */
 MaterialRadio.prototype.uncheck = function () {
     this.btnElement_.checked = false;
-    this.updateClasses_();
+    this.onChange_(null);
 };
 MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
 /**
@@ -3049,16 +3050,16 @@ MaterialTooltip.prototype.handleMouseEnter_ = function (event) {
     if (this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT)) {
         left = props.width / 2;
         if (top + marginTop < 0) {
-            this.element_.style.top = 0;
-            this.element_.style.marginTop = 0;
+            this.element_.style.top = '0';
+            this.element_.style.marginTop = '0';
         } else {
             this.element_.style.top = top + 'px';
             this.element_.style.marginTop = marginTop + 'px';
         }
     } else {
         if (left + marginLeft < 0) {
-            this.element_.style.left = 0;
-            this.element_.style.marginLeft = 0;
+            this.element_.style.left = '0';
+            this.element_.style.marginLeft = '0';
         } else {
             this.element_.style.left = left + 'px';
             this.element_.style.marginLeft = marginLeft + 'px';
@@ -3076,11 +3077,11 @@ MaterialTooltip.prototype.handleMouseEnter_ = function (event) {
     this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
 };
 /**
-   * Handle mouseleave for tooltip.
+   * Hide tooltip on mouseleave or scroll
    *
    * @private
    */
-MaterialTooltip.prototype.handleMouseLeave_ = function () {
+MaterialTooltip.prototype.hideTooltip_ = function () {
     this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
 };
 /**
@@ -3088,7 +3089,7 @@ MaterialTooltip.prototype.handleMouseLeave_ = function () {
    */
 MaterialTooltip.prototype.init = function () {
     if (this.element_) {
-        var forElId = this.element_.getAttribute('for');
+        var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for');
         if (forElId) {
             this.forElement_ = document.getElementById(forElId);
         }
@@ -3098,11 +3099,12 @@ MaterialTooltip.prototype.init = function () {
                 this.forElement_.setAttribute('tabindex', '0');
             }
             this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
-            this.boundMouseLeaveHandler = this.handleMouseLeave_.bind(this);
+            this.boundMouseLeaveAndScrollHandler = this.hideTooltip_.bind(this);
             this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
             this.forElement_.addEventListener('touchend', this.boundMouseEnterHandler, false);
-            this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveHandler, false);
-            window.addEventListener('touchstart', this.boundMouseLeaveHandler);
+            this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
+            window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+            window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
         }
     }
 };

data/vendor/assets/javascripts/material/layout.js

@@ -557,7 +557,6 @@
     });
 
     tab.show = selectTab;
-
   }
   window['MaterialLayoutTab'] = MaterialLayoutTab;
 

data/vendor/assets/javascripts/material/mdlComponentHandler.js

@@ -229,8 +229,8 @@ componentHandler = (function() {
 
       var ev;
       if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
-        ev = new Event('mdl-componentupgraded', {
-          'bubbles': true, 'cancelable': false
+        ev = new CustomEvent('mdl-componentupgraded', {
+          bubbles: true, cancelable: false
         });
       } else {
         ev = document.createEvent('Events');
@@ -248,10 +248,10 @@ componentHandler = (function() {
    */
   function upgradeElementsInternal(elements) {
     if (!Array.isArray(elements)) {
-      if (typeof elements.item === 'function') {
-        elements = Array.prototype.slice.call(/** @type {Array} */ (elements));
-      } else {
+      if (elements instanceof Element) {
         elements = [elements];
+      } else {
+        elements = Array.prototype.slice.call(elements);
       }
     }
     for (var i = 0, n = elements.length, element; i < n; i++) {
@@ -360,13 +360,14 @@ componentHandler = (function() {
 
       var ev;
       if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
-        ev = new Event('mdl-componentdowngraded', {
-          'bubbles': true, 'cancelable': false
+        ev = new CustomEvent('mdl-componentdowngraded', {
+          bubbles: true, cancelable: false
         });
       } else {
         ev = document.createEvent('Events');
         ev.initEvent('mdl-componentdowngraded', true, true);
       }
+      component.element_.dispatchEvent(ev);
     }
   }
 

data/vendor/assets/javascripts/material/radio.js

@@ -202,7 +202,7 @@
    */
   MaterialRadio.prototype.check = function() {
     this.btnElement_.checked = true;
-    this.updateClasses_();
+    this.onChange_(null);
   };
   MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
 
@@ -213,7 +213,7 @@
    */
   MaterialRadio.prototype.uncheck = function() {
     this.btnElement_.checked = false;
-    this.updateClasses_();
+    this.onChange_(null);
   };
   MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
 

data/vendor/assets/javascripts/material/tooltip.js

@@ -76,16 +76,16 @@
     if (this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT)) {
       left = (props.width / 2);
       if (top + marginTop < 0) {
-        this.element_.style.top = 0;
-        this.element_.style.marginTop = 0;
+        this.element_.style.top = '0';
+        this.element_.style.marginTop = '0';
       } else {
         this.element_.style.top = top + 'px';
         this.element_.style.marginTop = marginTop + 'px';
       }
     } else {
       if (left + marginLeft < 0) {
-        this.element_.style.left = 0;
-        this.element_.style.marginLeft = 0;
+        this.element_.style.left = '0';
+        this.element_.style.marginLeft = '0';
       } else {
         this.element_.style.left = left + 'px';
         this.element_.style.marginLeft = marginLeft + 'px';
@@ -106,11 +106,11 @@
   };
 
   /**
-   * Handle mouseleave for tooltip.
+   * Hide tooltip on mouseleave or scroll
    *
    * @private
    */
-  MaterialTooltip.prototype.handleMouseLeave_ = function() {
+  MaterialTooltip.prototype.hideTooltip_ = function() {
     this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
   };
 
@@ -120,7 +120,8 @@
   MaterialTooltip.prototype.init = function() {
 
     if (this.element_) {
-      var forElId = this.element_.getAttribute('for');
+      var forElId = this.element_.getAttribute('for') ||
+          this.element_.getAttribute('data-mdl-for');
 
       if (forElId) {
         this.forElement_ = document.getElementById(forElId);
@@ -133,11 +134,12 @@
         }
 
         this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
-        this.boundMouseLeaveHandler = this.handleMouseLeave_.bind(this);
+        this.boundMouseLeaveAndScrollHandler = this.hideTooltip_.bind(this);
         this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
         this.forElement_.addEventListener('touchend', this.boundMouseEnterHandler, false);
-        this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveHandler, false);
-        window.addEventListener('touchstart', this.boundMouseLeaveHandler);
+        this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
+        window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+        window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
       }
     }
   };

data/vendor/assets/stylesheets/_material.scss

@@ -32,6 +32,7 @@
 @import "material/button";
 @import "material/card";
 @import "material/checkbox";
+@import "material/chip";
 @import "material/data-table";
 @import "material/dialog";
 @import "material/mega_footer";
@@ -52,4 +53,4 @@
 @import "material/shadow";
 @import "material/grid";
 @import "material/material-icons";
-@import "material/roboto"
+@import "material/roboto";

data/vendor/assets/stylesheets/material/_chip.scss

@@ -0,0 +1,88 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "variables";
+@import "mixins";
+
+.mdl-chip {
+    height: $chip-height;
+    font-family: $preferred_font;
+    line-height: $chip-height;
+    padding: 0 12px;
+    border: 0;
+    border-radius: $chip-height / 2;
+    background-color: $chip-bg-color;
+    display: inline-block;
+    color: $text-color-primary;
+    margin: 2px 0;
+    font-size: 0;
+    white-space: nowrap;
+
+    &__text {
+        font-size: $chip-font-size;
+        vertical-align: middle;
+        display: inline-block;
+    }
+
+    &__action {
+        height: 24px;
+        width: 24px;
+        background: transparent;
+        opacity: 0.54;
+        display: inline-block;
+        cursor: pointer;
+        text-align: center;
+        vertical-align: middle;
+        padding: 0;
+        margin: 0 0 0 4px;
+        font-size: $chip-font-size;
+        text-decoration: none;
+        color: $text-color-primary;
+        border: none;
+        outline: none;
+        overflow: hidden;
+    }
+    
+    &__contact {
+        height: $chip-height;
+        width: $chip-height;
+        border-radius: $chip-height / 2;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 8px;
+        overflow: hidden;
+        text-align: center;
+        font-size: 18px;
+        line-height: 32px;
+    }
+    
+    &:focus {
+        outline: 0;
+        @include shadow-2dp();
+    }
+    
+    &:active {
+        background-color: $chip-bg-active-color;
+    }
+    
+    &--deletable {
+        padding-right: 4px;
+    }
+    
+    &--contact {
+        padding-left: 0;
+    }
+}

data/vendor/assets/stylesheets/material/_layout.scss

@@ -189,7 +189,7 @@
     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;
     top: 0;
@@ -214,18 +214,14 @@
     }
 
     @media screen and (min-width: $layout-screen-size-threshold + 1px) {
-      .mdl-layout--fixed-drawer > & {
-        display: none;
-      }
+      line-height: $layout-header-desktop-row-height;
 
-      .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;
     }
 

data/vendor/assets/stylesheets/material/_material-icons.scss

@@ -16,8 +16,6 @@
   font-style: normal;
   font-size: 24px;  /* Preferred icon size */
   display: inline-block;
-  width: 1em;
-  height: 1em;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;

data/vendor/assets/stylesheets/material/_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.

data/vendor/assets/stylesheets/material/_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;

data/vendor/assets/stylesheets/material/_variables.scss

@@ -42,6 +42,8 @@
  * -----Data table
  * -----Dialog
  * -----Snackbar
+ * -----Tooltip
+ * -----Chip
  *
  * Even though all variables have the `!default` directive, most of them
  * should not be changed as they are dependent one another. This can cause
@@ -189,8 +191,8 @@ $layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
 $layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
 $layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
 $layout-drawer-navigation-color: #757575 !default;
-$layout-drawer-navigation-link-active-background: unquote("rgb(#{$color-light-contrast})") !default;
-$layout-drawer-navigation-link-active-color: unquote("rgb(#{$palette-grey-300})") !default;
+$layout-drawer-navigation-link-active-background: unquote("rgb(#{$palette-grey-300})") !default;
+$layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-light-contrast})") !default;
 
 // Header
 $layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
@@ -582,3 +584,9 @@ $snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
 /* TOOLTIP */
 $tooltip-font-size: 10px !default;
 $tooltip-font-size-large: 14px !default;
+
+/* CHIP */
+$chip-bg-color: rgb(222, 222, 222) !default;
+$chip-bg-active-color: rgb(214, 214, 214) !default;
+$chip-height: 32px !default;
+$chip-font-size: 13px !default; 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_design_lite-sass
 version: !ruby/object:Gem::Version
-  version: 1.1.3
+  version: 1.2.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-03-17 00:00:00.000000000 Z
+date: 2016-08-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -137,6 +137,7 @@ files:
 - vendor/assets/stylesheets/material/_button.scss
 - vendor/assets/stylesheets/material/_card.scss
 - vendor/assets/stylesheets/material/_checkbox.scss
+- vendor/assets/stylesheets/material/_chip.scss
 - vendor/assets/stylesheets/material/_color-definitions.scss
 - vendor/assets/stylesheets/material/_data-table.scss
 - vendor/assets/stylesheets/material/_dialog.scss
@@ -188,7 +189,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.8
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: Google's Material Design Lite with Material Icons and Roboto for Sass powered