halleyx-ui-framework 1.0.4

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

@@ -0,0 +1,147 @@
+#hlx-loaders-006.load-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.9215686275);
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  bottom: 0;
+  &.spinner {
+    background: rgba(255, 255, 255, 0.9215686275);
+    top: 0;
+    right: 0;
+    z-index: 1000;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    bottom: 0;
+  }
+  &.dotted-jumper {
+    height: 100%;
+  }
+  &.horizontal-loop {
+    height: 100%;
+  }
+  //spin-loader
+  .spin-loader {
+    border: 3px solid var(--hlx-border-color-light);
+    border-radius: 50%;
+    border-top: 3px solid var(--hlx-color-primary);
+    border-right: 3px solid var(--hlx-color-primary);
+    border-bottom: 3px solid var(--hlx-color-primary);
+    width: 60px;
+    height: 60px;
+    position: absolute;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 1s linear infinite;
+
+    /* Safari */
+    @-webkit-keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+      }
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+  //dotted jump
+  .dotted-jump-loader {
+    width: 60px;
+    height: 35px;
+    border: 1px solid #d4d4d4;
+    border-radius: 45px;
+    display: flex;
+    gap: 5px;
+    background: var(--hlx-color-white);
+    padding: 5px;
+    position: relative;
+    flex-direction: row;
+    &::before {
+      border: 1px solid var(--hlx-border-color-light);
+      // background: red;
+    }
+
+    .ball {
+      width: 7px;
+      height: 7px;
+      margin-top: auto;
+      border-radius: 50%;
+      background-color: var(--hlx-border-color);
+      -webkit-animation: bounce 0.5s alternate infinite;
+      animation: bounce 0.5s alternate infinite;
+    }
+
+    .ball:first-child {
+      margin-left: auto;
+    }
+    .ball:nth-child(2) {
+      animation-delay: 0.16s;
+      background-color: var(--hlx-color-primary);
+    }
+
+    .ball:nth-child(3) {
+      animation-delay: 0.32s;
+      margin-right: auto;
+    }
+
+    @keyframes bounce {
+      from {
+        tranform: scaleX(1.25);
+      }
+      to {
+        transform: translateY(-12px) scaleX(1);
+      }
+    }
+  }
+  //@horizontal-loader
+  .loading-horz-bar {
+    width: 80%;
+    height: 2px;
+    background-color: #d6cec2;
+    border-radius: 10px;
+    margin-top: 25px;
+    overflow: hidden;
+    position: relative;
+    &::after {
+      content: "";
+      width: 30%;
+      left: 0;
+      height: 2px;
+      position: absolute;
+      background-color: var(--hlx-color-primary);
+      transform: translateX(-20px);
+      -webkit-animation: loop 2s ease infinite;
+      animation: loop 3s ease infinite;
+    }
+    @keyframes loop {
+      0%,
+      100% {
+        transform: translateX(-28px);
+      }
+      50% {
+        transform: translateX(300%);
+      }
+    }
+  }
+}

package/dist/src/assets/styles/mixins/_var.scss

@@ -0,0 +1,89 @@
+@use 'sass:map';
+
+@use 'config.scss';
+@use 'functions.scss' as *;
+@import '../common/var.scss';
+
+@mixin set-css-color-type($type) {
+  --hlx-color-#{$type}: #{map.get($--colors, $type, "base")};
+}
+@mixin set-css-var-type($name, $type, $--variables) {
+  --hlx-#{$name}-#{$type}: #{map.get($--variables, $type)};
+}
+@mixin set-css-text-type($type) {
+  --hlx-text-color-#{$type}: #{map.get($--text-color, $type)};
+}
+@mixin set-css-icon-type($type) {
+  --hlx-icon-size-#{$type}: #{map.get($--icon, $type)};
+}
+@mixin set-css-border-type($type) {
+  @if $type == ''{
+    --hlx-border-color: #{map.get($--border-color, $type)};
+  }
+  @else{
+    --hlx-border-color-#{$type}: #{map.get($--border-color, $type)};
+  }
+}
+@mixin set-css-line-height-type($type) {
+  @if $type == ''{
+  --hlx-line-height: #{map.get($--line-height,$type)};
+  }
+  @else{
+
+    --hlx-line-height-#{$type}: #{map.get($--line-height, $type)};
+  }
+}
+@mixin set-css-font-type($type) {
+  @if $type == type {
+    --hlx-font-#{$type}-content: #{map.get($--font, $type,'content')};
+    --hlx-font-#{$type}-title: #{map.get($--font, $type,'title')};
+  }
+  @if $type == header-size {
+    --hlx-font-#{$type}: #{map.get($--font, $type,'')};
+    --hlx-font-#{$type}-sm: #{map.get($--font, $type,'sm')};
+    --hlx-font-#{$type}-lg: #{map.get($--font, $type,'lg')};
+    --hlx-font-#{$type}-xl: #{map.get($--font, $type,'xl')};
+    --hlx-font-#{$type}-xxl: #{map.get($--font, $type,'xxl')};
+  }
+  @if $type == content-size {
+    --hlx-font-#{$type}: #{map.get($--font, $type,'')};
+    --hlx-font-#{$type}-sm: #{map.get($--font, $type,'sm')};
+    --hlx-font-#{$type}-lg: #{map.get($--font, $type,'lg')};
+    --hlx-font-#{$type}-xl: #{map.get($--font, $type,'xl')};
+    --hlx-font-#{$type}-xxl: #{map.get($--font, $type,'xs')};
+  }
+}
+
+@mixin set-css-var-value($name, $value) {
+    #{joinVarName($name)}: #{$value};
+  }
+@mixin get-css-value($name, $value) {
+    #{joinVarName($name)}: #{$value};
+  }
+@mixin set-css-color-rgb($type) {
+
+    
+    $color: map.get($--colors, $type, 'base');
+    @debug "color #{$color}";
+    @include set-css-var-value(
+      ('color', $type, 'rgb'),
+      #{red($color),
+      green($color),
+      blue($color)}
+    );
+  
+  }
+// @mixin set-css-border-color-rgb($type) {
+//     $color: map.get($--border-color, $type);
+//     // @if $color == null{
+
+//     //   $color:map.get($--border-color, $type,'light');
+//     // }
+//     @debug "color #{$color}";
+//     @include set-css-var-value(
+//       ('color', $type, 'rgb'),
+//       #{red($color),
+//       green($color),
+//       blue($color)}
+//     );
+//   }

