47 lines
1.9 KiB
Sass
47 lines
1.9 KiB
Sass
magic-magnifier
|
|
position: relative
|
|
|
|
// Only show the lens when we are hovering, and the magnifier's X and Y
|
|
// coordinates are set. (This ensures the component is running, and has
|
|
// received a mousemove event, instead of defaulting to (0, 0).)
|
|
magic-magnifier-lens
|
|
display: none
|
|
|
|
&:hover
|
|
@container style(--magic-magnifier-x) and style(--magic-magnifier-y)
|
|
magic-magnifier-lens
|
|
display: block
|
|
|
|
magic-magnifier-lens
|
|
width: var(--magic-magnifier-lens-width, 100px)
|
|
height: var(--magic-magnifier-lens-height, 100px)
|
|
overflow: hidden
|
|
border-radius: 100%
|
|
|
|
background: white
|
|
border: 2px solid black
|
|
box-shadow: 3px 3px 3px rgba(0, 0, 0, .5)
|
|
|
|
position: absolute
|
|
left: var(--magic-magnifier-x, 0px)
|
|
top: var(--magic-magnifier-y, 0px)
|
|
|
|
> *
|
|
// Translations are applied in the opposite of the order they're specified.
|
|
// So, here's what we're doing:
|
|
//
|
|
// 1. Translate the content left by --magic-magnifier-x and up by
|
|
// --magic-magnifier-y, to align the target location with the lens's
|
|
// top-right corner.
|
|
// 2. Zoom in by --magic-magnifier-scale.
|
|
// 3. Translate the content right by half of --magic-magnifier-lens-width,
|
|
// and down by half of --magic-magnifier-lens-height, to align the
|
|
// target location with the lens's center.
|
|
//
|
|
// Note that it *is* possible to specify transforms relative to the center,
|
|
// rather than the top-left corner—this is in fact the default!—but that
|
|
// gets confusing fast with scale in play. I think this is easier to reason
|
|
// about with the top-left corner in terms of math, and center it after the
|
|
// fact.
|
|
transform: translateX(calc(var(--magic-magnifier-lens-width, 100px) / 2)) translateY(calc(var(--magic-magnifier-lens-height, 100px) / 2)) scale(var(--magic-magnifier-scale, 2)) translateX(calc(-1 * var(--magic-magnifier-x, 0px))) translateY(calc(-1 * var(--magic-magnifier-y, 0px)))
|
|
transform-origin: left top
|