@mopinion/deploy/assistant/styles.js

Deploy your Mopinion feedback forms with ease

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.applyStyles = applyStyles;
exports.css = exports.className = void 0;
exports.removeStyles = removeStyles;
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var textPrimary = 'rgba(0,0,0, .87)';
var textSecondary = 'rgba(0,0,0, .54)';
var divider = 'rgba(0, 0, 0, 0.12)';
var primary = '#2B81E5';
var action = 'rgba(0, 0, 0, 0.04)';
var spacing = function spacing() {
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }
  return args.map(function (x) {
    return "".concat(x * 8, "px");
  }).join(' ');
};
var rnd = function rnd() {
  return (Math.random() + 1).toString(36).substring(7);
};
var className = exports.className = function className(name) {
  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '.';
  return "".concat(prefix, "mop-debug-").concat(name);
};
var css = exports.css = "\n  ".concat(className('drawer'), " {\n    font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t\tposition: fixed;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tright: 0;\n\t\twidth: 500px;\n\t\tz-index: 9999999999;\n\t\tdisplay: flex;\n\t\ttransition: .225s transform;\n\t\ttransform: translateX(100%);\n  }\n\n\t").concat(className('drawer'), " * {\n\t\tfont-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t}\n\n\t").concat(className('drawer')).concat(className('open'), " {\n\t\ttransform: translateX(0);\n\t}\n\n\t").concat(className('toggle-button'), " {\n    position: absolute;\n    top: 20px;\n    left: 0;\n    transform: translateX(calc(-100% - 20px));\n    background-color: #fff;\n    padding: ").concat(spacing(1.5), ";\n    border-radius: 100px;\n    box-shadow: rgba(0, 0, 0, 0.05) -3px 3px 4px -4px, rgba(0, 0, 0, 0.03) 0px 0px 12px 2px, rgba(0, 0, 0, 0.05) 0px 3px 7px 3px;\n\t\ttransition: background-color, transform, visibillity, opacity 0.2s .3s;\n\t\tappearance: none;\n\t\tborder: 0;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: ").concat(spacing(1), ";\n\t\tcolor: ").concat(textSecondary, ";\n\t\tfont-weight: 600;\n\t\tfont-size: 14px;\n\t}\n\n\t").concat(className('toggle-button')).concat(className('shrink'), " {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t\tvisibillity: hidden;\n\t}\n\n\t").concat(className('toggle-button'), ":hover {\n\t\tbackground-color: #fafafa;\n\t}\n\n\t").concat(className('toggle-button'), " span {\n\t\tposition: absolute;\n    font-size: 7px;\n    background-color: ").concat(textSecondary, ";\n    border-radius: 20px;\n    color: rgba(255,255,255,.87);\n    padding: 1px 3px;\n    white-space: nowrap;\n    left: 50%;\n    bottom: -5px;\n    transform: translateX(-50%);\n    font-weight: 600;\n    display: block;\n\t}\n\n\t").concat(className('icon-button'), " {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 24px;\n\t\tcolor: ").concat(textSecondary, ";\n\t\ttransition: background-color .2s;\n\t\tborder-radius: 100%;\n\t\tcursor: pointer;\n\t}\n\n\t").concat(className('icon-button'), ":hover {\n\t\tbackground-color: ").concat(action, ";\n\t}\n\n\t").concat(className('inner'), " {\n\t\tbackground-color: #eee;\n\t\tcolor: ").concat(textPrimary, ";\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex: 1;\n\t}\n\t\n\t").concat(className('drawer')).concat(className('open'), " ").concat(className('inner'), " {\n\t\tbox-shadow: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;\n\t}\n\n  ").concat(className('header'), " {\n    background-color: #fff;\n\t\tpadding: ").concat(spacing(2, 2), ";\n\t\tborder-bottom: 1px solid ").concat(divider, ";\n    display: flex;\n\t\tjustify-content: space-between;\n    align-items: center;\n\t\tz-index: 10;\n  }\n\n  ").concat(className('logo'), " {\n    width: 24px;\n    height: 24px;\n  }\n\n\t").concat(className('icon'), " {\n\t\twidth: 24px;\n\t\tfill: currentColor;\n\t}\n\n  ").concat(className('title'), " {\n\t\tfont-size: 20px;\n\t\tfont-weight: 600;\n  }\n\n  ").concat(className('content'), " {\n\t\tflex-grow: 1;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tpadding: ").concat(spacing(3), ";\n\t}\n  \n  ").concat(className('subheader'), " {\n\t\tfont-size: 16px;\n\t\tmargin-bottom: ").concat(spacing(0.5), ";\n\t\tfont-weight: 600;\n\t\tcolor: ").concat(textSecondary, ";\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t").concat(className('rule'), " {\n\t\tpadding: ").concat(spacing(1.5), ";\n\t\tborder-radius: 4px;\n\t\tbackground-color: #fff;\n\t\tmargin-bottom: ").concat(spacing(1), ";\n\t\tborder: 1px solid ").concat(divider, ";\n\t\ttransition: background-color .2s;\n\t}\n\n\t").concat(className('rule'), ":not(").concat(className('open'), "):hover {\n\t\tbackground-color: #fafafa;\n\t}\n\n\t").concat(className('rule-header'), " {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t}\n\n\t").concat(className('right-content'), " {\n\t\tdisplay: flex;\n\t\tflex-wrap: nowrap;\n\t\talign-items: center;\n\t}\n\n\t").concat(className('triangle'), " {\n\t\twidth: 0px;\n\t\theight: 0px;\n\t\tborder-style: solid;\n\t\tborder-width: 0 6px 6px 6px;\n\t\tborder-color: transparent transparent rgba(0, 0, 0, .87) transparent;\n\t\ttransform: rotate(180deg);\n\t\tmargin-left: ").concat(spacing(1), "\n\t}\n\n\t").concat(className('rotate'), " {\n\t\ttransform: rotate(0);\n\t}\n\n\t").concat(className('form-name'), " {\n\t\tfont-weight: 500;\n\t}\n\n\t").concat(className('form-type'), " {\n\t\tcolor: ").concat(textSecondary, ";\n\t\tfont-weight: 600;\n\t\tfont-size: 13px;\n\t}\n\n\t").concat(className('conditions-container'), " {\n\t\tpadding: ").concat(spacing(2, 0), ";\n\t\tborder-top: 1px solid ").concat(divider, ";\n\t\tmargin-top: ").concat(spacing(2), ";\n\t}\n\n\t").concat(className('condition-container'), ":not(:first-of-type) {\n\t\tmargin-top: ").concat(spacing(3), "\n\t}\n\n\t").concat(className('condition-container'), ":last-of-type {\n\t\tpadding-bottom: 0;\n\t}\n\n\t").concat(className('condition-title-container'), " {\n\t\tmargin-bottom: ").concat(spacing(0.5), ";\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t").concat(className('condition-title'), " {\n\t\tfont-size: 13px;\n\t\tfont-weight: 600;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tflex-grow: 1;\n\t\tcolor: ").concat(textSecondary, ";\n\t}\n\n\t").concat(className('session'), " {\n\t\tcolor: ").concat(textSecondary, ";\n\t\tfont-weight: 400;\n\t\tfont-size: 11px\n\t}\n\t\n\t").concat(className('indicator-container'), " {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tfont-size: 12px;\n\t}\n\t").concat(className('indicator-container'), " svg {\n\t\twidth: 16px;\n\t}\n\n\t").concat(className('indicator-container')).concat(className('small'), " svg {\n\t\twidth: 12px;\n\t}\n\n\t").concat(className('condition-rule-container'), " {\n\t\tmargin: ").concat(spacing(1, 0), ";\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t").concat(className('condition-rule'), " {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tfont-size: 14px;\n\t}\n\n\t").concat(className('indicator-dot'), " {\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\tborder-radius: 100%;\n\t\tmargin-left: ").concat(spacing(1), ";\n\t\topacity: 0.7;\n\t}\n\n\t").concat(className('div-placement-container'), " {\n\t\tpadding-top: ").concat(spacing(1), ";\n\t\tborder-top: 1px solid ").concat(divider, ";\n\t}\n\n\t").concat(className('platform'), " {\n\t\tmargin-top: ").concat(spacing(2), ";\n\t\tpadding-top: ").concat(spacing(1), ";\n\t\tborder-top: 1px solid ").concat(divider, ";\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t}\n\n\n\t").concat(className('active'), " {\n\t\tcolor: green;\n\t}\n\n\t").concat(className('not-active'), " {\n\t\tcolor: red;\n\t}\n\n\t").concat(className('active-bg'), " {\n\t\tbackground-color: green;\n\t}\n\n\t").concat(className('not-active-bg'), " {\n\t\tbackground-color: red;\n\t}\n\n\t").concat(className('actions'), " {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tmargin-bottom: ").concat(spacing(2), ";\n\t\talign-items: center;\n\t}\n\n\t").concat(className('btn-with-icon'), " {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t}\n\t").concat(className('btn-with-icon'), " svg {\n\t\twidth: 20px;\n\t\tfill: ").concat(primary, ";\n\t\tmargin-left: ").concat(spacing(0.5), "\n\t}\n\n\t").concat(className('search-container'), " {\n\t\tposition: relative;\n\t}\n\t\n\t").concat(className('search-container'), " svg {\n    position: absolute;\n    left: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 24px;\n\t\tfill: ").concat(textSecondary, ";\n\t}\n\n\t").concat(className('search'), " {\n\t\tappearance: none;\n\t\tborder: 1px solid rgba(0, 0, 0, 0.23);\n\t\tborder-radius: 4px;\n\t\tpadding: 12px 12px 12px 36px;\n\t\tfont-size: 16px;\n\t\twidth: 220px;\n\t}\n\n\t").concat(className('ml-1'), " {\n\t\tmargin-left: ").concat(spacing(1), "\n\t}\t\n\t").concat(className('mr-1'), " {\n\t\tmargin-right: ").concat(spacing(1), "\n\t}\n\n\t").concat(className('inner'), " [data-tooltip] {\n\t\tposition: relative;\n\t}\n\n\t").concat(className('inner'), " [data-tooltip]:before {\n\t\tcontent: attr(data-tooltip);\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tfont-size: 11px;\n\t\tfont-weight: 600;\n\t\tpadding: 4px 6px;\n\t\tmin-width: 0px;\n\t\tbackground: rgba(0, 0, 0, 0.5);\n\t\tborder: 0;\n\t\tcolor: #fff;\n\t\tborder-radius: 4px;\n\t\tbox-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\ttransition: all 0.3s;\n\t\tmin-width: 200px;\n\t\ttransform: translateY(-100%);\n\t}\n\n\t").concat(className('inner'), " [data-tooltip]:hover:before {\n\t\topacity: 1;\n\t\tvisibility: visible;\n\t\ttransform: translateY(0);\n\t}\n\n\t").concat(className('invalid-reason'), " {\n\t\tfont-size: 11px;\n\t\tcolor: ").concat(textSecondary, ";\n\t}\n\n\t").concat(className('divider'), " {\n\t\twidth: 100%;\n\t\theight: 1px;\n\t\tbackground-color: ").concat(divider, ";\n\t}\n\n\t").concat(className('btn-link'), " {\n\t\tfont-size: 12px;\n\t\tcolor: ").concat(primary, ";\n\t\tappearance: none;\n\t\tborder: 0;\n\t\tbackground: none;\n\t\ttext-decoration: none;\n\t\ttext-transform: uppercase;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 600;\n\t\tcursor: pointer;\n\t\tpadding: ").concat(spacing(0.5, 1), ";\n\t\ttransition: background-color 0.2s;\n\t\twhite-space: nowrap;\n\t}\n\n\t").concat(className('btn-link'), "[disabled] {\n\t\topacity: .6;\n\t\tcursor: not-allowed;\n\t}\n\n\t").concat(className('btn-medium'), " {\n\t\tpadding: ").concat(spacing(0.75, 2), ";\n\t\tfont-size: 12px;\n\t}\n\n\t").concat(className('btn-link'), ":hover {\n\t\tbackground-color: ").concat(action, ";\n\t}\n\n\t").concat(className('chip'), " {\n\t\tborder: 1px solid ").concat(divider, ";\n\t\theight: ").concat(spacing(3), ";\n\t\tcolor: ").concat(textPrimary, ";\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tfont-size: 11px;\n\t\tborder-radius: 16px;\n\t\tpadding:0 8px;\n\t\twhite-space: nowrap;\n\t}\n\n\t").concat(className('chip')).concat(className('active'), " {\n\t\tcolor: ").concat(primary, ";\n\t\tborder-color: ").concat(primary, ";\n\t}\n\n\t").concat(className('space-between'), " {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t").concat(className('show-anyway'), " {\n\t\talign-self: end;\n\t}\n\n\t").concat(className('flexer'), " {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: ").concat(spacing(1), "\n\t}\n\n\t").concat(className('embedded-alert'), " {\n\t\tfont-size: 9px;\n\t\tcolor: ").concat(textSecondary, ";\n\t}\n\n\t").concat(className('flex'), " {\n\t\tdisplay: flex;\n\t}\n\n\t").concat(className('version-container'), " {\n\t\tfont-size: 12px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tposition: relative;\n\t}\n\n\t").concat(className('version-label'), " {\n\t\tmargin-right: ").concat(spacing(1), ";\n\t\tfont-weight: 400;\n\t\tcolor: ").concat(textSecondary, ";\n\t\ttransform: translateY(-14px);\n    font-size: 9px;\n\t\tposition: absolute;\n\t}\n\n\t").concat(className('select-container'), " {\n\t\tposition: relative;\n\t}\n\t").concat(className('select-container'), "::after {\n\t  content: '';\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tright: 10px;\n\t\ttransform: translateY(-25%);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tborder-left: 5px solid transparent;\n\t\tborder-right: 5px solid transparent;\n\t\tborder-top: 5px solid rgba(0, 0, 0, 0.54);\n\t\tpointer-events: none;\n\t}\n\n\t").concat(className('select-container'), " select {\n\t\twidth: 100%;\n\t\tpadding: 4px 32px 4px 0;\n\t\tfont-size: 12px;\n\t\tborder: none;\n\t\tborder-bottom: 1px solid rgba(0, 0, 0, 0.42);\n\t\tbackground-color: transparent;\n\t\toutline: none;\n\t\ttransition: border-bottom-color 0.2s, box-shadow 0.2s;\n\t\tappearance: none;\n\t\tcolor: ").concat(textPrimary, ";\n\t}\n\n\t").concat(className('select-container'), " select:hover,\n\t").concat(className('select-container'), " select:focus,\n\t").concat(className('select-container'), " select:active {\n\t\tborder-bottom-color: rgba(0, 0, 0, 0.87);\n\t\tbox-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.87);\n\t}\n");
function applyStyles(targetSheet, css) {
  targetSheet.replaceSync(css);
  if (document.adoptedStyleSheets.indexOf(targetSheet) === -1) {
    document.adoptedStyleSheets = [].concat(_toConsumableArray(document.adoptedStyleSheets), [targetSheet]);
  }
}
function removeStyles(targetSheet) {
  document.adoptedStyleSheets = document.adoptedStyleSheets.filter(function (sheet) {
    return sheet !== targetSheet;
  });
}
//# sourceMappingURL=styles.js.map