From ce30e1391e7c1461eaa8e78b1b4ab591129d126b Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Sun, 14 Aug 2016 12:53:23 -0400 Subject: [PATCH] update buttons --- .../emby-webcomponents/emby-button/emby-button.css | 4 ++-- .../emby-webcomponents/emby-button/emby-button.js | 11 +++++++++-- .../emby-button/paper-icon-button-light.js | 4 +++- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css index 2e0f9ec66..0df4212d8 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css +++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css @@ -187,7 +187,7 @@ opacity: .2; } -.ripple-effect { +.emby-button-ripple-effect, .paper-icon-button-light-ripple-effect { position: absolute; border-radius: 50%; width: 50px; @@ -197,7 +197,7 @@ background: currentcolor; animation: ripple-animation .8s; opacity: 0.25; - -webkit-transform: translate(0, 0); + transform-origin: center center; transform: translate3d(0, 0, 0); } diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js index fc132f673..ffb93c46e 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js +++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js @@ -6,7 +6,9 @@ var div = document.createElement('div'); - div.classList.add('ripple-effect'); + for (var i = 0, length = btn.classList.length; i < length; i++) { + div.classList.add(btn.classList[i] + '-ripple-effect'); + } var offsetX = e.offsetX || 0; var offsetY = e.offsetY || 0; @@ -16,7 +18,12 @@ div.style.top = offsetY + 'px'; } - btn.appendChild(div); + var firstChild = btn.firstChild; + if (firstChild) { + btn.insertBefore(div, btn.firstChild); + } else { + btn.appendChild(div); + } div.addEventListener("animationend", function () { div.parentNode.removeChild(div); diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js b/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js index 16f47bc8f..39250a7a7 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js +++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js @@ -14,7 +14,9 @@ var div = document.createElement('div'); - div.classList.add('ripple-effect'); + for (var i = 0, length = btn.classList.length; i < length; i++) { + div.classList.add(btn.classList[i] + '-ripple-effect'); + } var offsetX = e.offsetX || 0; var offsetY = e.offsetY || 0;