Merge branch 'develop' into gh-pages

bower.json

@@ -8,7 +8,9 @@
   "description": "Material Design theme for Bootstrap 3",
   "main": [
     "dist/css/material.css",
-    "dist/js/material.js"
+    "dist/js/material.js",
+    "dist/css/ripples.css",
+    "dist/js/ripples.js"
   ],
   "ignore": [
     "test",

dist/js/ripples.js

@@ -38,16 +38,30 @@ window.ripples = {
                 mousePos              = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                 scale                 = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
                 rippleEnd             = new CustomEvent("rippleEnd", {detail: $ripple}),
+                __rippleOpacity__     = 0.05,
+                targetColor,
+                rgbArr,
                 refreshElementStyle;
 
             $ripplecache = $ripple;
 
             // Set ripple class
             $ripple.className = "ripple";            
-
             // Move ripple to the mouse position            
             $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
                          
+            // Get the clicked targets text color, this will be applied to the ripple as background-color.
+            targetColor = window.getComputedStyle($el).color;            
+
+            
+            // This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
+            // Not sure if regexp is quicker... 
+            rgbArr = targetColor.split(',');                        
+            rgbArr.pop();
+            rgbArr.push(" " + __rippleOpacity__ + ")")            
+            targetColor = rgbArr.join(',');
+            
+
             // Insert new ripple into ripple wrapper
             $rippleWrapper.appendChild($ripple);    
 
@@ -56,10 +70,11 @@ window.ripples = {
 
             // Let other funtions know that this element is animating
             $ripple.dataset.animating = 1;
-
-            // Set scale value to ripple and animate it
+                // + "background-color: " + targetColor + ";" 
+            // Set scale value, background-color and opacity to ripple and animate it
             $ripple.className = "ripple ripple-on";
-            $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
+            $ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
+
 
             // This function is called when the animation is finished
             setTimeout(function() {

dist/js/ripples.min.js

@@ -1 +1 @@
-window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e=b,f=e.parentNode,g=document.createElement("div"),h=f.getBoundingClientRect(),j={x:a.clientX-h.left,y:a.clientY-h.top},k="transform:scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g});i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on",g.setAttribute("style",g.getAttribute("style")+["-ms-"+k,"-moz-"+k,"-webkit-"+k,k].join(";")),setTimeout(function(){g.dataset.animating=0,document.dispatchEvent(l)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;1!=a.dataset.animating&&g(a)})}};
+window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;1!=a.dataset.animating&&g(a)})}};

less/_icons-material-design.import.less

@@ -1,10 +1,10 @@
 @font-face {
     font-family: "Material-Design";
-    src:url("../fonts/Material-Design.eot?2u7a7w");
-    src:url("../fonts/Material-Design.eot?#iefix2u7a7w") format("embedded-opentype"),
-        url("../fonts/Material-Design.woff?2u7a7w") format("woff"),
-        url("../fonts/Material-Design.ttf?2u7a7w") format("truetype"),
-        url("../fonts/Material-Design.svg?2u7a7w#Material-Design") format("svg");
+    src:url("@{material-font-path}/Material-Design.eot?2u7a7w");
+    src:url("@{material-font-path}/Material-Design.eot?#iefix2u7a7w") format("embedded-opentype"),
+        url("@{material-font-path}/Material-Design.woff?2u7a7w") format("woff"),
+        url("@{material-font-path}/Material-Design.ttf?2u7a7w") format("truetype"),
+        url("@{material-font-path}/Material-Design.svg?2u7a7w#Material-Design") format("svg");
     font-weight: normal;
     font-style: normal;
 }

less/_variables.import.less

@@ -1,6 +1,7 @@
 // main: material.less
 
-
+// material icons path
+@material-font-path: "../fonts";
 
 // Material colors palette
 @red: #F44336;

less/material.less

@@ -1,11 +1,11 @@
 // Material Theme 0.0.1
 // -----------------------------------------------------
 
