diff --git a/css/builder.css b/css/builder.css
index 07263ded902c5f47bf21bf0e91f27f59a1ffa437..9a56eabb3c665aeb83e04eec61158f0df102314e 100644
--- a/css/builder.css
+++ b/css/builder.css
@@ -1,3 +1,18 @@
+:root {
+ --lp-hover-outline-color: #0550E6;
+ --lp-hover-outline-width: 1px;
+ --lp-focus-outline-color: #0550E6;
+ --lp-focus-outline-width: 3px;
+
+ --lp-controls-bg-color: #fff;
+ --lp-controls-fg-color: #000;
+ --lp-controls-bg-color--layout: #0550E6;
+ --lp-controls-fg-color--layout: #fff;
+
+ --lp-btn-bg-color: #00659b;
+ --lp-btn-fg-color: #fff;
+}
+
.lp-builder {
position: relative;
min-height: 30px;
@@ -25,38 +40,127 @@
.lpb-empty-container__wrapper .lpb-section-menu__wrapper {
bottom: 20px;
}
+.js-lpb-component {
+ position: relative;
+}
+.lpb-hover-label {
+ background: #888;
+ text-transform: uppercase;
+ font-size: .7em;
+ letter-spacing: 2px;
+ color: white;
+ padding: 2px 6px 2px 7px;
+}
+
+/**
+ * Highlight states.
+ */
+
+ /* - Outlines - */
+.js-lpb-component[data-hover="true"] {
+ outline: var(--lp-hover-outline-width) solid var(--lp-hover-outline-color);
+}
+.js-lpb-component[data-focus="true"] {
+ outline: var(--lp-focus-outline-width) solid var(--lp-focus-outline-color);
+}
+.js-lpb-component[data-focus="true"] .js-lpb-region {
+ outline: 1px dotted blue;
+}
+.js-lpb-component[data-focus="true"] .js-lpb-component:not([data-focus="true"]) .js-lpb-region {
+ outline: none;
+}
+.js-lpb-ui {
+ transition: opacity .25s linear;
+}
+.js-lpb-component:not([data-focus="true"]) .js-lpb-ui,
+.js-lpb-component[data-focus="true"] .js-lpb-component:not([data-focus="true"]) .js-lpb-ui {
+ visibility: hidden;
+}
+.js-lpb-component[data-focus="true"] .js-lpb-ui {
+ visibility: visible;
+}
+.js-lpb-component[data-focus="true"] .lpb-controls {
+ opacity: 1;
+}
+.js-lpb-component[data-focus="true"]:hover > .js-lpb-ui {
+ opacity: 1;
+}
+.js-lpb-component[data-focus="true"] .js-lpb-region:hover > .js-lpb-ui {
+ opacity: 1;
+}
+
+
+
+
+
+
+
+
+
+
+
+
.is-dragging .js-lpb-region,
.is-navigating .js-lpb-region {
- outline: 1px dotted blue;
+ /* outline: 1px dotted blue; */
}
-.is-dragging .t-reversed .js-lpb-region {
+
+/* .is-dragging .t-reversed .js-lpb-region {
outline: 1px dotted white;
}
-.js-lpb-component {
- position: relative;
- transition: all 0.15s linear;
+.lp-builder:not(.is-navigating) .js-lpb-component-list .js-lpb-component:hover,
+.lp-builder:not(.is-navigating) .js-lpb-component-list .js-lpb-component:has([data-focus="true"]) {
outline: 1px solid blue;
- outline-color: transparent;
}
+.js-lpb-component[data-focus="true"] .js-lpb-region
+.js-lpb-component[data-focus="true"] .js-lpb-region {
+ outline: 1px dotted blue;
+}
+.js-lpb-component[data-focus="true"] .js-lpb-component:not([data-focus="true"]) .js-lpb-region {
+ outline: none;
+}
+
+.lp-builder:not(.is-navigating) .js-lpb-component-list .js-lpb-component[data-focus="true"] {
+ outline: 3px solid blue;
+}
+.lp-builder:not(.is-navigating)
+ .js-lpb-component-list
+ .js-lpb-component:not([data-focus="true"])
+ .js-lpb-component:not([data-focus="true"]) {
+ &:hover {
+ outline: transparent;
+ }
+ outline-color: transparent;
+ }
+
+.js-lpb-component:not([data-focus="true"]) > .js-lpb-ui {
+ display: none;
+}
+.js-lpb-component[data-focus="true"] > .js-lpb-ui {
+ opacity: 1;
+} */
+
+
+
.lp-builder:not(.is-navigating) .js-lpb-component:hover,
.lp-builder:not(.is-navigating) .js-lpb-component:focus-within {
- outline: 1px solid blue;
+ /* outline: 1px solid blue; */
}
.js-lpb-component.is-navigating {
- outline: 3px solid blue;
+ /* outline: 3px solid blue; */
}
.js-lpb-component {
- cursor: grab;
+
}
-.js-lpb-component:hover .js-lpb-region,
+.js-lpb-component[data-focus="true"]:hover .js-lpb-region,
.js-lpb-component:focus-within .js-lpb-region {
- outline: 1px dotted rgba(0, 0, 255, 0.5);
+ /* outline: 1px dotted rgba(0, 0, 255, 0.5); */
}
.lp-builder:not(.is-navigating) .js-lpb-component:hover .js-lpb-region:hover,
.lp-builder:not(.is-navigating)
.js-lpb-component:focus-within
.js-lpb-region:focus-within {
- outline: 1px solid rgba(0, 0, 255, 0.5);
+ /* outline: 1px solid rgba(0, 0, 255, 0.5); */
}
.lpb-layout {
padding: 20px;
@@ -78,33 +182,39 @@
position: absolute;
z-index: 80;
top: 0;
- left: 0;
+ left: 50%;
+ transform: translate(-50%, calc(-100% - 15px));
display: flex;
- padding: 5px;
+ padding: 2px 2px 2px 15px;
cursor: default;
opacity: 0;
- border-radius: 0 0 6px 0;
- background-color: #fff;
+ border-radius: 4px;
+ background-color: var(--lp-controls-bg-color, #fff);
+ color: var(--lp-controls-fg-color, #000);
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.25),
0 1px 3px rgba(0, 0, 0, 0.25);
+
+ & .lpb-controls-label {
+ padding: 0 5px 0 0;
+ text-transform: uppercase;
+ font-size: .7em;
+ letter-spacing: 2px;
+ font-weight: bold;
+ }
}
.lpb-controls:hover,
.lpb-controls:focus-within {
z-index: 90;
}
.lpb-controls.is-layout {
- top: -40px;
- right: -1px;
- left: auto;
- color: #fff;
- border-radius: 6px 6px 0 0;
- background-color: #00659b;
+ background-color: var(--lp-controls-bg-color--layout, blue);
+ color: var(--lp-controls-fg-color--layout, #fff);
box-shadow: none;
}
.lp-builder:not(.is-navigating) .js-lpb-component:hover > .lpb-controls,
.lp-builder:not(.is-navigating) .js-lpb-component:focus-within > .lpb-controls {
- opacity: 1;
+ /* opacity: 1; */
}
.lpb-controls a {
font-size: 0;
@@ -114,7 +224,6 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 30px;
}
-.lpb-drag,
.lpb-up,
.lpb-down,
.lpb-edit,
@@ -127,22 +236,27 @@
cursor: pointer;
opacity: 0.5;
border-radius: 3px;
+ &::before {
+ display: block;
+ color: var(--lp-controls-fg-color);
+ background-color: currentColor;
+ width: 30px;
+ height: 30px;
+ margin: 0;
+ padding: 0;
+ content: "";
+ border-radius: 3px;
+ }
}
-.is-layout .lpb-drag,
.is-layout .lpb-up,
.is-layout .lpb-down,
.is-layout .lpb-edit,
.is-layout .lpb-duplicate,
.is-layout .lpb-delete {
opacity: 1;
-}
-.lpb-drag {
- cursor: grab;
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 11C13.3284 11 14 10.3284 14 9.5C14 8.67157 13.3284 8 12.5 8C11.6716 8 11 8.67157 11 9.5C11 10.3284 11.6716 11 12.5 11Z' fill='%23000000'/%3E%3Cpath d='M12.5 16C13.3284 16 14 15.3284 14 14.5C14 13.6716 13.3284 13 12.5 13C11.6716 13 11 13.6716 11 14.5C11 15.3284 11.6716 16 12.5 16Z' fill='%23000000'/%3E%3Cpath d='M14 19.5C14 20.3284 13.3284 21 12.5 21C11.6716 21 11 20.3284 11 19.5C11 18.6716 11.6716 18 12.5 18C13.3284 18 14 18.6716 14 19.5Z' fill='%23000000'/%3E%3Cpath d='M17.5 11C18.3284 11 19 10.3284 19 9.5C19 8.67157 18.3284 8 17.5 8C16.6716 8 16 8.67157 16 9.5C16 10.3284 16.6716 11 17.5 11Z' fill='%23000000'/%3E%3Cpath d='M19 14.5C19 15.3284 18.3284 16 17.5 16C16.6716 16 16 15.3284 16 14.5C16 13.6716 16.6716 13 17.5 13C18.3284 13 19 13.6716 19 14.5Z' fill='%23000000'/%3E%3Cpath d='M17.5 21C18.3284 21 19 20.3284 19 19.5C19 18.6716 18.3284 18 17.5 18C16.6716 18 16 18.6716 16 19.5C16 20.3284 16.6716 21 17.5 21Z' fill='%23000000'/%3E%3C/svg%3E%0A");
- background-size: cover;
-}
-.is-layout .lpb-drag {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 11C13.3284 11 14 10.3284 14 9.5C14 8.67157 13.3284 8 12.5 8C11.6716 8 11 8.67157 11 9.5C11 10.3284 11.6716 11 12.5 11Z' fill='white'/%3E%3Cpath d='M12.5 16C13.3284 16 14 15.3284 14 14.5C14 13.6716 13.3284 13 12.5 13C11.6716 13 11 13.6716 11 14.5C11 15.3284 11.6716 16 12.5 16Z' fill='white'/%3E%3Cpath d='M14 19.5C14 20.3284 13.3284 21 12.5 21C11.6716 21 11 20.3284 11 19.5C11 18.6716 11.6716 18 12.5 18C13.3284 18 14 18.6716 14 19.5Z' fill='white'/%3E%3Cpath d='M17.5 11C18.3284 11 19 10.3284 19 9.5C19 8.67157 18.3284 8 17.5 8C16.6716 8 16 8.67157 16 9.5C16 10.3284 16.6716 11 17.5 11Z' fill='white'/%3E%3Cpath d='M19 14.5C19 15.3284 18.3284 16 17.5 16C16.6716 16 16 15.3284 16 14.5C16 13.6716 16.6716 13 17.5 13C18.3284 13 19 13.6716 19 14.5Z' fill='white'/%3E%3Cpath d='M17.5 21C18.3284 21 19 20.3284 19 19.5C19 18.6716 18.3284 18 17.5 18C16.6716 18 16 18.6716 16 19.5C16 20.3284 16.6716 21 17.5 21Z' fill='white'/%3E%3C/svg%3E%0A");
+ &::before {
+ color: var(--lp-controls-fg-color--layout);
+ }
}
.lpb-up:hover,
.lpb-down:hover,
@@ -175,19 +289,13 @@
.is-layout .lpb-delete:focus {
outline-color: white;
}
-.lpb-up {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 18L15 12L21 18H9Z' fill='%23000000'/%3E%3C/svg%3E%0A");
- background-size: cover;
-}
-.is-layout .lpb-up {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 18L15 12L21 18H9Z' fill='white'/%3E%3C/svg%3E%0A");
-}
-.lpb-down {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 12L15 18L9 12L21 12Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='12' height='6' fill='white' transform='translate(21 18) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
- background-size: cover;
+.lpb-up::before {
+ mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 18L15 12L21 18H9Z' fill='currentColor'/%3E%3C/svg%3E%0A");
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 18L15 12L21 18H9Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}
-.is-layout .lpb-down {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 12L15 18L9 12L21 12Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='12' height='6' fill='white' transform='translate(21 18) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+.lpb-down::before {
+ mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 12L15 18L9 12L21 12Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='12' height='6' fill='currentColor' transform='translate(21 18) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 12L15 18L9 12L21 12Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='12' height='6' fill='currentColor' transform='translate(21 18) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.lpb-down[tabindex="-1"]:hover,
.lpb-up[tabindex="-1"]:hover {
@@ -199,26 +307,17 @@
cursor: default;
opacity: 0.3;
}
-.lpb-edit {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='%23000000'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='%23000000'/%3E%3C/svg%3E%0A");
- background-size: cover;
-}
-.is-layout .lpb-edit {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='white'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='white'/%3E%3C/svg%3E%0A");
+.lpb-edit::before {
+ mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='%23000000'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='currentColor'/%3E%3C/svg%3E%0A");
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='%23000000'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}
-.lpb-duplicate {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7,8C21.4,8,22,8.6,22,9.3v7.9c0,0.7-0.6,1.3-1.3,1.3h-7.9c-0.7,0-1.3-0.6-1.3-1.3V9.3c0-0.7,0.6-1.3,1.3-1.3H20.7 M12.8,19.4c-1.2,0-2.2-1-2.2-2.2v-5.7H9.3c-0.7,0-1.3,0.6-1.3,1.3v7.9C8,21.4,8.6,22,9.3,22h7.9c0.7,0,1.3-0.6,1.3-1.3v-1.3H12.8z' fill='black' /%3E%3C/svg%3E%0A");
- background-size: cover;
-}
-.is-layout .lpb-duplicate {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7,8C21.4,8,22,8.6,22,9.3v7.9c0,0.7-0.6,1.3-1.3,1.3h-7.9c-0.7,0-1.3-0.6-1.3-1.3V9.3c0-0.7,0.6-1.3,1.3-1.3H20.7 M12.8,19.4c-1.2,0-2.2-1-2.2-2.2v-5.7H9.3c-0.7,0-1.3,0.6-1.3,1.3v7.9C8,21.4,8.6,22,9.3,22h7.9c0.7,0,1.3-0.6,1.3-1.3v-1.3H12.8z' fill='white' /%3E%3C/svg%3E%0A");
-}
-.lpb-delete {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 8H16C16.5523 8 17 8.44772 17 9H21V11H9V9H13C13 8.44772 13.4477 8 14 8ZM10 12H20L19.09 21.0995C19.0389 21.6107 18.6088 22 18.095 22H11.905C11.3912 22 10.9611 21.6107 10.91 21.0995L10 12Z' fill='%23000000'/%3E%3C/svg%3E%0A");
- background-size: cover;
+.lpb-duplicate::before {
+ mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7,8C21.4,8,22,8.6,22,9.3v7.9c0,0.7-0.6,1.3-1.3,1.3h-7.9c-0.7,0-1.3-0.6-1.3-1.3V9.3c0-0.7,0.6-1.3,1.3-1.3H20.7 M12.8,19.4c-1.2,0-2.2-1-2.2-2.2v-5.7H9.3c-0.7,0-1.3,0.6-1.3,1.3v7.9C8,21.4,8.6,22,9.3,22h7.9c0.7,0,1.3-0.6,1.3-1.3v-1.3H12.8z' fill='black' /%3E%3C/svg%3E%0A");
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7,8C21.4,8,22,8.6,22,9.3v7.9c0,0.7-0.6,1.3-1.3,1.3h-7.9c-0.7,0-1.3-0.6-1.3-1.3V9.3c0-0.7,0.6-1.3,1.3-1.3H20.7 M12.8,19.4c-1.2,0-2.2-1-2.2-2.2v-5.7H9.3c-0.7,0-1.3,0.6-1.3,1.3v7.9C8,21.4,8.6,22,9.3,22h7.9c0.7,0,1.3-0.6,1.3-1.3v-1.3H12.8z' fill='black' /%3E%3C/svg%3E%0A");
}
-.is-layout .lpb-delete {
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 8H16C16.5523 8 17 8.44772 17 9H21V11H9V9H13C13 8.44772 13.4477 8 14 8ZM10 12H20L19.09 21.0995C19.0389 21.6107 18.6088 22 18.095 22H11.905C11.3912 22 10.9611 21.6107 10.91 21.0995L10 12Z' fill='white'/%3E%3C/svg%3E%0A");
+.lpb-delete::before {
+ mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 8H16C16.5523 8 17 8.44772 17 9H21V11H9V9H13C13 8.44772 13.4477 8 14 8ZM10 12H20L19.09 21.0995C19.0389 21.6107 18.6088 22 18.095 22H11.905C11.3912 22 10.9611 21.6107 10.91 21.0995L10 12Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 8H16C16.5523 8 17 8.44772 17 9H21V11H9V9H13C13 8.44772 13.4477 8 14 8ZM10 12H20L19.09 21.0995C19.0389 21.6107 18.6088 22 18.095 22H11.905C11.3912 22 10.9611 21.6107 10.91 21.0995L10 12Z' fill='%23000000'/%3E%3C/svg%3E%0A");
}
.lpb-btn {
position: absolute;
@@ -253,25 +352,19 @@
position: absolute;
z-index: 80;
left: 50%;
- width: 24px;
- height: 24px;
+ width:20px;
+ height: 20px;
margin: auto;
cursor: pointer;
- transition: all 0.15s linear;
transform: translateX(-50%);
- border: 3px solid white;
- border-radius: 6px;
- background-color: #fff;
- background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.5' fill-rule='evenodd' clip-rule='evenodd' d='M13 6V11H18V13H13V18H11V12.999L6 13V11L11 10.999V6H13Z' fill='%23130F13'/%3E%3C/svg%3E%0A");
+ border-radius: 100%;
+ background-color: blue;
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill-rule='evenodd' clip-rule='evenodd' d='M13 6V11H18V13H13V18H11V12.999L6 13V11L11 10.999V6H13Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
+ fill: white;
background-size: cover;
- box-shadow:
+ /* box-shadow:
0 1px 1px rgba(0, 0, 0, 0.25),
- 0 1px 3px rgba(0, 0, 0, 0.25);
-}
-.lpb-btn--add:hover {
- opacity: 1;
- background-color: #e1e0e1;
- background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 6V11H18V13H13V18H11V12.999L6 13V11L11 10.999V6H13Z' fill='%23130F13'/%3E%3C/svg%3E%0A");
+ 0 1px 3px rgba(0, 0, 0, 0.25); */
}
.lpb-btn--add:hover,
.lpb-btn:hover,
@@ -291,21 +384,22 @@
transform: translate(-50%, -50%);
}
.lpb-btn--add.before {
- top: -15px;
- transform: translateX(-50%);
+ top: 0;
+ transform: translate(-50%, calc(-50% - 1.5px));
}
.lpb-btn--add.after {
- bottom: -16px;
+ bottom: 0;
+ transform: translate(-50%, calc(50% + 1.5px));
}
.lp-builder:not(.is-navigating) .js-lpb-component:hover > .lpb-btn--add,
.lp-builder:not(.is-navigating) .js-lpb-component:focus-within > .lpb-btn--add {
- visibility: visible;
- opacity: 1;
+ /* visibility: visible;
+ opacity: 1; */
}
.lp-builder:not(.is-navigating) .js-lpb-region:hover > .lpb-btn--add,
.lp-builder:not(.is-navigating) .js-lpb-region:focus-within > .lpb-btn--add {
- visibility: visible;
- opacity: 1;
+ /* visibility: visible;
+ opacity: 1; */
}
.js-lpb-component + .lpb-btn--add {
display: none;
@@ -369,7 +463,7 @@ a.lpb-enable-button::before {
content: "";
opacity: 0.5;
border-radius: 3px;
- background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='white'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='white'/%3E%3C/svg%3E%0A");
+ background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='currentColor'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='currentColor'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: 50% 50%;
}
diff --git a/js/builder.js b/js/builder.js
index 2b0e7a62ba1773ef3ab0b52071a95cfd7dba55d1..05ffc63dd18a96b80e5811d7df9acb6d7c80dad9 100644
--- a/js/builder.js
+++ b/js/builder.js
@@ -1,5 +1,97 @@
(($, Drupal, debounce, Sortable, once) => {
const idAttr = 'data-lpb-id';
+
+ function unfocusComponents() {
+ document.querySelectorAll('[data-focus="true"]').forEach((element) => {
+ element.removeAttribute('data-focus');
+ });
+ document.querySelectorAll('[data-focus-within="true"]').forEach((element) => {
+ element.removeAttribute('data-focus-within');
+ });
+ }
+
+ function focusComponent(element) {
+ document.querySelector('.lpb-hover-label')?.remove();
+ // Add the data-focus attribute to the element.
+ element.setAttribute('data-focus', 'true');
+ element.setAttribute('data-focus-within', 'true');
+ // Add the data-focus-within attribute to all parent elements.
+ let parent = element.parentNode.closest('.js-lpb-component');
+ while (parent) {
+ parent.setAttribute('data-focus-within', 'true');
+ parent = parent.parentNode.closest('.js-lpb-component');
+ }
+ }
+
+ /**
+ * Toggles the focus to a .js-lpb-component element.
+ *
+ * @param {HTMLElement} element The element within a layout that was clicked.
+ */
+ function selectComponent(element) {
+ while (
+ element?.parentNode?.closest('.js-lpb-component') &&
+ 'true' !== element.parentNode.closest('.js-lpb-component')?.getAttribute('data-focus-within')
+ ) {
+ element = element.parentNode.closest('.js-lpb-component');
+ }
+ unfocusComponents();
+ if (element) {
+ focusComponent(element);
+ }
+ }
+
+ function hoverComponent(element) {
+ // Remove hover from all components.
+ Array.from(document.querySelectorAll('[data-hover="true"]')).forEach((element) => {
+ element.removeAttribute('data-hover');
+ });
+ if (!element) {
+ return;
+ }
+ // Go to top-most component that does not have the "data-focus" attribute.
+ while (
+ element?.parentNode?.closest('.js-lpb-component') &&
+ 'true' !== element.parentNode.closest('.js-lpb-component')?.getAttribute('data-focus-within')
+ ) {
+ element = element.parentNode.closest('.js-lpb-component');
+ }
+ // Add hover to the element.
+ if (element && !element.getAttribute('data-focus')) {
+ element.setAttribute('data-hover', 'true');
+ const hoverLabel = element.querySelector('.lpb-controls-label')?.textContent;
+ if (hoverLabel) {
+ const hoverLabelElement = document.querySelector('.lpb-hover-label') ||
+ document.body.appendChild(Object.assign(document.createElement('div'), { textContent: hoverLabel, className: 'lpb-hover-label' }));
+ hoverLabelElement.textContent = hoverLabel;
+ // Sett hoverLabelElement position to absolute and mouseX and mouseY.
+ hoverLabelElement.style.position = 'absolute';
+ hoverLabelElement.style.left = `${event.pageX + 10}px`;
+ hoverLabelElement.style.top = `${event.pageY + 10}px`;
+ }
+ }
+ else {
+ document.querySelector('.lpb-hover-label')?.remove();
+ }
+ }
+
+ document.addEventListener('mouseup', (event) => {
+ const element = event.target.closest('.js-lpb-component');
+ if (element) {
+ return selectComponent(element);
+ } else {
+ return unfocusComponents();
+ }
+ });
+
+ document.addEventListener('mousemove', (event) => {
+ return hoverComponent(event.target.closest('.js-lpb-component'));
+ });
+
+ document.addEventListener('scroll', () => {
+ document.querySelector('.lpb-hover-label')?.remove();
+ });
+
/**
* Attaches UI elements to $container.
* @param {jQuery} $container
@@ -168,9 +260,9 @@
.forEach((buttonElement) => {
const regionElement = buttonElement.closest('.js-lpb-region');
if (regionElement?.querySelector('.js-lpb-component')) {
- buttonElement.style.display = 'none';
+ // buttonElement.style.display = 'none';
} else {
- buttonElement.style.display = 'block';
+ // buttonElement.style.display = 'block';
}
});
}
diff --git a/layout_paragraphs.module b/layout_paragraphs.module
index 0d2ae300f10667dc83e4146cbca0929537f79b99..6a159f6e0c2087d655a07d7490935f4bee2ff023 100644
--- a/layout_paragraphs.module
+++ b/layout_paragraphs.module
@@ -490,6 +490,16 @@ function _layout_paragraphs_get_paragraphs(ParagraphInterface $paragraph) {
* Implements hook_library_info_alter().
*/
function layout_paragraphs_library_info_alter(&$libraries, $extension) {
+
+ if ($extension == 'gin') {
+ if (isset($libraries['layout_paragraphs'])) {
+ unset($libraries['layout_paragraphs']['css']['component']);
+ }
+ if (isset($libraries['layout_paragraphs2'])) {
+ unset($libraries['layout_paragraphs2']['css']['component']);
+ }
+ }
+
if ($extension !== 'layout_paragraphs') {
return;
}