hook fix
This commit is contained in:
@@ -2,7 +2,7 @@ function GenerateStyle() {
|
||||
return (
|
||||
<style>
|
||||
{`
|
||||
.idm_picture__module{
|
||||
.idm_picture__module{
|
||||
--photo-prod-box-bg: #fff;
|
||||
--photo-prod-box-text: #111;
|
||||
--photo-prod-point-shadow: rgba(255,255,255,.5);
|
||||
@@ -123,8 +123,8 @@ PULSE ANIMATION
|
||||
max-width: var(--photo-prod-box-width);
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
|
||||
box-shadow: 0px 0px 10px 1px #000;
|
||||
|
||||
box-shadow: 0px 0px 10px 1px #000;
|
||||
}
|
||||
.product_info::before{
|
||||
content: "";
|
||||
@@ -135,7 +135,6 @@ PULSE ANIMATION
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.product_info{
|
||||
bottom: var(--photo-prod-box-dir-t, auto);
|
||||
top: var(--photo-prod-box-dir-b, auto);
|
||||
@@ -151,6 +150,115 @@ PULSE ANIMATION
|
||||
left: var(--photo-prod-box-dir-l-before, auto);
|
||||
}
|
||||
|
||||
|
||||
.product_info[data-dir-single-x="l"] {
|
||||
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-l-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-single-x="r"] {
|
||||
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-r-before: 0;
|
||||
}
|
||||
.product_info[data-dir-single-y="t"] {
|
||||
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-t-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-single-y="b"] {
|
||||
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-b-before: 0;
|
||||
}
|
||||
.product_info[data-dir-single-x="l"][data-dir-single-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
|
||||
}
|
||||
.product_info[data-dir-single-x="r"][data-dir-single-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
|
||||
}
|
||||
.product_info[data-dir-single-x="l"][data-dir-single-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
|
||||
}
|
||||
.product_info[data-dir-single-x="r"][data-dir-single-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
|
||||
}
|
||||
@media (max-width: 756px) {
|
||||
.product_info[data-dir-mobile-x="l"] {
|
||||
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-l-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-mobile-x="r"] {
|
||||
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-r-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-mobile-y="t"] {
|
||||
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-t-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-mobile-y="b"] {
|
||||
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-b-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-mobile-x="l"][data-dir-mobile-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
|
||||
}
|
||||
}
|
||||
@media (min-width: 757px) and (max-width: 978px) {
|
||||
.product_info[data-dir-tablet-x="l"] {
|
||||
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-l-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-tablet-x="r"] {
|
||||
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-r-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-tablet-y="t"] {
|
||||
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-t-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-tablet-y="b"] {
|
||||
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-b-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
|
||||
}
|
||||
}
|
||||
@media (min-width: 979px) {
|
||||
.product_info[data-dir-desktop-x="l"] {
|
||||
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-l-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-desktop-x="r"] {
|
||||
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-r-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-desktop-y="t"] {
|
||||
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-t-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-desktop-y="b"] {
|
||||
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
|
||||
--photo-prod-box-dir-b-before: 0;
|
||||
}
|
||||
|
||||
.product_info[data-dir-desktop-x="l"][data-dir-desktop-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.idm_picture__product .product_info .product_name{
|
||||
font-size: 1.6em;
|
||||
color: var(--photo-prod-box-text);
|
||||
@@ -165,17 +273,15 @@ PULSE ANIMATION
|
||||
}
|
||||
|
||||
@media(min-width: 979px){
|
||||
.idm_picture__product:hover .product_info{
|
||||
:is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{
|
||||
display: flex;
|
||||
animation: idmShowUp 0.3s ease-in-out;
|
||||
/* opacity: 1; */
|
||||
}
|
||||
}
|
||||
@media(max-width: 978px){
|
||||
.idm_picture__product.--show .product_info{
|
||||
display: flex;
|
||||
animation: idmShowUp 0.3s ease-in-out;
|
||||
/* opacity: 1; */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user