@procore/core-react/dist/Search/Search.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { Button } from '../Button';
import { getInputStyles } from '../Input/Input.styles';
import { spacing } from '../_styles/spacing';

// Search has the buttons embedded into the input, So we have to do some manual
// absolute positioning of the clear and search buttons and also adjust the
// padding of the input so that the input text does not run into the buttons.
// This used to be accomplished with IconLayout but that was a rarely used and
// messy abstraction which was also intended to be used with clickable Icons
// and not the new icon button style.

var inputHeight = 36;
var buttonSize = 24;
var buttonTop = (inputHeight - buttonSize) / 2; // vertically center the buttons

var searchRight = 6; // search icon sits 6px from the right edge

var clearRight = searchRight + buttonSize + spacing.xs; // clear icon shifted

var inputRight = clearRight + buttonSize + spacing.sm; // padding-right on the input to account for buttons

var legacyTypeahedInputRight = searchRight + buttonSize + spacing.sm; // padding-right on the input to account for legacy typeahead prop

export function getSearchInputStyles() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    $error = _ref.$error,
    $variant = _ref.$variant;
  return css(["", " -webkit-appearance:textfield;padding-left:", "px;&::-ms-clear,&::-ms-reveal{display:none;}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{display:none;}"], getInputStyles({
    $error: $error,
    $variant: $variant
  }), spacing.md);
}
export var StyledInput = /*#__PURE__*/styled.input.withConfig({
  displayName: "StyledInput",
  componentId: "core-12_44_0__sc-3j8khv-0"
})(["", ""], getSearchInputStyles);
var StyledButton = /*#__PURE__*/styled(Button).withConfig({
  displayName: "StyledButton",
  componentId: "core-12_44_0__sc-3j8khv-1"
})(["position:absolute;top:", "px;"], buttonTop);
export var StyledSearchButton = /*#__PURE__*/styled(StyledButton).withConfig({
  displayName: "StyledSearchButton",
  componentId: "core-12_44_0__sc-3j8khv-2"
})([""]);
export var StyledClearButton = /*#__PURE__*/styled(StyledButton).withConfig({
  displayName: "StyledClearButton",
  componentId: "core-12_44_0__sc-3j8khv-3"
})([""]);
export var StyledSearch = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSearch",
  componentId: "core-12_44_0__sc-3j8khv-4"
})(["position:relative;width:100%;", "{padding-right:", "px;}", "{right:", "px;}", "{right:", "px;}"], StyledInput, inputRight, StyledSearchButton, searchRight, StyledClearButton, clearRight);
//# sourceMappingURL=Search.styles.js.map