materialize-sass 0.98.2 → 0.99.0

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

@@ -6,7 +6,9 @@
         menuWidth: 300,
         edge: 'left',
         closeOnClick: false,
-        draggable: true
+        draggable: true,
+        onOpen: null,
+        onClose: null
       };
       options = $.extend(defaults, options);
 
@@ -80,7 +82,9 @@
         // if closeOnClick, then add close event for all a tags in side sideNav
         if (options.closeOnClick === true) {
           menu.on("click.itemclick", "a:not(.collapsible-header)", function(){
-            removeMenu();
+            if (!(window.innerWidth > 992 && menu.hasClass('fixed'))){
+              removeMenu();
+            }
           });
         }
 
@@ -133,7 +137,12 @@
                 }
               });
           }
-        };
+
+          // Callback
+          if (typeof(options.onClose) === 'function') {
+            options.onClose.call(this, menu);
+          }
+        }
 
 
 
@@ -150,7 +159,7 @@
 
           $dragTarget.hammer({
             prevent_default: false
-          }).bind('pan', function(e) {
+          }).on('pan', function(e) {
 
             if (e.gesture.pointerType == "touch") {
 
@@ -159,6 +168,11 @@
               var y = e.gesture.center.y;
               var velocityX = e.gesture.velocityX;
 
+              // Vertical scroll bugfix
+              if (x === 0 && y === 0) {
+                return;
+              }
+
               // Disable Scrolling
               var $body = $('body');
               var $overlay = $('#sidenav-overlay');
@@ -172,6 +186,12 @@
                 $overlay.css('opacity', 0).click( function(){
                   removeMenu();
                 });
+                
+                // Run 'onOpen' when sidenav is opened via touch/swipe if applicable
+                if (typeof(options.onOpen) === 'function') {
+                  options.onOpen.call(this, menu);
+                }
+                
                 $('body').append($overlay);
               }
 
@@ -218,7 +238,7 @@
               }
             }
 
-          }).bind('panend', function(e) {
+          }).on('panend', function(e) {
 
             if (e.gesture.pointerType == "touch") {
               var $overlay = $('#sidenav-overlay');
@@ -256,6 +276,11 @@
                   menu.velocity({'translateX': [-1 * options.menuWidth - 10, leftPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
                   $overlay.velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
                     complete: function () {
+                      // Run 'onClose' when sidenav is closed via touch/swipe if applicable
+                      if (typeof(options.onClose) === 'function') {
+                        options.onClose.call(this, menu);
+                      }
+                      
                       $(this).remove();
                     }});
                   $dragTarget.css({width: '10px', right: '', left: 0});
@@ -330,14 +355,19 @@
                   $(this).remove();
                 } });
 
-            });
-            $('body').append($overlay);
-            $overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
-              complete: function () {
-                menuOut = true;
-                panning = false;
-              }
-            });
+              });
+              $('body').append($overlay);
+              $overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
+                complete: function () {
+                  menuOut = true;
+                  panning = false;
+                }
+              });
+
+            // Callback
+            if (typeof(options.onOpen) === 'function') {
+              options.onOpen.call(this, menu);
+            }
           }
 
           return false;

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

@@ -96,7 +96,7 @@
         $slides.find('img').each(function () {
           var placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
           if ($(this).attr('src') !== placeholderBase64) {
-            $(this).css('background-image', 'url(' + $(this).attr('src') + ')' );
+            $(this).css('background-image', 'url("' + $(this).attr('src') + '")' );
             $(this).attr('src', placeholderBase64);
           }
         });
