fix(mdButton): focus styles only on keyboard

Closes #1423. Closes #1594. Closes #142.
angular · Apr 10, 2015 · dfb4d1a · dfb4d1a
1 parent 42db19d
commit dfb4d1a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss
@@ -5,7 +5,7 @@ $button-fab-border-radius: 50% !default;
   border-radius: $button-border-radius;
 
   &:not([disabled]) {
-    &:focus {
+    &.focus {
       background-color: '{{background-500-0.2}}';
     }
   }
@@ -34,18 +34,29 @@ $button-fab-border-radius: 50% !default;
         color: '{{primary-contrast}}';
       }
       &:not([disabled]) {
-        &:focus {
+        &.focus {
           background-color: '{{primary-600}}';
         }
       }
     }
   }
+  &.md-fab {
+    border-radius: $button-fab-border-radius;
+    background-color: '{{accent-color}}';
+    color: '{{accent-contrast}}';
+    &:not([disabled]) {
+      &:hover,
+      &.focus {
+        background-color: '{{accent-A700}}';
+      }
+    }
+  }
 
   &.md-raised {
     color: '{{background-contrast}}';
     background-color: '{{background-50}}';
     &:not([disabled]) {
-      &:focus {
+      &.focus {
         background-color: '{{background-200}}';
       }
     }
@@ -62,7 +73,7 @@ $button-fab-border-radius: 50% !default;
         color: '{{warn-contrast}}';
       }
       &:not([disabled]) {
-        &:focus {
+        &.focus {
           background-color: '{{warn-700}}';
         }
       }
@@ -79,7 +90,7 @@ $button-fab-border-radius: 50% !default;
         color: '{{accent-contrast}}';
       }
       &:not([disabled]) {
-        &:focus {
+        &.focus {
           background-color: '{{accent-700}}';
         }
       }

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -58,7 +58,7 @@ angular.module('material.components.button', [
  *  </md-button>
  * </hljs>
  */
-function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria) {
+function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria, $timeout) {
 
   return {
     restrict: 'EA',
@@ -95,6 +95,20 @@ function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria) {
         element.attr('tabindex', isDisabled ? -1 : 0);
       });
     }
+
+    // restrict focus styles to the keyboard
+    scope.mouseActive = false;
+    element
+      .on('mousedown', function() {
+        scope.mouseActive = true;
+        $timeout(function(){
+          scope.mouseActive = false;
+        }, 100);
+      })
+      .on('focus', function() {
+        if(scope.mouseActive === false) element.addClass('focus');
+      })
+      .on('blur', function() { element.removeClass('focus'); });
   }
 
 }

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -165,7 +165,7 @@ $icon-button-margin: 0.600rem !default;
   .md-button.md-fab-top-right {
     transform: translate3d(0, $button-fab-toast-offset, 0);
     &:not([disabled]) {
-      &:focus,
+      &.focus,
       &:hover {
         transform: translate3d(0, $button-fab-toast-offset - 1, 0);
       }
@@ -177,7 +177,7 @@ $icon-button-margin: 0.600rem !default;
   .md-button.md-fab-bottom-right {
     transform: translate3d(0, -$button-fab-toast-offset, 0);
     &:not([disabled]) {
-      &:focus,
+      &.focus,
       &:hover {
         transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
       }