Skip to content

Commit e4e3416

Browse files
oopserianoopserian
committed
style(labs)
1 parent 188c366 commit e4e3416

File tree

5 files changed

+328
-317
lines changed

5 files changed

+328
-317
lines changed

‎src/data/labs/css-toast/style.css‎

Lines changed: 62 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -12,77 +12,74 @@
1212
overflow: hidden;
1313
gap: 1rem;
1414
padding: 2rem 1rem;
15+
}
1516

16-
button {
17-
background: var(--bg-color);
18-
border: 1px solid var(--border-color);
19-
border-radius: 0.5rem;
20-
padding: 0.4rem 1rem;
21-
cursor: pointer;
22-
color: var(--font-color);
23-
font-size: 0.75rem;
24-
border: 1px solid var(--border-color);
25-
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 1),
26-
0 3px 10px rgba(255, 255, 255, 0.3);
27-
transition: .3s ease;
28-
transition-property: box-shadow, transform;
17+
.css-toast-wrap button {
18+
background: var(--bg-color);
19+
border: 1px solid var(--border-color);
20+
border-radius: 0.5rem;
21+
padding: 0.4rem 1rem;
22+
cursor: pointer;
23+
color: var(--font-color);
24+
font-size: 0.75rem;
25+
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 1), 0 3px 10px rgba(255, 255, 255, 0.3);
26+
transition: .3s ease;
27+
transition-property: box-shadow, transform;
28+
}
2929

30-
&:active {
31-
transform: scale(0.98);
32-
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 1),
33-
0 3px 10px rgba(255, 255, 255, 0);
34-
}
35-
}
30+
.css-toast-wrap button:active {
31+
transform: scale(0.98);
32+
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 1), 0 3px 10px rgba(255, 255, 255, 0);
33+
}
3634

37-
.toast-list {
38-
position: relative;
39-
display: flex;
40-
flex-direction: column;
41-
gap: 0.5rem;
42-
width: 80%;
43-
height: 100%;
44-
--gap: -80%;
35+
.css-toast-wrap .toast-list {
36+
position: relative;
37+
display: flex;
38+
flex-direction: column;
39+
gap: 0.5rem;
40+
width: 80%;
41+
height: 100%;
42+
--gap: -80%;
43+
}
4544

46-
&:hover {
47-
--gap: 0.5rem;
45+
.css-toast-wrap .toast-list:hover {
46+
--gap: 0.5rem;
47+
}
4848

49-
li.show {
50-
transform: translateY(calc(var(--index) * (100% + var(--gap)) * -1)) scale(1);
51-
}
52-
}
49+
.css-toast-wrap .toast-list:hover .show {
50+
transform: translateY(calc(var(--index) * (100% + var(--gap)) * -1)) scale(1);
51+
}
5352

54-
li {
55-
position: absolute;
56-
background: var(--bg-color);
57-
color: var(--font-color);
58-
width: 100%;
59-
padding: 0.75rem 1rem;
60-
bottom: 0;
61-
left: 0;
62-
gap: 1rem;
63-
border-radius: 0.5rem;
64-
border: 1px solid var(--border-color);
65-
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
66-
opacity: 0;
67-
transform: perspective(1000px) translateY(50%) scale(1.1) rotateX(45deg);
68-
transition: transform .5s ease, opacity .3s ease;
69-
will-change: transform;
70-
font-size: 0.75rem;
53+
.css-toast-wrap .toast-list li {
54+
position: absolute;
55+
background: var(--bg-color);
56+
color: var(--font-color);
57+
width: 100%;
58+
padding: 0.75rem 1rem;
59+
bottom: 0;
60+
left: 0;
61+
gap: 1rem;
62+
border-radius: 0.5rem;
63+
border: 1px solid var(--border-color);
64+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
65+
opacity: 0;
66+
transform: perspective(1000px) translateY(50%) scale(1.1) rotateX(45deg);
67+
transition: transform .5s ease, opacity .3s ease;
68+
will-change: transform;
69+
font-size: 0.75rem;
70+
}
7171

72-
span {
73-
opacity: 0.5;
74-
}
72+
.css-toast-wrap .toast-list li span {
73+
opacity: 0.5;
74+
}
7575

76-
&.show {
77-
opacity: 1;
78-
transform: translateY(calc(var(--index) * (100% + var(--gap)) * -1)) scale(calc(1 - var(--index) * 0.05));
79-
}
76+
.css-toast-wrap .toast-list li.show {
77+
opacity: 1;
78+
transform: translateY(calc(var(--index) * (100% + var(--gap)) * -0.6)) scale(calc(1 - var(--index) * 0.05));
79+
}
8080

81-
&.hide {
82-
opacity: 0;
83-
transform: scale(calc(1 - var(--index) * 0.05));
84-
transition: 0.3s ease-in;
85-
}
86-
}
87-
}
88-
}
81+
.css-toast-wrap .toast-list li.hide {
82+
opacity: 0;
83+
transform: scale(calc(1 - var(--index) * 0.05));
84+
transition: 0.3s ease-in;
85+
}

