Merge pull request #87 from aaronshekey/button-edge-states

Button Edge States
primer · Apr 15, 2015 · 8eb6a0a · 8eb6a0a
2 parents d9ab5af + f585aae
commit 8eb6a0a
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -40,6 +40,11 @@
     box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
   }
 
+  &:focus:hover,
+  &.selected:focus {
+    border-color: #51a7e8;
+  }
+
   &:hover,
   &:active,
   &.zeroclipboard-is-hover,
@@ -52,14 +57,17 @@
 
   &:active,
   &.selected,
-  &.selected:hover,
   &.zeroclipboard-is-active {
     background-color: #dcdcdc;
     background-image: none;
     border-color: #b5b5b5;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
   }
 
+  &.selected:hover {
+    background-color: darken(#dcdcdc, 5%);
+  }
+
   &:disabled,
   &.disabled {
     &,
@@ -102,6 +110,10 @@
     border-color: darken(#4a993e, 5%);
   }
 
+  &.selected:hover {
+    background-color: darken(#60b044, 10%);
+  }
+
   &:disabled,
   &.disabled {
     &,
@@ -133,6 +145,10 @@
     border-color: darken(#cd504a, 15%);
   }
 
+  &.selected:hover {
+    background-color: darken(#b33630, 5%);
+  }
+
   &:disabled,
   &.disabled {
     &,
@@ -171,7 +187,6 @@
   &:hover,
   &:active,
   &.selected,
-  &.selected:hover,
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
     color: #fff;
@@ -185,6 +200,10 @@
     }
   }
 
+  &.selected:hover {
+    background-color: darken($brand-blue, 5%);
+  }
+
   &:disabled,
   &.disabled {
     &,
@@ -321,11 +340,14 @@
 
     // Bring any button into forefront for proper borders given negative margin below
     &:hover,
-    &:focus,
     &:active,
     &.selected {
       z-index: 2;
     }
+
+    &:focus {
+      z-index: 3;
+    }
   }
 
   // Tuck buttons into one another to prevent double border