@marigoldapp/svelte-calendar
Version:
A small date picker built with Svelte 3. Demo available here: [demo page].
11 lines (9 loc) • 2.1 kB
JavaScript
// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {
const code = ".heading-section.svelte-1dqf106.svelte-1dqf106{font-size:20px;padding:24px 15px;display:flex;justify-content:space-between;color:#3d4548;font-weight:bold}.label.svelte-1dqf106.svelte-1dqf106{cursor:pointer}.month-selector.svelte-1dqf106.svelte-1dqf106{position:absolute;top:75px;left:0;right:0;bottom:0;background-color:#fff;transition:all 300ms;transform:scale(1.2);opacity:0;visibility:hidden;z-index:1;text-align:center}.month-selector.open.svelte-1dqf106.svelte-1dqf106{transform:scale(1);visibility:visible;opacity:1}.month-selector--month.svelte-1dqf106.svelte-1dqf106{width:31.333%;margin:.5%;height:23%;display:inline-block;color:#4a4a4a;border:1px solid #efefef;opacity:0.2}.month-selector--month.selectable.svelte-1dqf106.svelte-1dqf106{opacity:1}.month-selector--month.selectable.svelte-1dqf106.svelte-1dqf106:hover{cursor:pointer;box-shadow:0px 0px 3px rgba(0,0,0,0.15)}.month-selector--month.selected.svelte-1dqf106.svelte-1dqf106{background:var(--highlight-color);color:#fff}.month-selector--month.svelte-1dqf106.svelte-1dqf106:before{content:' ';display:inline-block;height:100%;vertical-align:middle}.month-selector--month.svelte-1dqf106 span.svelte-1dqf106{vertical-align:middle;display:inline-block}.control.svelte-1dqf106.svelte-1dqf106{padding:0 8px;opacity:0.2;transform:translateY(3px)}.control.enabled.svelte-1dqf106.svelte-1dqf106{opacity:1;cursor:pointer}.arrow.svelte-1dqf106.svelte-1dqf106{display:inline-block;width:18px;height:18px;border-style:solid;border-color:#a9a9a9;border-width:0;border-bottom-width:2px;border-right-width:2px}.arrow.right.svelte-1dqf106.svelte-1dqf106{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.arrow.left.svelte-1dqf106.svelte-1dqf106{transform:rotate(135deg);-webkit-transform:rotate(135deg)}";
const styleEl = document.createElement("style");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}