mui-sass 0.9.4 → 0.9.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ab361c87f2d3ec404384499236a6062b65bb7c9d
-  data.tar.gz: 5f25d80b37069977bc955845b133f74523300349
+  metadata.gz: 1e8e62f5ff04b21df0e6f087d297dd159ed2fae0
+  data.tar.gz: cc1cae909d8f80063160bd99771d8d6a4674fc64
 SHA512:
-  metadata.gz: 13d84b75a7e37065b9ce382dae493f7f4464e33b47fea687b4364f3eaef41acfcf7bd51ff05dab37c419945f4b9a4f49e399f7718728d1f4b070edb16303d282
-  data.tar.gz: f0afc01eabe69d1133faf4c582e6fe2c6ffb189bb5b0c2f6959428836055856ba8c211c99f757dbede95a67c8b6003cbb721b264932f35f26f9607573b3b1302
+  metadata.gz: 57cab389871e9dc3797e5035806066e8817addfbfdaf183b3f8bd6142073abf924a2bd3df35acee6e0006d4c164a6fdaa983f819a63db9537d98fd82e7c6c0bb
+  data.tar.gz: c7782a0a9813545e20c0ccfe45440c8d973656d1daca5146f3060873ac5c45fad0982e4064caee37799870defd8436c78e986c5bb65d0673c961fc4be50654b0

data/.travis.yml

@@ -1,8 +1,9 @@
 language: ruby
 
 rvm:
-  - 2.2.5
-  - 2.3.1
+  - 2.2.6
+  - 2.3.3
+  - 2.4.0-preview3
 
 before_install: gem install bundler
 

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.9.5 (2016-11-29)
+
+- Update assets to match upstream version
+
 ## 0.9.4 (2016-11-09)
 
 - Update assets to match upstream version

data/lib/mui/sass/version.rb

@@ -1,5 +1,5 @@
 module Mui
   module Sass
-    VERSION = '0.9.4'
+    VERSION = '0.9.5'
   end
 end

data/mui-sass.gemspec

@@ -23,6 +23,7 @@ Gem::Specification.new do |spec|
 
   spec.add_runtime_dependency 'sass', '~> 3.3'
 
-  spec.add_development_dependency 'rspec', '~> 3.3'
-  spec.add_development_dependency 'rails', '~> 5.0'
+  spec.add_development_dependency 'railties', '~> 5.0'
+  spec.add_development_dependency 'rspec', '~> 3.5'
+  spec.add_development_dependency 'sprockets-rails', '~> 3.0'
 end

data/vendor/assets/javascripts/mui.js

@@ -1217,13 +1217,9 @@ module.exports = overlayFn;
 var jqLite = require('./lib/jqLite'),
     util = require('./lib/util'),
     animationHelpers = require('./lib/animationHelpers'),
-    btnClass = 'mui-btn',
-    btnFABClass = 'mui-btn--fab',
-    rippleClass = 'mui-ripple-effect',
     supportsTouch = 'ontouchstart' in document.documentElement,
     mouseDownEvents = (supportsTouch) ? 'touchstart' : 'mousedown',
