zotero/scss/components/_search.scss

75 lines
1.7 KiB
SCSS
Raw Normal View History

.search {
position: relative;
min-width: 40px;
2023-12-15 09:51:39 +00:00
height: 36px;
input {
background-color: var(--material-background);
2023-12-15 09:51:39 +00:00
border-radius: 5px;
// Overwrite input style on Windows
border: var(--material-border-quinary) !important;
2023-12-15 09:51:39 +00:00
color: var(--fill-primary);
flex: 1 0;
2024-01-12 07:59:37 +00:00
margin: 6px 0px;
2023-12-15 09:51:39 +00:00
min-width: 40px;
padding: 3px 7px;
&::placeholder {
color: var(--fill-tertiary);
opacity: 1.0;
}
@media not (-moz-platform: windows) {
@include focus-ring;
2023-12-15 09:51:39 +00:00
}
}
.search-cancel-button {
position: absolute;
inset-inline-end: 0;
2023-12-15 09:51:39 +00:00
width: 14px;
height: 14px;
padding-inline: 5px 8px;
padding-block: 5px;
margin-inline: 0 4px;
margin-block: 6px;
2023-12-15 09:51:39 +00:00
cursor: default;
background: url(resource://gre-resources/searchfield-cancel.svg) no-repeat center/contain;
background-size: unset;
}
}
2023-12-15 09:51:39 +00:00
search-textbox {
appearance: none;
background: var(--material-background);
border-radius: 5px;
border: var(--material-border-quinary);
color: var(--fill-primary);
padding: 0;
padding-inline-end: 6px;
&::placeholder {
color: var(--fill-tertiary);
opacity: 1.0;
}
@media not (-moz-platform: windows) {
@include focus-ring(false, focus);
}
}
2023-12-15 09:51:39 +00:00
:is(search-textbox)::part(search-sign),
:is(search-textbox)::part(search-icon) {
@include svgicon-menu("magnifier", "universal", "16");
color: var(--fill-secondary);
2024-01-10 16:34:36 +00:00
// right: 2px padding + 8px dropmarker width + 4px padding + 6px padding
// Use explicit left/right padding here because this element is flipped in RTL (see below)
padding: 6px 4px 6px 6px;
margin: 0;
2023-12-15 09:51:39 +00:00
}
2024-01-10 16:34:36 +00:00
:is(search-textbox):-moz-locale-dir(rtl)::part(search-sign),
:is(search-textbox):-moz-locale-dir(rtl)::part(search-icon) {
transform: scaleX(-1);
}