@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
61 lines (58 loc) • 4.87 kB
JavaScript
import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { hexToRGBA } from '@appbaseio/reactivecore/lib/utils/helper';
import { styled } from '@appbaseio/vue-emotion';
import { css } from '@emotion/css';
import { darken, rgba, lighten } from 'polished';
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
var filters = function filters(_ref) {
var borderColor = _ref.colors.borderColor;
return css(_templateObject || (_templateObject = _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(_templateObject2 || (_templateObject2 = _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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\tbutton {\n\t\tmargin: 3px 3px;\n\t}\n"])));
var numberBoxContainer = css(_templateObject4 || (_templateObject4 = _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: " + 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 ? 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 ? 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: " + darken(0.1, hexToRGBA(theme.colors.primaryTextColor)) + ";\n\t}\n";
};
var Button = styled('button')(_templateObject5 || (_templateObject5 = _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 ? darken(0.1, theme.colors.backgroundColor) : '#ccc';
}, function (_ref8) {
var theme = _ref8.theme;
return theme.colors && theme.colors.primaryColor ? rgba(theme.colors.primaryColor, 0.6) : 'unset';
}, function (_ref9) {
var theme = _ref9.theme;
return theme.colors && theme.colors.primaryColor ? "0 0 0 2px " + 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({
margin: '5px 0',
display: 'flex',
justifyContent: 'center'
});
export { Button as B, filters as f, loadMoreContainer as l, pagination as p, toggleButtons as t };