Skip to content
Go to file
Cannot retrieve contributors at this time
48 lines (42 sloc) 1.13 KB
// Fancy .search in a box
.search-box {
$magnifier-position: .8rem;
$magnifier-space: 2.2rem;
position: relative;
padding: 0;
//overflow: hidden; // removed for Alfolia docSearch…
&:before {
$size: 24px;
position: absolute;
content: '';
transform: rotate(-45deg);
font-size: $size;
line-height: $size;
height: $size;
margin-top: $size/-1.9;
z-index: 12;
user-select: none;
pointer-events: none;
top: 50%;
left: var(--padding, #{$magnifier-position});
// make some space for the magnifier icon
.input[type="search"] {
padding-left: #{$magnifier-space};
// extra class to put the magnifier to the right
// + when in form-box, magnifier is also on the right
&.right, &.form-box {
.input[type="search"] {
padding-right: #{$magnifier-space};
padding-left: var(--padding, var(--space-s));
&::-webkit-search-cancel-button { -webkit-appearance: none}
&:before {
left: auto; // reset
right: #{$magnifier-position};
transform: rotate(45deg);
.input[type="search"] { padding-left: auto }
You can’t perform that action at this time.