Skip to content

Commit 4e7630c

Browse files
awesomephantawesomephant
committed
fix: move global styles to imported CSS
1 parent d349739 commit 4e7630c

12 files changed

Lines changed: 440 additions & 459 deletions

File tree

‎components/src/maplibre/AttributionControl/AttributionControl.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.maplibregl-ctrl.maplibregl-ctrl-attrib {
2+
font-size: var(--fs-small-3);
3+
letter-spacing: 0.005em;
4+
word-spacing: 0.005em;
5+
font-family: var(--swr-sans);
6+
}
7+
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
8+
display: block;
9+
}
10+
.maplibregl-ctrl-attrib-button {
11+
display: none;
12+
}
13+
14+
.maplibregl-ctrl-attrib a {
15+
color: inherit;
16+
text-decoration: none;
17+
text-underline-offset: 0.2em;
18+
}
19+
.maplibregl-ctrl-attrib a:hover {
20+
color: inherit;
21+
text-decoration: underline;
22+
}

‎components/src/maplibre/AttributionControl/AttributionControl.svelte‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import maplibre, { type ControlPosition } from 'maplibre-gl';
33
import MapControl from '../MapControl/MapControl.svelte';
4+
import './AttributionControl.css';
45
56
interface AttributionControlProps {
67
position?: ControlPosition;
@@ -16,30 +17,3 @@
1617
compact: false
1718
})}
1819
/>
19-
20-
<style lang="scss">
21-
:global {
22-
.maplibregl-ctrl.maplibregl-ctrl-attrib {
23-
font-size: var(--fs-small-3);
24-
letter-spacing: 0.005em;
25-
word-spacing: 0.005em;
26-
font-family: var(--swr-sans);
27-
}
28-
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
29-
display: block;
30-
}
31-
.maplibregl-ctrl-attrib-button {
32-
display: none;
33-
}
34-
35-
.maplibregl-ctrl-attrib a {
36-
color: inherit;
37-
text-decoration: none;
38-
text-underline-offset: 0.2em;
39-
}
40-
.maplibregl-ctrl-attrib a:hover {
41-
color: inherit;
42-
text-decoration: underline;
43-
}
44-
}
45-
</style>

