|
1 /* ================================================================== */ |
|
2 /* Toolbars |
|
3 /* ================================================================== */ |
|
4 |
|
5 .leaflet-draw-section { |
|
6 position: relative; |
|
7 } |
|
8 |
|
9 .leaflet-draw-toolbar { |
|
10 margin-top: 12px; |
|
11 } |
|
12 |
|
13 .leaflet-draw-toolbar-top { |
|
14 margin-top: 0; |
|
15 } |
|
16 |
|
17 .leaflet-draw-toolbar-notop a:first-child { |
|
18 border-top-right-radius: 0; |
|
19 } |
|
20 |
|
21 .leaflet-draw-toolbar-nobottom a:last-child { |
|
22 border-bottom-right-radius: 0; |
|
23 } |
|
24 |
|
25 .leaflet-draw-toolbar a { |
|
26 background-image: url('images/spritesheet.png'); |
|
27 background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg'); |
|
28 background-repeat: no-repeat; |
|
29 background-size: 270px 30px; |
|
30 background-clip: padding-box; |
|
31 } |
|
32 |
|
33 .leaflet-retina .leaflet-draw-toolbar a { |
|
34 background-image: url('images/spritesheet-2x.png'); |
|
35 background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg'); |
|
36 } |
|
37 |
|
38 .leaflet-draw a { |
|
39 display: block; |
|
40 text-align: center; |
|
41 text-decoration: none; |
|
42 } |
|
43 |
|
44 .leaflet-draw a .sr-only { |
|
45 position: absolute; |
|
46 width: 1px; |
|
47 height: 1px; |
|
48 padding: 0; |
|
49 margin: -1px; |
|
50 overflow: hidden; |
|
51 clip: rect(0,0,0,0); |
|
52 border: 0; |
|
53 } |
|
54 |
|
55 /* ================================================================== */ |
|
56 /* Toolbar actions menu |
|
57 /* ================================================================== */ |
|
58 |
|
59 .leaflet-draw-actions { |
|
60 display: none; |
|
61 list-style: none; |
|
62 margin: 0; |
|
63 padding: 0; |
|
64 position: absolute; |
|
65 left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */ |
|
66 top: 0; |
|
67 white-space: nowrap; |
|
68 } |
|
69 |
|
70 .leaflet-touch .leaflet-draw-actions { |
|
71 left: 32px; |
|
72 } |
|
73 |
|
74 .leaflet-right .leaflet-draw-actions { |
|
75 right: 26px; |
|
76 left: auto; |
|
77 } |
|
78 |
|
79 .leaflet-touch .leaflet-right .leaflet-draw-actions { |
|
80 right: 32px; |
|
81 left: auto; |
|
82 } |
|
83 |
|
84 .leaflet-draw-actions li { |
|
85 display: inline-block; |
|
86 } |
|
87 |
|
88 .leaflet-draw-actions li:first-child a { |
|
89 border-left: none; |
|
90 } |
|
91 |
|
92 .leaflet-draw-actions li:last-child a { |
|
93 -webkit-border-radius: 0 4px 4px 0; |
|
94 border-radius: 0 4px 4px 0; |
|
95 } |
|
96 |
|
97 .leaflet-right .leaflet-draw-actions li:last-child a { |
|
98 -webkit-border-radius: 0; |
|
99 border-radius: 0; |
|
100 } |
|
101 |
|
102 .leaflet-right .leaflet-draw-actions li:first-child a { |
|
103 -webkit-border-radius: 4px 0 0 4px; |
|
104 border-radius: 4px 0 0 4px; |
|
105 } |
|
106 |
|
107 .leaflet-draw-actions a { |
|
108 background-color: #919187; |
|
109 border-left: 1px solid #AAA; |
|
110 color: #FFF; |
|
111 font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif; |
|
112 line-height: 28px; |
|
113 text-decoration: none; |
|
114 padding-left: 10px; |
|
115 padding-right: 10px; |
|
116 height: 28px; |
|
117 } |
|
118 |
|
119 .leaflet-touch .leaflet-draw-actions a { |
|
120 font-size: 12px; |
|
121 line-height: 30px; |
|
122 height: 30px; |
|
123 } |
|
124 |
|
125 .leaflet-draw-actions-bottom { |
|
126 margin-top: 0; |
|
127 } |
|
128 |
|
129 .leaflet-draw-actions-top { |
|
130 margin-top: 1px; |
|
131 } |
|
132 |
|
133 .leaflet-draw-actions-top a, |
|
134 .leaflet-draw-actions-bottom a { |
|
135 height: 27px; |
|
136 line-height: 27px; |
|
137 } |
|
138 |
|
139 .leaflet-draw-actions a:hover { |
|
140 background-color: #A0A098; |
|
141 } |
|
142 |
|
143 .leaflet-draw-actions-top.leaflet-draw-actions-bottom a { |
|
144 height: 26px; |
|
145 line-height: 26px; |
|
146 } |
|
147 |
|
148 /* ================================================================== */ |
|
149 /* Draw toolbar |
|
150 /* ================================================================== */ |
|
151 |
|
152 .leaflet-draw-toolbar .leaflet-draw-draw-polyline { |
|
153 background-position: -2px -2px; |
|
154 } |
|
155 |
|
156 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline { |
|
157 background-position: 0 -1px; |
|
158 } |
|
159 |
|
160 .leaflet-draw-toolbar .leaflet-draw-draw-polygon { |
|
161 background-position: -31px -2px; |
|
162 } |
|
163 |
|
164 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon { |
|
165 background-position: -29px -1px; |
|
166 } |
|
167 |
|
168 .leaflet-draw-toolbar .leaflet-draw-draw-rectangle { |
|
169 background-position: -62px -2px; |
|
170 } |
|
171 |
|
172 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle { |
|
173 background-position: -60px -1px; |
|
174 } |
|
175 |
|
176 .leaflet-draw-toolbar .leaflet-draw-draw-circle { |
|
177 background-position: -92px -2px; |
|
178 } |
|
179 |
|
180 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle { |
|
181 background-position: -90px -1px; |
|
182 } |
|
183 |
|
184 .leaflet-draw-toolbar .leaflet-draw-draw-marker { |
|
185 background-position: -122px -2px; |
|
186 } |
|
187 |
|
188 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker { |
|
189 background-position: -120px -1px; |
|
190 } |
|
191 |
|
192 /* ================================================================== */ |
|
193 /* Edit toolbar |
|
194 /* ================================================================== */ |
|
195 |
|
196 .leaflet-draw-toolbar .leaflet-draw-edit-edit { |
|
197 background-position: -152px -2px; |
|
198 } |
|
199 |
|
200 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit { |
|
201 background-position: -150px -1px; |
|
202 } |
|
203 |
|
204 .leaflet-draw-toolbar .leaflet-draw-edit-remove { |
|
205 background-position: -182px -2px; |
|
206 } |
|
207 |
|
208 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove { |
|
209 background-position: -180px -1px; |
|
210 } |
|
211 |
|
212 .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled { |
|
213 background-position: -212px -2px; |
|
214 } |
|
215 |
|
216 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled { |
|
217 background-position: -210px -1px; |
|
218 } |
|
219 |
|
220 .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled { |
|
221 background-position: -242px -2px; |
|
222 } |
|
223 |
|
224 .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled { |
|
225 background-position: -240px -2px; |
|
226 } |
|
227 |
|
228 /* ================================================================== */ |
|
229 /* Drawing styles |
|
230 /* ================================================================== */ |
|
231 |
|
232 .leaflet-mouse-marker { |
|
233 background-color: #fff; |
|
234 cursor: crosshair; |
|
235 } |
|
236 |
|
237 .leaflet-draw-tooltip { |
|
238 background: rgb(54, 54, 54); |
|
239 background: rgba(0, 0, 0, 0.5); |
|
240 border: 1px solid transparent; |
|
241 -webkit-border-radius: 4px; |
|
242 border-radius: 4px; |
|
243 color: #fff; |
|
244 font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif; |
|
245 margin-left: 20px; |
|
246 margin-top: -21px; |
|
247 padding: 4px 8px; |
|
248 position: absolute; |
|
249 visibility: hidden; |
|
250 white-space: nowrap; |
|
251 z-index: 6; |
|
252 } |
|
253 |
|
254 .leaflet-draw-tooltip:before { |
|
255 border-right: 6px solid black; |
|
256 border-right-color: rgba(0, 0, 0, 0.5); |
|
257 border-top: 6px solid transparent; |
|
258 border-bottom: 6px solid transparent; |
|
259 content: ""; |
|
260 position: absolute; |
|
261 top: 7px; |
|
262 left: -7px; |
|
263 } |
|
264 |
|
265 .leaflet-error-draw-tooltip { |
|
266 background-color: #F2DEDE; |
|
267 border: 1px solid #E6B6BD; |
|
268 color: #B94A48; |
|
269 } |
|
270 |
|
271 .leaflet-error-draw-tooltip:before { |
|
272 border-right-color: #E6B6BD; |
|
273 } |
|
274 |
|
275 .leaflet-draw-tooltip-single { |
|
276 margin-top: -12px |
|
277 } |
|
278 |
|
279 .leaflet-draw-tooltip-subtext { |
|
280 color: #f8d5e4; |
|
281 } |
|
282 |
|
283 .leaflet-draw-guide-dash { |
|
284 font-size: 1%; |
|
285 opacity: 0.6; |
|
286 position: absolute; |
|
287 width: 5px; |
|
288 height: 5px; |
|
289 } |
|
290 |
|
291 /* ================================================================== */ |
|
292 /* Edit styles |
|
293 /* ================================================================== */ |
|
294 |
|
295 .leaflet-edit-marker-selected { |
|
296 background-color: rgba(254, 87, 161, 0.1); |
|
297 border: 4px dashed rgba(254, 87, 161, 0.6); |
|
298 -webkit-border-radius: 4px; |
|
299 border-radius: 4px; |
|
300 box-sizing: content-box; |
|
301 } |
|
302 |
|
303 .leaflet-edit-move { |
|
304 cursor: move; |
|
305 } |
|
306 |
|
307 .leaflet-edit-resize { |
|
308 cursor: pointer; |
|
309 } |
|
310 |
|
311 /* ================================================================== */ |
|
312 /* Old IE styles |
|
313 /* ================================================================== */ |
|
314 |
|
315 .leaflet-oldie .leaflet-draw-toolbar { |
|
316 border: 1px solid #999; |
|
317 } |