materialize-sass 0.97.7 → 0.97.8

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

@@ -14,12 +14,23 @@
       var $this = $(this),
           window_width = $(window).width();
 
-      $this.width('100%');
       var $active, $content, $links = $this.find('li.tab a'),
           $tabs_width = $this.width(),
           $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
           $index = 0;
 
+      // Finds right attribute for indicator based on active tab.
+      // el: jQuery Object
+      var calcRightPos = function(el) {
+        return $tabs_width - el.position().left - el.outerWidth() - $this.scrollLeft();
+      };
+
+      // Finds left attribute for indicator based on active tab.
+      // el: jQuery Object
+      var calcLeftPos = function(el) {
+        return el.position().left + $this.scrollLeft();
+      };
+
       // If the location.hash matches one of the links, use that as the active tab.
       $active = $($links.filter('[href="'+location.hash+'"]'));
 
@@ -45,8 +56,12 @@
       $this.append('<div class="indicator"></div>');
       var $indicator = $this.find('.indicator');
       if ($this.is(":visible")) {
-        $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
-        $indicator.css({"left": $index * $tab_width});
+        // $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
+        // $indicator.css({"left": $index * $tab_width});
+        setTimeout(function() {
+          $indicator.css({"right": calcRightPos($active) });
+          $indicator.css({"left": calcLeftPos($active) });
+        }, 0);
       }
       $(window).resize(function () {
         $tabs_width = $this.width();
@@ -55,14 +70,14 @@
           $index = 0;
         }
         if ($tab_width !== 0 && $tabs_width !== 0) {
-          $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
-          $indicator.css({"left": $index * $tab_width});
+          $indicator.css({"right": calcRightPos($active) });
+          $indicator.css({"left": calcLeftPos($active) });
         }
       });
 
       // Hide the remaining content
       $links.not($active).each(function () {
-        $(this.hash).hide();
+        $(Materialize.escapeHash(this.hash)).hide();
       });
 
 
@@ -89,8 +104,9 @@
 
         // Update the variables with the new link and content
         $active = $(this);
-        $content = $(this.hash);
+        $content = $(Materialize.escapeHash(this.hash));
         $links = $this.find('li.tab a');
+        var activeRect = $active.position();
 
         // Make the tab active.
         $active.addClass('active');
@@ -110,14 +126,14 @@
         }
 
         // Update indicator