‎components/src/maplibre/GeocoderControl/GeocoderControl.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
.maplibregl-ctrl-geocoder {
2+
background-color: #fff;
3+
position: relative;
4+
width: 100%;
5+
z-index: 1;
6+
font-family: var(--swr-sans);
7+
font-size: var(--fs-small-1);
8+
border-radius: var(--br-small);
9+
border: 1px solid rgba(0, 0, 0, 0.75);
10+
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
11+
}
12+
13+
.maplibre-gl-geocoder--error {
14+
font-size: var(--fs-small-2);
15+
color: var(--gray-dark-2);
16+
padding: 0.4em 0.65em;
17+
}
18+
19+
.maplibregl-ctrl-geocoder--input {
20+
width: calc(100% - 3.7em);
21+
height: 100%;
22+
font-family: inherit;
23+
font-size: inherit;
24+
background-color: transparent;
25+
color: var(--gray-dark-5);
26+
border: 0;
27+
height: 1.85em;
28+
padding: 0 1.85em;
29+
padding-top: 0.1em;
30+
text-overflow: ellipsis;
31+
white-space: nowrap;
32+
overflow: hidden;
33+
}
34+
35+
.maplibregl-ctrl-geocoder--input::placeholder {
36+
opacity: 1;
37+
color: var(--gray-dark-2);
38+
}
39+
.maplibregl-ctrl-geocoder--input:focus {
40+
color: var(--gray-dark-5);
41+
outline: 0;
42+
}
43+
44+
.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
45+
display: none;
46+
position: absolute;
47+
z-index: 2;
48+
right: 0.5em;
49+
top: 50%;
50+
transform: translateY(-50%);
51+
border: 0;
52+
}
53+
54+
/* Suggestions */
55+
.maplibregl-ctrl-geocoder .suggestions {
56+
background: white;
57+
border: 1px solid rgba(0, 0, 0, 0.75);
58+
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
59+
border-radius: var(--br-small);
60+
left: 0;
61+
list-style: none;
62+
position: absolute;
63+
width: 100%;
64+
top: calc(100% + 0.5em);
65+
z-index: 1000;
66+
overflow: hidden;
67+
}
68+
69+
.maplibregl-ctrl-bottom-left .suggestions,
70+
.maplibregl-ctrl-bottom-right .suggestions {
71+
top: auto;
72+
bottom: 100%;
73+
}
74+
75+
.maplibregl-ctrl-geocoder .suggestions > li > a {
76+
cursor: default;
77+
display: block;
78+
padding: 0.5em 0.75em;
79+
color: var(--gray-dark-5);
80+
padding-bottom: 0.5em;
81+
border-bottom: 1px solid var(--gray-light-3);
82+
}
83+
.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
84+
border-bottom: 0;
85+
}
86+
87+
.maplibregl-ctrl-geocoder .suggestions > .active > a,
88+
.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
89+
background: var(--gray-light-5);
90+
text-decoration: none;
91+
cursor: pointer;
92+
}
93+
.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
94+
.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
95+
text-decoration: underline;
96+
}
97+
98+
.maplibregl-ctrl-geocoder--suggestion {
99+
display: flex;
100+
flex-direction: row;
101+
align-items: center;
102+
}
103+
104+
.maplibregl-ctrl-geocoder--suggestion-info {
105+
display: flex;
106+
flex-direction: column;
107+
}
108+
109+
.maplibregl-ctrl-geocoder--suggestion-title,
110+
.maplibregl-ctrl-geocoder--suggestion-address,
111+
.maplibregl-ctrl-geocoder--result-address {
112+
text-overflow: ellipsis;
113+
overflow: hidden;
114+
white-space: nowrap;
115+
}
116+
117+
.maplibregl-ctrl-geocoder--result-icon {
118+
display: none;
119+
}
120+
.maplibregl-ctrl-geocoder--result-title {
121+
font-weight: 600;
122+
letter-spacing: 0;
123+
}
124+
.maplibregl-ctrl-geocoder--result-address {
125+
font-size: var(--fs-small-2);
126+
color: var(--gray-dark-2);
127+
line-height: 1.3;
128+
}
129+
130+
.maplibregl-ctrl-geocoder--icon {
131+
display: inline-block;
132+
position: absolute;
133+
top: 50%;
134+
transform: translateY(-50%);
135+
height: 1em;
136+
}
137+
138+
.maplibregl-ctrl-geocoder--icon-close {
139+
right: 0;
140+
}
141+
.maplibregl-ctrl-geocoder--icon-search {
142+
left: 0.5em;
143+
height: 1.5em;
144+
}

‎components/src/maplibre/GeocoderControl/GeocoderControl.svelte‎

