@appbaseio/reactivesearch-vue/dist/cjs/Card-abff695e.js

A Vue UI components library for building search experiences

'use strict';

var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-1a877b17.js');
var vueEmotion = require('@appbaseio/vue-emotion');
var css = require('@emotion/css');
var polished = require('polished');
require('./Title-d513ac26.js');

var _templateObject, _templateObject2, _templateObject3;
var container = css.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\tflex-wrap: wrap;\n\tmargin: 0 -8px;\n\n\t@media (max-width: 420px) {\n\t\tmargin: 0;\n\t}\n"])));
var Image = vueEmotion.styled('div')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: calc(100% + 20px);\n\theight: 220px;\n\tmargin: -10px -10px 0;\n\tbackground-color: ", ";\n\tbackground-size: contain;\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n"])), function (_ref) {
  var colors = _ref.theme.colors;
  return colors.backgroundColor || '#fcfcfc';
});
var Card = vueEmotion.styled('a')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: auto;\n\tflex-grow: 1;\n\toutline: none;\n\ttext-decoration: none;\n\tmin-width: 240px;\n\tmax-width: 250px;\n\tborder-radius: 0.25rem;\n\tbackground-color: ", ";\n\theight: 300px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tmargin: 8px;\n\tpadding: 10px;\n\toverflow: hidden;\n\tbox-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);\n\tcolor: ", ";\n\t", ";\n\ttransition: all 0.3s ease;\n\n\th2 {\n\t\twidth: 100%;\n\t\tfont-size: 0.9rem;\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: 10px 0 8px;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tarticle {\n\t\tflex-grow: 1;\n\t\tfont-size: 0.9rem;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbox-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);\n\t}\n\n\t@media (max-width: 420px) {\n\t\twidth: 50%;\n\t\tmin-width: 0;\n\t\theight: 210px;\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,\n\t\t&:focus {\n\t\t\tbox-shadow: 0;\n\t\t}\n\t}\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.backgroundColor ? polished.lighten(0.1, theme.colors.backgroundColor) : '#fff';
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.textColor;
}, function (props) {
  return props.href ? 'cursor: pointer' : null;
});

exports.Card = Card;
exports.Image = Image;
exports.container = container;