diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index 7c7f45a5..8cb14421 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -68,7 +68,7 @@ size and position, etc. .predictionsRoot { position: absolute; width: 100%; - padding-bottom: 72px; + padding-bottom: var(--locationAutocompleteBottomPadding); top: var(--LocationAutocompleteInput_inputHeight); left: 0; background-color: var(--marketplaceColor); diff --git a/src/forms/EditListingLocationForm/EditListingLocationForm.css b/src/forms/EditListingLocationForm/EditListingLocationForm.css index 0c9eebd9..89eb7247 100644 --- a/src/forms/EditListingLocationForm/EditListingLocationForm.css +++ b/src/forms/EditListingLocationForm/EditListingLocationForm.css @@ -50,7 +50,7 @@ .predictionsRoot { position: absolute; width: 100%; - padding-bottom: 98px; + padding-bottom: var(--locationAutocompleteBottomPadding); top: 36px; left: 0; background-color: var(--marketplaceColor); diff --git a/src/forms/LocationSearchForm/LocationSearchForm.css b/src/forms/LocationSearchForm/LocationSearchForm.css index 4f28cec2..cc87d163 100644 --- a/src/forms/LocationSearchForm/LocationSearchForm.css +++ b/src/forms/LocationSearchForm/LocationSearchForm.css @@ -51,7 +51,7 @@ .searchPredictions { position: absolute; width: 100%; - padding-bottom: 72px; + padding-bottom: var(--locationAutocompleteBottomPadding); top: 50px; left: 0; background-color: var(--marketplaceColor); diff --git a/src/forms/TopbarSearchForm/TopbarSearchForm.css b/src/forms/TopbarSearchForm/TopbarSearchForm.css index e616d2c6..f19e567f 100644 --- a/src/forms/TopbarSearchForm/TopbarSearchForm.css +++ b/src/forms/TopbarSearchForm/TopbarSearchForm.css @@ -132,7 +132,7 @@ left: 0; min-height: calc(100vh - var(--TopbarSearchForm_mobilePredictionTop)); width: 100%; - padding-bottom: 72px; + padding-bottom: var(--locationAutocompleteBottomPadding); background-color: var(--marketplaceColor); border-bottom-left-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); @@ -143,7 +143,7 @@ .desktopPredictions { position: absolute; width: 100%; - padding-bottom: 72px; + padding-bottom: var(--locationAutocompleteBottomPadding); top: 50px; left: 0; background-color: var(--marketplaceColor); diff --git a/src/marketplace.css b/src/marketplace.css index 7984fa50..6bb6f2e7 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -116,6 +116,10 @@ --modalPadding: 24px 24px 48px 24px; --modalPaddingMedium: 55px 60px 55px 60px; + /* ================ LocationAutocompleteInput bottom attribution padding ================ */ + + --locationAutocompleteBottomPadding: 72px; + /* ================ Clearfix solution ================ */ --clearfix {