Skip to content

Commit 0c5de5e

Browse files
AdityaSingh-7AdityaSingh-7
committed
fixed the css
1 parent 7557194 commit 0c5de5e

File tree

4 files changed

+230
-180
lines changed

4 files changed

+230
-180
lines changed

‎src/assets/styles/map/map.css‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,36 @@
77
max-width: 1200px;
88
margin: 40px auto;
99
position: relative;
10-
}
11-
12-
svg {
13-
width: 100%;
14-
height: auto;
15-
max-width: 100%;
16-
}
17-
18-
.tooltip {
19-
position: absolute;
20-
background-color: rgba(0, 0, 0, 0.8);
21-
color: white;
22-
padding: 8px 12px;
23-
border-radius: 4px;
24-
font-size: 14px;
25-
pointer-events: none;
26-
z-index: 500;
27-
display: none;
28-
}
29-
30-
path {
31-
fill: #aee38a;
32-
cursor: pointer;
33-
transition:
34-
fill 0.5s ease,
35-
transform 0.5s ease;
36-
}
37-
38-
path:hover {
39-
fill: #ffa500;
40-
transform: scale(1);
10+
11+
svg {
12+
width: 100%;
13+
height: auto;
14+
max-width: 100%;
15+
}
16+
17+
.tooltip {
18+
position: absolute;
19+
background-color: rgba(0, 0, 0, 0.8);
20+
color: white;
21+
padding: 8px 12px;
22+
border-radius: 4px;
23+
font-size: 14px;
24+
pointer-events: none;
25+
z-index: 500;
26+
display: none;
27+
transform: translate(-400%, -200%);
28+
}
29+
30+
path {
31+
fill: #aee38a;
32+
cursor: pointer;
33+
transition:
34+
fill 0.5s ease,
35+
transform 0.5s ease;
36+
37+
&:hover {
38+
fill: #ffa500;
39+
transform: scale(1);
40+
}
41+
}
4142
}

‎src/assets/styles/map/popup.css‎

Lines changed: 125 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -13,88 +13,135 @@
1313
transition: opacity 0.3s ease;
1414
max-height: 90vh;
1515
overflow-y: auto;
16-
}
17-
18-
.state-popup__name {
19-
font-size: 1.8rem;
20-
font-weight: bold;
21-
margin-bottom: 12px;
22-
color: #333;
23-
}
24-
25-
.state-popup__info {
26-
font-size: 1.4rem;
27-
margin: 12px 0;
28-
color: #444;
29-
line-height: 1.4;
30-
}
31-
32-
.state-popup__image {
33-
width: 100%;
34-
height: auto;
35-
max-height: 200px;
36-
object-fit: cover;
37-
border-radius: 8px;
38-
margin: 10px 0;
39-
}
40-
41-
.state-popup__close {
42-
position: absolute;
43-
top: 10px;
44-
right: 15px;
45-
font-size: 1.8rem;
46-
cursor: pointer;
47-
color: #666;
48-
transition: color 0.2s ease;
49-
}
50-
51-
.state-popup__close:hover {
52-
color: #333;
53-
}
54-
55-
.state-popup__buttons {
56-
display: flex;
57-
gap: 12px;
58-
margin-top: 15px;
59-
}
60-
61-
.state-popup__button {
62-
flex: 1;
63-
padding: 10px 16px;
64-
font-size: 1.2rem;
65-
cursor: pointer;
66-
border: none;
67-
border-radius: 8px;
68-
transition: all 0.2s ease;
69-
}
70-
71-
.state-popup__button--copy {
72-
background-color: #4caf50;
73-
color: white;
74-
}
75-
76-
.state-popup__button--more {
77-
background-color: #007bff;
78-
color: white;
79-
}
80-
81-
.state-popup__button:hover {
82-
transform: translateY(-2px);
83-
opacity: 0.9;
84-
}
85-
86-
@media (max-width: 768px) {
87-
.state-popup {
88-
width: 85%;
89-
padding: 15px;
90-
margin: 0 auto;
16+
17+
&__name {
18+
font-size: 1.8rem;
19+
font-weight: bold;
20+
margin-bottom: 12px;
21+
color: #333;
22+
}
23+
24+
&__info {
25+
font-size: 1.4rem;
26+
margin: 12px 0;
27+
color: #444;
28+
line-height: 1.4;
29+
}
30+
31+
&__image {
32+
width: 100%;
33+
height: auto;
34+
max-height: 200px;
35+
object-fit: cover;
36+
border-radius: 8px;
37+
margin: 10px 0;
9138
}
9239

93-
.state-popup__name {
94-
font-size: 1.6rem;
40+
&__close {
41+
position: absolute;
42+
top: 10px;
43+
right: 15px;
44+
font-size: 1.8rem;
45+
cursor: pointer;
46+
color: #666;
47+
transition: color 0.2s ease;
48+
49+
&:hover {
50+
color: #333;
51+
}
52+
}
53+
54+
&__buttons {
55+
display: flex;
56+
gap: 12px;
57+
margin-top: 15px;
9558
}
9659

97-
.state-popup__info {
60+
&__button {
61+
flex: 1;
62+
padding: 10px 16px;
9863
font-size: 1.2rem;
64+
cursor: pointer;
65+
border: none;
66+
border-radius: 8px;
67+
transition: all 0.2s ease;
68+
69+
&--copy {
70+
background-color: #4caf50;
71+
color: white;
72+
}
73+
74+
&--more {
75+
background-color: #007bff;
76+
color: white;
77+
}
78+
79+
&:hover {
80+
transform: translateY(-2px);
81+
opacity: 0.9;
82+
}
83+
}
84+
85+
/* Responsive Adjustments */
86+
@media (max-width: 768px) {
87+
width: 50%;
88+
height: 50%;
89+
padding: 15px;
90+
margin: 0 auto;
91+
92+
&__name {
93+
font-size: 1rem;
94+
}
95+
96+
&__info {
97+
font-size: 1rem;
98+
}
99+
100+
&__image {
101+
max-height: 100px;
102+
}
103+
104+
&__buttons {
105+
flex-direction: column;
106+
gap: 10px;
107+
}
108+
109+
&__button {
110+
width: 50%;
111+
font-size: 1rem;
112+
padding: 10px;
113+
}
114+
}
115+
116+
@media (max-width: 480px) {
117+
width: 95%;
118+
padding: 12px;
119+
120+
&__name {
121+
font-size: 1.4rem;
122+
}
123+
124+
&__info {
125+
font-size: 1.1rem;
126+
}
127+
128+
&__image {
129+
max-height: 120px;
130+
}
131+
132+
&__close {
133+
font-size: 1.6rem;
134+
top: 8px;
135+
right: 12px;
136+
}
137+
138+
&__buttons {
139+
gap: 8px;
140+
}
141+
142+
&__button {
143+
font-size: 1rem;
144+
padding: 10px;
145+
}
99146
}
100147
}

0 commit comments

Comments
 (0)