Merge pull request #11271 from mike-000/patch-20

Make style override CSS compatible with importing ol.css and with IE

examples/center.css

@@ -6,15 +6,16 @@
   width: 1000px;
   height: 600px;
 }
-div.ol-zoom {
+.map .ol-zoom {
   top: 178px;
   left: 158px;
 }
-div.ol-rotate {
+.map .ol-rotate {
   top: 178px;
   right: 58px;
 }
-.map div.ol-attribution {
+.map .ol-attribution,
+.map .ol-attribution.ol-uncollapsible {
   bottom: 30px;
   right: 50px;
 }

examples/full-screen-drag-rotate-and-zoom.css

@@ -9,6 +9,6 @@
   height: 100%;
 }
 /* position the rotate control lower than usual */
-.ol-rotate {
+.map .ol-rotate {
   top: 3em;
 }

examples/full-screen-source.css

@@ -16,7 +16,7 @@
   height: 400px;
 }
 
-.ol-rotate {
+.map .ol-rotate {
   top: 3em;
 }
 

examples/full-screen.css

@@ -8,6 +8,6 @@
 .map:fullscreen {
   height: 100%;
 }
-.ol-rotate {
+.map .ol-rotate {
   top: 3em;
 }

examples/mapbox-style.css

@@ -1,6 +1,6 @@
-.ol-rotate {
+.map .ol-rotate {
   left: .5em;
   bottom: .5em;
-  top: unset;
-  right: unset;
-}
+  top: auto;
+  right: auto;
+}

examples/offscreen-canvas.css

@@ -1,9 +1,9 @@
 .map {
   background: rgba(232, 230, 223, 1);
 }
-.ol-rotate {
+.map .ol-rotate {
   left: .5em;
   bottom: .5em;
-  top: unset;
-  right: unset;
-}
+  top: auto;
+  right: auto;
+}

examples/overviewmap-custom.css

@@ -1,36 +1,33 @@
-.mapcontainer {
-  position: relative;
-}
 
-div.ol-custom-overviewmap,
-div.ol-custom-overviewmap.ol-uncollapsible {
+.map .ol-custom-overviewmap,
+.map .ol-custom-overviewmap.ol-uncollapsible {
   bottom: auto;
   left: auto;
   right: 0;
   top: 0;
 }
 
-div.ol-custom-overviewmap:not(.ol-collapsed)  {
+.map .ol-custom-overviewmap:not(.ol-collapsed)  {
   border: 1px solid black;
 }
 
-div.ol-custom-overviewmap div.ol-overviewmap-map {
+.map .ol-custom-overviewmap .ol-overviewmap-map {
   border: none;
   width: 300px;
 }
 
-div.ol-custom-overviewmap div.ol-overviewmap-box {
+.map .ol-custom-overviewmap .ol-overviewmap-box {
   border: 2px solid red;
 }
 
-div.ol-custom-overviewmap:not(.ol-collapsed) button{
+.map .ol-custom-overviewmap:not(.ol-collapsed) button{
   bottom: auto;
   left: auto;
   right: 1px;
   top: 1px;
 }
 
-div.ol-rotate {
+.map .ol-rotate {
   top: 170px;
   right: 0;
 }

examples/overviewmap-custom.html

@@ -10,7 +10,5 @@ cloak:
     value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
-<div class="mapcontainer">
-  <div id="map" class="map"></div>
-</div>
+<div id="map" class="map"></div>
 <div><input type="checkbox" id="rotateWithView">Rotate with view</div>