quicksnack 3.22.4 → 3.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -48,7 +48,7 @@ var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
|
48
48
|
var react_1 = __importDefault(require("react"));
|
|
49
49
|
var UiStateProvider_1 = require("../../UiStateProvider");
|
|
50
50
|
exports.SIDEBAR_COLLAPSED_WIDTH = 15;
|
|
51
|
-
exports.StyledSidebar = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n float: left;\n \n height: 100%;\n width: 100%; \n \n background-color: #243646;\n \n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n \n z-index: 900;\n \n display: ", "; \n pointer-events: auto;\n \n ", " \n"], ["\n float: left;\n \n height: 100%;\n width: 100%; \n \n background-color: #243646;\n \n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n \n z-index: 900;\n \n display: ", "; \n pointer-events: auto;\n \n ", " \n"])), function (props) { return props.isMobileMenuOpen ? 'block' : 'none'; }, (0, responsiveProps_1.mq)("laptop", (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: static; \n display: block;\n width: auto;\n min-width: ", ";\n box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);\n \n transition: transform .1s ease-out;\n transform: ", "; \n \n &
|
|
51
|
+
exports.StyledSidebar = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n float: left;\n \n height: 100%;\n width: 100%; \n \n background-color: #243646;\n \n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n \n z-index: 900;\n \n display: ", "; \n pointer-events: auto;\n \n ", " \n"], ["\n float: left;\n \n height: 100%;\n width: 100%; \n \n background-color: #243646;\n \n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n \n z-index: 900;\n \n display: ", "; \n pointer-events: auto;\n \n ", " \n"])), function (props) { return props.isMobileMenuOpen ? 'block' : 'none'; }, (0, responsiveProps_1.mq)("laptop", (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: static; \n display: block;\n width: auto;\n min-width: ", ";\n box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);\n \n transition: transform .1s ease-out;\n transform: ", "; \n \n & ul {\n opacity: ", ";\n } \n "], ["\n position: static; \n display: block;\n width: auto;\n min-width: ", ";\n box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);\n \n transition: transform .1s ease-out;\n transform: ", "; \n \n & ul {\n opacity: ", ";\n } \n "])), function (props) { var _a; return props.theme.spacing((_a = props.minWidth) !== null && _a !== void 0 ? _a : 75); }, function (props) { return props.isDesktopMenuOpen
|
|
52
52
|
? 'transform: translateX(0);'
|
|
53
53
|
: (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["translateX(calc(-100% + ", "));"], ["translateX(calc(-100% + ", "));"])), function (props) { return props.theme.spacing(exports.SIDEBAR_COLLAPSED_WIDTH); }); }, function (props) { return props.isDesktopMenuOpen ? '1' : '0'; })));
|
|
54
54
|
var SideBar = function (props) {
|
|
@@ -5,6 +5,8 @@ interface Props {
|
|
|
5
5
|
imageUrl: string;
|
|
6
6
|
panelProps: React.ComponentProps<typeof Panel>;
|
|
7
7
|
alert?: JSX.Element;
|
|
8
|
+
backgroundBaseColor?: string;
|
|
9
|
+
backgroundOpacity?: number;
|
|
8
10
|
}
|
|
9
11
|
export declare const FloatingPanelLayout: React.FC<React.PropsWithChildren<Props>>;
|
|
10
12
|
export {};
|
|
@@ -26,17 +26,19 @@ var Panel_1 = require("../../components/Panel/Panel");
|
|
|
26
26
|
var SlideInFromTop_1 = require("../../animation/SlideInFromTop/SlideInFromTop");
|
|
27
27
|
var constants_1 = require("../constants");
|
|
28
28
|
var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
29
|
-
var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n min-width: 100%;\n min-height: 100
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
29
|
+
var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n position: absolute;\n min-width: 100%;\n min-height: 100%; \n"], ["\n background-color: ", ";\n position: absolute;\n min-width: 100%;\n min-height: 100%; \n"])), function (props) { return props.baseColor || 'white'; });
|
|
30
|
+
var Background = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n \n opacity: ", " ;\n background: url(\"", "\");\n background-size: cover;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n \n opacity: ", " ;\n background: url(\"", "\");\n background-size: cover;\n"])), function (props) { var _a; return (_a = props.opacity) !== null && _a !== void 0 ? _a : 1; }, function (props) { return props.imageUrl; });
|
|
31
|
+
var StyledAnimation = (0, styled_components_1.default)(SlideInFromTop_1.SlideInFromTop)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n z-index: 10;\n margin: auto auto;\n"], ["\n z-index: 10;\n margin: auto auto;\n"])));
|
|
32
|
+
var StyledPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: 0 8px 8px 0 rgba(34,36,38,.15); \n min-width: 280px; \n"], ["\n box-shadow: 0 8px 8px 0 rgba(34,36,38,.15); \n min-width: 280px; \n"])));
|
|
33
|
+
var Logo = styled_components_1.default.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display:none;\n position: absolute;\n left: 0;\n top: ", ";\n ", "\n"], ["\n display:none;\n position: absolute;\n left: 0;\n top: ", ";\n ", "\n"])), function (props) { return props.theme.spacing(8); }, (0, responsiveProps_1.mq)("tablet", "display: block;"));
|
|
33
34
|
var FloatingPanelLayout = function (_a) {
|
|
34
|
-
var panelProps = _a.panelProps, imageUrl = _a.imageUrl, alert = _a.alert, logoUrl = _a.logoUrl;
|
|
35
|
-
return (react_1.default.createElement(Wrapper, { display: "flex", alignItems: "center",
|
|
35
|
+
var panelProps = _a.panelProps, imageUrl = _a.imageUrl, alert = _a.alert, logoUrl = _a.logoUrl, backgroundBaseColor = _a.backgroundBaseColor, backgroundOpacity = _a.backgroundOpacity;
|
|
36
|
+
return (react_1.default.createElement(Wrapper, { display: "flex", alignItems: "center", baseColor: backgroundBaseColor },
|
|
37
|
+
react_1.default.createElement(Background, { imageUrl: imageUrl, opacity: backgroundOpacity }),
|
|
36
38
|
logoUrl && (react_1.default.createElement(Logo, { src: logoUrl, alt: "Logo" })),
|
|
37
39
|
react_1.default.createElement(StyledAnimation, null,
|
|
38
40
|
alert && (react_1.default.createElement(Box_1.Box, { pb: constants_1.VerticalRhythmLaptop }, alert)),
|
|
39
41
|
react_1.default.createElement(StyledPanel, __assign({}, panelProps)))));
|
|
40
42
|
};
|
|
41
43
|
exports.FloatingPanelLayout = FloatingPanelLayout;
|
|
42
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
44
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|