material-sass 4.0.0.alpha5 → 4.0.0.alpha6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1ea9b6487d68485c36b034314a9222086fa7fffc
-  data.tar.gz: baf020d3d9ede3fa8a1591fe3c3a798f16761c41
+  metadata.gz: d483594d537c65aeea1110897d892f0981aef89d
+  data.tar.gz: aab7bcb622b9da788abc30d3c30f2f3fd6e57484
 SHA512:
-  metadata.gz: 6e810ba05f48528258c8f0bb972c5213a2538c368f68ff25eb28d5811a97c3a610b6a2c7b0ed001493510457a357baeca31e717114d6ff410e99b75c9aee1f7e
-  data.tar.gz: c93998e1e0f85747b7683d0f8896a4df2dd0fbfc50da7b7bd44b33a9957e81a05089194fe255fded5f075befda9eb4aaece1f4b289e03da599efee5501140f95
+  metadata.gz: 3ebdfba8dc36d70472d7a866846292b8166fb9801786caec13d67fbe2a76428688bc96ed2ce367d2f93eb1d827cc1aad34aeb2f97fbb0a1772ba808566b74d31
+  data.tar.gz: 2cef81b3b926fb783a3bf0a64cf8b664a436c6b83e3a3b1d0f10fc7670217e0496a31c84c71f9ddc338bec89eca8bcc77988bb23ff106ab98ba982adce666bb0

data/app/assets/javascripts/material/addons-materialise/textarea-autosize.js

@@ -2,8 +2,10 @@
  * activate textarea-autosize for material
  * requires textarea-autosize.js
  */
-$(function () {
-  if ($('.textarea-autosize').length && (typeof $.fn.textareaAutoSize !== 'undefined')) {
-    $('.textarea-autosize').textareaAutoSize();
-  };
-});
+(function($){
+  $(function () {
+    if ($('.textarea-autosize').length && (typeof $.fn.textareaAutoSize !== 'undefined')) {
+      $('.textarea-autosize').textareaAutoSize();
+    };
+  });
+})(jQuery);

data/app/assets/javascripts/material/addons-materialise/wave.js

@@ -2,11 +2,14 @@
  * activate waves for material
  * requires waves.js
  */
-$(function () {
-  if ($('.waves-attach').length && (typeof Waves !== 'undefined')) {
-    Waves.attach('.waves-attach');
-    Waves.init({
-      duration: 300
-    });
-  };
-});
+(function($){
+  $(function () {
+    if ($('.waves-attach').length && (typeof Waves !== 'undefined')) {
+      Waves.attach('.waves-attach');
+      Waves.init({
+        duration: 300
+      });
+    };
+  });
+})(jQuery);
+

data/app/assets/javascripts/material/src/floating-label.js

