86 lines
1.2 KiB
SCSS
86 lines
1.2 KiB
SCSS
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
*/
|
|
|
|
.search-box {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
min-width: 200px;
|
|
|
|
position: relative;
|
|
|
|
@include mobile {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.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,
|
|
.input {
|
|
width: 100%;
|
|
padding: 0.4em 1.75em 0.4em 2.25em;
|
|
|
|
&.is-compact {
|
|
padding: 0.25em 0.75em 0.25em 2.25em;
|
|
}
|
|
}
|
|
}
|