coriolis-web/src/components/SearchBox/SearchBox.scss

/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/


@import '../variables.scss';

$searchStrokeColor: $gray-dark;

.root {
  position: relative;
  left: 16px;
  :global(.spinner) {
    position: absolute;
    top: 3px;
    right: 8px;
  }
}

input[type="text"].searchBox {
  background-image: url('data:image/svg+xml;utf8,<svg width="14px" height="14px" viewBox="2 2 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="path-1" cx="8" cy="8" r="6"></circle><mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12" height="12" fill="white"><use xlink:href="%23path-1"></use></mask></defs><use id="Oval-32" stroke="%23616770" mask="url(%23mask-2)" stroke-width="2" fill="%23FFFFFF" fill-rule="evenodd" xlink:href="%23path-1"></use><path d="M12,12 L15.5,15.5" id="Line" stroke="%23616770" stroke-width="1" stroke-linecap="round" fill="none"></path></svg>');
  transition: all $animation-swift-out;
  background-repeat: no-repeat;
  background-position: 8px 9px;
  padding-left: 36px;
  padding-right: 30px;
  cursor: pointer;
  width: 192px;
  &:focus, &:hover {
    background-image: url('data:image/svg+xml;utf8,<svg width="14px" height="14px" viewBox="2 2 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="path-1" cx="8" cy="8" r="6"></circle><mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12" height="12" fill="white"><use xlink:href="%23path-1"></use></mask></defs><use id="Oval-32" stroke="%230056B8" mask="url(%23mask-2)" stroke-width="2" fill="%23FFFFFF" fill-rule="evenodd" xlink:href="%23path-1"></use><path d="M12,12 L15.5,15.5" id="Line" stroke="%230056B8" stroke-width="1" stroke-linecap="round" fill="none"></path></svg>');
  }
  &.minimize {
    border-color: transparent;
    width: 0px;
  }
}