jobiqo-cl/lib/src/components/03-molecules/07-search/01-search-box/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index = require('../../../02-atoms/01-forms/01-button/index.js');
var index$1 = require('../../../02-atoms/01-forms/03-input/index.js');

const SearchBox = styled__default.div `
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${props => props.theme.searchBox.padding};
  background-color: ${props => props.theme.searchBox.background};
  box-shadow: ${props => props.theme.searchBox.boxShadow};
`;
const Form = styled__default.form `
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  max-width: ${props => props.theme.searchBox.form.maxWidth};
`;
const SearchButton = styled__default(index.default) `
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  cursor: pointer;
  background: ${props => props.theme.searchBox.button.background};
  border: ${props => props.theme.searchBox.button.border};
  color: ${props => props.theme.searchBox.button.color};
  width: ${props => props.theme.searchBox.button.width};
`;
const SearchInput = styled__default(index$1.Input) `
  height: ${props => props.theme.searchBox.input.height};
  width: ${props => props.theme.searchBox.input.widthMobile};
  border-color: ${props => props.theme.searchBox.input.borderColor};
  ${props => props.theme.mediaQueries.small} {
    width: calc(
      ${props => props.theme.searchBox.input.widthDesktop} -
        ${props => props.theme.searchBox.button.width}
    );
  }
`;

exports.Form = Form;
exports.SearchBox = SearchBox;
exports.SearchButton = SearchButton;
exports.SearchInput = SearchInput;