diff --git a/app.css b/app.css new file mode 100644 index 0000000..3b8ba73 --- /dev/null +++ b/app.css @@ -0,0 +1,167 @@ +/** + * Base + */ +html { + width: 100%; + height: 100%; + overflow: hidden-x; + text-align: center; +} + +body { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.container { + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + max-width: 576px; + max-width: 36rem; +} + +h1 { + font-size: 64px; + font-size: 4rem; + margin-bottom: 0.5em; + color: var(--ubilabs-green); +} + +.subheader { + margin-bottom: 1.5em; + font-weight: 400; +} + +input[type='text'] { + /** Reset Ubilabs input styles */ + background-color: initial; + border-radius: initial; + color: initial; + font-family: initial; + font-size: initial; + height: initial; + line-height: initial; + max-width: initial; + outline: initial; + font: inherit; + /** Set Geosuggest styles */ + width: 100%; + border: 2px solid transparent; + box-shadow: 0 0 1px #3d464d; + padding: 0.5em 1em; + -webkit-transition: + border 0.2s, + box-shadow 0.2s; + transition: + border 0.2s, + box-shadow 0.2s; +} +input[type='text']:focus-visible { + /** Set Geosuggest styles */ + border-color: #267dc0; + box-shadow: 0 0 0 transparent; +} + +.hint { + color: var(--ubilabs-gray-dark-1); + margin: 2em 0; +} + +.footer { + font-weight: 300; + padding-top: 2em; + margin-top: 2em; + border-top: 1px solid var(--ubilabs-gray); +} + +.ubilabs { + height: 1em; + margin: 0.05em 0.25em; + vertical-align: text-top; +} +/** + * The geosuggest module + * NOTE: duplicated font-sizes' are for browsers which don't support rem (only IE 8) + */ +.geosuggest { + font-size: 18px; + font-size: 1rem; + position: relative; + width: 50%; + margin: 1em auto; + text-align: left; +} +.geosuggest__input { + width: 100%; + border: 2px solid transparent; + box-shadow: 0 0 1px #3d464d; + padding: .5em 1em; + -webkit-transition: border 0.2s, box-shadow 0.2s; + transition: border 0.2s, box-shadow 0.2s; +} +.geosuggest__input:focus { + border-color: #267dc0; + box-shadow: 0 0 0 transparent; +} +.geosuggest__suggests { + position: absolute; + top: 100%; + left: 0; + right: 0; + max-height: 25em; + padding: 0; + margin-top: -1px; + background: #fff; + border: 2px solid #267dc0; + border-top-width: 0; + overflow-x: hidden; + overflow-y: auto; + list-style: none; + z-index: 5; + -webkit-transition: max-height 0.2s, border 0.2s; + transition: max-height 0.2s, border 0.2s; +} +.geosuggest__suggests--hidden { + max-height: 0; + overflow: hidden; + border-width: 0; +} + +/** + * A geosuggest item + */ +.geosuggest__item { + font-size: 18px; + font-size: 1rem; + padding: .5em .65em; + cursor: pointer; +} +.geosuggest__item:hover, +.geosuggest__item:focus { + background: #f5f5f5; +} +.geosuggest__item--active { + background: #267dc0; + color: #fff; +} +.geosuggest__item--active:hover, +.geosuggest__item--active:focus { + background: #ccc; +} +.geosuggest__item__matched-text { + font-weight: bold; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..51334cf --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + React Geosuggest + + + + + + + + +
+

React Geosuggest

+

+ Google Places Suggest for + + React.js,
+ supporting default places. +

+
+
Check the console when selecting a suggest!
+
+ + View project on GitHub. Made by + + Ubilabs + +
+
+ + + diff --git a/ubilabs.svg b/ubilabs.svg new file mode 100644 index 0000000..8a806bd --- /dev/null +++ b/ubilabs.svg @@ -0,0 +1,9 @@ + + + + + + + + +