134dc6c03a
Replaces the searchfield-cancel icon with the close-12 icon so that we can style the background-color of the icon as needed. Since we need close-12.svg to be content accessible, I needed to move the icon to layout/style/res and add it as a content accessible file. This resulted in replacing the existing uses of chrome://global/skin/icons/close-12.svg with the new resource URL, resource://content-accessible/close-12.svg. Differential Revision: https://phabricator.services.mozilla.com/D243564
77 lines
1.5 KiB
CSS
77 lines
1.5 KiB
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-container {
|
|
color: var(--fxview-text-primary-color);
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
&:focus-within {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
.search-icon {
|
|
background-image: url(chrome://global/skin/icons/search-textbox.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
fill: currentColor;
|
|
-moz-context-properties: fill;
|
|
height: 16px;
|
|
width: 16px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
padding: 2px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.search-icon:dir(ltr) {
|
|
left: 8px;
|
|
}
|
|
|
|
.search-icon:dir(rtl) {
|
|
right: 8px;
|
|
}
|
|
|
|
input {
|
|
border: 1px solid var(--fxview-border);
|
|
border-radius: var(--border-radius-small);
|
|
padding: 8px 32px;
|
|
width: 100%;
|
|
}
|
|
|
|
.clear-icon {
|
|
background-image: url(resource://content-accessible/close-12.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
fill: currentColor;
|
|
-moz-context-properties: fill;
|
|
cursor: pointer;
|
|
height: 16px;
|
|
width: 16px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
padding: 2px;
|
|
}
|
|
|
|
.clear-icon:hover {
|
|
background-color: var(--fxview-element-background-hover);
|
|
color: var(--fxview-text-color-hover);
|
|
}
|
|
|
|
.clear-icon:dir(ltr) {
|
|
right: 8px;
|
|
}
|
|
|
|
.clear-icon:dir(rtl) {
|
|
left: 8px;
|
|
}
|