halleyx-ui-framework 4.1.7 → 4.1.9

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

@@ -12,30 +12,30 @@
   // 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: .5%;
-    padding: 6px;
-    // overflow: hidden;
-    // text-overflow: ellipsis;
-    // width: 57px;
+  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
+  //v1.2
+  //primary
   // &.primary {
   //   background: var(--hlx-color-primary);
   //   color: var(--hlx-text-color-secondary);
-  //   border:none !important; 
+  //   border:none !important;
   //   &-lite {
-  //     border:none !important; 
+  //     border:none !important;
   //     background: var(--hlx-color-primary-light);
   //     color: var(--hlx-color-primary-dark);
   //   }
@@ -48,9 +48,9 @@
   // &.success {
   //   background: var(--hlx-color-success);
   //   color: var(--hlx-text-color-secondary);
-  //   border:none !important; 
+  //   border:none !important;
   //   &-lite {
-  //     border:none !important; 
+  //     border:none !important;
   //     background: var(--hlx-color-success-light);
   //     color: var(--hlx-color-success-dark);
   //   }
@@ -63,9 +63,9 @@
   // &.info {
   //   background: var(--hlx-color-info);
   //   color: var(--hlx-text-color-secondary);
-  //   border:none !important; 
+  //   border:none !important;
   //   &-lite {
-  //     border:none !important; 
+  //     border:none !important;
   //     background: var(--hlx-color-info-light);
   //     color: var(--hlx-color-info-dark);
   //   }
@@ -78,9 +78,9 @@
   // &.warning {
   //   background: var(--hlx-color-warning);
   //   color: var(--hlx-text-color-secondary);
-  //   border:none !important; 
+  //   border:none !important;
   //   &-lite {
-  //     border:none !important; 
+  //     border:none !important;
   //     background: var(--hlx-color-warning-light);
   //     color: var(--hlx-color-warning-dark);
   //   }
@@ -93,9 +93,9 @@
   // &.error {
   //   background: var(--hlx-color-error);
   //   color: var(--hlx-text-color-secondary);
-  //   border:none !important; 
+  //   border:none !important;
   //   &-lite {
-  //     border:none !important; 
+  //     border:none !important;
   //     background: var(--hlx-color-error-light);
   //     color: var(--hlx-color-error-dark);
   //   }
@@ -108,9 +108,9 @@
   // &.link {
   //   background: var(--hlx-color-link);
   //   color: var(--hlx-text-color-secondary);
-  //   border:none !important; 
+  //   border:none !important;
   //   &-lite {
-  //     border:none !important; 
+  //     border:none !important;
   //     background: var(--hlx-color-link-light);
   //     color: var(--hlx-color-link-dark);
   //   }
@@ -186,11 +186,11 @@
   // }
   // &.disabled {
   //   border:none !important;
-    
+
   //   background: var(--hlx-color-disable);
   //   color: var(--hlx-color-disable-text);
   //   &-lite {
-  //     border:none !important; 
+  //     border:none !important;
   //     background: var(--hlx-color-disable);
   //     color: var(--hlx-color-disable-text);
   //   }
@@ -205,21 +205,18 @@
     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 {
@@ -232,17 +229,14 @@
     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);
@@ -250,11 +244,11 @@
   //disabled v1.0
   // &.disabled {
   //   border:none !important;
-    
+
   //   background: var(--hlx-color-disable);
   //   color: var(--hlx-color-disable-text);
   //   &-lite {
-  //     border:none !important; 
+  //     border:none !important;
   //     background: var(--hlx-color-disable);
   //     color: var(--hlx-color-disable-text);
   //   }
@@ -263,23 +257,23 @@
   //     color: var(--hlx-color-disable-text);
   //   }
   // }
- &.sm {
-  // width: 61px;
-  height: 18px;
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 16px;
-  letter-spacing: .005em;
-  border-radius: 5px;
-  padding: 1px 3px;
- }
- &.lg {
-  height: 38px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-  letter-spacing: .5%;
-  padding: 11px 10px;
-  border-radius: 6px;
- }
+  &.sm {
+    // width: 61px;
+    height: 18px;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0.005em;
+    border-radius: 5px;
+    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

@@ -124,7 +124,7 @@
     overflow: hidden;
     position: relative;
     &::after {
-      content: "";
+      content: '';
       width: 30%;
       left: 0;
       height: 2px;

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

@@ -5,7 +5,7 @@
 @import '../common/var.scss';
 
 @mixin set-css-color-type($type) {
-  --hlx-color-#{$type}: #{map.get($--colors, $type, "base")};
+  --hlx-color-#{$type}: #{map.get($--colors, $type, 'base')};
 }
 @mixin set-css-var-type($name, $type, $--variables) {
   --hlx-#{$name}-#{$type}: #{map.get($--variables, $type)};
@@ -17,62 +17,56 @@
   --hlx-icon-size-#{$type}: #{map.get($--icon, $type)};
 }
 @mixin set-css-border-type($type) {
-  @if $type == ''{
+  @if $type == '' {
     --hlx-border-color: #{map.get($--border-color, $type)};
-  }
-  @else{
+  } @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{
-
+  @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')};
+    --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')};
+    --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')};
+    --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};
-  }
+  #{joinVarName($name)}: #{$value};
+}
 @mixin get-css-value($name, $value) {
-    #{joinVarName($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)}
-    );
-  
-  }
+  $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{

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

@@ -2,12 +2,12 @@
 
 @function -font-path($devs) {
   @if $devs == true {
-    @return "/src/assets/fonts";
-    @debug "divider offset: /src/assets/fonts";
+    @return '/src/assets/fonts';
+    @debug 'divider offset: /src/assets/fonts';
   }
-  @debug "divider offset: /nodemode/assets/fonts";
+  @debug 'divider offset: /nodemode/assets/fonts';
 
-  @return "/node_modules/halleyx-ui-framework/dist/src/assets/fonts";
+  @return '/node_modules/halleyx-ui-framework/dist/src/assets/fonts';
 }
 @function joinVarName($list) {
   $name: '--' + config.$namespace;
@@ -25,12 +25,12 @@
 }
 // getCssValue('button', 'text-color') => '--el-button-text-color'
 @function getCssValue($args...) {
-  $value:joinVarName($args);
-  @debug "#{$value}";
+  $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,110 +1,107 @@
-.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';
+.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;
-            }
+  .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;
+.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;
-}
+.modal-content {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  // background-color: aqua;
+  overflow-y: auto;
+}