material_design_lite-sass 1.0.2.1 → 1.0.3

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

@@ -15,132 +15,136 @@
  * limitations under the License.
  */
 
-/**
- * Class constructor for Tooltip MDL component.
- * Implements MDL component design pattern defined at:
- * https://github.com/jasonmayes/mdl-component-design-pattern
- * @param {HTMLElement} element The element that will be upgraded.
- */
-function MaterialTooltip(element) {
-  'use strict';
-
-  this.element_ = element;
-
-  // Initialize instance.
-  this.init();
-}
-
-/**
- * Store constants in one place so they can be updated easily.
- * @enum {string | number}
- * @private
- */
-MaterialTooltip.prototype.Constant_ = {
-  // None for now.
-};
-
-/**
- * Store strings for class names defined by this component that are used in
- * JavaScript. This allows us to simply change it in one place should we
- * decide to modify at a later date.
- * @enum {string}
- * @private
- */
-MaterialTooltip.prototype.CssClasses_ = {
-  IS_ACTIVE: 'is-active'
-};
-
-/**
- * Handle mouseenter for tooltip.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialTooltip.prototype.handleMouseEnter_ = function(event) {
+(function() {
   'use strict';
 
-  event.stopPropagation();
-  var props = event.target.getBoundingClientRect();
-  var left = props.left + (props.width / 2);
-  var marginLeft = -1 * (this.element_.offsetWidth / 2);
-
-  if (left + 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';
-  }
-
-  this.element_.style.top = props.top + props.height + 10 + 'px';
-  this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
-  window.addEventListener('scroll', this.boundMouseLeaveHandler, false);
-  window.addEventListener('touchmove', this.boundMouseLeaveHandler, false);
-};
-
-/**
- * Handle mouseleave for tooltip.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialTooltip.prototype.handleMouseLeave_ = function(event) {
-  'use strict';
-
-  event.stopPropagation();
-  this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
-  window.removeEventListener('scroll', this.boundMouseLeaveHandler);
-  window.removeEventListener('touchmove', this.boundMouseLeaveHandler, false);
-};
-
-/**
- * Initialize element.
- */
-MaterialTooltip.prototype.init = function() {
-  'use strict';
-
-  if (this.element_) {
-    var forElId = this.element_.getAttribute('for');
-
-    if (forElId) {
-      this.forElement_ = document.getElementById(forElId);
+  /**
+   * Class constructor for Tooltip MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+  var MaterialTooltip = function MaterialTooltip(element) {
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window.MaterialTooltip = MaterialTooltip;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {String | Number}
+   * @private
+   */
+  MaterialTooltip.prototype.Constant_ = {
+    // None for now.
+  };
+
+  /**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {String}
+   * @private
+   */
+  MaterialTooltip.prototype.CssClasses_ = {
+    IS_ACTIVE: 'is-active'
+  };
+
+  /**
+   * Handle mouseenter for tooltip.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialTooltip.prototype.handleMouseEnter_ = function(event) {
+    event.stopPropagation();
+    var props = event.target.getBoundingClientRect();
+    var left = props.left + (props.width / 2);
+    var marginLeft = -1 * (this.element_.offsetWidth / 2);
+
+    if (left + 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';
     }
 
-    if (this.forElement_) {
-      // Tabindex needs to be set for `blur` events to be emitted
-      if (!this.forElement_.getAttribute('tabindex')) {
-        this.forElement_.setAttribute('tabindex', '0');
+    this.element_.style.top = props.top + props.height + 10 + 'px';
+    this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
+    window.addEventListener('scroll', this.boundMouseLeaveHandler, false);
+    window.addEventListener('touchmove', this.boundMouseLeaveHandler, false);
+  };
+
+  /**
+   * Handle mouseleave for tooltip.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialTooltip.prototype.handleMouseLeave_ = function(event) {
+    event.stopPropagation();
+    this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
+    window.removeEventListener('scroll', this.boundMouseLeaveHandler);
+    window.removeEventListener('touchmove', this.boundMouseLeaveHandler, false);
+  };
+
+  /**
+   * Initialize element.
+   */
+  MaterialTooltip.prototype.init = function() {
+
+    if (this.element_) {
+      var forElId = this.element_.getAttribute('for');
+
+      if (forElId) {
+        this.forElement_ = document.getElementById(forElId);
       }
 
-      this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
-      this.boundMouseLeaveHandler = this.handleMouseLeave_.bind(this);
-      this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler,
-          false);
-      this.forElement_.addEventListener('click', this.boundMouseEnterHandler,
-          false);
-      this.forElement_.addEventListener('blur', this.boundMouseLeaveHandler);
-      this.forElement_.addEventListener('touchstart', this.boundMouseEnterHandler,
-          false);
-      this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveHandler);
+      if (this.forElement_) {
+        // Tabindex needs to be set for `blur` events to be emitted
+        if (!this.forElement_.getAttribute('tabindex')) {
+          this.forElement_.setAttribute('tabindex', '0');
+        }
+
+        this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
+        this.boundMouseLeaveHandler = this.handleMouseLeave_.bind(this);
+        this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler,
+            false);
+        this.forElement_.addEventListener('click', this.boundMouseEnterHandler,
+            false);
+        this.forElement_.addEventListener('blur', this.boundMouseLeaveHandler);
+        this.forElement_.addEventListener('touchstart', this.boundMouseEnterHandler,
+            false);
+        this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveHandler);
+      }
     }