-    mouseUpEvents = (supportsTouch) ? 'touchend' : 'mouseup mouseleave',
-    animationDuration = 600;
+    mouseUpEvents = (supportsTouch) ? 'touchend' : 'mouseup mouseleave';
 
 
 /**
@@ -1238,6 +1234,15 @@ function initialize(buttonEl) {
   // exit if element is INPUT (doesn't support absolute positioned children)
   if (buttonEl.tagName === 'INPUT') return;
 
+  // add ripple container (to avoid https://github.com/muicss/mui/issues/169)
+  var el = document.createElement('span');
+  el.className = 'mui-btn__ripple-container';
+  el.innerHTML = '<span class="mui-ripple"></span>';
+  buttonEl.appendChild(el);
+
+  // cache reference to ripple element
+  buttonEl._rippleEl = el.children[0];
+
   // attach event handler
   jqLite.on(buttonEl, mouseDownEvents, mouseDownHandler);
 }
@@ -1251,25 +1256,54 @@ function mouseDownHandler(ev) {
   // only left clicks
   if (ev.type === 'mousedown' && ev.button !== 0) return;
 
-  var buttonEl = this;
+  var buttonEl = this,
+      rippleEl = buttonEl._rippleEl;
 
   // exit if button is disabled
-  if (buttonEl.disabled === true) return;
+  if (buttonEl.disabled) return;
 
-  // add mouseup event to button once
-  if (!buttonEl.muiMouseUp) {
+  // add mouseup handler on first-click
+  if (!rippleEl._init) {
     jqLite.on(buttonEl, mouseUpEvents, mouseUpHandler);
-    buttonEl.muiMouseUp = true;
+    rippleEl._init = true;
   }
 
-  // create ripple element
-  var rippleEl = createRippleEl(ev, buttonEl);
+  // get ripple element offset values and (x, y) position of click
+  var offset = jqLite.offset(buttonEl),
+      clickEv = (ev.type === 'touchstart') ? ev.touches[0] : ev,
+      xPos = Math.round(clickEv.pageX - offset.left),
+      yPos = Math.round(clickEv.pageY - offset.top),
+      diameter;
+
+  // calculate diameter
+  diameter = Math.sqrt(offset.height * offset.height + 
+                       offset.width * offset.width) * 2 + 2 + 'px';
+
+  // css transform
+  var tEnd = 'translate(-50%, -50%) translate(' + xPos + 'px,' + yPos + 'px)',
+      tStart = tEnd + ' scale(0.0001, 0.0001)';
+
+  // set position and initial scale
+  jqLite.css(rippleEl, {
+    width: diameter,
+    height: diameter,
+    webkitTransform: tStart,
+    msTransform: tStart,
+    transform: tStart
+  });
 
-  buttonEl.appendChild(rippleEl);
+  jqLite.addClass(rippleEl, 'mui--is-visible');
+  jqLite.removeClass(rippleEl, 'mui--is-animating');
 
-  // animate in
+  // start animation
   util.requestAnimationFrame(function() {
-    jqLite.addClass(rippleEl, 'mui--animate-in mui--active');
+    jqLite.css(rippleEl, {
+      webkitTransform: tEnd,
+      msTransform: tEnd,
+      transform: tEnd
+    });
+    
+    jqLite.addClass(rippleEl, 'mui--is-animating');
   });
 }
 
@@ -1279,70 +1313,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);
-    }
-  }
-
-  // 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);
-  }
-}
-
-
-/**
- * Create ripple element  
- * @param {Element} - buttonEl - The button element.
- */
-function createRippleEl(ev, buttonEl) {
-  // get (x, y) position of click
-  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;
-
-  // calculate diameter
-  diameter = Math.sqrt(offset.width * offset.width + 
-                       offset.height * offset.height) * 2;
-
-  // create element
-  rippleEl = document.createElement('div'),
-  rippleEl.className = rippleClass;
+  // get ripple element
+  var rippleEl = this._rippleEl;
 
-  radius = diameter / 2;
-
-  jqLite.css(rippleEl, {
-    height: diameter + 'px',
-    width: diameter + 'px',
-    top: yPos - radius + 'px',
-    left: xPos - radius + 'px'
+  // allow a repaint to occur before removing class so animation shows for
+  // tap events
+  util.requestAnimationFrame(function() {
+    jqLite.removeClass(rippleEl, 'mui--is-visible');
   });
-
-  return rippleEl;
 }
 
 
@@ -1351,7 +1329,7 @@ module.exports = {
   /** Initialize module listeners */
   initListeners: function() {
     // markup elements available when method is called
-    var elList = document.getElementsByClassName(btnClass),
+    var elList = document.getElementsByClassName('mui-btn'),
         i = elList.length;
     while (i--) initialize(elList[i]);
 

data/vendor/assets/stylesheets/mui/_buttons.scss

@@ -16,15 +16,15 @@
 }
 
 @mixin x-btn-box-shadow-active() {
-  box-shadow: 0 10px 20px rgba(mui-color('black'), 0.19),
-              0 6px 6px rgba(mui-color('black'), 0.23);
-
+  box-shadow: 0 0px 4px rgba(mui-color('black'), 0.12),
+              1px 3px 4px rgba(mui-color('black'), 0.20);
+  
   // IE10+
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     box-shadow: 0 -1px 2px rgba(mui-color('black'), 0.12),
                 -1px 0px 2px rgba(mui-color('black'), 0.12),
-                0 10px 20px rgba(mui-color('black'), 0.19),
-                0 6px 6px rgba(mui-color('black'), 0.23);
+                0 0px 4px rgba(mui-color('black'), 0.12),
+                1px 3px 4px rgba(mui-color('black'), 0.20);
   }
 }
 
@@ -83,13 +83,12 @@
   &:hover,
   &:focus {
     @include x-btn-box-shadow-raised();
-
   }
   
   &:active:hover {
     @include x-btn-box-shadow-active();
   }
-  
+
   &:disabled,
   &.mui--is-disabled {
     cursor: $mui-cursor-disabled;

data/vendor/assets/stylesheets/mui/_ripple.scss

@@ -2,60 +2,57 @@
  * MUI Ripple module
  */
 
-// ============================================================================
-// RIPPLE
-// ============================================================================
-.mui-ripple-effect {
+.mui-btn__ripple-container {
   position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.mui-ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
   border-radius: 50%;
+  opacity: 0;
   pointer-events: none;
 
-  // initial properties
-  opacity: 0.4;
-  transform: scale(0.0001);
-
-  &.mui--animate-in {
-    opacity: 0;
-    transform: scale(1);
+  &.mui--is-animating {
     transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1),
-                opacity 0.6s 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--active {
+  &.mui--is-visible {
     opacity: 0.3;
   }
-
-  &.mui--animate-out {
-    opacity: 0;
-    transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
-  }
 }
 
-
-
-// ============================================================================
-// BUTTON-SPECIFIC STYLES
-// ============================================================================
-.mui-btn > .mui-ripple-effect {
+.mui-btn .mui-ripple {
   background-color: $mui-btn-default-ripple-color;
 }
 
-.mui-btn--primary > .mui-ripple-effect {
+.mui-btn--primary .mui-ripple {
   background-color: $mui-btn-primary-ripple-color;
 }
 
-.mui-btn--dark > .mui-ripple-effect {
+.mui-btn--dark .mui-ripple {
   background-color: $mui-btn-dark-ripple-color;
 }
 
-.mui-btn--danger > .mui-ripple-effect {
+.mui-btn--danger .mui-ripple {
   background-color: $mui-btn-danger-ripple-color;
 }
 
-.mui-btn--accent > .mui-ripple-effect {
+.mui-btn--accent .mui-ripple {
   background-color: $mui-btn-accent-ripple-color;
 }
 
-.mui-btn--flat > .mui-ripple-effect {
+.mui-btn--flat .mui-ripple {
   background-color: $mui-btn-flat-ripple-color;
 }

data/vendor/assets/stylesheets/mui/_variables.scss

@@ -77,7 +77,7 @@ $mui-base-font-family:    Arial, Verdana, Tahoma !default;
 $mui-base-font-size:      14px !default;
 $mui-base-font-weight:    400 !default;
 $mui-base-line-height:    1.429 !default;
-$mui-base-font-smoothing: false;
+$mui-base-font-smoothing: false !default;
 
 
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mui-sass
 version: !ruby/object:Gem::Version
-  version: 0.9.4
+  version: 0.9.5
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-11-09 00:00:00.000000000 Z
+date: 2016-11-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -24,34 +24,48 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.3'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.3'
+        version: '3.5'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.3'
+        version: '3.5'
 - !ruby/object:Gem::Dependency
-  name: rails
+  name: sprockets-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '3.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '3.0'
 description: MUI is a lightweight framework that follows Google's Material Design
   guidelines
 email:
@@ -123,7 +137,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.5.2
 signing_key: 
 specification_version: 4
 summary: MUI is a lightweight framework that follows Google's Material Design guidelines