Skip to content

Commit 2ccabbf

Browse files
kaushiknishchayrishichawda
authored andcommitted
fix(button): update button design (#301)
* Button shadow change: add more spread on normal, reduce spread on active * Icon button change shadow styles
1 parent 4f11e93 commit 2ccabbf

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

lib/button/theme.module.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@
1414
position: relative;
1515
text-align: center;
1616
text-decoration: none;
17-
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);
17+
transition: box-shadow 100ms linear;
18+
box-shadow: -3px 6px 10px 0px rgba(168, 160, 160, 0.5);
1819
border-radius: 6px;
1920
&:active {
20-
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);
21+
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);
2122
}
2223
&>.rippleWrapper {
2324
overflow: hidden;
@@ -47,9 +48,9 @@
4748
justify-content: center !important;
4849
box-sizing: border-box;
4950
border-radius: 50%;
50-
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.5) !important;
51+
box-shadow: 0 2px 9px 4px $very-light-pink-75, 0 2px 4px 2px rgba(0, 0, 0, 0.5) !important;
5152
&:active {
52-
box-shadow: 0 2px 9px 4px $very-light-pink-75, 0 2px 4px 2px rgba(0, 0, 0, 0.5) !important;
53+
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.5) !important;
5354
}
5455
& > * {
5556
max-height: 30px;

0 commit comments

Comments
 (0)