diff --git a/docs/source/partials/documentation.md.erb b/docs/source/partials/documentation.md.erb index 15f045d35..c87f9d860 100644 --- a/docs/source/partials/documentation.md.erb +++ b/docs/source/partials/documentation.md.erb @@ -459,6 +459,97 @@ Then the dropdown html structure looks like this: ``` +For the css part, here is the css used by default on our page : + +```css +.algolia-places.algolia-places-styled { + width: 100%; +} +.algolia-places.algolia-places-styled .ap-input, .algolia-places.algolia-places-styled .ap-hint { + width: 100%; +} +.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 { + fill: #aaaaaa; +} +.algolia-places.algolia-places-styled .ap-dropdown-menu { + width: 100%; + background: #ffffff; + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1); + border-radius: 3px; + margin-top: 3px; + overflow: hidden; +} +.algolia-places.algolia-places-styled .ap-suggestion { + cursor: pointer; + height: 46px; + line-height: 46px; + padding-left: 18px; + overflow: hidden; +} +.algolia-places.algolia-places-styled .ap-suggestion em { + font-weight: bold; + font-style: normal; +} +.algolia-places.algolia-places-styled .ap-address { + font-size: smaller; + margin-left: 12px; + color: #aaaaaa; +} +.algolia-places.algolia-places-styled .ap-suggestion-icon { + margin-right: 10px; + width: 14px; + height: 20px; + vertical-align: middle; +} +.algolia-places.algolia-places-styled .ap-suggestion-icon svg { + transform: scale(0.9) translateY(2px); + fill: #cfcfcf; +} +.algolia-places.algolia-places-styled .ap-input-icon { + border: 0; + background: transparent; + position: absolute; + top: 0; + bottom: 0; + right: 16px; + outline: none; +} +.algolia-places.algolia-places-styled .ap-input-icon svg { + fill: #cfcfcf; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); +} +.algolia-places.algolia-places-styled .ap-cursor { + background: #efefef; +} +.algolia-places.algolia-places-styled .ap-cursor .ap-suggestion-icon svg { + transform: scale(1); + fill: #aaaaaa; +} +.algolia-places.algolia-places-styled .ap-footer { + opacity: .8; + text-align: right; + padding: .5em 1em .5em 0; + font-size: 12px; + line-height: 12px; +} +.algolia-places.algolia-places-styled .ap-footer a { + color: inherit; + text-decoration: none; +} +.algolia-places.algolia-places-styled .ap-footer a svg { + vertical-align: middle; +} +.algolia-places.algolia-places-styled .ap-footer:hover { + opacity: 1; +} + +``` + You can disable all the Algolia Places styling by passing the `style: false` option. See our [styling examples](./examples.html#input-styling). diff --git a/docs/source/partials/header-example.html.haml b/docs/source/partials/header-example.html.haml deleted file mode 100644 index 94f4082c7..000000000 --- a/docs/source/partials/header-example.html.haml +++ /dev/null @@ -1 +0,0 @@ -Foo bar baz qux \ No newline at end of file