krl-alfred 1.67.1 → 1.67.2
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.
- package/dist/components/Accordion/Accordion.styled.js +1 -1
- package/dist/components/Banner/layouts/layout2/layout2.styled.js +1 -1
- package/dist/components/Banner/layouts/layout4/index.js +2 -2
- package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -1
- package/dist/components/Button/Button.js +2 -2
- package/dist/components/Button/Button.styled.js +5 -4
- package/dist/components/Carousel/Carousel.styled.js +1 -1
- package/dist/components/Icon/Search.js +1 -1
- package/dist/components/ProductCard/ProductCard.styled.js +2 -2
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/Tooltip/Tooltip.js +3 -2
- package/dist/components/Tooltip/Tooltip.styled.js +37 -3
- package/dist/components/Tooltip/props.js +2 -0
- package/dist/components/Tooltip/stories/Tooltip.stories.js +4 -1
- package/dist/components/ValueProposition/layouts/square/Square.styled.js +2 -1
- package/dist/components/ValueProposition/layouts/squareSm/SquareSm.styled.js +1 -1
- package/dist/constants/devices.js +6 -0
- package/package.json +1 -1
|
@@ -14,6 +14,6 @@ exports.AccordionTitle = styled_components_1.default.h1(templateObject_2 || (tem
|
|
|
14
14
|
exports.Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
15
15
|
exports.Item = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:not(:nth-child(1)) {\n margin-top: 1.5rem;\n }\n"], ["\n &:not(:nth-child(1)) {\n margin-top: 1.5rem;\n }\n"])));
|
|
16
16
|
exports.ItemTitle = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"])));
|
|
17
|
-
exports.ItemContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n transition: all .3s ease;\n overflow: hidden;\n position: relative;\n > div{\n padding: 1rem 0 0;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n }\n"], ["\n transition: all .3s ease;\n overflow: hidden;\n position: relative;\n > div{\n padding: 1rem 0 0;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n }\n"])));
|
|
17
|
+
exports.ItemContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n transition: all .3s ease;\n overflow: hidden;\n position: relative;\n > div{\n padding: 1rem 2rem 0 0;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n }\n"], ["\n transition: all .3s ease;\n overflow: hidden;\n position: relative;\n > div{\n padding: 1rem 2rem 0 0;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n }\n"])));
|
|
18
18
|
exports.Footer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n box-sizing: border-box;\n display: block;\n margin-top: 1.5rem!important;\n"], ["\n box-sizing: border-box;\n display: block;\n margin-top: 1.5rem!important;\n"])));
|
|
19
19
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
|
-
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .item {\n background-color: var(--primary-opacity-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n padding: 0 5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n\n @media only screen and ", " {\n padding: 1.5rem 1rem;\n margin-top: 3rem;\n display: flex;\n justify-content: center;\n }\n\n .text {\n flex: 1 0;\n max-width: 349px;\n @media only screen and ", " {\n max-width: initial;\n }\n\n .title {\n margin-bottom: 1rem;\n display: block;\n }\n\n .description {\n margin: 0;\n display: block;\n }\n }\n\n\n .img {\n margin-top: -
|
|
13
|
+
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .item {\n background-color: var(--primary-opacity-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n padding: 0 5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n\n @media only screen and ", " {\n padding: 1.5rem 1rem;\n margin-top: 3rem;\n display: flex;\n justify-content: center;\n }\n\n .text {\n flex: 1 0;\n max-width: 349px;\n @media only screen and ", " {\n max-width: initial;\n }\n\n .title {\n margin-bottom: 1rem;\n display: block;\n }\n\n .description {\n margin: 0;\n display: block;\n }\n }\n\n\n .img {\n margin-top: -21px;\n\n > * {\n display: block !important;\n }\n\n @media only screen and ", " {\n width: 100%;\n margin-bottom: 24px;\n }\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n }\n\n\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .item {\n background-color: var(--primary-opacity-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n padding: 0 5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n\n @media only screen and ", " {\n padding: 1.5rem 1rem;\n margin-top: 3rem;\n display: flex;\n justify-content: center;\n }\n\n .text {\n flex: 1 0;\n max-width: 349px;\n @media only screen and ", " {\n max-width: initial;\n }\n\n .title {\n margin-bottom: 1rem;\n display: block;\n }\n\n .description {\n margin: 0;\n display: block;\n }\n }\n\n\n .img {\n margin-top: -21px;\n\n > * {\n display: block !important;\n }\n\n @media only screen and ", " {\n width: 100%;\n margin-bottom: 24px;\n }\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -8,7 +8,7 @@ var layout4_styled_1 = require("./layout4.styled");
|
|
|
8
8
|
var classnames_1 = __importDefault(require("classnames"));
|
|
9
9
|
var Button_1 = __importDefault(require("../../../Button"));
|
|
10
10
|
var Index = function (props) {
|
|
11
|
-
var data = props.data;
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)(layout4_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(data === null || data === void 0 ? void 0 : data.img) && (0, jsx_runtime_1.jsx)("div", { className: "img", children: data === null || data === void 0 ? void 0 : data.img }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', 'headline-extra-bold-32-39'), children: data === null || data === void 0 ? void 0 : data.title }), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', 'title-regular-16-19'), children: data === null || data === void 0 ? void 0 : data.description }), (data === null || data === void 0 ? void 0 : data.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: data === null || data === void 0 ? void 0 : data.onClick, children: data === null || data === void 0 ? void 0 : data.buttonText })] })] }) }));
|
|
11
|
+
var data = props.data, isMobile = props.isMobile;
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)(layout4_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(data === null || data === void 0 ? void 0 : data.img) && (0, jsx_runtime_1.jsx)("div", { className: "img", children: data === null || data === void 0 ? void 0 : data.img }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', 'headline-extra-bold-32-39'), children: data === null || data === void 0 ? void 0 : data.title }), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', isMobile ? 'body-regular-14-17' : 'title-regular-16-19'), children: data === null || data === void 0 ? void 0 : data.description }), (data === null || data === void 0 ? void 0 : data.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: data === null || data === void 0 ? void 0 : data.onClick, children: data === null || data === void 0 ? void 0 : data.buttonText })] })] }) }));
|
|
13
13
|
};
|
|
14
14
|
exports.default = Index;
|
|
@@ -58,7 +58,7 @@ var Breadcrumbs = function (props) {
|
|
|
58
58
|
};
|
|
59
59
|
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
|
|
60
60
|
var _a;
|
|
61
|
-
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft", width: "16px", height: "16px" }) }), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] }, key));
|
|
62
62
|
}) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
|
|
63
63
|
};
|
|
64
64
|
exports.default = Breadcrumbs;
|
|
@@ -24,9 +24,9 @@ var Children = function (props) {
|
|
|
24
24
|
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "children", children: children }), icon && (0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "16px", height: "16px" }) }))] });
|
|
25
25
|
};
|
|
26
26
|
var Button = function (props) {
|
|
27
|
-
var _a;
|
|
27
|
+
var _a, _b, _c, _d, _e, _f;
|
|
28
28
|
var isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children;
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)((_a = {}, _a["loading"] = isLoading, _a), (size === 'xsmall'
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)((_a = {}, _a["loading"] = isLoading, _a), (_b = {}, _b["body-bold-13-16"] = size === 'xsmall' && variant !== 'ghost', _b), (_c = {}, _c["caption-bold-12-15"] = size === 'xsmall' && variant === 'ghost', _c), (_d = {}, _d["body-bold-13-16"] = size === 'small', _d), (_e = {}, _e["body-bold-14-17"] = size === 'big', _e), (_f = {}, _f["body-bold-14-17"] = size === 'medium', _f)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, children: isLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
|
|
30
30
|
(0, jsx_runtime_1.jsx)(Children, { icon: icon, children: children }) }));
|
|
31
31
|
};
|
|
32
32
|
exports.default = Button;
|
|
@@ -29,10 +29,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
30
|
exports.IconStyled = exports.ButtonStyled = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
32
|
+
var devices_1 = require("../../constants/devices");
|
|
33
|
+
var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path, rect{\n stroke : white;\n }\n circle{\n fill : white; \n ~ path{\n stroke : var(--primary);\n }\n } \n }\n\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n } \n }\n }\n"], ["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path, rect{\n stroke : white;\n }\n circle{\n fill : white; \n ~ path{\n stroke : var(--primary);\n }\n } \n }\n\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n } \n }\n }\n"])), devices_1.devices.mdUp);
|
|
34
|
+
var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
35
|
+
var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n \n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n \n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
|
+
var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n \n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n \n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
37
|
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
|
|
37
38
|
switch (props.variant) {
|
|
38
39
|
case 'primary':
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.CarouselStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"], ["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
13
|
+
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n @media only screen and ", " {\n max-width: 72px;\n }\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"], ["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n @media only screen and ", " {\n max-width: 72px;\n }\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgSearch = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgSearch = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsxs)("g", { id: "Search", children: [(0, jsx_runtime_1.jsx)("circle", { id: "Ellipse_739", cx: 7.33203, cy: 7.33398, r: 6, stroke: "#9763F6", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Line_181", d: "M12 12L14.6667 14.6667", stroke: "#9763F6", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))); };
|
|
40
40
|
exports.default = SvgSearch;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"])), function (props) { return props.disabled ? "\n
|
|
13
|
+
exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
14
|
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: ", ";\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .img{\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: ", ";\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{ \n padding: ", ";\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: ", ";\n grid-template-columns: ", ";\n .discountRate{\n margin-right: 0.5rem;\n width: ", ";\n height: ", ";\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\n \n }\n }\n }\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: ", ";\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .img{\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: ", ";\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{ \n padding: ", ";\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: ", ";\n grid-template-columns: ", ";\n .discountRate{\n margin-right: 0.5rem;\n width: ", ";\n height: ", ";\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\n \n }\n }\n }\n"])), function (props) { return props.isMobile ? '1.5rem' : '1rem'; }, function (props) { return props.isMobile ? '215px' : '150px'; }, function (props) { return props.isMobile ? '1.5rem 0 0.5rem 0' : '1rem 0 0.5rem 0'; }, function (props) { return props.isMobile ? '44px' : '38px'; }, function (props) { return props.isMobile ? '1.5rem' : '1.5rem'; }, function (props) { return props.isMobile ? '37px' : '34px'; }, function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.isMobile ? '48px' : '36px'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.isMobile ? '65px' : '48px'; }, function (props) { return props.isMobile ? '48px' : '36px'; });
|
|
15
|
-
exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n .img{\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px; \n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border:0;\n }\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n
|
|
15
|
+
exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n .img{\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px; \n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border:0;\n }\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n .description{\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{ \n \n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n .img{\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px; \n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border:0;\n }\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n .description{\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{ \n \n }\n }\n }\n"])), devices_1.devices.sm);
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.LoadingStyled = exports.SearchBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n }\n }\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n border-radius: 8px;\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height:
|
|
13
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n }\n }\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n border-radius: 8px;\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 360px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: calc(100% - 2px);\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"], ["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n }\n }\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n border-radius: 8px;\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 360px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: calc(100% - 2px);\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"])), devices_1.devices.xl, devices_1.devices.xl, devices_1.devices.xl);
|
|
14
14
|
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2;
|
|
@@ -8,15 +8,16 @@ var react_1 = require("react");
|
|
|
8
8
|
var Tooltip_styled_1 = require("./Tooltip.styled");
|
|
9
9
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
10
10
|
var Tooltip = function (props) {
|
|
11
|
-
var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth;
|
|
11
|
+
var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth, position = props.position;
|
|
12
12
|
var _a = (0, react_1.useState)(isOpen), isOpenTooltip = _a[0], setIsOpenTooltip = _a[1];
|
|
13
13
|
(0, react_1.useEffect)(function () {
|
|
14
14
|
setIsOpenTooltip(isOpen);
|
|
15
15
|
}, [isOpen]);
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
|
|
17
17
|
};
|
|
18
18
|
Tooltip.defaultProps = {
|
|
19
19
|
iconWidth: "16px",
|
|
20
20
|
iconHeight: "16px",
|
|
21
|
+
position: "bottomCenter",
|
|
21
22
|
};
|
|
22
23
|
exports.default = Tooltip;
|
|
@@ -11,7 +11,41 @@ exports.Popup = exports.Title = exports.Selector = exports.TooltipStyled = void
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.hasClickAction && "\n &:hover {\n > div {\n opacity: 1;\n }\n }\n "; });
|
|
14
|
-
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n svg {\n display: block;\n path {\n stroke: var(--primary);\n }\n }\n"], ["\n display: block;\n cursor: ", ";\n svg {\n display: block;\n path {\n stroke: var(--primary);\n }\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
|
|
15
|
-
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
16
|
-
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n
|
|
14
|
+
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"], ["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
|
|
15
|
+
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin-bottom: 0.5rem;\n"], ["\n display: block;\n margin-bottom: 0.5rem;\n"])));
|
|
16
|
+
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -0.5rem;\n &:before {\n left: auto !important;\n transform: none !important;\n right: 0.5rem !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n transform: rotate(45deg);\n }\n"], ["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -0.5rem;\n &:before {\n left: auto !important;\n transform: none !important;\n right: 0.5rem !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n transform: rotate(45deg);\n }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
|
|
17
|
+
switch (props.position) {
|
|
18
|
+
case 'bottomRight':
|
|
19
|
+
return "\n right: -0.5rem;\n top: calc(100% + 10px);\n ";
|
|
20
|
+
case 'bottomCenter':
|
|
21
|
+
return "\n left: 50%;\n top: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
22
|
+
case 'bottomLeft':
|
|
23
|
+
return "\n left: 0;\n top: calc(100% + 10px);\n ";
|
|
24
|
+
case 'topRight':
|
|
25
|
+
return "\n right: -0.5rem;\n bottom: calc(100% + 10px);\n ";
|
|
26
|
+
case 'topCenter':
|
|
27
|
+
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
28
|
+
case 'topLeft':
|
|
29
|
+
return "\n left: 0;\n bottom: calc(100% + 10px);\n ";
|
|
30
|
+
default:
|
|
31
|
+
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
32
|
+
}
|
|
33
|
+
}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) {
|
|
34
|
+
switch (props.position) {
|
|
35
|
+
case 'bottomRight':
|
|
36
|
+
return "\n bottom: calc(100% - 7px);\n right: 10px;\n ";
|
|
37
|
+
case 'bottomCenter':
|
|
38
|
+
return "\n bottom: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
39
|
+
case 'bottomLeft':
|
|
40
|
+
return "\n bottom: calc(100% - 7px);\n left: 10px;\n ";
|
|
41
|
+
case 'topRight':
|
|
42
|
+
return "\n top: calc(100% - 7px);\n right: 10px;\n ";
|
|
43
|
+
case 'topCenter':
|
|
44
|
+
return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
45
|
+
case 'topLeft':
|
|
46
|
+
return "\n top: calc(100% - 7px);\n left: 10px;\n ";
|
|
47
|
+
default:
|
|
48
|
+
return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
49
|
+
}
|
|
50
|
+
});
|
|
17
51
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -17,11 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
20
|
+
var props_1 = require("../props");
|
|
20
21
|
exports.default = {
|
|
21
22
|
title: 'Components/Tooltip',
|
|
22
23
|
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "5rem 0 0 11rem", display: "inline-block" }, children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({}, props)) }); },
|
|
23
24
|
tags: ['autodocs'],
|
|
24
|
-
argTypes: {
|
|
25
|
+
argTypes: {
|
|
26
|
+
position: { control: 'select', options: props_1.positions },
|
|
27
|
+
}
|
|
25
28
|
};
|
|
26
29
|
exports.Default = {
|
|
27
30
|
args: {
|
|
@@ -9,10 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.SquareDivider = exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.SquareStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var devices_1 = require("../../../../constants/devices");
|
|
12
13
|
exports.SquareStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 250px;\n color: var(--dark);\n text-align: center;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n"], ["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 250px;\n color: var(--dark);\n text-align: center;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n"])));
|
|
13
14
|
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1.5rem;\n"], ["\n margin-top: 1.5rem;\n"])));
|
|
14
15
|
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n min-height: 38px;\n"], ["\n display: block;\n min-height: 38px;\n"])));
|
|
15
16
|
exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n min-height: 76px;\n"], ["\n margin: 1rem 0 0 0;\n min-height: 76px;\n"])));
|
|
16
17
|
exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n text-align: center;\n > *{\n display: block !important;\n }\n"], ["\n display: block;\n text-align: center;\n > *{\n display: block !important;\n }\n"])));
|
|
17
|
-
exports.SquareDivider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n"])));
|
|
18
|
+
exports.SquareDivider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n @media only screen and ", " {\n left: calc(100% - 30px);\n }\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n @media only screen and ", " {\n left: calc(100% - 30px);\n }\n"])), devices_1.devices.xl);
|
|
18
19
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -13,5 +13,5 @@ var devices_1 = require("../../../../constants/devices");
|
|
|
13
13
|
exports.SquareSmStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n //max-width: 216px;\n aspect-ratio: 1/1;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n cursor: pointer;\n @media only screen and ", " {\n padding: 1rem;\n }\n ", "\n"], ["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n //max-width: 216px;\n aspect-ratio: 1/1;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n cursor: pointer;\n @media only screen and ", " {\n padding: 1rem;\n }\n ", "\n"])), devices_1.devices.md, function (props) { return props.show && "\n opacity: 1;\n user-select: initial;\n pointer-events: initial;\n transform: scale(1);\n "; });
|
|
14
14
|
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1rem;\n"], ["\n margin-top: 1rem;\n"])));
|
|
15
15
|
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
16
|
-
exports.ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n > *{\n display:
|
|
16
|
+
exports.ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n > *{\n display: block !important;\n }\n"], ["\n display: block;\n > *{\n display: block !important;\n }\n"])));
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -16,4 +16,10 @@ exports.devices = {
|
|
|
16
16
|
lg: "(max-width: ".concat(breakpoints["lg"], ")"),
|
|
17
17
|
xl: "(max-width: ".concat(breakpoints["xl"], ")"),
|
|
18
18
|
"2xl": "(max-width: ".concat(breakpoints["2xl"], ")"),
|
|
19
|
+
xsUp: "(min-width: ".concat(breakpoints["xs"], ")"),
|
|
20
|
+
smUp: "(min-width: ".concat(breakpoints["sm"], ")"),
|
|
21
|
+
mdUp: "(min-width: ".concat(breakpoints["md"], ")"),
|
|
22
|
+
lgUp: "(min-width: ".concat(breakpoints["lg"], ")"),
|
|
23
|
+
xlUp: "(min-width: ".concat(breakpoints["xl"], ")"),
|
|
24
|
+
"2xlUp": "(min-width: ".concat(breakpoints["2xl"], ")"),
|
|
19
25
|
};
|