halleyx-ui-framework 11.7.45 → 11.7.46

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

@@ -24,183 +24,7 @@
   line-height: 16px;
   letter-spacing: 0.5%;
   padding: 6px;
-  // overflow: hidden;
-  // text-overflow: ellipsis;
-  // width: 57px;
-
-  //v1.2
-  //primary
-  // &.primary {
-  //   background: var(--hlx-color-primary);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-primary-light);
-  //     color: var(--hlx-color-primary-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-primary);
-  //     color: var(--hlx-color-primary-dark);
-  //   }
-  // }
-  //   //success
-  // &.success {
-  //   background: var(--hlx-color-success);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-success-light);
-  //     color: var(--hlx-color-success-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-success);
-  //     color: var(--hlx-color-success-dark);
-  //   }
-  // }
-  //   //info
-  // &.info {
-  //   background: var(--hlx-color-info);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-info-light);
-  //     color: var(--hlx-color-info-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-info);
-  //     color: var(--hlx-color-info-dark);
-  //   }
-  // }
-  //   //warning
-  // &.warning {
-  //   background: var(--hlx-color-warning);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-warning-light);
-  //     color: var(--hlx-color-warning-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-warning);
-  //     color: var(--hlx-color-warning-dark);
-  //   }
-  // }
-  //   //error
-  // &.error {
-  //   background: var(--hlx-color-error);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-error-light);
-  //     color: var(--hlx-color-error-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-error);
-  //     color: var(--hlx-color-error-dark);
-  //   }
-  // }
-  //   //link
-  // &.link {
-  //   background: var(--hlx-color-link);
-  //   color: var(--hlx-text-color-secondary);
-  //   border:none !important;
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-link-light);
-  //     color: var(--hlx-color-link-dark);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-link);
-  //     color: var(--hlx-color-link-dark);
-  //   }
-  // }
-  // &.pill,&.-pill{
-  //   border-radius: 999px;
-  // }
-
-  //v1.1
-  // success
-  // &.success {
-  //   border: 1px solid var(--hlx-color-success-dark);
-  //   background: var(--hlx-color-success);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     // border: 1px solid var(--hlx-color-success);
-  //     background: var(--hlx-color-success-light);
-  //     color: var(--hlx-color-success);
-  //   }
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-success);
-  //     background: var(--hlx-color-success-light);
-  //     color: var(--hlx-color-success);
-  //   }
-  // }
-  // // info
-  // &.info {
-  //   border: 1px solid var(--hlx-color-info-dark);
-  //   background: var(--hlx-color-info);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-info);
-  //     background: var(--hlx-color-info-light);
-  //     color: var(--hlx-color-info);
-  //   }
-  // }
-  // // error
-  // &.error {
-  //   border: 1px solid var(--hlx-color-error-dark);
-  //   background: var(--hlx-color-error);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-error);
-  //     background: var(--hlx-color-error-light);
-  //     color: var(--hlx-color-error);
-  //   }
-  // }
-  // // warning
-  // &.warning {
-  //   border: 1px solid var(--hlx-color-warning-dark);
-  //   background: var(--hlx-color-warning);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-warning);
-  //     background: var(--hlx-color-warning-light);
-  //     color: var(--hlx-color-warning);
-  //   }
-  // }
-  // // link
-  // &.link {
-  //   border: 1px solid var(--hlx-color-link-dark);
-  //   background: var(--hlx-color-link);
-  //   color: var(--hlx-text-color-secondary);
-  //   &-lite {
-  //     border: 1px solid var(--hlx-color-link);
-  //     background: var(--hlx-color-link-light);
-  //     color: var(--hlx-color-link);
-  //   }
-  // }
-  // &.disabled {
-  //   border:none !important;
-
-  //   background: var(--hlx-color-disable);
-  //   color: var(--hlx-color-disable-text);
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-disable);
-  //     color: var(--hlx-color-disable-text);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-disable-text);
-  //     color: var(--hlx-color-disable-text);
-  //   }
-  // }
-  //v1.3
-  // primary
+ 
   &.primary {
     border: 1px solid var(--hlx-color-primary-dark);
     background: var(--hlx-color-primary-light);
@@ -241,22 +65,7 @@
     background: var(--hlx-color-disable);
     color: var(--hlx-color-disable-text);
   }
