materialize-sass 0.99.0 → 0.100.0

data/app/assets/javascripts/materialize/waves.js

@@ -7,7 +7,7 @@
  * https://github.com/fians/Waves/blob/master/LICENSE
  */
 
-;(function(window) {
+;(function (window) {
     'use strict';
 
     var Waves = Waves || {};
@@ -23,8 +23,9 @@
     }
 
     function offset(elem) {
-        var docElem, win,
-            box = {top: 0, left: 0},
+        var docElem,
+            win,
+            box = { top: 0, left: 0 },
             doc = elem && elem.ownerDocument;
 
         docElem = doc.documentElement;
@@ -44,7 +45,7 @@
 
         for (var a in obj) {
             if (obj.hasOwnProperty(a)) {
-                style += (a + ':' + obj[a] + ';');
+                style += a + ':' + obj[a] + ';';
             }
         }
 
@@ -56,7 +57,7 @@
         // Effect delay
         duration: 750,
 
-        show: function(e, element) {
+        show: function (e, element) {
 
             // Disable right click
             if (e.button === 2) {
@@ -71,15 +72,15 @@
             el.appendChild(ripple);
 
             // Get click coordinate and element witdh
-            var pos         = offset(el);
-            var relativeY   = (e.pageY - pos.top);
-            var relativeX   = (e.pageX - pos.left);
-            var scale       = 'scale('+((el.clientWidth / 100) * 10)+')';
+            var pos = offset(el);
+            var relativeY = e.pageY - pos.top;
+            var relativeX = e.pageX - pos.left;
+            var scale = 'scale(' + el.clientWidth / 100 * 10 + ')';
 
             // Support for touch devices
             if ('touches' in e) {
-              relativeY   = (e.touches[0].pageY - pos.top);
-              relativeX   = (e.touches[0].pageX - pos.left);
+                relativeY = e.touches[0].pageY - pos.top;
+                relativeX = e.touches[0].pageX - pos.left;
             }
 
             // Attach data to element
@@ -90,8 +91,8 @@
 
             // Set ripple position
             var rippleStyle = {
-                'top': relativeY+'px',
-                'left': relativeX+'px'
+                'top': relativeY + 'px',
+                'left': relativeX + 'px'
             };
 
             ripple.className = ripple.className + ' waves-notransition';
@@ -104,22 +105,22 @@
             rippleStyle['-ms-transform'] = scale;
             rippleStyle['-o-transform'] = scale;
             rippleStyle.transform = scale;
-            rippleStyle.opacity   = '1';
+            rippleStyle.opacity = '1';
 
             rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
-            rippleStyle['-moz-transition-duration']    = Effect.duration + 'ms';
-            rippleStyle['-o-transition-duration']      = Effect.duration + 'ms';
-            rippleStyle['transition-duration']         = Effect.duration + 'ms';
+            rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
+            rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
+            rippleStyle['transition-duration'] = Effect.duration + 'ms';
 
             rippleStyle['-webkit-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
-            rippleStyle['-moz-transition-timing-function']    = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
-            rippleStyle['-o-transition-timing-function']      = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
-            rippleStyle['transition-timing-function']         = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
+            rippleStyle['-moz-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
+            rippleStyle['-o-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
+            rippleStyle['transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
 
             ripple.setAttribute('style', convertStyle(rippleStyle));
         },
 
-        hide: function(e) {
+        hide: function (e) {
             TouchHandler.touchup(e);
 
             var el = this;
@@ -134,9 +135,9 @@
                 return false;
             }
 
-            var relativeX   = ripple.getAttribute('data-x');
-            var relativeY   = ripple.getAttribute('data-y');
-            var scale       = ripple.getAttribute('data-scale');
+            var relativeX = ripple.getAttribute('data-x');
+            var relativeY = ripple.getAttribute('data-y');
+            var scale = ripple.getAttribute('data-scale');
 
             // Get delay beetween mousedown and mouse leave
             var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
@@ -147,10 +148,10 @@
             }
 
             // Fade out ripple after delay
-            setTimeout(function() {
+            setTimeout(function () {
                 var style = {
-                    'top': relativeY+'px',
-                    'left': relativeX+'px',
+                    'top': relativeY + 'px',
+                    'left': relativeX + 'px',
                     'opacity': '0',
 
                     // Duration
@@ -162,15 +163,15 @@
                     '-moz-transform': scale,
                     '-ms-transform': scale,
                     '-o-transform': scale,
-                    'transform': scale,
+                    'transform': scale
                 };
 
                 ripple.setAttribute('style', convertStyle(style));
 
-                setTimeout(function() {
+                setTimeout(function () {
                     try {
                         el.removeChild(ripple);
-                    } catch(e) {
+                    } catch (e) {
                         return false;
                     }
                 }, Effect.duration);
@@ -178,7 +179,7 @@
         },
 
         // Little hack to make <input> can perform waves effect
-        wrapInput: function(elements) {
+        wrapInput: function (elements) {
             for (var a = 0; a < elements.length; a++) {
                 var el = elements[a];
 
@@ -213,7 +214,6 @@
         }
     };
 
-
     /**
      * Disable mousedown event for 500ms during and after touch
      */
@@ -223,13 +223,13 @@
          * within the 500ms. Cannot mouseup between touchstart and
          * touchend, nor in the 500ms after touchend. */
         touches: 0,
-        allowEvent: function(e) {
+        allowEvent: function (e) {
             var allow = true;
 
             if (e.type === 'touchstart') {
                 TouchHandler.touches += 1; //push
             } else if (e.type === 'touchend' || e.type === 'touchcancel') {
-                setTimeout(function() {
+                setTimeout(function () {
                     if (TouchHandler.touches > 0) {
                         TouchHandler.touches -= 1; //pop after 500ms
                     }
@@ -240,12 +240,11 @@
 
             return allow;
         },
-        touchup: function(e) {
+        touchup: function (e) {
             TouchHandler.allowEvent(e);
         }
     };
 
-
     /**
      * Delegated click handler for .waves-effect element.
      * returns null when .waves-effect element not in "click tree"
@@ -258,17 +257,13 @@
         var element = null;
         var target = e.target || e.srcElement;
 
-        while (target.parentElement !== null) {
+        while (target.parentNode !== null) {
             if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
                 element = target;
                 break;
-            } else if (target.className.indexOf('waves-effect') !== -1) {
-                element = target;
-                break;
             }
-            target = target.parentElement;
+            target = target.parentNode;
         }
-
         return element;
     }
 
@@ -288,10 +283,11 @@
 
             element.addEventListener('mouseup', Effect.hide, false);
             element.addEventListener('mouseleave', Effect.hide, false);
+            element.addEventListener('dragend', Effect.hide, false);
         }
     }
 
-    Waves.displayEffect = function(options) {
+    Waves.displayEffect = function (options) {
         options = options || {};
 
         if ('duration' in options) {
@@ -314,12 +310,12 @@
      *   Intended to be used with dynamically loaded forms/inputs, or
      * where the user doesn't want a delegated click handler.
      */
-    Waves.attach = function(element) {
+    Waves.attach = function (element) {
         //FUTURE: automatically add waves classes and allow users
         // to specify them with an options param? Eg. light/classic/button
         if (element.tagName.toLowerCase() === 'input') {
             Effect.wrapInput([element]);
-            element = element.parentElement;
+            element = element.parentNode;
         }
 
         if ('ontouchstart' in window) {
@@ -331,8 +327,7 @@
 
     window.Waves = Waves;
 
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         Waves.displayEffect();
     }, false);
-
 })(window);

data/app/assets/stylesheets/materialize/components/_buttons.scss

@@ -217,7 +217,7 @@ button.btn-floating {
   bottom: 23px;
   padding-top: 15px;
   margin-bottom: 0;
-  z-index: 998;
+  z-index: 997;
 
   ul {
     left: 0;

data/app/assets/stylesheets/materialize/components/_carousel.scss

@@ -2,7 +2,6 @@
   &.carousel-slider {
     top: 0;
     left: 0;
-    height: 0;
 
     .carousel-fixed-item {
       &.with-indicators {
@@ -19,7 +18,7 @@
     .carousel-item {
       width: 100%;
       height: 100%;
-      min-height: 400px;
+      min-height: $carousel-height;
       position: absolute;
       top: 0;
       left: 0;
@@ -39,15 +38,15 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: 400px;
+  height: $carousel-height;
   perspective: 500px;
   transform-style: preserve-3d;
   transform-origin: 0% 50%;
 
   .carousel-item {
     display: none;
-    width: 200px;
-    height: 200px;
+    width: $carousel-item-width;
+    height: $carousel-item-height;
     position: absolute;
     top: 0;
     left: 0;

data/app/assets/stylesheets/materialize/components/_chips.scss

@@ -73,6 +73,7 @@
   // Autocomplete
   .autocomplete-content {
     margin-top: 0;
+    margin-bottom: 0;
   }
 }
 

data/app/assets/stylesheets/materialize/components/_collapsible.scss

@@ -7,21 +7,18 @@
 }
 
 .collapsible-header {
-  display: block;
+  display: flex;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-  min-height: $collapsible-height;
-  line-height: $collapsible-line-height;
-  padding: 0 1rem;
+  line-height: 1.5;
+  padding: 1rem;
   background-color: $collapsible-header-color;
   border-bottom: 1px solid $collapsible-border-color;
 
   i {
     width: 2rem;
     font-size: 1.6rem;
-    line-height: $collapsible-line-height;
-    display: block;
-    float: left;
+    display: inline-block;
     text-align: center;
     margin-right: 1rem;
   }

data/app/assets/stylesheets/materialize/components/_color.scss

@@ -406,7 +406,7 @@ $colors: (
       @return map-get($curr_color, $type);
     }
   }
-  @warn "Unknown `#{name}` in $colors.";
+  @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
   @return null;
 }
 

data/app/assets/stylesheets/materialize/components/_global.scss

@@ -22,7 +22,7 @@ ul {
     padding-left: 0;
     list-style-type: none;
 
-    li {
+    & > li {
       list-style-type: none;
     }
   }
@@ -75,12 +75,10 @@ a {
 
 .hoverable {
   transition: box-shadow .25s;
-  box-shadow: 0;
-}
 
-.hoverable:hover {
-  transition: box-shadow .25s;
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  &:hover {
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
 }
 
 // Dividers
@@ -247,8 +245,7 @@ video.responsive-video {
       bottom: 0;
       min-width: 100%;
       min-height: 100%;
-      -webkit-transform: translate3d(0,0,0);
-              transform: translate3d(0,0,0);
+      transform: translate3d(0,0,0);
       transform: translateX(-50%);
     }
   }
@@ -503,7 +500,9 @@ td, th{
       padding-left: 72px;
       position: relative;
 
-      .circle {
+      // Don't style circles inside preloader classes.
+      &:not(.circle-clipper) > .circle,
+      :not(.circle-clipper) > .circle {
         position: absolute;
         width: 42px;
         height: 42px;
@@ -710,11 +709,6 @@ td, th{
 
 // No Text Select
 .no-select {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 

data/app/assets/stylesheets/materialize/components/_navbar.scss

@@ -63,7 +63,6 @@ nav {
     display: inline-block;
     font-size: $navbar-brand-font-size;
     padding: 0;
-    white-space: nowrap;
 
     &.center {
       left: 50%;

data/app/assets/stylesheets/materialize/components/_tabs.scss

@@ -22,10 +22,7 @@
     display: flex;
 
     .tab {
-      -webkit-box-flex: 1;
-      -webkit-flex-grow: 1;
-          -ms-flex-positive: 1;
-              flex-grow: 1;
+      flex-grow: 1;
     }
   }
 
@@ -86,9 +83,6 @@
     display: flex;
 
     .tab {
-      -webkit-box-flex: 1;
-      -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
       flex-grow: 1;
 
       a {

data/app/assets/stylesheets/materialize/components/_toast.scss

@@ -24,7 +24,6 @@
   border-radius: 2px;
   top: 35px;
   width: auto;
-  clear: both;
   margin-top: 10px;
   position: relative;
   max-width:100%;
@@ -37,13 +36,15 @@
   font-size: 1.1rem;
   font-weight: 300;
   color: $toast-text-color;
-
   display: flex;
   align-items: center;
   justify-content: space-between;
+  cursor: default;
 
-  .btn, .btn-flat {
-    margin: 0;
+  .toast-action {
+    color: $toast-action-color;
+    font-weight: 500;
+    margin-right: -25px;
     margin-left: 3rem;
   }
 
@@ -52,14 +53,7 @@
   }
 
   @media #{$small-and-down} {
-    width:100%;
+    width: 100%;
     border-radius: 0;
   }
-  @media #{$medium-only} {
-    float: left;
-  }
-  @media #{$large-and-up} {
-    float: right;
-  }
-
 }