krl-alfred 1.81.11 → 1.81.13
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.
|
@@ -98,6 +98,6 @@ var Input = function (_a) {
|
|
|
98
98
|
} }) })) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
|
|
99
99
|
onChange(e);
|
|
100
100
|
setInputValue(e.currentTarget.value);
|
|
101
|
-
}, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
|
|
101
|
+
}, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
|
|
102
102
|
};
|
|
103
103
|
exports.default = Input;
|
|
@@ -9,6 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover {\n ~ .text {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n }\n\n .text {\n padding-right: 0.5rem;\n\n a {\n &:hover {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font: var(--body-medium-13-16);\n\n .productCardDeliveryDanger {\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n white-space: nowrap;\n }\n\n .period {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font: var(--caption-semi-bold-11-13);\n\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font: var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n\n small {\n font: var(--caption-bold-12-15);\n }\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n .actions {\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n\n .quantity {\n color: ", ";\n font: var(--body-extra-bold-13-16);\n\n > div {\n margin: 0 auto;\n }\n }\n }\n }\n\n .insurance {\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n\n .insuranceImg {\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .insuranceContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n &:hover{\n button{\n background-color: var(--primary);\n color: white;\n }\n }\n .text {\n display: block;\n font: var(--caption-semi-bold-12-15);\n\n .price {\n display: block;\n margin: 0;\n font: var(--caption-extra-bold-12-15);\n\n b {\n span {\n font-weight: 400;\n }\n }\n\n .quantity {\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n\n .actions {\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover {\n ~ .text {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n }\n\n .text {\n padding-right: 0.5rem;\n\n a {\n &:hover {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font: var(--body-medium-13-16);\n\n .productCardDeliveryDanger {\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n white-space: nowrap;\n }\n\n .period {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font: var(--caption-semi-bold-11-13);\n\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font: var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n\n small {\n font: var(--caption-bold-12-15);\n }\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n .actions {\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n\n .quantity {\n color: ", ";\n font: var(--body-extra-bold-13-16);\n\n > div {\n margin: 0 auto;\n }\n }\n }\n }\n\n .insurance {\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n\n .insuranceImg {\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .insuranceContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n &:hover{\n button{\n background-color: var(--primary);\n color: white;\n }\n }\n .text {\n display: block;\n font: var(--caption-semi-bold-12-15);\n\n .price {\n display: block;\n margin: 0;\n font: var(--caption-extra-bold-12-15);\n\n b {\n span {\n font-weight: 400;\n }\n }\n\n .quantity {\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n\n .actions {\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
|
|
13
|
-
exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color: var(--primary);\n\n ", "\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled {\n cursor: no-drop;\n }\n\n .popup {\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font: var(--caption-semi-bold-12-15);\n\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n"], ["\n border: 0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color: var(--primary);\n\n ", "\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled {\n cursor: no-drop;\n }\n\n .popup {\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font: var(--caption-semi-bold-12-15);\n\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n"])), function (props) { return props.$hasShadow ? "\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n " : ""; });
|
|
12
|
+
var devices_1 = require("../../constants/devices");
|
|
13
|
+
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover {\n ~ .text {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n }\n\n .text {\n padding-right: 0.5rem;\n\n a {\n &:hover {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font: var(--body-medium-13-16);\n\n .productCardDeliveryDanger {\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n white-space: nowrap;\n }\n\n .period {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font: var(--caption-semi-bold-11-13);\n\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font: var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n\n small {\n font: var(--caption-bold-12-15);\n }\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n .actions {\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n\n .quantity {\n color: ", ";\n font: var(--body-extra-bold-13-16);\n\n > div {\n margin: 0 auto;\n }\n }\n }\n }\n\n .insurance {\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n\n .insuranceImg {\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .insuranceContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media only screen and ", " {\n &:hover {\n button{\n background-color: var(--primary);\n color: white;\n }\n }\n }\n\n &:active {\n button {\n color: white;\n background-color: var(--primary);\n }\n }\n .text {\n display: block;\n font: var(--caption-semi-bold-12-15);\n\n .price {\n display: block;\n margin: 0;\n font: var(--caption-extra-bold-12-15);\n\n b {\n span {\n font-weight: 400;\n }\n }\n\n .quantity {\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n\n .actions {\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n\n &:hover {\n ~ .text {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n }\n\n .text {\n padding-right: 0.5rem;\n\n a {\n &:hover {\n .productCardTitle {\n color: var(--primary-hover);\n }\n }\n }\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font: var(--body-medium-13-16);\n\n .productCardDeliveryDanger {\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n white-space: nowrap;\n }\n\n .period {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font: var(--caption-semi-bold-11-13);\n\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font: var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n\n small {\n font: var(--caption-bold-12-15);\n }\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n .actions {\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n\n .quantity {\n color: ", ";\n font: var(--body-extra-bold-13-16);\n\n > div {\n margin: 0 auto;\n }\n }\n }\n }\n\n .insurance {\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n\n .insuranceImg {\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .insuranceContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media only screen and ", " {\n &:hover {\n button{\n background-color: var(--primary);\n color: white;\n }\n }\n }\n\n &:active {\n button {\n color: white;\n background-color: var(--primary);\n }\n }\n .text {\n display: block;\n font: var(--caption-semi-bold-12-15);\n\n .price {\n display: block;\n margin: 0;\n font: var(--caption-extra-bold-12-15);\n\n b {\n span {\n font-weight: 400;\n }\n }\n\n .quantity {\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n\n .actions {\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; }, devices_1.devices.mdUp);
|
|
14
|
+
exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color: var(--primary);\n\n ", "\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled {\n cursor: no-drop;\n }\n\n .popup {\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font: var(--caption-semi-bold-12-15);\n\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n }\n \n &:active {\n color: white;\n background-color: var(--primary);\n }\n"], ["\n border: 0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color: var(--primary);\n\n ", "\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled {\n cursor: no-drop;\n }\n\n .popup {\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font: var(--caption-semi-bold-12-15);\n\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n }\n \n &:active {\n color: white;\n background-color: var(--primary);\n }\n"])), function (props) { return props.$hasShadow ? "\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n " : ""; }, devices_1.devices.mdUp);
|
|
14
15
|
var templateObject_1, templateObject_2;
|