Add ngeo scope to CSS classes

CSS class names used in ngeo are not enough scoped and thus will cause conflicts.

For example, for the search directive, we use the class “.search” and the CSS defines a rule like:

.search input {
  height: 100%;
}

This conflicts with any application or component using an input in a search class.

As a consequence, ngeo classes should be prefixed like this:

.ngeo-search input {
  height: 100%;
}

[adube]

@gberaudo or @sbrunner I would like to clarify my intentions. Please, let me know if you agree.

First, anything that’s part of GeoMapFish should have a gmf- prefix instead of ngeo-.

Also, any class that is defined alongside a directive definition should simply be removed and the definition should use the tag name instead. For example, the .search class name is used here:

    <gmf-search gmf-search-map="mainCtrl.map"
      class="search"
      gmf-search-datasources="mainCtrl.searchDatasources"
      gmf-search-coordinatesprojections="mainCtrl.searchCoordinatesProjections"
      gmf-search-colorchooser="true"
      gmf-search-clearbutton="true">
    </gmf-search>

And the definition currently looks like this (in the .less files):

.search {

  ...

  .gmf-search {
    background-color: @map-tools-bg-color;
    border: 1px solid @border-color;
    padding: 0 @app-margin;
    height: @map-tools-size;
    position: relative;
  }

  ...

Could be changed like this:

    <gmf-search gmf-search-map="mainCtrl.map"
      gmf-search-datasources="mainCtrl.searchDatasources"
      gmf-search-coordinatesprojections="mainCtrl.searchCoordinatesProjections"
      gmf-search-colorchooser="true"
      gmf-search-clearbutton="true">
    </gmf-search>

gmf-search {

  ...

  .gmf-search {
    background-color: @map-tools-bg-color;
    border: 1px solid @border-color;
    padding: 0 @app-margin;
    height: @map-tools-size;
    position: relative;
  }

  ...

What do you think ?

[sbrunner]

Many thanks @adube