Emi Matchu
b3f3b39aa0
When you hover the row for a layer in the table, it highlights the corresponding layer in the outfit viewer. And when you click anywhere in the row, it opens the first link (usually the PNG image).
39 lines
725 B
Sass
39 lines
725 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
|