Skip to content

Commit 7de3163

Browse files
emilkowalskiemilkowalski
committed
Add gradient button & fix context menu animation
1 parent 00ceb5f commit 7de3163

File tree

3 files changed

+165
-17
lines changed

3 files changed

+165
-17
lines changed

‎components/ContextMenu/ContextMenu.js

+16-16
Original file line numberDiff line numberDiff line change
@@ -33,46 +33,46 @@ const ContextMenu = ({ children, cssStyling, scssStyling }) => {
3333

3434
export default ContextMenu;
3535

36-
const reveal = keyframes({
36+
const scaleIn = keyframes({
3737
'0%': { transform: 'scale(0.9)', opacity: 0 },
3838
'100%': { transform: 'scale(1)', opacity: 1 }
3939
});
4040

41+
const scaleOut = keyframes({
42+
'0%': { transform: 'scale(1)', opacity: 1 },
43+
'100%': { transform: 'scale(0.9)', opacity: 0 }
44+
});
45+
4146
const Content = styled(RadixContextMenu.Content, {
4247
minWidth: 160,
4348
backgroundColor: 'white',
4449
borderRadius: 6,
4550
padding: 5,
4651
boxShadow: '0px 5px 15px -5px hsla(206,22%,7%,.15)',
4752
transformOrigin: 'var(--radix-context-menu-content-transform-origin)',
48-
animation: `${reveal} 0.1s ease`
49-
});
5053

51-
const Separator = styled(RadixContextMenu.Separator, {
52-
height: 1,
53-
background: 'hsl(208, 18%, 92%)',
54-
margin: 4
55-
});
54+
'&[data-state="open"]': {
55+
animation: `${scaleIn} 0.15s ease`
56+
},
5657

57-
const Wrapper = styled(RadixContextMenu.Root, {
58-
minWidth: 160,
59-
background: '$white',
60-
borderRadius: '$1',
61-
padding: 4
58+
'&[data-state="closed"]': {
59+
animation: `${scaleOut} 0.1s ease`
60+
},
6261
});
6362

6463
const Item = styled(RadixContextMenu.Item, {
6564
fontSize: 13,
66-
padding: '5px 10px',
67-
borderRadius: '$1',
65+
borderRadius: '4px',
6866
cursor: 'default',
6967
height: 28,
7068
padding: '4px 8px',
69+
display: "flex",
70+
alignItems: 'center',
7171
color: '$gray',
7272

7373
'&:focus': {
7474
outline: 'none',
75-
backgroundColor: 'hsl(207, 11%, 96%)',
75+
backgroundColor: 'hsl(207, 11%, 91%)',
7676
color: '$darkGray'
7777
}
7878
});

‎components/Snippets/GradientBtn.js

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { styled, keyframes } from 'stitches.config.js';
2+
3+
const Component = () => {
4+
return (
5+
<Wrapper>
6+
<Gradient />
7+
<Button>Hover me</Button>
8+
</Wrapper>
9+
);
10+
};
11+
12+
const pulse = keyframes({
13+
'0%': {
14+
transform: 'rotate(0deg)',
15+
filter: 'blur(8px)',
16+
borderRadius: 5
17+
},
18+
'33%': {
19+
transform: 'rotate(-0.5deg) translate(1px,-1px) scale(1.01)',
20+
filter: 'blur(10px)',
21+
borderRadius: 3
22+
},
23+
'67%': {
24+
transform: 'rotate(1deg) translate(-1px,-1px) scale(0.99)',
25+
filter: 'blur(14px)',
26+
borderRadius: 7
27+
},
28+
'100%': {
29+
transform: 'rotate(0deg)',
30+
filter: 'blur(8px)',
31+
borderRadius: 5
32+
}
33+
});
34+
35+
const Gradient = styled('div', {
36+
filter: 'blur(1px)',
37+
borderRadius: '8px',
38+
position: 'absolute',
39+
top: '0px',
40+
left: '0px',
41+
width: '100%',
42+
height: '100%',
43+
transition: 'opacity 1.5s ease',
44+
background: 'linear-gradient(91.83deg, rgb(208, 60, 74) 2.26%, rgb(172, 74, 218) 95.81%)',
45+
animation: `10s ease-in-out 0s infinite normal both running ${pulse}`,
46+
opacity: '0.75'
47+
});
48+
49+
const Wrapper = styled('buton', {
50+
position: 'relative',
51+
padding: '1px',
52+
borderRadius: '$1',
53+
54+
'&:hover': {
55+
[`& ${Gradient}`]: {
56+
transitionDuration: '0.25s',
57+
opacity: 1
58+
}
59+
}
60+
});
61+
62+
const Button = styled('div', {
63+
padding: '12px 24px',
64+
backgroundColor: '$white',
65+
position: 'relative',
66+
color: '$black',
67+
borderRadius: '$1',
68+
cursor: 'pointer',
69+
transition: 'transform 250ms cubic-bezier(.2,.8,.4,1)'
70+
});
71+
72+
const cssStyling = `
73+
.exampleClass {
74+
position: relative;
75+
padding: 1px;
76+
borderRadius: 8px;
77+
}
78+
79+
.exampleClass:hover div {
80+
transitionDuration: 0.25s;
81+
opacity: 1;
82+
}
83+
84+
.exmapleClass div {
85+
filter: blur(1px);
86+
borderRadius: 8px;
87+
position: absolute;
88+
top: 0px;
89+
left: 0px;
90+
width: 100%;
91+
height: 100%;
92+
transition: opacity 1.5s ease;
93+
background: 'linear-gradient(91.83deg, rgb(208, 60, 74) 2.26%, rgb(172, 74, 218) 95.81%)';
94+
animation: 10s ease-in-out 0s infinite normal both running pulse;
95+
opacity: 0.75;
96+
}
97+
98+
.exampleClass span {
99+
padding: 12px 24px;
100+
backgroundColor: white;
101+
position: relative;
102+
color: black;
103+
borderRadius: 8px;
104+
cursor: pointer;
105+
transition: transform 250ms cubic-bezier(.2,.8,.4,1);
106+
}
107+
`;
108+
109+
const scssStyling = `
110+
.exampleClass {
111+
position: relative;
112+
padding: 1px;
113+
borderRadius: 8px;
114+
115+
&:hover div {
116+
transitionDuration: 0.25s;
117+
opacity: 1;
118+
}
119+
120+
div {
121+
filter: blur(1px);
122+
borderRadius: 8px;
123+
position: absolute;
124+
top: 0px;
125+
left: 0px;
126+
width: 100%;
127+
height: 100%;
128+
transition: opacity 1.5s ease;
129+
background: 'linear-gradient(91.83deg, rgb(208, 60, 74) 2.26%, rgb(172, 74, 218) 95.81%)';
130+
animation: 10s ease-in-out 0s infinite normal both running pulse;
131+
opacity: 0.75;
132+
}
133+
134+
span {
135+
padding: 12px 24px;
136+
backgroundColor: white;
137+
position: relative;
138+
color: black;
139+
borderRadius: 8px;
140+
cursor: pointer;
141+
transition: transform 250ms cubic-bezier(.2,.8,.4,1);
142+
}
143+
}
144+
`;
145+
146+
export { cssStyling, scssStyling, Component };

‎components/Snippets/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import * as ScalePseudo from './ScalePseudo';
1515
import * as UnderlineRight from './UnderlineRight';
1616
import * as FlickUp from './FlickUp';
1717
import * as DonutSpinner from './DonutSpinner';
18+
import * as GradientBtn from './GradientBtn';
1819

1920
const allSnippets = [
2021
UnderlineLeftRight,
@@ -33,7 +34,8 @@ const allSnippets = [
3334
ThreeDotsLoader,
3435
ScalePseudo,
3536
UnderlineRight,
36-
FlickUp
37+
FlickUp,
38+
GradientBtn
3739
];
3840

3941
export default allSnippets;

0 commit comments

Comments
 (0)