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

Update zoomslider custom styling to match control styling changes

Browse Source
This commit is contained in:
Steven Pukansky
2014-03-10 16:08:46 -04:00
parent a0fdc0ecf9
commit e62e537eed
2 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
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,38 +237,42 @@ 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;
background: #7b98bc;
background: rgba(0,60,136,0.5);
margin: 3px;
border-radius: 2px;
outline: none;
overflow: hidden;
height: 20px;
width: 22px;
cursor: pointer;
font-size: 1.14em;
height: 1em;
width: 1.375em;
margin: 3px;
padding: 0;
}
.ol-touch .ol-zoomslider {
top: 82px;
width: 36px;
top: 5.5em;
width: 2.052em;
}
.ol-touch .ol-zoomslider-thumb {
height: 18px;
width: 30px;
width: 1.8em;
}
.ol-zoom-extent button,

15
examples/zoomslider.html
View File

@@ -13,26 +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;
}
#map2 .ol-zoomslider-thumb {
height: 12px;
top: 2.3em;
}
#map2 .ol-touch .ol-zoom a.ol-zoom-out {
#map2 .ol-touch .ol-zoom .ol-zoom-out {
margin-top: 212px;
}
#map2 .ol-touch .ol-zoomslider {
top: 42px;
height: 210px;
}
#map2 .ol-touch .ol-zoomslider-thumb {
height: 20px;
top: 2.75em;
}
/**