materialize-sass 0.97.8 → 0.98.0

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

@@ -86,18 +86,20 @@
             started = true;
             tooltipEl.velocity('stop');
             backdrop.velocity('stop');
-            tooltipEl.css({ display: 'block', left: '0px', top: '0px' });
+            tooltipEl.css({ visibility: 'visible', left: '0px', top: '0px' });
 
             // Tooltip positioning
             var originWidth = origin.outerWidth();
             var originHeight = origin.outerHeight();
-
             var tooltipHeight = tooltipEl.outerHeight();
             var tooltipWidth = tooltipEl.outerWidth();
             var tooltipVerticalMovement = '0px';
             var tooltipHorizontalMovement = '0px';
+            var backdropOffsetWidth = backdrop[0].offsetWidth;
+            var backdropOffsetHeight = backdrop[0].offsetHeight;
             var scaleXFactor = 8;
             var scaleYFactor = 8;
+            var scaleFactor = 0;
             var targetTop, targetLeft, newCoordinates;
 
             if (tooltipPosition === "top") {
@@ -105,7 +107,6 @@
               targetTop = origin.offset().top - tooltipHeight - margin;
               targetLeft = origin.offset().left + originWidth/2 - tooltipWidth/2;
               newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
-
               tooltipVerticalMovement = '-10px';
               backdrop.css({
                 bottom: 0,
@@ -113,7 +114,7 @@
                 borderRadius: '14px 14px 0 0',
                 transformOrigin: '50% 100%',
                 marginTop: tooltipHeight,
-                marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+                marginLeft: (tooltipWidth/2) - (backdropOffsetWidth/2)
               });
             }
             // Left Position
@@ -161,7 +162,7 @@
               backdrop.css({
                 top: 0,
                 left: 0,
-                marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+                marginLeft: (tooltipWidth/2) - (backdropOffsetWidth/2)
               });
             }
 
@@ -172,14 +173,15 @@
             });
 
             // Calculate Scale to fill
-            scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdrop.css('width'));
-            scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdrop.css('height'));
+            scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdropOffsetWidth);
+            scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdropOffsetHeight);
+            scaleFactor = Math.max(scaleXFactor, scaleYFactor);
 
-            tooltipEl.velocity({ marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 350, queue: false })
+            tooltipEl.velocity({ translateY: tooltipVerticalMovement, translateX: tooltipHorizontalMovement}, { duration: 350, queue: false })
               .velocity({opacity: 1}, {duration: 300, delay: 50, queue: false});
-            backdrop.css({ display: 'block' })
+            backdrop.css({ visibility: 'visible' })
               .velocity({opacity:1},{duration: 55, delay: 0, queue: false})