‎src/data/labs/folder/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export default function Folder() {
3333
</div>
3434
</div>
3535
</div>
36+
<p className="tip">Hover 👆</p>
3637
</div>
3738
)
3839
}

‎src/data/labs/folder/style.css‎

Lines changed: 114 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -5,114 +5,119 @@
55
align-items: center;
66
justify-content: center;
77
padding: 3rem 0;
8+
flex-direction: column;
9+
gap: 0.5rem;
10+
}
11+
12+
.tip{
13+
font-size: 0.75rem;
14+
opacity: 0.4;
15+
}
16+
17+
.folder {
18+
position: relative;
19+
}
20+
21+
.folder:hover .folder-front {
22+
transform: perspective(1100px) rotateX(-30deg);
23+
box-shadow: 0px -5px 40px -5px rgba(0, 0, 0, .25);
24+
}
25+
26+
.folder:hover .folder-content > img {
27+
transform: translate3d(-50%, -25%, 0);
28+
transition-delay: 0.1s;
29+
}
30+
31+
.folder:hover .folder-content > img:hover {
32+
z-index: 2;
33+
transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1.2);
34+
}
35+
36+
.folder:hover .folder-content > img:first-child {
37+
transform: translate3d(-10px, -25%, 0) rotate(-6deg);
38+
}
39+
40+
.folder:hover .folder-content > img:first-child:hover {
41+
z-index: 2;
42+
transform: translate3d(-10px, -50%, 0) rotate(0deg) scale(1.2);
43+
}
44+
45+
.folder:hover .folder-content > img:last-child {
46+
transform: translate3d(10px, -25%, 0) rotate(6deg);
47+
transition-delay: .2s;
48+
}
49+
50+
.folder:hover .folder-content > img:last-child:hover {
51+
z-index: 2;
52+
transform: translate3d(10px, -50%, 0) rotate(0deg) scale(1.2);
53+
}
54+
55+
.folder-behind {
56+
width: 100%;
57+
height: 100%;
58+
color: #88cef7;
59+
}
860