@@ -171,7 +171,7 @@
 
         $this.hammer({
             prevent_default: false
-        }).bind('pan', function(e) {
+        }).on('pan', function(e) {
           if (e.gesture.pointerType === "touch") {
 
             // reset interval
@@ -219,7 +219,7 @@
 
           }
 
-        }).bind('panend', function(e) {
+        }).on('panend', function(e) {
           if (e.gesture.pointerType === "touch") {
 
             $curr_slide = $slider.find('.active');

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

@@ -88,7 +88,7 @@
 
       // append indicator then set indicator width to tab width
       if (!$this.find('.indicator').length) {
-        $this.append('<div class="indicator"></div>');
+        $this.append('<li class="indicator"></li>');
       }
       $indicator = $this.find('.indicator');
 
@@ -134,6 +134,9 @@
               index = $tabs_wrapper.index(item);
               $active = $links.eq(index);
               animateIndicator(prev_index);
+              if (typeof(options.onShow) === "function") {
+                options.onShow.call($this[0], $content);
+              }
             }
           },
         });
@@ -184,7 +187,11 @@
         // Swap content
         if (options.swipeable) {
           if ($tabs_content.length) {
-            $tabs_content.carousel('set', index);
+            $tabs_content.carousel('set', index, function() {
+              if (typeof(options.onShow) === "function") {
+                options.onShow.call($this[0], $content);
+              }
+            });
           }
         } else {
           if ($content !== undefined) {
@@ -230,7 +237,7 @@
     }
   };
 
-  $(document).on('turbolinks:load', function(){
+  $(document).on('ready turbolinks:load', function(){
     $('ul.tabs').tabs();
   });
 }( jQuery ));

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

@@ -232,7 +232,7 @@
     return {x: newX, y: newY};
   };
 
-  $(document).on('turbolinks:load', function(){
+  $(document).on('ready turbolinks:load', function(){
      $('.tooltipped').tooltip();
    });
 }( jQuery ));

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

@@ -61,7 +61,7 @@
   };
 
 
