krl-alfred 1.68.0 → 1.68.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/Banner/layouts/layout1/index.js +1 -8
- package/dist/components/Banner/layouts/layout1/layout1.styled.js +1 -1
- package/dist/components/Button/Button.styled.js +4 -5
- package/dist/components/Carousel/Carousel.styled.js +1 -1
- package/dist/components/Icon/ArrowRightBig.js +1 -1
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCard/layouts/Checklist.js +1 -1
- package/dist/components/ProductCard/layouts/Standart.js +1 -1
- package/package.json +1 -1
|
@@ -25,14 +25,7 @@ var Index = function (props) {
|
|
|
25
25
|
var data = props.data;
|
|
26
26
|
var _a = (0, react_1.useState)(0), activeSlide = _a[0], setActiveSlide = _a[1];
|
|
27
27
|
var sliderRef = (0, react_1.useRef)(null);
|
|
28
|
-
var settings = {
|
|
29
|
-
dots: false,
|
|
30
|
-
infinite: false,
|
|
31
|
-
speed: 500,
|
|
32
|
-
slidesToShow: 1,
|
|
33
|
-
slidesToScroll: 1,
|
|
34
|
-
afterChange: function (index) { return setActiveSlide(index); }
|
|
35
|
-
};
|
|
28
|
+
var settings = __assign({ dots: false, infinite: false, speed: 500, slidesToShow: 1, slidesToScroll: 1, afterChange: function (index) { return setActiveSlide(index); } }, props.carouselSettings);
|
|
36
29
|
var next = function () { return sliderRef.slickNext(); };
|
|
37
30
|
var previous = function () { return sliderRef.slickPrev(); };
|
|
38
31
|
return ((0, jsx_runtime_1.jsxs)(layout1_styled_1.BannerStyled, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inner", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_slick_1.default, __assign({}, settings, { ref: function (slider) {
|
|
@@ -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 .swiper-wrapper {\n align-items: center;\n }\n\n .
|
|
13
|
+
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\n } \n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n \n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\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 .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\n } \n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n \n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\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 .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\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, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -29,11 +29,10 @@ 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
|
|
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);
|
|
32
|
+
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 &:hover {\n background-color: var(--primary-hover);\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 &:hover {\n background-color: var(--primary-hover);\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"])));
|
|
33
|
+
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 &: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 &: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 &: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 &: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"])));
|
|
34
|
+
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 &: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 &: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 &: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 &: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"])));
|
|
35
|
+
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 &: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 &: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 &: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 &: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"])));
|
|
37
36
|
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) {
|
|
38
37
|
switch (props.variant) {
|
|
39
38
|
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
|
|
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 width: 100%;\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 aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n width: calc((100% / 4) - 12px); \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 width: 100%;\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 aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n width: calc((100% / 4) - 12px); \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);
|
|
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 SvgArrowRightBig = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.5 5L15.5 12L8.5 19", stroke: "#0A103D", strokeWidth:
|
|
39
|
+
var SvgArrowRightBig = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.5 5L15.5 12L8.5 19", stroke: "#0A103D", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
40
|
exports.default = SvgArrowRightBig;
|
|
@@ -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 .
|
|
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
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;
|
|
@@ -31,6 +31,6 @@ var Checkbox_1 = __importDefault(require("../../Checkbox"));
|
|
|
31
31
|
var react_device_detect_1 = require("react-device-detect");
|
|
32
32
|
var Checklist = function (props) {
|
|
33
33
|
var name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, other = __rest(props, ["name", "productCardOnChange", "title", "content", "value"]);
|
|
34
|
-
return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", { className: "
|
|
34
|
+
return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", { className: "productCardInner", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "productCardCheckboxContent", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: props.productCardOnChange, value: props.value, name: props.name }) }), props.image && ((0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "productCardImg", children: props.image })), (0, jsx_runtime_1.jsxs)("div", { className: "productCardText", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "productCardTitle title-semi-bold-16-19", children: props.title }), props.contentAlignment === "center" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "productCardContent", children: props.content })] }), props.contentAlignment === "left" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "productCardContent", children: props.content })] }) }));
|
|
35
35
|
};
|
|
36
36
|
exports.default = Checklist;
|
|
@@ -24,6 +24,6 @@ var Standart = function (props) {
|
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
26
26
|
};
|
|
27
|
-
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isMobile ? '
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isMobile ? '16px' : '8px'), top: (isMobile ? '16px' : '8px'), title: "\u0130ndirimli" }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('productCardTitle', (isMobile ? 'headline-bold-18-22' : 'title-bold-16-19')), children: title }), (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('productCardDescription', (isMobile ? 'title-medium-16-19' : 'body-medium-14-17')), children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('discountRate', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-13-16')), children: ["%", discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('oldPrice'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'body-semi-bold-13-16' : 'caption-semi-bold-12-15')), children: oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', 'caption-regular-12-15'), children: ["/ ", oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'body-regular-14-17' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] })] })] }) })));
|
|
28
28
|
};
|
|
29
29
|
exports.default = Standart;
|