@helpscout/artboard
Version:
A tool kit for React UI development and design
95 lines • 7.18 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var fancy_1 = require("@helpscout/fancy");
var Base_1 = require("../UI/Base");
var utils_1 = require("../utils");
exports.config = {
backgroundColor: '#f2f2f2',
backgroundColorDark: '#1d1a1d',
color: '#000',
colorDark: '#fff',
};
exports.ArtboardWrapperUI = fancy_1.default('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n position: fixed;\n right: 0;\n transition: color 200ms linear, background-color 200ms linear;\n top: 0;\n user-select: none;\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n position: fixed;\n right: 0;\n transition: color 200ms linear, background-color 200ms linear;\n top: 0;\n user-select: none;\n\n ",
";\n\n ",
";\n\n ",
";\n"])), exports.config.backgroundColor, function (_a) {
var theme = _a.theme;
return theme.darkMode &&
"\n background-color: " + exports.config.backgroundColorDark + ";\n ";
}, function (_a) {
var isZooming = _a.isZooming;
if (isZooming === 'in') {
return 'cursor: zoom-in;';
}
if (isZooming === 'out') {
return 'cursor: zoom-out;';
}
return '';
}, function (_a) {
var isMoving = _a.isMoving;
if (isMoving === 'start') {
return 'cursor: grab;';
}
if (isMoving === 'dragging') {
return 'cursor: grabbing;';
}
return '';
});
exports.ArtboardUI = fancy_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: white;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2),\n 0 12px 40px rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n transition: background 200ms linear, transform 200ms ease;\n will-change: transform;\n\n ", ";\n\n ", ";\n"], ["\n background: white;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2),\n 0 12px 40px rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n transition: background 200ms linear, transform 200ms ease;\n will-change: transform;\n\n ",
";\n\n ",
";\n"])), function (_a) {
var theme = _a.theme;
return theme.darkMode &&
"\n background-color: black;\n ";
}, function (_a) {
var isPerformingAction = _a.isPerformingAction;
return isPerformingAction &&
"\n pointer-events: none;\n user-select: none;\n\n * {\n pointer-events: none !important;\n user-select: none !important;\n }\n ";
});
exports.ContentUI = fancy_1.default('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n min-width: 0;\n min-height: 0;\n width: 100%;\n height: 100%;\n\n .", " {\n display: flex;\n min-width: 0;\n min-height: 0;\n width: 100%;\n height: 100%;\n\n ", " ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n min-width: 0;\n min-height: 0;\n width: 100%;\n height: 100%;\n\n .", " {\n display: flex;\n min-width: 0;\n min-height: 0;\n width: 100%;\n height: 100%;\n\n ",
" ",
";\n }\n"])), utils_1.cx('Resizer'), function (_a) {
var alignHorizontally = _a.alignHorizontally;
var justifyContent = 'center';
if (alignHorizontally === 'left') {
justifyContent = 'flex-start';
}
if (alignHorizontally === 'right') {
justifyContent = 'flex-end';
}
return "justify-content: " + justifyContent + ";";
}, function (_a) {
var alignVertically = _a.alignVertically;
var alignItems = 'center';
if (alignVertically === 'left') {
alignItems = 'flex-start';
}
if (alignVertically === 'right') {
alignItems = 'flex-end';
}
return "align-items: " + alignItems + ";";
});
exports.ArtboardContentUI = fancy_1.default('div')(function (props) { return ({
boxSizing: 'border-box',
padding: props.padding,
}); });
exports.ArtboardBodyUI = fancy_1.default('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n"], ["\n box-sizing: border-box;\n position: relative;\n"])));
exports.GenericToolBarUI = fancy_1.default(Base_1.default)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n pointer-events: none;\n transform: translateZ(0);\n width: 100%;\n z-index: 2147483647;\n\n ", ";\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n pointer-events: none;\n transform: translateZ(0);\n width: 100%;\n z-index: 2147483647;\n\n ",
";\n"])), exports.config.color, function (_a) {
var theme = _a.theme;
return theme.darkMode &&
"\n color: " + exports.config.colorDark + ";\n ";
});
exports.InterfaceWrapperUI = fancy_1.default('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: static;\n width: 100%;\n"], ["\n position: static;\n width: 100%;\n"])));
exports.ZoomWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n bottom: 40px;\n"], ["\n bottom: 40px;\n"])));
exports.KeyboardHintsWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n z-index: 2147483637;\n bottom: 10px;\n"], ["\n z-index: 2147483637;\n bottom: 10px;\n"])));
exports.ToolbarWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n top: 20px;\n"], ["\n top: 20px;\n"])));
exports.ToolbarCornerUI = fancy_1.default(Base_1.default)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n justify-content: center;\n position: absolute;\n"], ["\n align-items: flex-start;\n display: flex;\n justify-content: center;\n position: absolute;\n"])));
exports.ToolbarLeftUI = fancy_1.default(exports.ToolbarCornerUI)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n left: 10px;\n"], ["\n left: 10px;\n"])));
exports.ToolbarRightUI = fancy_1.default(exports.ToolbarCornerUI)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n right: 10px;\n"], ["\n right: 10px;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
//# sourceMappingURL=Artboard.css.js.map