skippy-links/dist/skippy-links.styles.d.ts

A small and easy to use web component to provide dynamic skip links to any page

export declare const skippyLinksStyles = "\n    <style>        \n        :host {\n            --sl-color-primary: #0000ee;\n            --sl-element-height: 4rem;\n            \n            border: 1px solid var(--sl-color-primary);\n            background-color: white;\n            position: fixed;\n            top: calc(var(--sl-element-height) * -1);\n            bottom: unset;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: var(--sl-element-height);\n            transform: translateY(0);\n            transition: transform var(--sl-transition-speed, .25s) ease-in-out;\n            overflow: hidden;\n            box-sizing: border-box;\n            box-shadow: none;\n            z-index: 9999;\n        }\n        \n        :host(:focus-within) {\n            transform: translateY(100%);\n        }\n        \n        .skippy-links__link {\n            position: var(--sl-link-position, absolute);\n            top: var(--sl-link-top, 0);\n            bottom: var(--sl-link-bottom, 0);\n            left: var(--sl-link-left, 0);\n            right: var(--sl-link-right, 0);\n            width: var(--sl-link-width, 100%);\n            height: var(--sl-link-height, var(--sl-element-height));\n            display: var(--sl-link-display, flex);\n            align-items: var(--sl-link-align-items, center);\n            justify-content: var(--sl-link-justify-content, center);\n            color: var(--sl-link-color, var(--sl-color-primary));\n            font-size: var(--sl-link-font-size, 1rem);\n            text-decoration: var(--sl-link-text-decoration, underline);\n            padding: var(--sl-link-padding, 1rem);\n            opacity: var(--sl-link-opacity, 1);\n            transform: var(--sl-link-transform, translateY(-100%));\n            box-sizing: var(--sl-link-box-sizing, border-box);\n        }\n        \n        .skippy-links__link:focus {\n            opacity: var(--sl-link-opacity-focus, 1);\n            transform: var(--sl-link-transform-focus, translateY(0));\n            color: var(--sl-link-color-focus, var(--sl-color-primary));\n        }\n        \n        @media (hover: hover) {\n            .skippy-links__link:hover {\n                opacity: var(--sl-link-opacity-hover, 1);\n                transform: var(--sl-link-transform-hover, translateY(0));\n                color: var(--sl-link-color-hover, var(--sl-color-primary));\n            }\n        }\n        \n        @media (prefers-reduced-motion) {\n          :root {\n            --sl-transition-speed: var(--sl-transition-speed-reduced-motion, 0));\n          }\n        }\n    </style>\n";