+
         if (($index - $prev_index) >= 0) {
-          $indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, { duration: 300, queue: false, easing: 'easeOutQuad'});
-          $indicator.velocity({"left": $index * $tab_width}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
+          $indicator.velocity({"right": calcRightPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
+          $indicator.velocity({"left": calcLeftPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
 
-        }
-        else {
-          $indicator.velocity({"left": $index * $tab_width}, { duration: 300, queue: false, easing: 'easeOutQuad'});
-          $indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
+        } else {
+          $indicator.velocity({"left": calcLeftPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
+          $indicator.velocity({"right": calcRightPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
         }
 
         // Prevent the anchor's default click action
@@ -138,11 +154,11 @@
       // Default to "init"
       return methods.init.apply( this, arguments );
     } else {
-      $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
+      $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tabs' );
     }
   };
 
-  $(document).ready(function(){
+  $(document).on('turbolinks:load', function(){
     $('ul.tabs').tabs();
   });
 }( jQuery ));

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

@@ -29,33 +29,34 @@ Materialize.toast = function (message, displayLength, className, completeCallbac
 
     // Allows timer to be pause while being panned
     var timeLeft = displayLength;
-    var counterInterval = setInterval (function(){
-
-
-      if (newToast.parentNode === null)
-        window.clearInterval(counterInterval);
-
-      // If toast is not being dragged, decrease its time remaining
-      if (!newToast.classList.contains('panning')) {
-        timeLeft -= 20;
-      }
-
-      if (timeLeft <= 0) {
-        // Animate toast out
-        Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
-            easing: 'easeOutExpo',
-            queue: false,
-            complete: function(){
-              // Call the optional callback
-              if(typeof(completeCallback) === "function")
-                completeCallback();
-              // Remove toast after it times out
-              this[0].parentNode.removeChild(this[0]);
-            }
-          });
-        window.clearInterval(counterInterval);
-      }
-    }, 20);
+    var counterInterval;
+    if (timeLeft != null)  {
+      counterInterval = setInterval (function(){
+        if (newToast.parentNode === null)
+          window.clearInterval(counterInterval);
+
+        // If toast is not being dragged, decrease its time remaining
+        if (!newToast.classList.contains('panning')) {
+          timeLeft -= 20;
+        }
+
+        if (timeLeft <= 0) {
+          // Animate toast out
+          Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
+              easing: 'easeOutExpo',
+              queue: false,
+              complete: function(){
+                // Call the optional callback
+                if(typeof(completeCallback) === "function")
+                  completeCallback();
+                // Remove toast after it times out
+                this[0].parentNode.removeChild(this[0]);
+              }
+            });
+          window.clearInterval(counterInterval);
+        }
+      }, 20);
+    }
 
 
 
@@ -82,7 +83,7 @@ Materialize.toast = function (message, displayLength, className, completeCallbac
         }
         else {
           // Insert as text;
-          toast.innerHTML = html; 
+          toast.innerHTML = html;
         }
         // Bind hammer
         var hammerHandler = new Hammer(toast, {prevent_default: false});

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

@@ -25,6 +25,12 @@
       return this.each(function() {
         var tooltipId = Materialize.guid();
         var origin = $(this);
+
+        // Destroy old tooltip
+        if (origin.attr('data-tooltip-id')) {
+          $('#' + origin.attr('data-tooltip-id')).remove();
+        }
+
         origin.attr('data-tooltip-id', tooltipId);
 
         // Get attributes.
@@ -224,7 +230,7 @@
     return {x: newX, y: newY};
   };
 
-  $(document).ready(function(){
+  $(document).on('turbolinks:load', function(){
      $('.tooltipped').tooltip();
    });
 }( jQuery ));

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

@@ -61,7 +61,7 @@
   };
 
 
-  $(document).ready(function() {
+  $(document).on('turbolinks:load', function() {
     // Hardcoded .staggered-list scrollFire
     // var staggeredListOptions = [];
     // $('ul.staggered-list').each(function (i) {

data/app/assets/stylesheets/materialize.scss

@@ -1,11 +1,11 @@
 @charset "UTF-8";
 
 // Mixins
-@import "materialize/components/prefixer";
+// @import "materialize/components/prefixer";
 @import "materialize/components/mixins";
 @import "materialize/components/color";
 
-// Variables
+// Variables;
 @import "materialize/components/variables";
 
 // Reset
@@ -35,6 +35,6 @@
 @import "materialize/components/preloader";
 @import "materialize/components/slider";
 @import "materialize/components/carousel";
-@import "materialize/components/date_picker/default.scss";
-@import "materialize/components/date_picker/default.date.scss";
-@import "materialize/components/date_picker/default.time.scss";
+@import "materialize/components/date_picker/default";
+@import "materialize/components/date_picker/default.date";
+@import "materialize/components/date_picker/default.time";

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

@@ -6,7 +6,6 @@
   display: inline-block;
   height: $button-height;
   line-height: $button-height;
-  outline: 0;
   padding: $button-padding;
   text-transform: uppercase;
   vertical-align: middle;
@@ -18,21 +17,21 @@
 .btn.disabled,
 .btn-floating.disabled,
 .btn-large.disabled,
+.btn-flat.disabled,
 .btn:disabled,
-.btn-large:disabled,
 .btn-floating:disabled,
+.btn-large:disabled,
+.btn-flat:disabled,
 .btn[disabled],
+.btn-floating[disabled],
 .btn-large[disabled],
-.btn-floating[disabled] {
+.btn-flat[disabled] {
+  pointer-events: none;
   background-color: $button-disabled-background !important;
   box-shadow: none;
   color: $button-disabled-color !important;
   cursor: default;
 
-  * {
-    pointer-events: none;
-  }
-
   &:hover {
     background-color: $button-disabled-background !important;
     color: $button-disabled-color !important;
@@ -44,12 +43,23 @@
 .btn-floating,
 .btn-large,
 .btn-flat {
+
+  outline: 0;
+
   i {
     font-size: $button-font-size;
     line-height: inherit;
   }
 }
 
+// Shared focus button style
+.btn,
+.btn-floating {
+  &:focus {
+    background-color: darken($button-raised-background, 10%);
+  }
+}
+
 // Raised Button
 .btn {
   text-decoration: none;
@@ -144,6 +154,48 @@ button.btn-floating {
     }
   }
 
+  &.toolbar {
+    &.active {
+      & > a i {
+        opacity: 0;
+      }
+    }
+
+    padding: 0;
+    height: $button-floating-large-size;
+
+    ul {
+      display: flex;
+      top: 0;
+      bottom: 0;
+
+      li {
+        flex: 1;
+        display: inline-block;
+        margin: 0;
+        height: 100%;
+        transition: none;
+
+        a {
+          display: block;
+          overflow: hidden;
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-color: transparent;
+          box-shadow: none;
+          color: #fff;
+          line-height: $button-floating-large-size;
+          z-index: 1;
+
+          i {
+            line-height: inherit;
+          }
+        }
+      }
+    }
+  }
+
   position: fixed;
   right: 23px;
   bottom: 23px;
@@ -168,6 +220,18 @@ button.btn-floating {
       opacity: 0;
     }
   }
+
+  .fab-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: $button-floating-size;
+    height: $button-floating-size;
+    background-color: $button-floating-background;
+    border-radius: $button-floating-radius;
+    transform: scale(0);
+  }
 }
 
 // Flat button
@@ -183,13 +247,19 @@ button.btn-floating {
     background-color: transparent;
   }
 
+  &:focus,
   &:hover {
     background-color: rgba(0,0,0,.1);
     box-shadow: none;
   }
 
+  &:active {
+    background-color: rgba(0,0,0,.2);
+  }
+
   &.disabled {
-    color: $button-flat-disabled-color;
+    background-color: transparent !important;
+    color: $button-flat-disabled-color !important;
     cursor: default;
   }
 }

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

@@ -80,6 +80,7 @@
     .card-image {
       max-width: 50%;
       img {
+        border-radius: 2px 0 0 2px;
         max-width: 100%;
         width: auto;
       }
@@ -172,6 +173,7 @@
     background-color: $card-bg-color;
     width: 100%;
     overflow-y: auto;
+    left: 0;
     top: 100%;
     height: 100%;
     z-index: 3;

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

@@ -32,10 +32,9 @@
   border: none;
   border-bottom: 1px solid $chip-border-color;
   box-shadow: none;
-  margin-bottom: 30px;
+  margin: $input-margin;
   min-height: 45px;
   outline: none;
-  padding-bottom: $chip-margin;
   transition: all .3s;
 
   &.focus {
@@ -57,12 +56,11 @@
     border: 0;
     color: rgba(0,0,0,.6);
     display: inline-block;
-    font-size: 13px;
-    font-weight: 500;
-    height: 32px;
-    margin-right: 20px;
+    font-size: $input-font-size;
+    height: $input-height;
     line-height: 32px;
     outline: 0;
+    margin: 0;
     padding: 0 !important;
     width: 120px !important;
   }
@@ -72,3 +70,14 @@
     box-shadow: none !important;
   }
 }
+
+// Form prefix
+.prefix ~ .chips {
+  margin-left: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+.chips:empty ~ label  {
+  font-size: 0.8rem;
+  transform: translateY(-140%);
+}

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

@@ -44,7 +44,7 @@
 
     & > span > label {
       top: 1px;
-      left: 3px;
+      left: 0;
       height: 18px;
     }
 
@@ -55,3 +55,11 @@
     }
   }
 }
+
+// Input field specificity bugfix
+.input-field.col .dropdown-content [type="checkbox"] + label {
+  top: 1px;
+  left: 0;
+  height: 18px;
+}
+