materialize-sass 1.0.0.alpha3 → 1.0.0.alpha4

data/assets/javascripts/materialize/parallax.js

@@ -31,9 +31,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
        * @prop {Number} responsiveThreshold
        */
       _this.options = $.extend({}, Parallax.defaults, options);
+      _this._enabled = window.innerWidth > _this.options.responsiveThreshold;
 
       _this.$img = _this.$el.find('img').first();
-      _this._enabled = window.innerWidth > _this.options.responsiveThreshold;
+      _this.$img.each(function () {
+        var el = this;
+        if (el.complete) $(el).trigger("load");
+      });
+
       _this._updateParallax();
       _this._setupEventHandlers();
       _this._setupStyles();
@@ -89,10 +94,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_handleImageLoad',
       value: function _handleImageLoad() {
         this._updateParallax();
-        this.$img.each(function () {
-          var el = this;
-          if (el.complete) $(el).trigger("load");
-        });
       }
     }, {
       key: '_updateParallax',

data/assets/javascripts/materialize/select.js

@@ -12,7 +12,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
   'use strict';
 
   var _defaults = {
-    classes: ''
+    classes: '',
+    dropdownOptions: {}
   };
 
   /**
@@ -20,31 +21,37 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
    *
    */
 
-  var Select = function (_Component) {
-    _inherits(Select, _Component);
+  var FormSelect = function (_Component) {
+    _inherits(FormSelect, _Component);
 
     /**
-     * Construct Select instance
+     * Construct FormSelect instance
      * @constructor
      * @param {Element} el
      * @param {Object} options
      */
-    function Select(el, options) {
-      _classCallCheck(this, Select);
+    function FormSelect(el, options) {
+      _classCallCheck(this, FormSelect);
 
-      var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, Select, el, options));
+      // Don't init if browser default version
+      var _this = _possibleConstructorReturn(this, (FormSelect.__proto__ || Object.getPrototypeOf(FormSelect)).call(this, FormSelect, el, options));
 
-      _this.el.M_Select = _this;
+      if (_this.$el.hasClass('browser-default')) {
+        return _possibleConstructorReturn(_this);
+      }
+
+      _this.el.M_FormSelect = _this;
 
       /**
        * Options for the select
-       * @member Select#options
+       * @member FormSelect#options
        */
-      _this.options = $.extend({}, Select.defaults, options);
+      _this.options = $.extend({}, FormSelect.defaults, options);
 
       _this.isMultiple = _this.$el.prop('multiple');
 
       // Setup
+      _this.el.tabIndex = -1;
       _this._keysSelected = {};
       _this._valueDict = {}; // Maps key to original and generated option element.
       _this._setupDropdown();
@@ -53,7 +60,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       return _this;
     }
 
-    _createClass(Select, [{
+    _createClass(FormSelect, [{
       key: 'destroy',
 
 
@@ -63,7 +70,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       value: function destroy() {
         this._removeEventHandlers();
         this._removeDropdown();
-        this.el.M_Select = undefined;
+        this.el.M_FormSelect = undefined;
       }
 
       /**
@@ -100,7 +107,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         });
         this.el.removeEventListener('change', this._handleSelectChangeBound);
         this.input.removeEventListener('click', this._handleInputClickBound);
-        this.input.removeEventListener('focus', this._handleInputFocusBound);
       }
 
       /**
@@ -238,7 +244,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         // Initialize dropdown
         if (!this.el.disabled) {
-          var dropdownOptions = {};
+          var dropdownOptions = $.extend({}, this.options.dropdownOptions);
+
           if (this.isMultiple) {
             dropdownOptions.closeOnClick = false;
           }
@@ -425,7 +432,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }], [{
       key: 'init',
       value: function init(els, options) {
-        return _get(Select.__proto__ || Object.getPrototypeOf(Select), 'init', this).call(this, this, els, options);
+        return _get(FormSelect.__proto__ || Object.getPrototypeOf(FormSelect), 'init', this).call(this, this, els, options);
       }
 
       /**
@@ -436,7 +443,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: 'getInstance',
       value: function getInstance(el) {
         var domElem = !!el.jquery ? el[0] : el;
-        return domElem.M_Select;
+        return domElem.M_FormSelect;
       }
     }, {
       key: 'defaults',
@@ -445,12 +452,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       }
     }]);
 
-    return Select;
+    return FormSelect;
   }(Component);
 
-  M.Select = Select;
+  M.FormSelect = FormSelect;
 
   if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Select, 'select', 'M_Select');
+    M.initializeJqueryWrapper(FormSelect, 'formSelect', 'M_FormSelect');
   }
 })(cash);

data/assets/javascripts/materialize/sidenav.js

@@ -226,6 +226,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_handleDragTargetDrag',
       value: function _handleDragTargetDrag(e) {
+        // Check if draggable
+        if (!this.options.draggable || this._isCurrentlyFixed()) {
+          return;
+        }
+
         // If not being dragged, set initial drag start variables
         if (!this.isDragged) {
           this._startDrag(e);
@@ -293,6 +298,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_handleCloseDrag',
       value: function _handleCloseDrag(e) {
         if (this.isOpen) {
+          // Check if draggable
+          if (!this.options.draggable || this._isCurrentlyFixed()) {
+            return;
+          }
 
           // If not being dragged, set initial drag start variables
           if (!this.isDragged) {
@@ -389,10 +398,15 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_setupFixed',
       value: function _setupFixed() {
-        if (this.isFixed && window.innerWidth > 992) {
+        if (this._isCurrentlyFixed()) {
           this.open();
         }
       }
+    }, {
+      key: '_isCurrentlyFixed',
+      value: function _isCurrentlyFixed() {
+        return this.isFixed && window.innerWidth > 992;
+      }
     }, {
       key: '_createDragTarget',
       value: function _createDragTarget() {
@@ -428,7 +442,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
 
         // Handle fixed Sidenav
-        if (this.isFixed && window.innerWidth > 992) {
+        if (this._isCurrentlyFixed()) {
           anim.remove(this.el);
           anim({
             targets: this.el,
@@ -463,7 +477,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
 
         // Handle fixed Sidenav
-        if (this.isFixed && window.innerWidth > 992) {
+        if (this._isCurrentlyFixed()) {
           var transformX = this.options.edge === 'left' ? '-105%' : '105%';
           this.el.style.transform = 'translateX(' + transformX + ')';
 

data/assets/javascripts/materialize/timepicker.js

@@ -20,9 +20,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 				container: null,
 				defaultTime: 'now', // default time, 'now' or '13:14' e.g.
 				fromnow: 0, // Millisecond offset from the defaultTime
-				doneText: 'Ok', // done button text
-				clearText: 'Clear',
-				cancelText: 'Cancel',
+
+				// internationalization
+				i18n: {
+						done: 'Ok',
+						clear: 'Clear',
+						cancel: 'Cancel'
+				},
+
 				autoClose: false, // auto close when minute is selected
 				twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
 				vibrate: true // vibrate the device when dragging clock hand
@@ -148,6 +153,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 				}, {
 						key: '_handleDocumentClickEnd',
 						value: function _handleDocumentClickEnd(e) {
+								var _this2 = this;
+
 								e.preventDefault();
 								document.removeEventListener('mouseup', this._handleDocumentClickEndBound);
 								document.removeEventListener('touchend', this._handleDocumentClickEndBound);
@@ -161,9 +168,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 								if (this.currentView === 'hours') {
 										this.showView('minutes', this.options.duration / 2);
 								} else if (this.options.autoClose) {
-										this.minutesView.addClass('timepicker-dial-out');
+										$(this.minutesView).addClass('timepicker-dial-out');
 										setTimeout(function () {
-												this.done();
+												_this2.done();
 										}, this.options.duration / 2);
 								}
 
@@ -189,11 +196,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 				}, {
 						key: '_setupModal',
 						value: function _setupModal() {
-								var _this2 = this;
+								var _this3 = this;
 
 								this.modal = M.Modal.init(this.modalEl, {
 										onCloseEnd: function () {
-												_this2.isOpen = false;
+												_this3.isOpen = false;
 										}
 								});
 						}
@@ -217,11 +224,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 				}, {
 						key: '_pickerSetup',
 						value: function _pickerSetup() {
-								$('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.clearText + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
+								$('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.clear + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
 
 								var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>');
-								$('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.cancelText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this));
-								$('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.doneText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.done.bind(this));
+								$('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.cancel + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this));
+								$('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.done + '</button>').appendTo(confirmationBtnsContainer).on('click', this.done.bind(this));
 								confirmationBtnsContainer.appendTo(this.footer);
 						}
 				}, {
@@ -419,7 +426,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 				}, {
 						key: 'setHand',
 						value: function setHand(x, y, roundBy5) {
-								var _this3 = this;
+								var _this4 = this;
 
 								var radian = Math.atan2(x, -y),
 								    isHours = this.currentView === 'hours',
@@ -474,7 +481,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 												if (!this.vibrateTimer) {
 														navigator[this.vibrate](10);
 														this.vibrateTimer = setTimeout(function () {
-																_this3.vibrateTimer = null;
+																_this4.vibrateTimer = null;
 														}, 100);
 												}
 										}

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

@@ -26,6 +26,8 @@ span.badge {
     content: " " attr(data-badge-caption);
   }
 }
+
+// Special cases
 nav ul a span.badge {
   display: inline-block;
   float: none;
@@ -45,3 +47,9 @@ nav ul a span.badge {
 .sidenav span.badge {
   margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
 }
+
+table span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: auto;
+}

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

@@ -9,29 +9,30 @@
   padding: $button-padding;
   text-transform: uppercase;
   vertical-align: middle;
-  // Gets rid of tap active state
-  -webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
 // Disabled shared style
 .btn.disabled,
 .btn-floating.disabled,
 .btn-large.disabled,
+.btn-small.disabled,
 .btn-flat.disabled,
 .btn:disabled,
 .btn-floating:disabled,
 .btn-large:disabled,
+.btn-small:disabled,
 .btn-flat:disabled,
 .btn[disabled],
 .btn-floating[disabled],
 .btn-large[disabled],
+.btn-small[disabled],
 .btn-flat[disabled] {
   pointer-events: none;
   background-color: $button-disabled-background !important;
   box-shadow: none;
   color: $button-disabled-color !important;
   cursor: default;
-
   &:hover {
     background-color: $button-disabled-background !important;
     color: $button-disabled-color !important;
@@ -42,10 +43,10 @@
 .btn,
 .btn-floating,
 .btn-large,
+.btn-small,
 .btn-flat {
   font-size: $button-font-size;
   outline: 0;
-
   i {
     font-size: $button-icon-font-size;
     line-height: inherit;
@@ -70,7 +71,6 @@
   @extend .z-depth-1;
   transition: background-color .2s ease-out;
   cursor: pointer;
-
   &:hover {
     background-color: $button-raised-background-hover;
     @extend .z-depth-1-half;
@@ -83,34 +83,41 @@
     background-color: $button-floating-background-hover;
     @extend .z-depth-1-half;
   }
-
   &:before {
     border-radius: 0;
   }
-
   &.btn-large {
     &.halfway-fab {
       bottom: -$button-floating-large-size / 2;
     }
-
     width: $button-floating-large-size;
     height: $button-floating-large-size;
+    padding: 0;
     i {
       line-height: $button-floating-large-size;
     }
   }
 
+  &.btn-small {
+    &.halfway-fab {
+      bottom: -$button-floating-small-size / 2;
+    }
+    width: $button-floating-small-size;
+    height: $button-floating-small-size;
+    i {
+      line-height: $button-floating-small-size;
+    }
+  }
+
   &.halfway-fab {
     &.left {
       right: auto;
       left: 24px;
     }
-
     position: absolute;
     right: 24px;
     bottom: -$button-floating-size / 2;
   }
-
   display: inline-block;
   color: $button-floating-color;
   position: relative;
@@ -126,7 +133,6 @@
   transition: background-color .3s;
   cursor: pointer;
   vertical-align: middle;
-
   i {
     width: inherit;
     display: inline-block;
@@ -146,7 +152,7 @@ button.btn-floating {
 .fixed-action-btn {
   &.active {
     ul {
-     visibility: visible;
+      visibility: visible;
     }
   }
 
@@ -154,7 +160,6 @@ button.btn-floating {
   &.direction-left,
   &.direction-right {
     padding: 0 0 0 15px;
-
     ul {
       text-align: right;
       right: 64px;
@@ -162,68 +167,57 @@ button.btn-floating {
       transform: translateY(-50%);
       height: 100%;
       left: auto;
-      width: 500px; /*width 100% only goes to width of button container */
-
+      /*width 100% only goes to width of button container */
+      width: 500px;
       li {
         display: inline-block;
         margin: 7.5px 15px 0 0;
       }
     }
   }
-
   &.direction-right {
     padding: 0 15px 0 0;
-
     ul {
       text-align: left;
       direction: rtl;
       left: 64px;
       right: auto;
-
       li {
         margin: 7.5px 0 0 15px;
       }
     }
   }
-
   &.direction-bottom {
     padding: 0 0 15px 0;
-
     ul {
       top: 64px;
       bottom: auto;
       display: flex;
       flex-direction: column-reverse;
-
       li {
         margin: 15px 0 0 0;
       }
     }
   }
-
   &.toolbar {
     &.active {
-      & > a i {
+      &>a i {
         opacity: 0;
       }
     }
-
     padding: 0;
     height: $button-floating-large-size;
-
     ul {
       display: flex;
       top: 0;
       bottom: 0;
       z-index: 1;
-
       li {
         flex: 1;
         display: inline-block;
         margin: 0;
         height: 100%;
         transition: none;
-
         a {
           display: block;
           overflow: hidden;
@@ -235,7 +229,6 @@ button.btn-floating {
           color: #fff;
           line-height: $button-floating-large-size;
           z-index: 1;
-
           i {
             line-height: inherit;
           }
@@ -243,14 +236,12 @@ button.btn-floating {
       }
     }
   }
-
   position: fixed;
   right: 23px;
   bottom: 23px;
   padding-top: 15px;
   margin-bottom: 0;
   z-index: 997;
-
   ul {
     left: 0;
     right: 0;
@@ -259,16 +250,13 @@ button.btn-floating {
     bottom: 64px;
     margin: 0;
     visibility: hidden;
-
     li {
       margin-bottom: 15px;
     }
-
     a.btn-floating {
       opacity: 0;
     }
   }
-
   .fab-backdrop {
     position: absolute;
     top: 0;
@@ -289,16 +277,13 @@ button.btn-floating {
   color: $button-flat-color;
   cursor: pointer;
   transition: background-color .2s;
-
   &:focus,
   &:hover {
     box-shadow: none;
   }
-
   &:focus {
-    background-color: rgba(0,0,0,.1);
+    background-color: rgba(0, 0, 0, .1);
   }
-
   &.disabled {
     background-color: transparent !important;
     color: $button-flat-disabled-color !important;
@@ -311,12 +296,25 @@ button.btn-floating {
   @extend .btn;
   height: $button-large-height;
   line-height: $button-large-height;
+  font-size: $button-large-font-size;
+  padding: 0 28px;
 
   i {
     font-size: $button-large-icon-font-size;
   }
 }
 
+// Small button
+.btn-small {
+  @extend .btn;
+  height: $button-small-height;
+  line-height: $button-small-height;
+  font-size: $button-small-font-size;
+  i {
+    font-size: $button-small-icon-font-size;
+  }
+}
+
 // Block button
 .btn-block {
   display: block;