From b1dba86db8287cb7926e5f6373269d1ff5537ac2 Mon Sep 17 00:00:00 2001 From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com> Date: Mon, 18 Jan 2021 17:28:48 +0100 Subject: [PATCH] feat(style): add form-input style --- .../address-autocomplete.component.html | 1 + .../address-autocomplete.component.ts | 3 ++- src/assets/scss/_inputs.scss | 16 ++++++++++++++++ src/assets/scss/_shapes.scss | 2 +- src/styles.scss | 1 + 5 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.html b/src/app/shared/components/address-autocomplete/address-autocomplete.component.html index 73a660d26..537de506d 100644 --- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.html +++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.html @@ -5,6 +5,7 @@ type="text" placeholder="ex: 20 rue du lac, Lyon" (input)="onSearchChange($event.target.value)" + class="form-input" #searchAddress /> </div> diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts index aead77070..4e6d5cc97 100644 --- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts +++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts @@ -7,6 +7,7 @@ import { AddressService } from '../../service/address.service'; styleUrls: ['./address-autocomplete.component.scss'], }) export class AddressAutocompleteComponent { + public readonly AUTOCOMPLETE_NBR = 5; public data = []; @ViewChild('searchAddress', { static: true }) searchAddress: ElementRef; @Output() selectedAddress: EventEmitter<string> = new EventEmitter<string>(); @@ -15,7 +16,7 @@ export class AddressAutocompleteComponent { public onSearchChange(searchString: string) { this.addressService.searchAddress(searchString).subscribe((data) => { - this.data = data.hits.hits; + this.data = data.hits.hits.slice(0, this.AUTOCOMPLETE_NBR); }); } diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss index dac479e10..e672692f6 100644 --- a/src/assets/scss/_inputs.scss +++ b/src/assets/scss/_inputs.scss @@ -1,3 +1,6 @@ +@import './color'; +@import './shapes'; + @mixin input-search { width: 100%; border: none; @@ -7,3 +10,16 @@ outline: none; font-style: italic; } + +.form-input { + min-width: 290px; + background: $grey-6; + border: 1px solid $grey-4; + box-sizing: border-box; + border-radius: $input-radius; + height: 40px; +} +.form-input:focus { + border: 1px solid $blue; + outline: none !important; +} diff --git a/src/assets/scss/_shapes.scss b/src/assets/scss/_shapes.scss index fec384566..c85355e0f 100644 --- a/src/assets/scss/_shapes.scss +++ b/src/assets/scss/_shapes.scss @@ -2,7 +2,7 @@ $card-radius: 0.625em; $bouton-radius: 0.625em; -$input-radius: 0.3125em; +$input-radius: 4px; $bouton-width: 12.25em; $round-bouton-radius: 1.25em; $round-radius: 50%; diff --git a/src/styles.scss b/src/styles.scss index 3e993cf99..1773ee54c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,6 +4,7 @@ @import 'assets/scss/color'; @import 'assets/scss/breakpoint'; @import 'assets/scss/icons'; +@import 'assets/scss/inputs'; @import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css'; html { -- GitLab