halleyx-ui-framework 1.0.4

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

@@ -0,0 +1,195 @@
+.gallery-parent-container {
+    .pagination-parent{
+        display: flex;
+align-items: center;
+width: 100%;
+height: 50px;
+//   background: rgba(0, 0, 0, 0.7);
+// position: absolute;
+// bottom: 0;
+justify-content: center;
+}
+    // background: grey;
+    .image-container {
+      height: 500px;
+      position: relative;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        box-shadow: 0 0 10px 5px rgb(0 0 0 / 5%);
+        // border-radius: 5px;
+      }
+      .slider-parent-left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 15%;
+        height: 500px;
+        background: rgba(0, 0, 0, 0.7);
+        position: absolute;
+        bottom: 0;
+        .icon {
+          width: 5%;
+          height: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .icon-angle-left-regular,.icon-angle-right-regular {
+            color: #fff;
+            font-weight: bold;
+            cursor: pointer;
+            position: relative;
+            transform: rotate(90deg);
+          }
+        }
+        .slide-container {
+          overflow-y: scroll;
+          overflow-x: hidden;
+          width: 100%;
+  
+          display: flex;
+          flex-direction: column;
+          grid-template-columns: repeat(4, 1fr);
+          object-fit: contain;
+  
+          img {
+            height: 120px;
+            cursor: pointer;
+          }
+        }
+      }
+      .slider-parent-right {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 15%;
+        height: 500px;
+        background: rgba(0, 0, 0, 0.7);
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        .icon {
+          width: 5%;
+          height: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .icon-angle-left-regular,.icon-angle-right-regular {
+            color: #fff;
+            font-weight: bold;
+            cursor: pointer;
+            position: relative;
+            transform: rotate(90deg);
+          }
+        }
+        .slide-container {
+          overflow-y: scroll;
+          overflow-x: hidden;
+          width: 100%;
+  
+          display: flex;
+          flex-direction: column;
+          grid-template-columns: repeat(4, 1fr);
+          object-fit: contain;
+  
+          img {
+            height: 120px;
+            cursor: pointer;
+          }
+        }
+      }
+      .slider-parent{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 120px;
+        background: rgba(0, 0, 0, 0.7);
+        position: absolute;
+        bottom: 0;
+        .icon {
+          width: 5%;
+          height: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .icon-angle-left-regular,.icon-angle-right-regular {
+            color: #fff;
+            font-weight: bold;
+            cursor: pointer;
+          }
+        }
+        .slide-container {
+          overflow-x: scroll;
+          overflow-y: hidden;
+          width: 100%;
+  
+          display: flex;
+          grid-template-columns: repeat(4, 1fr);
+          object-fit: contain;
+  
+          img {
+            height: 120px;
+            cursor: pointer;
+          }
+        }
+      }
+  
+
+      .description {
+        padding: 30px;
+        width: 50%;
+        position: absolute;
+        top: 0;
+        display: flex;
+        flex-direction: column;
+        .title {
+          font-size: var(--hlx-font-content-size-xl);
+          font-weight: bolder;
+          margin-bottom: 10px;
+        }
+        .sub-title {
+          font-size: var(--hlx-font-content-size-sm);
+          font-weight: bold;
+        }
+      }
+      .description-right {
+        padding: 30px;
+        width: 80%;
+        position: absolute;
+        bottom: 0;
+        left: 15%;
+        display: flex;
+        flex-direction: column;
+        .title {
+          font-size: var(--hlx-font-content-size-xl);
+          font-weight: bolder;
+          margin-bottom: 10px;
+        }
+        .sub-title {
+          font-size: var(--hlx-font-content-size-sm);
+          font-weight: bold;
+        }
+      }
+      .description-left {
+        padding: 30px;
+        width: 80%;
+        position: absolute;
+        bottom: 0;
+        right: 15%;
+        display: flex;
+        flex-direction: column;
+        .title {
+          font-size: var(--hlx-font-content-size-xl);
+          font-weight: bolder;
+          margin-bottom: 10px;
+        }
+        .sub-title {
+          font-size: var(--hlx-font-content-size-sm);
+          font-weight: bold;
+        }
+      }
+    }
+  }

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

