Add base control class, to simplify stylesheet

css/ol.css

@@ -86,20 +86,14 @@
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
-.ol-zoom,
-.ol-zoom-extent,
-.ol-rotate,
-.ol-full-screen {
+.ol-control {
   position: absolute;
   background-color: #eee;
   background-color: rgba(255,255,255,0.4);
   border-radius: 4px;
   padding: 2px;
 }
-.ol-zoom:hover,
-.ol-zoom-extent:hover,
-.ol-rotate:hover,
-.ol-full-screen:hover {
+.ol-control:hover {
   background-color: rgba(255,255,255,0.6);
 }
 .ol-zoom {
@@ -120,17 +114,12 @@
   top: .5em;
 }
 @media print {
-  .ol-zoom,
-  .ol-zoom-extent,
-  .ol-full-screen {
+  .ol-control {
     display: none;
   }
 }
 
-.ol-zoom button,
-.ol-zoom-extent button,
-.ol-rotate button,
-.ol-full-screen button {
+.ol-control button {
   display: block;
   margin: 1px;
   padding: 0;
@@ -147,10 +136,7 @@
   border: none;
   border-radius: 2px;
 }
-.ol-zoom button::-moz-focus-inner,
-.ol-zoom-extent button::-moz-focus-inner,
-.ol-rotate button::-moz-focus-inner,
-.ol-full-screen button::-moz-focus-inner {
+.ol-control button::-moz-focus-inner {
   border: none;
   padding: 0;
 }
@@ -163,23 +149,14 @@
   font-weight: normal;
   font-size: 1.2em;
 }
-.ol-touch .ol-zoom button,
-.ol-touch .ol-full-screen button,
-.ol-touch .ol-rotate button,
-.ol-touch .ol-zoom-extent button {
+.ol-touch .ol-control button {
   font-size: 1.5em;
 }
 .ol-touch .ol-zoom-extent {
   top: 5.5em;
 }
-.ol-zoom button:hover,
-.ol-zoom button:focus,
-.ol-zoom-extent button:hover,
-.ol-zoom-extent button:focus,
-.ol-rotate button:hover,
-.ol-rotate button:focus,
-.ol-full-screen button:hover,
-.ol-full-screen button:focus {
+.ol-control button:hover,
+.ol-control button:focus {
   text-decoration: none;
   background-color: #4c6079;
   background-color: rgba(0,60,136,0.7);
@@ -260,13 +237,11 @@ button.ol-full-screen-true:after {
   position: absolute;
   top: 4.5em;
   left: .5em;
-
   background: #eee;
   background: rgba(255, 255, 255, 0.4);
   border-radius: 4px;
   outline: none;
   overflow: hidden;
-  
   width: 1.5675em;
   height: 200px;
   padding: 3px;
@@ -281,7 +256,6 @@ button.ol-full-screen-true:after {
   outline: none;
   overflow: hidden;
   cursor: pointer;
-
   font-size: 1.14em;
   height: 1em;
   width: 1.375em;
@@ -296,11 +270,9 @@ button.ol-full-screen-true:after {
   width: 1.8em;
 }
 
-.ol-zoom-extent button,
+.ol-control button,
 .ol-attribution,
-.ol-full-screen button,
 .ol-scale-line-inner,
-.ol-zoom button,
 .ol-has-tooltip [role=tooltip] {
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
 }

examples/full-screen.html

@@ -21,6 +21,9 @@
       .map:full-screen {
         height: 100%;
       }
+      .ol-rotate {
+        top: 3em;
+      }
     </style>
     <title>Full screen control example</title>
   </head>

src/ol/control/fullscreencontrol.js

@@ -64,10 +64,10 @@ ol.control.FullScreen = function(opt_options) {
       googx.dom.fullscreen.EventType.CHANGE,
       this.handleFullScreenChange_, false, this);
 
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
-        (!googx.dom.fullscreen.isSupported() ? ol.css.CLASS_UNSUPPORTED : '')
-  }, button);
+  var cssClasses = this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE +
+      ' ' + ol.css.CLASS_CONTROL +
+      (!googx.dom.fullscreen.isSupported() ? ol.css.CLASS_UNSUPPORTED : '');
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
 
   goog.base(this, {
     element: element,

src/ol/control/rotatecontrol.js

@@ -60,7 +60,8 @@ ol.control.Rotate = function(opt_options) {
     this.blur();
   }, false);
 
-  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE;
+  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
+      ol.css.CLASS_CONTROL;
   var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
 
   goog.base(this, {

src/ol/control/zoomcontrol.js

@@ -85,7 +85,8 @@ ol.control.Zoom = function(opt_options) {
     this.blur();
   }, false);
 
-  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE;
+  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
+      ol.css.CLASS_CONTROL;
   var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, inElement,
       outElement);
 

src/ol/control/zoomtoextentcontrol.js

@@ -39,14 +39,10 @@ ol.control.ZoomToExtent = function(opt_options) {
   var tip = goog.dom.createDom(goog.dom.TagName.SPAN, {
     'role' : 'tooltip'
   }, tipLabel);
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
-  });
   var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
     'class': 'ol-has-tooltip'
   });
   goog.dom.appendChild(button, tip);
-  goog.dom.appendChild(element, button);
 
   var buttonHandler = new ol.pointer.PointerEventHandler(button);
   this.registerDisposable(buttonHandler);
@@ -60,6 +56,10 @@ ol.control.ZoomToExtent = function(opt_options) {
     this.blur();
   }, false);
 
+  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
+      ol.css.CLASS_CONTROL;
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
+
   goog.base(this, {
     element: element,
     target: options.target

src/ol/css.js

@@ -17,3 +17,12 @@ ol.css.CLASS_UNSELECTABLE = 'ol-unselectable';
  * @type {string}
  */
 ol.css.CLASS_UNSUPPORTED = 'ol-unsupported';
+
+
+/**
+ * The CSS class for controls.
+ *
+ * @const
+ * @type {string}
+ */
+ol.css.CLASS_CONTROL = 'ol-control';