opinie, dodaj do koszyka, labelki
This commit is contained in:
@@ -1,400 +1,460 @@
|
||||
function GenerateStyle() {
|
||||
return (
|
||||
<style>
|
||||
{`
|
||||
.idm_picture__module{
|
||||
--photo-prod-box-bg: #fff;
|
||||
--photo-prod-box-text: #111;
|
||||
--photo-prod-point-shadow: rgba(255,255,255,.5);
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
.idm_picture__module {
|
||||
--photo-prod-box-bg: #fff;
|
||||
--photo-prod-box-text: #111;
|
||||
--photo-prod-point-shadow: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--photo-prod-box-pad-top: 1em;
|
||||
--photo-prod-box-pad-left: 2em;
|
||||
--photo-prod-box-pad-top: 1em;
|
||||
--photo-prod-box-pad-left: 2em;
|
||||
|
||||
--photo-prod-box-width: 30em;
|
||||
--photo-prod-point-size: 24px;
|
||||
|
||||
--photo-prod-box-radius-br: 0px 20px 20px 20px;
|
||||
--photo-prod-box-radius-bl: 20px 0px 20px 20px;
|
||||
--photo-prod-box-radius-tl: 20px 20px 0px 20px;
|
||||
--photo-prod-box-radius-tr: 20px 20px 20px 0px;
|
||||
|
||||
--photo-prod-point-desktop-top: 0%;
|
||||
--photo-prod-point-desktop-left: 0%;
|
||||
--photo-prod-point-tablet-top: 0%;
|
||||
--photo-prod-point-tablet-left: 0%;
|
||||
--photo-prod-point-mobile-top: 0%;
|
||||
--photo-prod-point-mobile-left: 0%;
|
||||
|
||||
--photo-box-offset: 1em;
|
||||
}
|
||||
--photo-prod-box-width: 30em;
|
||||
--photo-prod-point-size: 24px;
|
||||
|
||||
.idm_picture__module{
|
||||
position: relative;
|
||||
}
|
||||
.idm_picture__product{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.idm_picture__product:hover, .idm_picture__product.--show{
|
||||
z-index: 20;
|
||||
}
|
||||
.idm_picture__img{
|
||||
width: 100%;
|
||||
}
|
||||
.idm_picture__overlay{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
/* =========================
|
||||
--photo-prod-box-radius-br: 0px 20px 20px 20px;
|
||||
--photo-prod-box-radius-bl: 20px 0px 20px 20px;
|
||||
--photo-prod-box-radius-tl: 20px 20px 0px 20px;
|
||||
--photo-prod-box-radius-tr: 20px 20px 20px 0px;
|
||||
|
||||
--photo-prod-point-desktop-top: 0%;
|
||||
--photo-prod-point-desktop-left: 0%;
|
||||
--photo-prod-point-tablet-top: 0%;
|
||||
--photo-prod-point-tablet-left: 0%;
|
||||
--photo-prod-point-mobile-top: 0%;
|
||||
--photo-prod-point-mobile-left: 0%;
|
||||
|
||||
--photo-box-offset: 1em;
|
||||
}
|
||||
|
||||
.idm_picture__module {
|
||||
position: relative;
|
||||
}
|
||||
.idm_picture__product {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.idm_picture__product:hover,
|
||||
.idm_picture__product.--show {
|
||||
z-index: 20;
|
||||
}
|
||||
.idm_picture__img {
|
||||
width: 100%;
|
||||
}
|
||||
.idm_picture__overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
/* =========================
|
||||
PRODUCT POINT ( + )
|
||||
========================= */
|
||||
|
||||
.idm_picture__product_point{
|
||||
position: relative;
|
||||
width: var(--photo-prod-point-size);
|
||||
height: var(--photo-prod-point-size);
|
||||
border-radius: 50%;
|
||||
.idm_picture__product_point {
|
||||
position: relative;
|
||||
width: var(--photo-prod-point-size);
|
||||
height: var(--photo-prod-point-size);
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--photo-prod-box-bg);
|
||||
color: var(--photo-prod-box-text);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: var(--photo-prod-box-bg);
|
||||
color: var(--photo-prod-box-text);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 1.6em;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
font-size: 1.6em;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Pulsating halo */
|
||||
.idm_picture__product_point::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--photo-prod-point-shadow);
|
||||
/* Pulsating halo */
|
||||
.idm_picture__product_point::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--photo-prod-point-shadow);
|
||||
|
||||
animation: idmPulse 1.5s ease-in-out infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
animation: idmPulse 1.5s ease-in-out infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Optional: stop pulse on hover */
|
||||
.idm_picture__product:hover .idm_picture__product_point:before{
|
||||
animation-play-state: paused;
|
||||
}
|
||||
/* Optional: stop pulse on hover */
|
||||
.idm_picture__product:hover .idm_picture__product_point:before {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Focus accessibility */
|
||||
.idm_picture__product_point:focus-visible{
|
||||
outline: 2px solid #000;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
/* Focus accessibility */
|
||||
.idm_picture__product_point:focus-visible {
|
||||
outline: 2px solid #000;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
/* =========================
|
||||
PULSE ANIMATION
|
||||
========================= */
|
||||
@keyframes idmPulse{
|
||||
0%{
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
|
||||
@keyframes idmPulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
70%{
|
||||
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
|
||||
opacity: 0.8;
|
||||
|
||||
.product_info {
|
||||
background: var(--photo-prod-box-bg);
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
display: none;
|
||||
max-width: var(--photo-prod-box-width);
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
box-shadow: 0px 0px 10px 1px #000;
|
||||
}
|
||||
100%{
|
||||
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
|
||||
opacity: 0;
|
||||
@media (min-width: 757px) {
|
||||
.product_info {
|
||||
padding: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product_info{
|
||||
background: var(--photo-prod-box-bg);
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
display: none;
|
||||
max-width: var(--photo-prod-box-width);
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
box-shadow: 0px 0px 10px 1px #000;
|
||||
}
|
||||
@media (min-width: 757px){
|
||||
.product_info{
|
||||
padding: 1.5em;
|
||||
@media (min-width: 979px) {
|
||||
.product_info {
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 979px){
|
||||
.product_info{
|
||||
padding: 2em;
|
||||
|
||||
.product_info::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
|
||||
height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.product_info::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
|
||||
height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
|
||||
z-index: -1;
|
||||
}
|
||||
/*Ulozenie okna produktowego*/
|
||||
.product_info {
|
||||
bottom: var(--photo-prod-box-dir-t, auto);
|
||||
top: var(--photo-prod-box-dir-b, auto);
|
||||
right: var(--photo-prod-box-dir-l, auto);
|
||||
left: var(--photo-prod-box-dir-r, auto);
|
||||
|
||||
/*Ulozenie okna produktowego*/
|
||||
.product_info{
|
||||
bottom: var(--photo-prod-box-dir-t, auto);
|
||||
top: var(--photo-prod-box-dir-b, auto);
|
||||
right: var(--photo-prod-box-dir-l, auto);
|
||||
left: var(--photo-prod-box-dir-r, auto);
|
||||
|
||||
border-radius: var(--photo-prod-box-radius);
|
||||
}
|
||||
.product_info::before{
|
||||
top: var(--photo-prod-box-dir-t-before, auto);
|
||||
bottom: var(--photo-prod-box-dir-b-before, auto);
|
||||
right: var(--photo-prod-box-dir-r-before, auto);
|
||||
left: var(--photo-prod-box-dir-l-before, auto);
|
||||
}
|
||||
border-radius: var(--photo-prod-box-radius);
|
||||
}
|
||||
.product_info::before {
|
||||
top: var(--photo-prod-box-dir-t-before, auto);
|
||||
bottom: var(--photo-prod-box-dir-b-before, auto);
|
||||
right: var(--photo-prod-box-dir-r-before, auto);
|
||||
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"] {
|
||||
.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-mobile-x="r"] {
|
||||
.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-mobile-y="t"] {
|
||||
.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-mobile-y="b"] {
|
||||
.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-mobile-x="l"][data-dir-mobile-y="t"] {
|
||||
.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-mobile-x="r"][data-dir-mobile-y="t"] {
|
||||
.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-mobile-x="l"][data-dir-mobile-y="b"] {
|
||||
.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-mobile-x="r"][data-dir-mobile-y="b"] {
|
||||
.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="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
|
||||
}
|
||||
.product_info[data-dir-mobile-x="r"][data-dir-mobile-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
|
||||
}
|
||||
.product_info[data-dir-mobile-x="l"][data-dir-mobile-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
|
||||
}
|
||||
.product_info[data-dir-mobile-x="r"][data-dir-mobile-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
|
||||
}
|
||||
}
|
||||
@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="l"][data-dir-tablet-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
|
||||
}
|
||||
.product_info[data-dir-tablet-x="r"][data-dir-tablet-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
|
||||
}
|
||||
.product_info[data-dir-tablet-x="l"][data-dir-tablet-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.product_info[data-dir-desktop-x="r"][data-dir-desktop-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
|
||||
}
|
||||
.product_info[data-dir-desktop-x="l"][data-dir-desktop-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
|
||||
}
|
||||
.product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__product .product_info .product_name {
|
||||
font-size: 1.6em;
|
||||
color: var(--photo-prod-box-text);
|
||||
}
|
||||
.idm_picture__product .product_info .product_name:hover {
|
||||
color: var(--primary-color, #000) !important;
|
||||
}
|
||||
|
||||
.idm_picture__product .product_info .product_prices {
|
||||
font-size: 1.6em;
|
||||
color: var(--photo-prod-box-text);
|
||||
}
|
||||
.idm_picture__product .product_info .price.--main {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 979px) {
|
||||
: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;
|
||||
}
|
||||
}
|
||||
@media (max-width: 978px) {
|
||||
.idm_picture__product.--show .product_info {
|
||||
display: flex;
|
||||
animation: idmShowUp 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes idmShowUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__product {
|
||||
top: var(--photo-prod-point-mobile-top);
|
||||
left: var(--photo-prod-point-mobile-left);
|
||||
display: var(--photo-prod-point-mobile-display, block);
|
||||
}
|
||||
@media (min-width: 757px) {
|
||||
.idm_picture__product {
|
||||
top: var(--photo-prod-point-tablet-top);
|
||||
left: var(--photo-prod-point-tablet-left);
|
||||
display: var(--photo-prod-point-tablet-display, block);
|
||||
}
|
||||
}
|
||||
@media (min-width: 979px) {
|
||||
.idm_picture__product {
|
||||
top: var(--photo-prod-point-desktop-top);
|
||||
left: var(--photo-prod-point-desktop-left);
|
||||
display: var(--photo-prod-point-desktop-display, block);
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module .label_icons {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.idm_picture__module .icon-star:not(.--active)::before {
|
||||
content: "\f006";
|
||||
}
|
||||
.idm_picture__module .icon-star.--active {
|
||||
color: var(--opinions-star-active-color, #fac917);
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions__score {
|
||||
margin-left: 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions__count::before {
|
||||
content: "(";
|
||||
}
|
||||
.idm_picture__module .product_opinions__count::after {
|
||||
content: ")";
|
||||
}
|
||||
|
||||
.idm_picture__module :is(.add_to_basket, .add_to_basket__link) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
`}
|
||||
</style>
|
||||
<style>
|
||||
{`
|
||||
|
||||
.idm_picture__product_point{
|
||||
cursor: grab;
|
||||
}
|
||||
@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="l"][data-dir-tablet-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
|
||||
}
|
||||
.product_info[data-dir-tablet-x="r"][data-dir-tablet-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
|
||||
}
|
||||
.product_info[data-dir-tablet-x="l"][data-dir-tablet-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.product_info[data-dir-desktop-x="r"][data-dir-desktop-y="t"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
|
||||
}
|
||||
.product_info[data-dir-desktop-x="l"][data-dir-desktop-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
|
||||
}
|
||||
.product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] {
|
||||
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__product .product_info .product_name{
|
||||
font-size: 1.6em;
|
||||
color: var(--photo-prod-box-text);
|
||||
}
|
||||
.idm_picture__product .product_info .product_name:hover{
|
||||
color: var(--primary-color, #000)!important;
|
||||
}
|
||||
|
||||
.idm_picture__product .product_info .product_prices{
|
||||
font-size: 1.6em;
|
||||
color: var(--photo-prod-box-text);
|
||||
color: #000;
|
||||
}
|
||||
.idm_picture__product .product_info .price.--main{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media(min-width: 979px){
|
||||
: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;
|
||||
.label_icons > *{
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
background: #0090f6;
|
||||
font-weight: 600;
|
||||
padding: 4px 6px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
@media(max-width: 978px){
|
||||
.idm_picture__product.--show .product_info{
|
||||
display: flex;
|
||||
animation: idmShowUp 0.3s ease-in-out;
|
||||
|
||||
[class^="icon-"], [class*=" icon-"]{
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
.icon-star:before {
|
||||
content: "\f005" / "";
|
||||
}
|
||||
.product_opinions{
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.btn{
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #E11D48;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 1.2em;
|
||||
padding: 0.9em 1em;
|
||||
font-weight: normal;
|
||||
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn.--solid {
|
||||
background: #E11D48;
|
||||
border: 1px solid #E11D48;
|
||||
color: #fff;
|
||||
}
|
||||
.btn.--medium {
|
||||
font-size: 1.4em;
|
||||
padding: 1.25em 1.4em;
|
||||
}
|
||||
|
||||
@keyframes idmShowUp{
|
||||
from{
|
||||
opacity: 0;
|
||||
}
|
||||
to{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__product{
|
||||
top: var(--photo-prod-point-mobile-top);
|
||||
left: var(--photo-prod-point-mobile-left);
|
||||
display: var(--photo-prod-point-mobile-display, block);
|
||||
}
|
||||
@media(min-width: 757px){
|
||||
.idm_picture__product{
|
||||
top: var(--photo-prod-point-tablet-top);
|
||||
left: var(--photo-prod-point-tablet-left);
|
||||
display: var(--photo-prod-point-tablet-display, block);
|
||||
}
|
||||
}
|
||||
@media(min-width: 979px){
|
||||
.idm_picture__product{
|
||||
top: var(--photo-prod-point-desktop-top);
|
||||
left: var(--photo-prod-point-desktop-left);
|
||||
display: var(--photo-prod-point-desktop-display, block);
|
||||
}
|
||||
}
|
||||
|
||||
.idm_picture__module .label_icons{
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.idm_picture__module .icon-star:not(.--active)::before{
|
||||
content: "\f006";
|
||||
}
|
||||
.idm_picture__module .icon-star.--active{
|
||||
color: var(--opinions-star-active-color, #fac917);
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions__score{
|
||||
margin-left: 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.idm_picture__module .product_opinions__count::before{
|
||||
content: "(";
|
||||
}
|
||||
.idm_picture__module .product_opinions__count::after{
|
||||
content: ")";
|
||||
}
|
||||
|
||||
.idm_picture__module :is(.add_to_basket, .add_to_basket__link){
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.idm_picture__product_point{
|
||||
cursor: grab;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user