@@ -0,0 +1,48 @@
+#hlx-progress-bar-001hlx.progress-bar-container {
+  /* border: 1px solid #d4d4d4; */
+  height: 10px;
+  border-radius: 20px;
+  background: var(--hlx-border-color-light);
+  position: relative;
+  /* overflow: hidden; */
+  & > span.bar {
+    position: absolute;
+    height: 100%;
+    margin: 0;
+    left: 0;
+    border-radius: 5px;
+    // box-shadow: 1px 6px 9px -3px;
+    background-color: var(--hlx-color-primary);
+    &.tooltip-track {
+      &::after {
+        right: 0;
+        content: attr(progress-data);
+        position: absolute;
+        width: 44px;
+        height: 25px;
+        background-color: var(--hlx-text-color-tree);
+        color: var(--hlx-color-white);
+        text-align: center;
+        transform: translate(39%);
+        border-radius: 4px;
+        display: flex;
+        z-index: 1;
+        font-size: 12px;
+        top: 158%;
+        margin: auto;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      &::before {
+        content: "";
+        position: absolute;
+        right: 0;
+        bottom: -11px;
+        border-top: 8px solid var(--hlx-text-color-tree);
+        transform: rotate(315deg);
+        border-left: 8px solid rgba(0, 0, 0, 0);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+@import 
+//base
+"./base.scss", 
+// "icon.scss",
+"./source_content.scss", "./componentlayout.scss", "./alert.scss",
+  "./badge.scss", "./dottedPagination.scss", "./buttons.scss",
+  "./importProgress.scss", "./pagination.scss", "./sidebar.scss",
+  "./slideControl.scss", "./stepControl.scss", "./tree.scss", "./cards.scss",
+  "./tabs.scss", "./draggables.scss", "./inputfields.scss", "./inputitems.scss",
+  "./loaders.scss", "./select.scss", "./modalwindow.scss", "./tooltip.scss",
+ "./search.scss", "./fileupload.scss", "./accordion.scss",
+  "./timeline.scss", "./divider.scss", "./label.scss", "./rating.scss",
+  "./dashboard.scss", "./breadcrumb.scss", "./tag.scss", "./signup.scss",
+  "./texteditor.scss", "./treeSelect.scss", "./errorpage.scss",
+  "./dataview.scss", "./speeddial.scss", "./imagegallery.scss", "./switch.scss",
+ "./colorpalette.scss", "./calendar.scss", "./contextMenu.scss",
+  "./newtable.scss", "./drawer.scss", "fonts","./scrollbar.scss","./tablev2.scss","./customdropdown.scss","./visualbuilder.scss","./objectViewer.scss";

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

@@ -0,0 +1,296 @@
+
+
+input[type="date"] {
+  position: relative;
+}
+input[type="number"]:disabled{
+  cursor: not-allowed;
+}
+input[type="date"]::-webkit-calendar-picker-indicator {
+  color: transparent;
+  background: none;
+  z-index: 1;
+  min-width: 35px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.input-field input[type="date"]{
+  padding: 0 0 0 15px;
+}
+input[type="date"]:before {
+  font-size: 18px;
+  color: transparent;
+  background: none;
+  display: block;
+  font-family: 'halleyx-icons';
+  content: '\e913';
+  /* This is the calendar icon in FontAwesome */
+  position: absolute;
+  right: 9px;
+  color: #565553;
+}
+input[type="datetime-local"] {
+  position: relative;
+}
+
+.phone-number{
+    display: flex;
+    width: 100%;
+    align-items: center;
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+}
+
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  color: transparent;
+  background: none;
+  z-index: 1;
+  min-width: 35px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.input-field input[type="datetime-local"]{
+  padding: 0 0 0 15px;
+}
+
+input[type="datetime-local"]:before {
+  font-size: 18px;
+  color: transparent;
+  background: none;
+  display: block;
+  font-family: 'halleyx-icons';
+  content: '\e913';
+  /* This is the calendar icon in FontAwesome */
+  position: absolute;
+  right: 9px;
+  color: #565553;
+}
+*,
+*:focus {
+  outline: none;
+}
+.input-field.small {
+  position: relative;
+  display: flex;
+  width: 100%;
+  .input-icon {
+    min-width: 36px;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i {
+      font-size: var(--hlx-icon-size-md) !important;
+      color: #565553;
+    }
+  }
+}
+::-webkit-input-placeholder {
+  font-family: OpenSans;
+  font-size: 14px;
+  color: var(--hlx-border-color-dark);
+}
+input[type="password"] {
+  font-family: Verdana;
+}
+.input-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // background: white;
+  position: relative;
+}
+.input-field.small input {
+  display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+  width: 100%;
+  height: 36px;
+  color: #565553;
+  background: transparent;
+  border-radius: 5px;
+  border: none;
+  transition: all 0.3s ease;
+  font-size: 14px;
+  padding: 10px 12px 10px 12px;
+  line-height: 18.15px;
+  letter-spacing: 0.5%;
+}
+.input-field.small textarea {
+  font-size: 14px;
+  font-family: 'OpenSans';
+  display: block;
+  width: 100%;
+  min-height: 66px;
+  background: transparent;
+  border-radius: 0px;
+  border: none;
+  transition: all 0.3s ease;
+  margin: 10px 12px;
+  resize: vertical;
+  color: var(--hlx-text-color-primary);
+  textarea:disabled {
+    cursor: not-allowed;
+  }
+}
+.input-field.small {
+  border: solid 1px var(--hlx-border-color);
+  border-radius: 5px;
+  background-color: white;
+}
+.input-field.small:hover {
+  border: 1px solid var(--hlx-color-primary);
+}
+.disabled:hover {
+  border: 1px solid var(--hlx-border-color) !important;
+  input{
+  cursor: not-allowed;
+  }
+}
+
+// .input-field input:focus {
+//   border-color: red !important;
+// }
+
+.input-field.small:focus-within{
+  border-color: var(--hlx-color-primary);
+}
+.input-field.small textarea:focus {
+  border-color: var(--hlx-color-primary);
+}
+
+.input-field.small label {
+  position: absolute;
+  cursor: text;
+  z-index: 2;
+  top: 8px;
+  left: 6px;
+  font-size: 14px;
+  background: #fff;
+  padding: 0 5px;
+  color: var(--hlx-border-color-dark);
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.input-field.small input:focus + label,
+.input-field.small input:valid + label {
+  font-size: 12px;
+  top: -9px;
+}
+.input-field.small textarea:focus + label,
+.input-field.small textarea:valid + label {
+  font-size: 12px;
+  top: -9px;
+}
+
+.input-field.small input:focus + label {
+  color: var(--hlx-color-primary);
+}
+.input-field.small textarea:focus + label {
+  color: var(--hlx-color-primary);
+}
+
+.error-message {
+  width: 100%;
+  height: 20px;
+  color: #fe4141;
+  font-size: 10px;
+  text-align: left;
+  position: relative;
+}
+
+.condition-box {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  justify-content: space-between;
+  i {
+    margin-left: 10px;
+  }
+}
+.password-conditon-dialog-title {
+  font-family:var(--hlx-);
+  font-weight: bold;
+  font-size: 14px;
+  text-align: left;
+  margin-bottom: 8px;
+}
+.password-condition-dialog {
+  padding: 10px 12px;
+  background: white;
+  border-radius: 5px;
+  box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
+  position: absolute;
+  z-index: 5;
+  margin-top: 50px;
+  color: #565553;
+  // width: 92%;
+  // margin-top: -15px;
+  // margin-left: -5px;
+}
+
+.drop {
+  font-size: 14px;
+  width: 100%;
+  position: absolute;
+  padding: 0 10px 0 10px;
+  max-height: 400px;
+  overflow-y: scroll;
+  border: 1px solid #e8e8e8;
+  border-radius: 5px;
+  /* width: 250px; */
+  z-index: 132;
+  margin-top: 45px;
+  background: white;
+  ul{
+    li{
+      padding: 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.caret-div {
+  position: absolute;
+  max-width: 400px;
+  max-height: 400px;
+  background-color: white;
+  border: 1px solid #d8d8d8;
+  border-radius: 3px;
+  font-size: 14px;
+  color: var(--hlx-text-color-primary);
+  overflow: auto;
+  z-index: 1000;
+  li{
+    padding: 3px 7px;
+    height: 30px;
+    &:hover{
+      cursor: pointer;
+      background: var(--hlx-color-primary-light);
+    }
+  }
+  .list-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    /* align-content: center; */
+    flex-direction: row;
+  }
+  .list-item-icon {
+    font-size: 22px;
+    margin-right: 5px;
+  }
+}