package/dist/src/assets/styles/mixins/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'hlx';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';

package/dist/src/assets/styles/mixins/functions.scss

@@ -0,0 +1,36 @@
+@use './config.scss';
+
+@function -font-path($devs) {
+  @if $devs == true {
+    @return "/src/assets/fonts";
+    @debug "divider offset: /src/assets/fonts";
+  }
+  @debug "divider offset: /nodemode/assets/fonts";
+
+  @return "/node_modules/halleyx-ui-framework/dist/src/assets/fonts";
+}
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+// getCssValue('button', 'text-color') => '--el-button-text-color'
+@function getCssValue($args...) {
+  $value:joinVarName($args);
+  @debug "#{$value}";
+  @return $value;
+}
+
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}

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

@@ -0,0 +1,110 @@
+.modal-backdrop{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+     background: rgb(24 24 27 / 20%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000000;
+    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;
+                }
+                .icon-times-regular{
+                    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;
+                }
+                .icon-times-regular{
+                    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;
+   padding-right: 20px;
+    padding-top: 20px;
+}
+
+
+.modal-content{
+    width:100%;
+    height:100%;
+    padding: 20px;
+    // background-color: aqua;
+    overflow-y: auto;
+}

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

@@ -0,0 +1,318 @@
+// // table 
+// // { width: 100%; 
+// //   display: block;
+// //     overflow-x: auto;
+// //     white-space: nowrap; 
+// //   border-collapse: collapse;
+// //   font-family: var(--hlx-font-type-content);
+// //   i{
+// //     cursor: pointer;
+// //   }
+// // }
+// // th{
+// //     text-align: left;
+// // }
+//  th
+  
+//   {  
+//     // width: 100%;
+// //     min-width: 100px;
+// //  text-overflow: ellipsis;
+// //  overflow: hidden;
+// //  white-space: nowrap;
+// //     //  border-bottom: solid 1px $border-color;
+// //      padding: 12px; 
+// }
+// //  td
+// //   { 
+// //      width: 1%;
+// //      font-family: var(--hlx-font-type-content);
+// // //     min-width: max-content;
+// //     // text-overflow: ellipsis;
+// //     // overflow: hidden;
+// //     // white-space: nowrap;
+// // //     //  border-bottom: solid 1px $border-color;
+// //      padding: 12px; 
+// // }
+
+// .table-img{
+
+//     width: 100px;
+//   height: 31.5px;
+//   object-fit: contain;
+  
+// }
+
+// .row-expand{
+//     width:100%;
+//     min-height:65px;
+//     max-height: 260px;
+//     display: none;
+//     overflow:scroll;
+//     border-bottom: 1px solid var(--hlx-border-color);
+//     // overflow-x: scroll;
+//     padding:0px;
+//     // padding:8px;
+//     // border:1px solid red;
+//     flex-direction: column;
+// }
+
+// .expand{
+//   width:100%;
+//   min-height:60px;
+//   max-height: 260px;
+//   display: none;
+//   // overflow:scroll
+//   // overflow-x: scroll;
+//   padding:0px;
+//   // padding:8px;
+//   // border:1px solid red;
+//   flex-direction: column;
+// }
+// .group{
+//   min-height: 148px;
+//   height: 127px;
+//   max-height: 400px;
+//   width:100%;
+//   padding:0px;
+//   // padding:8px;
+// }
+
+// // .table-row-expand-container{
+//   // border-bottom: 1px solid $border-color;
+// // }
+
+// .table-row-expand-icon{
+//   width:50px;
+//   .icon-arrow-down,.icon-arrow-right{
+//     font-size: 18px;
+//   }
+// }
+
+// .parent-row{
+//   width:150px;
+//   // min-width: 150px;
+//   max-width: 150px;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   span{
+//     width:100%;
+//     overflow: hidden;
+//   text-overflow: ellipsis;
+//   }
+// }
+
+// .parenttitle{
+//   // min-width: 150px;
+//   // width:150px;
+//   // max-width: 150px;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   margin-left: 5px;
+//   padding-top: 19px;
+// }
+// .parenttitle1{
+//   // min-width: 150px;
+//   // width:150px;
+//   // max-width: 150px;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   margin-left: 5px;
+//   padding-top: 19px;
+// }
+
+
+// .onehead{
+//   min-width: 322.6666666666667px;
+//   width:322.6666666666667px;
+//   max-width: 322.6666666666667px;
+// }
+
+// .groupbysubtotal{
+//   height: 27px;
+//   width: 27px;
+//   /* text-align: center; */
+//   display: flex;
+//   align-items: center;
+//   border-radius: 17px;
+//   // border: 1px solid ;
+//   background-color: var(--hlx-color-primary-dark);
+//   color: var(--hlx-color-white);
+//   // border: 1px solid #fj5645;
+//   // border: 1px solid red;
+//   justify-content: center;
+// }
+
+
+
+
+// .child-title{
+//   min-width: 260px;
+//   max-width: 260px;
+//     width:100%;
+//     height:100%;
+//     height:50px;
+// }
+
+// .table-wrapper-2{
+//   width:100%; 
+// }
+
+
+// .url-value{
+//   color:var(--hlx-text-color-primary);
+// }
+
+// .sticky-col {
+//   position: -webkit-sticky;
+//   position: sticky;
+//   background-color: white;
+// }
+
+// .first-col {
+//   width: 100px;
+//   min-width: 100px;
+//   max-width: 100px;
+//   left: 0px;
+// }
+// .wrapper {
+//   position: relative;
+//   overflow: auto;
+//   border: 1px solid black;
+//   white-space: nowrap;
+// }
+// .full-row-detail{
+//   display: inline-flex;
+//   align-items: center;
+//   margin-bottom: 10px;
+//   .full-row-modal-value{
+//     margin-left: 10px;
+//   }
+//   .full-row-modal-key{
+//     display: inline-flex;
+//     align-items: center;
+//     justify-content: space-between;
+//     width: 200px;
+//   }
+// }
+
+
+
+// //rowgroup
+
+
+// .group-by{
+//   width:20%;
+//   margin-right: 10px;
+// }
+
+
+// .group-by-row-parent{
+//   width:100%;
+// }
+
+
+// .group-by-row-child:first-child{
+//   width:200px;
+// }
+
+// .group-by-row-child{
+//   width:150px;
+// }
+
+// .row-group-border{
+//   border-bottom: 1px solid var(--hlx-border-color);
+// }
+
+
+// .normalrow{
+//   display:flex
+// }
+
+// .inlinedit{
+//   width:100%;
+//   height:100%;
+//   display: none;
+// }
+
+
+// .showdata{
+//   display: flex;
+// }
+
+// .edit{
+//   display: none;
+// }
+
+// .datavalue{
+//   display: flex;
+// }
+
+// .subfiltercontainer{
+//   position: absolute;
+//   top: 4px;
+//   left: 15px;
+//   height: 198px;
+//   width: 143px;
+//   background: white;
+//   display: flex;
+//   visibility: hidden;
+//   flex-direction: column;
+//   border:1px solid var(--hlx-border-color);
+//   border-radius: 2px;
+//   z-index: 4543445;
+//   span{
+//     width:100%;
+//     height:100%;
+//     p{
+//       padding:5px;
+//       margin:5px;
+//       &:hover{
+//         border-radius: 2px;
+//         background:var(--hlx-color-primary);
+//         color: var(--colors-white);
+//       }
+//     }
+//     .straight-line{
+//       border-top:1px solid var(--hlx-border-color);
+//       // padding:5px;
+//       margin:5px;
+//     }
+//   }
+// }
+
+// .hlx-multi-filter-count{
+//   width: 40px;
+//   padding: 6px;
+//   display: flex;
+//   margin-right: 3px;
+//   justify-content: center;
+//   align-items: center;
+//   // position: absolute;
+//   //   right: 39px;
+// }
+// .hlx-multi-filter-count-check{
+//   width:100%;
+//    background:var(--hlx-color-primary);
+//    border-radius:20px;
+//    text-align: center;
+//    color:var(--colors-white);
+//    padding: 6px;
+//    font-size: 12px;
+// }
+
+
+// .show_custom_Filter{
+//   display: none;
+// }
+// .action-sub-menu {
+//   display: flex;
+//   flex-direction: column;
+//   background: white;
+//   border: 1px solid var(--hlx-border-color);
+//   height: 87px;
+//   border-radius: 5px;
+//   position: absolute;
+//   right: 50px;
+//   z-index: 100;
+// }