hook fix
This commit is contained in:
@@ -120,8 +120,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: "";
|
||||
@@ -132,7 +132,6 @@ PULSE ANIMATION
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.product_info{
|
||||
bottom: var(--photo-prod-box-dir-t, auto);
|
||||
top: var(--photo-prod-box-dir-b, auto);
|
||||
@@ -148,6 +147,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.6rem;
|
||||
color: var(--photo-prod-box-text);
|
||||
@@ -162,17 +270,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