ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #1614 from Intermedix/ol-touch-zoomslider

Browse Source 
Add styles for .ol-touch .ol-zoomslider
This commit is contained in:
Marc Jansen
2014-03-24 09:24:23 +01:00
parent 7f5446afff e62e537eed
commit 84463f59d4
2 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
css/ol.css
View File

@@ -226,7 +226,7 @@ button.ol-full-screen-true:after {
}
.ol-zoom .ol-has-tooltip:hover [role=tooltip],
.ol-zoom .ol-has-tooltip:focus [role=tooltip] {
bottom: 1.1em;
top: 1.1em;
}
.ol-full-screen .ol-has-tooltip:hover [role=tooltip],
.ol-full-screen .ol-has-tooltip:focus [role=tooltip] {
@@ -237,31 +237,44 @@ button.ol-full-screen-true:after {
.ol-zoomslider {
position: absolute;
top: 67px;
left: 8px;
top: 4.5em;
left: .5em;
background: #eee;
background: rgba(255, 255, 255, 0.4);
border-radius: 4px;
width: 28px;
height: 200px;
outline: none;
overflow: hidden;
padding: 0;
width: 1.5675em;
height: 200px;
padding: 3px;
margin: 0;
}
.ol-zoomslider-thumb {
position: absolute;
display: block;
padding: 0;
margin: 2px;
background: #7b98bc;
background: rgba(0,60,136,0.5);
border-radius: 2px;
outline: none;
overflow: hidden;
height: 20px;
width: 24px;
cursor: pointer;
font-size: 1.14em;
height: 1em;
width: 1.375em;
margin: 3px;
padding: 0;
}
.ol-touch .ol-zoomslider {
top: 5.5em;
width: 2.052em;
}
.ol-touch .ol-zoomslider-thumb {
width: 1.8em;
}
.ol-zoom-extent button,
.ol-attribution,
.ol-full-screen button,

16
examples/zoomslider.html
View File

@@ -13,19 +13,19 @@
* The zoomslider in the second map shall be placed between the zoom-in and
* zoom-out buttons.
*/
#map2 .ol-zoom a.ol-zoom-out {
#map2 .ol-zoom .ol-zoom-out {
margin-top: 202px;
}
#map2 .ol-zoomslider {
background-color: transparent;
top: 34px;
left: 9px;
width: 24px;
top: 2.3em;
}
#map2 .ol-zoomslider-thumb {
border-radius: 2px;
width: 24px;
height: 12px;
#map2 .ol-touch .ol-zoom .ol-zoom-out {
margin-top: 212px;
}
#map2 .ol-touch .ol-zoomslider {
top: 2.75em;
}
/**