halleyx-ui-framework 5.4.2 → 5.4.3

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

@@ -0,0 +1,245 @@
+.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: 100%;
+      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: 50%;
+        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: 50%;
+        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/datepicker.scss

@@ -0,0 +1,166 @@
+* {
+  padding: 0;
+  margin: 0;
+  
+}
+  .active-input{
+    .input-field.small{
+border: none !important;
+    }
+  }
+
+.readOnly-datepicker{
+  cursor: default !important;
+  .input-field.small{
+    cursor: default !important;
+    .readonly-overlay{
+      cursor: default !important;
+    }
+  }
+  .input-field.small:hover{
+    border: 1px solid #d8d8d8 !important;
+        }
+}
+
+.disable-datepicker{
+  cursor: not-allowed !important;
+  .input-field.small{
+    cursor: not-allowed !important;
+    .readonly-overlay{
+      cursor: not-allowed !important;
+    }
+  }
+  .input-field.small:hover{
+    border: 1px solid #d8d8d8 !important;
+        }
+}
+
+.input-container-combination-datepicker{min-width: 300px; }
+// .datepicker-input-green:focus{border: 3px solid green;}
+.date-picker-container {
+    display: flex;
+    flex-direction: column;
+    height: 410px;
+    min-width: 300px;
+  
+    border-radius: 10px; 
+    width: 100%;
+    box-shadow: 0 0 10px 1px #d8d8d8;
+
+  .show-calendar {
+    // height: 100%;
+    .light {
+        box-shadow: 0 0 0 0 white !important;
+      .calendar {
+        border-radius: 0px !important;
+        margin-top: -40px !important;
+        box-shadow: 0 0 0 0 white !important;
+        background-color: #fff !important;
+        height: 270px;
+      }
+    }
+    .calendar-days div {
+      animation: none !important;
+    }
+  }
+
+  .date-picker-button-container {
+    top: 270px;
+    width: 100%;
+    position: relative;
+    border-bottom-right-radius: 20px;
+    border-bottom-left-radius: 20px;
+    display: flex;
+    padding: 15px 20px;
+    justify-content: space-between;
+    background: #fff;
+    border-top: 1px solid #d8d8d8;
+  }
+}
+
+.input1,
+.input2 {
+
+  display: flex;
+  align-items: center;
+  display: inline-block;
+  overflow: hidden;    /* Hide any overflowing content */
+  white-space: nowrap;
+  border-radius: 5px;
+  padding: 10px 12px 10px 12px;
+  border: 1.5px solid #d8d8d8;
+  line-height: 18.15px;
+  letter-spacing: 0.5%;
+  min-width: 100px;
+    max-width: 300px;
+    min-height: 5.8vh;
+    max-height: 200px;
+    overflow: auto;
+font-size: 14px;
+    span{
+    position: absolute;
+    background-color: white;
+    color: #d8d8d8;
+    padding: 0 2px;
+    top:3px;
+    font-size: 13px;
+    }
+}
+
+
+
+
+
+svg {
+  margin: 0 5px;
+}
+.topdiv {
+  width: 100%;
+  height: 11vh;
+  background-color: #fdfdfd;
+
+  overflow: hidden;
+  border-radius: 10px 10px 0px 0px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #d8d8d8;
+}
+// .icon-arrow-right-filled{
+//     font-size: 40px;
+// }
+//---------------------------------------------------------------------------------------------------------------------
+
+.date-picker-input-box{
+  border: 1.5px solid #d8d8d8;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  background: #fff;
+  padding: 10px 12px 10px 12px;
+  border: 1.5px solid #d8d8d8;
+  line-height: 18.15px;
+  letter-spacing: 0.5%;
+  width:100%;
+  min-height: 5.9vh;
+  max-height: 200px;
+    overflow: auto;
+}
+.poistion {
+  position: relative;
+}
+.down {
+  position: absolute;
+}
+
+.up {
+  position: absolute;
+  top: -484px;
+}
+
+.non {
+  display: none;
+  position: absolute;
+}

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,141 @@
+.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;
+//   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;
+//   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);
+// }