71 lines
977 B
SCSS
71 lines
977 B
SCSS
|
.search-box {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 300px;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.prefix-icon,
|
||
|
|
.suffix-icon {
|
||
|
|
position: absolute;
|
||
|
|
z-index: $z-icon-decorators;
|
||
|
|
|
||
|
|
path {
|
||
|
|
fill: $grey;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.prefix-icon {
|
||
|
|
left: 0.75em;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
width: 15px;
|
||
|
|
height: 15px;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.suffix-icon {
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 100%;
|
||
|
|
width: 1.75em;
|
||
|
|
cursor: pointer;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
position: absolute;
|
||
|
|
display: block;
|
||
|
|
height: 10px;
|
||
|
|
width: 10px;
|
||
|
|
top: 50%;
|
||
|
|
left: 0;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover path {
|
||
|
|
fill: $grey-light;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: none;
|
||
|
|
path {
|
||
|
|
fill: $grey-light;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.control {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.4em 1.75em 0.4em 2.25em;
|
||
|
|
}
|
||
|
|
}
|