Skip to content

Commit 4dfda8b

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
scss
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent 5f1d845 commit 4dfda8b

File tree

2 files changed

+266
-0
lines changed

2 files changed

+266
-0
lines changed

‎assets/scss/_kanvas-corner-popup.scss‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
@keyframes gridDrift {
2+
from {
3+
background-position: 0 0;
4+
}
5+
6+
to {
7+
background-position: 28px 28px;
8+
}
9+
}
10+
11+
.kanvas-corner-popup {
12+
font-family: inherit;
13+
}
14+
15+
.kanvas-corner-popup .popup {
16+
position: fixed;
17+
bottom: 0;
18+
right: 0;
19+
margin: 0 2rem 3rem;
20+
width: 26rem;
21+
z-index: 9999;
22+
display: flex;
23+
justify-content: center;
24+
opacity: 0;
25+
transform: translateY(12px);
26+
transition: opacity 0.35s ease, transform 0.35s ease;
27+
28+
@media (max-width: 1000px) {
29+
max-width: 22rem;
30+
}
31+
32+
@media (max-width: 640px) {
33+
width: 20rem;
34+
max-width: 55%;
35+
}
36+
}
37+
38+
.kanvas-corner-popup--visible .popup {
39+
opacity: 1;
40+
transform: none;
41+
}
42+
43+
.kanvas-corner-popup--hiding .popup {
44+
opacity: 0;
45+
transform: translateY(12px);
46+
pointer-events: none;
47+
}
48+
49+
.kanvas-corner-popup .popup-inner {
50+
position: relative;
51+
width: 100%;
52+
background: #121212;
53+
display: flex;
54+
flex-direction: column;
55+
align-items: center;
56+
gap: 0.75rem;
57+
padding: 1rem;
58+
border: 1px solid #00d3a9;
59+
border-radius: 5%;
60+
box-shadow: 0 0 42px rgba(0, 211, 169, 0.85), 0 0 80px rgba(0, 211, 169, 0.25);
61+
62+
@media (max-width: 640px) {
63+
padding: 0.8rem;
64+
gap: 0.375rem;
65+
}
66+
}
67+
68+
.kanvas-corner-popup .close-btn {
69+
position: absolute;
70+
top: 0;
71+
right: 0;
72+
background: none;
73+
border: none;
74+
padding: 0;
75+
line-height: 0;
76+
cursor: pointer;
77+
color: #ffffff;
78+
79+
&:hover {
80+
opacity: 0.7;
81+
}
82+
}
83+
84+
.kanvas-corner-popup .popup-content-link {
85+
display: flex;
86+
flex-direction: column;
87+
align-items: center;
88+
gap: 0.75rem;
89+
text-decoration: none;
90+
color: inherit;
91+
width: 100%;
92+
}
93+
94+
.kanvas-corner-popup .popup-text {
95+
text-align: center;
96+
padding-top: 2%;
97+
98+
h1 {
99+
font-size: 1.8rem;
100+
color: #ffffff;
101+
}
102+
103+
h4 {
104+
padding: 3% 0;
105+
color: #a0aaaa;
106+
107+
@media (max-width: 500px) {
108+
font-size: 1rem;
109+
}
110+
}
111+
}
112+
113+
.kanvas-corner-popup .try-it-text {
114+
padding: 0.5rem 2rem 1rem;
115+
text-align: center;
116+
font-size: 1.1rem;
117+
118+
span {
119+
color: #a0aaaa;
120+
}
121+
122+
strong {
123+
color: #fff;
124+
font-weight: 600;
125+
font-size: 1.5rem;
126+
}
127+
}
128+
129+
.kanvas-corner-popup .explore-playground-button {
130+
display: inline-block;
131+
min-width: 140px;
132+
text-align: center;
133+
padding: 0.55rem 1.25rem;
134+
background: $primary;
135+
color: #fff;
136+
font-weight: 600;
137+
font-size: 0.95rem;
138+
border-radius: 4px;
139+
text-decoration: none;
140+
transition: filter 0.2s ease, box-shadow 0.2s ease;
141+
142+
&:hover {
143+
filter: brightness(1.1);
144+
box-shadow: 0 0 16px rgba($primary, 0.4);
145+
}
146+
147+
@media (max-width: 422px) {
148+
font-size: 0.75rem;
149+
min-width: 100px;
150+
}
151+
}
152+
153+
.kanvas-transition-container {
154+
position: relative;
155+
width: 100%;
156+
max-width: 90%;
157+
margin: auto;
158+
overflow: hidden;
159+
padding-bottom: 1.25rem;
160+
161+
.canvas-grid {
162+
position: absolute;
163+
inset: 0;
164+
z-index: 0;
165+
pointer-events: none;
166+
background: radial-gradient(ellipse at 50% 0%, rgba(0, 211, 169, 0.18) 0%, transparent 70%);
167+
backdrop-filter: blur(4px);
168+
-webkit-backdrop-filter: blur(4px);
169+
border-radius: inherit;
170+
171+
&::before {
172+
content: '';
173+
position: absolute;
174+
inset: 0;
175+
background-image:
176+
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
177+
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
178+
background-size: 28px 28px;
179+
animation: gridDrift 6s linear infinite;
180+
border-radius: inherit;
181+
}
182+
}
183+
184+
.kanvas-canvas-bg {
185+
display: block;
186+
width: 100%;
187+
height: auto;
188+
position: relative;
189+
z-index: 1;
190+
}
191+
192+
193+
.kanvas-layer {
194+
position: absolute;
195+
inset: 0;
196+
}
197+
198+
.kanvas-ingress-gateway,
199+
.kanvas-kubernetes,
200+
.kanvas-pod,
201+
.kanvas-prometheus,
202+
.kanvas-service-interface {
203+
position: absolute;
204+
top: 0;
205+
left: 0;
206+
scale: 0.7;
207+
transition: 1s;
208+
}
209+
210+
.kanvas-ingress-gateway {
211+
translate: -40% 0;
212+
}
213+
214+
.kanvas-kubernetes {
215+
translate: 50% -30%;
216+
}
217+
218+
.kanvas-pod {
219+
translate: 40% 30%;
220+
}
221+
222+
.kanvas-prometheus {
223+
translate: -50% 30%;
224+
}
225+
226+
.kanvas-service-interface {
227+
scale: 1;
228+
}
229+
230+
.kanvas-supporting-arrows {
231+
position: absolute;
232+
top: 0;
233+
left: 0;
234+
width: 100%;
235+
height: auto;
236+
opacity: 0;
237+
transition: opacity 0.5s ease-out 1s;
238+
}
239+
240+
.kanvas-ingress-gateway.in-view {
241+
transform: translateX(40%);
242+
scale: 1;
243+
}
244+
245+
.kanvas-kubernetes.in-view {
246+
transform: translateX(-50%) translateY(30%);
247+
scale: 1;
248+
transition: 0.75s;
249+
}
250+
251+
.kanvas-pod.in-view {
252+
transform: translateX(-40%) translateY(-30%);
253+
scale: 1;
254+
}
255+
256+
.kanvas-prometheus.in-view {
257+
transform: translateX(50%) translateY(-30%);
258+
scale: 1;
259+
transition: 1.25s;
260+
}
261+
262+
.kanvas-supporting-arrows.in-view {
263+
opacity: 1;
264+
}
265+
}

‎assets/scss/_styles_project.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@import "_video-landing_project.scss";
1414
@import "elements_project";
1515
@import "summary.scss";
16+
@import "_kanvas-corner-popup.scss";
1617

1718
.navbar-dark {
1819
min-height: 5rem;

0 commit comments

Comments
 (0)