@appbaseio/reactivesearch-vue/dist/es/ListItem-beea18db.js

A Vue UI components library for building search experiences

import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { styled } from '@appbaseio/vue-emotion';
import { css } from '@emotion/css';
import { lighten } from 'polished';
import './Title-100fe896.js';

var _templateObject, _templateObject2, _templateObject3;
var container = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0;\n\tborder-radius: 0.25rem;\n\toverflow: hidden;\n"])));
var smallImage = "\n\twidth: 100px;\n\theight: 100px;\n";
var Image = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\twidth: 160px;\n\theight: 160px;\n\t", ";\n\tmargin: 0;\n\tbackground-size: contain;\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-image: ", ";\n"])), function (props) {
  return props.small ? smallImage : null;
}, function (props) {
  return "url(" + props.src + ")";
});
var ListItem = styled('a')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: auto;\n\toutline: none;\n\ttext-decoration: none;\n\tborder-radius: 0;\n\tbackground-color: ", ";\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: 0;\n\tpadding: 10px;\n\tborder-bottom: 1px solid ", ";\n\tcolor: ", ";\n\t", "; all 0.3s ease;\n\n\t&:hover, &:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:last-child {\n\t\tborder: 0;\n\t}\n\n\th2 {\n\t\twidth: 100%;\n\t\tline-height: 1.2rem;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tmargin: 0;\n\t\tpadding: 0 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\twidth: ", ";\n\t\tpadding-left: ", ";\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover, &:focus {\n\t\tbox-shadow: 0 0 0 0 rgba(0,0,0,0.10);\n\t}\n\n\t@media (max-width: 420px) {\n\t\tmin-width: 0;\n\t\tmargin: 0;\n\t\tborder-radius: 0;\n\t\tbox-shadow: none;\n\t\tborder: 1px solid #eee;\n\n\t\t&:hover, &:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n\n\t", "\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.colors.backgroundColor ? lighten(0.1, theme.colors.backgroundColor) : '#fff';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.backgroundColor ? lighten(0.3, theme.colors.backgroundColor) : lighten(0.68, theme.colors.textColor);
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.textColor;
}, function (props) {
  return props.href ? 'cursor: pointer' : null;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.backgroundColor ? lighten(0.2, theme.colors.backgroundColor) : '#fdfefd';
}, function (props) {
  if (props.image) {
    return props.small ? 'calc(100% - 100px)' : 'calc(100% - 160px)';
  }
  return '100%';
}, function (props) {
  return props.image ? '10px' : 0;
}, function (props) {
  if (props.isTreeListItem) {
    return 'border-bottom: none; width:max-content; cursor:pointer;     padding: 5px 12px;';
  }
  return '';
});

export { Image as I, ListItem as L, container as c };