app/assets/stylesheets/alchemy/search.scss
.search_field {
position: relative;
margin-bottom: $default-margin;
height: 29px;
}
.search_field {
.fa-search {
position: absolute;
left: 8px;
top: 9px;
}
button {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: inherit;
appearance: none;
background-color: transparent;
border: 0 none;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0;
}
}
.search_field_clear {
display: flex;
visibility: hidden;
position: absolute;
top: 7px;
right: 8px;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
}
#toolbar,
#overlay_toolbar {
.search_form {
position: absolute;
top: 0;
right: 0;
height: 45px;
}
.search_field {
height: inherit;
}
.search_input_field {
width: 0;
height: 100%;
border: none;
background-color: transparentize($form-field-background-color, 0.25);
transition:
width $transition-duration ease-in-out,
background-color $transition-duration linear;
border-radius: 0;
padding: 8px 16px 8px 32px;
margin: 0;
text-align: left;
box-shadow: none;
-webkit-appearance: none;
@media screen and (min-width: $medium-screen-break-point) {
width: 150px;
}
&:focus {
width: 250px;
background-color: $form-field-background-color;
@include default-focus-style(
$box-shadow: inset 0 0 0 2px $focus-color,
$border-radius: 0
);
}
}
.search_field .icon {
top: 18px;
}
.search_field_clear {
top: 16px;
}
}