halleyx-ui-framework 11.7.94 → 11.7.96

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,88 @@
+@use 'sass:map';
+@use 'sass:color';
+
+@use 'config.scss' as *;
+@use 'functions.scss' as *;
+@use'../common/var.scss' as config ;
+
+
+@mixin set-css-color-type($type) {
+  --hlx-color-#{$type}: #{map.get(config.$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(config.$text-color, $type)};
+}
+@mixin set-css-icon-type($type) {
+  --hlx-icon-size-#{$type}: #{map.get(config.$icon, $type)};
+}
+@mixin set-css-border-type($type) {
+  @if $type == '' {
+    --hlx-border-color: #{map.get(config.$border-color, $type)};
+  } @else {
+    --hlx-border-color-#{$type}: #{map.get(config.$border-color, $type)};
+  }
+}
+@mixin set-css-line-height-type($type) {
+  @if $type == '' {
+    --hlx-line-height: #{map.get(config.$line-height, $type)};
+  } @else {
+    --hlx-line-height-#{$type}: #{map.get(config.$line-height, $type)};
+  }
+}
+@mixin set-css-font-type($type) {
+  @if $type == type {
+    --hlx-font-#{$type}-content: #{map.get(config.$font, $type, 'content')};
+    --hlx-font-#{$type}-title: #{map.get(config.$font, $type, 'title')};
+  }
+  @if $type == header-size {
+    --hlx-font-#{$type}: #{map.get(config.$font, $type, '')};
+    --hlx-font-#{$type}-sm: #{map.get(config.$font, $type, 'sm')};
+    --hlx-font-#{$type}-lg: #{map.get(config.$font, $type, 'lg')};
+    --hlx-font-#{$type}-xl: #{map.get(config.$font, $type, 'xl')};
+    --hlx-font-#{$type}-xxl: #{map.get(config.$font, $type, 'xxl')};
+  }
+  @if $type == content-size {
+    --hlx-font-#{$type}: #{map.get(config.$font, $type, '')};
+    --hlx-font-#{$type}-sm: #{map.get(config.$font, $type, 'sm')};
+    --hlx-font-#{$type}-lg: #{map.get(config.$font, $type, 'lg')};
+    --hlx-font-#{$type}-xl: #{map.get(config.$font, $type, 'xl')};
+    --hlx-font-#{$type}-xxl: #{map.get(config.$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(config.$colors, $type, 'base');
+  // @debug 'color #{$color}';
+  @include set-css-var-value(
+    ('color', $type, 'rgb'),
+    // #{red($color),
+    // green($color),
+    // blue($color)}
+    #{color.channel($color, "red", $space: rgb),
+color.channel($color, "green", $space: rgb),
+color.channel($color, "blue", $space: rgb)}
+  );
+}
+// @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.css

@@ -0,0 +1 @@
+/*# sourceMappingURL=config.css.map */

package/dist/src/assets/styles/mixins/config.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"config.css"}

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.css

@@ -0,0 +1 @@
+/*# sourceMappingURL=functions.css.map */

package/dist/src/assets/styles/mixins/functions.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"functions.css"}

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,201 @@
+.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;
+      }
+    }
+  }
+}
+.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;
+  // padding-right: 20px;
+  // padding-top: 20px;
+}
+
+.modal-content {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  // background-color: aqua;
+  // overflow-y: auto;
+}