-              .velocity({scaleX: scaleXFactor, scaleY: scaleYFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
+              .velocity({scaleX: scaleFactor, scaleY: scaleFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
           };
 
           timeoutRef = setTimeout(showTooltip, tooltipDelay); // End Interval
@@ -195,13 +197,13 @@
           setTimeout(function() {
             if (started !== true) {
               tooltipEl.velocity({
-                opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 225, queue: false});
+                opacity: 0, translateY: 0, translateX: 0}, { duration: 225, queue: false});
               backdrop.velocity({opacity: 0, scaleX: 1, scaleY: 1}, {
                 duration:225,
                 queue: false,
                 complete: function(){
-                  backdrop.css('display', 'none');
-                  tooltipEl.css('display', 'none');
+                  backdrop.css({ visibility: 'hidden' });
+                  tooltipEl.css({ visibility: 'hidden' });
                   started = false;}
               });
             }

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

@@ -1,6 +1,6 @@
 (function ($) {
   // Image transition function
-  Materialize.fadeInImage =  function(selectorOrEl) {
+  Materialize.fadeInImage = function(selectorOrEl) {
     var element;
     if (typeof(selectorOrEl) === 'string') {
       element = $(selectorOrEl);
@@ -11,30 +11,30 @@
     }
     element.css({opacity: 0});
     $(element).velocity({opacity: 1}, {
-        duration: 650,
-        queue: false,
-        easing: 'easeOutSine'
-      });
+      duration: 650,
+      queue: false,
+      easing: 'easeOutSine'
+    });
     $(element).velocity({opacity: 1}, {
-          duration: 1300,
-          queue: false,
-          easing: 'swing',
-          step: function(now, fx) {
-              fx.start = 100;
-              var grayscale_setting = now/100;
-              var brightness_setting = 150 - (100 - now)/1.75;
-
-              if (brightness_setting < 100) {
-                brightness_setting = 100;
-              }
-              if (now >= 0) {
-                $(this).css({
-                    "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
-                    "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
-                });
-              }
-          }
-      });
+      duration: 1300,
+      queue: false,
+      easing: 'swing',
+      step: function(now, fx) {
+        fx.start = 100;
+        var grayscale_setting = now/100;
+        var brightness_setting = 150 - (100 - now)/1.75;
+
+        if (brightness_setting < 100) {
+          brightness_setting = 100;
+        }
+        if (now >= 0) {
+          $(this).css({
+              "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
+              "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
+          });
+        }
+      }
+    });
   };
 
   // Horizontal staggered list

data/app/assets/stylesheets/materialize.scss

@@ -13,11 +13,13 @@
 
 // materialize/components
 @import "materialize/components/global";
+@import "materialize/components/badges";
 @import "materialize/components/icons-material-design";
 @import "materialize/components/grid";
 @import "materialize/components/navbar";
 @import "materialize/components/roboto";
 @import "materialize/components/typography";
+@import "materialize/components/transitions";
 @import "materialize/components/cards";
 @import "materialize/components/toast";
 @import "materialize/components/tabs";

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

@@ -0,0 +1,46 @@
+// Badges
+span.badge {
+  min-width: 3rem;
+  padding: 0 6px;
+  margin-left: 14px;
+  text-align: center;
+  font-size: 1rem;
+  line-height: $badge-height;
+  height: $badge-height;
+  color: color('grey', 'darken-1');
+  float: right;
+  box-sizing: border-box;
+
+  &.new {
+    font-weight: 300;
+    font-size: 0.8rem;
+    color: #fff;
+    background-color: $badge-bg-color;
+    border-radius: 2px;
+  }
+  &.new:after {
+    content: " new";
+  }
+
+  &[data-badge-caption]::after {
+    content: " " attr(data-badge-caption);
+  }
+}
+nav ul a span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: 4px;
+  line-height: $badge-height;
+  height: $badge-height;
+}
+
+// Line height centering
+.collection-item span.badge {
+  margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2});
+}
+.collapsible span.badge {
+  margin-top: calc(#{$collapsible-line-height / 2} - #{$badge-height / 2});
+}
+.side-nav span.badge {
+  margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
+}

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

@@ -79,6 +79,35 @@
 
 // Floating button
 .btn-floating {
+  &:hover {
+    background-color: $button-floating-background-hover;
+    @extend .z-depth-1-half;
+  }
+
+  &:before {
+    border-radius: 0;
+  }
+
+  &.btn-large {
+    width: $button-floating-large-size;
+    height: $button-floating-large-size;
+    i {
+      line-height: $button-floating-large-size;
+    }
+  }
+
+  &.halfway-fab {
+    &.left {
+      right: auto;
+      left: 24px;
+    }
+
+    position: absolute;
+    right: 24px;
+    bottom: 0;
+    transform: translateY(50%);
+  }
+
   display: inline-block;
   color: $button-floating-color;
   position: relative;
@@ -103,23 +132,6 @@
     font-size: $button-large-icon-font-size;
     line-height: $button-floating-size;
   }
-
-  &:hover {
-    background-color: $button-floating-background-hover;
-    @extend .z-depth-1-half;
-  }
-
-  &:before {
-    border-radius: 0;
-  }
-
-  &.btn-large {
-    width: $button-floating-large-size;
-    height: $button-floating-large-size;
-    i {
-      line-height: $button-floating-large-size;
-    }
-  }
 }
 
 // button fix

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

@@ -133,9 +133,9 @@
       position: absolute;
       bottom: 0;
       left: 0;
+      max-width: 100%;
       padding: $card-padding;
     }
-
   }
 
   .card-content {
@@ -147,7 +147,13 @@
       color: inherit;
     }
     .card-title {
-      line-height: 48px;
+      display: block;
+      line-height: 32px;
+      margin-bottom: 8px;
+
+      i {
+        line-height: 32px;
+      }
     }
   }
 
@@ -155,7 +161,7 @@
     position: relative;
     background-color: inherit;
     border-top: 1px solid rgba(160,160,160,.2);
