@inventage-web-components/hamburger-menu
Version:
A simple hamburger menu component.
199 lines (198 loc) • 7.6 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "src/HamburgerMenu.js",
"declarations": [
{
"kind": "class",
"description": "A simple hamburger menu component.",
"name": "HamburgerMenu",
"cssProperties": [
{
"type": {
"text": "Length"
},
"name": "--hamburger-padding-x",
"default": "3px"
},
{
"type": {
"text": "Length"
},
"name": "--hamburger-padding-y",
"default": "10px"
},
{
"type": {
"text": "Length"
},
"name": "--hamburger-layer-width",
"default": "26px"
},
{
"type": {
"text": "Length"
},
"name": "--hamburger-layer-height",
"default": "2px"
},
{
"type": {
"text": "Length"
},
"name": "--hamburger-layer-spacing",
"default": "4px"
},
{
"type": {
"text": "Color"
},
"name": "--hamburger-layer-color",
"default": "black"
},
{
"type": {
"text": "Length"
},
"name": "--hamburger-layer-border-radius",
"default": "0"
},
{
"type": {
"text": "Length"
},
"name": "--hamburger-hover-opacity",
"default": "1"
},
{
"type": {
"text": "Length"
},
"name": "--hamburger-hover-transition-duration",
"default": "0.15s"
},
{
"type": {
"text": "Length"
},
"name": "--hamburger-hover-transition-timing-function",
"default": "linear"
}
],
"members": [
{
"kind": "field",
"name": "toggled",
"type": {
"text": "Boolean"
},
"default": "false",
"description": "Reflects the toggled state.",
"attribute": "toggled",
"reflects": true
},
{
"kind": "method",
"name": "toggle",
"return": {
"type": {
"text": "void"
}
}
}
],
"events": [
{
"name": "state-changed",
"type": {
"text": "CustomEvent"
},
"description": "Event fired when the hamburger menu state changes."
}
],
"attributes": [
{
"name": "toggled",
"type": {
"text": "Boolean"
},
"default": "false",
"description": "Reflects the toggled state.",
"fieldName": "toggled"
}
],
"superclass": {
"name": "LitElement",
"package": "@inventage-web-components/common"
},
"tagName": "hamburger-menu",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "HamburgerMenu",
"declaration": {
"name": "HamburgerMenu",
"module": "src/HamburgerMenu.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/hamburger-menu.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "hamburger-menu",
"declaration": {
"name": "HamburgerMenu",
"module": "/src/HamburgerMenu.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/index.js",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "HamburgerMenu",
"declaration": {
"name": "HamburgerMenu",
"module": "./HamburgerMenu.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/styles-css.js",
"declarations": [
{
"kind": "variable",
"name": "styles",
"default": "css`\n.hamburger {\n padding: var(--hamburger-padding-y, 10px) var(--hamburger-padding-x, 3px);\n display: inline-block;\n cursor: pointer;\n outline: 0;\n\n transition-property: opacity;\n transition-duration: var(--hamburger-hover-transition-duration, 0.15s);\n transition-timing-function: var(--hamburger-hover-transition-timing-function, linear);\n\n font: inherit;\n color: inherit;\n text-transform: none;\n background-color: transparent;\n border: 0;\n margin: 0;\n overflow: visible;\n line-height: 0;\n}\n\n.hamburger:hover {\n opacity: var(--hamburger-hover-opacity, 1);\n}\n\n.hamburger-box {\n width: var(--hamburger-layer-width, 26px);\n height: calc(var(--hamburger-layer-height, 2px) * 3 + var(--hamburger-layer-spacing, 4px) * 2);\n display: inline-block;\n position: relative;\n}\n\n.hamburger-inner {\n display: block;\n top: 50%;\n margin-top: calc(var(--hamburger-layer-height, 2px) / -2);\n}\n\n.hamburger-inner,\n.hamburger-inner::before,\n.hamburger-inner::after {\n width: var(--hamburger-layer-width, 26px);\n height: var(--hamburger-layer-height, 2px);\n background-color: var(--hamburger-layer-color, black);\n border-radius: var(--hamburger-layer-border-radius, 0);\n position: absolute;\n transition-property: transform;\n transition-duration: 0.15s;\n transition-timing-function: ease;\n}\n\n.hamburger-inner::before,\n.hamburger-inner::after {\n content: '';\n display: block;\n}\n\n.hamburger-inner::before {\n top: calc((var(--hamburger-layer-spacing, 4px) + var(--hamburger-layer-height, 2px)) * -1);\n}\n\n.hamburger-inner::after {\n bottom: calc((var(--hamburger-layer-spacing, 4px) + var(--hamburger-layer-height, 2px)) * -1);\n}\n\n.hamburger--spin .hamburger-inner {\n transition-duration: 0.22s;\n transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.hamburger--spin .hamburger-inner::before {\n transition:\n top 0.1s 0.25s ease-in,\n opacity 0.1s ease-in;\n}\n\n.hamburger--spin .hamburger-inner::after {\n transition:\n bottom 0.1s 0.25s ease-in,\n transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.hamburger.-toggled .hamburger-inner {\n transform: rotate(225deg);\n transition-delay: 0.12s;\n transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.hamburger.-toggled .hamburger-inner::before {\n top: 0;\n opacity: 0;\n transition:\n top 0.1s ease-out,\n opacity 0.1s 0.12s ease-out;\n}\n\n.hamburger.-toggled .hamburger-inner::after {\n bottom: 0;\n transform: rotate(-90deg);\n transition:\n bottom 0.1s ease-out,\n transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n`"
}
],
"exports": [
{
"kind": "js",
"name": "styles",
"declaration": {
"name": "styles",
"module": "src/styles-css.js"
}
}
]
}
]
}