Emilio Cobos Álvarez
6fde85fcae
See bug 2054065 for an example of what we're trying to prevent. Differential Revision: https://phabricator.services.mozilla.com/D316551
34 lines
976 B
CSS
34 lines
976 B
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
|
|
|
.search-bar {
|
|
position: relative;
|
|
display: flex;
|
|
border-top: 1px solid var(--theme-splitter-color);
|
|
height: var(--editor-searchbar-height);
|
|
transition: outline 150ms ease-out;
|
|
}
|
|
|
|
/* Display an outline on the container when the child input is focused. If another element
|
|
is focused (e.g. a button), we only want the outline on that element */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/no-has-selector */
|
|
.search-bar:focus-within:has(input:focus-visible) {
|
|
outline: var(--theme-focus-outline);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.search-bar .search-outline {
|
|
flex-grow: 1;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* The outline is set on .search-bar already */
|
|
.search-bar input:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.search-bar .result-list {
|
|
max-height: 230px;
|
|
}
|