-  //disabled v1.0
-  // &.disabled {
-  //   border:none !important;
-
-  //   background: var(--hlx-color-disable);
-  //   color: var(--hlx-color-disable-text);
-  //   &-lite {
-  //     border:none !important;
-  //     background: var(--hlx-color-disable);
-  //     color: var(--hlx-color-disable-text);
-  //   }
-  //   &-ot {
-  //     border: 1px solid var(--hlx-color-disable-text);
-  //     color: var(--hlx-color-disable-text);
-  //   }
-  // }
+ 
   &.sm {
     // width: 61px;
     height: 18px;

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

@@ -1,4 +1,5 @@
-.modal-backdrop,.modal-backdrop1 {
+.modal-backdrop,
+.modal-backdrop1 {
   width: 100%;
   height: 100%;
   position: fixed;
@@ -91,6 +92,99 @@
     }
   }
 }
+.modal-backdrop2 {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #0000008a;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100000000;
+  font-family: 'Opensans';
+
+  .hlx-modal-container {
+    width: 600px;
+    height: 400px;
+    .modal {
+      background: rgb(255, 255, 255);
+      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+      // overflow-x: auto;
+      display: flex;
+      // align-items: center;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+      position: relative;
+      header {
+        height: 61px;
+        border-bottom: 1px solid var(--hlx-border-color);
+        padding: 20px;
+        display: flex;
+        width: 100%;
+        font-weight: bold;
+        // background-color: aqua;
+        // margin-left: auto;
+        align-items: center;
+        .header-slot {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          margin-left: 11px;
+        }
+        .close-icon {
+          font-size: 1.5rem;
+          text-align: end;
+          color: #a6a6a6;
+          cursor: pointer;
+          &:hover {
+            color: var(--hlx-color-primary);
+          }
+        }
+        // position: absolute;
+      }
+      main {
+        // align-items: center;
+        overflow-y: auto;
+        height: auto;
+        // padding: 20px;
+        font-size: var(--hlx-font-content-size-sm);
+        width: 100%;
+        height: 100%;
+        // display: flex;
+        .content-slot {
+          width: 100%;
+          padding-top: 6px;
+        }
+        .close-icon {
+          font-size: 1.5rem;
+          text-align: end;
+          color: #a6a6a6;
+          cursor: pointer;
+          &:hover {
+            color: var(--hlx-color-primary);
+          }
+        }
+      }
+      footer {
+        margin: auto 0 0 0;
+        height: 66px;
+        border-top: 1px solid var(--hlx-border-color);
+        padding: 20px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        width: 100%;
+        // position: absolute;
+      }
+    }
+  }
+}
 
 .content-only {
   text-align: end;

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

@@ -11,4 +11,5 @@
       justify-content: center;
       align-items: center;
       z-index: 10000000;
+      cursor: context-menu;;
   }

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

@@ -2,7 +2,7 @@
   // display: grid;
   // width: 100%;
   // justify-content: end;
