materialize-sass 1.0.0.alpha1 → 1.0.0.alpha2

data/assets/javascripts/materialize/toasts.js

@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-(function ($, Vel) {
+(function ($, anim) {
   'use strict';
 
   var _defaults = {
@@ -92,10 +92,12 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       key: '_animateIn',
       value: function _animateIn() {
         // Animate toast in
-        Vel(this.el, { top: 0, opacity: 1 }, {
+        anim({
+          targets: this.el,
+          top: 0,
+          opacity: 1,
           duration: 300,
-          easing: 'easeOutCubic',
-          queue: false
+          easing: 'easeOutCubic'
         });
       }
 
@@ -142,10 +144,12 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           this.el.style.opacity = 0;
         }
 
-        Vel(this.el, { opacity: 0, marginTop: '-40px' }, {
+        anim({
+          targets: this.el,
+          opacity: 0,
+          marginTop: -40,
           duration: this.options.outDuration,
           easing: 'easeOutExpo',
-          queue: false,
           complete: function () {
             // Call the optional callback
             if (typeof _this2.options.completeCallback === 'function') {
@@ -347,4 +351,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   M.toast = function (options) {
     return new Toast(options);
   };
-})(cash, M.Vel);
+})(cash, M.anime);

data/assets/javascripts/materialize/tooltip.js

@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-(function ($, Vel) {
+(function ($, anim) {
   'use strict';
 
   var _defaults = {
@@ -10,8 +10,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     enterDelay: 0,
     html: null,
     margin: 5,
-    inDuration: 300,
-    outDuration: 250,
+    inDuration: 250,
+    outDuration: 200,
     position: 'bottom',
     transitionMovement: 10
   };
@@ -170,8 +170,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
         this.xMovement = 0, this.yMovement = 0;
 
-        targetTop = origin.offsetTop;
-        targetLeft = origin.offsetLeft;
+        targetTop = origin.getBoundingClientRect().top + M.getDocumentScrollTop();
+        targetLeft = origin.getBoundingClientRect().left + M.getDocumentScrollLeft();
 
         if (this.options.position === 'top') {
           targetTop += -tooltipHeight - margin;
@@ -234,29 +234,27 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       value: function _animateIn() {
         this._positionTooltip();
         this.tooltipEl.style.visibility = 'visible';
-        Vel(this.tooltipEl, 'stop');
-        Vel(this.tooltipEl, {
+        anim.remove(this.tooltipEl);
+        anim({
+          targets: this.tooltipEl,
           opacity: 1,
           translateX: this.xMovement,
-          translateY: this.yMovement
-        }, {
+          translateY: this.yMovement,
           duration: this.options.inDuration,
-          easing: 'easeOutCubic',
-          queue: false
+          easing: 'easeOutCubic'
         });
       }
     }, {
       key: '_animateOut',
       value: function _animateOut() {
-        Vel(this.tooltipEl, 'stop');
-        Vel(this.tooltipEl, {
+        anim.remove(this.tooltipEl);
+        anim({
+          targets: this.tooltipEl,
           opacity: 0,
           translateX: 0,
-          translateY: 0
-        }, {
+          translateY: 0,
           duration: this.options.outDuration,
-          easing: 'easeOutCubic',
-          queue: false
+          easing: 'easeOutCubic'
         });
       }
     }, {
@@ -322,4 +320,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Tooltip, 'tooltip', 'M_Tooltip');
   }
-})(cash, M.Vel);
+})(cash, M.anime);

data/assets/stylesheets/materialize.scss

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 
-// Mixins
-@import "materialize/components/mixins";
-@import "materialize/components/color";
+// Color
+@import "materialize/components/color-variables";
+@import "materialize/components/color-classes";
 
 // Variables;
 @import "materialize/components/variables";

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

@@ -68,7 +68,7 @@
   text-align: center;
   letter-spacing: .5px;
   @extend .z-depth-1;
-  transition: .2s ease-out;
+  transition: background-color .2s ease-out;
   cursor: pointer;
 
   &:hover {
@@ -123,7 +123,7 @@
   background-color: $button-floating-background;
   border-radius: $button-floating-radius;
   @extend .z-depth-1;
-  transition: .3s;
+  transition: background-color .3s;
   cursor: pointer;
   vertical-align: middle;
 

data/assets/stylesheets/materialize/components/_color-classes.scss

@@ -0,0 +1,32 @@
+// Color Classes
+
+@each $color_name, $color in $colors {
+  @each $color_type, $color_value in $color {
+    @if $color_type == "base" {
+      .#{$color_name} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text {
+        color: $color_value !important;
+      }
+    }
+    @else if $color_name != "shades" {
+      .#{$color_name}.#{$color_type} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text.text-#{$color_type} {
+        color: $color_value !important;
+      }
+    }
+  }
+}
+
+// Shade classes
+@each $color, $color_value in $shades {
+  .#{$color} {
+    background-color: $color_value !important;
+  }
+  .#{$color}-text {
+    color: $color_value !important;
+  }
+}

data/assets/stylesheets/materialize/components/{_color.scss → _color-variables.scss}

@@ -1,12 +1,5 @@
-// Utility Color Classes
-
-//.success {
-//
-//}
-
 // Google Color Palette defined: http://www.google.com/design/spec/style/color.html
 
-
 $materialize-red: (
   "base":       #e51c23,
   "lighten-5":  #fdeaeb,
@@ -362,40 +355,6 @@ $colors: (
 ) !default;
 
 
-// Color Classes
-
-@each $color_name, $color in $colors {
-  @each $color_type, $color_value in $color {
-    @if $color_type == "base" {
-      .#{$color_name} {
-        background-color: $color_value !important;
-      }
-      .#{$color_name}-text {
-        color: $color_value !important;
-      }
-    }
-    @else if $color_name != "shades" {
-      .#{$color_name}.#{$color_type} {
-        background-color: $color_value !important;
-      }
-      .#{$color_name}-text.text-#{$color_type} {
-        color: $color_value !important;
-      }
-    }
-  }
-}
-
-// Shade classes
-@each $color, $color_value in $shades {
-  .#{$color} {
-    background-color: $color_value !important;
-  }
-  .#{$color}-text {
-    color: $color_value !important;
-  }
-}
-
-
 // usage: color("name_of_color", "type_of_color")
 // to avoid to repeating map-get($colors, ...)
 
@@ -409,4 +368,3 @@ $colors: (
   @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
   @return null;
 }
-

data/assets/stylesheets/materialize/components/_datepicker.scss

@@ -2,6 +2,7 @@
 .datepicker-modal {
   max-width: 325px;
   min-width: 300px;
+  max-height: none;
 }
 
 .datepicker-container.modal-content {
@@ -95,21 +96,25 @@
     text-align: center;
   }
 
+  tr {
+    border: none;
+  }
+
   abbr {
     text-decoration: none;
     color: $datepicker-calendar-header-color;
   }
 
   td {
+    &.is-today {
+      color: $secondary-color;
+    }
+
     &.is-selected {
       background-color: $secondary-color;
       color: #fff;
     }
 
-    &.is-today {
-      color: $secondary-color;
-    }
-
     &.is-outside-current-month,
     &.is-disabled {
       color: $datepicker-disabled-day-color;
@@ -132,6 +137,7 @@
   display: block;
   width: 100%;
   border-radius: 50%;
+  padding: 0 5px;
   cursor: pointer;
   color: inherit;
 }

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

@@ -1,4 +1,9 @@
 .dropdown-content {
+  &:focus {
+    outline: 0;
+  }
+
+
   @extend .z-depth-1;
   background-color: $dropdown-bg-color;
   margin: 0;

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

@@ -37,12 +37,12 @@ nav {
   }
 
   @media #{$large-and-up} {
-    a.button-collapse { display: none; }
+    a.sidenav-trigger { display: none; }
   }
 
 
   // Collapse button
-  .button-collapse {
+  .sidenav-trigger {
     float: left;
     position: relative;
     z-index: 1;
@@ -198,7 +198,7 @@ nav {
   nav.nav-extended .nav-wrapper {
     min-height: $navbar-height;
   }
-  nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
+  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
     height: $navbar-height;
     line-height: $navbar-line-height;
   }

data/assets/stylesheets/materialize/components/_pulse.scss

@@ -14,7 +14,7 @@
     z-index: -1;
   }
 
-  overflow: initial;
+  overflow: visible;
   position: relative;
 }
 

data/assets/stylesheets/materialize/components/_timepicker.scss

@@ -1,6 +1,7 @@
 /* Timepicker Containers */
 .timepicker-modal {
   max-width: 325px;
+  max-height: none;
 }
 
 .timepicker-container.modal-content {

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

@@ -167,7 +167,6 @@ $input-font-size: 1rem !default;
 $input-margin-bottom: 8px;
 $input-margin: 0 0 $input-margin-bottom 0 !default;
 $input-padding: 0 !default;
-$input-transition: all .3s !default;
 $label-font-size: .8rem !default;
 $input-disabled-color: rgba(0,0,0, .42) !default;
 $input-disabled-solid-color: #949494 !default;

data/assets/stylesheets/materialize/components/forms/_input-fields.scss

@@ -36,7 +36,7 @@ textarea.materialize-textarea {
   padding: $input-padding;
   box-shadow: none;
   box-sizing: content-box;
-  transition: $input-transition;
+  transition: box-shadow .3s, border .3s;
 
   // Disabled input style
   &:disabled,
@@ -260,7 +260,7 @@ textarea.materialize-textarea {
     box-shadow: none;
   }
 
-  &:focus {
+  &:focus:not(.browser-default) {
     background-color: $input-background;
     border: 0;
     box-shadow: none;
@@ -273,7 +273,8 @@ textarea.materialize-textarea {
     }
   }
 
-  & + label {
+  & + .label-icon {
+    transform: none;
     left: 1rem;
   }
 
@@ -299,8 +300,9 @@ textarea {
   background-color: transparent;
 
   &.materialize-textarea {
+    line-height: normal;
     overflow-y: hidden; /* prevents scroll bar flash */
-    padding: .8rem 0 1.6rem 0; /* prevents text jump on Enter keypress */
+    padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */
     resize: none;
     min-height: $input-height;
     box-sizing: border-box;

data/assets/stylesheets/materialize/components/forms/_range.scss

@@ -94,7 +94,7 @@ input[type=range]::-webkit-slider-thumb {
 
 }
 
-input[type=range]:focus:not(.active)::-webkit-slider-thumb {
+input[type=range].focused:focus:not(.active)::-webkit-slider-thumb {
   box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
 }
 
@@ -125,7 +125,7 @@ input[type=range]:-moz-focusring {
   outline-offset: -1px;
 }
 
-input[type=range]:focus:not(.active)::-moz-range-thumb {
+input[type=range].focused:focus:not(.active)::-moz-range-thumb {
   box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
 }
 
@@ -156,6 +156,6 @@ input[type=range]::-ms-thumb {
   @include range-thumb;
 }
 
-input[type=range]:focus:not(.active)::-ms-thumb {
+input[type=range].focused:focus:not(.active)::-ms-thumb {
   box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
 }

data/assets/stylesheets/materialize/components/forms/_select.scss

@@ -87,19 +87,17 @@ select {
     padding: 0;
     display: block;
     user-select:none;
+    z-index: 1;
   }
 
   .caret {
-    color: initial;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
-    height: 24px;
     margin: auto 0;
-    font-size: 24px;
-    line-height: 24px;
-    z-index: -1;
+    z-index: 0;
+    fill: rgba(0,0,0,.87);
   }
 
   & + label {
@@ -115,10 +113,12 @@ select:disabled {
 }
 
 .select-wrapper.disabled {
-  span.caret,
-  & + label {
+  + label {
     color: $input-disabled-color;
   }
+  .caret {
+    fill: $input-disabled-color;
+  }
 }
 
 .select-wrapper input.select-dropdown:disabled {