bumped version number

CHANGELOG.md

@@ -1,5 +1,12 @@
 # MUI Changelog
 
+## 0.9.5 - November 26, 2016
+
+* Added '!default` modifier to value of $mui-base-font-smoothing in SASS
+* Implemented MDL ripple technique to fix animation flash issue
+  https://github.com/muicss/mui/issues/169
+* Decreased box-shadow effect when button is activated
+
 ## 0.9.4 - November 9, 2016
 
 * Fixed issue with single tab elements in React Tabs component

README.md

@@ -12,8 +12,8 @@ MUI is a lightweight CSS framework that follows Google's Material Design guideli
 **Use From the CDN:**
 
 ```html
-<link href="//cdn.muicss.com/mui-0.9.4/css/mui.min.css" rel="stylesheet" type="text/css" />
-<script src="//cdn.muicss.com/mui-0.9.4/js/mui.min.js"></script>
+<link href="//cdn.muicss.com/mui-0.9.5/css/mui.min.css" rel="stylesheet" type="text/css" />
+<script src="//cdn.muicss.com/mui-0.9.5/js/mui.min.js"></script>
 ```
 
 Or for development you can use the latest:

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "mui",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "license": "MIT",
   "authors": [
     "Andres Morey <andres@muicss.com>"

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.4",
+  "version": "0.9.5",
   "license": "MIT",
   "description": "Source code for MUI",
   "homepage": "https://www.muicss.com",

packages/cdn/angular/mui-angular.js

@@ -816,7 +816,7 @@ _angular2.default.module(moduleName, []).directive('muiButton', function () {
   return {
     restrict: 'AE',
     replace: true,
-    template: '<button class="mui-btn" mui-ripple ng-transclude></button>',
+    template: '<button class="mui-btn" mui-ripple>' + '<ng-transclude></ng-transclude>' + '<span class="mui-btn__ripple-container">' + '<span class="mui-ripple"></span>' + '</span>' + '</button>',
     transclude: true,
     link: function link(scope, element, attrs) {
       var isUndef = _angular2.default.isUndefined,
@@ -842,7 +842,12 @@ _angular2.default.module(moduleName, []).directive('muiButton', function () {
   return {
     restrict: 'A',
     link: function link(scope, element, attrs) {
-      // add mousedown event handler
+      var buttonEl = element[0];
+
+      // cache reference to ripple element
+      buttonEl._rippleEl = buttonEl.querySelector('.mui-ripple');
+
+      // add mousedown and mouseup event ripple effect handlers
       element.on(mouseDownEvents, mouseDownHandler);
     }
   };
@@ -853,47 +858,52 @@ _angular2.default.module(moduleName, []).directive('muiButton', function () {
  * @param {Event} ev - The DOM event
  */
 function mouseDownHandler(ev) {
-  var element = _angular2.default.element(this);
+  var buttonEl = this,
+      rippleEl = buttonEl._rippleEl;
 
   // exit if disabled
-  if (element.prop('disabled')) return;
+  if (buttonEl.disabled) return;
 
-  // add mouseup event handler once
-  if (!this.muiMouseUp) {
-    element.on(mouseUpEvents, mouseUpHandler);
-    this.muiMouseUp = true;
+  // add mouseup handler on first-click
+  if (!rippleEl._init) {
+    jqLite.on(buttonEl, mouseUpEvents, mouseUpHandler);
+    rippleEl._init = true;
   }
 
   // get (x, y) position of click
-  var offset = jqLite.offset(this),
+  var offset = jqLite.offset(buttonEl),
       clickEv = ev.type === 'touchstart' ? ev.touches[0] : ev,
-      xPos = clickEv.pageX - offset.left,
-      yPos = clickEv.pageY - offset.top,
-      diameter,
-      radius,
-      rippleEl;
+      xPos = Math.round(clickEv.pageX - offset.left),
+      yPos = Math.round(clickEv.pageY - offset.top),
+      diameter;
 
   // calculate diameter
-  diameter = Math.sqrt(offset.width * offset.width + offset.height * offset.height) * 2;
-
-  // create ripple element
-  rippleEl = _angular2.default.element('<div class="' + rippleClass + '"></div>');
-
-  radius = diameter / 2;
-
-  rippleEl.css({
-    height: diameter + 'px',
-    width: diameter + 'px',
-    top: yPos - radius + 'px',
-    left: xPos - radius + 'px'
+  diameter = Math.sqrt(offset.width * offset.width + offset.height * offset.height) * 2 + 2 + 'px';
+
+  // css transform
+  var tEnd = 'translate(-50%, -50%) translate(' + xPos + 'px,' + yPos + 'px)',
+      tStart = tEnd + ' scale(0.0001, 0.0001)';
+
+  jqLite.css(rippleEl, {
+    width: diameter,
+    height: diameter,
+    webkitTransform: tStart,
+    msTransform: tStart,
+    transform: tStart
   });
 
-  // add to DOM
-  element.append(rippleEl);
+  jqLite.addClass(rippleEl, 'mui--is-visible');
+  jqLite.removeClass(rippleEl, 'mui--is-animating');
 
   // start animation
   util.requestAnimationFrame(function () {
-    rippleEl.addClass('mui--animate-in mui--active');
+    jqLite.css(rippleEl, {
+      webkitTransform: tEnd,
+      msTransform: tEnd,
+      transform: tEnd
+    });
+
+    jqLite.addClass(rippleEl, 'mui--is-animating');
   });
 }
 
@@ -902,35 +912,14 @@ function mouseDownHandler(ev) {
  * @param {Event} ev - The DOM event
  */
 function mouseUpHandler(ev) {
-  var children = this.children,
-      i = children.length,
-      rippleEls = [],
-      el;
-
-  // animate out ripples
-  while (i--) {
-    el = children[i];
-    if (jqLite.hasClass(el, rippleClass)) {
-      jqLite.addClass(el, 'mui--animate-out');
-      rippleEls.push(el);
-    }
-  }
+  // get ripple element
+  var rippleEl = this._rippleEl;
 
-  // remove ripples after animation
-  if (rippleEls.length) {
-    setTimeout(function () {
-      var i = rippleEls.length,
-          el,
-          parentNode;
-
-      // remove elements
-      while (i--) {
-        el = rippleEls[i];
-        parentNode = el.parentNode;
-        if (parentNode) parentNode.removeChild(el);
-      }
-    }, animationDuration);
-  }
+  // allow a repaint to occur before removing class so animation shows for
+  // tap events
+  util.requestAnimationFrame(function () {
+    jqLite.removeClass(rippleEl, 'mui--is-visible');
+  });
 }
 
 /** Define module API */

packages/cdn/css/mui-rtl.css

@@ -706,12 +706,12 @@ h4, h5, h6 {
 }
 
 .mui-btn:active:hover {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), -1px 3px 4px rgba(0, 0, 0, 0.2);
 }
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .mui-btn:active:hover {
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), 1px 0px 2px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), 1px 0px 2px rgba(0, 0, 0, 0.12), 0 0px 4px rgba(0, 0, 0, 0.12), -1px 3px 4px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -746,12 +746,12 @@ h4, h5, h6 {
 }
 
 .mui-btn--raised:active, .mui-btn--fab:active {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), -1px 3px 4px rgba(0, 0, 0, 0.2);
 }
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .mui-btn--raised:active, .mui-btn--fab:active {
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), 1px 0px 2px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), 1px 0px 2px rgba(0, 0, 0, 0.12), 0 0px 4px rgba(0, 0, 0, 0.12), -1px 3px 4px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -2508,50 +2508,55 @@ th {
 /**
  * MUI Ripple module
  */
-.mui-ripple-effect {
+.mui-btn__ripple-container {
   position: absolute;
-  border-radius: 50%;
-  pointer-events: none;
-  opacity: 0.4;
-  transform: scale(0.0001);
+  top: 0;
+  right: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  z-index: 0;
 }
 
-.mui-ripple-effect.mui--animate-in {
+.mui-ripple {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-radius: 50%;
   opacity: 0;
-  transform: scale(1);
-  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
+  pointer-events: none;
 }
 
-.mui-ripple-effect.mui--active {
-  opacity: 0.3;
+.mui-ripple.mui--is-animating {
+  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
 }
 
-.mui-ripple-effect.mui--animate-out {
-  opacity: 0;
-  transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
+.mui-ripple.mui--is-visible {
+  opacity: 0.3;
 }
 
-.mui-btn > .mui-ripple-effect {
+.mui-btn .mui-ripple {
   background-color: #a6a6a6;
 }
 
-.mui-btn--primary > .mui-ripple-effect {
+.mui-btn--primary .mui-ripple {
   background-color: #FFF;
 }
 
-.mui-btn--dark > .mui-ripple-effect {
+.mui-btn--dark .mui-ripple {
   background-color: #FFF;
 }
 
-.mui-btn--danger > .mui-ripple-effect {
+.mui-btn--danger .mui-ripple {
   background-color: #FFF;
 }
 
-.mui-btn--accent > .mui-ripple-effect {
+.mui-btn--accent .mui-ripple {
   background-color: #FFF;
 }
 
-.mui-btn--flat > .mui-ripple-effect {
+.mui-btn--flat .mui-ripple {
   background-color: #a6a6a6;
 }
 

packages/cdn/css/mui.css

@@ -706,12 +706,12 @@ h4, h5, h6 {
 }
 
 .mui-btn:active:hover {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 1px 3px 4px rgba(0, 0, 0, 0.2);
 }
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .mui-btn:active:hover {
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), -1px 0px 2px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), -1px 0px 2px rgba(0, 0, 0, 0.12), 0 0px 4px rgba(0, 0, 0, 0.12), 1px 3px 4px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -746,12 +746,12 @@ h4, h5, h6 {
 }
 
 .mui-btn--raised:active, .mui-btn--fab:active {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 1px 3px 4px rgba(0, 0, 0, 0.2);
 }
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .mui-btn--raised:active, .mui-btn--fab:active {
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), -1px 0px 2px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), -1px 0px 2px rgba(0, 0, 0, 0.12), 0 0px 4px rgba(0, 0, 0, 0.12), 1px 3px 4px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -2508,50 +2508,55 @@ th {
 /**
  * MUI Ripple module
  */
-.mui-ripple-effect {
+.mui-btn__ripple-container {
   position: absolute;
-  border-radius: 50%;
-  pointer-events: none;
-  opacity: 0.4;
-  transform: scale(0.0001);
+  top: 0;
+  left: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  z-index: 0;
 }
 
-.mui-ripple-effect.mui--animate-in {
+.mui-ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
   opacity: 0;
-  transform: scale(1);
-  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
+  pointer-events: none;
 }
 
-.mui-ripple-effect.mui--active {
-  opacity: 0.3;
+.mui-ripple.mui--is-animating {
+  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
 }
 
-.mui-ripple-effect.mui--animate-out {
-  opacity: 0;
-  transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
+.mui-ripple.mui--is-visible {
+  opacity: 0.3;
 }
 
-.mui-btn > .mui-ripple-effect {
+.mui-btn .mui-ripple {
   background-color: #a6a6a6;
 }
 
-.mui-btn--primary > .mui-ripple-effect {
+.mui-btn--primary .mui-ripple {
   background-color: #FFF;
 }
 
-.mui-btn--dark > .mui-ripple-effect {
+.mui-btn--dark .mui-ripple {
   background-color: #FFF;
 }
 
-.mui-btn--danger > .mui-ripple-effect {
+.mui-btn--danger .mui-ripple {
   background-color: #FFF;
 }
 
-.mui-btn--accent > .mui-ripple-effect {
+.mui-btn--accent .mui-ripple {
   background-color: #FFF;
 }
 
-.mui-btn--flat > .mui-ripple-effect {
+.mui-btn--flat .mui-ripple {
   background-color: #a6a6a6;
 }