fix(button): adds subtle active state

wework · Mar 22, 2019 · 12cec17 · 12cec17
1 parent 18ba126
commit 12cec17
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/packages/core/src/components/button/_button.scss b/packages/core/src/components/button/_button.scss
@@ -54,6 +54,10 @@
       border-color: $ray-color-blue-70;
     }
 
+    &:active {
+      box-shadow: 0 0 0 3px transparentize($ray-color-blue-50, 0.75);
+    }
+
     &.#{$ray-class-prefix}button--danger {
       background-color: $ray-color-red-50;
       border-color: $ray-color-red-50;
@@ -68,6 +72,10 @@
         border-color: $ray-color-red-70;
       }
 
+      &:active {
+        box-shadow: 0 0 0 3px transparentize($ray-color-red-50, 0.75);
+      }
+
       &[disabled] {
         background-color: $ray-color-red-20;
         border-color: $ray-color-red-20;
@@ -94,6 +102,10 @@
       background-color: $ray-color-blue-20;
     }
 
+    &:active {
+      box-shadow: 0 0 0 3px transparentize($ray-color-blue-50, 0.75);
+    }
+
     &.#{$ray-class-prefix}button--danger {
       border-color: $ray-color-red-50;
       color: $ray-color-red-50;
@@ -106,6 +118,10 @@
         background-color: $ray-color-red-20;
       }
 
+      &:active {
+        box-shadow: 0 0 0 3px transparentize($ray-color-red-50, 0.75);
+      }
+
       &[disabled] {
         background-color: $ray-color-white;
         border-color: rgba($ray-color-red-50, 0.4);