-  .hlx-pagination-input-value-hidden{
+  .hlx-pagination-input-value-hidden {
     display: none;
   }
   display: flex;
@@ -165,7 +165,7 @@
           background: var(--hlx-color-primary-light);
           cursor: pointer;
           color: var(--hlx-text-color-primary);
-          transform: scale(1.01);
+          // transform: scale(1.01);
         }
         .dec-icon {
           // font-size: 0.7rem;

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

@@ -10,7 +10,7 @@
   justify-content: flex-start;
   border: 1px solid var(--hlx-border-color);
   border-radius: 5px;
-  height: 37px;
+  height: 38px;
   // height:40px;
   // padding:10px 12px;
   width: 100%;
@@ -44,8 +44,11 @@
     position: absolute;
     font-size: 12px;
     color: var(--hlx-color-error);
-    top: 35px;
+    top: 37px;
     left: 1px;
+    height: 24px;
+    width: 100%;
+    display: flex;
   }
   .hlx-cascade-select-container {
     width: 100%;
@@ -351,8 +354,11 @@
     position: absolute;
     font-size: 12px;
     color: var(--hlx-color-error);
-    top: 35px;
+    top: 37px;
     left: 1px;
+    height: 24px;
+    width: 100%;
+    display: flex;
   }
   .title-name {
     position: absolute;
@@ -383,7 +389,7 @@
     border-radius: 4px;
     // border-top-left-radius:4px;
     // border-bottom-left-radius:4px;
-    height: 37px;
+    height: 38px;
     // background-color: aqua;
   }
   .hlx-multi-select-input {
@@ -465,7 +471,7 @@
   justify-content: flex-start;
   border: 1px solid var(--hlx-color-primary);
   border-radius: 5px;
-  height: 37px;
+  height: 38px;
   // width:100%;
   // margin-bottom: 20px;
   align-items: center;
@@ -675,7 +681,7 @@ button {
 
 .custom-dropdown {
   width: 100%;
-  height: 37px;
+  height: 38px;
   position: relative;
   display: flex;
   font-size: 16px;
@@ -693,16 +699,22 @@ button {
       color: var(--hlx-color-primary) !important;
     }
   }
+  .asterik{
+    color:var(--hlx-color-error);
+  }
   .customerror {
     position: absolute;
     font-size: 12px;
     color: var(--hlx-color-error);
-    top: 35px;
+    top: 37px;
     left: 1px;
+    height: 24px;
+    width: 100%;
+    display: flex;
   }
   .custom-placeholder {
     width: 100%;
-    height: 35px;
+    height: 36px;
     align-items: center;
     display: flex;
     //    justify-content: center;
@@ -716,7 +728,7 @@ button {
   }
   &-input {
     width: 100%;
-    height: 35px;
+    height: 36px;
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -733,7 +745,7 @@ button {
     height: 30px;
     // width:5%;
     width:30px;
-    padding-right: 7px;
+    // padding-right: 7px;
     display: flex;
     align-items: center;
     border-top-right-radius: 4px;
@@ -741,7 +753,7 @@ button {
   }
   .custom-label-input {
     width: 100%;
-    height: 35px;
+    height: 36px;
     text-align: left;
     display: flex;
     font: var(--hlx-font-type-content);
@@ -802,7 +814,9 @@ button {
   .option {
     font-family: var(--hlx-font-type-content);
     width: 100%;
-    height: 30px;
+    min-height: 30px;
+    max-height: auto;
+    // height: 30px;
     text-align: left;
     display: flex;
     align-items: center;
@@ -856,9 +870,15 @@ button {
   // background-color: aquamarine;
   color: black;
 }
+.custom-dropdown:focus-within{
+  border:1px solid var(--hlx-color-primary);
+  // .title-name{
+  //   color: var(--hlx-color-primary) !important;
+  // }
+}
 
 .inline-multi-select{
-  height: 37px;
+  height: 38px;
   width: 100%;
   border: 1px solid var(--hlx-border-color);
   border-radius: 4px;
@@ -883,8 +903,11 @@ button {
     position: absolute;
     font-size: 12px;
     color: var(--hlx-color-error);
-    top: 35px;
+    top: 37px;
     left: 1px;
+    height: 24px;
+    width: 100%;
+    display: flex;
   }
   .inline-input-section{
     display:flex;
@@ -903,13 +926,14 @@ button {
       display: flex;       
 
       .custom-multi-select-tag-value{
-        width:100px;
+        // width:100px;
         display: flex;
         justify-content: center;
         align-items: center;
         margin-right: 3px;
+
         .multiselect-inline-tag-option {
-          width: 95px;
+          // width: 95px;
           height:25px;
           background: var(--hlx-color-primary-light);
           color: var(--hlx-color-primary-dark);
@@ -1160,11 +1184,96 @@ button {
 }
 
 
-button{
-  border:none !important;
-  background-color: transparent !important;
+
+.option-image-tag-container{
+  display: flex;
+  padding-left:20px;
+  &-image-fit{
+    height:40px;
+    width:40px;
+    border-radius: 40px;
+    // background: aqua;
+    .image-fit{
+      height:100%;
+      width:100%; 
+      object-fit: cover;
+      border-radius: 100%;
+    }
+  }
+  &-image-fit-title-subtitle{
+    display: flex;
+    flex-direction: column;
+    padding-left: 10px;
+    &-section{
+      display: flex;
+      align-items: center;
+      align-content: center;
+      &-title-name{
+        font-size: 14px;
+        padding-right: 10px;
+      }
+    }
+  }
+  &-image-fit-label-value{
+    padding-left:10px;
+    padding-top:5px;
+    display: flex;
+    // justify-content: center;
+    // align-items: center;
+}
+&-image-fit-title-subtitle-subtitle-name{
+  font-size: 12px;
+}
+}
+
+.selectvalue{
+  margin-left:8px;
 }
 
-button:active {
-  background: #262c31;
+.tagimagecontainer{
+  width:97%;
+  height:100%;
+  padding-left:12px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.firstandsecondcolor{
+  width:100%;
+  height:100%;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #E2DEED;
+  color: #645D7F;
+  font-size: 16px;
+}
+
+
+.hlx-select-container:focus-within{
+  border:1px solid var(--hlx-color-primary);
+  .title-name{
+    color: var(--hlx-color-primary) !important;
+  }
+}
+
+.hlx-select-option-value-container:focus-within{
+  color: var(--hlx-text-color-primary);
+  background-color: var(--hlx-color-primary-light);
+}
+
+.select-value:focus-within{
+  font-weight: bold !important;
+}
+
+
+.custom-option1:focus{
+  color: var(--hlx-text-color-primary);
+  background-color: var(--hlx-color-primary-light);
+}
+.custom-option1{
+  color: var(--hlx-text-color-primary);
+  background-color: var(--hlx-color-primary-light);
 }

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

@@ -1,7 +1,7 @@
 @mixin status-wrapper { 
   display: inline-block;
-  padding: 6px; 
-  width: 76px;
+  padding:0px 6px; 
+  // width: 76px;
 }
 
 @mixin status {

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

@@ -186,6 +186,7 @@ th.fixed-column-right {
   .table-sort {
     position: relative;
     display: flex;
+    gap: 2px;
     flex-direction: column;
     .icon-filled-arrow-up {
       font-size: 10px;
@@ -203,14 +204,16 @@ th.fixed-column-right {
       margin-left: 5px;
       cursor: pointer;
       &:hover {
-        color: var(--hlx-color-primary-dark);
+        // color: var(--hlx-color-primary-dark);
       }
     }
   }
 }
 
 .sorting-icon {
-  color: #265e4b;
+  color: white;
+  background-color: #54bd95;
+  border-radius: 2px;
 }
 
 .icon-vertical-dots {
@@ -239,3 +242,7 @@ th.fixed-column-right {
   margin-left: -65px;
   position: relative;
 }
+
+.col-group-new {
+  width: 100% !important;
+}

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

@@ -1,7 +1,7 @@
 .hlx-tag {
   display: flex;
   // padding: 0.2rem 0 0.2rem 0.3rem;
-  padding: 6px;
+  padding: 6px; 
   min-width: min-content;
   max-height: 28px;
   // border-radius: 4px;
@@ -26,13 +26,13 @@
 
   & > .content {
     font-size: 12px;
-    max-width: 10ch;
+    // max-width: 10ch;
     line-height: 2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-& > .contentfull{
+  & > .contentfull{
     font-size: 12px;
     line-height: 2;
     white-space: nowrap;
@@ -54,9 +54,10 @@
       background-color: var(--hlx-color-info);
     }
   }
-&.normal {
+  &.normal {
     // background-color: var(--hlx-color-info-light);
-    color: black;
+    // color: black;
+    
     border: 1px solid #d4d4d4;
     &:hover {
       cursor: default;
@@ -85,7 +86,7 @@
       color: var(--hlx-color-error-light);
     }
   }
- 
+
   &.success {
     background-color: var(--hlx-color-success-light);
     color: getCssVar('color', 'success');