Skip to content

Commit 4b72819

Browse files
emilkowalskiemilkowalski
committed
Remove stitches styling from context menu
1 parent 382155c commit 4b72819

20 files changed

+154
-391
lines changed

‎components/ContextMenu/ContextMenu.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as RadixContextMenu from '@radix-ui/react-context-menu';
44

55
const timeout = 3000;
66

7-
const ContextMenu = ({ children, stitchesStyling, cssStyling, scssStyling }) => {
7+
const ContextMenu = ({ children, locssStyling, scssStyling }) => {
88
const copyToClipboard = async (styling) => {
99
try {
1010
await navigator.clipboard.writeText(styling);
@@ -26,7 +26,6 @@ const ContextMenu = ({ children, stitchesStyling, cssStyling, scssStyling }) =>
2626
<Content>
2727
<Item onSelect={() => copyToClipboard(cssStyling)}>CSS</Item>
2828
<Item onSelect={() => copyToClipboard(scssStyling)}>SCSS</Item>
29-
<Item onSelect={() => copyToClipboard(stitchesStyling)}>Stitches</Item>
3029
</Content>
3130
</RadixContextMenu.Root>
3231
);

‎components/Snippets/BorderFade.js

+1-27
Original file line numberDiff line numberDiff line change
@@ -29,32 +29,6 @@ const Wrapper = styled('a', {
2929
}
3030
});
3131

32-
const stitchesStyling = `
33-
const exampleWrapper = styled("a", {
34-
paddingBottom: 1,
35-
color: "white",
36-
position: "relative",
37-
cursor: "pointer",
38-
39-
"&:before": {
40-
content: "",
41-
position: "absolute",
42-
height: 1,
43-
width: "100%",
44-
left: 0,
45-
bottom: 0,
46-
opacity: 0,
47-
transform: "translateY(3px)",
48-
background: "white",
49-
transition: "opacity 0.2s ease, transform 0.2s ease",
50-
},
51-
52-
"&:hover:before": {
53-
opacity: "1",
54-
transform: "translateY(0)",
55-
},
56-
});`;
57-
5832
const cssStyling = `
5933
.exampleClass {
6034
padding-bottom: 1px;
@@ -107,4 +81,4 @@ const scssStyling = `
10781
}
10882
`;
10983

110-
export { stitchesStyling, cssStyling, scssStyling, Component };
84+
export { cssStyling, scssStyling, Component };

‎components/Snippets/BorderMarker.js

+1-28
Original file line numberDiff line numberDiff line change
@@ -35,33 +35,6 @@ const Wrapper = styled('a', {
3535
}
3636
});
3737

38-
const stitchesStyling = `
39-
const exampleWrapper = styled("a", {
40-
position: "relative",
41-
42-
span: {
43-
position: "relative",
44-
},
45-
46-
"&:before": {
47-
content: "",
48-
position: "absolute",
49-
left: "-0.1px",
50-
right: "-0.1px",
51-
bottom: 0,
52-
height: "100%",
53-
transform: "scaleY(.3)",
54-
transition: "transform .6s cubic-bezier(0.53, 0.21, 0, 1)",
55-
transformOrigin: "bottom",
56-
backgroundColor: "hsl(244, 63%, 69%)",
57-
opacity: "0.6",
58-
},
59-
60-
"&:hover:before": {
61-
transform: "scaleY(1)",
62-
},
63-
});`;
64-
6538
const cssStyling = `
6639
.exampleClass {
6740
position: relative;
@@ -118,4 +91,4 @@ const scssStyling = `
11891
}
11992
`;
12093

121-
export { stitchesStyling, cssStyling, scssStyling, Component };
94+
export { cssStyling, scssStyling, Component };

‎components/Snippets/CircleScaleButton.js

+1-41
Original file line numberDiff line numberDiff line change
@@ -48,46 +48,6 @@ const Wrapper = styled('a', {
4848
}
4949
});
5050

51-
const stitchesStyling = `
52-
const exampleWrapper = styled("a", {
53-
padding: "12px 24px",
54-
backgroundColor: "white",
55-
color: "black",
56-
position: "relative",
57-
borderRadius: "7px",
58-
overflow: "hidden",
59-
60-
span: {
61-
position: "relative",
62-
},
63-
64-
"&:before": {
65-
content: "",
66-
position: "absolute",
67-
top: "50%",
68-
left: "50%",
69-
width: "140px",
70-
height: "140px",
71-
borderRadius: "50%",
72-
transform: "translate3d(-50%,-50%,0) scale3d(0,0,0)",
73-
transition: "opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1)",
74-
backgroundColor: "hsl(244, 63%, 69%)",
75-
opacity: 0,
76-
},
77-
78-
"&:hover": {
79-
"&:before": {
80-
opacity: 1,
81-
transitionDuration: ".85s",
82-
transform: "translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2)",
83-
},
84-
85-
span: {
86-
color: "white",
87-
},
88-
},
89-
});`;
90-
9151
const cssStyling = `
9252
.exampleBtn {
9353
padding: 12px 24px;
@@ -172,4 +132,4 @@ const scssStyling = `
172132
}
173133
`;
174134

175-
export { stitchesStyling, cssStyling, scssStyling, Component };
135+
export { cssStyling, scssStyling, Component };

‎components/Snippets/FlickUp.js

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { styled } from 'stitches.config.js';
2+
3+
const Component = () => {
4+
return (
5+
<Wrapper>
6+
<span className="main-text">Hover over me</span>
7+
<span className="hover-text">Hover over me</span>
8+
</Wrapper>
9+
);
10+
};
11+
12+
const Wrapper = styled('a', {
13+
color: '$white',
14+
cursor: 'pointer',
15+
overflow: 'hidden',
16+
diplay: 'block',
17+
18+
'.main-text': {
19+
diplay: 'block',
20+
transform: translateY(0),
21+
transition: 'transform 500ms'
22+
},
23+
24+
'&:before': {
25+
content: '',
26+
position: 'absolute',
27+
top: '50%',
28+
left: '50%',
29+
width: '140px',
30+
height: '140px',
31+
borderRadius: '50%',
32+
transform: 'translate3d(-50%,-50%,0) scale3d(0,0,0)',
33+
transition: 'opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1)',
34+
backgroundColor: 'hsl(244, 63%, 69%)',
35+
opacity: 0
36+
},
37+
38+
'&:hover': {
39+
'&:before': {
40+
opacity: 1,
41+
transitionDuration: '.85s',
42+
transform: 'translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2)'
43+
},
44+
45+
span: {
46+
color: '$white'
47+
}
48+
}
49+
});
50+
51+
const cssStyling = `
52+
.exampleBtn {
53+
padding: 12px 24px;
54+
background-color: hsl(222, 100%, 95%);
55+
color: hsl(243, 80%, 62%);
56+
position: relative;
57+
border-radius: 6px;
58+
overflow: hidden;
59+
z-index: 1;
60+
}
61+
62+
.exampleBtn span {
63+
z-index: 1;
64+
position: relative;
65+
}
66+
67+
.exampleBtn::before {
68+
content: '';
69+
position: absolute;
70+
top: 50%;
71+
left: 50%;
72+
width: 140px;
73+
height: 140px;
74+
border-radius: 50%;
75+
transform: translate3d(-50%,-50%,0) scale3d(0,0,0);
76+
transition: opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1);
77+
background-color: hsl(243, 80%, 62%);
78+
opacity: 0;
79+
}
80+
81+
.exampleBtn:hover span {
82+
color: hsl(222, 100%, 95%);
83+
}
84+
85+
.exampleBtn:hover::before {
86+
opacity: 1;
87+
transition-duration: .85s;
88+
transform: translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2);
89+
}
90+
`;
91+
92+
const scssStyling = `
93+
.exampleBtn {
94+
padding: 12px 24px;
95+
background-color: hsl(222, 100%, 95%);
96+
color: hsl(243, 80%, 62%);
97+
position: relative;
98+
border-radius: 6px;
99+
overflow: hidden;
100+
z-index: 1;
101+
102+
span {
103+
z-index: 1;
104+
position: relative;
105+
}
106+
107+
&:before {
108+
content: '';
109+
position: absolute;
110+
top: 50%;
111+
left: 50%;
112+
width: 140px;
113+
height: 140px;
114+
border-radius: 50%;
115+
transform: translate3d(-50%,-50%,0) scale3d(0,0,0);
116+
transition: opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1);
117+
background-color: hsl(243, 80%, 62%);
118+
opacity: 0;
119+
}
120+
121+
&:hover {
122+
span {
123+
color: hsl(222, 100%, 95%);
124+
}
125+
126+
&:before {
127+
opacity: 1;
128+
transition-duration: .85s;
129+
transform: translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2);
130+
}
131+
}
132+
}
133+
`;
134+
135+
export { cssStyling, scssStyling, Component };

‎components/Snippets/HorizontalOverlay.js

+1-42
Original file line numberDiff line numberDiff line change
@@ -47,47 +47,6 @@ const Wrapper = styled('a', {
4747
}
4848
});
4949

50-
const stitchesStyling = `
51-
const exampleWrapper = styled("a", {
52-
overflow: "hidden",
53-
padding: "12px 24px",
54-
borderRadius: 7,
55-
backgroundColor: "white",
56-
color: "black",
57-
position: "relative",
58-
display: "inline-block",
59-
cursor: "pointer",
60-
61-
span: {
62-
position: "relative",
63-
transition: "color 0.6s cubic-bezier(0.53, 0.21, 0, 1)",
64-
},
65-
66-
"&:before": {
67-
content: "",
68-
display: "block",
69-
position: "absolute",
70-
top: 0,
71-
left: 0,
72-
width: "100%",
73-
height: "100%",
74-
background: "hsl(244, 63%, 69%)",
75-
transform: "scaleX(0)",
76-
transformOrigin: "100% 100%",
77-
transition: "transform 0.6s cubic-bezier(0.53, 0.21, 0, 1)",
78-
},
79-
80-
"&:hover::before": {
81-
transformOrigin: " 0 0",
82-
transform: "scaleX(1)",
83-
},
84-
85-
"&:hover span": {
86-
color: "white",
87-
},
88-
});
89-
`;
90-
9150
const cssStyling = `
9251
.exampleClass {
9352
overflow: hidden;
@@ -172,4 +131,4 @@ const scssStyling = `
172131
}
173132
`;
174133

175-
export { stitchesStyling, cssStyling, scssStyling, Component };
134+
export { cssStyling, scssStyling, Component };

‎components/Snippets/MagnifyButton.js

+1-19
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,6 @@ const Wrapper = styled('a', {
2121
}
2222
});
2323

24-
const stitchesStyling = `
25-
const exampleWrapper = styled("a", {
26-
padding: "12px 24px",
27-
backgroundColor: "white",
28-
color: "black",
29-
borderRadius: "7px",
30-
transition: "transform 250ms cubic-bezier(.2,.8,.4,1)",
31-
32-
"&:hover": {
33-
transform: "scale(1.10)",
34-
},
35-
36-
"&:active": {
37-
transform: "scale(0.9)",
38-
},
39-
});
40-
`;
41-
4224
const cssStyling = `
4325
.exampleClass {
4426
padding: 12px 24px;
@@ -75,4 +57,4 @@ const scssStyling = `
7557
}
7658
`;
7759

78-
export { stitchesStyling, cssStyling, scssStyling, Component };
60+
export { cssStyling, scssStyling, Component };

0 commit comments

Comments
 (0)