@limetech/lime-elements
Version:
34 lines (33 loc) • 1.16 kB
JavaScript
import { h } from "@stencil/core";
/**
* This component enhances the visual effects, when the `tiltFollowingTheCursor`
* utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
*
* This component should be added to the HTML structure of the consumer component.
*
* This component carries its own styles which are needed to create a glow effect on the
* 3D element within the parent element, when the parent is hovered.
*
* The parent element must be using the `tiltFollowingTheCursor` utility function
* imported from `3d-tilt-hover-effect.ts`. This function will dynamically
* affect parts of the styles of this 3D glow effect.
*
* @private
*/
export class HoverEffectGlowComponent {
render() {
return h("div", { key: 'c8ef041030a8e8d6d02a7f434d2b5babe89c32bc' });
}
static get is() { return "limel-3d-hover-effect-glow"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["3d-hover-effect-glow.scss"]
};
}
static get styleUrls() {
return {
"$": ["3d-hover-effect-glow.css"]
};
}
}