FrontendComponents/hotspots
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pokaz serie + pokaz producentow

Browse Source
This commit is contained in:
pawel.gaca
2025-12-17 12:46:48 +01:00
parent 61d6b024cc
commit 866cd4e2c3
4 changed files with 121 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
style.less
View File

@@ -85,6 +85,14 @@
margin-bottom: 2.5rem;
.skeleton(100%, auto, 100%, auto, 5px);
}
&_producer{
margin-bottom: 1rem;
.skeleton(100%, 2rem, 100%, 2rem, 0);
}
&_series{
margin-bottom: 1rem;
.skeleton(100%, 2rem, 100%, 2rem, 0);
}
&_opinions{
margin-bottom: 1rem;
.skeleton(75%, 2rem, 75%, 2rem, 0);
@@ -256,6 +264,17 @@
content: "\f006";
}
/* producenci */
.product__producer{
margin-bottom: 1rem;
display: block;
}
/* serie */
.product__series{
margin-bottom: 1rem;
display: block;
}
/* second image */
.product__image.--second{
position: absolute;
@@ -305,7 +324,7 @@
.idm__hotspot .product:has(.product__versions){
--idm-hotspot-version-height: 65px;
@media (min-width: 757px){
--idm-hotspot-version-height: 70px;
--idm-hotspot-version-height: 60px;
}
@media (min-width: 979px){
--idm-hotspot-version-height: 55px;
@@ -316,7 +335,6 @@
gap: 1rem;
z-index: 1;
background: #fff;
clip-path: inset(0% 0 100% 0);
position: absolute;
top: 0;
width: 100%;
@@ -324,7 +342,7 @@
padding: 0.3rem 1.5rem;
@media (min-width: 757px){
padding: 0.3rem 2.5rem;
grid-template-columns: repeat(var(--version-tablet-columns, 3), 1fr);
grid-template-columns: repeat(var(--version-tablet-columns, 4), 1fr);
}
@media (min-width: 979px){
padding: 0.3rem 1rem;
@@ -379,23 +397,33 @@
.label_icons, .product__versions{
transition: all 0.2s;
}
&:hover{
.product__versions, .label_icons{
transform: translateY(calc(-1 * var(--idm-hotspot-version-height)));
}
}
@media (min-width: 979px){
.idm__hotspot .product:has(.product__versions){
.product__versions{
clip-path: inset(0 0 0 0);
clip-path: inset(0% 0 100% 0);
}
&:hover{
.product__versions, .label_icons{
transform: translateY(calc(-1 * var(--idm-hotspot-version-height)));
}
.product__versions{
clip-path: inset(0 0 0 0);
}
}
}
}
}
@media (max-width: 978px){
.idm__hotspot .product:has(.product__versions){
.product__versions, .label_icons{
transform: translateY(calc(-1 * var(--idm-hotspot-version-height)));
transform: none;
}
.product__versions{
clip-path: inset(0 0 0 0);
position: static;
padding: 0.3rem 1rem;
}
}
}