Emi Matchu
b2a23b3e7b
I couldn't find a library for this functionality that didn't require jQuery, and I don't want to be adding *more* jQuery requirements. So, I decided to throw together my own! The `<magic-magnifier>` component copies its contents into a "lens" element, then uses basic JS to track mouse position, then uses CSS to move the lens and its contents into a helpful position. One thing I noticed here is that the zoom is a bit crunchy because we're using PNG images, and it's hard to zoom in even further than we already are. I might try switching this UI to use the SVG images by default instead?
44 lines
851 B
Sass
44 lines
851 B
Sass
@import "../partials/clean/constants"
|
|
|
|
support-outfit-viewer
|
|
display: flex
|
|
gap: 2em
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
|
|
outfit-viewer
|
|
flex: 0 0 auto
|
|
border: 1px solid $module-border-color
|
|
border-radius: 1em
|
|
|
|
> table
|
|
flex: 0 0 auto
|
|
border-collapse: collapse
|
|
table-layout: fixed
|
|
border-radius: .5em
|
|
|
|
th, td
|
|
border: 1px solid $module-border-color
|
|
font-size: .85em
|
|
padding: .25em .5em
|
|
text-align: left
|
|
|
|
> tbody
|
|
[data-field=links]
|
|
ul
|
|
list-style-type: none
|
|
display: flex
|
|
gap: .5em
|
|
|
|
// Once the component is ready, add some hints about potential interactions.
|
|
&:state(ready)
|
|
> table
|
|
> tbody > tr
|
|
cursor: zoom-in
|
|
&:hover
|
|
background: $module-bg-color
|
|
|
|
magic-magnifier
|
|
--magic-magnifier-lens-width: 100px
|
|
--magic-magnifier-lens-height: 100px
|
|
--magic-magnifier-scale: 2.5
|