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

punkty rwd

Browse Source
This commit is contained in:
Pawel33359
2026-01-02 14:39:16 +01:00
parent fa01cd97e3
commit df964a8088
16 changed files with 415 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);
@@ -14,10 +14,10 @@ function GenerateStyle() {
--photo-prod-point-size: 24px;
--photo-prod-box-radius: 20px;
--photo-prod-box-radius-rb: 0px 20px 20px 20px;
--photo-prod-box-radius-lb: 20px 0px 20px 20px;
--photo-prod-box-radius-lu: 20px 20px 0px 20px;
--photo-prod-box-radius-ru: 20px 20px 20px 0px;
--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%;
@@ -26,6 +26,14 @@ function GenerateStyle() {
--photo-prod-point-tablet-left: 0%;
--photo-prod-point-mobile-top: 0%;
--photo-prod-point-mobile-left: 0%;
--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{
@@ -38,14 +46,12 @@ function GenerateStyle() {
.idm_picture__img{
width: 100%;
}
.idm_picture__overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
/* =========================
PRODUCT POINT ( + )
========================= */
@@ -119,14 +125,56 @@ PULSE ANIMATION
flex-direction: column;
padding: var(--photo-prod-box-pad-top) var(--photo-prod-box-pad-left);
gap: 0.5em;
margin-left: var(--photo-prod-box-pad-left);
margin-top: var(--photo-prod-box-pad-top);
display: none;
max-width: var(--photo-prod-box-width);
border-radius: var(--photo-prod-box-radius-rb);
/* opacity: 0;
transition: opacity 0.3s; */
position: absolute;
width: max-content;
}
.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));
}
.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));
}
.product_info[data-direction-y="t"]::before{
top: 0;
}
.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[data-direction-y="t"][data-direction-x="l"]{
border-radius: var(--photo-prod-box-radius-tl);
}
.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);
}
.product_name{
@@ -172,6 +220,9 @@ PULSE ANIMATION
}
}
.idm_picture__product_point{
cursor: grab;
}