krl-alfred 1.79.1 → 1.79.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/DropdownButton/DropdownButton.styled.js +1 -1
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/Pagination/Pagination.js +6 -0
- package/dist/components/Pagination/Pagination.styled.js +4 -1
- package/dist/components/Pagination/props.js +1 -1
- package/package.json +1 -1
|
@@ -11,5 +11,5 @@ exports.DropdownListItemStyled = exports.DropdownListStyled = exports.DropdownBu
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.DropdownButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n\n ", "\n .buttonInner {\n padding: 1.5rem 1.5rem;\n border-radius: 0.5rem;\n color: var(--dark);\n display: grid;\n align-items: center;\n grid-template-columns: auto 1fr auto;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5) !important;\n color: var(--primary) !important;\n }\n .icon{\n *{\n stop-color:currentColor;\n }\n }\n .title {\n font: var(--title-bold-16-19);\n display: block;\n margin-left: 1rem;\n }\n\n .dropdownIcon {\n transition: all .2s ease;\n ", "\n }\n }\n\n + div {\n margin-top: 0.25rem;\n }\n"], ["\n box-sizing: border-box;\n\n ", "\n .buttonInner {\n padding: 1.5rem 1.5rem;\n border-radius: 0.5rem;\n color: var(--dark);\n display: grid;\n align-items: center;\n grid-template-columns: auto 1fr auto;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5) !important;\n color: var(--primary) !important;\n }\n .icon{\n *{\n stop-color:currentColor;\n }\n }\n .title {\n font: var(--title-bold-16-19);\n display: block;\n margin-left: 1rem;\n }\n\n .dropdownIcon {\n transition: all .2s ease;\n ", "\n }\n }\n\n + div {\n margin-top: 0.25rem;\n }\n"])), function (props) { return (props.$isActive) && "\n .buttonInner {\n background-color: var(--primary-opacity-5) !important;\n color: var(--primary) !important;\n }\n "; }, function (props) { return props.$isShow && "\n transform: rotate(180deg)\n "; });
|
|
13
13
|
exports.DropdownListStyled = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0;\n margin: 0.25rem 0 0 0;\n display: ", ";\n\n > li {\n + li {\n margin-top: 0.25rem;\n }\n }\n"], ["\n padding: 0;\n margin: 0.25rem 0 0 0;\n display: ", ";\n\n > li {\n + li {\n margin-top: 0.25rem;\n }\n }\n"])), function (props) { return props.$isShow ? "block" : "none"; });
|
|
14
|
-
exports.DropdownListItemStyled = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n\n a {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: ", ";\n padding: 1rem 1rem 1rem 4rem;\n border-radius: 0.5rem;\n color: ", ";\n .iconWrapper{\n margin-right: 1rem;\n }\n }\n\n ", ";\n"], ["\n display: block;\n\n a {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: ", ";\n padding: 1rem 1rem 1rem 4rem;\n border-radius: 0.5rem;\n color: ", ";\n .iconWrapper{\n margin-right: 1rem;\n }\n }\n\n ", ";\n"])), function (props) { return props.$hasIcon ? "var(--body-bold-14-17)" : "var(--body-medium-14-17)"; }, function (props) { return props.$hasIcon ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$hasIcon ? "\n &:hover{\n a{\n color: var(--primary-hover) !important;\n }\n }\n " : "\n ".concat(props.$isActive ? "" : "&:hover{", "\n a {\n background-color: var(--primary-opacity-5) !important;\n color: var(--primary) !important;\n font: var(--body-bold-14-17) !important;\n }\n\n ").concat(!props.$isActive ? "" : "}", "\n "); });
|
|
14
|
+
exports.DropdownListItemStyled = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n\n a {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: ", ";\n padding: 1rem 1rem 1rem 4rem;\n border-radius: 0.5rem;\n color: ", ";\n .iconWrapper{\n margin-right: 1rem;\n }\n }\n\n ", ";\n"], ["\n display: block;\n\n a {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: ", ";\n padding: 1rem 1rem 1rem 4rem;\n border-radius: 0.5rem;\n color: ", ";\n .iconWrapper{\n margin-right: 1rem;\n }\n }\n\n ", ";\n"])), function (props) { return props.$hasIcon ? "var(--body-bold-14-17)" : "var(--body-medium-14-17)"; }, function (props) { return props.$hasIcon ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$hasIcon && !props.$isActive ? "\n &:hover{\n a{\n color: var(--primary-hover) !important;\n }\n }\n " : "\n ".concat(props.$isActive ? "" : "&:hover{", "\n a {\n background-color: var(--primary-opacity-5) !important;\n color: var(--primary) !important;\n font: var(--body-bold-14-17) !important;\n }\n\n ").concat(!props.$isActive ? "" : "}", "\n "); });
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font:var(--caption-medium-10-12);\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font:var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
|
|
13
13
|
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n }\n .removeIcon {\n position: absolute;\n top: 17px;\n right: 16px;\n cursor: pointer;\n }\n .popupText{\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n }\n .removeIcon {\n position: absolute;\n top: 17px;\n right: 16px;\n cursor: pointer;\n }\n .popupText{\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.$width || '370px'; });
|
|
14
14
|
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
15
|
-
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .react-datepicker-wrapper{\n display: block;\n }\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n .react-datepicker__triangle{\n display: none !important;\n }\n .react-datepicker{\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem!important;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected{\n background-color: transparent !important;\n color:
|
|
15
|
+
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .react-datepicker-wrapper{\n display: block;\n }\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n .react-datepicker__triangle{\n display: none !important;\n }\n .react-datepicker{\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem!important;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected{\n background-color: transparent !important;\n color: inherit !important;\n }\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name{\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n .react-datepicker__navigation{\n position: static;\n border-radius: 0.5rem;\n transition:all .2s ease;\n &:hover{\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n .react-datepicker__month-container{\n float: none !important;\n .react-datepicker__header{\n background-color: white !important;\n border:none !important;\n padding: 0 0 0 0 !important;\n .headerTopContent{\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n .react-datepicker__navigation{\n width: 1.5rem;\n height: 1.5rem;\n }\n .leftButtons, .rightButtons{\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n svg{\n color: var(--dark-opacity-50);\n }\n }\n }\n .react-datepicker__current-month{\n display: block !important;\n }\n }\n .react-datepicker__month{\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n .react-datepicker__day-names{\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n .react-datepicker__day-name{\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n .react-datepicker__week{\n display: flex;\n align-items: center;\n justify-content: space-between;\n + .react-datepicker__week{\n margin-top: 0.5rem;\n }\n .react-datepicker__day{\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n &:is(.react-datepicker__day--selected), &:hover{\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--today){\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--outside-month){\n color: var(--grey-50);\n }\n }\n }\n }\n }\n }\n input{\n &:is(.react-datepicker-ignore-onclickoutside){\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], ["\n .react-datepicker-wrapper{\n display: block;\n }\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n .react-datepicker__triangle{\n display: none !important;\n }\n .react-datepicker{\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem!important;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected{\n background-color: transparent !important;\n color: inherit !important;\n }\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name{\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n .react-datepicker__navigation{\n position: static;\n border-radius: 0.5rem;\n transition:all .2s ease;\n &:hover{\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n .react-datepicker__month-container{\n float: none !important;\n .react-datepicker__header{\n background-color: white !important;\n border:none !important;\n padding: 0 0 0 0 !important;\n .headerTopContent{\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n .react-datepicker__navigation{\n width: 1.5rem;\n height: 1.5rem;\n }\n .leftButtons, .rightButtons{\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n svg{\n color: var(--dark-opacity-50);\n }\n }\n }\n .react-datepicker__current-month{\n display: block !important;\n }\n }\n .react-datepicker__month{\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n .react-datepicker__day-names{\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n .react-datepicker__day-name{\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n .react-datepicker__week{\n display: flex;\n align-items: center;\n justify-content: space-between;\n + .react-datepicker__week{\n margin-top: 0.5rem;\n }\n .react-datepicker__day{\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n &:is(.react-datepicker__day--selected), &:hover{\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--today){\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--outside-month){\n color: var(--grey-50);\n }\n }\n }\n }\n }\n }\n input{\n &:is(.react-datepicker-ignore-onclickoutside){\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])));
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -34,9 +34,15 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
34
34
|
var react_i18next_1 = require("react-i18next");
|
|
35
35
|
var Button_1 = __importDefault(require("../Button"));
|
|
36
36
|
var rc_select_1 = __importDefault(require("rc-select"));
|
|
37
|
+
var react_1 = require("react");
|
|
37
38
|
var Pagination = function (_a) {
|
|
38
39
|
var _b = _a.defaultCurrent, defaultCurrent = _b === void 0 ? props_1.PaginationDefault.defaultCurrent : _b, _c = _a.defaultPageSize, defaultPageSize = _c === void 0 ? props_1.PaginationDefault.defaultPageSize : _c, _d = _a.total, total = _d === void 0 ? props_1.PaginationDefault.total : _d, _e = _a.pageSizeOptions, pageSizeOptions = _e === void 0 ? props_1.PaginationDefault.pageSizeOptions : _e, onChange = _a.onChange, onShowSizeChange = _a.onShowSizeChange, otherProps = __rest(_a, ["defaultCurrent", "defaultPageSize", "total", "pageSizeOptions", "onChange", "onShowSizeChange"]);
|
|
39
40
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
41
|
+
(0, react_1.useEffect)(function () {
|
|
42
|
+
var elem = document.querySelector(".rc-pagination-options-quick-jumper input");
|
|
43
|
+
if (elem)
|
|
44
|
+
elem.placeholder = "Sayfa";
|
|
45
|
+
});
|
|
40
46
|
return ((0, jsx_runtime_1.jsx)(Pagination_styled_1.PaginationStyled, { children: (0, jsx_runtime_1.jsx)(rc_pagination_1.default, __assign({ showQuickJumper: {
|
|
41
47
|
goButton: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ variant: "primary", size: "small" }, { children: t("GO") })),
|
|
42
48
|
}, selectComponentClass: rc_select_1.default, showSizeChanger: true, defaultPageSize: defaultPageSize, defaultCurrent: defaultCurrent, onShowSizeChange: onShowSizeChange, onChange: onChange, pageSizeOptions: pageSizeOptions, total: total, locale: __assign(__assign({}, tr_TR_1.default), { jump_to: null, page: null }), prevIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeftBig", width: "1.5rem", height: "1.5rem", strokeWidth: "2px" }), nextIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig", width: "1.5rem", height: "1.5rem", strokeWidth: "2px" }), hideOnSinglePage: true }, otherProps)) }));
|
|
@@ -8,6 +8,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.PaginationStyled = void 0;
|
|
11
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
11
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.PaginationStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rc-pagination {\n align-items: center;\n justify-content: flex-end;\n\n .rc-pagination-item {\n width: 1.5rem;\n height: 1.5rem;\n min-width: 1.5rem;\n padding: 0;\n border: 0;\n margin: 0;\n border-radius: 0.25rem;\n transition: all 0.2s ease !important;\n\n a {\n padding: 0;\n font: var(--caption-semi-bold-12-15);\n line-height: 1.5rem;\n color: inherit;\n }\n\n &:is(.rc-pagination-item-active), &:hover {\n background-color: var(--primary-opacity-10);\n\n a {\n color: var(--primary);\n }\n }\n }\n\n .rc-pagination-prev, .rc-pagination-next {\n width: 2.5rem;\n height: 2.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary);\n\n div {\n display: block;\n }\n }\n\n .rc-pagination-prev {\n margin-right: 1rem;\n }\n\n .rc-pagination-next {\n margin-left: 1rem;\n }\n\n .rc-pagination-jump-prev, .rc-pagination-jump-next {\n width: 27px;\n margin: 0;\n\n button {\n &:after {\n content: \"...\";\n }\n }\n }\n\n .rc-pagination-options {\n display: flex;\n align-items: center;\n margin-left: 1rem;\n\n .rc-pagination-options-quick-jumper {\n display: flex;\n align-items: center;\n\n input {\n margin: 0 1rem;\n box-sizing: border-box;\n width: 82px;\n height: 40px;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 19.5px 24px;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n outline: none;\n background: var(--dark-opacity-3);\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid var(--primary);\n color: var(--dark);\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n background: var(--dark-opacity-5);\n }\n }\n }\n }\n\n .rc-select {\n\n // --------------- Single ----------------\n\n &-single {\n .rc-select-selector {\n display: flex;\n position: relative;\n\n .rc-select-selection-wrap {\n width: 100%;\n position: relative;\n }\n\n .rc-select-selection-search {\n width: 100%;\n position: relative;\n\n &-input {\n width: 100%;\n }\n }\n\n .rc-select-selection-item,\n .rc-select-selection-placeholder {\n font: inherit;\n height: 100%;\n display: flex;\n align-items: center;\n }\n }\n\n // Not customize\n\n &:not(.rc-select-customize-input) {\n .rc-select-selector {\n box-sizing: border-box;\n width: 135px;\n height: 40px;\n background: white;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 0 24px;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n outline: none;\n }\n }\n }\n &-open {\n .rc-select-selector {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n border: 2px solid var(--primary) !important;\n }\n }\n\n // =============== Focused ===============\n\n &-focused {\n .rc-select-selector {\n border: 1px solid var(--dark-opacity-10) !important;\n }\n }\n\n // ============== Dropdown ===============\n\n &-dropdown {\n margin: 0 !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: none !important;\n border: 1px solid var(--dark-opacity-10) !important;\n overflow: hidden !important;\n inset: 40px auto auto 0px !important;\n }\n\n // =============== Option ================\n\n &-item {\n font: var(--title-bold-16-19);\n padding: 1rem 1.5rem;\n\n // >>> Group\n\n &-group {\n color: #999;\n font-weight: bold;\n font-size: 80%;\n }\n\n // >>> Option\n\n &-option {\n position: relative;\n display: block;\n font: var(--title-bold-16-19);\n\n &-grouped {\n padding-left: 24px;\n }\n\n .rc-select-item-option-state {\n display: none;\n }\n\n // ------- Active -------\n\n &-active {\n background: var(--dark-opacity-3);\n }\n\n // ------ Disabled ------\n\n &-disabled {\n color: #999;\n }\n }\n\n // >>> Empty\n\n &-empty {\n text-align: center;\n color: #999;\n }\n }\n }\n }\n"], ["\n .rc-pagination {\n align-items: center;\n justify-content: flex-end;\n\n .rc-pagination-item {\n width: 1.5rem;\n height: 1.5rem;\n min-width: 1.5rem;\n padding: 0;\n border: 0;\n margin: 0;\n border-radius: 0.25rem;\n transition: all 0.2s ease !important;\n\n a {\n padding: 0;\n font: var(--caption-semi-bold-12-15);\n line-height: 1.5rem;\n color: inherit;\n }\n\n &:is(.rc-pagination-item-active), &:hover {\n background-color: var(--primary-opacity-10);\n\n a {\n color: var(--primary);\n }\n }\n }\n\n .rc-pagination-prev, .rc-pagination-next {\n width: 2.5rem;\n height: 2.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary);\n\n div {\n display: block;\n }\n }\n\n .rc-pagination-prev {\n margin-right: 1rem;\n }\n\n .rc-pagination-next {\n margin-left: 1rem;\n }\n\n .rc-pagination-jump-prev, .rc-pagination-jump-next {\n width: 27px;\n margin: 0;\n\n button {\n &:after {\n content: \"...\";\n }\n }\n }\n\n .rc-pagination-options {\n display: flex;\n align-items: center;\n margin-left: 1rem;\n\n .rc-pagination-options-quick-jumper {\n display: flex;\n align-items: center;\n\n input {\n margin: 0 1rem;\n box-sizing: border-box;\n width: 82px;\n height: 40px;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 19.5px 24px;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n outline: none;\n background: var(--dark-opacity-3);\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid var(--primary);\n color: var(--dark);\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n background: var(--dark-opacity-5);\n }\n }\n }\n }\n\n .rc-select {\n\n // --------------- Single ----------------\n\n &-single {\n .rc-select-selector {\n display: flex;\n position: relative;\n\n .rc-select-selection-wrap {\n width: 100%;\n position: relative;\n }\n\n .rc-select-selection-search {\n width: 100%;\n position: relative;\n\n &-input {\n width: 100%;\n }\n }\n\n .rc-select-selection-item,\n .rc-select-selection-placeholder {\n font: inherit;\n height: 100%;\n display: flex;\n align-items: center;\n }\n }\n\n // Not customize\n\n &:not(.rc-select-customize-input) {\n .rc-select-selector {\n box-sizing: border-box;\n width: 135px;\n height: 40px;\n background: white;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 0 24px;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n outline: none;\n }\n }\n }\n &-open {\n .rc-select-selector {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n border: 2px solid var(--primary) !important;\n }\n }\n\n // =============== Focused ===============\n\n &-focused {\n .rc-select-selector {\n border: 1px solid var(--dark-opacity-10) !important;\n }\n }\n\n // ============== Dropdown ===============\n\n &-dropdown {\n margin: 0 !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: none !important;\n border: 1px solid var(--dark-opacity-10) !important;\n overflow: hidden !important;\n inset: 40px auto auto 0px !important;\n }\n\n // =============== Option ================\n\n &-item {\n font: var(--title-bold-16-19);\n padding: 1rem 1.5rem;\n\n // >>> Group\n\n &-group {\n color: #999;\n font-weight: bold;\n font-size: 80%;\n }\n\n // >>> Option\n\n &-option {\n position: relative;\n display: block;\n font: var(--title-bold-16-19);\n\n &-grouped {\n padding-left: 24px;\n }\n\n .rc-select-item-option-state {\n display: none;\n }\n\n // ------- Active -------\n\n &-active {\n background: var(--dark-opacity-3);\n }\n\n // ------ Disabled ------\n\n &-disabled {\n color: #999;\n }\n }\n\n // >>> Empty\n\n &-empty {\n text-align: center;\n color: #999;\n }\n }\n }\n }\n"])));
|
|
13
|
+
var svgToBase64_1 = __importDefault(require("../../utils/svgToBase64"));
|
|
14
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
15
|
+
exports.PaginationStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rc-pagination {\n align-items: center;\n justify-content: flex-end;\n\n .rc-pagination-item {\n width: 1.5rem;\n height: 1.5rem;\n min-width: 1.5rem;\n padding: 0;\n border: 0;\n margin: 0;\n border-radius: 0.25rem;\n transition: all 0.2s ease !important;\n\n a {\n padding: 0;\n font: var(--caption-semi-bold-12-15);\n line-height: 1.5rem;\n color: inherit;\n }\n\n &:is(.rc-pagination-item-active), &:hover {\n background-color: var(--primary-opacity-10);\n\n a {\n color: var(--primary);\n }\n }\n }\n\n .rc-pagination-prev, .rc-pagination-next {\n width: 2.5rem;\n height: 2.5rem;\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary);\n transition: all 0.2s ease;\n &:hover{\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n div {\n display: block;\n }\n }\n\n .rc-pagination-prev {\n margin-right: 1rem;\n }\n\n .rc-pagination-next {\n margin-left: 1rem;\n }\n\n .rc-pagination-jump-prev, .rc-pagination-jump-next {\n width: 27px;\n margin: 0;\n\n button {\n &:after {\n content: \"...\";\n }\n }\n }\n\n .rc-pagination-options {\n display: flex;\n align-items: center;\n margin-left: 1rem;\n\n .rc-pagination-options-quick-jumper {\n display: flex;\n align-items: center;\n height: auto !important;\n line-height: initial !important;\n input {\n margin: 0 1rem;\n box-sizing: border-box;\n width: 88px;\n height: 40px;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 19.5px 24px;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n outline: none;\n background: var(--dark-opacity-3);\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid var(--primary);\n color: var(--dark);\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n background: var(--dark-opacity-5);\n }\n }\n }\n }\n\n .rc-select {\n\n // --------------- Single ----------------\n margin: 0;\n &-single {\n .rc-select-selector {\n display: flex;\n position: relative;\n\n .rc-select-selection-wrap {\n width: 100%;\n position: relative;\n }\n\n .rc-select-selection-search {\n width: 100%;\n position: relative;\n display: none;\n &-input {\n width: 100%;\n }\n }\n\n .rc-select-selection-item,\n .rc-select-selection-placeholder {\n font: inherit;\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n top: 0;\n left: 0;\n justify-content: space-between;\n padding: 0 1.5rem;\n }\n\n .rc-select-selection-item {\n &:after{\n content: \"\";\n display: block;\n width: 1rem;\n height: 1rem;\n transition: all .2s ease;\n background-image:url('", "');\n }\n }\n }\n\n // Not customize\n\n &:not(.rc-select-customize-input) {\n .rc-select-selector {\n box-sizing: border-box;\n width: 141px;\n height: 40px;\n background: white;\n border-radius: 0.5rem;\n border: none;\n padding: 0;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n outline: none;\n text-align: center;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n }\n }\n }\n }\n &-open {\n .rc-select-selector {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n &:before{\n border: 2px solid var(--primary) !important;\n }\n .rc-select-selection-item {\n &:after{\n transform: rotate(180deg);\n }\n }\n }\n }\n\n // =============== Focused ===============\n\n &-focused {\n .rc-select-selector {\n border: 1px solid var(--dark-opacity-10) !important;\n }\n }\n\n // ============== Dropdown ===============\n\n &-dropdown {\n margin: 0 !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: none !important;\n border: 1px solid var(--dark-opacity-10) !important;\n overflow: hidden !important;\n inset: 40px auto auto 0px !important;\n }\n\n // =============== Option ================\n\n &-item {\n font: var(--title-bold-16-19);\n padding: 1rem 1.5rem;\n\n // >>> Group\n\n &-group {\n color: #999;\n font-weight: bold;\n font-size: 80%;\n }\n\n // >>> Option\n\n &-option {\n position: relative;\n display: block;\n font: var(--title-bold-16-19);\n\n &-grouped {\n padding-left: 24px;\n }\n\n .rc-select-item-option-state {\n display: none;\n }\n\n // ------- Active -------\n\n &-active {\n background: var(--dark-opacity-3);\n }\n\n // ------ Disabled ------\n\n &-disabled {\n color: #999;\n }\n }\n\n // >>> Empty\n\n &-empty {\n text-align: center;\n color: #999;\n }\n }\n .rc-virtual-list-scrollbar-thumb{\n background-color: var(--dark-opacity-10) !important;\n width: 5px !important;\n }\n }\n }\n"], ["\n .rc-pagination {\n align-items: center;\n justify-content: flex-end;\n\n .rc-pagination-item {\n width: 1.5rem;\n height: 1.5rem;\n min-width: 1.5rem;\n padding: 0;\n border: 0;\n margin: 0;\n border-radius: 0.25rem;\n transition: all 0.2s ease !important;\n\n a {\n padding: 0;\n font: var(--caption-semi-bold-12-15);\n line-height: 1.5rem;\n color: inherit;\n }\n\n &:is(.rc-pagination-item-active), &:hover {\n background-color: var(--primary-opacity-10);\n\n a {\n color: var(--primary);\n }\n }\n }\n\n .rc-pagination-prev, .rc-pagination-next {\n width: 2.5rem;\n height: 2.5rem;\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary);\n transition: all 0.2s ease;\n &:hover{\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n div {\n display: block;\n }\n }\n\n .rc-pagination-prev {\n margin-right: 1rem;\n }\n\n .rc-pagination-next {\n margin-left: 1rem;\n }\n\n .rc-pagination-jump-prev, .rc-pagination-jump-next {\n width: 27px;\n margin: 0;\n\n button {\n &:after {\n content: \"...\";\n }\n }\n }\n\n .rc-pagination-options {\n display: flex;\n align-items: center;\n margin-left: 1rem;\n\n .rc-pagination-options-quick-jumper {\n display: flex;\n align-items: center;\n height: auto !important;\n line-height: initial !important;\n input {\n margin: 0 1rem;\n box-sizing: border-box;\n width: 88px;\n height: 40px;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 19.5px 24px;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n outline: none;\n background: var(--dark-opacity-3);\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid var(--primary);\n color: var(--dark);\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n background: var(--dark-opacity-5);\n }\n }\n }\n }\n\n .rc-select {\n\n // --------------- Single ----------------\n margin: 0;\n &-single {\n .rc-select-selector {\n display: flex;\n position: relative;\n\n .rc-select-selection-wrap {\n width: 100%;\n position: relative;\n }\n\n .rc-select-selection-search {\n width: 100%;\n position: relative;\n display: none;\n &-input {\n width: 100%;\n }\n }\n\n .rc-select-selection-item,\n .rc-select-selection-placeholder {\n font: inherit;\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n top: 0;\n left: 0;\n justify-content: space-between;\n padding: 0 1.5rem;\n }\n\n .rc-select-selection-item {\n &:after{\n content: \"\";\n display: block;\n width: 1rem;\n height: 1rem;\n transition: all .2s ease;\n background-image:url('", "');\n }\n }\n }\n\n // Not customize\n\n &:not(.rc-select-customize-input) {\n .rc-select-selector {\n box-sizing: border-box;\n width: 141px;\n height: 40px;\n background: white;\n border-radius: 0.5rem;\n border: none;\n padding: 0;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n outline: none;\n text-align: center;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n }\n }\n }\n }\n &-open {\n .rc-select-selector {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n &:before{\n border: 2px solid var(--primary) !important;\n }\n .rc-select-selection-item {\n &:after{\n transform: rotate(180deg);\n }\n }\n }\n }\n\n // =============== Focused ===============\n\n &-focused {\n .rc-select-selector {\n border: 1px solid var(--dark-opacity-10) !important;\n }\n }\n\n // ============== Dropdown ===============\n\n &-dropdown {\n margin: 0 !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: none !important;\n border: 1px solid var(--dark-opacity-10) !important;\n overflow: hidden !important;\n inset: 40px auto auto 0px !important;\n }\n\n // =============== Option ================\n\n &-item {\n font: var(--title-bold-16-19);\n padding: 1rem 1.5rem;\n\n // >>> Group\n\n &-group {\n color: #999;\n font-weight: bold;\n font-size: 80%;\n }\n\n // >>> Option\n\n &-option {\n position: relative;\n display: block;\n font: var(--title-bold-16-19);\n\n &-grouped {\n padding-left: 24px;\n }\n\n .rc-select-item-option-state {\n display: none;\n }\n\n // ------- Active -------\n\n &-active {\n background: var(--dark-opacity-3);\n }\n\n // ------ Disabled ------\n\n &-disabled {\n color: #999;\n }\n }\n\n // >>> Empty\n\n &-empty {\n text-align: center;\n color: #999;\n }\n }\n .rc-virtual-list-scrollbar-thumb{\n background-color: var(--dark-opacity-10) !important;\n width: 5px !important;\n }\n }\n }\n"])), function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--dark)", name: "ArrowDownBig" })); });
|
|
13
16
|
var templateObject_1;
|