halleyx-ui-framework 11.7.94 → 11.7.96

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

@@ -0,0 +1,269 @@
+.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;
+    color: var(--hlx-text-color-primary);
+    width: 200px;
+    white-space: normal;
+    text-align: center;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* Number of lines to show */
+    -webkit-box-orient: vertical;
+    }
+    .product-descriptionn {
+      font-size: var(--hlx-font-content-size-sm);
+    margin: 2.5px;
+    color: var(--hlx-text-color-primary);
+    // width: 200px;
+    white-space: normal;
+    text-align: center;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* Number of lines to show */
+    -webkit-box-orient: vertical;
+    }
+    .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;
+      gap: 12px;
+      margin: 8px 0;
+    }
+    .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;
+          justify-content: space-between;
+          // margin: 10px;
+        }
+      }
+      .right {
+        width: 30%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: space-between;
+        button {
+          // background: var(--hlx-color-primary);
+          // padding: 10px;
+          // border-radius: 5px;
+          // border: none;
+          // 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;
+}
+
+
+// Feroz
+.view-switch-fk {
+  width: 250px !important;
+}
+
+.search-container-fk {
+  width: 500px !important;
+}
+
+.footer-panel-fk {
+  .hlx-pagination-container {
+    justify-content: flex-end !important;
+  }
+}

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

@@ -0,0 +1,411 @@
+* {
+  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: 415px;
+    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: 265px;
+      }
+    }
+    .calendar-days div {
+      animation: none !important;
+    }
+  }
+
+  .date-picker-button-container {
+    top: 265px;
+    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;
+  }
+  .picker-time-datepicker{
+    input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+  }
+  .time-name-datepicker{
+    display: flex;
+    position: relative;
+    background: #fff;
+    height: 45px;
+    padding: 10px 15px;
+    justify-content: center;
+    align-items: center;
+    top: 265px;
+    justify-content: space-between;
+  }
+}
+
+.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: 10vh;
+  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;
+}
+
+.tooltip-datepicker-start {
+  position: relative;
+  display: inline-block;
+ 
+}
+
+.tooltip-datepicker-start .tooltiptext-datepicker-start{
+  
+  width: 153px;
+    background-color: #2c2c2c;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 3;
+    top: 13px;
+    left: 140px;
+}
+.tooltip-datepicker-start .tooltiptext-datepicker-start{
+  visibility: none;
+}
+
+
+.tooltip-datepicker-start .tooltiptext-datepicker-start::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #2c2c2c transparent transparent;
+}
+
+.tooltip-datepicker-start:hover .tooltiptext-datepicker-start {
+  visibility: visible;
+}
+.tooltip-datepicker-end {
+  position: relative;
+  display: inline-block;
+ 
+}
+
+.tooltip-datepicker-end .tooltiptext-datepicker-end{
+  
+  width: 159px;
+  background-color: #2c2c2c;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 3;
+  top: 13px;
+  /* right: 110%; */
+  right: -160px;
+}
+
+.tooltip-datepicker-end .tooltiptext-datepicker-end::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent transparent #2c2c2c;
+}
+
+.date_and_time_picker{
+  * {
+    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: 415px;
+      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: 265px;
+        }
+      }
+      .calendar-days div {
+        animation: none !important;
+      }
+    }
+  
+    .date-picker-button-container {
+      top: 265px;
+      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;
+    }
+    .picker-time-datepicker{
+      input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  
+  /* Firefox */
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+    }
+    .time-name-datepicker{
+      display: flex;
+      position: relative;
+      background: #fff;
+      height: 45px;
+      padding: 10px 15px;
+      justify-content: center;
+      align-items: center;
+      top: 265px;
+      justify-content: space-between;
+    }
+  }
+  
+  .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: 10vh;
+    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;
+  }
+}

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);
+    }
+  }
+}