@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
50 lines (49 loc) • 1.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledSearchBoxLeftWrapper = exports.StyledSearchBoxIcon = exports.StyledSearchBoxHintText = exports.StyledSearchBox = exports.StyledMotionSearchBoxBody = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const StyledSearchBox = exports.StyledSearchBox = _styledComponents.default.div``;
const StyledMotionSearchBoxBody = exports.StyledMotionSearchBoxBody = (0, _styledComponents.default)(_react.motion.div)`
background: ${({
theme
}) => theme['000']};
position: absolute;
z-index: 4;
display: flex;
flex-direction: column;
border: 1px solid rgba(160, 160, 160, 0.3);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top: none;
cursor: pointer;
width: ${({
$width
}) => $width}px;
max-height: 300px;
overflow-y: ${({
$height
}) => $height <= 300 ? 'hidden' : 'auto'};
box-shadow: 0 0 0 1px
rgba(${({
theme
}) => theme['009-rgb']}, 0.08) inset;
`;
const StyledSearchBoxIcon = exports.StyledSearchBoxIcon = _styledComponents.default.div`
cursor: pointer;
padding: 0 10px;
`;
const StyledSearchBoxLeftWrapper = exports.StyledSearchBoxLeftWrapper = _styledComponents.default.div`
display: flex;
align-items: center;
gap: 8px;
`;
const StyledSearchBoxHintText = exports.StyledSearchBoxHintText = _styledComponents.default.div`
text-align: center;
opacity: 0.8;
padding: 6px;
`;
//# sourceMappingURL=SearchBox.styles.js.map