9-
.folder {
10-
position: relative;
11-
width: 100%;
12-
height: 100%;
13-
14-
&:hover {
15-
.folder-front {
16-
transform: perspective(1100px) rotateX(-30deg);
17-
box-shadow: 0px -5px 40px -5px rgba(0, 0, 0, .25);
18-
}
19-
20-
.folder-content>img {
21-
transform: translate3d(-50%, -25%, 0);
22-
23-
&:hover {
24-
z-index: 2;
25-
transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1.2);
26-
}
27-
28-
&:first-child {
29-
transform: translate3d(-10px, -25%, 0) rotate(-6deg);
30-
31-
&:hover {
32-
z-index: 2;
33-
transform: translate3d(-10px, -50%, 0) rotate(0deg) scale(1.2);
34-
}
35-
}
36-
37-
&:last-child {
38-
transform: translate3d(10px, -25%, 0) rotate(6deg);
39-
40-
&:hover {
41-
z-index: 2;
42-
transform: translate3d(10px, -50%, 0) rotate(0deg) scale(1.2);
43-
}
44-
}
45-
}
46-
}
47-
48-
.folder-behind {
49-
width: 100%;
50-
height: 100%;
51-
color: #88cef7;
52-
}
53-
54-
.folder-content {
55-
position: absolute;
56-
top: 0;
57-
left: 0;
58-
width: 100%;
59-
height: 100%;
60-
}
61-
62-
.folder-content>img {
63-
position: absolute;
64-
width: auto;
65-
height: 75%;
66-
border-radius: 0.6rem;
67-
transform: translate3d(0, 0, 0);
68-
transition: .25s .1s cubic-bezier(0.56, 0.59, 0.17, 1.33);
69-
transition-property: transform;
70-
will-change: transform;
71-
left: 50%;
72-
bottom: 5%;
73-
transform: translate3d(-50%, 0, 0);
74-
75-
&:first-child {
76-
left: 0;
77-
transform: translate3d(0, 0, 0);
78-
}
79-
80-
&:last-child {
81-
left: unset;
82-
right: 0;
83-
transform: translate3d(0, 0, 0);
84-
}
85-
}
86-
87-
.folder-front {
88-
position: absolute;
89-
z-index: 2;
90-
bottom: 0;
91-
left: 0;
92-
width: 100%;
93-
height: 80%;
94-
background-image: linear-gradient(to bottom, #88cef7 70%, #97d1f2);
95-
border-radius: 0.6rem 0.6rem 0.5rem 0.5rem;
96-
display: flex;
97-
align-items: center;
98-
justify-content: center;
99-
box-shadow: 0px -5px 10px -5px rgba(0, 0, 0, .25);
100-
border: 1px solid rgba(255, 255, 255, .1);
101-
transform-origin: bottom;
102-
transition: .5s cubic-bezier(0.56, 0.59, 0.17, 1.33);
103-
transition-property: transform, box-shadow;
104-
will-change: transform;
105-
106-
.folder-logo {
107-
width: 2.5rem;
108-
height: 2.5rem;
109-
mix-blend-mode: multiply;
110-
111-
svg {
112-
width: 100%;
113-
height: 100%;
114-
}
115-
}
116-
}
117-
}
61+
.folder-content {
62+
position: absolute;
63+
top: 0;
64+
left: 0;
65+
width: 100%;
66+
height: 100%;
67+
}
68+
69+
.folder-content > img {
70+
position: absolute;
71+
width: auto;
72+
height: 75%;
73+
border-radius: 0.6rem;
74+
transform: translate3d(0, 0, 0);
75+
transition: .25s .1s cubic-bezier(0.56, 0.59, 0.17, 1.33);
76+
transition-property: transform;
77+
will-change: transform;
78+
left: 50%;
79+
bottom: 5%;
80+
transform: translate3d(-50%, 0, 0);
81+
}
82+
83+
.folder-content > img:first-child {
84+
left: 0;
85+
transform: translate3d(0, 0, 0);
86+
}
87+
88+
.folder-content > img:last-child {
89+
left: unset;
90+
right: 0;
91+
transform: translate3d(0, 0, 0);
92+
}
93+
94+
.folder-front {
95+
position: absolute;
96+
z-index: 2;
97+
bottom: 0;
98+
left: 0;
99+
width: 100%;
100+
height: 80%;
101+
background-image: linear-gradient(to bottom, #88cef7 70%, #97d1f2);
102+
border-radius: 0.6rem 0.6rem 0.5rem 0.5rem;
103+
display: flex;
104+
align-items: center;
105+
justify-content: center;
106+
box-shadow: 0px -5px 10px -5px rgba(0, 0, 0, .25);
107+
border: 1px solid rgba(255, 255, 255, .1);
108+
transform-origin: bottom;
109+
transition: .5s cubic-bezier(0.56, 0.59, 0.17, 1.33);
110+
transition-property: transform, box-shadow;
111+
will-change: transform;
112+
}
113+
114+
.folder-logo {
115+
width: 2.5rem;
116+
height: 2.5rem;
117+
mix-blend-mode: multiply;
118+
}
119+
120+
.folder-logo svg {
121+
width: 100%;
122+
height: 100%;
118123
}

0 commit comments

Comments
 (0)