fix(style:false): do not use .double.className

Previously, when using style: false, we got .algolia-places.algolia-
places-unstyled

When I tried the product in another project, I was surprised that my
styling override (.algolia-places {width: 50%}) was not working.

This is because .algolia-places has less priority weight than
.algolia-places.algolia-places-unstyled.

So now, we either have .algolia-places class or .algolia-
places.nostyle class

cc @redox

docs/source/partials/documentation.md.erb

@@ -463,73 +463,73 @@ For the css part, here is the css used by default on our page :
 
 ```css
 /* Main input wrapper */
-.algolia-places.algolia-places-styled {
+.algolia-places {
 }
 
 /* The algolia-places input */
-.algolia-places.algolia-places-styled .ap-input, .algolia-places.algolia-places-styled .ap-hint {
+.algolia-places .ap-input, .algolia-places .ap-hint {
 }
 
 /* The style of the svg icons when the input is on hover */
-.algolia-places.algolia-places-styled .ap-input:hover ~ .ap-input-icon svg,
-.algolia-places.algolia-places-styled .ap-input:focus ~ .ap-input-icon svg,
-.algolia-places.algolia-places-styled .ap-input-icon:hover svg {
+.algolia-places .ap-input:hover ~ .ap-input-icon svg,
+.algolia-places .ap-input:focus ~ .ap-input-icon svg,
+.algolia-places .ap-input-icon:hover svg {
 }
 
 /* The dropdown style */
-.algolia-places.algolia-places-styled .ap-dropdown-menu {
+.algolia-places .ap-dropdown-menu {
 }
 
 /* The suggestions style */
-.algolia-places.algolia-places-styled .ap-suggestion {
+.algolia-places .ap-suggestion {
 }
 
 /* The highlighted names style */
-.algolia-places.algolia-places-styled .ap-suggestion em {
+.algolia-places .ap-suggestion em {
 }
 
 /* The addresses style */
-.algolia-places.algolia-places-styled .ap-address {
+.algolia-places .ap-address {
 }
 
 /* The icons of each suggestions ( can be a building or a pin ) */
-.algolia-places.algolia-places-styled .ap-suggestion-icon {
+.algolia-places .ap-suggestion-icon {
 }
 
 /* The style of the svg inside the .ap-suggestion-icon */
-.algolia-places.algolia-places-styled .ap-suggestion-icon svg {
+.algolia-places .ap-suggestion-icon svg {
 }
 
 /* The icons inside the input ( can be a pin or a cross ) */
-.algolia-places.algolia-places-styled .ap-input-icon {
+.algolia-places .ap-input-icon {
 }
 
 /* The style of the svg inside the .ap-input-icon */
-.algolia-places.algolia-places-styled .ap-input-icon svg {
+.algolia-places .ap-input-icon svg {
 }
 
 /* .a-cursor is the class a suggestion go on hover */
-.algolia-places.algolia-places-styled .ap-cursor {
+.algolia-places .ap-cursor {
 }
 
 /* The style of the svg icon, when the .ap-suggestion is on hover */
-.algolia-places.algolia-places-styled .ap-cursor .ap-suggestion-icon svg {
+.algolia-places .ap-cursor .ap-suggestion-icon svg {
 }
 
 /* The styles of the Algolia Places input footer */
-.algolia-places.algolia-places-styled .ap-footer {
+.algolia-places .ap-footer {
 }
 
 /* The styles of the Algolia Places input footer links */
-.algolia-places.algolia-places-styled .ap-footer a {
+.algolia-places .ap-footer a {
 }
 
 /* The styles of the Algolia Places input footer svg icons */
-.algolia-places.algolia-places-styled .ap-footer a svg {
+.algolia-places .ap-footer a svg {
 }
 
 /* The styles of the Algolia Places input footer on hover */
-.algolia-places.algolia-places-styled .ap-footer:hover {
+.algolia-places .ap-footer:hover {
 }
 
 ```

docs/source/partials/examples/_index.md.erb

@@ -112,7 +112,7 @@ Here's an example styling the input:
 
 See our [documentation about styling](./documentation.html#styling) for more details.
 
-## Full styling
+## Disable default style
 
 To disable all styling, use the `style` option:
 
@@ -122,4 +122,6 @@ To disable all styling, use the `style` option:
 <%= partial '/partials/examples/full_styling' %>
 ```
 
+Once you do so, the default "algolia-places" class name will be "algolia-places-nostyle".
+
 See our [documentation about styling](./documentation.html#styling) for more details.

src/places.js

@@ -63,7 +63,7 @@ export default function places({
     autoselect: true,
     hint: false,
     cssClasses: {
-      root: 'algolia-places' + (style === false ? '' : ' algolia-places-styled'),
+      root: 'algolia-places' + (style === false ? '-nostyle' : ''),
       prefix: 'ap'
     }
   };

src/places.scss

@@ -9,11 +9,12 @@
 
 // all em units are computed given a font of 16px
 // see http://pxtoem.com/ to change/add values
-.algolia-places.algolia-places-styled {
+.algolia-places {
   width: 100%;
 
   .ap-input, .ap-hint {
     width: 100%;
+    padding-right: 35px;
   }
 
   .ap-input:hover ~ .ap-input-icon svg,