@@ -5,11 +5,11 @@
  */
 const FloatingLabel = (($) => {
   // constants >>>
-    const DATA_API_KEY        = '.data-api';
-    const DATA_KEY            = 'md.floatinglabel';
-    const EVENT_KEY           = `.${DATA_KEY}`;
-    const NAME                = 'floatinglabel';
-    const NO_CONFLICT         = $.fn[NAME];
+    const DATA_API_KEY = '.data-api';
+    const DATA_KEY     = 'md.floatinglabel';
+    const EVENT_KEY    = `.${DATA_KEY}`;
+    const NAME         = 'floatinglabel';
+    const NO_CONFLICT  = $.fn[NAME];
 
     const ClassName = {
       IS_FOCUSED : 'is-focused',

data/app/assets/javascripts/material/src/navdrawer.js

@@ -1,6 +1,6 @@
 /*!
  * navigation drawer
- * based on bootstrap's (v4.0.0-alpha.5) modal.js
+ * based on bootstrap's (v4.0.0-alpha.6) modal.js
  */
 const NavDrawer = (($) => {
   // constants >>>
@@ -14,8 +14,8 @@ const NavDrawer = (($) => {
 
     const ClassName = {
       BACKDROP : 'navdrawer-backdrop',
-      IN       : 'in',
-      OPEN     : 'navdrawer-open'
+      OPEN     : 'navdrawer-open',
+      SHOW     : 'show'
     };
 
     const Default = {
@@ -83,7 +83,7 @@ const NavDrawer = (($) => {
 
       $(this._element)
         .off(Event.CLICK_DISMISS)
-        .removeClass(ClassName.IN);
+        .removeClass(ClassName.SHOW);
 
       if (Util.supportsTransitionEnd()) {
         $(this._element)
@@ -204,7 +204,7 @@ const NavDrawer = (($) => {
           Util.reflow(this._backdrop);
         }
 
-        $(this._backdrop).addClass(ClassName.IN);
+        $(this._backdrop).addClass(ClassName.SHOW);
 
         if (!callback) {
           return;
@@ -219,7 +219,7 @@ const NavDrawer = (($) => {
           .one(Util.TRANSITION_END, callback)
           .emulateTransitionEnd(TRANSITION_DURATION_BACKDROP);
       } else if (this._backdrop && !this._isShown) {
-        $(this._backdrop).removeClass(ClassName.IN);
+        $(this._backdrop).removeClass(ClassName.SHOW);
 
         let callbackRemove = () => {
           this._removeBackdrop();
@@ -255,7 +255,7 @@ const NavDrawer = (($) => {
         Util.reflow(this._element);
       }
 
-      $(this._element).addClass(ClassName.IN);
+      $(this._element).addClass(ClassName.SHOW);
       this._enforceFocus();
 
       let shownEvent = $.Event(Event.SHOWN, {

data/app/assets/javascripts/material/src/tab-switch.js

@@ -1,21 +1,20 @@
 /*!
  * tab indicator animation
- * requires bootstrap's (v4.0.0-alpha.5) tab.js
+ * requires bootstrap's (v4.0.0-alpha.6) tab.js
  */
 const TabSwitch = (($) => {
   // constants >>>
     const DATA_KEY            = 'md.tabswitch';
     const NAME                = 'tabswitch';
     const NO_CONFLICT         = $.fn[NAME];
-    const TRANSITION_DURATION = 450;
+    const TRANSITION_DURATION = 300;
 
     const ClassName = {
       ANIMATE    : 'animate',
-      IN         : 'in',
       INDICATOR  : 'nav-tabs-indicator',
       MATERIAL   : 'nav-tabs-material',
-      REVERSE    : 'reverse',
-      SCROLLABLE : 'nav-tabs-scrollable'
+      SCROLLABLE : 'nav-tabs-scrollable',
+      SHOW       : 'show'
     };
 
     const Event = {
@@ -24,7 +23,8 @@ const TabSwitch = (($) => {
 
     const Selector = {
       DATA_TOGGLE : '.nav-tabs [data-toggle="tab"]',
-      TAB_NAV     : '.nav-tabs'
+      NAV         : '.nav-tabs',
+      NAV_ITEM    : '.nav-item'
     };
   // <<< constants
 
@@ -45,30 +45,26 @@ const TabSwitch = (($) => {
         this._createIndicator();
       }
 
-      let elLeft        = $(element).offset().left;
-      let elWidth       = $(element).outerWidth();
+      let elLeft        = $(element).closest(Selector.NAV_ITEM).offset().left;
+      let elWidth       = $(element).closest(Selector.NAV_ITEM).outerWidth();
       let navLeft       = $(this._nav).offset().left;
       let navScrollLeft = $(this._nav).scrollLeft();
       let navWidth      = $(this._nav).outerWidth();
 
       if (relatedTarget !== undefined) {
-        let relatedLeft  = $(relatedTarget).offset().left;
-        let relatedWidth = $(relatedTarget).outerWidth();
+        let relatedLeft  = $(relatedTarget).closest(Selector.NAV_ITEM).offset().left;
+        let relatedWidth = $(relatedTarget).closest(Selector.NAV_ITEM).outerWidth();
 
         $(this._navindicator).css({
           left  : ((relatedLeft + navScrollLeft) - navLeft),
           right : (navWidth - ((relatedLeft + navScrollLeft) - navLeft + relatedWidth))
         });
 
-        $(this._navindicator).addClass(ClassName.IN);
+        $(this._navindicator).addClass(ClassName.SHOW);
         Util.reflow(this._navindicator);
 
         if (supportsTransition) {
-          $(this._navindicator).addClass(ClassName.ANIMATE);
-
-          if (relatedLeft > elLeft) {
-            $(this._navindicator).addClass(ClassName.REVERSE);
-          }
+          $(this._nav).addClass(ClassName.ANIMATE);
         }
       }
 
@@ -78,7 +74,8 @@ const TabSwitch = (($) => {
       });
 
       let complete = () => {
-        $(this._navindicator).removeClass(ClassName.ANIMATE).removeClass(ClassName.IN).removeClass(ClassName.REVERSE);
+        $(this._nav).removeClass(ClassName.ANIMATE);
+        $(this._navindicator).removeClass(ClassName.SHOW);
       }
 
       if (!supportsTransition) {
@@ -103,7 +100,7 @@ const TabSwitch = (($) => {
 
     static _jQueryInterface(relatedTarget) {
       return this.each(function () {
-        let nav = $(this).closest(Selector.TAB_NAV)[0];
+        let nav = $(this).closest(Selector.NAV)[0];
 
         if (!nav) {
           return;

data/app/assets/javascripts/material/src/util.js

@@ -1,6 +1,6 @@
 /*!
  * global util js
- * based on bootstrap's (v4.0.0-alpha.5) util.js
+ * based on bootstrap's (v4.0.0-alpha.6) util.js
  */
 const Util = (($) => {
   let transition = false;

data/app/assets/javascripts/material.js

@@ -121,7 +121,7 @@ var FloatingLabel = function ($) {
 
 /*!
  * navigation drawer
- * based on bootstrap's (v4.0.0-alpha.5) modal.js
+ * based on bootstrap's (v4.0.0-alpha.6) modal.js
  */
 var NavDrawer = function ($) {
   // constants >>>
@@ -135,8 +135,8 @@ var NavDrawer = function ($) {
 
   var ClassName = {
     BACKDROP: 'navdrawer-backdrop',
-    IN: 'in',
-    OPEN: 'navdrawer-open'
+    OPEN: 'navdrawer-open',
+    SHOW: 'show'
   };
 
   var Default = {
@@ -205,7 +205,7 @@ var NavDrawer = function ($) {
         $(document).off(Event.FOCUSIN);
         $(this._content).off(Event.MOUSEDOWN_DISMISS);
 
-        $(this._element).off(Event.CLICK_DISMISS).removeClass(ClassName.IN);
+        $(this._element).off(Event.CLICK_DISMISS).removeClass(ClassName.SHOW);
 
         if (Util.supportsTransitionEnd()) {
           $(this._element).one(Util.TRANSITION_END, $.proxy(this._hideNavdrawer, this, hideClassName)).emulateTransitionEnd(TRANSITION_DURATION);
@@ -333,7 +333,7 @@ var NavDrawer = function ($) {
             Util.reflow(this._backdrop);
           }
 
-          $(this._backdrop).addClass(ClassName.IN);
+          $(this._backdrop).addClass(ClassName.SHOW);
 
           if (!callback) {
             return;
@@ -346,7 +346,7 @@ var NavDrawer = function ($) {
 
           $(this._backdrop).one(Util.TRANSITION_END, callback).emulateTransitionEnd(TRANSITION_DURATION_BACKDROP);
         } else if (this._backdrop && !this._isShown) {
-          $(this._backdrop).removeClass(ClassName.IN);
+          $(this._backdrop).removeClass(ClassName.SHOW);
 
           var callbackRemove = function callbackRemove() {
             _this5._removeBackdrop();
@@ -382,7 +382,7 @@ var NavDrawer = function ($) {
           Util.reflow(this._element);
         }
 
-        $(this._element).addClass(ClassName.IN);
+        $(this._element).addClass(ClassName.SHOW);
         this._enforceFocus();
 
         var shownEvent = $.Event(Event.SHOWN, {
@@ -476,22 +476,21 @@ var NavDrawer = function ($) {
 
 /*!
  * tab indicator animation
- * requires bootstrap's (v4.0.0-alpha.5) tab.js
+ * requires bootstrap's (v4.0.0-alpha.6) tab.js
  */
 var TabSwitch = function ($) {
   // constants >>>
   var DATA_KEY = 'md.tabswitch';
   var NAME = 'tabswitch';
   var NO_CONFLICT = $.fn[NAME];
-  var TRANSITION_DURATION = 450;
+  var TRANSITION_DURATION = 300;
 
   var ClassName = {
     ANIMATE: 'animate',
-    IN: 'in',
     INDICATOR: 'nav-tabs-indicator',
     MATERIAL: 'nav-tabs-material',
-    REVERSE: 'reverse',
-    SCROLLABLE: 'nav-tabs-scrollable'
+    SCROLLABLE: 'nav-tabs-scrollable',
+    SHOW: 'show'
   };
 
   var Event = {
@@ -500,7 +499,8 @@ var TabSwitch = function ($) {
 
   var Selector = {
     DATA_TOGGLE: '.nav-tabs [data-toggle="tab"]',
-    TAB_NAV: '.nav-tabs'
+    NAV: '.nav-tabs',
+    NAV_ITEM: '.nav-item'
   };
   // <<< constants
 
@@ -527,30 +527,26 @@ var TabSwitch = function ($) {
           this._createIndicator();
         }
 
-        var elLeft = $(element).offset().left;
-        var elWidth = $(element).outerWidth();
+        var elLeft = $(element).closest(Selector.NAV_ITEM).offset().left;
+        var elWidth = $(element).closest(Selector.NAV_ITEM).outerWidth();
         var navLeft = $(this._nav).offset().left;
         var navScrollLeft = $(this._nav).scrollLeft();
         var navWidth = $(this._nav).outerWidth();
 
         if (relatedTarget !== undefined) {
-          var relatedLeft = $(relatedTarget).offset().left;
-          var relatedWidth = $(relatedTarget).outerWidth();
+          var relatedLeft = $(relatedTarget).closest(Selector.NAV_ITEM).offset().left;
+          var relatedWidth = $(relatedTarget).closest(Selector.NAV_ITEM).outerWidth();
 
           $(this._navindicator).css({
             left: relatedLeft + navScrollLeft - navLeft,
             right: navWidth - (relatedLeft + navScrollLeft - navLeft + relatedWidth)
           });
 
-          $(this._navindicator).addClass(ClassName.IN);
+          $(this._navindicator).addClass(ClassName.SHOW);
           Util.reflow(this._navindicator);
 
           if (supportsTransition) {
-            $(this._navindicator).addClass(ClassName.ANIMATE);
-
-            if (relatedLeft > elLeft) {
-              $(this._navindicator).addClass(ClassName.REVERSE);
-            }
+            $(this._nav).addClass(ClassName.ANIMATE);
           }
         }
 
@@ -560,7 +556,8 @@ var TabSwitch = function ($) {
         });
 
         var complete = function complete() {
-          $(_this8._navindicator).removeClass(ClassName.ANIMATE).removeClass(ClassName.IN).removeClass(ClassName.REVERSE);
+          $(_this8._nav).removeClass(ClassName.ANIMATE);
+          $(_this8._navindicator).removeClass(ClassName.SHOW);
         };
 
         if (!supportsTransition) {
@@ -583,7 +580,7 @@ var TabSwitch = function ($) {
       key: '_jQueryInterface',
       value: function _jQueryInterface(relatedTarget) {
         return this.each(function () {
-          var nav = $(this).closest(Selector.TAB_NAV)[0];
+          var nav = $(this).closest(Selector.NAV)[0];
 
           if (!nav) {
             return;
@@ -620,7 +617,7 @@ var TabSwitch = function ($) {
 
 /*!
  * global util js
- * based on bootstrap's (v4.0.0-alpha.5) util.js
+ * based on bootstrap's (v4.0.0-alpha.6) util.js
  */
 var Util = function ($) {
   var transition = false;
@@ -712,7 +709,7 @@ var Util = function ($) {
     },
     getUID: function getUID(prefix) {
       do {
-        prefix += ~~(Math.random() * 1000000);
+        prefix += ~ ~(Math.random() * 1000000);
       } while (document.getElementById(prefix));
       return prefix;
     },

data/app/assets/stylesheets/material/_mixins.scss

@@ -4,6 +4,7 @@
 @import "mixins/clearfix";
 @import "mixins/form";
 @import "mixins/grid";
+@import "mixins/grid-framework";
 @import "mixins/hex-to-rgba";
 @import "mixins/hover";
 @import "mixins/image";
@@ -17,5 +18,6 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
+@import "mixins/transform";
 @import "mixins/transition";
 @import "mixins/typography";

data/app/assets/stylesheets/material/_utilities.scss

@@ -4,8 +4,11 @@
   @import "utilities/background";
   @import "utilities/clearfix";
   @import "utilities/display";
+  @import "utilities/flex";
   @import "utilities/float";
+  @import "utilities/position";
   @import "utilities/screenreader";
+  @import "utilities/sizing";
   @import "utilities/spacing";
   @import "utilities/text";
   @import "utilities/visibility";

data/app/assets/stylesheets/material/_variables.scss

@@ -4,10 +4,11 @@
 
   @each $key, $num in $map {
     @if $prev-num == null {
+      // do nothing
     } @else if not comparable($num, $prev-num) {
-      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}'!";
     } @else if $num <= $prev-num {
-      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}'!";
     }
 
     $prev-key: $key;
@@ -15,6 +16,27 @@
   }
 }
 
+@mixin _assert-starts-at-zero($map) {
+  $first-value: nth(map-values($map), 1);
+
+  @if $first-value != 0 {
+    @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
+  }
+}
+
+// sass option
+  $enable-grid-classes:      true !default;
+  $enable-hover-media-query: false !default;
+  $enable-print-styles:      true !default;
+
+  // the following bootstrap options are not supported in material
+  // this is because these features are required by material design guidelines
+
+  // $enable-gradients:         true !default;
+  // $enable-rounded:           true !default;
+  // $enable-shadows:           true !default;
+  // $enable-transitions:       true !default;
+
 @import "variables/animation";
 @import "variables/colour";
 @import "variables/elevation-shadow";