fix(button): update hover styles per design spec

Closes #1832
angular · Mar 20, 2015 · bef2ab1 · bef2ab1
1 parent 8849fe1
commit bef2ab1
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss
@@ -9,7 +9,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
   border-radius: $button-border-radius;
 
   &:not([disabled]) {
-    &:hover, 
     &:focus {
       background-color: '{{background-500-0.2}}';
     }
@@ -22,7 +21,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
       color: '{{primary-contrast}}';
       background-color: '{{primary-color}}';
       &:not([disabled]) {
-        &:hover, 
         &:focus {
           background-color: '{{primary-600}}';
         }
@@ -35,7 +33,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
     background-color: '{{accent-color}}';
     color: '{{accent-contrast}}';
     &:not([disabled]) {
-      &:hover, 
       &:focus {
         background-color: '{{accent-A700}}';
       }
@@ -46,7 +43,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
     color: '{{background-contrast}}';
     background-color: '{{background-50}}';
     &:not([disabled]) {
-      &:hover, 
       &:focus {
         background-color: '{{background-200}}';
       }
@@ -61,7 +57,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
       color: '{{warn-contrast}}';
       background-color: '{{warn-color}}';
       &:not([disabled]) {
-        &:hover, 
         &:focus {
           background-color: '{{warn-700}}';
         }
@@ -77,7 +72,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
       color: '{{accent-contrast}}';
       background-color: '{{accent-color}}';
       &:not([disabled]) {
-        &:hover, 
         &:focus {
           background-color: '{{accent-700}}';
         }

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -130,9 +130,11 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   &:not([disabled]) {
     &.md-raised,
     &.md-fab {
-      &:focus,
-      &:hover {
         transform: translate3d(0, -1px, 0);
+      &:focus {
+        @extend .md-shadow-bottom-z-1;
+      }
+      &:active {
         @extend .md-shadow-bottom-z-2;
       }
     }