halleyx-ui-framework 5.4.1 → 5.4.2

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

@@ -1,245 +0,0 @@
-.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

@@ -1,166 +0,0 @@
-* {
-  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

@@ -1,9 +0,0 @@
-.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

@@ -1,46 +0,0 @@
-.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

@@ -1,143 +0,0 @@
-.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);
-}