halleyx-ui-framework 1.0.4

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

@@ -0,0 +1,248 @@
+.dataview-parent-container {
+  font-family: var(--hlx-font-type-content);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .header-panel {
+      height: 75px;
+      // border: 1px solid var(--hlx-border-color);
+      // border-radius: 5px;
+      // background: #ffecb8;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      justify-content: space-between;
+      .left {
+        display: flex;
+        flex-direction: row;
+        width: 60%;
+        .sort-container {
+          width: 150px;
+          margin: 20px 20px 20px 27px;
+          cursor: pointer;
+        }
+        .search-containerr {
+          width: 50%;
+          margin: 20px;
+        }
+      }
+      .right {
+        width: 100px;
+        height: 40px;
+        border: 1px solid var(--hlx-border-color);
+        border-radius: 6px;
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+        margin: 20px;
+        .list {
+        //   background: white;
+          border-radius: 5px 0 0 5px;
+          width: 50px;
+          font-size: var(--hlx-font-content-size-xl);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        //   color: var(--hlx-color-primary);
+        }
+        .grid {
+        //   background: white;
+          border-radius: 0 5px 5px 0;
+          width: 50px;
+          font-size: var(--hlx-font-content-size-xl);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        //   color: var(--hlx-color-primary);
+        }
+      }
+    }
+    .body-panel {
+      height: 80%;
+      padding: 20px 0 20px 0;
+      display: grid;
+  // grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-gap: 2rem;
+      // display: grid;
+      // grid-template-columns: auto auto;
+      // gap: 2vw 0;
+
+      // display: flex;
+      // flex-direction: row;
+      // flex-wrap: wrap;
+      .no-data{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: var(--hlx-font-content-size-sm);
+          width: 100%;
+      }
+            .product-title {
+          font-size: var(--hlx-font-content-size-lg);
+          color: var(--hlx-text-color-primary);
+          font-weight: 600;
+          text-align: center;
+          width: 200px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+            .product-titlee {
+          font-size: var(--hlx-font-content-size-lg);
+          color: var(--hlx-text-color-primary);
+          font-weight: 600;
+          width: 200px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .product-description {
+          font-size: var(--hlx-font-content-size-sm);
+          margin: 2.5px 2.5px 5px 2.5px;
+          color: var(--hlx-text-color-primary);
+          width: 200px;
+          white-space: nowrap;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .product-descriptionn {
+          font-size: var(--hlx-font-content-size-sm);
+          margin: 2.5px 2.5px 5px 2.5px;
+          color: var(--hlx-text-color-primary);
+          width: 200px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+              .group-tag {
+          display: flex;
+          align-items: center;
+          font-size: var(--hlx-font-content-size-sm);
+          font-weight: 600;
+          color: var(--hlx-text-color-primary);
+          margin-right: 25px;
+          i {
+            position: relative;
+            // transform: rotate(-45deg);
+            // font-weight: 600;
+            margin-right: 10px;
+            font-size: var(--hlx-icon-size-xs);
+          }
+        }
+              .price {
+          font-size: var(--hlx-font-content-size-md);
+          font-weight: 600;
+          color: var(--hlx-text-color-primary);
+        }
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        // font-weight: 800;
+        align-items: center;
+        height: 60px;
+        font-size: var(--hlx-font-content-size-sm);
+        align-items: center;
+        margin: 0 16px 0 16px;
+        color: var(--hlx-text-color-primary);
+  
+      }
+      .card-body {
+        img {
+          width: 100px;
+          height: 100px;
+          box-shadow: 0 0 10px 5px rgb(0 0 0 / 5%);
+          border-radius: 5px;
+          margin: 10px;
+        }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+  
+      }
+      .card-footerr {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 16px 0 16px;
+        align-items: center;
+        height: 60px;
+  
+        button {
+          background: var(--hlx-color-primary);
+          padding: 5px;
+          border-radius: 5px;
+          border: none;
+          i {
+            color: #fff;
+            font-size: var(--hlx-icon-size-xs);
+          }
+        }
+      }
+      .list-container{
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          width: 100%;
+          border-bottom: 1px solid var(--hlx-border-color);
+          padding: 15px 10px 15px 10px;
+          .left{
+              display: flex;
+              flex-direction:row;
+              img{
+          width: 100px;
+          height: 100px;
+          box-shadow: 0 0 10px 5px rgb(0 0 0 / 5%);
+          border-radius: 5px;
+          margin-right: 20px;
+              }
+              .details{
+                  display: flex;
+                  flex-direction: column;
+                  // margin: 10px;
+              }
+          }
+          .right{
+              width: 20%;
+              display: flex;
+              flex-direction: column;
+              align-items: flex-end;
+                   button {
+          background: var(--hlx-color-primary);
+          padding: 10px;
+          border-radius: 5px;
+          border: none;
+          margin: 10px 0 10px 10px;
+          i {
+            color: #fff;
+            font-size: var(--hlx-icon-size-md);
+            margin-right: 10px;
+          }
+          .btn-text{
+              color: #fff;
+              font-size: var(--hlx-font-content-size-sm);
+          }
+        }
+          }
+          
+      }
+    }
+    .footer-panel {
+      height: 75px;
+      // background: #FFECB8;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .primary-bg{
+    background: var(--hlx-color-primary);
+    color: #fff
+  }
+  .white-bg{
+    color: var(--hlx-color-primary);
+    background: #fff
+  }

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

@@ -0,0 +1,9 @@
+.hlx-horizontal-divider{
+    width: 100%;
+    border-bottom: 1px solid #f0eeec;
+}
+.hlx-vertical-divider{
+    display: inline-flex;
+    height: 5%;
+    border-right: 1px solid #f0eeec;
+}

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

@@ -0,0 +1,46 @@
+.dotted-pagination-container {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 7px;
+  align-content: center;
+  i {
+    font-weight: 600;
+    font-size: var(--hlx-font-content-size-lg);
+    cursor: pointer;
+    &[disabled="true"] {
+      cursor: default;
+      pointer-events: none;
+      color: var(--hlx-border-color-dark);
+    }
+    // &[disabled="true"]{
+    //   cursor: none;
+    // }
+  }
+  & .pagination-dot-circle {
+    display: inline-block;
+    border-radius: 50%;
+    min-width: 10px;
+    width: 10px;
+    height: 10px;
+    min-height: 10px;
+    box-shadow: 0px 1px 4px -1px;
+    border: none;
+    background: var(--hlx-border-color-lighter);
+    // margin-right: 5px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+    &:hover {
+      cursor: pointer;
+      // background-color: #FFFAEF;
+      background-color: rgba(var(--hlx-color-primary), 0.5);
+    }
+    &.active {
+      background-color: var(--hlx-color-primary);
+      transform: scale(1.1);
+    }
+  }
+}

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

@@ -0,0 +1,146 @@
+
+
+.theme{
+  background: var(--hlx-color-primary) !important;
+  border: 1px solid var(--hlx-color-primary) !important;
+}
+.grey{
+  background: var(--hlx-border-color-lighter) !important;
+  border: 1px solid var(--hlx-border-color) !important;
+}
+.draggable{
+  user-select: none;
+    height: 40px;
+    font-size: 14px;
+    width: 100%;
+    border: 1px solid var(--hlx-border-color);
+    border-radius: 5px;
+    box-sizing: border-box;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 10px;
+}
+
+.handle {
+  cursor: move;
+  font-size: var(--hlx-icon-size-md);
+  color: var(--hlx-text-color-primary);
+}
+
+.button {
+  margin-top: 35px;
+}
+.flip-list-move {
+  transition: transform 0.5s;
+}
+.no-move {
+  transition: transform 0s;
+}
+.ghost {
+  opacity: 0.5;
+  background: var(--hlx-color-primary)-light;
+}
+.list-group {
+  min-height: 20px;
+}
+
+input[type=checkbox]:checked {
+  content: "\e964";
+}
+// .list-group-item {
+//   cursor: move;
+// }
+// .list-group-item i {
+//   cursor: pointer;
+// }
+
+/* The container */
+.check-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding-left: 25px;
+  cursor: pointer;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.check-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  left: 0;
+  height: 16px;
+  width: 16px;
+  background-color: var(--hlx-border-color-lighter);
+  border-radius: 3px;
+  border: 1px solid var(--hlx-border-color);
+}
+
+/* On mouse-over, add a grey background color */
+// .check-container:hover input ~ .checkmark {
+//   // background-color:#FFF1D3;
+// }
+.check-container input:disabled:checked ~ .checkmark {
+  cursor:not-allowed;
+  background: var(--hlx-border-color-lighter);
+  border: 1px solid var(--hlx-border-color);
+}
+.check-container input:disabled ~ .checkmark {
+  cursor:not-allowed;
+  background: var(--hlx-border-color-lighter);
+}
+.check-container input:disabled:checked ~ .checkmark:after {
+    left: 5px;
+    top: 2px;
+    width: 4px;
+    height: 8px;
+    border: solid var(--hlx-border-color);
+    border-radius: 1px;
+    border-width: 0 2px 2px 0px;
+    transform: rotate(45deg);
+
+}
+
+/* When the checkbox is checked, add a blue background */
+.check-container input:checked ~ .checkmark {
+  background-color: var(--hlx-color-primary);
+  border: 1px solid var(--hlx-color-primary);
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.check-container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.check-container .checkmark:after {
+      left: 5px;
+    top: 2px;
+    width: 4px;
+    height: 8px;
+    border: solid white;
+    border-radius: 1px;
+    border-width: 0 2px 2px 0px;
+    transform: rotate(45deg);
+}

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

@@ -0,0 +1,113 @@
+.sidenav-right, .sidenav-left {
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+    box-sizing: border-box; 
+    // height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    background-color: rgb(255, 255, 255);
+    overflow-x: hidden;
+    transition: width 0.2s;
+    padding: 10px;
+    font-size: 14px;
+    display: none;
+}
+.sidenav-top {
+    width: 100%;
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    background-color: white;
+    overflow-x: hidden;
+    transition: width 0.2s;
+    box-sizing: border-box;
+    padding: 10px;
+    font-size: 14px;
+}
+.sidenav-bottom {
+    width: 100%;
+    position: fixed;
+    z-index: 1000;
+    bottom: 0;
+    left: 0;
+    background-color: white;
+    overflow-x: hidden;
+    transition: width 0.2s;
+    box-sizing: border-box;
+    padding: 10px;
+    font-size: 14px;
+}
+
+.header-panel-right, .header-panel-left, .header-panel-top, .header-panel-bottom{
+  height: 7vh;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title-right, .title-left, .title-top, .title-bottom{
+      min-width: 70px;
+  }
+}
+.body-panel-right, .body-panel-left{
+  height: 84vh;
+  padding: 20px 0px;
+}
+.footer-panel-right, .footer-panel-left{
+  height: 6vh;
+}
+
+.header-panel-top, .header-panel-bottom{
+  height: 15%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title-right, .title-left, .title-top, .title-bottom{
+      min-width: 70px;
+  }
+}
+.body-panel-top, .body-panel-bottom{
+  padding: 20px 0px;
+  height: 70%;
+}
+.footer-panel-top, .footer-panel-bottom{
+  height: 15%;
+}
+
+
+.sidenav-margin-right, .sidenav-margin-left{
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  background-color: #000;
+  opacity: 50%;
+  overflow-x: hidden;
+}
+.sidenav-margin-top{
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 50%;
+  overflow-x: hidden;
+}
+.sidenav-margin-bottom{
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 50%;
+  overflow-x: hidden;
+}

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

@@ -0,0 +1,78 @@
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    // font-family: OpenSans;    
+}
+
+.error-page-container {
+    font-family: var(--hlx-font-type-content);
+        height: 90%;
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 50px;
+        align-items: center;
+        text-align: left;
+
+        section:first-of-type {
+
+            display: flex;
+            justify-content: center;
+            
+            img {
+                width: 90%;
+            }
+        }
+
+        section:last-of-type {
+            display: flex;
+            flex-direction: column;
+            row-gap: 30px;
+
+            h5 {
+                font-size: 50px;
+                line-height: 50px;
+                color: var(--hlx-text-color-primary)
+            }
+            h4 {
+                color: var(--hlx-text-color-primary)
+            }
+
+            p {
+                font-size: var(--hlx-font-content-size);
+                width: 80%;
+                line-height: 25px;
+                color: var(--hlx-text-color-primary)
+            }
+            
+            button {
+                width: fit-content;
+                padding: 10px 20px;
+                background-color: var(--hlx-color-primary);
+                color: #fff;
+                font-size: var(--hlx-font-content-size);
+                height: 40px;
+                border: 0;
+                cursor: pointer;
+                border-radius: 5px;
+            }
+        }
+    }
+
+@media only screen and (max-width: 375px) {
+        .error-page-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            row-gap: 30px;
+
+            section:first-of-type {
+            
+                img {
+                    width: 80%;
+                }
+            }
+        }
+    }