2020-05-24 17:14:26 +00:00
|
|
|
.search {
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: 2rem;
|
2020-06-02 18:20:39 +00:00
|
|
|
max-width: 44rem;
|
2020-05-24 17:14:26 +00:00
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search__input {
|
|
|
|
background: $grey-1;
|
|
|
|
padding-left: $space-normal * 2.5;
|
|
|
|
padding-right: $space-normal * 2.5;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search__eyeglass-icon {
|
|
|
|
fill: $grey-7;
|
|
|
|
height: $space-normal;
|
|
|
|
left: $space-normal;
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
width: $space-normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search__clear-link {
|
|
|
|
height: $space-normal;
|
|
|
|
position: absolute;
|
|
|
|
right: $space-normal * 0.75;
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
width: $space-normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search__clear-icon {
|
|
|
|
fill: $grey-5;
|
|
|
|
height: $space-normal;
|
|
|
|
position: absolute;
|
|
|
|
transition: fill $base-duration $base-timing;
|
|
|
|
width: $space-normal;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
fill: $action-color;
|
|
|
|
}
|
|
|
|
}
|