@gez/date-time-kit
Version:
9 lines (8 loc) • 4.08 kB
JavaScript
var __freeze = Object.freeze;
var __defProp = Object.defineProperty;
var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
var _a;
import { arrowRightSvg, svg2cssUrl } from "../../assets/index.mjs";
import { css } from "../../utils/index.mjs";
import { quickKeys } from "./quick-key.mjs";
export default css(_a || (_a = __template(["\n:host {\n width: fit-content;\n display: block;\n}\ndt-popover {\n width: 100%;\n}\n.menu {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n min-width: 200px;\n}\n.menu > * {\n width: 100%;\n}\n\n.radio-grp {\n display: flex;\n flex-direction: column;\n gap: 5px;\n width: 100%;\n}\nlabel {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n padding: 5px;\n}\nlabel:hover {\n background-color: var(--dt-bg-hover, #f5f5f5);\n}\n.radio-grp dt-i18n {\n flex: 1;\n}\n.radio {\n display: inline-block;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 1px solid var(--dt-accent, #18181B);\n padding: 4px;\n}\ninput[type='radio']:checked + .radio {\n background: var(--dt-accent, #18181B) content-box;\n}\n\n.arrow-right-icon {\n display: inline-block;\n width: 15px;\n height: 15px;\n background: ", " no-repeat center center;\n cursor: pointer;\n}\n\n.dividing-line {\n display: block;\n height: 1px;\n width: 100%;\n background-color: var(--dt-border-dark, #eee);\n}\n\n.tz-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 5px;\n gap: 10px;\n cursor: pointer;\n white-space: nowrap;\n}\n.tz-trigger:hover {\n background-color: var(--dt-bg-hover, #f5f5f5);\n}\n.tz-trigger bdo {\n direction: ltr;\n}\n\n.title {\n display: flex;\n align-items: center;\n padding: 5px;\n gap: 10px;\n font-weight: 700;\n font-size: 18px;\n}\n.title svg {\n border: 5px solid transparent;\n border-radius: 50%;\n margin: -5px;\n cursor: pointer;\n box-sizing: content-box;\n background-clip: padding-box;\n}\n.title svg:hover {\n background-color: var(--dt-bg-hover, #eee);\n border-color: var(--dt-bg-hover, #eee);\n}\n\n.menu.tz {\n min-width: 180px;\n max-height: 293px;\n overflow: hidden auto;\n}\n.menu.tz fieldset {\n width: 100%;\n border: none;\n border-top: 1px solid var(--dt-border-dark, #eee);\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n.menu.tz fieldset legend {\n padding: 0 5px;\n margin-bottom: 5px;\n font-size: 12px;\n line-height: 24px;\n color: var(--dt-text-auxiliary, #666);\n}\n\nbutton {\n border: none;\n min-height: 40px;\n border-radius: 6px;\n padding: 5px 15px;\n font-size: 16px;\n line-height: 1;\n background-color: var(--dt-accent, #18181B);\n font-weight: 500;\n cursor: pointer;\n}\nbutton:hover {\n background-color: var(--color-accent-hover, #000);\n}\n\n.menu.custom {\n padding: 14px;\n gap: 15px;\n}\n.menu.custom dt-period-selector {\n width: 590px;\n}\n.menu.custom .btns {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n}\nbutton#done {\n color: var(--dt-text-reverse, #fff);\n}\n.menu.custom #reset {\n background-color: var(--dt-bg-secondary, #E5E7E8);\n color: inherit;\n}\n.menu.custom #reset:hover {\n background-color: var(--dt-bg-secondary-hover, #D6D8DB);\n}\n\n", ',\n:host([exclude-field*="timezone"]) .menu.top .dividing-line {\n display: none;\n}\n\n (max-width: 750px) {\n .menu[class] {\n gap: 15px;\n overflow: auto;\n max-height: inherit;\n }\n .menu.tz fieldset {\n gap: 10px;\n }\n .title {\n margin-top: -15px;\n }\n .radio-grp {\n gap: 10px;\n }\n label, .tz-trigger {\n padding: 5px 0;\n }\n .menu.custom dt-period-selector {\n width: 100%;\n }\n .menu.custom .btns {\n justify-content: center;\n }\n .menu.custom .btns button {\n flex: 1;\n }\n}\n'])), svg2cssUrl(arrowRightSvg), [...quickKeys, "timezone"].map((k) => ':host([exclude-field*="'.concat(k, '"]) [data-field="').concat(k, '"]')).join(", "));