Skip to content

Commit 213d416

Browse files
author
nonlinear
committed
SASSifying main project
the only css used now is style.css, a compilation with all the other ones needed.
1 parent 2dce332 commit 213d416

File tree

14 files changed

+2483
-206
lines changed

14 files changed

+2483
-206
lines changed

boundingbox.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
44
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
55
<title>TidePools</title>
6-
<link rel="stylesheet" href="css/leaflet.css" />
7-
<link rel="stylesheet" href="css/tidepools_m.css" />
8-
<link rel="stylesheet" href="css/jquery_ui.css" />
6+
<link rel="stylesheet" href="css/style.css" />
97

108
<link rel="icon"
119
href="/images/pound.ico">
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

css/_jquery_ui.scss

Lines changed: 418 additions & 0 deletions
Large diffs are not rendered by default.

css/_leaflet.scss

Lines changed: 379 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,379 @@
1+
/* required styles */
2+
3+
.leaflet-map-pane,
4+
.leaflet-tile,
5+
.leaflet-marker-icon,
6+
.leaflet-marker-shadow,
7+
.leaflet-tile-pane,
8+
.leaflet-overlay-pane,
9+
.leaflet-shadow-pane,
10+
.leaflet-marker-pane,
11+
.leaflet-popup-pane,
12+
.leaflet-overlay-pane svg,
13+
.leaflet-zoom-box,
14+
.leaflet-image-layer,
15+
.leaflet-layer { /* TODO optimize classes */
16+
position: absolute;
17+
}
18+
.leaflet-container {
19+
overflow: hidden;
20+
outline: 0;
21+
}
22+
.leaflet-tile,
23+
.leaflet-marker-icon,
24+
.leaflet-marker-shadow {
25+
-moz-user-select: none;
26+
-webkit-user-select: none;
27+
user-select: none;
28+
}
29+
.leaflet-marker-icon,
30+
.leaflet-marker-shadow {
31+
display: block;
32+
}
33+
.leaflet-clickable {
34+
cursor: pointer;
35+
}
36+
.leaflet-dragging, .leaflet-dragging .leaflet-clickable {
37+
cursor: move;
38+
}
39+
.leaflet-container img {
40+
/* map is broken in FF if you have max-width: 100% on tiles */
41+
max-width: none !important;
42+
}
43+
.leaflet-container img.leaflet-image-layer {
44+
/* stupid Android 2 doesn't understand "max-width: none" properly */
45+
max-width: 15000px !important;
46+
}
47+
48+
.leaflet-tile-pane { z-index: 2; }
49+
.leaflet-objects-pane { z-index: 3; }
50+
.leaflet-overlay-pane { z-index: 4; }
51+
.leaflet-shadow-pane { z-index: 5; }
52+
.leaflet-marker-pane { z-index: 6; }
53+
.leaflet-popup-pane { z-index: 7; }
54+
55+
.leaflet-tile {
56+
filter: inherit;
57+
visibility: hidden;
58+
}
59+
.leaflet-tile-loaded {
60+
visibility: inherit;
61+
}
62+
63+
.leaflet-zoom-box {
64+
width: 0;
65+
height: 0;
66+
}
67+
68+
/* Leaflet controls */
69+
70+
.leaflet-control {
71+
position: relative;
72+
z-index: 7;
73+
pointer-events: auto;
74+
}
75+
.leaflet-top,
76+
.leaflet-bottom {
77+
position: absolute;
78+
z-index: 1000;
79+
pointer-events: none;
80+
}
81+
.leaflet-top {
82+
top: 0;
83+
}
84+
.leaflet-right {
85+
right: 0;
86+
}
87+
.leaflet-bottom {
88+
bottom: 0;
89+
}
90+
.leaflet-left {
91+
left: 0;
92+
}
93+
.leaflet-control {
94+
float: left;
95+
clear: both;
96+
}
97+
.leaflet-right .leaflet-control {
98+
float: right;
99+
}
100+
.leaflet-top .leaflet-control {
101+
margin-top: 10px;
102+
}
103+
.leaflet-bottom .leaflet-control {
104+
margin-bottom: 10px;
105+
}
106+
.leaflet-left .leaflet-control {
107+
margin-left: 210px;
108+
}
109+
.leaflet-right .leaflet-control {
110+
margin-right: 10px;
111+
}
112+
113+
.leaflet-control-zoom {
114+
-moz-border-radius: 7px;
115+
-webkit-border-radius: 7px;
116+
border-radius: 7px;
117+
}
118+
.leaflet-control-zoom {
119+
padding: 5px;
120+
background: rgba(0, 0, 0, 0.25);
121+
}
122+
.leaflet-control-zoom a {
123+
background-color: rgba(255, 255, 255, 0.75);
124+
}
125+
.leaflet-control-zoom a, .leaflet-control-layers a {
126+
background-position: 50% 50%;
127+
background-repeat: no-repeat;
128+
display: block;
129+
}
130+
.leaflet-control-zoom a {
131+
-moz-border-radius: 4px;
132+
-webkit-border-radius: 4px;
133+
border-radius: 4px;
134+
width: 19px;
135+
height: 19px;
136+
}
137+
.leaflet-control-zoom a:hover {
138+
background-color: #fff;
139+
}
140+
.leaflet-touch .leaflet-control-zoom a {
141+
width: 27px;
142+
height: 27px;
143+
}
144+
.leaflet-control-zoom-in {
145+
background-image: url(images/zoom-in.png);
146+
margin-bottom: 5px;
147+
}
148+
.leaflet-control-zoom-out {
149+
background-image: url(images/zoom-out.png);
150+
}
151+
152+
.leaflet-control-layers {
153+
box-shadow: 0 1px 7px #999;
154+
background: #f8f8f9;
155+
-moz-border-radius: 8px;
156+
-webkit-border-radius: 8px;
157+
border-radius: 8px;
158+
}
159+
.leaflet-control-layers a {
160+
background-image: url(images/layers.png);
161+
width: 36px;
162+
height: 36px;
163+
}
164+
.leaflet-touch .leaflet-control-layers a {
165+
width: 44px;
166+
height: 44px;
167+
}
168+
.leaflet-control-layers .leaflet-control-layers-list,
169+
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
170+
display: none;
171+
}
172+
.leaflet-control-layers-expanded .leaflet-control-layers-list {
173+
display: block;
174+
position: relative;
175+
}
176+
.leaflet-control-layers-expanded {
177+
padding: 6px 10px 6px 6px;
178+
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
179+
color: #333;
180+
background: #fff;
181+
}
182+
.leaflet-control-layers input {
183+
margin-top: 2px;
184+
position: relative;
185+
top: 1px;
186+
}
187+
.leaflet-control-layers label {
188+
display: block;
189+
}
190+
.leaflet-control-layers-separator {
191+
height: 0;
192+
border-top: 1px solid #ddd;
193+
margin: 5px -10px 5px -6px;
194+
}
195+
196+
.leaflet-container .leaflet-control-attribution {
197+
background-color: rgba(255, 255, 255, 0.7);
198+
box-shadow: 0 0 5px #bbb;
199+
margin: 0;
200+
}
201+
202+
.leaflet-control-attribution,
203+
.leaflet-control-scale-line {
204+
padding: 0 5px;
205+
color: #333;
206+
}
207+
208+
.leaflet-container .leaflet-control-attribution,
209+
.leaflet-container .leaflet-control-scale {
210+
font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
211+
}
212+
213+
.leaflet-left .leaflet-control-scale {
214+
margin-left: 5px;
215+
}
216+
.leaflet-bottom .leaflet-control-scale {
217+
margin-bottom: 5px;
218+
}
219+
220+
.leaflet-control-scale-line {
221+
border: 2px solid #777;
222+
border-top: none;
223+
color: black;
224+
line-height: 1;
225+
font-size: 10px;
226+
padding-bottom: 2px;
227+
text-shadow: 1px 1px 1px #fff;
228+
background-color: rgba(255, 255, 255, 0.5);
229+
}
230+
.leaflet-control-scale-line:not(:first-child) {
231+
border-top: 2px solid #777;
232+
padding-top: 1px;
233+
border-bottom: none;
234+
margin-top: -2px;
235+
}
236+
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
237+
border-bottom: 2px solid #777;
238+
}
239+
240+
.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers {
241+
box-shadow: none;
242+
}
243+
.leaflet-touch .leaflet-control-layers {
244+
border: 5px solid #bbb;
245+
}
246+
247+
248+
/* Zoom and fade animations */
249+
250+
.leaflet-fade-anim .leaflet-tile, .leaflet-fade-anim .leaflet-popup {
251+
opacity: 0;
252+
253+
-webkit-transition: opacity 0.2s linear;
254+
-moz-transition: opacity 0.2s linear;
255+
-o-transition: opacity 0.2s linear;
256+
transition: opacity 0.2s linear;
257+
}
258+
.leaflet-fade-anim .leaflet-tile-loaded, .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
259+
opacity: 1;
260+
}
261+
262+
.leaflet-zoom-anim .leaflet-zoom-animated {
263+
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
264+
-moz-transition: -moz-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
265+
-o-transition: -o-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
266+
transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
267+
}
268+
269+
.leaflet-zoom-anim .leaflet-tile,
270+
.leaflet-pan-anim .leaflet-tile,
271+
.leaflet-touching .leaflet-zoom-animated {
272+
-webkit-transition: none;
273+
-moz-transition: none;
274+
-o-transition: none;
275+
transition: none;
276+
}
277+
278+
.leaflet-zoom-anim .leaflet-zoom-hide {
279+
visibility: hidden;
280+
}
281+
282+
283+
/* Popup layout */
284+
285+
.leaflet-popup {
286+
position: absolute;
287+
text-align: center;
288+
}
289+
.leaflet-popup-content-wrapper {
290+
padding: 1px;
291+
text-align: left;
292+
}
293+
.leaflet-popup-content {
294+
margin: 14px 20px;
295+
}
296+
.leaflet-popup-tip-container {
297+
margin: 0 auto;
298+
width: 40px;
299+
height: 20px;
300+
position: relative;
301+
overflow: hidden;
302+
}
303+
.leaflet-popup-tip {
304+
width: 15px;
305+
height: 15px;
306+
padding: 1px;
307+
308+
margin: -8px auto 0;
309+
310+
-moz-transform: rotate(45deg);
311+
-webkit-transform: rotate(45deg);
312+
-ms-transform: rotate(45deg);
313+
-o-transform: rotate(45deg);
314+
transform: rotate(45deg);
315+
}
316+
.leaflet-container a.leaflet-popup-close-button {
317+
position: absolute;
318+
top: 0;
319+
right: 0;
320+
padding: 4px 5px 0 0;
321+
text-align: center;
322+
width: 18px;
323+
height: 14px;
324+
font: 16px/14px Tahoma, Verdana, sans-serif;
325+
color: #c3c3c3;
326+
text-decoration: none;
327+
font-weight: bold;
328+
}
329+
.leaflet-container a.leaflet-popup-close-button:hover {
330+
color: #999;
331+
}
332+
.leaflet-popup-content p {
333+
margin: 18px 0;
334+
}
335+
.leaflet-popup-scrolled {
336+
overflow: auto;
337+
border-bottom: 1px solid #ddd;
338+
border-top: 1px solid #ddd;
339+
}
340+
341+
342+
/* Visual appearance */
343+
344+
.leaflet-container {
345+
background: #000;
346+
}
347+
.leaflet-container a {
348+
color: #0078A8;
349+
}
350+
.leaflet-container a.leaflet-active {
351+
outline: 2px solid orange;
352+
}
353+
.leaflet-zoom-box {
354+
border: 2px dotted #05f;
355+
background: white;
356+
opacity: 0.5;
357+
}
358+
.leaflet-div-icon {
359+
background: #fff;
360+
border: 1px solid #666;
361+
}
362+
.leaflet-editing-icon {
363+
border-radius: 2px;
364+
}
365+
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
366+
background: white;
367+
368+
box-shadow: 0 3px 10px #888;
369+
-moz-box-shadow: 0 3px 10px #888;
370+
-webkit-box-shadow: 0 3px 14px #999;
371+
}
372+
.leaflet-popup-content-wrapper {
373+
-moz-border-radius: 20px;
374+
-webkit-border-radius: 20px;
375+
border-radius: 20px;
376+
}
377+
.leaflet-popup-content {
378+
font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
379+
}

0 commit comments

Comments
 (0)