@import '../../marketplace.css'; :root { /* These variables are available in global scope through ":root" element ( tag). Variables with the same names are going to overwrite each other if CSS Properties' (PostCSS plugin) configuration "preserve: true" is used - meaning that variables are left to CSS bundle. We are planning to enable it in the future since browsers support CSS Properties already. */ --TopbarSearchForm_inputHeight: 53px; --TopbarSearchForm_topbarMargin: 94px; --TopbarSearchForm_bottomBorder: 3px; --TopbarSearchForm_mobilePredictionTop: calc( var(--TopbarSearchForm_topbarMargin) + var(--TopbarSearchForm_inputHeight) - var(--TopbarSearchForm_bottomBorder) ); } .mobileInputRoot { width: 100%; } .desktopInputRoot { height: var(--topbarHeightDesktop); } .mobileIcon { margin-left: 24px; padding: 11px 0 17px 0; /* Borders */ border-bottom-width: var(--borderRadiusMobileSearch); display: flex; width: 24px; align-self: stretch; background-color: var(--matterColorLight); } .mobileInput { flex-grow: 1; /* Font */ @apply --marketplaceH1FontStyles; /* Layout */ margin: 0 24px 0 0; padding: 1px 13px 13px 13px; height: var(--TopbarSearchForm_inputHeight); line-height: unset; /* Borders */ border-bottom-width: var(--borderRadiusMobileSearch); /* Safari bugfix: without this Safari will print placeholder to a wrong place */ &::-webkit-input-placeholder { line-height: normal; } &:hover, &:focus { border-bottom-color: var(--marketplaceColor); outline: none; } } .desktopIcon { height: var(--topbarHeightDesktop); border: none; padding-top: 3px; display: flex; width: 24px; align-self: stretch; background-color: var(--matterColorLight); } .desktopInput { flex-grow: 1; /* Font */ @apply --marketplaceH4FontStyles; height: var(--topbarHeightDesktop); line-height: unset; border: none; padding-top: 0; padding-bottom: 0; padding-left: 10px; /* Search text gets ellipsis if it's too wide */ text-overflow: ellipsis; overflow-x: hidden; /* Safari bugfix: without this Safari will print placeholder to a wrong place */ &::-webkit-input-placeholder { line-height: normal; } &:hover, &:focus { border-bottom-color: var(--marketplaceColor); outline: none; } &:hover::placeholder, &:focus::placeholder { color: var(--matterColor); } /* Placeholder text might be too wide */ &::placeholder { text-overflow: ellipsis; overflow-x: hidden; font-weight: var(--fontWeightRegular); transition: var(--transitionStyleButton); } margin-top: 0; margin-bottom: 0; @media (--viewportMedium) { margin-top: 0; margin-bottom: 0; font-weight: var(--fontWeightSemiBold); } } .mobilePredictions { position: absolute; top: calc(var(--TopbarSearchForm_inputHeight) - var(--TopbarSearchForm_bottomBorder)); left: 0; min-height: calc(100vh - var(--TopbarSearchForm_mobilePredictionTop)); width: 100%; padding-bottom: var(--locationAutocompleteBottomPadding); background-color: var(--marketplaceColor); border-bottom-left-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); box-shadow: var(--boxShadowPopup); z-index: calc(var(--zIndexPopup) + 1); } .mobilePredictionsAttribution { /* When using the Google Maps Places geocoder, the "Powered by Google" text is hidden in Mobile Safari without giving some extra space to it. */ margin-bottom: 100px; } .desktopPredictions { position: absolute; width: 100%; padding-bottom: var(--locationAutocompleteBottomPadding); top: 50px; left: 0; background-color: var(--marketplaceColor); border-bottom-left-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); box-shadow: var(--boxShadowPopup); z-index: calc(var(--zIndexPopup) + 1); margin-top: calc( var(--topbarHeightDesktop) - var(--TopbarSearchForm_inputHeight) + var(--TopbarSearchForm_bottomBorder) ); max-width: 434px; }