Sha256: d91441cd28d5775a11e37a6f071fd9177edfd0bc29d4bad4bb8df9f89ae921ca
Contents?: true
Size: 1.63 KB
Versions: 5
Compression:
Stored size: 1.63 KB
Contents
.search_field {
position: relative;
margin-bottom: var(--spacing-1);
height: 29px;
}
.search_field {
.fa-search {
position: absolute;
left: var(--spacing-2);
top: 9px;
}
button {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: inherit;
appearance: none;
background-color: transparent;
border: 0 none;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0;
}
}
.search_field_clear {
display: flex;
visibility: hidden;
position: absolute;
top: 7px;
right: var(--spacing-2);
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
}
#toolbar,
#overlay_toolbar {
.search_form {
position: absolute;
top: 0;
right: 0;
height: 45px;
}
.search_field {
height: inherit;
}
.search_input_field {
width: 0;
height: 100%;
border: none;
background-color: hsla(0deg, 0%, 100%, 0.75);
transition:
width $transition-duration ease-in-out,
background-color $transition-duration linear;
border-radius: 0;
padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
margin: 0;
text-align: left;
box-shadow: none;
-webkit-appearance: none;
@media screen and (min-width: $medium-screen-break-point) {
width: 150px;
}
&:focus {
width: 250px;
background-color: $form-field-background-color;
@include default-focus-style(
$box-shadow: inset 0 0 0 2px $focus-color,
$border-radius: 0
);
}
}
.search_field .icon {
top: 18px;
}
.search_field_clear {
top: var(--spacing-4);
}
}
Version data entries
5 entries across 5 versions & 1 rubygems