app/assets/stylesheets/modules/search_bar.scss
.search-bar {
overflow: auto;
position: relative;
input {
color: $gray-darker;
font-size: 14px;
height: 50px;
outline: none;
padding: 10px 20px 10px 38px;
width: 100%;
&:hover {
background-color: $navbar-default-link-hover-bg;
color: $navbar-default-link-hover-color;
}
&:focus {
background-color: $navbar-default-link-hover-bg;
color: white;
@include placeholder {
color: $gray-dark;
}
// ~ .search-bar-clear-icon {
// visibility: visible;
// }
}
@include placeholder {
color: white;
-webkit-font-smoothing: antialiased;
}
&.filled {
color: white;
~ .search-bar-clear-icon {
visibility: visible;
}
}
}
.search-bar-icon {
color: white;
font-size: 14px;
line-height: 20px;
margin-top: 14px;
margin-left: 14px;
pointer-events: none;
position: absolute;
@include transform(scaleX(-1));
&.search-bar-clear-icon {
right: 14px;
cursor: pointer;
pointer-events: auto;
visibility: hidden;
}
}
}