-  $(document).on('turbolinks:load', function() {
+  $(document).on('ready turbolinks:load', function() {
     // Hardcoded .staggered-list scrollFire
     // var staggeredListOptions = [];
     // $('ul.staggered-list').each(function (i) {
@@ -86,7 +86,7 @@
     $('.dismissable').each(function() {
       $(this).hammer({
         prevent_default: false
-      }).bind('pan', function(e) {
+      }).on('pan', function(e) {
         if (e.gesture.pointerType === "touch") {
           var $this = $(this);
           var direction = e.gesture.direction;
@@ -106,7 +106,7 @@
             swipeRight = true;
           }
         }
-      }).bind('panend', function(e) {
+      }).on('panend', function(e) {
         // Reset if collection is moved back into original position
         if (Math.abs(e.gesture.deltaX) < ($(this).innerWidth() / 2)) {
           swipeRight = false;

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

@@ -262,7 +262,7 @@
             if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
                 element = target;
                 break;
-            } else if (target.classList.contains('waves-effect')) {
+            } else if (target.className.indexOf('waves-effect') !== -1) {
                 element = target;
                 break;
             }

data/app/assets/stylesheets/materialize.scss

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 
 // Mixins
-// @import "materialize/components/prefixer";
 @import "materialize/components/mixins";
 @import "materialize/components/color";
 

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

@@ -183,6 +183,7 @@ button.btn-floating {
       display: flex;
       top: 0;
       bottom: 0;
+      z-index: 1;
 
       li {
         flex: 1;
@@ -257,19 +258,13 @@ button.btn-floating {
   cursor: pointer;
   transition: background-color .2s;
 
-  &:focus,
-  &:active {
-    background-color: transparent;
-  }
-
   &:focus,
   &:hover {
-    background-color: rgba(0,0,0,.1);
     box-shadow: none;
   }
 
-  &:active {
-    background-color: rgba(0,0,0,.2);
+  &:focus {
+    background-color: rgba(0,0,0,.1);
   }
 
   &.disabled {

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

@@ -9,6 +9,7 @@
 .collapsible-header {
   display: block;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
   min-height: $collapsible-height;
   line-height: $collapsible-line-height;
   padding: 0 1rem;

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

@@ -359,7 +359,7 @@ $colors: (
   "blue-grey": $blue-grey,
   "grey": $grey,
   "shades": $shades
-);
+) !default;
 
 
 // Color Classes

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

@@ -226,32 +226,31 @@ video.responsive-video {
   }
 }
 
-
 // Parallax
 .parallax-container {
   position: relative;
   overflow: hidden;
   height: 500px;
-}
-
-.parallax {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
 
-  img {
-    display: none;
+  .parallax {
     position: absolute;
-    left: 50%;
+    top: 0;
+    left: 0;
+    right: 0;
     bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
-    -webkit-transform: translate3d(0,0,0);
-            transform: translate3d(0,0,0);
-    transform: translateX(-50%);
+    z-index: -1;
+
+    img {
+      display: none;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      min-width: 100%;
+      min-height: 100%;
+      -webkit-transform: translate3d(0,0,0);
+              transform: translate3d(0,0,0);
+      transform: translateX(-50%);
+    }
   }
 }
 
@@ -342,6 +341,7 @@ ul.staggered-list li {
 // Footer
 .page-footer {
   padding-top: 20px;
+  color: $footer-font-color;
   background-color: $footer-bg-color;
 
   .footer-copyright {
@@ -350,8 +350,8 @@ ul.staggered-list li {
     display: flex;
     align-items: center;
     padding: 10px 0px;
-    color: rgba(255,255,255,.8);
-    background-color: rgba(51,51,51,.08);
+    color: $footer-copyright-font-color;
+    background-color: $footer-copyright-bg-color;
     @extend .light;
   }
 }

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

@@ -36,9 +36,9 @@
     padding: 4px 6px;
     height: 56px;
     width: 100%;
+    text-align: right;
 
     .btn, .btn-flat {
-      float: right;
       margin: 6px 0;
     }
   }
@@ -46,7 +46,7 @@
 .modal-overlay {
   position: fixed;
   z-index: 999;
-  top: -100px;
+  top: -25%;
   left: 0;
   bottom: 0;
   right: 0;

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

@@ -92,6 +92,7 @@
     line-height: $sidenav-line-height;
   }
 
+  .user-view,
   .userView {
     position: relative;
     padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
@@ -179,6 +180,7 @@
       padding: 0 $sidenav-padding;
     }
 
+    .user-view,
     .userView {
       padding: $sidenav-padding $sidenav-padding 0;
     }

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

@@ -10,8 +10,9 @@
 //  4. Cards
 //  5. Collapsible
 //  6. Chips
-//  7. Date Picker
+//  7. Date + Time Picker
 //  8. Dropdown
+//  9. Fonts
 //  10. Forms
 //  11. Global
 //  12. Grid
@@ -115,16 +116,21 @@ $chip-selected-color: #26a69a !default;
 $chip-margin: 5px !default;
 
 
-// 7. Date Picker
+// 7. Date + Time Picker
 // ==========================================================================
 
+$datepicker-display-font-size: 2.8rem;
+$datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
 $datepicker-weekday-bg: darken($secondary-color, 7%) !default;
 $datepicker-date-bg: $secondary-color !default;
-$datepicker-year: rgba(255, 255, 255, .4) !default;
+$datepicker-year: rgba(255, 255, 255, .7) !default;
 $datepicker-focus: rgba(0,0,0, .05) !default;
 $datepicker-selected: $secondary-color !default;
 $datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
 
+$timepicker-clock-color: rgba(0, 0, 0, .87) !default;
+$timepicker-clock-plate-bg: #eee;
+
 
 // 8. Dropdown
 // ==========================================================================
@@ -186,7 +192,7 @@ $select-disabled-color: rgba(0,0,0,.3) !default;
 $switch-bg-color: $secondary-color !default;
 $switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
 $switch-unchecked-bg: #F1F1F1 !default;
-$switch-unchecked-lever-bg: #818181 !default;
+$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
 $switch-radius: 15px !default;
 
 
@@ -293,7 +299,10 @@ $h6-fontsize: 1rem !default;
 // 21. Footer
 // ==========================================================================
 
+$footer-font-color: #fff !default;
 $footer-bg-color: $primary-color !default;
+$footer-copyright-font-color: rgba(255,255,255,.8) !default;
+$footer-copyright-bg-color: rgba(51,51,51,.08) !default;
 
 
 // 22. Flow Text

data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss

@@ -5,7 +5,9 @@
  * The picker box.
  */
 .picker__box {
-  padding: 0 1em;
+  padding: 0;
+  border-radius: 2px;
+  overflow: hidden;
 }
 /**
  * The header containing the month and year stuff.
@@ -229,10 +231,7 @@
  * The footer containing the "today", "clear", and "close" buttons.
  */
 .picker__footer {
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  text-align: right;
 }
 .picker__button--today,
 .picker__button--clear,
@@ -306,19 +305,31 @@
 /* ==========================================================================
    CUSTOM MATERIALIZE STYLES
    ========================================================================== */
-.picker__box {
+/*.picker__box {
   border-radius: 2px;
   overflow: hidden;
-}
+}*/
 
 .picker__date-display {
-  text-align: center;
+  text-align: left;
   background-color: $datepicker-date-bg;
   color: #fff;
-  padding-bottom: 15px;
+  padding: 18px;
   font-weight: 300;
 }
 
+@media only screen and (min-width: 601px) {
+	.picker__date-display {
+		flex:1;
+	}
+	.picker__weekday-display {
+		display:block;
+	}
+	.picker__container__wrapper {
+		flex:2
+	}
+}
+
 .picker__nav--prev:hover,
 .picker__nav--next:hover {
   cursor: pointer;
@@ -327,31 +338,31 @@
 }
 
 .picker__weekday-display {
-  background-color: $datepicker-weekday-bg;
-  padding: 10px;
-  font-weight: 200;
-  letter-spacing: .5;
-  font-size: 1rem;
-  margin-bottom: 15px;
+  font-weight: 500;
+  font-size: $datepicker-display-font-size;
+  margin-right: 5px;
+  margin-top: 4px;
 }
 
 .picker__month-display {
-  text-transform: uppercase;
-  font-size: 2rem;
+  //text-transform: uppercase;
+  font-size: $datepicker-display-font-size;
+  font-weight: 500;
 }
 .picker__day-display {
-
-  font-size: 4.5rem;
-  font-weight: 400;
+  font-size: $datepicker-display-font-size;
+  font-weight: 500;
+  margin-right: 5px;
 }
 .picker__year-display {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
+  font-weight: 500;
   color: $datepicker-year;
 }
 
-.picker__box {
+/*.picker__box {
   padding: 0;
-}
+}*/
 .picker__calendar-container {
   padding: 0 1rem;
 
@@ -367,12 +378,18 @@
 }
 
 .picker__day--infocus {
-  color: #595959;
-  letter-spacing: -.3;
-  padding: .75rem 0;
+  color: $datepicker-weekday-color;
+  letter-spacing: -.3px;
+  padding: 0.75rem 0;
   font-weight: 400;
   border: 1px solid transparent;
 }
+@media only screen and (min-width: 601px) {
+	.picker__day--infocus {
+		padding: 1.1rem 0;
+	}
+}
+
 
 //Today style
 .picker__day.picker__day--today {
@@ -408,11 +425,15 @@
 }
 
 // Materialize modified
-.picker__close, .picker__today {
+.picker__close, .picker__today, .picker__clear {
   font-size: 1.1rem;
   padding: 0 1rem;
   color: $datepicker-selected;
 }
+.picker__clear {
+	color:#f44336;
+	float:left;
+}
 
 //month nav buttons
 .picker__nav--prev:before,