krl-alfred 2.17.9 → 2.17.11
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.
|
@@ -40,7 +40,16 @@ var Tabs = function (_a) {
|
|
|
40
40
|
var activeItem = headerElement === null || headerElement === void 0 ? void 0 : headerElement.querySelector("[data-key=\"".concat(currentTab, "\"]"));
|
|
41
41
|
var isMobile = window.innerWidth <= 992;
|
|
42
42
|
if (activeItem && headerElement && isMobile) {
|
|
43
|
-
|
|
43
|
+
var containerWidth = headerElement.offsetWidth;
|
|
44
|
+
var itemWidth = activeItem.offsetWidth;
|
|
45
|
+
var itemLeft = activeItem.offsetLeft;
|
|
46
|
+
// Calculate the scroll position to center the item
|
|
47
|
+
var scrollPosition = itemLeft - (containerWidth - itemWidth) / 2;
|
|
48
|
+
// Smooth scroll to the position
|
|
49
|
+
headerElement.scrollTo({
|
|
50
|
+
left: scrollPosition,
|
|
51
|
+
behavior: 'smooth'
|
|
52
|
+
});
|
|
44
53
|
}
|
|
45
54
|
}
|
|
46
55
|
}, [currentTab]);
|
|
@@ -15,6 +15,7 @@ var getTabSize = function ($size) {
|
|
|
15
15
|
case 'lg':
|
|
16
16
|
return {
|
|
17
17
|
columnGap: '1.5rem',
|
|
18
|
+
columnGapSm: '1rem',
|
|
18
19
|
padding: '0 1.5rem',
|
|
19
20
|
paddingTop: '1.5rem',
|
|
20
21
|
height: '40px'
|
|
@@ -22,6 +23,7 @@ var getTabSize = function ($size) {
|
|
|
22
23
|
case 'sm':
|
|
23
24
|
return {
|
|
24
25
|
columnGap: '1rem',
|
|
26
|
+
columnGapSm: '1rem',
|
|
25
27
|
padding: '0 1rem',
|
|
26
28
|
paddingTop: '1rem',
|
|
27
29
|
height: '32px'
|
|
@@ -30,6 +32,7 @@ var getTabSize = function ($size) {
|
|
|
30
32
|
default:
|
|
31
33
|
return {
|
|
32
34
|
columnGap: '1rem',
|
|
35
|
+
columnGapSm: '1rem',
|
|
33
36
|
padding: '0 1rem',
|
|
34
37
|
paddingTop: '1rem',
|
|
35
38
|
height: '40px'
|
|
@@ -37,7 +40,7 @@ var getTabSize = function ($size) {
|
|
|
37
40
|
}
|
|
38
41
|
};
|
|
39
42
|
exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
40
|
-
exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n column-gap: ", ";\n ", "\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n column-gap: ", ";\n ", "\n ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return getTabSize(props.$size).columnGap; }, function (props) { return !props.$hasAutoFlex && "\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem;\n margin: -2rem;\n @media only screen and (".concat(devices_1.devices.xl, ") {\n padding: 2rem 1rem;\n margin: -2rem -1rem;\n column-gap: ").concat(getTabSize(props.$size).
|
|
43
|
+
exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n column-gap: ", ";\n ", "\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n column-gap: ", ";\n ", "\n ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return getTabSize(props.$size).columnGap; }, function (props) { return !props.$hasAutoFlex && "\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem;\n margin: -2rem;\n @media only screen and (".concat(devices_1.devices.xl, ") {\n padding: 2rem 1rem;\n margin: -2rem -1rem;\n column-gap: ").concat(getTabSize(props.$size).columnGapSm, ";\n }\n "); }, function (props) { return props.$isHideTabHeaderOnMobile ? "\n @media only screen and (".concat(devices_1.devices.lg, ") {\n display: none;\n }\n ") : ""; });
|
|
41
44
|
exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: ", ";\n ", "\n"], ["\n flex: ", ";\n ", "\n"])), function (props) { return props.$hasAutoFlex ? "1 0" : "auto 0"; }, function (props) { return props.$isDisabled ? "\n cursor: no-drop;\n pointer-events: none;\n user-select: none;\n " : ""; });
|
|
42
45
|
exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: transparent;\n color: ", ";\n border: 1px solid ", ";\n width: 100%;\n box-shadow: 0 6px 30px 0 ", ";\n border-radius: 0.5rem;\n transition: all .2s ease;\n padding: ", ";\n height: ", ";\n cursor: pointer;\n font: var(--body-semi-bold-14-17);\n white-space: ", ";\n outline: none !important;\n &:hover {\n color: var(--dark);\n border: 1px solid var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"], ["\n background: transparent;\n color: ", ";\n border: 1px solid ", ";\n width: 100%;\n box-shadow: 0 6px 30px 0 ", ";\n border-radius: 0.5rem;\n transition: all .2s ease;\n padding: ", ";\n height: ", ";\n cursor: pointer;\n font: var(--body-semi-bold-14-17);\n white-space: ", ";\n outline: none !important;\n &:hover {\n color: var(--dark);\n border: 1px solid var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; }, function (props) { return props.$hasAutoFlex ? "0" : getTabSize(props.$size).padding; }, function (props) { return getTabSize(props.$size).height; }, function (props) { return props.$hasAutoFlex ? "pre-wrap" : "nowrap"; });
|
|
43
46
|
exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-top: ", ";\n @media only screen and (", ") {\n padding-top: ", ";\n }\n"], ["\n padding-top: ", ";\n @media only screen and (", ") {\n padding-top: ", ";\n }\n"])), function (props) { return getTabSize(props.$size).paddingTop; }, devices_1.devices.lg, function (props) { return getTabSize(props.$size).paddingTop; });
|