halleyx-ui-framework 1.0.4

package/dist/src/assets/styles/visualbuilder.scss

@@ -0,0 +1,493 @@
+.builder-parent {
+.parent-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  //   height: 100%;
+  align-items: flex-end;
+  .top,
+  .bottom {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    // height: 100%;
+  }
+}
+.groups {
+  margin: 8px 4px 8px 4px;
+  //   padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  .left-5 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 38px;
+    hr {
+      display: block;
+      height: 1px;
+      border: 0;
+      border-top: 1px dashed #a6a6a6;
+      margin: 1em 0;
+      padding: 0;
+      width: 50px;
+    }
+  }
+  .right-5 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    .top-right-5 {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      padding: 8px;
+      background: #ffff;
+      border-radius: 5px;
+      border: 1px solid #d8d8d8;
+      .left-6 {
+        // padding: 50px 0 50px 0;
+        .left-6-inner {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          border-right: 1px dashed #a6a6a6;
+          height: 100%;
+        }
+      }
+      .right-6 {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        .ggroup {
+          display: flex;
+          flex-direction: row;
+          // justify-content: center;
+          // background: #d8d8d8;
+          margin: 4px 0 4px 0;
+          // padding: 8px;
+          width: 100%;
+          .left-7 {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            hr {
+              display: block;
+              height: 1px;
+              border: 0;
+              border-top: 1px dashed #a6a6a6;
+              margin: 1em 0;
+              padding: 0;
+              width: 50px;
+            }
+          }
+          .right-7 {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            background: #fff;
+            border-radius: 5px;
+            padding-left: 8px;
+            // justify-content: center;
+            .trial {
+              display: flex;
+              flex-direction: row;
+              hr {
+                display: block;
+                height: 1px;
+                border: 0;
+                border-top: 1px dashed #a6a6a6;
+                margin: 1em 0;
+                padding: 0;
+                width: 50px;
+              }
+              .left-3 {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 30px 0 30px 0;
+
+                .left-3-inner {
+                  border-right: 1px dashed #a6a6a6;
+                  height: 100%;
+                  display: flex;
+                  align-items: center;
+                }
+              }
+
+              .right-3 {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                .conditions {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: center;
+                  width: 100%;
+                  .left-2 {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    hr {
+                      display: block;
+                      height: 1px;
+                      border: 0;
+                      border-top: 1px dashed #a6a6a6;
+                      margin: 1em 0;
+                      padding: 0;
+                      width: 50px;
+                    }
+                  }
+                  .right-2 {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    width: 100%;
+                    .exp-container {
+                      display: flex;
+                      flex-direction: row;
+                      margin: 8px;
+                      .exp-set {
+                        width: 100%;
+                        // border: 1px solid #d8d8d8;
+                        display: flex;
+                        flex-direction: row;
+                        border-radius: 5px;
+
+                        .select-lhs,
+                        .select-rhs {
+                          width: 40%;
+                          margin-right: 8px;
+                        }
+
+                        .select-op {
+                          width: 20%;
+                          margin-right: 8px;
+                        }
+                        .actions {
+                          display: flex;
+                          flex-direction: row;
+                          align-items: center;
+                          .icon-plus-circle-filled {
+                            color: var(--hlx-color-primary);
+                            font-size: 24px;
+                            margin-right: 8px;
+                          }
+                          .icon-trash-regular {
+                            color: #a6a6a6;
+                            font-size: 24px;
+                          }
+                          i {
+                            cursor: pointer;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .bottom-right-5 {
+    display: flex;
+    margin-top: 8px;
+    margin-left: auto;
+  }
+}
+.level2-container {
+  margin: 10px;
+  padding: 10px;
+  background: #f7f7f7;
+  border-radius: 5px;
+  width: 100%;
+  display: flex;
+  .left-left {
+    width: 50px;
+
+    // padding-bottom: 50px;
+    .border-2 {
+      border-left: 1px dashed #a6a6a6;
+      height: 100%;
+      border-top: 1px dashed #a6a6a6;
+      border-bottom: 1px dashed #a6a6a6;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .right-right {
+    width: 100%;
+  }
+}
+.level3-container {
+  margin: 10px;
+  padding: 10px;
+  background: #fff;
+  border-radius: 5px;
+  width: 100%;
+  display: flex;
+  .left-left-left {
+    width: 50px;
+
+    // padding-bottom: 50px;
+    .border-3 {
+      border-left: 1px dashed #a6a6a6;
+      height: 100%;
+      border-top: 1px dashed #a6a6a6;
+      border-bottom: 1px dashed #a6a6a6;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .right-right-right {
+    width: 100%;
+  }
+}
+.level4-container {
+  margin: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  background: #f7f7f7;
+  border-radius: 5px;
+  width: 100%;
+  display: flex;
+  .left-left-left-left {
+    width: 50px;
+
+    // padding-bottom: 50px;
+    .border-4 {
+      border-left: 1px dashed #a6a6a6;
+      height: 100%;
+      border-top: 1px dashed #a6a6a6;
+      border-bottom: 1px dashed #a6a6a6;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .right-right-right-right {
+    width: 100%;
+  }
+}
+.level5-container {
+  margin: 10px;
+  padding: 10px;
+  background: #fff;
+  border-radius: 5px;
+  width: 100%;
+  display: flex;
+  .left-left-left-left-left {
+    width: 50px;
+
+    // padding-bottom: 50px;
+    .border-5 {
+      border-left: 1px dashed #a6a6a6;
+      height: 100%;
+      border-top: 1px dashed #a6a6a6;
+      border-bottom: 1px dashed #a6a6a6;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .right-right-right-right-right {
+    width: 100%;
+  }
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  //   background: lightblue;
+  // height: 100%;
+
+  .left {
+  }
+  .right {
+    display: flex;
+    width: 100%;
+    .top-1 {
+      width: 100%;
+
+      .level {
+        display: flex;
+        flex-direction: row;
+
+        .left-1 {
+          // width: 2px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          hr {
+            display: block;
+            height: 1px;
+            border: 0;
+            border-top: 1px dashed #a6a6a6;
+            margin: 1em 0;
+            padding: 0;
+            width: 50px;
+          }
+        }
+        .right-1 {
+          width: 100%;
+          background: #fff;
+          border-radius: 5px;
+          padding: 4px 8px 4px 8px;
+          display: flex;
+          flex-direction: row;
+          .left-4 {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 66px 0 66px 0;
+            // height: 100%;
+
+            .left-4-inner {
+              border-right: 1px dashed #a6a6a6;
+              height: 100%;
+              display: flex;
+              align-items: center;
+            }
+          }
+          .right-4 {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+.bottom {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.box,
+.boxx,
+.boxxx {
+  height: 50px;
+  width: 50px;
+  // background: red;
+  position: relative;
+  margin-right: auto;
+  //   right: 45px;
+  border: 1px solid var(--hlx-color-primary);
+  box-sizing: border-box;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  justify-content: center;
+  color: var(--hlx-color-primary);
+  background: #fff;
+  left: 25px;
+  .grp-and {
+    height: 25px;
+    padding-left: 11px;
+    padding-top: 2.5px;
+    cursor: pointer;
+  }
+  .grp-or {
+    height: 25px;
+    padding-left: 14px;
+    padding-top: 2.5px;
+    cursor: pointer;
+  }
+  .selected-grp {
+    background: var(--hlx-color-primary);
+    color: #fff;
+  }
+}
+.boxxxx {
+  height: 50px;
+  width: 50px;
+  // background: red;
+  position: relative;
+  margin-right: auto;
+  //   right: 45px;
+  border: 1px solid var(--hlx-color-primary);
+  box-sizing: border-box;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  justify-content: center;
+  color: var(--hlx-color-primary);
+  background: #fff;
+  right: 25px;
+  .grp-and {
+    height: 25px;
+    padding-left: 11px;
+    padding-top: 2.5px;
+    cursor: pointer;
+  }
+  .grp-or {
+    height: 25px;
+    padding-left: 14px;
+    padding-top: 2.5px;
+    cursor: pointer;
+  }
+  .selected-grp {
+    background: var(--hlx-color-primary);
+    color: #fff;
+  }
+}
+
+
+  padding: 10px;
+  .my-editor{
+    margin-top : 0 !important;
+    height: 37px !important;
+  }
+}
+.exp-container-1 {
+  display: flex;
+  flex-direction: row;
+  margin: 8px;
+  .exp-set {
+    width: 100%;
+    // border: 1px solid #d8d8d8;
+    display: flex;
+    flex-direction: row;
+    border-radius: 5px;
+    .select-lhs {
+      margin-right: 8px;
+    }
+
+    .select-lhs,
+    .select-rhs {
+      width: 40%;
+    }
+
+    .select-op {
+      width: 20%;
+      margin-right: 8px;
+    }
+    .actions {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .icon-plus-circle-filled {
+        color: var(--hlx-color-primary);
+        font-size: 24px;
+        margin-right: 8px;
+      }
+      .icon-trash-regular {
+        color: #a6a6a6;
+        font-size: 24px;
+      }
+      i {
+        cursor: pointer;
+      }
+    }
+  }
+  .my-editor{
+    height: 38px !important;
+    margin-top: 0px !important;
+  }
+}
+

package/dist/src/assets/svg/color-palette.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <g id="color-palette" transform="translate(-133 -614)">
+    <path id="circle-template" d="M13.1,2A11.1,11.1,0,0,0,2,13.1c0,2.966,7.315.259,9.412,2.356s-1.275,8.747,1.691,8.747A11.1,11.1,0,0,0,20.953,5.252,11.03,11.03,0,0,0,13.1,2m0-2a13.1,13.1,0,1,1,0,26.205c-1.744,0-3.154-1.393-3.318-3.714-.124-1.733,1-4.344-.291-5.58-.926-.883-3.764-.242-5.812-.407C1.446,16.325,0,15.316,0,13.1A13.1,13.1,0,0,1,13.1,0Z" transform="translate(139.897 620.897)" fill="#191a15"/>
+    <g id="Group_157" data-name="Group 157" transform="translate(-1075 51)">
+      <g id="Group_156" data-name="Group 156" transform="translate(-54.594 -1.594)">
+        <circle id="Ellipse_4" data-name="Ellipse 4" cx="2" cy="2" r="2" transform="translate(1274.784 579.588)" fill="red"/>
+        <circle id="Ellipse_5" data-name="Ellipse 5" cx="2" cy="2" r="2" transform="translate(1279.568 575.588)" fill="#0f6"/>
+        <circle id="Ellipse_6" data-name="Ellipse 6" cx="2" cy="2" r="2" transform="translate(1285.548 577.98)" fill="#0008ff"/>
+        <circle id="Ellipse_7" data-name="Ellipse 7" cx="2" cy="2" r="2" transform="translate(1287.94 583.96)" fill="#ffa200"/>
+        <circle id="Ellipse_8" data-name="Ellipse 8" cx="2" cy="2" r="2" transform="translate(1283.568 588.94)" fill="#f0c"/>
+      </g>
+      <circle id="Ellipse_9" data-name="Ellipse 9" cx="20" cy="20" r="20" transform="translate(1208 563)" fill="none"/>
+    </g>
+  </g>
+</svg>

package/dist/src/assets/svg/search3.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="53.577" height="40.459" viewBox="0 0 53.577 40.459">
+  <g id="search3" transform="translate(-277.423 -989.614)">
+    <circle id="Ellipse_111" data-name="Ellipse 111" cx="20" cy="20" r="20" transform="translate(291 990)" fill="#a6a6a6"/>
+    <g id="Group_12636" data-name="Group 12636" transform="translate(19.719 987.719)">
+      <path id="Path" d="M5.78,4.524A.888.888,0,0,1,4.524,5.78L.26,1.516A.888.888,0,0,1,1.516.26Z" transform="translate(293.681 24.682)" fill="#fff"/>
+      <path id="Oval" d="M7.3,14.59A7.3,7.3,0,1,1,14.59,7.3,7.3,7.3,0,0,1,7.3,14.59Zm0-13.214A5.919,5.919,0,1,0,13.214,7.3,5.926,5.926,0,0,0,7.3,1.376Z" transform="translate(282.281 13.281)" fill="#fff"/>
+      <path id="Path-2" data-name="Path" d="M1.009,4.136A.5.5,0,0,1,0,4.136,4.136,4.136,0,0,1,4.136,0a.5.5,0,0,1,0,1.009A3.127,3.127,0,0,0,1.009,4.136Z" transform="translate(284.854 15.854)" fill="#fff"/>
+    </g>
+    <path id="Path_57883" data-name="Path 57883" d="M0,0S-11.577,9.553-11.577,19.478,0,39.7,0,39.7" transform="translate(289.5 990)" fill="none" stroke="#d8d8d8" stroke-width="1"/>
+  </g>
+</svg>

package/dist/src/assets/svg/search3_active.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="53.577" height="40.459" viewBox="0 0 53.577 40.459">
+  <g id="search3" transform="translate(-277.423 -989.614)">
+    <circle id="Ellipse_111" data-name="Ellipse 111" cx="20" cy="20" r="20" transform="translate(291 990)" fill="#265E4B"/>
+    <g id="Group_12636" data-name="Group 12636" transform="translate(19.719 987.719)">
+      <path id="Path" d="M5.78,4.524A.888.888,0,0,1,4.524,5.78L.26,1.516A.888.888,0,0,1,1.516.26Z" transform="translate(293.681 24.682)" fill="#fff"/>
+      <path id="Oval" d="M7.3,14.59A7.3,7.3,0,1,1,14.59,7.3,7.3,7.3,0,0,1,7.3,14.59Zm0-13.214A5.919,5.919,0,1,0,13.214,7.3,5.926,5.926,0,0,0,7.3,1.376Z" transform="translate(282.281 13.281)" fill="#fff"/>
+      <path id="Path-2" data-name="Path" d="M1.009,4.136A.5.5,0,0,1,0,4.136,4.136,4.136,0,0,1,4.136,0a.5.5,0,0,1,0,1.009A3.127,3.127,0,0,0,1.009,4.136Z" transform="translate(284.854 15.854)" fill="#fff"/>
+    </g>
+    <path id="Path_57883" data-name="Path 57883" d="M0,0S-11.577,9.553-11.577,19.478,0,39.7,0,39.7" transform="translate(289.5 990)" fill="none" stroke="#265E4B" stroke-width="1"/>
+  </g>
+</svg>

package/dist/src/assets/svg/search3_hover.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="53.577" height="40.459" viewBox="0 0 53.577 40.459">
+  <g id="search3" transform="translate(-277.423 -989.614)">
+    <circle id="Ellipse_111" data-name="Ellipse 111" cx="20" cy="20" r="20" transform="translate(291 990)" fill="#52bd94"/>
+    <g id="Group_12636" data-name="Group 12636" transform="translate(19.719 987.719)">
+      <path id="Path" d="M5.78,4.524A.888.888,0,0,1,4.524,5.78L.26,1.516A.888.888,0,0,1,1.516.26Z" transform="translate(293.681 24.682)" fill="#fff"/>
+      <path id="Oval" d="M7.3,14.59A7.3,7.3,0,1,1,14.59,7.3,7.3,7.3,0,0,1,7.3,14.59Zm0-13.214A5.919,5.919,0,1,0,13.214,7.3,5.926,5.926,0,0,0,7.3,1.376Z" transform="translate(282.281 13.281)" fill="#fff"/>
+      <path id="Path-2" data-name="Path" d="M1.009,4.136A.5.5,0,0,1,0,4.136,4.136,4.136,0,0,1,4.136,0a.5.5,0,0,1,0,1.009A3.127,3.127,0,0,0,1.009,4.136Z" transform="translate(284.854 15.854)" fill="#fff"/>
+    </g>
+    <path id="Path_57883" data-name="Path 57883" d="M0,0S-11.577,9.553-11.577,19.478,0,39.7,0,39.7" transform="translate(289.5 990)" fill="none" stroke="#52bd94" stroke-width="1"/>
+  </g>
+</svg>