browser/components/firefoxview/fxview-search-textbox.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 .search-container {
   6   color: var(--fxview-text-primary-color);
   7   display: inline-flex;
   8   overflow: hidden;
   9   position: relative;
  10
  11   &:focus-within {
  12     overflow: visible;
  13   }
  14 }
  15
  16 .search-icon {
  17   background-image: url(chrome://global/skin/icons/search-textbox.svg);
  18   background-position: center;
  19   background-repeat: no-repeat;
  20   background-size: 16px;
  21   fill: currentColor;
  22   -moz-context-properties: fill;
  23   height: 16px;
  24   width: 16px;
  25   position: absolute;
  26   top: 0;
  27   bottom: 0;
  28   margin: auto 0;
  29   padding: 2px;
  30   pointer-events: none;
  31 }
  32
  33 .search-icon:dir(ltr) {
  34   left: 8px;
  35 }
  36
  37 .search-icon:dir(rtl) {
  38   right: 8px;
  39 }
  40
  41 input {
  42   border: 1px solid var(--fxview-border);
  43   border-radius: var(--border-radius-small);
  44   padding: 8px 32px;
  45   width: 100%;
  46 }
  47
  48 .clear-icon {
  49   background-image: url(chrome://global/skin/icons/close-12.svg);
  50   background-position: center;
  51   background-repeat: no-repeat;
  52   background-size: 16px;
  53   fill: currentColor;
  54   -moz-context-properties: fill;
  55   cursor: pointer;
  56   height: 16px;
  57   width: 16px;
  58   position: absolute;
  59   top: 0;
  60   bottom: 0;
  61   margin: auto 0;
  62   padding: 2px;
  63 }
  64
  65 .clear-icon:hover {
  66   background-color: var(--fxview-element-background-hover);
  67   color: var(--fxview-text-color-hover);
  68 }
  69
  70 .clear-icon:dir(ltr) {
  71   right: 8px;
  72 }
  73
  74 .clear-icon:dir(rtl) {
  75   left: 8px;
  76 }