fix(button): update button design (#301)

* Button shadow change: add more spread on normal, reduce spread on active * Icon button change shadow styles
Codebrahma · Jan 1, 2019 · 2ccabbf · 2ccabbf
1 parent 4f11e93
commit 2ccabbf
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/lib/button/theme.module.scss b/lib/button/theme.module.scss
@@ -14,10 +14,11 @@
     position: relative;
     text-align: center;
     text-decoration: none;
-    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px 0 rgba(163, 152, 152, 0.5), 0 3px 4px 0 rgba(168, 160, 160, 0.5);
+    transition: box-shadow 100ms linear;
+    box-shadow: -3px 6px 10px 0px rgba(168, 160, 160, 0.5);
     border-radius: 6px;
     &:active {
-        box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.07), 0 2px 6px 0 rgba(163, 152, 152, 0.5), -5px 8px 10px 0 rgba(168, 160, 160, 0.5);
+    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px 0 rgba(163, 152, 152, 0.5), 0 3px 2px 0 rgba(168, 160, 160, 0.5);
     }
     &>.rippleWrapper {
         overflow: hidden;
@@ -47,9 +48,9 @@
   justify-content: center !important;
   box-sizing: border-box;
   border-radius: 50%;
-  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.5) !important;
+  box-shadow: 0 2px 9px 4px $very-light-pink-75, 0 2px 4px 2px rgba(0, 0, 0, 0.5) !important;
   &:active  {
-    box-shadow: 0 2px 9px 4px $very-light-pink-75, 0 2px 4px 2px rgba(0, 0, 0, 0.5) !important;
+    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.5) !important;
   }
   & > * {
     max-height: 30px;