@appbaseio/reactivesearch-vue/dist/cjs/Button-7aee17e3.js

A Vue UI components library for building search experiences

'use strict';

var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-1a877b17.js');
var helper = require('@appbaseio/reactivecore/lib/utils/helper');
var vueEmotion = require('@appbaseio/vue-emotion');
var css = require('@emotion/css');
var polished = require('polished');

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
var filters = function filters(_ref) {
  var borderColor = _ref.colors.borderColor;
  return css.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\tbutton {\n\t\tmargin: 2px 3px;\n\t\tpadding: 5px 8px;\n\t\tfont-size: 0.85rem;\n\t\tposition: relative;\n\n\t\tspan:first-child {\n\t\t\tmax-width: 260px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tmargin-right: 26px;\n\t\t}\n\n\t\tspan:last-child {\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 8px;\n\t\t\tposition: absolute;\n\t\t\talign-items: center;\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tpadding-left: 8px;\n\t\t\tmargin-left: 8px;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tspan:first-child {\n\t\t\t\ttext-decoration: line-through;\n\t\t\t}\n\t\t}\n\t}\n"])), borderColor || '#fff');
};
var pagination = css.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 10px -3px;\n\tmax-width: 100%;\n\ttext-align: center;\n\n\tbutton {\n\t\tmargin: 0 3px;\n\t}\n"])));
var toggleButtons = css.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\tbutton {\n\t\tmargin: 3px 3px;\n\t}\n"])));
var numberBoxContainer = css.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -5px;\n\tbutton {\n\t\tmargin: 5px;\n\t}\n\tspan {\n\t\tmargin: 0 5px;\n\t}\n"])));
var primary = function primary(_ref2) {
  var theme = _ref2.theme;
  return "\n\tbackground-color: " + theme.colors.primaryColor + ";\n\tcolor: " + theme.colors.primaryTextColor + ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + polished.darken(0.1, theme.colors.primaryColor) + ";\n\t}\n";
};
var large = function large() {
  return "\n\tmin-height: 40px;\n\tpadding: 10px 20px;\n";
};
var disabled = function disabled(_ref3) {
  var theme = _ref3.theme;
  return "\n\tbackground-color: " + (theme.colors.backgroundColor ? polished.lighten(0.1, theme.colors.backgroundColor) : '#fafafa') + ";\n\tcolor: #ccc;\n\tcursor: not-allowed;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + (theme.colors.backgroundColor ? polished.lighten(0.2, theme.colors.backgroundColor) : '#fafafa') + ";\n\t}\n";
};
var info = function info(_ref4) {
  var theme = _ref4.theme;
  return "\n\tborder: 1px solid " + theme.colors.primaryColor + ";\n\tcolor: " + theme.colors.primaryColor + ";\n\tbackground-color: " + theme.colors.primaryTextColor + ";\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + polished.darken(0.1, helper.hexToRGBA(theme.colors.primaryTextColor)) + ";\n\t}\n";
};
var Button = vueEmotion.styled('button')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 3px;\n\tborder: 1px solid transparent;\n\tmin-height: 30px;\n\tword-wrap: break-word;\n\tpadding: 5px 12px;\n\tline-height: 1.2rem;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t&.enter-btn {\n\t\tborder-top-left-radius: 0px;\n\t\tborder-bottom-left-radius: 0px;\n\t\theight: 100%;\n\t}\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors ? theme.colors.backgroundColor : '#eee';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors ? theme.colors.textColor : '';
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colors && theme.colors.backgroundColor ? polished.darken(0.1, theme.colors.backgroundColor) : '#ccc';
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.colors && theme.colors.primaryColor ? polished.rgba(theme.colors.primaryColor, 0.6) : 'unset';
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.colors && theme.colors.primaryColor ? "0 0 0 2px " + polished.rgba(theme.colors.primaryColor, 0.3) : '';
}, function (props) {
  return props.info ? info : null;
}, function (props) {
  return props.disabled ? disabled : null;
}, function (props) {
  return props.large && large;
}, function (props) {
  return props.primary ? primary : null;
});
var loadMoreContainer = css.css({
  margin: '5px 0',
  display: 'flex',
  justifyContent: 'center'
});

exports.Button = Button;
exports.filters = filters;
exports.loadMoreContainer = loadMoreContainer;
exports.pagination = pagination;
exports.toggleButtons = toggleButtons;