e-lado
Version:
[](https://circleci.com/gh/sharetribe/sharetribe/tree/master) [](https://gemnasium.com/sharetribe/shar
371 lines (311 loc) • 9.4 kB
CSS
/* The Google Maps Places Autocomplete dropdown box is added in the
end of the document body, and we must scope the global style
overrides within a class generated from the SearchBar component.
Classes available for customization can be seen at:
https://developers.google.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
*/
.topLevelBody {
/* stylelint-disable selector-class-pattern */
& :global(.pac-container[style]) {
/* Generated autocompletion has inline styles, thus the ugly override.
See: https://css-tricks.com/override-inline-styles-with-css/ */
min-width: 15em ;
}
/* stylelint-enable selector-class-pattern */
}
/* Used in JavaScript to toggle the mobile menu. */
.mobileSearchOpen {} /* stylelint-disable-line block-no-empty */
.root {
line-height: 1em;
}
.form {
display: none;
height: var(--SearchBar_mobileHeight);
position: absolute;
left: 0;
right: 0;
top: auto;
padding-left: var(--SearchBar_sidePaddingMobile);
z-index: var(--SearchBar_formZIndex);
transition: height 1s ease-in;
font-size: 16px;
@nest .mobileSearchOpen & {
display: flex;
}
@media (--large-viewport) {
display: inline-flex;
position: relative;
height: var(--SearchBar_height);
width: var(--SearchBar_narrowWidth);
padding-left: var(--SearchBar_sidePadding);
top: 0;
font-size: var(--baseFontSize);
}
@media (--search-desktop-wide) {
width: var(--SearchBar_width);
}
&:hover .focusContainer::before {
border-color: var(--SearchBar_borderColorActive);
}
/* When any child element of this form has focus, hilight the whole
form using a pseudo element. See: http://stackoverflow.com/a/11167056 */
& > *:focus ~ .focusContainer::before {
border-color: var(--SearchBar_borderColorActive);
}
}
/* Since we cannot apply focus styles straight to the form when
anything within it has focus, we have to create a special container
for the focus styles to cover the whole form area. */
.focusContainer::before {
display: none;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid var(--SearchBar_borderColor);
z-index: var(--SearchBar_focusContainerZIndex); /* Required to allow mouse event to the inputs/buttons. */
transition: border-color 0.1s ease-in;
@media (--large-viewport) {
display: block;
border-radius: calc(var(--SearchBar_height) / 2);
}
}
.keywordInput,
.locationInput {
display: inline-block;
width: 0;
margin: var(--SearchBar_textPaddingMobile) 0;
padding: 0;
border: none;
border-bottom: 1px solid var(--SearchBar_mobileInputBorderColor);
border-radius: 0;
color: var(--SearchBar_mobileTextColor);
font-weight: var(--SearchBar_inputFontWeight);
z-index: var(--SearchBar_childZIndex);
flex-grow: 1;
transition: flex-grow 0.25s ease-out, width 0.25s ease-out, color 0.1s ease-in;
background-color: transparent;
-webkit-font-smoothing: antialiased;
&:focus {
outline: none;
flex-grow: 9;
border-color: var(--SearchBar_mobileTextColor);
@media (--large-viewport) {
flex-grow: 1;
}
}
/* When there is only a single search input, disable width changes and
extra spacings. */
&:only-of-type {
width: 100%;
padding: 0;
margin-right: calc(var(--SearchBar_mobileHeight) + var(--SearchBar_sidePaddingMobile));
@media (--large-viewport) {
margin-right: var(--SearchBar_height);
&:focus {
margin-right: var(--SearchBar_height);
}
}
&:focus {
width: 100%;
& ~ .searchButton {
box-shadow: none;
}
}
}
&::placeholder {
color: var(--SearchBar_mobilePlaceholderColor);
}
@media (--large-viewport) {
color: var(--SearchBar_textColor);
margin: var(--SearchBar_textPadding) 0;
border: none;
&::placeholder {
color: var(--SearchBar_textColor);
transition: color 0.1s ease-in;
}
@nest .form:hover & {
color: var(--SearchBar_textColorActive);
&::placeholder {
color: var(--SearchBar_textColorActive);
}
&:focus {
/* focus color should override the active color */
color: var(--SearchBar_textColorFocus);
}
}
&:focus {
outline: none;
color: var(--SearchBar_textColorFocus);
/* Trigger focus styles for the search icon SVG when these inputs have focus. */
& ~ .searchButton svg {
stroke: var(--SearchBar_iconColorActive);
}
}
}
}
.keywordInput {
margin-right: calc(var(--SearchBar_sidePaddingMobile) / 2);
@media (--large-viewport) {
width: var(--SearchBar_keywordInputWidthNarrow);
margin-right: var(--SearchBar_sidePadding);
}
@media (--search-desktop-wide) {
width: var(--SearchBar_keywordInputWidth);
}
&:focus {
@media (--search-desktop-wide) {
width: var(--SearchBar_keywordInputFocusWidth);
}
& ~ .locationInput {
margin-right: var(--SearchBar_mobileHeight);
@media (--large-viewport) {
margin-right: var(--SearchBar_height);
}
@media (--search-desktop-wide) {
width: calc(100% - var(--SearchBar_keywordInputFocusWidth));
}
}
/* Focusing on the keyword input puts the location input under the
search button with a shadow effect on the button. */
& ~ .searchButton::before {
box-shadow: -10px 0 15px -10px #000 inset;
content: ' ';
position: absolute;
top: 0;
width: 20px;
height: 100%;
left: -20px;
pointer-events: none;
@media (--large-viewport) {
display: none;
box-shadow: none;
}
}
}
}
.locationInput {
@media (--large-viewport) {
width: calc(100% - var(--SearchBar_keywordInputWidthNarrow));
}
@media (--search-desktop-wide) {
width: calc(100% - var(--SearchBar_keywordInputWidth));
}
}
/* Additional separating styles are added only when the two inputs are
next to each other. */
.keywordInput + .locationInput {
margin-left: calc(var(--SearchBar_sidePaddingMobile) / 2);
margin-right: calc(var(--SearchBar_mobileHeight) + var(--SearchBar_sidePaddingMobile));
@media (--large-viewport) {
border-left: 1px solid var(--SearchBar_borderColor);
padding-left: var(--SearchBar_sidePadding);
margin-left: 0;
margin-right: var(--SearchBar_height);
}
}
.searchButton {
/* Position absolutely instead of in the flexbox to avoid animation jank. */
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
display: inline-block;
line-height: 1;
border: none;
background-color: var(--SearchBar_mobileButtonBackgroundColor);
width: var(--SearchBar_mobileHeight);
height: var(--SearchBar_mobileHeight);
cursor: pointer;
z-index: var(--SearchBar_childZIndex);
&:hover,
&:active {
background-color: var(--SearchBar_mobileButtonBackgroundColor);
}
@media (--large-viewport) {
width: var(--SearchBar_height);
height: var(--SearchBar_height);
background-color: transparent;
&:focus {
outline: none;
& svg {
outline: 1px solid var(--SearchBar_borderColor);
stroke: var(--SearchBar_iconColorFocus);
}
}
@nest .form:hover & {
& svg {
stroke: var(--SearchBar_iconColorActive);
}
&:hover svg,
&:focus svg {
stroke: var(--SearchBar_iconColorFocus);
}
}
&:hover,
&:active {
background-color: transparent;
}
}
& svg {
position: absolute;
top: calc(var(--SearchBar_mobileHeight) / 2 - var(--SearchBar_iconSize) / 2);
left: calc(var(--SearchBar_mobileHeight) / 2 - var(--SearchBar_iconSize) / 2);
line-height: 1;
width: var(--SearchBar_iconSize);
height: var(--SearchBar_iconSize);
stroke: var(--SearchBar_mobileTextColor);
transition: stroke 0.1s ease-in;
@media (--large-viewport) {
stroke: var(--SearchBar_iconColor);
top: calc(var(--SearchBar_height) / 2 - var(--SearchBar_iconSize) / 2);
left: calc(var(--SearchBar_height) / 2 - var(--SearchBar_iconSize) / 2);
}
}
}
.mobileToggle {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: var(--SearchBar_mobileHeight);
height: var(--SearchBar_mobileHeight);
background-color: transparent;
border: none;
stroke: #000;
cursor: pointer;
&:hover,
&:active {
background-color: transparent;
}
& svg {
width: var(--SearchBar_iconSize);
height: var(--SearchBar_iconSize);
margin-top: var(--SearchBar_iconTopMarginFix);
}
@media (--large-viewport) {
display: none;
}
}
/* CSS triangle pointing to the search toggle icon */
.mobileToggleArrow {
display: none;
position: absolute;
bottom: -1px;
right: calc(var(--SearchBar_mobileHeight) / 2 - var(--SearchBar_mobileTriangleSize));
border: var(--SearchBar_mobileTriangleSize) solid transparent;
/* We must adjust the brightness here to match either the input
background or the submit button background when the toggle
position changes in the breakpoint. This cannot be done in JS by
switching the color since the breakpoints are unknown there. */
filter: brightness(80%);
@media (--medium-viewport) {
filter: brightness(100%);
}
@nest .mobileSearchOpen & {
display: block;
}
}