-@import "_variables.less";
-@import "_mixins.less";
-@import "_icons-material-design.less";
-@import "_animations.less";
-@import "_shadows.less";
+@import "_variables.import.less";
+@import "_mixins.import.less";
+@import "_icons-material-design.import.less";
+@import "_animations.import.less";
+@import "_shadows.import.less";
 
 body {
     background-color: #EEEEEE;
@@ -22,19 +22,19 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 // Well and Jumbotrons
-@import "_welljumbo.less";
+@import "_welljumbo.import.less";
 
 // Buttons
-@import "_buttons.less";
+@import "_buttons.import.less";
 
 // Checkboxes
-@import "_checkboxes.less";
+@import "_checkboxes.import.less";
 
 // Radios
-@import "_radios.less";
+@import "_radios.import.less";
 
 // Text inputs
-@import "_inputs.less";
+@import "_inputs.import.less";
 
 legend {
     border-bottom: 0;
@@ -56,10 +56,10 @@ legend {
 }
 
 // Lists
-@import "_lists.less";
+@import "_lists.import.less";
 
 // Navbar
-@import "_navbar.less";
+@import "_navbar.import.less";
 
 .dropdown-menu {
     border: 0;
@@ -77,10 +77,10 @@ legend {
 }
 
 // Alerts
-@import "_alerts.less";
+@import "_alerts.import.less";
 
 // Progress bar
-@import "_progress.less";
+@import "_progress.import.less";
 
 // Typography
 .text-warning {
@@ -99,14 +99,14 @@ legend {
     color: @btn-info;
 }
 
-@import "_tabs.less";
+@import "_tabs.import.less";
 
-@import "_popups.less";
+@import "_popups.import.less";
 
-@import "_icons.less";
+@import "_icons.import.less";
 
 
 // External plugins
-@import "_plugin-snackbarjs.less";
-@import "_plugin-nouislider.less";
-@import "_plugin-selectize.less";
+@import "_plugin-snackbarjs.import.less";
+@import "_plugin-nouislider.import.less";
+@import "_plugin-selectize.import.less";

sass/_variables.import.scss

@@ -3,30 +3,30 @@
 
 
 // Material colors palette
-$red: #F44336;
-$pink: #E91E63;
-$purple: #9C27B0;
-$deeppurple: #673AB7;
-$indigo: #3F51B5;
-$lightblue: #03A9F4;
-$cyan: #00BCD4;
-$teal: #009688;
-$lightgreen: #8BC34A;
-$lime: #CDDC39;
-$lightyellow: #FFEB3B;
-$orange: #FF9800;
-$deeporange: #FF5722;
-$grey: #9E9E9E;
-$bluegrey: #607D8B;
-$brown: #795548;
-$lightgrey: #ECECEC;
+$red: #F44336 !default;
+$pink: #E91E63 !default;
+$purple: #9C27B0 !default;
+$deeppurple: #673AB7 !default;
+$indigo: #3F51B5 !default;
+$lightblue: #03A9F4 !default;
+$cyan: #00BCD4 !default;
+$teal: #009688 !default;
+$lightgreen: #8BC34A !default;
+$lime: #CDDC39 !default;
+$lightyellow: #FFEB3B !default;
+$orange: #FF9800 !default;
+$deeporange: #FF5722 !default;
+$grey: #9E9E9E !default;
+$bluegrey: #607D8B !default;
+$brown: #795548 !default;
+$lightgrey: #ECECEC !default;
 
 // Bootstrap shades
-$primary: #4285F4;
-$success: #0F9D58;
-$info: $lightblue;
-$warning: $deeporange;
-$danger: $red;
+$primary: #4285F4 !default;
+$success: #0F9D58 !default;
+$info: $lightblue !default;
+$warning: $deeporange !default;
+$danger: $red !default;
 
 // Typography elements for Material
 $darkbg-text: rgba(255,255,255,0.84);

sass/material.scss

@@ -1,10 +1,10 @@
 // Material Theme 0.0.1
 // -----------------------------------------------------
 
-@import "_variables.scss";
-@import "_mixins.scss";
-@import "_animations.scss";
-@import "_shadows.scss";
+@import "_variables.import.scss";
+@import "_mixins.import.scss";
+@import "_animations.import.scss";
+@import "_shadows.import.scss";
 
 body {
     background-color: #EEEEEE;
@@ -21,19 +21,19 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 // Well and Jumbotrons
-@import "_welljumbo.scss";
+@import "_welljumbo.import.scss";
 
 // Buttons
-@import "_buttons.scss";
+@import "_buttons.import.scss";
 
 // Checkboxes
-@import "_checkboxes.scss";
+@import "_checkboxes.import.scss";
 
 // Radios
-@import "_radios.scss";
+@import "_radios.import.scss";
 
 // Text inputs
-@import "_inputs.scss";
+@import "_inputs.import.scss";
 
 legend {
     border-bottom: 0;
@@ -55,10 +55,10 @@ legend {
 }
 
 // Lists
-@import "_lists.scss";
+@import "_lists.import.scss";
 
 // Navbar
-@import "_navbar.scss";
+@import "_navbar.import.scss";
 
 .dropdown-menu {
     border: 0;
@@ -76,13 +76,13 @@ legend {
 }
 
 // Alerts
-@import "_alerts.scss";
+@import "_alerts.import.scss";
 
 // Progress bar
-@import "_progress.scss";
+@import "_progress.import.scss";
 
 // Panels
-@import "_cards.scss";
+@import "_cards.import.scss";
 
 // Typography
 .text-warning {
@@ -101,13 +101,13 @@ legend {
     color: $btn-info;
 }
 
-@import "_tabs.scss";
+@import "_tabs.import.scss";
 
-@import "_popups.scss";
+@import "_popups.import.scss";
 
-@import "_icons.scss";
+@import "_icons.import.scss";
 
 
 // External plugins
-@import "_plugin-snackbarjs.scss";
-@import "_plugin-nouislider.scss";
+@import "_plugin-snackbarjs.import.scss";
+@import "_plugin-nouislider.import.scss";

scripts/ripples.js

@@ -38,16 +38,30 @@ window.ripples = {
                 mousePos              = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                 scale                 = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
                 rippleEnd             = new CustomEvent("rippleEnd", {detail: $ripple}),
+                __rippleOpacity__     = 0.05,
+                targetColor,
+                rgbArr,
                 refreshElementStyle;
 
             $ripplecache = $ripple;
 
             // Set ripple class
             $ripple.className = "ripple";            
-
             // Move ripple to the mouse position            
             $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
                          
+            // Get the clicked targets text color, this will be applied to the ripple as background-color.
+            targetColor = window.getComputedStyle($el).color;            
+
+            
+            // This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
+            // Not sure if regexp is quicker... 
+            rgbArr = targetColor.split(',');                        
+            rgbArr.pop();
+            rgbArr.push(" " + __rippleOpacity__ + ")")            
+            targetColor = rgbArr.join(',');
+            
+
             // Insert new ripple into ripple wrapper
             $rippleWrapper.appendChild($ripple);    
 
@@ -56,10 +70,11 @@ window.ripples = {
 
             // Let other funtions know that this element is animating
             $ripple.dataset.animating = 1;
-
-            // Set scale value to ripple and animate it
+                // + "background-color: " + targetColor + ";" 
+            // Set scale value, background-color and opacity to ripple and animate it
             $ripple.className = "ripple ripple-on";
-            $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
+            $ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
+
 
             // This function is called when the animation is finished
             setTimeout(function() {

template/material/js/ripples.js

@@ -38,16 +38,30 @@ window.ripples = {
                 mousePos              = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                 scale                 = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
                 rippleEnd             = new CustomEvent("rippleEnd", {detail: $ripple}),
+                __rippleOpacity__     = 0.05,
+                targetColor,
+                rgbArr,
                 refreshElementStyle;
 
             $ripplecache = $ripple;
 
             // Set ripple class
             $ripple.className = "ripple";            
-
             // Move ripple to the mouse position            
             $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
                          
+            // Get the clicked targets text color, this will be applied to the ripple.
+            targetColor = window.getComputedStyle($el).color;            
+
+            
+            // This changes the last value of the rgba value (opacity) to the constant __rippleOpacity__
+            // Not sure if regexp is quicker... 
+            rgbArr = targetColor.split(',');                        
+            rgbArr.pop();
+            rgbArr.push(" " + __rippleOpacity__ + ")")            
+            targetColor = rgbArr.join(',');
+            
+
             // Insert new ripple into ripple wrapper
             $rippleWrapper.appendChild($ripple);    
 
@@ -56,10 +70,11 @@ window.ripples = {
 
             // Let other funtions know that this element is animating
             $ripple.dataset.animating = 1;
-
-            // Set scale value to ripple and animate it
+                // + "background-color: " + targetColor + ";" 
+            // Set scale value, background-color and opacity to ripple and animate it
             $ripple.className = "ripple ripple-on";
-            $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
+            $ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
+
 
             // This function is called when the animation is finished
             setTimeout(function() {

template/material/js/ripples.min.js

@@ -1 +1 @@
-window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e=b,f=e.parentNode,g=document.createElement("div"),h=f.getBoundingClientRect(),j={x:a.clientX-h.left,y:a.clientY-h.top},k="transform:scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g});i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on",g.setAttribute("style",g.getAttribute("style")+["-ms-"+k,"-moz-"+k,"-webkit-"+k,k].join(";")),setTimeout(function(){g.dataset.animating=0,document.dispatchEvent(l)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;1!=a.dataset.animating&&g(a)})}};
+window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;1!=a.dataset.animating&&g(a)})}};