-  }
-};
-
-/*
-* Downgrade the component
-*/
-MaterialTooltip.prototype.mdlDowngrade_ = function() {
-  'use strict';
-  if (this.forElement_) {
-    this.forElement_.removeEventListener('mouseenter', this.boundMouseEnterHandler, false);
-    this.forElement_.removeEventListener('click', this.boundMouseEnterHandler, false);
-    this.forElement_.removeEventListener('touchstart', this.boundMouseEnterHandler, false);
-    this.forElement_.removeEventListener('mouseleave', this.boundMouseLeaveHandler);
-  }
-};
-
-// The component registers itself. It can assume componentHandler is available
-// in the global scope.
-componentHandler.register({
-  constructor: MaterialTooltip,
-  classAsString: 'MaterialTooltip',
-  cssClass: 'mdl-tooltip'
-});
+  };
+
+  /**
+   * Downgrade the component
+   *
+   * @private
+   */
+  MaterialTooltip.prototype.mdlDowngrade_ = function() {
+    if (this.forElement_) {
+      this.forElement_.removeEventListener('mouseenter', this.boundMouseEnterHandler, false);
+      this.forElement_.removeEventListener('click', this.boundMouseEnterHandler, false);
+      this.forElement_.removeEventListener('touchstart', this.boundMouseEnterHandler, false);
+      this.forElement_.removeEventListener('mouseleave', this.boundMouseLeaveHandler);
+    }
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialTooltip,
+    classAsString: 'MaterialTooltip',
+    cssClass: 'mdl-tooltip'
+  });
+})();

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

@@ -46,7 +46,7 @@
 
     font-family: $preferred_font;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $badge-font-size;
     width: $badge-size;
     height: $badge-size;
     border-radius : 50%;

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

@@ -23,7 +23,6 @@
   border: none;
   border-radius: $button-border-radius;
   color: $button-secondary-color;
-  display: block;
   position: relative;
   height: $button-height;
   min-width: $button-min-width;
