@makeen.io/material-ui-kit/distr/atoms/Search/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n  width: 500px;\n  height: 40px;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:focus-within {\n    background-color: ", ";\n    border-radius: 4px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n  }\n\n  .search-icon {\n    display: flex;\n    pointer-events: none;\n    align-items: center;\n    justify-content: center;\n    width: 50px;\n    color: #c5cee0;\n    height: 100%;\n    margin-left: 10px;\n  }\n\n  .MuiInputBase-root {\n    color: inherit;\n    position: relative;\n\n    .MuiInputBase-input {\n      font-size: 13px;\n      width: 450px;\n      padding: 5px 15px;\n      border-color: transparent;\n      box-shadow: none;\n      opacity: 1;\n    }\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import InputBase from "@material-ui/core/InputBase";
import SearchIcon from "@material-ui/icons/Search";
import styled from "styled-components";
var SearchWrapper = styled.div(_templateObject(),



function (props) {return props.filled ? "#edf1f7" : "transparent";},




function (props) {return props.filled ? "#f7f9fc" : "#f7f9fc";},



function (props) {return props.filled ? "#edf1f7" : "#f7f9fc";},



function (props) {return props.filled ? "#4a99f9" : "transparent";});



























export default (function (props) {return /*#__PURE__*/React.createElement(SearchWrapper, { filled: props.filled }, /*#__PURE__*/
  React.createElement("div", { className: "search-icon" }, /*#__PURE__*/
  React.createElement(SearchIcon, null)), /*#__PURE__*/
  React.createElement(InputBase, _extends({ placeholder: "Search\u2026", inputProps: { "aria-label": "search" } }, props)));});
//# sourceMappingURL=index.js.map