@appbaseio/reactivesearch-vue/dist/es/Flex-5d11362e.js

A Vue UI components library for building search experiences

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

var _templateObject;
var leftLabel = "\n\tflex-direction: row;\n\talign-items: center;\n";
var rightLabel = "\n\tflex-direction: row-reverse;\n\talign-items: center;\n";
var topLabel = "\n\tflex-direction: column;\n";
var bottomLabel = "\n\tflex-direction: column-reverse;\n";
var border = function border(_ref) {
  var _ref$theme$colors = _ref.theme.colors,
    colors = _ref$theme$colors === void 0 ? {} : _ref$theme$colors;
  return "\n\tborder: 1px solid " + (colors.borderColor || '#ccc') + ";\n";
};
var Flex = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\tsvg.cancel-icon {\n\t\tcursor: pointer;\n\t\tfill: ", ";\n\t\tflex-basis: 30px;\n\n\t\t&:hover {\n\t\t\tfill: ", ";\n\t\t}\n\t}\n"])), function (props) {
  return props.inline ? 'inline-flex' : 'flex';
}, function (props) {
  return (props.labelPosition === 'left' || props.iconPosition === 'right') && leftLabel;
}, function (props) {
  return (props.labelPosition === 'right' || props.iconPosition === 'left') && rightLabel;
}, function (props) {
  return props.labelPosition === 'top' && topLabel;
}, function (props) {
  return props.labelPosition === 'bottom' && bottomLabel;
}, function (props) {
  return props.showBorder && border;
}, function (props) {
  return props.justifyContent && "\n\t\t\tjustify-content: " + props.justifyContent + ";\n\t\t";
}, function (props) {
  return props.alignItems && "\n\t\t\talign-items: " + props.alignItems + ";\n\t\t";
}, function (props) {
  return props.gap && "\n\t\t\tgap: " + props.gap + ";\n\t\t";
}, function (props) {
  return props.flex && "\n\t\t\tflex: " + props.flex + ";\n\t\t";
}, function (props) {
  return props.direction && "\n\t\t\tflex-direction: " + props.direction + ";\n\t\t";
}, function (props) {
  return props.basis && "\n\t\t\tflex-basis: " + props.basis + ";\n\t\t";
}, function (_ref2) {
  var _ref2$theme$colors = _ref2.theme.colors,
    colors = _ref2$theme$colors === void 0 ? {} : _ref2$theme$colors;
  return colors.borderColor || lighten(0.3, colors.textColor || '#fff');
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors ? theme.colors.textColor : '';
});

export { Flex as F };