https://bostalsee.de/fileadmin/template/js/mburger/index.js?1700590714

1/*
2 * mburger webcomponent
3 * mmenujs.com/mburger
4 *
5 * Copyright (c) Fred Heusschen
6 * frebsite.nl
7 *
8 * License: CC-BY-4.0
9 * http://creativecommons.org/licenses/by/4.0/
10 */
11import WebComponent from './js/index.js';
12const webcomponentName = 'mm-burger';
13const template = document.createElement('template');
14template.innerHTML = `
15    <style>*,:host{box-sizing:border-box}
16:host{--mb-bar-width:30px;--mb-bar-height:3px;--mb-bar-spacing:7px;--mb-animation-function:ease;--mb-animation-duration:0.25s;--mb-animation-delay:0s;display:inline-flex;align-items:center;gap:.75em;padding:0;margin:0;font-size:inherit;color:inherit;border:unset;background:0 0;cursor:pointer}
17:host([ease=elastic]){--mb-animation-function:cubic-bezier(.5,-0.35,.35,1.5);--mb-animation-duration:0.35s}
18:host([ease=funky]){--mb-animation-function:cubic-bezier(0,1.45,.5,1.45);--mb-animation-duration:0.4s}
19:host([ease=shaky]){--mb-animation-function:cubic-bezier(.15,.33,1,-0.81);--mb-animation-function:cubic-bezier(0,.5,1,-1);--mb-animation-duration:0.45s}
20[part=bars]{position:relative;display:block;width:var(--mb-bar-width);height:calc(var(--mb-bar-height) * 3 + var(--mb-bar-spacing) * 2)}
21.bar{display:block;position:absolute;left:0;right:0;height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1;transition:none var(--mb-animation-duration) var(--mb-animation-function) var(--mb-animation-delay)}
22.bar--top{bottom:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition-property:bottom,transform}
23.bar--middle{top:calc(50% - var(--mb-bar-height)/ 2);transition-property:opacity}
24.bar--bottom{top:calc(50% + var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transition-property:top,transform}
25.is-cross .bar--top{bottom:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(45deg)}
26.is-cross .bar--middle{opacity:0}
27.is-cross .bar--bottom{top:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(-45deg)}
28:host([fx=collapse]) .bar--top{transition-property:bottom,margin,transform;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration)),var(--mb-animation-delay),var(--mb-animation-delay)}
29:host([fx=collapse]) .bar--middle{transition-property:top,opacity;transition-duration:var(--mb-animation-duration),0s;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3)}
30:host([fx=collapse]) .bar--bottom{transition-delay:var(--mb-animation-delay)}
31:host([fx=collapse]) .is-cross .bar--top{bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + var(--mb-bar-height)/ 2);transform:rotate(45deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .3),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3)}
32:host([fx=collapse]) .is-cross .bar--middle{top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-duration:var(--mb-animation-duration),0s;transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
33:host([fx=collapse]) .is-cross .bar--bottom{top:calc(50% - var(--mb-bar-height)/ 2);transform:rotate(-45deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * 1.3)}
34:host([fx=spin]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration)),var(--mb-animation-delay)}
35:host([fx=spin]) .bar--middle{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
36:host([fx=spin]) .bar--bottom{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration)),var(--mb-animation-delay)}
37:host([fx=spin]) .is-cross .bar--top{transform:rotate(135deg);transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
38:host([fx=spin]) .is-cross .bar--middle{transition-duration:0s;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
39:host([fx=spin]) .is-cross .bar--bottom{transform:rotate(225deg);transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration))}
40:host([fx=squeeze]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4),var(--mb-animation-delay)}
41:host([fx=squeeze]) .bar--middle{transition-delay:calc(var(--mb-animation-delay) + .1s)}
42:host([fx=squeeze]) .bar--bottom{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4),var(--mb-animation-delay)}
43:host([fx=squeeze]) .is-cross .bar--top{transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4)}
44:host([fx=squeeze]) .is-cross .bar--middle{transition-delay:var(--mb-animation-delay)}
45:host([fx=squeeze]) .is-cross .bar--bottom{transition-delay:var(--mb-animation-delay),calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .4)}
46:host([fx=tornado]) .bar--top{transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .6)}
47:host([fx=tornado]) .bar--middle{transition-property:opacity,transform;transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .3)}
48:host([fx=tornado]) .bar--bottom{transition-delay:var(--mb-animation-delay)}
49:host([fx=tornado]) .is-cross .bar--top{transform:rotate(-135deg);transition-delay:var(--mb-animation-delay)}
50:host([fx=tornado]) .is-cross .bar--middle{opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .3)}
51:host([fx=tornado]) .is-cross .bar--bottom{transform:rotate(-225deg);transition-delay:calc(var(--mb-animation-delay) + var(--mb-animation-duration) * .6)}</style>
52    <span part="bars">
53    <span class="bar bar--top"></span>
54    <span class="bar bar--middle"></span>
55    <span class="bar bar--bottom"></span>
56</span>
57<slot part="text"></slot>
58
59`;
60customElements.define(webcomponentName, class extends WebComponent {
61    constructor() {
62        super(template);
63    }
64});