2022-10-08 20:56:08 +08:00
|
|
|
.zoom-in-image-mask {
|
2022-09-30 10:51:42 +08:00
|
|
|
position fixed
|
|
|
|
top 0
|
2022-10-08 20:56:08 +08:00
|
|
|
right 0
|
|
|
|
bottom 0
|
2022-09-30 10:51:42 +08:00
|
|
|
left 0
|
|
|
|
z-index $z-index-8
|
|
|
|
display flex
|
|
|
|
align-items center
|
|
|
|
justify-content center
|
|
|
|
box-sizing border-box
|
|
|
|
background rgba(0, 0, 0, 0)
|
|
|
|
visibility hidden
|
2022-10-08 20:56:08 +08:00
|
|
|
transition-t("visibility, background", "0, 0", "0.3, 0.3", "linear, linear")
|
2020-11-16 19:04:24 +08:00
|
|
|
|
2022-10-08 20:56:08 +08:00
|
|
|
&.show {
|
2022-09-30 10:51:42 +08:00
|
|
|
background rgba(0, 0, 0, 0.5)
|
|
|
|
visibility visible
|
2020-11-16 19:04:24 +08:00
|
|
|
|
2022-10-08 20:56:08 +08:00
|
|
|
.zoom-in-image {
|
2022-09-30 10:51:42 +08:00
|
|
|
cursor zoom-out
|
2020-11-16 19:04:24 +08:00
|
|
|
}
|
|
|
|
}
|
2020-12-31 16:28:39 +08:00
|
|
|
|
2022-10-08 20:56:08 +08:00
|
|
|
.zoom-in-image {
|
|
|
|
position absolute
|
|
|
|
z-index $z-index-9
|
|
|
|
transform-origin center center
|
|
|
|
will-change transform
|
|
|
|
transition-t("transform", "0", "0.3", "linear")
|
2020-12-31 16:28:39 +08:00
|
|
|
}
|
2020-11-16 19:04:24 +08:00
|
|
|
}
|