feat(styling): Change the way to styling is done

Disable all <input /> border/shadow/padding styling, we want to fix the
page styles.

Add a new `style: boolean` option to control whether the input
and dropdown menu should be styled or not.

Fix #91

docs/source/partials/documentation.md.erb

@@ -42,7 +42,7 @@ var placesAutocomplete = places({
 
 As a result, you will get the Algolia Places autocompletion menu:
 
-<input type="text" id="docs-getting-started-demo" placeholder="Where are we going?" />
+<input type="text" id="docs-getting-started-demo" class="form-control" placeholder="Where are we going?" />
 
 ## API
 
@@ -126,6 +126,20 @@ if you want to configure this.
 **Default**: Search in all types.
 
 FIXME: not implemented
+</td>
+    </tr>
+    <tr>
+<td markdown="1">
+`style`
+
+Type: boolean
+
+required: no
+</td>
+<td markdown="1">
+Control whether the default styles should be used.
+
+**Default**: Styles are enabled.
 </td>
     </tr>
   </tbody>

docs/source/partials/examples/_address_form.html.erb

@@ -1,4 +1,4 @@
-<form action="/billing" class="billing-form">
+<form action="/billing" class="form">
   <div class="form-group">
     <label for="form-address">Address*</label>
     <input type="text" class="form-control" id="form-address" placeholder="Where do you live?" />
@@ -15,7 +15,6 @@
     <label for="form-zip">Zip Code*</label>
     <input type="text" class="form-control" id="form-zip" placeholder="Zip Code">
   </div>
-  <button type="submit" class="btn btn-default">Save</button>
 </form>
 
 <script>

docs/source/partials/examples/_address_map.html.erb

@@ -1,8 +1,8 @@
 <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
-<div id="map-example">
+<div id="map-example" class="form-group">
   <div class="left-column">
-    <input type="text" id="input-map" placeholder="Where are we going?" />
+    <input type="text" id="input-map" class="form-control" placeholder="Where are we going?" />
   </div>
   <div class="right-column">
     <div id="map"></div>

docs/source/partials/examples/_address_search.html.erb

@@ -1,8 +1,4 @@
-<input
-  type="text"
-  id="address"
-  placeholder="Where are we going?"
-/>
+<input type="text" id="address" class="form-control" placeholder="Where are we going?" />
 
 <script>
   var placesAutocomplete = places({

docs/source/partials/examples/_city_search.html.erb

@@ -1,4 +1,4 @@
-<input type="text" id="city" placeholder="In which city do you live?" />
+<input type="text" id="city" class="form-control" placeholder="In which city do you live?" />
 
 <script>
   var placesAutocomplete = places({

docs/source/partials/examples/_country_search.html.erb

@@ -1,4 +1,4 @@
-<input type="text" id="country" placeholder="What's your favorite country?" />
+<input type="text" id="country" class="form-control" placeholder="What's your favorite country?" />
 
 <script>
   var placesAutocomplete = places({

docs/source/partials/hero.html.haml

@@ -14,4 +14,4 @@
       %div.fl-right
         = partial("/images/svg/places-illustration.svg")
     - if current_page.path == 'index.html'
-      %input{type: "text", id: "landing-demo", class: "hero-searchbar", autofocus: true, placeholder: "Search a city or address", style: 'opacity: 0'}
+      %input{type: "text", id: "landing-demo", class: "hero-searchbar form-control", autofocus: true, placeholder: "Search a city or address", style: 'opacity: 0'}

docs/source/partials/navigation.html.haml

@@ -16,8 +16,6 @@
           %a{href: "documentation.html", title: "Documentation", :data => {:path => "documentation.html"}} Documentation
         %li{nav_active("examples.html")}
           %a{href: "examples.html", title: "Examples", :data => {:path => "examples.html"}} Examples
-        %li{nav_active("nostyle.html")}
-          %a{href: "nostyle.html", title: "Nostyle test", :data => {:path => "nostyle.html"}} <small>No style test</small>
         %li
           %a{href: "https://github.com/algolia/places", title: "GitHub repository"}
             = partial("/images/svg/icon-github.svg")

docs/source/stylesheets/components/_examples.scss

@@ -1,43 +1,22 @@
-.billing-form {
-  position: relative;
-
-  .form-group {
-    margin-bottom: 1em;
-
-    label {
-      display: block;
-      float: left;
-      width: 28%;
-      margin-right: 2%;
-      line-height: 40px;
-      text-align: right;
-    }
-
-    .form-control {
-      width: 50%;
-      box-sizing: border-box;
-      padding-left: 16px;
-      line-height: 40px;
-      height: 40px;
-      border: 1px solid #cccccc;
-      border-radius: 3px;
-      outline: none;
-    }
-
-    .algolia-places {
-      width: 50% !important;
-
-      .form-control {
-        width: 100%;
-      }
-    }
+.form-control {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 16px;
+  line-height: 40px;
+  height: 40px;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  outline: none;
+}
 
-  }
+.form-group {
+  margin-bottom: 1em;
+  clear: both;
 
-  button.btn {
-    float: right;
-    margin-right: 50%;
-    margin-bottom: 2em;
+  label {
+    display: block;
+    font-weight: bold;
+    font-size: .8em;
   }
 
 }

src/places.js

@@ -19,7 +19,8 @@ const hitFormatter = createHitFormatter({
 export default function places({
   countries,
   language = navigator.language.split('-')[0],
-  container
+  container,
+  style
 }) {
   const placesInstance = new EventEmitter();
   const client = algoliasearch.initPlaces(
@@ -34,7 +35,7 @@ export default function places({
     autoselect: true,
     hint: true,
     cssClasses: {
-      root: 'algolia-places',
+      root: 'algolia-places' + (style === false ? '' : ' algolia-places-styled'),
       prefix: 'ap'
     }
   };

src/places.scss

@@ -9,43 +9,15 @@
 
 // all em units are computed given a font of 16px
 // see http://pxtoem.com/ to change/add values
-.algolia-places {
+.algolia-places.algolia-places-styled {
   width: 100%;
 
-  .ap-input,
-  .ap-hint {
-    box-sizing: border-box;
-    width: 100%;
-    padding-left: 16px;
-    padding-right: 30px;
-    line-height: 40px;
-    height: 40px;
-    // it's necessary to specify border for both inputs to get the exact same dimensions and
-    // avoid font overlaps
-    border: 1px solid #cccccc;
-    border-radius: 3px;
-    outline: none;
-  }
-
   .ap-input:hover ~ .ap-input-icon svg,
   .ap-input:focus ~ .ap-input-icon svg,
   .ap-input-icon:hover svg {
     fill: #aaaaaa;
   }
 
-  .ap-input {
-    color: #555555;
-
-    &:hover,
-    &:focus {
-      border-color: #999999;
-    }
-
-    @include placeholder {
-      color: #cccccc;
-    }
-  }
-
   .ap-hint {
     color: #cccccc;
     background: #ffffff;