improve button style when focused

src/components/emby-button/emby-button.css

@@ -3,7 +3,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    margin: 0 .29em;
+    margin: 0 0.3em;
     text-align: center;
     font-size: inherit;
     font-family: inherit;
@@ -15,11 +15,11 @@
     user-select: none;
     cursor: pointer;
     z-index: 0;
-    padding: .86em 1em;
+    padding: 0.9em 1em;
     vertical-align: middle;
     border: 0;
     vertical-align: middle;
-    border-radius: .2em;
+    border-radius: 0.2em;
     /* These are getting an outline in opera tv browsers, which run chrome 30 */
     outline: none !important;
     position: relative;
@@ -29,6 +29,13 @@
     text-decoration: none;
     /* Not crazy about this but it normalizes heights between anchors and buttons */
     line-height: 1.35;
+    transform-origin: center;
+    transition: 0.2s;
+}
+
+.emby-button.show-focus:focus {
+    transform: scale(1.4);
+    z-index: 1;
 }
 
 .emby-button::-moz-focus-inner {
@@ -54,17 +61,6 @@
     text-decoration: underline;
 }
 
-.emby-button-focusscale {
-    transition: transform 180ms ease-out !important;
-    -webkit-transform-origin: center center;
-    transform-origin: center center;
-}
-
-.emby-button-focusscale:focus {
-    transform: scale(1.16);
-    z-index: 1;
-}
-
 .emby-button > i {
     /* For non-fab buttons that have icons */
     font-size: 1.36em;
@@ -77,7 +73,7 @@
 .fab {
     display: inline-flex;
     border-radius: 50%;
-    padding: .6em;
+    padding: 0.6em;
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
@@ -125,14 +121,22 @@
     /* Disable webkit tap highlighting */
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     justify-content: center;
+    transform-origin: center;
+    transition: 0.2s;
+}
+
+.paper-icon-button-light.show-focus:focus {
+    transform: scale(1.6);
+    z-index: 1;
 }
 
     .paper-icon-button-light::-moz-focus-inner {
         border: 0;
     }
 
-    .paper-icon-button-light[disabled] {
-        opacity: .3;
+    .paper-icon-button-light:disabled {
+        opacity: 0.3;
+        cursor: default;
     }
 
     .paper-icon-button-light > i {
@@ -145,8 +149,6 @@
 
     .paper-icon-button-light > img {
         width: 1.72em;
-        /* Can't use 100% height or it will stretch past the boundaries in safari */
-        /*height: 100%;*/
         max-height: 100%;
         /* Make sure its on top of the ripple */
         position: relative;
@@ -159,17 +161,6 @@
     z-index: 1;
 }
 
-.icon-button-focusscale {
-    transition: transform 180ms ease-out !important;
-    -webkit-transform-origin: center center;
-    transform-origin: center center;
-}
-
-.icon-button-focusscale:focus {
-    transform: scale(1.3);
-    z-index: 1;
-}
-
 .btnFilterWithBubble {
     position: relative;
 }
@@ -180,7 +171,6 @@
     background: #444;
     top: 0;
     right: 0;
-    /* padding: .5em; */
     width: 1.6em;
     height: 1.6em;
     z-index: 100000000;

src/components/emby-button/emby-button.js

@@ -21,30 +21,23 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
     }
 
     EmbyButtonPrototype.createdCallback = function () {
-
         if (this.classList.contains('emby-button')) {
             return;
         }
 
         this.classList.add('emby-button');
-
         if (layoutManager.tv) {
-            if (this.getAttribute('data-focusscale') !== 'false') {
-                this.classList.add('emby-button-focusscale');
-            }
-            this.classList.add('emby-button-tv');
+            // handles all special css for tv layout
+            // the old method was element-showfocus
+            // this method utilizes class chaining instead
+            this.classList.add('show-focus');
         }
     };
 
     EmbyButtonPrototype.attachedCallback = function () {
-
         if (this.tagName === 'A') {
-
-            dom.removeEventListener(this, 'click', onAnchorClick, {
-            });
-
-            dom.addEventListener(this, 'click', onAnchorClick, {
-            });
+            dom.removeEventListener(this, 'click', onAnchorClick, {});
+            dom.addEventListener(this, 'click', onAnchorClick, {});
 
             if (this.getAttribute('data-autohide') === 'true') {
                 if (appHost.supports('externallinks')) {
@@ -57,9 +50,7 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
     };
 
     EmbyButtonPrototype.detachedCallback = function () {
-
-        dom.removeEventListener(this, 'click', onAnchorClick, {
-        });
+        dom.removeEventListener(this, 'click', onAnchorClick, {});
     };
 
     EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
@@ -75,6 +66,5 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
         extends: 'a'
     });
 
-    // For extension purposes
     return EmbyButtonPrototype;
 });

src/components/emby-button/paper-icon-button-light.js

@@ -4,11 +4,10 @@ define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layo
     var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
 
     EmbyButtonPrototype.createdCallback = function () {
-
         this.classList.add('paper-icon-button-light');
 
         if (layoutManager.tv) {
-            this.classList.add('icon-button-focusscale');
+            this.classList.add('show-focus');
         }
     };
 
@@ -16,4 +15,4 @@ define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layo
         prototype: EmbyButtonPrototype,
         extends: 'button'
     });
-});
+});