diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md index b0b24e82d9..d5847e6ff5 100644 --- a/etc/lime-elements.api.md +++ b/etc/lime-elements.api.md @@ -146,6 +146,8 @@ export interface ColumnSorter { // // @public (undocumented) export namespace Components { + export interface Limel3dHoverEffectGlow { + } export interface LimelActionBar { "accessibleLabel"?: string; "actions": Array; @@ -981,6 +983,8 @@ export type InputType = 'date' | 'datetime-local' | 'email' | 'month' | 'number' namespace JSX_2 { // (undocumented) interface IntrinsicElements { + // (undocumented) + "limel-3d-hover-effect-glow": Limel3dHoverEffectGlow; // (undocumented) "limel-action-bar": LimelActionBar; // (undocumented) @@ -1132,6 +1136,8 @@ namespace JSX_2 { // (undocumented) "limel-tooltip-content": LimelTooltipContent; } + interface Limel3dHoverEffectGlow { + } interface LimelActionBar { "accessibleLabel"?: string; "actions"?: Array; diff --git a/src/components/3d-hover-effect-glow/3d-hover-effect-glow.scss b/src/components/3d-hover-effect-glow/3d-hover-effect-glow.scss new file mode 100644 index 0000000000..1fbef598c8 --- /dev/null +++ b/src/components/3d-hover-effect-glow/3d-hover-effect-glow.scss @@ -0,0 +1,28 @@ +:host(limel-3d-hover-effect-glow) { + display: block; + pointer-events: none; + + position: absolute; + inset: 0; + + mix-blend-mode: plus-lighter; +} + +div { + position: absolute; + inset: 0; + + transition: background, opacity; + transition-timing-function: ease-out; // Must be the same as the 3D Element itself + transition-duration: 0.8s; // Must be the same as the 3D Element itself + + border-radius: inherit; + + opacity: var(--limel-3d-hover-effect-glow-opacity, 0.1); + + background-image: radial-gradient( + circle at var(--limel-3d-hover-effect-glow-position, 50% -20%), + rgb(var(--color-white), 0.3), + rgb(var(--color-white), 0) + ); +} diff --git a/src/components/3d-hover-effect-glow/3d-hover-effect-glow.tsx b/src/components/3d-hover-effect-glow/3d-hover-effect-glow.tsx new file mode 100644 index 0000000000..f0102ff0f2 --- /dev/null +++ b/src/components/3d-hover-effect-glow/3d-hover-effect-glow.tsx @@ -0,0 +1,26 @@ +import { Component, 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 + */ +@Component({ + tag: 'limel-3d-hover-effect-glow', + shadow: true, + styleUrl: '3d-hover-effect-glow.scss', +}) +export class HoverEffectGlowComponent { + public render() { + return
; + } +} diff --git a/src/components/card/card.scss b/src/components/card/card.scss index df0b869f0d..5eb3f41bb4 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -137,10 +137,9 @@ limel-action-bar { } // The 3D effect -@include mixins.limel-3d-hover-effect-glow( - section, - var(--card-border-radius, $default-border-radius) -); +limel-3d-hover-effect-glow { + border-radius: var(--card-border-radius, $default-border-radius); +} :host(limel-card) { @include mixins.parent-of-the-3d-element; diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 5cbb096031..951f841f37 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -124,7 +124,7 @@ export class Card { {this.renderValue()} {this.renderActionBar()}
-
+ ); diff --git a/src/components/info-tile/info-tile.scss b/src/components/info-tile/info-tile.scss index 647d9eae93..14f6d134c2 100644 --- a/src/components/info-tile/info-tile.scss +++ b/src/components/info-tile/info-tile.scss @@ -334,10 +334,9 @@ $l: 62.5rem; //1000px } // The 3D effect -@include mixins.limel-3d-hover-effect-glow( - a, - var(--info-tile-border-radius, 1rem) -); +limel-3d-hover-effect-glow { + border-radius: var(--info-tile-border-radius, 1rem); +} :host(limel-info-tile) { @include mixins.parent-of-the-3d-element; diff --git a/src/components/info-tile/info-tile.tsx b/src/components/info-tile/info-tile.tsx index 07b28aa523..7b83e7cb55 100644 --- a/src/components/info-tile/info-tile.tsx +++ b/src/components/info-tile/info-tile.tsx @@ -165,7 +165,7 @@ export class InfoTile { {this.renderLabel()} {this.renderNotification()} -
+ ); } diff --git a/src/components/shortcut/shortcut.scss b/src/components/shortcut/shortcut.scss index fc6203d22b..9c720c2449 100644 --- a/src/components/shortcut/shortcut.scss +++ b/src/components/shortcut/shortcut.scss @@ -40,17 +40,6 @@ a { all: unset; - @include mixins.is-elevated-clickable( - $background-color: var( - --shortcut-background-color, - var(--lime-elevated-surface-background-color) - ), - $background-color--hovered: var( - --shortcut-background-color, - var(--lime-elevated-surface-background-color) - ) - ); - @include mixins.visualize-keyboard-focus; text-align: center; height: calc(100% - 1rem); @@ -58,6 +47,10 @@ a { padding: 0.5rem; border-radius: var(--shortcut-border-radius, 1rem); + background-color: var( + --shortcut-background-color, + var(--lime-elevated-surface-background-color) + ); } limel-icon { @@ -82,3 +75,18 @@ limel-badge { top: -0.25rem; right: 0.125rem; } + +// The 3D effect +limel-3d-hover-effect-glow { + border-radius: var(--shortcut-border-radius, 1rem); +} + +:host(limel-shortcut) { + @include mixins.parent-of-the-3d-element; +} + +a { + @include mixins.the-3d-element; + + @include mixins.the-3d-element--clickable; +} diff --git a/src/components/shortcut/shortcut.tsx b/src/components/shortcut/shortcut.tsx index dbc5aad5d3..5fa940053a 100644 --- a/src/components/shortcut/shortcut.tsx +++ b/src/components/shortcut/shortcut.tsx @@ -1,5 +1,6 @@ -import { Component, Prop, h } from '@stencil/core'; +import { Component, Prop, h, Element, Host } from '@stencil/core'; import { Link } from '../../global/shared-types/link.types'; +import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect'; /** * This component can be used on places such as a start page or a dashboard. @@ -53,21 +54,41 @@ export class Shortcut { @Prop() public link?: Link; + @Element() + private host: HTMLElement; + + private handleMouseEnter: () => void; + private handleMouseLeave: () => void; + + public componentWillLoad() { + const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers( + this.host, + ); + this.handleMouseEnter = handleMouseEnter; + this.handleMouseLeave = handleMouseLeave; + } + public render() { - return [ - - - , - this.renderLabel(), - this.renderNotification(), - ]; + + + + + {this.renderLabel()} + {this.renderNotification()} + + ); } private renderLabel = () => { diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 1920adafec..f3fe9a08b0 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -457,42 +457,6 @@ $clickable-normal-state-transitions: ( white-space: nowrap; } -// This mixin designed to enhance the visual effects, -// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts` -// is implemented in a component. -// This adds styles to a `
`, needed to create -// a glow effect on a 3D element when the parent element is hovered. -// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts` -// Parts of these styles are controlled by the `titleFollowingTheCursor` function. -@mixin limel-3d-hover-effect-glow($the3dElement, $border-radius) { - .limel-3d-hover-effect-glow { - transition: - background 0.4s ease, - opacity 0.4s ease; - pointer-events: none; - - position: absolute; - inset: 0; - border-radius: $border-radius; - - opacity: 0.1; - #{$the3dElement}:hover & { - opacity: 0.5; - @media (prefers-reduced-motion) { - opacity: 0.2; - } - } - - background-image: radial-gradient( - circle at var(--limel-3d-hover-effect-glow-position, 50% -20%), - rgb(var(--color-white), 0.3), - rgb(var(--color-white), 0) - ); - - mix-blend-mode: plus-lighter; - } -} - // These mixins below are designed to apply the necessary visual effects, // when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts` // is implemented in a component. @@ -545,6 +509,15 @@ $clickable-normal-state-transitions: ( outline: none; transform: scale3d(1.01, 1.01, 1.01); } + + &:hover { + limel-3d-hover-effect-glow { + --limel-3d-hover-effect-glow-opacity: 0.5; + @media (prefers-reduced-motion) { + --limel-3d-hover-effect-glow-opacity: 0.2; + } + } + } } @mixin the-3d-element--clickable { diff --git a/src/util/3d-tilt-hover-effect.ts b/src/util/3d-tilt-hover-effect.ts index 740dc61350..fab32d908e 100644 --- a/src/util/3d-tilt-hover-effect.ts +++ b/src/util/3d-tilt-hover-effect.ts @@ -46,11 +46,7 @@ * @include the-3d-element--clickable; * ``` * - **For the glow effect**: - * Add a `
` inside "the-3d-element", - * and use the following SCSS mixin: - * ```scss - * @include limel-3d-hover-effect-glow($selector, $border-radius); - * ``` + * Add a `` inside "the-3d-element". * * 3. **Initialize in your component**: *