@@ -231,7 +230,8 @@ input.mdl-button[type="submit"] {
     z-index: 0;
     overflow: hidden;
 
-    .mdl-button[disabled] & .mdl-ripple {
+    .mdl-button[disabled] & .mdl-ripple,
+    .mdl-button.mdl-button--disabled & .mdl-ripple {
       background-color: transparent;
     }
   }
@@ -264,7 +264,8 @@ input.mdl-button[type="submit"] {
 
 .mdl-button {
   // Bump up specificity by using [disabled] twice.
-  &[disabled][disabled] {
+  &[disabled][disabled],
+  &.mdl-button--disabled.mdl-button--disabled {
     color: $button-secondary-color-disabled;
     cursor: auto;
     background-color: transparent;
@@ -272,7 +273,8 @@ input.mdl-button[type="submit"] {
 
   &--fab {
     // Bump up specificity by using [disabled] twice.
-    &[disabled][disabled] {
+    &[disabled][disabled],
+    &.mdl-button--disabled.mdl-button--disabled {
       background-color: $button-primary-color-disabled;
       color: $button-secondary-color-disabled;
       @include shadow-2dp();
@@ -281,7 +283,8 @@ input.mdl-button[type="submit"] {
 
   &--raised {
     // Bump up specificity by using [disabled] twice.
-    &[disabled][disabled] {
+    &[disabled][disabled],
+    &.mdl-button--disabled.mdl-button--disabled {
       background-color: $button-primary-color-disabled;
       color: $button-secondary-color-disabled;
       @include shadow-2dp();
@@ -289,10 +292,14 @@ input.mdl-button[type="submit"] {
   }
   &--colored {
     // Bump up specificity by using [disabled] twice.
-    &[disabled][disabled] {
-      background-color: $button-primary-color-disabled;
+    &[disabled][disabled],
+    &.mdl-button--disabled.mdl-button--disabled {
       color: $button-secondary-color-disabled;
-      @include shadow-2dp();
     }
   }
 }
+
+// Align icons inside buttons with text
+.mdl-button .material-icons {
+  vertical-align: middle;
+}

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

@@ -72,7 +72,7 @@
 }
 
 .mdl-card__subtitle-text {
-  font-size: 14px;
+  font-size: $card-subtitle-font-size;
   color: grey;
   margin: 0;
 }

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

@@ -135,7 +135,7 @@
 .mdl-checkbox__label {
   position: relative;
   cursor: pointer;
-  font-size: 16px;
+  font-size: $checkbox-label-font-size;
   line-height: $checkbox-label-height;
   margin: 0;
 

data/vendor/assets/stylesheets/material/_data-table.scss

@@ -22,7 +22,7 @@
   border: $data-table-dividers;
   border-collapse: collapse;
   white-space: nowrap;
-  font-size: 13px;
+  font-size: $data-table-font-size;
   background-color: unquote("rgb(#{$color-white})");
 
   thead {
@@ -85,13 +85,15 @@
     text-overflow: ellipsis;
     @include typo-body-2();
     height: $data-table-row-height;
-    font-size: 12px;
+    font-size: $data-table-header-font-size;
     color: $data-table-header-color;
     padding-bottom: 8px;
     box-sizing: border-box;
 
     .mdl-data-table__select {
-      position: relative;
+      position: absolute;
+      bottom: 8px;
+      left: 24px;
     }
   }
 }

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

@@ -1,3 +1,19 @@
+/**
+ * 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.
+ */
+
 @function strip-units($number) {
   @return $number / ($number * 0 + 1);
 }

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

@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+/*
+* NOTE: Some rules here are applied using duplicate selectors.
+* This is on purpose to increase their specificity when applied.
+* For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
+*/
+
 @import "variables";
 
 .mdl-grid {
@@ -87,10 +93,7 @@
 
   // Define partial sizes for columnNumber < totalColumns.
   @for $i from 1 through ($grid-phone-columns - 1) {
-    .mdl-cell--#{$i}-col {
-      @include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
-    }
-
+    .mdl-cell--#{$i}-col,
     .mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
       @include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
     }
@@ -98,10 +101,7 @@
 
   // Define 100% for everything else.
   @for $i from $grid-phone-columns through $grid-desktop-columns {
-    .mdl-cell--#{$i}-col {
-      @include full-size($grid-phone-gutter);
-    }
-
+    .mdl-cell--#{$i}-col,
     .mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
       @include full-size($grid-phone-gutter);
     }
@@ -128,10 +128,7 @@
 
   // Define partial sizes for columnNumber < totalColumns.
   @for $i from 1 through ($grid-tablet-columns - 1) {
-    .mdl-cell--#{$i}-col {
-      @include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
-    }
-
+    .mdl-cell--#{$i}-col,
     .mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
       @include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
     }
@@ -139,10 +136,7 @@
 
   // Define 100% for everything else.
   @for $i from $grid-tablet-columns through $grid-desktop-columns {
-    .mdl-cell--#{$i}-col {
-      @include full-size($grid-tablet-gutter);
-    }
-
+    .mdl-cell--#{$i}-col,
     .mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
       @include full-size($grid-tablet-gutter);
     }
@@ -169,10 +163,7 @@
 
   // Define partial sizes for all numbers of columns.
   @for $i from 1 through $grid-desktop-columns {
-    .mdl-cell--#{$i}-col {
-      @include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
-    }
-
+    .mdl-cell--#{$i}-col,
     .mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
       @include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
     }