From 496eb988be68d1f3071c4d6ca2d45cfb933300fa Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 13 Nov 2014 16:07:16 -0500 Subject: [PATCH] Google theme is now material, updates fadeup/down scale transitions to not be relative to size of element. Now specified in rem --- src/definitions/modules/popup.js | 8 +++---- .../default/modules/transition.overrides | 22 ++++++++++++------- .../collections/message.overrides | 0 .../collections/message.variables | 0 .../elements/button.overrides | 0 .../elements/button.variables | 0 6 files changed, 17 insertions(+), 13 deletions(-) rename src/themes/{google => material}/collections/message.overrides (100%) rename src/themes/{google => material}/collections/message.variables (100%) rename src/themes/{google => material}/elements/button.overrides (100%) rename src/themes/{google => material}/elements/button.variables (100%) diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index da06d5301..88752ae55 100644 --- a/src/definitions/modules/popup.js +++ b/src/definitions/modules/popup.js @@ -325,16 +325,14 @@ $.fn.popup = function(parameters) { show: function(callback) { callback = $.isFunction(callback) ? callback : function(){}; if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + $module + .addClass(className.visible) + ; $popup .transition({ animation : settings.transition + ' in', queue : false, duration : settings.duration, - onStart : function() { - $module - .addClass(className.visible) - ; - }, onComplete : function() { module.bind.close(); $.proxy(callback, element)(); diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index 19eea2813..63c73ee2d 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -260,22 +260,22 @@ @keyframes fadeUpIn { 0% { opacity: 0; - transform: translateY(10%); + transform: translateY(3rem); } 100% { opacity: 1; - transform: translateY(0%); + transform: translateY(0rem); } } @keyframes fadeUpOut { 0% { opacity: 1; - transform: translateY(0%); + transform: translateY(0rem); } 100% { opacity: 0; - transform: translateY(10%); + transform: translateY(3rem); } } @@ -283,21 +283,21 @@ @keyframes fadeDownIn { 0% { opacity: 0; - transform: translateY(-10%); + transform: translateY(-3rem); } 100% { opacity: 1; - transform: translateY(0%); + transform: translateY(0rem); } } @keyframes fadeDownOut { 0% { opacity: 1; - transform: translateY(0%); + transform: translateY(0rem); } 100% { opacity: 0; - transform: translateY(-10%); + transform: translateY(-3rem); } } @@ -305,6 +305,12 @@ Scale ---------------*/ +.scale.transition { + transform-origin: 50% 10rem; + -ms-transform-origin: 50% 10rem; + -webkit-transform-origin: 50% 10rem; +} + .scale.transition.in { animation-name: scaleIn; } diff --git a/src/themes/google/collections/message.overrides b/src/themes/material/collections/message.overrides similarity index 100% rename from src/themes/google/collections/message.overrides rename to src/themes/material/collections/message.overrides diff --git a/src/themes/google/collections/message.variables b/src/themes/material/collections/message.variables similarity index 100% rename from src/themes/google/collections/message.variables rename to src/themes/material/collections/message.variables diff --git a/src/themes/google/elements/button.overrides b/src/themes/material/elements/button.overrides similarity index 100% rename from src/themes/google/elements/button.overrides rename to src/themes/material/elements/button.overrides diff --git a/src/themes/google/elements/button.variables b/src/themes/material/elements/button.variables similarity index 100% rename from src/themes/google/elements/button.variables rename to src/themes/material/elements/button.variables