@appbaseio/reactivesearch-vue/dist/cjs/Flex-f7af0673.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 polished = require('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 = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._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 || polished.lighten(0.3, colors.textColor || '#fff');
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors ? theme.colors.textColor : '';
});

exports.Flex = Flex;