halleyx-ui-framework 11.7.80 → 11.7.81-beta.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.css

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

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

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

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

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

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

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

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,201 +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;
-      }
-    }
-  }
-}
-.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;
-}