halleyx-ui-framework 5.4.2 → 5.4.3

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

@@ -0,0 +1,279 @@
+.hlx-label {
+  max-width: max-content;
+  // min-height: 22px;
+  // max-width: 50px;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  // border-radius: 3px;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  // padding: 5px 10px;
+  // font-size: 14px;
+  // font-weight: bold;
+  // gap: 2px;
+
+  border: 1px solid var(--hlx-border-color);
+  cursor: default;
+  border-radius: 6px;
+
+  height: 28px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  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);
+    color: var(--hlx-color-primary-dark);
+  }
+  // success
+  &.success {
+    border: 1px solid var(--hlx-color-success-dark);
+    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-light);
+    color: var(--hlx-color-info);
+  }
+  // error
+  &.error {
+    border: 1px solid var(--hlx-color-error-dark);
+    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-light);
+    color: var(--hlx-color-warning);
+  }
+  // link
+  &.link {
+    border: 1px solid var(--hlx-color-link);
+    background: var(--hlx-color-link-light);
+    color: var(--hlx-color-link);
+  }
+  &.disabled {
+    border: 1px solid var(--hlx-color-disable-text);
+    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;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0.005em;
+    border-radius: .4em;
+    padding: 1px 3px;
+  }
+  &.lg {
+    height: 38px;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0.5%;
+    padding: 11px 10px;
+    border-radius: 6px;
+  }
+}

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,83 @@
+@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,107 @@
+.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;
+}