Lines changed: 1 addition & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { MaptilerGeocoderAPI } from './GeocoderAPIs';
55
import MapControl from '../MapControl/MapControl.svelte';
66
import { type GeocodingCountry, type GeocodingLanguage, type GeocodingService } from '../types';
7+
import './GeocoderControl.css';
78
89
interface GeocoderControlProps {
910
service: GeocodingService;
@@ -57,152 +58,3 @@
5758
</script>
5859

5960
<MapControl control={geocoder} position="top-left" />
60-
61-
<style lang="scss">
62-
:global {
63-
.maplibregl-ctrl-geocoder {
64-
background-color: #fff;
65-
position: relative;
66-
width: 100%;
67-
z-index: 1;
68-
font-family: var(--swr-sans);
69-
font-size: var(--fs-small-1);
70-
border-radius: var(--br-small);
71-
border: 1px solid rgba(0, 0, 0, 0.75);
72-
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
73-
}
74-
75-
.maplibre-gl-geocoder--error {
76-
font-size: var(--fs-small-2);
77-
color: var(--gray-dark-2);
78-
padding: 0.4em 0.65em;
79-
}
80-
81-
.maplibregl-ctrl-geocoder--input {
82-
width: calc(100% - 3.7em);
83-
height: 100%;
84-
font-family: inherit;
85-
font-size: inherit;
86-
background-color: transparent;
87-
color: var(--gray-dark-5);
88-
border: 0;
89-
height: 1.85em;
90-
padding: 0 1.85em;
91-
padding-top: 0.1em;
92-
text-overflow: ellipsis;
93-
white-space: nowrap;
94-
overflow: hidden;
95-
}
96-
97-
.maplibregl-ctrl-geocoder--input::placeholder {
98-
opacity: 1;
99-
color: var(--gray-dark-2);
100-
}
101-
.maplibregl-ctrl-geocoder--input:focus {
102-
color: var(--gray-dark-5);
103-
outline: 0;
104-
}
105-
106-
.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
107-
display: none;
108-
position: absolute;
109-
z-index: 2;
110-
right: 0.5em;
111-
top: 50%;
112-
transform: translateY(-50%);
113-
border: 0;
114-
}
115-
116-
/* Suggestions */
117-
.maplibregl-ctrl-geocoder .suggestions {
118-
background: white;
119-
border: 1px solid rgba(0, 0, 0, 0.75);
120-
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
121-
border-radius: var(--br-small);
122-
left: 0;
123-
list-style: none;
124-
position: absolute;
125-
width: 100%;
126-
top: calc(100% + 0.5em);
127-
z-index: 1000;
128-
overflow: hidden;
129-
}
130-
131-
.maplibregl-ctrl-bottom-left .suggestions,
132-
.maplibregl-ctrl-bottom-right .suggestions {
133-
top: auto;
134-
bottom: 100%;
135-
}
136-
137-
.maplibregl-ctrl-geocoder .suggestions > li > a {
138-
cursor: default;
139-
display: block;
140-
padding: 0.5em 0.75em;
141-
color: var(--gray-dark-5);
142-
padding-bottom: 0.5em;
143-
border-bottom: 1px solid var(--gray-light-3);
144-
}
145-
.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
146-
border-bottom: 0;
147-
}
148-
149-
.maplibregl-ctrl-geocoder .suggestions > .active > a,
150-
.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
151-
background: var(--gray-light-5);
152-
text-decoration: none;
153-
cursor: pointer;
154-
}
155-
.maplibregl-ctrl-geocoder .suggestions > .active .maplibregl-ctrl-geocoder--result-title,
156-
.maplibregl-ctrl-geocoder .suggestions > li > a:hover .maplibregl-ctrl-geocoder--result-title {
157-
text-decoration: underline;
158-
}
159-
160-
.maplibregl-ctrl-geocoder--suggestion {
161-
display: flex;
162-
flex-direction: row;
163-
align-items: center;
164-
}
165-
166-
.maplibregl-ctrl-geocoder--suggestion-info {
167-
display: flex;
168-
flex-direction: column;
169-
}
170-
171-
.maplibregl-ctrl-geocoder--suggestion-title,
172-
.maplibregl-ctrl-geocoder--suggestion-address,
173-
.maplibregl-ctrl-geocoder--result-address {
174-
text-overflow: ellipsis;
175-
overflow: hidden;
176-
white-space: nowrap;
177-
}
178-
179-
.maplibregl-ctrl-geocoder--result-icon {
180-
display: none;
181-
}
182-
.maplibregl-ctrl-geocoder--result-title {
183-
font-weight: 600;
184-
letter-spacing: 0;
185-
}
186-
.maplibregl-ctrl-geocoder--result-address {
187-
font-size: var(--fs-small-2);
188-
color: var(--gray-dark-2);
189-
line-height: 1.3;
190-
}
191-
192-
.maplibregl-ctrl-geocoder--icon {
193-
display: inline-block;
194-
position: absolute;
195-
top: 50%;
196-
transform: translateY(-50%);
197-
height: 1em;
198-
}
199-
200-
.maplibregl-ctrl-geocoder--icon-close {
201-
right: 0;
202-
}
203-
.maplibregl-ctrl-geocoder--icon-search {
204-
left: 0.5em;
205-
height: 1.5em;
206-
}
207-
}
208-
</style>

0 commit comments

Comments
 (0)