FrontendAplikacje/PhotoModule
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rozbudowa RWD

Browse Source
This commit is contained in:
pawel.gaca
2026-01-07 15:09:16 +01:00
parent df964a8088
commit e6a9465195
24 changed files with 728 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/features/htmlBuilder/generated/GenerateStyle.jsx
View File

@@ -13,7 +13,6 @@ function GenerateStyle() {
--photo-prod-box-width: 30em;
--photo-prod-point-size: 24px;
--photo-prod-box-radius: 20px;
--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;
@@ -29,11 +28,6 @@ function GenerateStyle() {
--photo-box-offset: 1em;
// --photo-box-offset-t: calc(-1 * var(--photo-box-offset));
// --photo-box-offset-b: calc(var(--photo-prod-point-size) + var(--photo-box-offset));
// --photo-box-offset-l: calc(var(--photo-prod-point-size) + var(--photo-box-offset));
// --photo-box-offset-r: calc(-1 * var(--photo-box-offset));
}
.idm_picture__module{
@@ -129,6 +123,8 @@ PULSE ANIMATION
max-width: var(--photo-prod-box-width);
position: absolute;
width: max-content;
box-shadow: 0px 0px 10px 1px #000;
}
.product_info::before{
content: "";
@@ -136,61 +132,51 @@ PULSE ANIMATION
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));
}
.product_info[data-direction-y="t"]{
bottom: calc(100% + var(--photo-box-offset));
}
.product_info[data-direction-y="b"]{
top: calc(100% + var(--photo-box-offset));
}
.product_info[data-direction-x="l"]{
right: calc(100% + var(--photo-box-offset));
}
.product_info[data-direction-x="r"]{
left: calc(100% + var(--photo-box-offset));
z-index: -1;
}
.product_info[data-direction-y="t"]::before{
top: 0;
.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[data-direction-y="b"]::before{
bottom: 0;
}
.product_info[data-direction-x="l"]::before{
left: 0;
}
.product_info[data-direction-x="r"]::before{
right: 0;
.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-direction-y="t"][data-direction-x="l"]{
border-radius: var(--photo-prod-box-radius-tl);
.idm_picture__product .product_info .product_name{
font-size: 1.6em;
color: var(--photo-prod-box-text);
}
.product_info[data-direction-y="t"][data-direction-x="r"]{
border-radius: var(--photo-prod-box-radius-tr);
}
.product_info[data-direction-y="b"][data-direction-x="l"]{
border-radius: var(--photo-prod-box-radius-bl);
}
.product_info[data-direction-y="b"][data-direction-x="r"]{
border-radius: var(--photo-prod-box-radius-br);
.idm_picture__product .product_info .product_name:hover{
color: var(--primary-color, #000)!important;
}
.product_name{
.idm_picture__product .product_info .product_price{
font-size: 1.6em;
color: var(--photo-prod-box-text);
}
.product_price{
font-size: 1.6em;
color: var(--photo-prod-box-text);
@media(min-width: 979px){
.idm_picture__product:hover .product_info{
display: flex;
animation: idmShowUp 0.3s ease-in-out;
/* opacity: 1; */
}
}
.idm_picture__product:hover .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; */
}
}
@keyframes idmShowUp{
@@ -206,23 +192,24 @@ PULSE ANIMATION
.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__product_point{
cursor: grab;
}