halleyx-ui-framework 5.4.0 → 5.4.2

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

@@ -1,147 +0,0 @@
-#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

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

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

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

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

@@ -1,107 +0,0 @@
-.modal-backdrop,.modal-backdrop1 {
-  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;
-        }
-        .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;
-  // 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

@@ -1,305 +0,0 @@
-// // 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;
-// }