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;