Adding Zoom control.

Tests still missing.
This commit is contained in:
ahocevar
2012-06-22 17:14:22 +02:00
parent d9537b558a
commit 0420d2efb9
6 changed files with 180 additions and 152 deletions

View File

@@ -1,5 +1,6 @@
.ol-viewport { width:100%; height:100%; position:relative; left:0; top:0; }
.ol-renderer-webgl-canvas { width:100%;height:100%; }
.ol-renderer-webgl-canvas { width:100%; height:100%; }
/**
* arrow implementation from http://cssarrowplease.com/ for ol-popup
@@ -22,7 +23,6 @@
height: 17px;
right: 0;
}
.ol-popup-top {}
.ol-popup-top:after, .ol-popup-top:before {
bottom: 100%;
@@ -33,21 +33,18 @@
position: absolute;
pointer-events: none;
}
.ol-popup-top:after {
border-bottom-color: #88b7d5;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.ol-popup-top:before {
border-bottom-color: #c2e1f5;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
.ol-popup-bottom {}
.ol-popup-bottom:after, .ol-popup-bottom:before {
top: 100%;
@@ -58,7 +55,6 @@
position: absolute;
pointer-events: none;
}
.ol-popup-bottom:after {
border-top-color: #88b7d5;
border-width: 30px;
@@ -81,7 +77,6 @@
position: absolute;
pointer-events: none;
}
.ol-popup-right:after {
border-left-color: #88b7d5;
border-width: 30px;
@@ -104,7 +99,6 @@
position: absolute;
pointer-events: none;
}
.ol-popup-left:after {
border-right-color: #88b7d5;
border-width: 30px;
@@ -118,3 +112,44 @@
margin-top: -36px;
}
div.ol-control-zoom {
position: absolute;
top: 8px;
left: 8px;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
div.ol-control-zoom a {
display: block;
margin: 1px;
padding: 0;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 22px;
width:22px;
line-height: 19px;
background: #130085; /* fallback for IE - IE6 requires background shorthand*/
background: rgba(0, 60, 136, 0.5);
filter: alpha(opacity=80);
}
div.ol-control-zoom a:hover {
background: #130085; /* fallback for IE */
background: rgba(0, 60, 136, 0.7);
filter: alpha(opacity=100);
}
@media only screen and (max-width: 600px) {
div.ol-control-zoom a:hover {
background: rgba(0, 60, 136, 0.5);
}
}
a.ol-control-zoom-in {
border-radius: 4px 4px 0 0;
}
a.ol-control-zoom-out {
border-radius: 0 0 4px 4px;
}