-    padding: $card-padding;
+    padding: 16px $card-padding;
 
     a:not(.btn):not(.btn-large):not(.btn-floating) {
       color: $card-link-color;

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

@@ -47,7 +47,7 @@
   .carousel-item {
     display: none;
     width: 200px;
-    height: 400px;
+    height: 200px;
     position: absolute;
     top: 0;
     left: 0;

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

@@ -10,7 +10,7 @@
   display: block;
   cursor: pointer;
   min-height: $collapsible-height;
-  line-height: $collapsible-height;
+  line-height: $collapsible-line-height;
   padding: 0 1rem;
   background-color: $collapsible-header-color;
   border-bottom: 1px solid $collapsible-border-color;
@@ -18,7 +18,7 @@
   i {
     width: 2rem;
     font-size: 1.6rem;
-    line-height: $collapsible-height;
+    line-height: $collapsible-line-height;
     display: block;
     float: left;
     text-align: center;
@@ -30,11 +30,7 @@
   display: none;
   border-bottom: 1px solid $collapsible-border-color;
   box-sizing: border-box;
-
-  p {
-    margin: 0;
-    padding: 2rem;
-  }
+  padding: 2rem;
 }
 
 // sideNav collapsible styling

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

@@ -344,15 +344,16 @@ ul.staggered-list li {
 }
 
 // Footer
-footer.page-footer {
-  margin-top: 20px;
+.page-footer {
   padding-top: 20px;
   background-color: $footer-bg-color;
 
   .footer-copyright {
     overflow: hidden;
-    height: 50px;
-    line-height: 50px;
+    min-height: 50px;
+    display: flex;
+    align-items: center;
+    padding: 10px 0px;
     color: rgba(255,255,255,.8);
     background-color: rgba(51,51,51,.08);
     @extend .light;
@@ -495,7 +496,7 @@ td, th{
 
   .collection-item {
     background-color: $collection-bg-color;
-    line-height: 1.5rem;
+    line-height: $collection-line-height;
     padding: 10px 20px;
     margin: 0;
     border-bottom: 1px solid $collection-border-color;
@@ -592,63 +593,6 @@ td, th{
 
 
 
-// Badges
-span.badge {
-  min-width: 3rem;
-  padding: 0 6px;
-  margin-left: 14px;
-  text-align: center;
-  font-size: 1rem;
-  line-height: inherit;
-  color: color('grey', 'darken-1');
-  float: right;
-  box-sizing: border-box;
-
-  &.new {
-    font-weight: 300;
-    font-size: 0.8rem;
-    color: #fff;
-    background-color: $badge-bg-color;
-    border-radius: 2px;
-  }
-  &.new:after {
-    content: " new";
-  }
-
-  &[data-badge-caption]::after {
-    content: " " attr(data-badge-caption);
-  }
-}
-nav ul a span.badge {
-  display: inline-block;
-  float: none;
-  margin-left: 4px;
-  line-height: 22px;
-  height: 22px;
-}
-.side-nav span.badge.new,
-.collapsible span.badge.new {
-  &::before {
-    content: '';
-    position: absolute;
-    top: 10px;
-    right: 0;
-    bottom: 10px;
-    left: 0;
-    background-color: $badge-bg-color;
-    border-radius: 2px;
-    z-index: -1;
-  }
-
-  position: relative;
-  background-color: transparent;
-}
-.collapsible span.badge.new {
-  z-index: 1;
-}
-
-
-
 // Responsive Videos
 .video-container {
     position: relative;

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

@@ -1,38 +1,39 @@
 .materialboxed {
-  display: block;
-  cursor: zoom-in;
-  position: relative;
-  transition: opacity .4s;
-
   &:hover {
     &:not(.active) {
       opacity: .8;
     }
-    will-change: left, top, width, height;
   }
-}
 
-.materialboxed.active {
-  cursor: zoom-out;
+  display: block;
+  cursor: zoom-in;
+  position: relative;
+  transition: opacity .4s;
+  -webkit-backface-visibility: hidden;
+
+  &.active {
+    cursor: zoom-out;
+  }
 }
 
 #materialbox-overlay {
   position:fixed;
-  top:0;
-  left:0;
+  top: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   background-color: #292929;
   z-index: 1000;
-
   will-change: opacity;
 }
+
 .materialbox-caption {
   position: fixed;
   display: none;
   color: #fff;
   line-height: 50px;
   bottom: 0;
+  left: 0;
   width: 100%;
   text-align: center;
   padding: 0% 15%;